@mevdragon/vidfarm-devcli 0.2.11 → 0.2.13

package/dist/src/frontend/template-editor-chat.js

@@ -1,15 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+const MB = 1024 * 1024;
+const MY_FILES_UPLOAD_LIMIT_BYTES = 50 * MB;
+const CHAT_INLINE_IMAGE_TARGET_BYTES = 2 * MB;
+const CHAT_INLINE_IMAGE_HARD_LIMIT_BYTES = 3 * MB;
+const CHAT_INLINE_TOTAL_BUDGET_BYTES = Math.floor(3.5 * MB);
+const CHAT_INLINE_IMAGE_MAX_EDGE = 2048;
+const CHAT_TEMPORARY_UPLOAD_FOLDER = "chat";
 function normalizeUploadedAttachment(raw) {
-    const id = raw.id || raw.attachment_id || "";
+    const id = raw.id || raw.attachment_id || raw.file_id || "";
     const fileName = raw.fileName || raw.file_name;
     const contentType = raw.contentType || raw.content_type;
     const viewUrl = raw.viewUrl || raw.view_url || "";
     if (!id || !fileName || !contentType || !viewUrl) {
         return null;
     }
-    return { id, fileName, contentType, viewUrl };
+    return {
+        id,
+        fileName,
+        contentType,
+        viewUrl,
+        sizeBytes: typeof raw.sizeBytes === "number" ? raw.sizeBytes : raw.size_bytes,
+        folderPath: raw.folderPath ?? raw.folder_path ?? ""
+    };
 }
 function isImageAttachment(attachment) {
     return attachment.contentType.startsWith("image/");
@@ -40,6 +54,12 @@ const MAX_CHAT_PAYLOAD_STRING_LENGTH = 1200;
 const MAX_CHAT_PAYLOAD_ARRAY_ITEMS = 24;
 const MAX_CHAT_PAYLOAD_OBJECT_KEYS = 80;
 const DATA_URL_PREFIX_REGEX = /^data:([^;,]+)[^,]*,/i;
+const SECRET_HEADER_REGEX = /authorization|api[-_]?key|secret|token|vidfarm-api-key/i;
+const CHAT_TRANSPORT_COMPACT_CHAR_THRESHOLD = 48_000;
+const CHAT_TRANSPORT_RECENT_MESSAGES = 14;
+const CHAT_TRANSPORT_MAX_SUMMARY_CHARS = 12_000;
+const CHAT_TRANSPORT_MAX_MESSAGE_CHARS = 1_200;
+const LOCAL_THREAD_MESSAGE_CACHE_LIMIT = 30;
 function formatJsonBody(value) {
     if (value === undefined || value === null || value === "") {
         return "";
@@ -116,10 +136,18 @@ function sanitizeHttpExchange(exchange) {
         ...exchange,
         request: {
             ...exchange.request,
+            headers: Object.fromEntries(Object.entries(exchange.request.headers).map(([key, value]) => [
+                key,
+                SECRET_HEADER_REGEX.test(key) ? "[redacted]" : summarizeLargeString(value)
+            ])),
             body: sanitizeChatPayload(exchange.request.body)
         },
         result: {
             ...exchange.result,
+            headers: Object.fromEntries(Object.entries(exchange.result.headers).map(([key, value]) => [
+                key,
+                SECRET_HEADER_REGEX.test(key) ? "[redacted]" : summarizeLargeString(value)
+            ])),
             body: sanitizeChatPayload(exchange.result.body),
             error: exchange.result.error ? summarizeLargeString(exchange.result.error) : exchange.result.error
         }
@@ -225,17 +253,25 @@ function extractStorageKeyFromUrl(url) {
         return null;
     }
 }
+function safeDecodeURIComponent(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
 function extractFilenameFromUrl(url) {
     const storageKey = extractStorageKeyFromUrl(url);
     if (storageKey) {
-        const fileName = decodeURIComponent(storageKey.split("/").filter(Boolean).pop() || "");
+        const fileName = safeDecodeURIComponent(storageKey.split("/").filter(Boolean).pop() || "");
         if (fileName) {
             return fileName;
         }
     }
     try {
         const pathname = new URL(url).pathname;
-        return decodeURIComponent(pathname.split("/").filter(Boolean).pop() || "");
+        return safeDecodeURIComponent(pathname.split("/").filter(Boolean).pop() || "");
     }
     catch {
         return "";
@@ -245,6 +281,14 @@ function labelFromUrl(url) {
     const filename = extractFilenameFromUrl(url);
     return filename || "Output";
 }
+function downloadNameFromUrl(url, fallback) {
+    const filename = extractFilenameFromUrl(url);
+    if (filename) {
+        return filename;
+    }
+    const normalizedFallback = fallback.trim().replace(/[\\/:*?"<>|]+/g, "-");
+    return normalizedFallback || "download";
+}
 function getMediaKindFromUrl(url) {
     const fileName = extractFilenameFromUrl(url);
     const extension = fileName.split(".").pop()?.trim().toLowerCase() || "";
@@ -328,15 +372,136 @@ function collectLabeledUrls(value, output, seen = new Set(), path = []) {
 }
 function buildJobQueuedMessage(job) {
     return [
-        `Started job \`${job.job_id}\`${job.tracer ? ` with tracer \`${job.tracer}\`` : ""}.`,
+        `Started render \`${job.job_id}\`${job.tracer ? ` with tracer \`${job.tracer}\`` : ""}.`,
         "If it takes a while, ask for an update later and I can check it for you."
     ].join("\n\n");
 }
+function isBrainstormPrimitiveId(value) {
+    return typeof value === "string" && value.startsWith("primitive:brainstorm_");
+}
+function normalizeJobArtifacts(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const artifacts = [];
+    for (const entry of value) {
+        if (!entry || typeof entry !== "object") {
+            continue;
+        }
+        const artifact = entry;
+        const normalized = {
+            artifact_id: typeof artifact.artifact_id === "string" ? artifact.artifact_id : undefined,
+            kind: typeof artifact.kind === "string" ? artifact.kind : undefined,
+            storage_key: typeof artifact.storage_key === "string" ? artifact.storage_key : undefined,
+            public_url: typeof artifact.public_url === "string" ? artifact.public_url : undefined,
+            metadata: artifact.metadata && typeof artifact.metadata === "object"
+                ? artifact.metadata
+                : null,
+            created_at: typeof artifact.created_at === "string" ? artifact.created_at : undefined
+        };
+        if (normalized.public_url || normalized.storage_key) {
+            artifacts.push(normalized);
+        }
+    }
+    return artifacts;
+}
+function artifactLabelFromStorageKey(storageKey) {
+    if (!storageKey) {
+        return "JSON result";
+    }
+    const name = safeDecodeURIComponent(storageKey.split("/").filter(Boolean).pop() || "result.json");
+    return name;
+}
+function artifactFileName(storageKey) {
+    return safeDecodeURIComponent(storageKey?.split("/").filter(Boolean).pop() || "");
+}
+function brainstormLabelFromPrimitiveId(primitiveId) {
+    switch (primitiveId) {
+        case "primitive:brainstorm_hooks":
+            return "Hooks JSON";
+        case "primitive:brainstorm_angles":
+            return "Angles JSON";
+        case "primitive:brainstorm_awareness_stages":
+            return "Awareness JSON";
+        case "primitive:brainstorm_coldstart":
+            return "Coldstart JSON";
+        default:
+            return "Brainstorm JSON";
+    }
+}
+function extractBrainstormJsonArtifactsFromJob(job) {
+    if (job.status !== "succeeded" || !isBrainstormPrimitiveId(job.primitive_id)) {
+        return [];
+    }
+    const previews = [];
+    for (const [index, artifact] of normalizeJobArtifacts(job.artifacts).entries()) {
+        const publicUrl = artifact.public_url?.trim();
+        const storageKey = artifact.storage_key?.trim();
+        const isJsonArtifact = artifact.kind === "json"
+            || Boolean(publicUrl && /\.json(?:[?#]|$)/i.test(publicUrl))
+            || Boolean(storageKey && /\.json$/i.test(storageKey));
+        if (!isJsonArtifact || !publicUrl) {
+            continue;
+        }
+        const fileLabel = artifactLabelFromStorageKey(artifact.storage_key);
+        const prefixLabel = brainstormLabelFromPrimitiveId(job.primitive_id);
+        previews.push({
+            key: artifact.artifact_id || `${job.job_id}:${publicUrl}:${index}`,
+            url: publicUrl,
+            label: fileLabel === "result.json" ? prefixLabel : `${prefixLabel} • ${fileLabel}`,
+            primitiveId: job.primitive_id,
+            primitiveType: job.primitive_type,
+            jobId: job.job_id
+        });
+    }
+    return previews;
+}
+function brainstormDocumentLabelFromPrimitiveId(primitiveId) {
+    switch (primitiveId) {
+        case "primitive:brainstorm_awareness_stages":
+            return "Awareness response";
+        default:
+            return "Brainstorm response";
+    }
+}
+function extractBrainstormDocumentArtifactsFromJob(job) {
+    if (job.status !== "succeeded" || !isBrainstormPrimitiveId(job.primitive_id)) {
+        return [];
+    }
+    const previews = [];
+    for (const [index, artifact] of normalizeJobArtifacts(job.artifacts).entries()) {
+        const publicUrl = artifact.public_url?.trim();
+        const storageKey = artifact.storage_key?.trim();
+        const fileName = artifactFileName(storageKey);
+        const isPrompt = /^prompt\./i.test(fileName);
+        const isMarkdown = artifact.kind === "text"
+            ? Boolean(publicUrl && /\.md(?:[?#]|$)/i.test(publicUrl) || storageKey && /\.md$/i.test(storageKey))
+            : Boolean(publicUrl && /\.md(?:[?#]|$)/i.test(publicUrl) || storageKey && /\.md$/i.test(storageKey));
+        const isText = Boolean(publicUrl && /\.txt(?:[?#]|$)/i.test(publicUrl) || storageKey && /\.txt$/i.test(storageKey));
+        if (!publicUrl || isPrompt || (!isMarkdown && !isText)) {
+            continue;
+        }
+        const defaultLabel = brainstormDocumentLabelFromPrimitiveId(job.primitive_id);
+        previews.push({
+            key: artifact.artifact_id || `${job.job_id}:${publicUrl}:${index}`,
+            url: publicUrl,
+            label: fileName === "response.md" || fileName === "response.txt" ? defaultLabel : artifactLabelFromStorageKey(storageKey),
+            jobId: job.job_id,
+            format: isMarkdown ? "markdown" : "text"
+        });
+    }
+    return previews;
+}
 function buildJobCompletionMessage(job) {
     if (job.status === "succeeded") {
         const urls = [];
         collectLabeledUrls(job.result, urls);
-        const lines = [`Job \`${job.job_id}\` succeeded.`];
+        const lines = [`Render \`${job.job_id}\` succeeded.`];
+        if (isBrainstormPrimitiveId(job.primitive_id)
+            && (extractBrainstormJsonArtifactsFromJob(job).length || extractBrainstormDocumentArtifactsFromJob(job).length)) {
+            lines.push("");
+            lines.push("Open the result below. It contains the brainstorm output you can review, copy, and reuse.");
+        }
         if (urls.length) {
             lines.push("");
             lines.push("Outputs:");
@@ -345,12 +510,12 @@ function buildJobCompletionMessage(job) {
         return lines.join("\n");
     }
     if (job.status === "failed") {
-        return `Job \`${job.job_id}\` failed.${job.error?.message ? ` ${job.error.message}` : ""}`;
+        return `Render \`${job.job_id}\` failed.${job.error?.message ? ` ${job.error.message}` : ""}`;
     }
     if (job.status === "cancelled") {
-        return `Job \`${job.job_id}\` was cancelled.`;
+        return `Render \`${job.job_id}\` was cancelled.`;
     }
-    return `Job \`${job.job_id}\` is ${job.status}.`;
+    return `Render \`${job.job_id}\` is ${job.status}.`;
 }
 function appendDistinctMessageText(current, addition) {
     const normalizedCurrent = current.trim();
@@ -395,8 +560,12 @@ function tryReadJobStatusPayload(value) {
         job_id: record.job_id,
         tracer: typeof record.tracer === "string" ? record.tracer : undefined,
         status: record.status,
+        primitive_id: typeof record.primitive_id === "string" ? record.primitive_id : undefined,
+        primitive_type: typeof record.primitive_type === "string" ? record.primitive_type : undefined,
+        operation_name: typeof record.operation_name === "string" ? record.operation_name : undefined,
         progress: typeof record.progress === "number" ? record.progress : null,
         result: record.result,
+        artifacts: normalizeJobArtifacts(record.artifacts),
         error: record.error && typeof record.error === "object"
             ? {
                 message: typeof record.error.message === "string"
@@ -409,6 +578,24 @@ function tryReadJobStatusPayload(value) {
             : null
     };
 }
+function isPrimitiveRestUrl(value) {
+    if (!value) {
+        return false;
+    }
+    try {
+        const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+        return new URL(value, base).pathname.startsWith("/api/v1/primitives");
+    }
+    catch {
+        return false;
+    }
+}
+function isTerminalJobStatus(status) {
+    return status === "succeeded" || status === "failed" || status === "cancelled";
+}
+function makeJobPollerKey(threadId, assistantMessageId, jobId) {
+    return `${threadId}::${assistantMessageId}::${jobId}`;
+}
 function buildAuthHeaders(apiKey, contentType) {
     const headers = new Headers();
     if (apiKey) {
@@ -436,35 +623,215 @@ async function fileToDataUrl(file) {
         reader.readAsDataURL(file);
     });
 }
+async function blobToDataUrl(blob) {
+    return await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+                return;
+            }
+            reject(new Error("Unable to read compressed attachment contents."));
+        };
+        reader.onerror = () => reject(reader.error ?? new Error("Unable to read compressed attachment contents."));
+        reader.readAsDataURL(blob);
+    });
+}
+function estimateDataUrlBytes(value) {
+    if (!value) {
+        return 0;
+    }
+    const marker = ";base64,";
+    const markerIndex = value.indexOf(marker);
+    if (markerIndex < 0) {
+        return value.length;
+    }
+    const base64 = value.slice(markerIndex + marker.length).replace(/\s/g, "");
+    const padding = base64.endsWith("==") ? 2 : base64.endsWith("=") ? 1 : 0;
+    return Math.max(0, Math.floor(base64.length * 3 / 4) - padding);
+}
+function estimateInlineAttachmentBytes(attachments) {
+    return attachments.reduce((total, attachment) => total + estimateDataUrlBytes(attachment.transportData), 0);
+}
+async function canvasToBlob(canvas, contentType, quality) {
+    return await new Promise((resolve) => {
+        canvas.toBlob((blob) => resolve(blob), contentType, quality);
+    });
+}
+async function decodeImageForCanvas(file) {
+    if (typeof createImageBitmap === "function") {
+        try {
+            const bitmap = await createImageBitmap(file);
+            return {
+                source: bitmap,
+                width: bitmap.width,
+                height: bitmap.height,
+                close: () => bitmap.close()
+            };
+        }
+        catch {
+            // Fall back to HTMLImageElement decoding below.
+        }
+    }
+    return await new Promise((resolve) => {
+        const image = new Image();
+        const objectUrl = URL.createObjectURL(file);
+        image.onload = () => {
+            URL.revokeObjectURL(objectUrl);
+            resolve({
+                source: image,
+                width: image.naturalWidth || image.width,
+                height: image.naturalHeight || image.height
+            });
+        };
+        image.onerror = () => {
+            URL.revokeObjectURL(objectUrl);
+            resolve(null);
+        };
+        image.src = objectUrl;
+    });
+}
+async function createCompressedImageDataUrl(file, remainingBudgetBytes) {
+    if (!file.type.startsWith("image/") || remainingBudgetBytes <= 0) {
+        return undefined;
+    }
+    const hardLimitBytes = Math.min(CHAT_INLINE_IMAGE_HARD_LIMIT_BYTES, remainingBudgetBytes);
+    const targetBytes = Math.min(CHAT_INLINE_IMAGE_TARGET_BYTES, hardLimitBytes);
+    if (file.size <= targetBytes) {
+        return fileToDataUrl(file);
+    }
+    const decoded = await decodeImageForCanvas(file);
+    if (!decoded || decoded.width <= 0 || decoded.height <= 0) {
+        return file.size <= hardLimitBytes ? fileToDataUrl(file) : undefined;
+    }
+    try {
+        let bestBlob = null;
+        const maxEdges = [CHAT_INLINE_IMAGE_MAX_EDGE, 1600, 1280, 1024];
+        const qualities = [0.86, 0.78, 0.7, 0.62, 0.54];
+        for (const maxEdge of maxEdges) {
+            const scale = Math.min(1, maxEdge / Math.max(decoded.width, decoded.height));
+            const width = Math.max(1, Math.round(decoded.width * scale));
+            const height = Math.max(1, Math.round(decoded.height * scale));
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext("2d");
+            if (!context) {
+                continue;
+            }
+            context.fillStyle = "#fff";
+            context.fillRect(0, 0, width, height);
+            context.drawImage(decoded.source, 0, 0, width, height);
+            for (const quality of qualities) {
+                const blob = await canvasToBlob(canvas, "image/jpeg", quality);
+                if (!blob) {
+                    continue;
+                }
+                if (blob.size <= hardLimitBytes && (!bestBlob || blob.size < bestBlob.size)) {
+                    bestBlob = blob;
+                }
+                if (blob.size <= targetBytes) {
+                    return blobToDataUrl(blob);
+                }
+            }
+        }
+        if (bestBlob && (file.size > hardLimitBytes || bestBlob.size < file.size)) {
+            return blobToDataUrl(bestBlob);
+        }
+        return file.size <= hardLimitBytes ? fileToDataUrl(file) : undefined;
+    }
+    finally {
+        decoded.close?.();
+    }
+}
+async function addInlinePreviewForChatUpload(input) {
+    const remainingBudgetBytes = CHAT_INLINE_TOTAL_BUDGET_BYTES - input.currentInlineBytes;
+    const transportData = await createCompressedImageDataUrl(input.file, remainingBudgetBytes).catch(() => undefined);
+    return transportData ? { ...input.attachment, transportData } : input.attachment;
+}
 async function uploadAttachment(input) {
-    const presignResponse = await fetch("/api/v1/user/me/attachments/presign", {
+    const maxBytes = input.maxBytes ?? MY_FILES_UPLOAD_LIMIT_BYTES;
+    const limitLabel = input.limitLabel ?? "50 MB";
+    if (input.file.size > maxBytes) {
+        throw new Error(`File uploads can be at most ${limitLabel}.`);
+    }
+    const uploadFormData = new FormData();
+    uploadFormData.append("file", input.file);
+    uploadFormData.append("folder_path", input.folderPath || "");
+    const uploadResponse = await fetch("/api/v1/user/me/attachments/upload", {
+        method: "POST",
+        headers: buildAuthHeaders(input.apiKey),
+        body: uploadFormData
+    });
+    const uploadPayload = await parseJson(uploadResponse);
+    if (!uploadResponse.ok || !uploadPayload.attachment) {
+        throw new Error(uploadPayload.error || "Unable to upload attachment.");
+    }
+    return normalizeUploadedAttachment(uploadPayload.attachment) ?? (() => {
+        throw new Error("Attachment response was incomplete.");
+    })();
+}
+async function listMyFiles(apiKey) {
+    const response = await fetch("/api/v1/user/me/attachments", {
+        headers: buildAuthHeaders(apiKey)
+    });
+    const payload = await parseJson(response);
+    if (!response.ok) {
+        throw new Error(payload.error || "Unable to load My Files.");
+    }
+    const attachments = [];
+    for (const entry of payload.attachments ?? []) {
+        const normalized = normalizeUploadedAttachment(entry);
+        if (normalized) {
+            attachments.push({ ...normalized, createdAt: entry.createdAt ?? entry.created_at });
+        }
+    }
+    return {
+        attachments,
+        folders: payload.folders ?? []
+    };
+}
+async function uploadTemporaryFile(input) {
+    if (input.file.size > 100 * 1024 * 1024) {
+        throw new Error("Temporary files can be at most 100 MB.");
+    }
+    const presignResponse = await fetch("/api/v1/user/me/temporary-files/presign", {
         method: "POST",
         headers: buildAuthHeaders(input.apiKey, "application/json"),
         body: JSON.stringify({
             file_name: input.file.name,
             content_type: input.file.type || undefined,
-            size_bytes: input.file.size
+            size_bytes: input.file.size,
+            folder_path: input.folderPath || undefined
         })
     });
     const presignPayload = await parseJson(presignResponse);
     if (!presignResponse.ok || !("transport" in presignPayload)) {
-        throw new Error(("error" in presignPayload && presignPayload.error) || "Unable to prepare upload.");
+        throw new Error(("error" in presignPayload && presignPayload.error) || "Unable to prepare temporary upload.");
     }
     if (presignPayload.transport === "server") {
         const uploadFormData = new FormData();
         uploadFormData.append(presignPayload.upload.form_field || "file", input.file);
+        uploadFormData.append("folder_path", input.folderPath || "");
         const uploadResponse = await fetch(presignPayload.upload.url, {
             method: presignPayload.upload.method || "POST",
             headers: buildAuthHeaders(input.apiKey),
             body: uploadFormData
         });
         const uploadPayload = await parseJson(uploadResponse);
-        if (!uploadResponse.ok || !uploadPayload.attachment) {
-            throw new Error(uploadPayload.error || "Unable to upload attachment.");
+        if (!uploadResponse.ok || !uploadPayload.file) {
+            throw new Error(uploadPayload.error || "Unable to upload temporary file.");
         }
-        return normalizeUploadedAttachment(uploadPayload.attachment) ?? (() => {
-            throw new Error("Attachment response was incomplete.");
-        })();
+        const normalized = normalizeUploadedAttachment(uploadPayload.file);
+        if (!normalized) {
+            throw new Error("Temporary file response was incomplete.");
+        }
+        return {
+            ...normalized,
+            createdAt: uploadPayload.file.createdAt ?? uploadPayload.file.created_at,
+            expiresAt: uploadPayload.file.expiresAt ?? uploadPayload.file.expires_at,
+            s3Url: uploadPayload.file.s3Url ?? uploadPayload.file.s3_url
+        };
     }
     const uploadResponse = await fetch(presignPayload.upload.url, {
         method: presignPayload.upload.method,
@@ -474,45 +841,166 @@ async function uploadAttachment(input) {
     if (!uploadResponse.ok) {
         throw new Error(`Upload failed with status ${uploadResponse.status}.`);
     }
-    const finalizeResponse = await fetch("/api/v1/user/me/attachments", {
+    const finalizeResponse = await fetch("/api/v1/user/me/temporary-files", {
         method: "POST",
         headers: buildAuthHeaders(input.apiKey, "application/json"),
         body: JSON.stringify({
-            attachment_id: presignPayload.attachment_id,
+            file_id: presignPayload.file_id,
             file_name: presignPayload.file_name,
             content_type: presignPayload.content_type,
             size_bytes: input.file.size,
-            storage_key: presignPayload.storage_key
+            storage_key: presignPayload.storage_key,
+            folder_path: presignPayload.folder_path || input.folderPath || ""
         })
     });
     const finalizePayload = await parseJson(finalizeResponse);
-    if (!finalizeResponse.ok || !finalizePayload.attachment) {
-        throw new Error(finalizePayload.error || "Unable to save uploaded attachment.");
+    if (!finalizeResponse.ok || !finalizePayload.file) {
+        throw new Error(finalizePayload.error || "Unable to save temporary file.");
     }
-    return normalizeUploadedAttachment(finalizePayload.attachment) ?? (() => {
-        throw new Error("Attachment response was incomplete.");
-    })();
+    const normalized = normalizeUploadedAttachment(finalizePayload.file);
+    if (!normalized) {
+        throw new Error("Temporary file response was incomplete.");
+    }
+    return {
+        ...normalized,
+        createdAt: finalizePayload.file.createdAt ?? finalizePayload.file.created_at,
+        expiresAt: finalizePayload.file.expiresAt ?? finalizePayload.file.expires_at,
+        s3Url: finalizePayload.file.s3Url ?? finalizePayload.file.s3_url
+    };
+}
+async function listTemporaryFiles(apiKey) {
+    const response = await fetch("/api/v1/user/me/temporary-files", {
+        headers: buildAuthHeaders(apiKey)
+    });
+    const payload = await parseJson(response);
+    if (!response.ok) {
+        throw new Error(payload.error || "Unable to load temporary files.");
+    }
+    const files = [];
+    for (const entry of payload.files ?? []) {
+        const normalized = normalizeUploadedAttachment(entry);
+        if (normalized) {
+            files.push({
+                ...normalized,
+                createdAt: entry.createdAt ?? entry.created_at,
+                expiresAt: entry.expiresAt ?? entry.expires_at,
+                s3Url: entry.s3Url ?? entry.s3_url
+            });
+        }
+    }
+    return {
+        files,
+        folders: payload.folders ?? []
+    };
+}
+async function listGeneratedMedia(apiKey, cursor) {
+    const url = new URL("/api/v1/user/me/generated-media", window.location.origin);
+    url.searchParams.set("limit", "24");
+    if (cursor) {
+        url.searchParams.set("cursor", cursor);
+    }
+    const response = await fetch(`${url.pathname}${url.search}`, {
+        headers: buildAuthHeaders(apiKey)
+    });
+    const payload = await parseJson(response);
+    if (!response.ok) {
+        throw new Error(payload.error || "Unable to load recent media.");
+    }
+    const media = [];
+    for (const entry of payload.media ?? []) {
+        const normalized = normalizeUploadedAttachment(entry);
+        if (normalized) {
+            media.push({
+                ...normalized,
+                createdAt: entry.createdAt ?? entry.created_at,
+                jobId: typeof entry.job_id === "string" ? entry.job_id : undefined,
+                tracer: typeof entry.tracer === "string" ? entry.tracer : undefined,
+                templateId: typeof entry.template_id === "string" ? entry.template_id : undefined
+            });
+        }
+    }
+    return {
+        media,
+        nextCursor: payload.next_cursor ?? null
+    };
+}
+function estimateChatMessageChars(messages) {
+    return messages.reduce((total, message) => {
+        const attachmentChars = message.attachments.reduce((sum, attachment) => (sum + attachment.fileName.length + attachment.contentType.length + 32), 0);
+        return total + message.text.length + attachmentChars;
+    }, 0);
+}
+function truncateTransportSummaryText(value, maxChars) {
+    const normalized = value.trim().replace(/\s+/g, " ");
+    if (normalized.length <= maxChars) {
+        return normalized;
+    }
+    return `${normalized.slice(0, Math.max(0, maxChars - 32)).trimEnd()}… [truncated]`;
+}
+function compactTransportHistory(messages) {
+    if (messages.length <= CHAT_TRANSPORT_RECENT_MESSAGES
+        || estimateChatMessageChars(messages) <= CHAT_TRANSPORT_COMPACT_CHAR_THRESHOLD) {
+        return messages;
+    }
+    const recentMessages = messages.slice(-CHAT_TRANSPORT_RECENT_MESSAGES);
+    const oldMessages = messages.slice(0, -CHAT_TRANSPORT_RECENT_MESSAGES);
+    const summaryLines = [];
+    let summaryChars = 0;
+    for (const message of oldMessages) {
+        const attachmentsText = message.attachments.length
+            ? ` Attachments: ${message.attachments.map((attachment) => `${attachment.fileName} (${attachment.contentType})`).join(", ")}.`
+            : "";
+        const line = `[${message.role}]: ${truncateTransportSummaryText(`${message.text}${attachmentsText}`, CHAT_TRANSPORT_MAX_MESSAGE_CHARS)}`;
+        if (summaryChars + line.length > CHAT_TRANSPORT_MAX_SUMMARY_CHARS) {
+            summaryLines.push(`[${oldMessages.length - summaryLines.length} earlier messages omitted]`);
+            break;
+        }
+        summaryLines.push(line);
+        summaryChars += line.length;
+    }
+    return [
+        {
+            id: makeMessageId("assistant"),
+            role: "assistant",
+            text: [
+                "[Earlier in this conversation - compacted summary]",
+                "Older turns were summarized before sending this request so the chat can continue efficiently.",
+                "",
+                summaryLines.join("\n\n")
+            ].join("\n"),
+            attachments: []
+        },
+        ...recentMessages
+    ];
 }
-function toTransportMessages(messages, systemMessages) {
+function buildAttachmentTransportText(attachments) {
+    if (!attachments.length) {
+        return null;
+    }
+    const lines = attachments.map((attachment) => (`- ${attachment.fileName} (${attachment.contentType}): ${attachment.viewUrl}`));
     return [
-        ...systemMessages
-            .filter((entry) => entry.trim().length > 0)
-            .map((entry) => ({
-            role: "system",
-            content: entry
-        })),
-        ...messages.map((message) => ({
+        "Attached file URLs for REST payloads:",
+        ...lines,
+        "Use these exact URLs as prompt_attachments for primitive image generation, source_image_url for primitive image edits, media_url for primitive video slides, or reference attachment URLs when calling template routes."
+    ].join("\n");
+}
+function toTransportMessages(messages) {
+    const latestIndex = messages.length - 1;
+    return messages.map((message, messageIndex) => {
+        const attachmentText = buildAttachmentTransportText(message.attachments);
+        return {
             role: message.role,
             content: [
                 ...(message.text ? [{ type: "text", text: message.text }] : []),
+                ...(attachmentText ? [{ type: "text", text: attachmentText }] : []),
                 ...message.attachments.map((attachment) => ({
                     type: "file",
-                    data: attachment.transportData || attachment.viewUrl,
+                    data: messageIndex === latestIndex ? attachment.transportData || attachment.viewUrl : attachment.viewUrl,
                     mediaType: attachment.contentType
                 }))
             ]
-        }))
-    ];
+        };
+    });
 }
 function readCachedScheduleChannels() {
     const cache = window.__vidfarmFlockPosterCache;
@@ -755,6 +1243,14 @@ function readTracersFromLocation() {
     }
     return normalizeTracerList(output);
 }
+function readThreadIdFromLocation() {
+    const params = new URLSearchParams(window.location.search);
+    return (params.get("thread_id") ||
+        params.get("threadId") ||
+        params.get("chat_id") ||
+        params.get("chatId") ||
+        "").trim();
+}
 function formatThreadTitle(text) {
     const normalized = text.trim().replace(/\s+/g, " ");
     if (!normalized) {
@@ -762,15 +1258,18 @@ function formatThreadTitle(text) {
     }
     return normalized.length > 42 ? `${normalized.slice(0, 42).trimEnd()}…` : normalized;
 }
-function serializeThreads(threads) {
+function serializeThreads(threads, activeThreadId) {
     return threads.map((thread) => ({
         id: thread.id,
+        templateId: thread.templateId,
         title: thread.title,
         createdAt: thread.createdAt,
         updatedAt: thread.updatedAt,
+        lastMessageAt: thread.lastMessageAt ?? null,
+        messageCount: Math.max(thread.messageCount ?? 0, thread.messages.length),
         tracers: thread.tracers,
         hiddenFromView: thread.hiddenFromView,
-        messages: thread.messages.map((message) => ({
+        messages: (thread.id === activeThreadId ? thread.messages.slice(-LOCAL_THREAD_MESSAGE_CACHE_LIMIT) : []).map((message) => ({
             id: message.id,
             role: message.role,
             text: message.text,
@@ -789,7 +1288,7 @@ function serializeThreads(threads) {
         }))
     }));
 }
-function hydrateThreads(raw) {
+function hydrateThreads(raw, fallbackTemplateId) {
     if (!raw) {
         return [];
     }
@@ -802,9 +1301,12 @@ function hydrateThreads(raw) {
             .filter((thread) => thread && typeof thread.id === "string")
             .map((thread) => ({
             id: thread.id,
+            templateId: typeof thread.templateId === "string" && thread.templateId.trim() ? thread.templateId : fallbackTemplateId,
             title: typeof thread.title === "string" && thread.title.trim() ? thread.title : "New chat",
             createdAt: typeof thread.createdAt === "string" ? thread.createdAt : new Date().toISOString(),
             updatedAt: typeof thread.updatedAt === "string" ? thread.updatedAt : new Date().toISOString(),
+            lastMessageAt: typeof thread.lastMessageAt === "string" ? thread.lastMessageAt : null,
+            messageCount: Math.max(typeof thread.messageCount === "number" ? thread.messageCount : 0, Array.isArray(thread.messages) ? thread.messages.length : 0),
             tracers: normalizeTracerList(Array.isArray(thread.tracers) ? thread.tracers.filter((value) => typeof value === "string") : []),
             hiddenFromView: thread.hiddenFromView === true,
             messages: Array.isArray(thread.messages)
@@ -823,15 +1325,18 @@ function hydrateThreads(raw) {
         return [];
     }
 }
-function hydrateThreadRecord(thread) {
+function hydrateThreadRecord(thread, fallbackTemplateId) {
     if (!thread || typeof thread.id !== "string") {
         return null;
     }
     return {
         id: thread.id,
+        templateId: typeof thread.templateId === "string" && thread.templateId.trim() ? thread.templateId : fallbackTemplateId,
         title: typeof thread.title === "string" && thread.title.trim() ? thread.title : "New chat",
         createdAt: typeof thread.createdAt === "string" ? thread.createdAt : new Date().toISOString(),
         updatedAt: typeof thread.updatedAt === "string" ? thread.updatedAt : new Date().toISOString(),
+        lastMessageAt: typeof thread.lastMessageAt === "string" ? thread.lastMessageAt : null,
+        messageCount: Math.max(typeof thread.messageCount === "number" ? thread.messageCount : 0, Array.isArray(thread.messages) ? thread.messages.length : 0),
         tracers: normalizeTracerList(Array.isArray(thread.tracers) ? thread.tracers.filter((value) => typeof value === "string") : []),
         hiddenFromView: thread.hiddenFromView === true,
         messages: Array.isArray(thread.messages)
@@ -849,7 +1354,13 @@ function hydrateThreadRecord(thread) {
 function mergeThreadSets(localThreads, remoteThreads) {
     const byId = new Map();
     for (const thread of remoteThreads) {
-        byId.set(thread.id, thread);
+        const localThread = localThreads.find((entry) => entry.id === thread.id);
+        byId.set(thread.id, {
+            ...thread,
+            lastMessageAt: thread.lastMessageAt ?? localThread?.lastMessageAt ?? null,
+            messageCount: Math.max(thread.messageCount ?? 0, localThread?.messageCount ?? 0, thread.messages.length, localThread?.messages.length ?? 0),
+            messages: thread.messages.length ? thread.messages : (localThread?.messages ?? [])
+        });
     }
     for (const thread of localThreads) {
         if (!byId.has(thread.id)) {
@@ -858,6 +1369,9 @@ function mergeThreadSets(localThreads, remoteThreads) {
     }
     return [...byId.values()].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
 }
+function sortThreadsByUpdatedAt(threads) {
+    return [...threads].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
+}
 function threadMatchesTracers(thread, selectedTracers) {
     if (!selectedTracers.length) {
         return true;
@@ -894,19 +1408,128 @@ function summarizeThreadPreview(thread) {
 function AttachmentChip(props) {
     return (_jsxs("div", { className: "vf-editor-chat-attachment", children: [_jsx("span", { className: "vf-editor-chat-attachment-name", children: props.attachment.fileName }), props.onRemove ? (_jsx("button", { type: "button", className: "vf-editor-chat-attachment-remove", "aria-label": "Remove attachment", onClick: props.onRemove, children: "\u00D7" })) : null] }));
 }
+function DownloadIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M10 3v9" }), _jsx("path", { d: "m6.5 8.5 3.5 3.5 3.5-3.5" }), _jsx("path", { d: "M4 16h12" })] }));
+}
+function PaintBrushIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M4.2 15.8c1.6.5 3.1-.1 3.7-1.7.6-1.4 1.8-2.1 3.5-2.1" }), _jsx("path", { d: "m10.7 11.6 5.2-5.2a1.9 1.9 0 0 0-2.7-2.7L8 8.9" }), _jsx("path", { d: "m7.9 9 3.1 3.1" }), _jsx("path", { d: "M3.5 16.5c1.4.5 3.6.5 4.9-.8" })] }));
+}
+function LinkIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1" }), _jsx("path", { d: "M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2" })] }));
+}
+function CopyIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "7", y: "7", width: "9", height: "9", rx: "2" }), _jsx("path", { d: "M5 12H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1" })] }));
+}
+function ChevronIcon(props) {
+    return (_jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", style: { transform: props.open ? "rotate(90deg)" : "rotate(0deg)" }, children: _jsx("path", { d: "m7 4 6 6-6 6" }) }));
+}
+function mediaDownloadName(preview) {
+    const cleanLabel = preview.label.trim().replace(/[\\/:*?"<>|]+/g, "-");
+    if (cleanLabel) {
+        return cleanLabel;
+    }
+    try {
+        const pathname = new URL(preview.url, window.location.href).pathname;
+        const name = pathname.split("/").filter(Boolean).pop();
+        return name || "media";
+    }
+    catch {
+        return "media";
+    }
+}
+function mediaInpaintHref(preview, ensureTracer = false) {
+    if (typeof window === "undefined" || preview.kind !== "image" || !preview.url) {
+        return "";
+    }
+    const pageUrl = new URL("/inpaint", window.location.origin);
+    const bridge = window.__vidfarmEditorTracers;
+    const existingTracers = bridge?.get() ?? readTracersFromLocation();
+    const tracer = existingTracers[0] || (ensureTracer ? bridge?.add() ?? "" : "");
+    if (tracer) {
+        pageUrl.searchParams.set("tracer", tracer);
+    }
+    pageUrl.searchParams.set("source_image_url", preview.url);
+    pageUrl.searchParams.set("source_image_name", preview.label || mediaDownloadName(preview));
+    return pageUrl.toString();
+}
 function MediaPreviewModal(props) {
     const [isMounted, setIsMounted] = useState(false);
+    const [copyStatus, setCopyStatus] = useState("");
+    const { onClose } = props;
+    const gallery = props.gallery?.length ? props.gallery : [props.preview];
+    const initialIndex = Math.max(0, gallery.findIndex((preview) => preview.url === props.preview.url));
+    const [activeIndex, setActiveIndex] = useState(initialIndex);
+    const activePreview = gallery[activeIndex] || props.preview;
+    const canNavigate = gallery.length > 1;
+    const canInpaint = activePreview.kind === "image";
+    const initialInpaintHref = canInpaint ? mediaInpaintHref(activePreview, false) || "/inpaint" : "/inpaint";
     useEffect(() => {
         setIsMounted(true);
     }, []);
+    useEffect(() => {
+        setCopyStatus("");
+    }, [activePreview.url]);
+    const handleCopyLink = async () => {
+        try {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(activePreview.url);
+            }
+            else {
+                const field = document.createElement("textarea");
+                field.value = activePreview.url;
+                field.style.position = "fixed";
+                field.style.opacity = "0";
+                document.body.appendChild(field);
+                field.focus();
+                field.select();
+                document.execCommand("copy");
+                document.body.removeChild(field);
+            }
+            setCopyStatus("done");
+        }
+        catch {
+            setCopyStatus("error");
+        }
+        window.setTimeout(() => setCopyStatus(""), 1600);
+    };
+    const handleOpenInpaint = (event) => {
+        const href = mediaInpaintHref(activePreview, true);
+        if (!href) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        window.open(href, "_blank", "noopener,noreferrer");
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+                return;
+            }
+            if (!canNavigate) {
+                return;
+            }
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                setActiveIndex((current) => (current - 1 + gallery.length) % gallery.length);
+            }
+            else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                setActiveIndex((current) => (current + 1) % gallery.length);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [canNavigate, gallery.length, onClose]);
     if (!isMounted) {
         return null;
     }
-    return createPortal(_jsx("div", { className: "vf-editor-chat-media-modal-backdrop", onClick: props.onClose, children: _jsxs("div", { className: "vf-editor-chat-media-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-media-modal-header", children: [_jsx("a", { className: "vf-editor-chat-media-modal-link", href: props.preview.url, target: "_blank", rel: "noopener noreferrer", children: props.preview.label }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-close", onClick: props.onClose, "aria-label": "Close media preview", children: "\u00D7" })] }), _jsx("div", { className: "vf-editor-chat-media-modal-body", children: props.preview.kind === "image" ? (_jsx("img", { src: props.preview.url, alt: props.preview.label, className: "vf-editor-chat-media-modal-image" })) : (_jsx("video", { src: props.preview.url, className: "vf-editor-chat-media-modal-video", controls: true, autoPlay: true, playsInline: true })) })] }) }), document.body);
+    return createPortal(_jsx("div", { className: "vf-editor-chat-media-modal-backdrop", onClick: props.onClose, children: _jsxs("div", { className: "vf-editor-chat-media-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-media-modal-header", children: [_jsx("a", { className: "vf-editor-chat-media-modal-link", href: activePreview.url, target: "_blank", rel: "noopener noreferrer", children: canNavigate ? `${activePreview.label} (${activeIndex + 1} of ${gallery.length})` : activePreview.label }), _jsxs("div", { className: "vf-editor-chat-media-modal-actions", children: [canNavigate ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", onClick: () => setActiveIndex((current) => (current - 1 + gallery.length) % gallery.length), "aria-label": "Previous image", title: "Previous image", children: "\u2039" }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", onClick: () => setActiveIndex((current) => (current + 1) % gallery.length), "aria-label": "Next image", title: "Next image", children: "\u203A" })] })) : null, canInpaint ? (_jsx("a", { className: "vf-editor-chat-media-modal-control", href: initialInpaintHref, target: "_blank", rel: "noopener noreferrer", onClick: handleOpenInpaint, "aria-label": "Open image editor", title: "Image edit", children: _jsx(PaintBrushIcon, {}) })) : null, _jsx("a", { className: "vf-editor-chat-media-modal-control", href: activePreview.url, download: mediaDownloadName(activePreview), "aria-label": "Download media", title: "Download", children: _jsx(DownloadIcon, {}) }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", "data-state": copyStatus, onClick: () => void handleCopyLink(), "aria-label": copyStatus === "done" ? "Media URL copied" : copyStatus === "error" ? "Unable to copy media URL" : "Copy media URL", title: copyStatus === "done" ? "Copied" : copyStatus === "error" ? "Copy failed" : "Copy link", children: _jsx(LinkIcon, {}) }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", onClick: props.onClose, "aria-label": "Close media preview", title: "Close", children: "\u00D7" })] })] }), _jsx("div", { className: "vf-editor-chat-media-modal-body", children: activePreview.kind === "image" ? (_jsx("img", { src: activePreview.url, alt: activePreview.label, className: "vf-editor-chat-media-modal-image" })) : (_jsx("video", { src: activePreview.url, className: "vf-editor-chat-media-modal-video", controls: true, autoPlay: true, playsInline: true })) })] }) }), document.body);
 }
 function ImagePreviewButton(props) {
     const [hasError, setHasError] = useState(false);
-    return (_jsx("button", { type: "button", className: "vf-editor-chat-message-thumb-button is-image", onClick: () => props.onOpenModal(props.preview), "aria-label": `Preview ${props.preview.label}`, title: props.preview.label, "data-error": hasError ? "true" : "false", children: hasError ? (_jsx("span", { className: "vf-editor-chat-message-thumb-fallback", children: "Preview unavailable" })) : (_jsx("img", { src: props.preview.url, alt: props.preview.label, className: "vf-editor-chat-message-attachment-thumb", loading: "lazy", onError: () => setHasError(true) })) }));
+    return (_jsx("button", { type: "button", className: "vf-editor-chat-message-thumb-button is-image", onClick: () => props.onOpenModal(props.preview, props.previews), "aria-label": `Preview ${props.preview.label}`, title: props.preview.label, "data-error": hasError ? "true" : "false", children: hasError ? (_jsx("span", { className: "vf-editor-chat-message-thumb-fallback", children: "Preview unavailable" })) : (_jsx("img", { src: props.preview.url, alt: props.preview.label, className: "vf-editor-chat-message-attachment-thumb", loading: "lazy", onError: () => setHasError(true) })) }));
 }
 function VideoPreviewCard(props) {
     return (_jsx("div", { className: "vf-editor-chat-message-attachment-row", children: _jsxs("button", { type: "button", className: "vf-editor-chat-message-thumb-button", onClick: () => props.onOpenModal(props.preview), "aria-label": `Preview ${props.preview.label}`, children: [_jsx("video", { src: props.preview.url, className: "vf-editor-chat-message-attachment-thumb vf-editor-chat-message-video-thumb", preload: "metadata", muted: true, playsInline: true }), _jsx("span", { className: "vf-editor-chat-message-video-play", "aria-hidden": "true" })] }) }));
@@ -915,7 +1538,7 @@ function ImagePreviewRail(props) {
     if (!props.previews.length) {
         return null;
     }
-    return (_jsx("div", { className: "vf-editor-chat-message-image-rail", "aria-label": "Image previews", children: props.previews.map((preview) => (_jsx(ImagePreviewButton, { preview: preview, onOpenModal: props.onOpenModal }, preview.url))) }));
+    return (_jsx("div", { className: "vf-editor-chat-message-image-rail", "aria-label": "Image previews", children: props.previews.map((preview) => (_jsx(ImagePreviewButton, { preview: preview, previews: props.previews, onOpenModal: props.onOpenModal }, preview.url))) }));
 }
 function ComposerAttachmentItem(props) {
     return (_jsxs("div", { className: "vf-editor-chat-composer-attachment-item", children: [isImageAttachment(props.attachment) ? (_jsx("img", { src: props.attachment.viewUrl, alt: props.attachment.fileName, className: "vf-editor-chat-composer-attachment-thumb" })) : (_jsx("div", { className: "vf-editor-chat-composer-attachment-file", "aria-hidden": "true", children: props.attachment.fileName.slice(0, 1).toUpperCase() })), _jsx("div", { className: "vf-editor-chat-composer-attachment-meta", children: _jsx("span", { className: "vf-editor-chat-composer-attachment-name", children: props.attachment.fileName }) }), _jsx("button", { type: "button", className: "vf-editor-chat-composer-attachment-remove", "aria-label": `Remove ${props.attachment.fileName}`, onClick: props.onRemove, children: "\u00D7" })] }));
@@ -936,11 +1559,248 @@ function HttpExchangeCard(props) {
     }, []);
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "vf-editor-chat-http-card", children: _jsxs("button", { type: "button", className: "vf-editor-chat-http-card-header", onClick: () => setIsOpen(true), "aria-label": `Open HTTP details for ${props.exchange.request.method} ${requestUrl}`, children: [_jsx("span", { className: "vf-editor-chat-http-pill", children: props.exchange.request.method }), _jsx("span", { className: "vf-editor-chat-http-url", title: requestUrl, children: displayUrl }), _jsxs("span", { className: "vf-editor-chat-http-status", "data-error": isError ? "true" : "false", "data-success": isSuccess ? "true" : "false", children: [props.exchange.result.status, props.exchange.result.statusText ? ` ${props.exchange.result.statusText}` : ""] }), _jsx("span", { className: "vf-editor-chat-http-expand", "aria-hidden": "true", children: "+" })] }) }), isMounted && isOpen ? createPortal(_jsx("div", { className: "vf-editor-chat-http-modal-backdrop", onClick: () => setIsOpen(false), children: _jsxs("div", { className: "vf-editor-chat-http-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-http-modal-header", children: [_jsxs("div", { className: "vf-editor-chat-http-modal-header-main", children: [_jsx("span", { className: "vf-editor-chat-http-pill", children: props.exchange.request.method }), _jsx("span", { className: "vf-editor-chat-http-modal-url", children: requestUrl }), _jsxs("span", { className: "vf-editor-chat-http-status", "data-error": isError ? "true" : "false", "data-success": isSuccess ? "true" : "false", children: [props.exchange.result.status, props.exchange.result.statusText ? ` ${props.exchange.result.statusText}` : ""] })] }), _jsx("button", { type: "button", className: "vf-editor-chat-http-modal-close", onClick: () => setIsOpen(false), "aria-label": "Close HTTP details", children: "\u00D7" })] }), _jsxs("div", { className: "vf-editor-chat-http-card-body is-modal", children: [props.exchange.explanation ? (_jsx("div", { className: "vf-editor-chat-http-note", children: props.exchange.explanation })) : null, _jsxs("div", { className: "vf-editor-chat-http-block", children: [_jsx("div", { className: "vf-editor-chat-http-label", children: "URL" }), _jsx("pre", { className: "vf-editor-chat-http-pre", children: requestUrl })] }), requestBody ? (_jsxs("div", { className: "vf-editor-chat-http-block", children: [_jsx("div", { className: "vf-editor-chat-http-label", children: "Request" }), _jsx("pre", { className: "vf-editor-chat-http-pre", children: requestBody })] })) : null, _jsxs("div", { className: "vf-editor-chat-http-block", children: [_jsx("div", { className: "vf-editor-chat-http-label", children: "Response" }), _jsx("pre", { className: "vf-editor-chat-http-pre", children: props.exchange.result.error || responseBody || "(empty)" })] }), Object.keys(props.exchange.result.headers).length ? (_jsxs("div", { className: "vf-editor-chat-http-block", children: [_jsx("div", { className: "vf-editor-chat-http-label", children: "Headers" }), _jsx("pre", { className: "vf-editor-chat-http-pre", children: formatJsonBody(props.exchange.result.headers) })] })) : null] })] }) }), document.body) : null] }));
 }
+function formatJsonInlineValue(value) {
+    if (typeof value === "string") {
+        return JSON.stringify(value);
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (value === null) {
+        return "null";
+    }
+    return JSON.stringify(value);
+}
+function copyPlainText(text) {
+    if (navigator.clipboard?.writeText) {
+        return navigator.clipboard.writeText(text);
+    }
+    const field = document.createElement("textarea");
+    field.value = text;
+    field.style.position = "fixed";
+    field.style.opacity = "0";
+    document.body.appendChild(field);
+    field.focus();
+    field.select();
+    document.execCommand("copy");
+    document.body.removeChild(field);
+    return Promise.resolve();
+}
+function JsonViewerLine(props) {
+    return (_jsxs("div", { className: "vf-editor-chat-json-line", style: { paddingLeft: `${props.depth * 18 + 12}px` }, children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-copy", "aria-label": "Copy line", title: "Copy line", onClick: () => props.onCopy(props.text), children: _jsx(CopyIcon, {}) }), _jsx("span", { className: "vf-editor-chat-json-line-text", children: props.text })] }));
+}
+function JsonViewerNode(props) {
+    const value = props.value;
+    const suffix = props.isLast ? "" : ",";
+    if (Array.isArray(value)) {
+        const path = props.path;
+        const isCollapsed = props.collapsedPaths.has(path);
+        const headerText = `${props.linePrefix ?? ""}[`;
+        if (!value.length) {
+            return _jsx(JsonViewerLine, { text: `${props.linePrefix ?? ""}[]${suffix}`, depth: props.depth, onCopy: props.onCopy });
+        }
+        if (isCollapsed) {
+            return (_jsxs("div", { className: "vf-editor-chat-json-toggle-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-toggle-icon", onClick: () => props.togglePath(path), "aria-label": "Expand JSON block", children: _jsx(ChevronIcon, { open: false }) }), _jsx(JsonViewerLine, { text: `${props.linePrefix ?? ""}[ … ]${suffix}`, depth: props.depth, onCopy: props.onCopy })] }));
+        }
+        return (_jsxs("div", { children: [_jsxs("div", { className: "vf-editor-chat-json-toggle-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-toggle-icon", onClick: () => props.togglePath(path), "aria-label": "Collapse JSON block", children: _jsx(ChevronIcon, { open: true }) }), _jsx(JsonViewerLine, { text: headerText, depth: props.depth, onCopy: props.onCopy })] }), value.map((entry, index) => (_jsx(JsonViewerNode, { value: entry, depth: props.depth + 1, path: `${path}.${index}`, isLast: index === value.length - 1, collapsedPaths: props.collapsedPaths, togglePath: props.togglePath, onCopy: props.onCopy }, `${path}:${index}`))), _jsx(JsonViewerLine, { text: `]${suffix}`, depth: props.depth, onCopy: props.onCopy })] }));
+    }
+    if (value && typeof value === "object") {
+        const entries = Object.entries(value);
+        const path = props.path;
+        const isCollapsed = props.collapsedPaths.has(path);
+        const headerText = `${props.linePrefix ?? ""}{`;
+        if (!entries.length) {
+            return _jsx(JsonViewerLine, { text: `${props.linePrefix ?? ""}{}${suffix}`, depth: props.depth, onCopy: props.onCopy });
+        }
+        if (isCollapsed) {
+            return (_jsxs("div", { className: "vf-editor-chat-json-toggle-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-toggle-icon", onClick: () => props.togglePath(path), "aria-label": "Expand JSON block", children: _jsx(ChevronIcon, { open: false }) }), _jsx(JsonViewerLine, { text: `${props.linePrefix ?? ""}{ … }${suffix}`, depth: props.depth, onCopy: props.onCopy })] }));
+        }
+        return (_jsxs("div", { children: [_jsxs("div", { className: "vf-editor-chat-json-toggle-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-toggle-icon", onClick: () => props.togglePath(path), "aria-label": "Collapse JSON block", children: _jsx(ChevronIcon, { open: true }) }), _jsx(JsonViewerLine, { text: headerText, depth: props.depth, onCopy: props.onCopy })] }), entries.map(([key, entry], index) => {
+                    const childPrefix = `${JSON.stringify(key)}: `;
+                    if (entry && typeof entry === "object") {
+                        return (_jsx(JsonViewerNode, { value: entry, depth: props.depth + 1, linePrefix: childPrefix, path: `${path}.${key}`, isLast: index === entries.length - 1, collapsedPaths: props.collapsedPaths, togglePath: props.togglePath, onCopy: props.onCopy }, `${path}:${key}`));
+                    }
+                    return (_jsx(JsonViewerLine, { text: `${childPrefix}${formatJsonInlineValue(entry)}${index === entries.length - 1 ? "" : ","}`, depth: props.depth + 1, onCopy: props.onCopy }, `${path}:${key}`));
+                }), _jsx(JsonViewerLine, { text: `}${suffix}`, depth: props.depth, onCopy: props.onCopy })] }));
+    }
+    return (_jsx(JsonViewerLine, { text: `${props.linePrefix ?? ""}${formatJsonInlineValue(value)}${suffix}`, depth: props.depth, onCopy: props.onCopy }));
+}
+function JsonViewer(props) {
+    const [collapsedPaths, setCollapsedPaths] = useState(new Set());
+    const [copyState, setCopyState] = useState("");
+    const togglePath = (path) => {
+        setCollapsedPaths((current) => {
+            const next = new Set(current);
+            if (next.has(path)) {
+                next.delete(path);
+            }
+            else {
+                next.add(path);
+            }
+            return next;
+        });
+    };
+    const handleCopy = async (text) => {
+        try {
+            await copyPlainText(text);
+            setCopyState("done");
+        }
+        catch {
+            setCopyState("error");
+        }
+        window.setTimeout(() => setCopyState(""), 1400);
+    };
+    return (_jsxs("div", { className: "vf-editor-chat-json-viewer", children: [_jsxs("div", { className: "vf-editor-chat-json-toolbar", children: [_jsx("span", { className: "vf-editor-chat-json-file", children: props.storageKey }), _jsx("span", { className: "vf-editor-chat-json-copy-state", "data-state": copyState, children: copyState === "done" ? "Copied line" : copyState === "error" ? "Copy failed" : "Hover a line to copy" })] }), _jsx("div", { className: "vf-editor-chat-json-scroll", children: _jsx(JsonViewerNode, { value: props.value, depth: 0, path: "root", collapsedPaths: collapsedPaths, togglePath: togglePath, onCopy: handleCopy }) })] }));
+}
+function JsonArtifactModal(props) {
+    const [isMounted, setIsMounted] = useState(false);
+    const [copyStatus, setCopyStatus] = useState("");
+    const downloadName = downloadNameFromUrl(props.artifact.url, `${props.artifact.label}.json`);
+    const formattedData = formatJsonBody(props.data);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const handleCopy = async () => {
+        try {
+            await copyPlainText(formattedData);
+            setCopyStatus("done");
+        }
+        catch {
+            setCopyStatus("error");
+        }
+        window.setTimeout(() => setCopyStatus(""), 1600);
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                props.onClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [props]);
+    if (!isMounted) {
+        return null;
+    }
+    return createPortal(_jsx("div", { className: "vf-editor-chat-media-modal-backdrop", onClick: props.onClose, children: _jsxs("div", { className: "vf-editor-chat-json-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-media-modal-header", children: [_jsx("a", { className: "vf-editor-chat-media-modal-link", href: props.artifact.url, target: "_blank", rel: "noopener noreferrer", children: props.artifact.label }), _jsxs("div", { className: "vf-editor-chat-media-modal-actions", children: [_jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", "data-state": copyStatus, onClick: () => void handleCopy(), title: copyStatus === "done" ? "Copied" : copyStatus === "error" ? "Copy failed" : "Copy JSON", "aria-label": copyStatus === "done" ? "JSON copied" : copyStatus === "error" ? "Unable to copy JSON" : "Copy JSON", children: _jsx(CopyIcon, {}) }), _jsx("a", { className: "vf-editor-chat-media-modal-control", href: props.artifact.url, download: downloadName, title: "Download JSON", "aria-label": "Download JSON", children: _jsx(DownloadIcon, {}) }), _jsx("a", { className: "vf-editor-chat-media-modal-control", href: props.artifact.url, target: "_blank", rel: "noopener noreferrer", title: "Open raw JSON", "aria-label": "Open raw JSON", children: _jsx(LinkIcon, {}) }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", onClick: props.onClose, "aria-label": "Close JSON preview", title: "Close", children: "\u00D7" })] })] }), _jsx("div", { className: "vf-editor-chat-json-modal-body", children: _jsx(JsonViewer, { value: props.data, storageKey: props.artifact.label }) })] }) }), document.body);
+}
+function JsonArtifactCard(props) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const ensureLoaded = async () => {
+        if (data !== null || loading) {
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(props.artifact.url, { credentials: "omit" });
+            const payload = await response.json();
+            setData(payload);
+        }
+        catch (nextError) {
+            setError(nextError instanceof Error ? nextError.message : "Unable to load JSON artifact.");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleToggleExpand = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        if (next) {
+            void ensureLoaded();
+        }
+    };
+    const handleOpenModal = () => {
+        void ensureLoaded();
+        setIsModalOpen(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vf-editor-chat-json-card", children: [_jsxs("div", { className: "vf-editor-chat-json-card-head", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-chat-json-card-kicker", children: "JSON result" }), _jsx("div", { className: "vf-editor-chat-json-card-title", children: props.artifact.label })] }), _jsxs("div", { className: "vf-editor-chat-json-card-actions", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-card-action", onClick: handleToggleExpand, children: isExpanded ? "Hide preview" : "Preview JSON" }), _jsx("button", { type: "button", className: "vf-editor-chat-json-card-action is-strong", onClick: handleOpenModal, children: "Open" })] })] }), isExpanded ? (_jsx("div", { className: "vf-editor-chat-json-card-body", children: loading ? (_jsx("div", { className: "vf-editor-chat-json-state", children: "Loading JSON\u2026" })) : error ? (_jsx("div", { className: "vf-editor-chat-json-state is-error", children: error })) : data !== null ? (_jsx(JsonViewer, { value: data, storageKey: props.artifact.label })) : null })) : null] }), isModalOpen && data !== null ? (_jsx(JsonArtifactModal, { artifact: props.artifact, data: data, onClose: () => setIsModalOpen(false) })) : null] }));
+}
+function TextArtifactViewer(props) {
+    if (props.format === "markdown") {
+        return (_jsx("div", { className: "vf-editor-chat-doc-markdown", dangerouslySetInnerHTML: { __html: renderMarkdownToHtml(props.text) } }));
+    }
+    return _jsx("pre", { className: "vf-editor-chat-doc-pre", children: props.text });
+}
+function DocumentArtifactModal(props) {
+    const [isMounted, setIsMounted] = useState(false);
+    const [copyStatus, setCopyStatus] = useState("");
+    const fallbackExtension = props.artifact.format === "markdown" ? ".md" : ".txt";
+    const downloadName = downloadNameFromUrl(props.artifact.url, `${props.artifact.label}${fallbackExtension}`);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const handleCopy = async () => {
+        try {
+            await copyPlainText(props.text);
+            setCopyStatus("done");
+        }
+        catch {
+            setCopyStatus("error");
+        }
+        window.setTimeout(() => setCopyStatus(""), 1600);
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                props.onClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [props]);
+    if (!isMounted) {
+        return null;
+    }
+    return createPortal(_jsx("div", { className: "vf-editor-chat-media-modal-backdrop", onClick: props.onClose, children: _jsxs("div", { className: "vf-editor-chat-json-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-media-modal-header", children: [_jsx("a", { className: "vf-editor-chat-media-modal-link", href: props.artifact.url, target: "_blank", rel: "noopener noreferrer", children: props.artifact.label }), _jsxs("div", { className: "vf-editor-chat-media-modal-actions", children: [_jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", "data-state": copyStatus, onClick: () => void handleCopy(), title: copyStatus === "done" ? "Copied" : copyStatus === "error" ? "Copy failed" : props.artifact.format === "markdown" ? "Copy markdown" : "Copy text", "aria-label": copyStatus === "done" ? "Document copied" : copyStatus === "error" ? "Unable to copy document" : props.artifact.format === "markdown" ? "Copy markdown" : "Copy text", children: _jsx(CopyIcon, {}) }), _jsx("a", { className: "vf-editor-chat-media-modal-control", href: props.artifact.url, download: downloadName, title: props.artifact.format === "markdown" ? "Download markdown" : "Download text", "aria-label": props.artifact.format === "markdown" ? "Download markdown" : "Download text", children: _jsx(DownloadIcon, {}) }), _jsx("a", { className: "vf-editor-chat-media-modal-control", href: props.artifact.url, target: "_blank", rel: "noopener noreferrer", title: "Open raw file", "aria-label": "Open raw file", children: _jsx(LinkIcon, {}) }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-control", onClick: props.onClose, "aria-label": "Close document preview", title: "Close", children: "\u00D7" })] })] }), _jsx("div", { className: "vf-editor-chat-json-modal-body", children: _jsx("div", { className: "vf-editor-chat-doc-viewer", children: _jsx(TextArtifactViewer, { text: props.text, format: props.artifact.format }) }) })] }) }), document.body);
+}
+function DocumentArtifactCard(props) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [text, setText] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const ensureLoaded = async () => {
+        if (text !== null || loading) {
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(props.artifact.url, { credentials: "omit" });
+            const payload = await response.text();
+            setText(payload);
+        }
+        catch (nextError) {
+            setError(nextError instanceof Error ? nextError.message : "Unable to load document artifact.");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleToggleExpand = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        if (next) {
+            void ensureLoaded();
+        }
+    };
+    const handleOpenModal = () => {
+        void ensureLoaded();
+        setIsModalOpen(true);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vf-editor-chat-json-card", children: [_jsxs("div", { className: "vf-editor-chat-json-card-head", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-chat-json-card-kicker", children: props.artifact.format === "markdown" ? "Markdown result" : "Text result" }), _jsx("div", { className: "vf-editor-chat-json-card-title", children: props.artifact.label })] }), _jsxs("div", { className: "vf-editor-chat-json-card-actions", children: [_jsx("button", { type: "button", className: "vf-editor-chat-json-card-action", onClick: handleToggleExpand, children: isExpanded ? "Hide preview" : "Preview" }), _jsx("button", { type: "button", className: "vf-editor-chat-json-card-action is-strong", onClick: handleOpenModal, children: "Open" })] })] }), isExpanded ? (_jsx("div", { className: "vf-editor-chat-json-card-body", children: loading ? (_jsx("div", { className: "vf-editor-chat-json-state", children: "Loading document\u2026" })) : error ? (_jsx("div", { className: "vf-editor-chat-json-state is-error", children: error })) : text !== null ? (_jsx("div", { className: "vf-editor-chat-doc-viewer is-inline", children: _jsx(TextArtifactViewer, { text: text, format: props.artifact.format }) })) : null })) : null] }), isModalOpen && text !== null ? (_jsx(DocumentArtifactModal, { artifact: props.artifact, text: text, onClose: () => setIsModalOpen(false) })) : null] }));
+}
 function ChatBubble(props) {
     const isAssistant = props.message.role === "assistant";
     const hasVisibleText = props.message.text.trim().length > 0;
     const renderedText = hasVisibleText ? renderMarkdownToHtml(props.message.text) : "";
-    const [mediaModalPreview, setMediaModalPreview] = useState(null);
+    const [mediaModalState, setMediaModalState] = useState(null);
     const imageAttachments = props.message.attachments.filter(isImageAttachment);
     const videoAttachments = props.message.attachments.filter(isVideoAttachment);
     const fileAttachments = props.message.attachments.filter((attachment) => !isImageAttachment(attachment) && !isVideoAttachment(attachment));
@@ -949,29 +1809,426 @@ function ChatBubble(props) {
         : [];
     const inlineImagePreviews = inlineMediaPreviews.filter((preview) => preview.kind === "image");
     const inlineVideoPreviews = inlineMediaPreviews.filter((preview) => preview.kind === "video");
+    const brainstormJsonArtifacts = (props.message.httpExchanges ?? []).flatMap((exchange) => {
+        const job = tryReadJobStatusPayload(exchange.result.body);
+        return job ? extractBrainstormJsonArtifactsFromJob(job) : [];
+    }).filter((artifact, index, items) => items.findIndex((entry) => entry.url === artifact.url) === index);
+    const brainstormDocumentArtifacts = (props.message.httpExchanges ?? []).flatMap((exchange) => {
+        const job = tryReadJobStatusPayload(exchange.result.body);
+        return job ? extractBrainstormDocumentArtifactsFromJob(job) : [];
+    }).filter((artifact, index, items) => items.findIndex((entry) => entry.url === artifact.url) === index);
     return (_jsxs("div", { className: `vf-editor-chat-message ${isAssistant ? "is-assistant" : "is-user"}`, children: [_jsx("div", { className: "vf-editor-chat-message-meta", children: isAssistant ? "Copilot" : "You" }), _jsxs("div", { className: "vf-editor-chat-bubble", "data-pending": props.message.isPending ? "true" : "false", children: [props.message.attachments.length ? (_jsxs("div", { className: "vf-editor-chat-message-attachments", children: [fileAttachments.map((attachment) => (_jsx("div", { className: "vf-editor-chat-message-attachment-row", children: _jsx("a", { className: "vf-editor-chat-message-preview-link", href: attachment.viewUrl, target: "_blank", rel: "noopener noreferrer", children: _jsx(AttachmentChip, { attachment: attachment }) }) }, attachment.id))), _jsx(ImagePreviewRail, { previews: imageAttachments.map((attachment) => ({
                                     kind: "image",
                                     url: attachment.viewUrl,
                                     label: attachment.fileName
-                                })), onOpenModal: setMediaModalPreview }), videoAttachments.map((attachment) => (_jsx(VideoPreviewCard, { preview: {
+                                })), onOpenModal: (preview, gallery) => setMediaModalState({ preview, gallery }) }), videoAttachments.map((attachment) => (_jsx(VideoPreviewCard, { preview: {
                                     kind: "video",
                                     url: attachment.viewUrl,
                                     label: attachment.fileName
-                                }, onOpenModal: setMediaModalPreview }, attachment.id)))] })) : null, props.message.statusText ? (_jsxs("div", { className: "vf-editor-chat-message-status", "aria-live": "polite", children: [_jsx("span", { className: "vf-editor-chat-status-dot" }), props.message.statusText] })) : null, props.message.httpExchanges?.length ? (_jsx("div", { className: "vf-editor-chat-http-list", children: props.message.httpExchanges.map((exchange, index) => (_jsx(HttpExchangeCard, { exchange: exchange }, `${exchange.request.method}:${exchange.request.url}:${index}`))) })) : null, hasVisibleText ? (_jsx("div", { className: "vf-editor-chat-message-body", dangerouslySetInnerHTML: { __html: renderedText } })) : props.message.isPending ? (_jsxs("div", { className: "vf-editor-chat-message-loading", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, inlineMediaPreviews.length ? (_jsxs("div", { className: "vf-editor-chat-message-attachments", children: [_jsx(ImagePreviewRail, { previews: inlineImagePreviews, onOpenModal: setMediaModalPreview }), inlineVideoPreviews.map((preview) => (_jsx(VideoPreviewCard, { preview: preview, onOpenModal: setMediaModalPreview }, preview.url)))] })) : null] }), mediaModalPreview ? (_jsx(MediaPreviewModal, { preview: mediaModalPreview, onClose: () => setMediaModalPreview(null) })) : null] }));
+                                }, onOpenModal: (preview) => setMediaModalState({ preview, gallery: [preview] }) }, attachment.id)))] })) : null, props.message.statusText ? (_jsxs("div", { className: "vf-editor-chat-message-status", "aria-live": "polite", children: [_jsx("span", { className: "vf-editor-chat-status-dot" }), props.message.statusText] })) : null, props.message.httpExchanges?.length ? (_jsx("div", { className: "vf-editor-chat-http-list", children: props.message.httpExchanges.map((exchange, index) => (_jsx(HttpExchangeCard, { exchange: exchange }, `${exchange.request.method}:${exchange.request.url}:${index}`))) })) : null, hasVisibleText ? (_jsx("div", { className: "vf-editor-chat-message-body", dangerouslySetInnerHTML: { __html: renderedText } })) : props.message.isPending ? (_jsxs("div", { className: "vf-editor-chat-message-loading", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, inlineMediaPreviews.length ? (_jsxs("div", { className: "vf-editor-chat-message-attachments", children: [_jsx(ImagePreviewRail, { previews: inlineImagePreviews, onOpenModal: (preview, gallery) => setMediaModalState({ preview, gallery }) }), inlineVideoPreviews.map((preview) => (_jsx(VideoPreviewCard, { preview: preview, onOpenModal: (activePreview) => setMediaModalState({ preview: activePreview, gallery: [activePreview] }) }, preview.url)))] })) : null, brainstormJsonArtifacts.length ? (_jsx("div", { className: "vf-editor-chat-json-list", children: brainstormJsonArtifacts.map((artifact) => (_jsx(JsonArtifactCard, { artifact: artifact }, artifact.key))) })) : null, brainstormDocumentArtifacts.length ? (_jsx("div", { className: "vf-editor-chat-json-list", children: brainstormDocumentArtifacts.map((artifact) => (_jsx(DocumentArtifactCard, { artifact: artifact }, artifact.key))) })) : null] }), mediaModalState ? (_jsx(MediaPreviewModal, { preview: mediaModalState.preview, gallery: mediaModalState.gallery, onClose: () => setMediaModalState(null) })) : null] }));
+}
+function formatBytes(bytes) {
+    if (!bytes || bytes <= 0) {
+        return "Unknown size";
+    }
+    const units = ["B", "KB", "MB", "GB"];
+    let value = bytes;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+    return `${value >= 10 || unitIndex === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[unitIndex]}`;
+}
+function FilePreview(props) {
+    if (isImageAttachment(props.file)) {
+        return _jsx("img", { className: "vf-editor-upload-file-thumb", src: props.file.viewUrl, alt: props.file.fileName });
+    }
+    if (isVideoAttachment(props.file)) {
+        return _jsx("video", { className: "vf-editor-upload-file-thumb", src: props.file.viewUrl, muted: true, playsInline: true });
+    }
+    return _jsx("div", { className: "vf-editor-upload-file-icon", "aria-hidden": "true", children: props.file.fileName.slice(0, 1).toUpperCase() });
+}
+function normalizeFolderPath(value) {
+    return value
+        .split("/")
+        .map((segment) => segment.trim())
+        .filter(Boolean)
+        .join("/");
+}
+function joinFolderPath(parent, name) {
+    return normalizeFolderPath([parent, name].filter(Boolean).join("/"));
+}
+function parentFolderPath(value) {
+    const parts = normalizeFolderPath(value).split("/").filter(Boolean);
+    parts.pop();
+    return parts.join("/");
+}
+function folderDisplayName(value) {
+    const parts = normalizeFolderPath(value).split("/").filter(Boolean);
+    return parts.at(-1) || "All files";
+}
+function getImmediateFolders(input) {
+    const current = normalizeFolderPath(input.currentFolder);
+    const prefix = current ? `${current}/` : "";
+    const names = new Map();
+    for (const folder of input.folders) {
+        const normalized = normalizeFolderPath(folder);
+        if (!normalized || (current && normalized === current) || !normalized.startsWith(prefix)) {
+            continue;
+        }
+        const rest = normalized.slice(prefix.length);
+        const childName = rest.split("/")[0];
+        if (childName) {
+            names.set(childName, joinFolderPath(current, childName));
+        }
+    }
+    for (const file of input.files) {
+        const normalized = normalizeFolderPath(file.folderPath ?? "");
+        if (!normalized || (current && normalized === current) || !normalized.startsWith(prefix)) {
+            continue;
+        }
+        const rest = normalized.slice(prefix.length);
+        const childName = rest.split("/")[0];
+        if (childName) {
+            names.set(childName, joinFolderPath(current, childName));
+        }
+    }
+    return Array.from(names.entries())
+        .map(([name, path]) => ({ name, path }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+function UploadActionIcon(props) {
+    if (props.name === "share") {
+        return (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M14 4h6v6" }), _jsx("path", { d: "M10 14 20 4" }), _jsx("path", { d: "M20 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4" })] }));
+    }
+    if (props.name === "link") {
+        return (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L11 4.93" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 0 0 7.07 7.07L13 19.07" })] }));
+    }
+    return (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M8 6V4h8v2" }), _jsx("path", { d: "M19 6 18 20H6L5 6" }), _jsx("path", { d: "M10 11v5" }), _jsx("path", { d: "M14 11v5" })] }));
+}
+function UploadDrawer(props) {
+    const [tab, setTab] = useState("my-files");
+    const [uploadSelected, setUploadSelected] = useState([]);
+    const [myFiles, setMyFiles] = useState([]);
+    const [myFolders, setMyFolders] = useState([]);
+    const [mySelectedIds, setMySelectedIds] = useState(() => new Set());
+    const [recentMedia, setRecentMedia] = useState([]);
+    const [recentTemporaryFiles, setRecentTemporaryFiles] = useState([]);
+    const [recentSelectedIds, setRecentSelectedIds] = useState(() => new Set());
+    const [recentNextCursor, setRecentNextCursor] = useState(null);
+    const [recentLoading, setRecentLoading] = useState(false);
+    const [myFolderPath, setMyFolderPath] = useState("");
+    const [openFolderMenu, setOpenFolderMenu] = useState(null);
+    const [folderDialog, setFolderDialog] = useState(null);
+    const [status, setStatus] = useState(null);
+    const [error, setError] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(null);
+    const uploadInputRef = useRef(null);
+    const myInputRef = useRef(null);
+    const recentFiles = useMemo(() => {
+        const generated = recentMedia.map((file) => ({ ...file, recentSource: "generated" }));
+        const temporary = recentTemporaryFiles.map((file) => ({ ...file, recentSource: "temporary" }));
+        return [...temporary, ...generated].sort((a, b) => {
+            const aTime = a.createdAt ? Date.parse(a.createdAt) : 0;
+            const bTime = b.createdAt ? Date.parse(b.createdAt) : 0;
+            return bTime - aTime;
+        });
+    }, [recentMedia, recentTemporaryFiles]);
+    const confirmAttachments = tab === "upload"
+        ? uploadSelected
+        : tab === "my-files"
+            ? myFiles.filter((file) => mySelectedIds.has(file.id))
+            : tab === "recents"
+                ? recentFiles.filter((file) => recentSelectedIds.has(file.id))
+                : [];
+    async function refreshMyFiles() {
+        const next = await listMyFiles(props.apiKey);
+        setMyFiles(next.attachments);
+        setMyFolders(next.folders);
+    }
+    async function refreshRecentMedia(cursor) {
+        setRecentLoading(true);
+        try {
+            const [next, temporary] = cursor
+                ? [await listGeneratedMedia(props.apiKey, cursor), null]
+                : await Promise.all([
+                    listGeneratedMedia(props.apiKey),
+                    listTemporaryFiles(props.apiKey)
+                ]);
+            setRecentMedia((current) => cursor ? [...current, ...next.media] : next.media);
+            if (temporary) {
+                setRecentTemporaryFiles(temporary.files);
+            }
+            setRecentNextCursor(next.nextCursor);
+            if (!cursor) {
+                setRecentSelectedIds(new Set());
+            }
+        }
+        finally {
+            setRecentLoading(false);
+        }
+    }
+    useEffect(() => {
+        if (!props.open) {
+            return;
+        }
+        setError(null);
+        setStatus(null);
+        void refreshMyFiles().catch((nextError) => setError(nextError instanceof Error ? nextError.message : "Unable to load My Files."));
+        void refreshRecentMedia().catch((nextError) => setError(nextError instanceof Error ? nextError.message : "Unable to load recent media."));
+    }, [props.open]);
+    function resetAndClose() {
+        setUploadSelected([]);
+        setMySelectedIds(new Set());
+        setRecentSelectedIds(new Set());
+        setStatus(null);
+        setError(null);
+        setOpenFolderMenu(null);
+        setFolderDialog(null);
+        props.onClose();
+    }
+    async function copyText(value) {
+        try {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(value);
+            }
+            else {
+                const textarea = document.createElement("textarea");
+                textarea.value = value;
+                textarea.style.position = "fixed";
+                textarea.style.opacity = "0";
+                document.body.appendChild(textarea);
+                textarea.focus();
+                textarea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textarea);
+            }
+            setStatus("File URL copied.");
+        }
+        catch {
+            setError("Unable to copy file URL.");
+        }
+    }
+    async function uploadFiles(files, scope) {
+        if (!files.length) {
+            return;
+        }
+        setError(null);
+        const uploaded = [];
+        for (const file of files) {
+            try {
+                setStatus(`Uploading ${file.name}...`);
+                if (scope === "upload") {
+                    const temporary = await uploadTemporaryFile({
+                        apiKey: props.apiKey,
+                        file,
+                        folderPath: CHAT_TEMPORARY_UPLOAD_FOLDER
+                    });
+                    const attachment = await addInlinePreviewForChatUpload({
+                        attachment: temporary,
+                        file,
+                        currentInlineBytes: estimateInlineAttachmentBytes([...uploadSelected, ...uploaded])
+                    });
+                    uploaded.push(attachment);
+                    continue;
+                }
+                const attachment = await uploadAttachment({
+                    apiKey: props.apiKey,
+                    file,
+                    folderPath: myFolderPath,
+                    maxBytes: MY_FILES_UPLOAD_LIMIT_BYTES,
+                    limitLabel: "50 MB"
+                });
+                uploaded.push(attachment);
+            }
+            catch (nextError) {
+                setError(nextError instanceof Error ? nextError.message : "Upload failed.");
+            }
+        }
+        if (scope === "upload") {
+            setUploadSelected((current) => [...current, ...uploaded]);
+            await refreshRecentMedia().catch((nextError) => setError(nextError instanceof Error ? nextError.message : "Unable to refresh recent files."));
+        }
+        else if (scope === "my-files") {
+            await refreshMyFiles();
+            setMySelectedIds((current) => new Set([...current, ...uploaded.map((file) => file.id)]));
+        }
+        if (uploaded.length) {
+            setStatus(`${uploaded.length} file${uploaded.length === 1 ? "" : "s"} uploaded.`);
+        }
+    }
+    async function deleteFile(file, scope) {
+        const url = scope === "my-files"
+            ? `/api/v1/user/me/attachments/${encodeURIComponent(file.id)}`
+            : `/api/v1/user/me/temporary-files/${encodeURIComponent(file.id)}`;
+        const response = await fetch(url, {
+            method: "DELETE",
+            headers: buildAuthHeaders(props.apiKey, "application/json")
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            throw new Error(payload.error || "Unable to delete file.");
+        }
+        if (scope === "my-files") {
+            setMyFiles((current) => current.filter((entry) => entry.id !== file.id));
+            setMySelectedIds((current) => {
+                const next = new Set(current);
+                next.delete(file.id);
+                return next;
+            });
+        }
+        setConfirmDelete(null);
+        setStatus("File deleted.");
+    }
+    async function createFolder(scope) {
+        if (scope !== "my-files" || !folderDialog || folderDialog.mode !== "create") {
+            return;
+        }
+        const folderPath = joinFolderPath(folderDialog.baseFolder, folderDialog.value);
+        if (!folderPath) {
+            setError("Choose a folder name.");
+            return;
+        }
+        const response = await fetch("/api/v1/user/me/attachments/folders", {
+            method: "POST",
+            headers: buildAuthHeaders(props.apiKey, "application/json"),
+            body: JSON.stringify({ folder_path: folderPath })
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            setError(payload.error || "Unable to create folder.");
+            return;
+        }
+        setMyFolders((current) => Array.from(new Set([...current, folderPath])).sort());
+        setFolderDialog(null);
+        setStatus("Folder created.");
+    }
+    async function renameFolder(scope, fromFolder) {
+        if (scope !== "my-files" || !folderDialog || folderDialog.mode !== "rename") {
+            return;
+        }
+        const renamedLeaf = folderDialog.value.trim();
+        const toFolder = joinFolderPath(parentFolderPath(fromFolder), renamedLeaf);
+        if (!toFolder || toFolder === fromFolder) {
+            return;
+        }
+        const response = await fetch("/api/v1/user/me/attachments/folders", {
+            method: "PATCH",
+            headers: buildAuthHeaders(props.apiKey, "application/json"),
+            body: JSON.stringify({ from_folder_path: fromFolder, to_folder_path: toFolder })
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            setError(payload.error || "Unable to rename folder.");
+            return;
+        }
+        setMyFolderPath((current) => current === fromFolder || current.startsWith(`${fromFolder}/`)
+            ? `${toFolder}${current.slice(fromFolder.length)}`
+            : current);
+        await refreshMyFiles();
+        setOpenFolderMenu(null);
+        setFolderDialog(null);
+        setStatus("Folder renamed.");
+    }
+    async function deleteFolder(scope, folderPath) {
+        if (scope !== "my-files") {
+            return;
+        }
+        const response = await fetch("/api/v1/user/me/attachments/folders", {
+            method: "DELETE",
+            headers: buildAuthHeaders(props.apiKey, "application/json"),
+            body: JSON.stringify({ folder_path: folderPath })
+        });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            setError(payload.error || "Unable to delete folder.");
+            return;
+        }
+        setMyFolderPath((current) => current === folderPath || current.startsWith(`${folderPath}/`) ? parentFolderPath(folderPath) : current);
+        await refreshMyFiles();
+        setOpenFolderMenu(null);
+        setFolderDialog(null);
+        setStatus("Folder deleted.");
+    }
+    function renderFolderBrowser(scope) {
+        const folders = myFolders;
+        const files = myFiles;
+        const currentFolder = myFolderPath;
+        const setCurrentFolder = setMyFolderPath;
+        const childFolders = getImmediateFolders({ folders, files, currentFolder });
+        const parts = normalizeFolderPath(currentFolder).split("/").filter(Boolean);
+        return (_jsxs("div", { className: "vf-editor-upload-browser", children: [_jsxs("div", { className: "vf-editor-upload-browser-toolbar", children: [_jsxs("div", { className: "vf-editor-upload-breadcrumb", "aria-label": "Current folder", children: [_jsx("button", { type: "button", "data-current": !currentFolder, onClick: () => setCurrentFolder(""), children: "files" }), parts.map((part, index) => {
+                                    const path = parts.slice(0, index + 1).join("/");
+                                    return (_jsxs("span", { className: "vf-editor-upload-breadcrumb-segment", children: [_jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("button", { type: "button", "data-current": path === currentFolder, onClick: () => setCurrentFolder(path), children: part })] }, path));
+                                })] }), _jsx("button", { type: "button", onClick: () => setFolderDialog({ mode: "create", scope: "my-files", baseFolder: currentFolder, value: "" }), children: "New folder" })] }), childFolders.length ? (_jsx("div", { className: "vf-editor-upload-folder-grid", children: childFolders.map((folder) => (_jsxs("article", { className: "vf-editor-upload-folder-row", children: [_jsxs("button", { type: "button", className: "vf-editor-upload-folder-open", onClick: () => setCurrentFolder(folder.path), children: [_jsx("span", { className: "vf-editor-upload-folder-icon", "aria-hidden": "true" }), _jsx("span", { children: folder.name })] }), _jsx("button", { type: "button", className: "vf-editor-upload-folder-menu-button", "aria-label": `Folder actions for ${folder.name}`, onClick: () => setOpenFolderMenu(openFolderMenu === folder.path ? null : folder.path), children: "..." }), openFolderMenu === folder.path ? (_jsxs("div", { className: "vf-editor-upload-folder-menu", children: [_jsx("button", { type: "button", onClick: () => setFolderDialog({ mode: "rename", scope: "my-files", folderPath: folder.path, value: folderDisplayName(folder.path) }), children: "Rename" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => setFolderDialog({ mode: "delete", scope: "my-files", folderPath: folder.path, value: "" }), children: "Delete" })] })) : null] }, folder.path))) })) : null] }));
+    }
+    function renderFileCard(file, scope) {
+        const selected = scope === "my-files"
+            ? mySelectedIds.has(file.id)
+            : scope === "recents"
+                ? recentSelectedIds.has(file.id)
+                : false;
+        const copyUrl = "s3Url" in file && file.s3Url ? file.s3Url : file.viewUrl;
+        return (_jsxs("article", { className: "vf-editor-upload-file-card", "data-selected": selected ? "true" : "false", children: [_jsxs("button", { type: "button", className: "vf-editor-upload-file-select", onClick: () => {
+                        if (scope === "temporary") {
+                            void copyText(copyUrl);
+                            return;
+                        }
+                        const setSelectedIds = scope === "recents" ? setRecentSelectedIds : setMySelectedIds;
+                        setSelectedIds((current) => {
+                            const next = new Set(current);
+                            if (next.has(file.id)) {
+                                next.delete(file.id);
+                            }
+                            else {
+                                next.add(file.id);
+                            }
+                            return next;
+                        });
+                    }, children: [_jsx(FilePreview, { file: file }), _jsxs("span", { className: "vf-editor-upload-file-main", children: [_jsx("span", { className: "vf-editor-upload-file-name", children: file.fileName }), _jsxs("span", { className: "vf-editor-upload-file-meta", children: [formatBytes(file.sizeBytes), file.folderPath ? ` · ${file.folderPath}` : ""] })] })] }), _jsxs("div", { className: "vf-editor-upload-file-actions", children: [scope === "my-files" || scope === "recents" ? (_jsx("span", { className: "vf-editor-upload-selection-indicator", "data-selected": selected ? "true" : "false", "aria-hidden": "true", children: selected ? "✓" : "" })) : null, _jsx("a", { href: file.viewUrl, target: "_blank", rel: "noreferrer", "aria-label": `View ${file.fileName}`, children: _jsx(UploadActionIcon, { name: "share" }) }), _jsx("button", { type: "button", "aria-label": `Copy URL for ${file.fileName}`, onClick: () => void copyText(copyUrl), children: _jsx(UploadActionIcon, { name: "link" }) }), scope === "recents" ? null : (_jsx("button", { type: "button", "aria-label": `Delete ${file.fileName}`, onClick: () => setConfirmDelete(confirmDelete === file.id ? null : file.id), children: _jsx(UploadActionIcon, { name: "trash" }) }))] }), scope !== "recents" && confirmDelete === file.id ? (_jsxs("div", { className: "vf-editor-upload-popconfirm", children: [_jsx("span", { children: "Delete this file?" }), _jsx("button", { type: "button", onClick: () => setConfirmDelete(null), children: "Cancel" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => void deleteFile(file, scope), children: "Delete" })] })) : null] }, file.id));
+    }
+    function renderFolderDialog() {
+        if (!folderDialog) {
+            return null;
+        }
+        const title = folderDialog.mode === "create"
+            ? "New folder"
+            : folderDialog.mode === "rename"
+                ? "Rename folder"
+                : "Delete folder";
+        const targetPath = folderDialog.mode === "delete" ? folderDialog.folderPath : "";
+        return (_jsxs("div", { className: "vf-editor-upload-folder-dialog", role: "dialog", "aria-label": title, children: [_jsx("div", { className: "vf-editor-upload-folder-dialog-title", children: title }), folderDialog.mode === "delete" ? (_jsxs("div", { className: "vf-editor-upload-folder-dialog-copy", children: ["Delete ", _jsx("strong", { children: targetPath }), " and all files inside it?"] })) : (_jsx("input", { value: folderDialog.value, autoFocus: true, placeholder: "folder-name", onChange: (event) => setFolderDialog({ ...folderDialog, value: event.target.value }), onKeyDown: (event) => {
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            if (folderDialog.mode === "create") {
+                                void createFolder(folderDialog.scope);
+                            }
+                            else {
+                                void renameFolder(folderDialog.scope, folderDialog.folderPath);
+                            }
+                        }
+                    } })), _jsxs("div", { className: "vf-editor-upload-folder-dialog-actions", children: [_jsx("button", { type: "button", onClick: () => setFolderDialog(null), children: "Cancel" }), folderDialog.mode === "create" ? (_jsx("button", { type: "button", className: "vf-editor-upload-confirm", onClick: () => void createFolder(folderDialog.scope), children: "Create" })) : folderDialog.mode === "rename" ? (_jsx("button", { type: "button", className: "vf-editor-upload-confirm", onClick: () => void renameFolder(folderDialog.scope, folderDialog.folderPath), children: "Rename" })) : (_jsx("button", { type: "button", "data-danger": "true", onClick: () => void deleteFolder(folderDialog.scope, folderDialog.folderPath), children: "Delete" }))] })] }));
+    }
+    if (!props.open) {
+        return null;
+    }
+    const visibleMyFiles = myFiles.filter((file) => normalizeFolderPath(file.folderPath ?? "") === normalizeFolderPath(myFolderPath));
+    return createPortal(_jsx("div", { className: "vf-editor-upload-drawer-backdrop", children: _jsxs("aside", { className: "vf-editor-upload-drawer", "aria-label": "Upload drawer", children: [_jsxs("div", { className: "vf-editor-upload-header", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-upload-title", children: "Upload" }), _jsx("div", { className: "vf-editor-upload-subtitle", children: "Upload, attach, and copy file URLs." })] }), _jsx("button", { type: "button", className: "vf-editor-upload-close", "aria-label": "Close upload drawer", onClick: resetAndClose, children: "\u00D7" })] }), _jsxs("div", { className: "vf-editor-upload-tabs", role: "tablist", children: [_jsx("button", { type: "button", "data-active": tab === "upload", onClick: () => setTab("upload"), children: "Upload file" }), _jsx("button", { type: "button", "data-active": tab === "my-files", onClick: () => setTab("my-files"), children: "My Files" }), _jsx("button", { type: "button", "data-active": tab === "recents", onClick: () => setTab("recents"), children: "Recents" })] }), _jsxs("div", { className: "vf-editor-upload-body", children: [error ? _jsx("div", { className: "vf-editor-upload-status", "data-tone": "error", children: error }) : null, status ? _jsx("div", { className: "vf-editor-upload-status", children: status }) : null, renderFolderDialog(), tab === "upload" ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "vf-editor-upload-drop", onClick: () => uploadInputRef.current?.click(), children: ["Upload files to chat", _jsx("span", { children: "Stored in Recents and attached after Confirm. Images get compressed inline previews when possible; other files attach by URL. Max 100 MB each." })] }), _jsx("input", { ref: uploadInputRef, type: "file", multiple: true, hidden: true, onChange: (event) => {
+                                        void uploadFiles(Array.from(event.target.files ?? []), "upload");
+                                        event.target.value = "";
+                                    } }), _jsx("div", { className: "vf-editor-upload-list", children: uploadSelected.map((file) => (_jsxs("article", { className: "vf-editor-upload-file-card", "data-selected": "true", children: [_jsx(FilePreview, { file: file }), _jsxs("span", { className: "vf-editor-upload-file-main", children: [_jsx("span", { className: "vf-editor-upload-file-name", children: file.fileName }), _jsx("span", { className: "vf-editor-upload-file-meta", children: formatBytes(file.sizeBytes) })] }), _jsx("button", { type: "button", onClick: () => setUploadSelected((current) => current.filter((entry) => entry.id !== file.id)), children: "\u00D7" })] }, file.id))) })] })) : tab === "my-files" ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "vf-editor-upload-drop", onClick: () => myInputRef.current?.click(), children: ["Add to My Files", _jsxs("span", { children: ["Uploads into ", folderDisplayName(myFolderPath), " and auto-selects. Max 50 MB each."] })] }), _jsx("input", { ref: myInputRef, type: "file", multiple: true, hidden: true, onChange: (event) => {
+                                        void uploadFiles(Array.from(event.target.files ?? []), "my-files");
+                                        event.target.value = "";
+                                    } }), renderFolderBrowser("my-files"), _jsx("div", { className: "vf-editor-upload-list", children: visibleMyFiles.length ? visibleMyFiles.map((file) => renderFileCard(file, "my-files")) : _jsx("div", { className: "vf-editor-upload-empty", children: "No files in this folder." }) })] })) : tab === "recents" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "vf-editor-upload-list", children: recentFiles.length ? recentFiles.map((file) => renderFileCard(file, "recents")) : (_jsx("div", { className: "vf-editor-upload-empty", children: recentLoading ? "Loading recent files..." : "No recent files yet." })) }), recentNextCursor ? (_jsx("button", { type: "button", className: "vf-editor-upload-more", disabled: recentLoading, onClick: () => void refreshRecentMedia(recentNextCursor).catch((nextError) => setError(nextError instanceof Error ? nextError.message : "Unable to load more recent media.")), children: recentLoading ? "Loading..." : "Load more generated media" })) : null] })) : null] }), _jsxs("div", { className: "vf-editor-upload-footer", children: [_jsx("button", { type: "button", onClick: resetAndClose, children: "Cancel" }), _jsxs("div", { className: "vf-editor-upload-footer-confirm", children: [_jsxs("span", { children: [confirmAttachments.length, " file", confirmAttachments.length === 1 ? "" : "s", " selected"] }), _jsx("button", { type: "button", className: "vf-editor-upload-confirm", disabled: !confirmAttachments.length, onClick: () => {
+                                        props.onConfirm(confirmAttachments);
+                                        resetAndClose();
+                                    }, children: "Confirm" })] })] })] }) }), document.body);
 }
 export function TemplateEditorChat({ boot }) {
+    const isBrainstormSurface = boot.template.templateId === "chat-brainstorm";
     const storageKeys = useMemo(() => makeStorageKeys(boot.template.templateId), [boot.template.templateId]);
     const chatStorage = useMemo(() => getChatStorage(), []);
-    const systemMessages = useMemo(() => {
-        const messages = [];
-        if (boot.cachedContext.directorSkill?.trim()) {
-            messages.push(`Director skill context:\n\n${boot.cachedContext.directorSkill.trim()}`);
-        }
-        if (boot.cachedContext.templateSkill?.trim()) {
-            messages.push(`Template skill context:\n\n${boot.cachedContext.templateSkill.trim()}`);
-        }
-        return messages;
-    }, [boot.cachedContext.directorSkill, boot.cachedContext.templateSkill]);
     const fileInputRef = useRef(null);
     const viewportRef = useRef(null);
     const shouldStickToChatBottomRef = useRef(true);
@@ -981,8 +2238,10 @@ export function TemplateEditorChat({ boot }) {
     const activeJobPollersRef = useRef(new Map());
     const jobPollGateRef = useRef({ nextAvailableAt: 0 });
     const threadsRef = useRef([]);
+    const loadedThreadDetailsRef = useRef(new Set());
     const [threads, setThreads] = useState([]);
     const [activeThreadId, setActiveThreadId] = useState(null);
+    const [loadingThreadId, setLoadingThreadId] = useState(null);
     const [openThreadMenu, setOpenThreadMenu] = useState(null);
     const [draft, setDraft] = useState("");
     const [pendingAttachments, setPendingAttachments] = useState([]);
@@ -992,6 +2251,8 @@ export function TemplateEditorChat({ boot }) {
     const [hasHydrated, setHasHydrated] = useState(false);
     const [isDropTarget, setIsDropTarget] = useState(false);
     const [isMobileChatOpen, setIsMobileChatOpen] = useState(false);
+    const [showHistoryPanel, setShowHistoryPanel] = useState(false);
+    const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
     const [tracers, setTracers] = useState(() => {
         const bridge = typeof window !== "undefined" ? window.__vidfarmEditorTracers : null;
         if (bridge) {
@@ -1010,21 +2271,47 @@ export function TemplateEditorChat({ boot }) {
             return null;
         }
         const url = new URL(boot.threadsUrl, window.location.origin);
-        url.searchParams.set("template_id", boot.template.templateId);
+        if (!isBrainstormSurface) {
+            url.searchParams.set("template_id", boot.template.templateId);
+        }
+        url.searchParams.set("include_messages", "false");
+        url.searchParams.set("limit", isBrainstormSurface ? "200" : "50");
         return url.toString();
-    }, [boot.template.templateId, boot.threadsUrl]);
+    }, [boot.template.templateId, boot.threadsUrl, isBrainstormSurface]);
     const threadDetailUrl = (threadId) => (boot.threadsUrl
         ? new URL(`${boot.threadsUrl.replace(/\/$/, "")}/${encodeURIComponent(threadId)}`, window.location.origin).toString()
         : null);
     useEffect(() => {
-        const hydratedThreads = hydrateThreads(chatStorage?.getItem(storageKeys.threads) ?? null);
+        const hydratedThreads = hydrateThreads(chatStorage?.getItem(storageKeys.threads) ?? null, boot.template.templateId);
         const savedActiveThread = chatStorage?.getItem(storageKeys.activeThread) ?? null;
+        const requestedThreadId = readThreadIdFromLocation();
         const currentTracers = window.__vidfarmEditorTracers?.get() ?? readTracersFromLocation();
-        const visibleHydratedThreads = hydratedThreads.filter((thread) => !thread.hiddenFromView);
+        const nextHydratedThreads = requestedThreadId && !hydratedThreads.some((thread) => thread.id === requestedThreadId)
+            ? [
+                {
+                    id: requestedThreadId,
+                    templateId: boot.template.templateId,
+                    title: "Loading chat",
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                    lastMessageAt: null,
+                    messageCount: 0,
+                    tracers: currentTracers,
+                    hiddenFromView: false,
+                    messages: []
+                },
+                ...hydratedThreads
+            ]
+            : hydratedThreads;
+        const visibleHydratedThreads = nextHydratedThreads.filter((thread) => !thread.hiddenFromView);
         const newestMatchingThread = visibleHydratedThreads.find((thread) => threadMatchesTracers(thread, currentTracers));
-        threadsRef.current = hydratedThreads;
-        setThreads(hydratedThreads);
-        if (savedActiveThread
+        threadsRef.current = nextHydratedThreads;
+        setThreads(nextHydratedThreads);
+        if (requestedThreadId
+            && visibleHydratedThreads.some((thread) => thread.id === requestedThreadId)) {
+            setActiveThreadId(requestedThreadId);
+        }
+        else if (savedActiveThread
             && visibleHydratedThreads.some((thread) => thread.id === savedActiveThread)
             && (!currentTracers.length || visibleHydratedThreads.some((thread) => thread.id === savedActiveThread && threadMatchesTracers(thread, currentTracers)))) {
             setActiveThreadId(savedActiveThread);
@@ -1033,7 +2320,7 @@ export function TemplateEditorChat({ boot }) {
             setActiveThreadId(newestMatchingThread?.id ?? visibleHydratedThreads[0]?.id ?? null);
         }
         setHasHydrated(true);
-    }, [chatStorage, storageKeys]);
+    }, [boot.template.templateId, chatStorage, storageKeys]);
     useEffect(() => {
         if (!boot.vidfarmApiKey || !threadListUrl) {
             return;
@@ -1041,22 +2328,45 @@ export function TemplateEditorChat({ boot }) {
         const abortController = new AbortController();
         void (async () => {
             try {
-                const response = await fetch(threadListUrl, {
-                    method: "GET",
-                    headers: buildAuthHeaders(boot.vidfarmApiKey),
-                    signal: abortController.signal
-                });
-                if (!response.ok) {
-                    return;
-                }
-                const payload = await response.json().catch(() => null);
-                const remoteThreads = Array.isArray(payload?.threads)
-                    ? payload.threads.map(hydrateThreadRecord).filter((thread) => Boolean(thread))
-                    : [];
+                const remoteThreads = [];
+                let nextCursor = null;
+                const seenCursors = new Set();
+                do {
+                    const pageUrl = new URL(threadListUrl);
+                    if (nextCursor) {
+                        pageUrl.searchParams.set("cursor", nextCursor);
+                    }
+                    const response = await fetch(pageUrl.toString(), {
+                        method: "GET",
+                        headers: buildAuthHeaders(boot.vidfarmApiKey),
+                        signal: abortController.signal
+                    });
+                    if (!response.ok) {
+                        return;
+                    }
+                    const payload = await response.json().catch(() => null);
+                    if (Array.isArray(payload?.threads)) {
+                        remoteThreads.push(...payload.threads
+                            .map((thread) => hydrateThreadRecord(thread, boot.template.templateId))
+                            .filter((thread) => Boolean(thread)));
+                    }
+                    const candidateCursor = typeof payload?.next_cursor === "string" && payload.next_cursor ? payload.next_cursor : null;
+                    if (!candidateCursor || seenCursors.has(candidateCursor)) {
+                        nextCursor = null;
+                    }
+                    else {
+                        seenCursors.add(candidateCursor);
+                        nextCursor = candidateCursor;
+                    }
+                } while (nextCursor && !abortController.signal.aborted);
                 if (!remoteThreads.length) {
                     return;
                 }
-                setThreads((current) => mergeThreadSets(current, remoteThreads));
+                setThreads((current) => {
+                    const nextThreads = mergeThreadSets(current, remoteThreads);
+                    threadsRef.current = nextThreads;
+                    return nextThreads;
+                });
                 setActiveThreadId((current) => {
                     if (current && remoteThreads.some((thread) => thread.id === current)) {
                         return current;
@@ -1073,7 +2383,7 @@ export function TemplateEditorChat({ boot }) {
         return () => {
             abortController.abort();
         };
-    }, [boot.vidfarmApiKey, threadListUrl]);
+    }, [boot.template.templateId, boot.vidfarmApiKey, threadListUrl]);
     useEffect(() => {
         threadsRef.current = threads;
     }, [threads]);
@@ -1098,12 +2408,12 @@ export function TemplateEditorChat({ boot }) {
             return;
         }
         try {
-            chatStorage?.setItem(storageKeys.threads, JSON.stringify(serializeThreads(threads)));
+            chatStorage?.setItem(storageKeys.threads, JSON.stringify(serializeThreads(threads, activeThreadId)));
         }
         catch (error) {
             console.warn("Unable to persist editor chat threads.", error);
         }
-    }, [chatStorage, hasHydrated, storageKeys, threads]);
+    }, [activeThreadId, chatStorage, hasHydrated, storageKeys, threads]);
     useEffect(() => {
         if (!hasHydrated) {
             return;
@@ -1122,6 +2432,74 @@ export function TemplateEditorChat({ boot }) {
     }, [activeThreadId, chatStorage, hasHydrated, storageKeys]);
     const activeThread = useMemo(() => threads.find((thread) => thread.id === activeThreadId) ?? null, [activeThreadId, threads]);
     const openThreadMenuThread = useMemo(() => threads.find((thread) => thread.id === openThreadMenu?.threadId) ?? null, [openThreadMenu?.threadId, threads]);
+    useEffect(() => {
+        if (!hasHydrated || !boot.vidfarmApiKey || !activeThreadId) {
+            return;
+        }
+        const existingThread = threadsRef.current.find((thread) => thread.id === activeThreadId);
+        if (loadedThreadDetailsRef.current.has(activeThreadId)) {
+            return;
+        }
+        const requestedThreadId = readThreadIdFromLocation();
+        if (existingThread
+            && activeThreadId !== requestedThreadId
+            && (existingThread.messageCount ?? 0) === 0) {
+            loadedThreadDetailsRef.current.add(activeThreadId);
+            return;
+        }
+        const url = threadDetailUrl(activeThreadId);
+        if (!url) {
+            return;
+        }
+        const abortController = new AbortController();
+        const shouldShowLoadingState = !existingThread?.messages.length;
+        if (shouldShowLoadingState) {
+            setLoadingThreadId(activeThreadId);
+        }
+        void (async () => {
+            try {
+                const response = await fetch(url, {
+                    method: "GET",
+                    headers: buildAuthHeaders(boot.vidfarmApiKey),
+                    signal: abortController.signal
+                });
+                if (!response.ok) {
+                    const isLocalOnlyThread = Boolean(existingThread && activeThreadId !== requestedThreadId);
+                    if (response.status === 404 && !isLocalOnlyThread) {
+                        setLastError(`Chat ID ${activeThreadId} was not found for this account.`);
+                    }
+                    loadedThreadDetailsRef.current.add(activeThreadId);
+                    return;
+                }
+                const payload = await response.json().catch(() => null);
+                const remoteThread = payload?.thread ? hydrateThreadRecord(payload.thread, boot.template.templateId) : null;
+                if (!remoteThread) {
+                    return;
+                }
+                loadedThreadDetailsRef.current.add(remoteThread.id);
+                setLastError(null);
+                setThreads((current) => {
+                    const nextThreads = mergeThreadSets(current, [remoteThread]);
+                    threadsRef.current = nextThreads;
+                    return nextThreads;
+                });
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "AbortError") {
+                    return;
+                }
+            }
+            finally {
+                if (!abortController.signal.aborted) {
+                    setLoadingThreadId((current) => (current === activeThreadId ? null : current));
+                }
+            }
+        })();
+        return () => {
+            abortController.abort();
+            setLoadingThreadId((current) => (current === activeThreadId ? null : current));
+        };
+    }, [activeThreadId, boot.vidfarmApiKey, boot.threadsUrl, hasHydrated]);
     useEffect(() => {
         if (!hasHydrated || activeThread && !activeThread.hiddenFromView) {
             return;
@@ -1143,6 +2521,12 @@ export function TemplateEditorChat({ boot }) {
     const isAnyThreadSending = sendingThreadId !== null;
     const isActiveThreadSending = Boolean(activeThreadId && sendingThreadId === activeThreadId);
     const canSend = useMemo(() => (draft.trim() || pendingAttachments.length) && !isAnyThreadSending, [draft, pendingAttachments.length, isAnyThreadSending]);
+    useEffect(() => {
+        if (!hasHydrated || !boot.vidfarmApiKey || !activeThread || !activeThread.messages.length) {
+            return;
+        }
+        resumePersistedJobPolling(activeThread);
+    }, [activeThread, boot.vidfarmApiKey, hasHydrated]);
     async function updateRemoteThreadState(thread, overrides) {
         if (!boot.vidfarmApiKey || !boot.threadsUrl || !thread.messages.length) {
             return;
@@ -1163,6 +2547,37 @@ export function TemplateEditorChat({ boot }) {
             })
         }).catch(() => { });
     }
+    async function appendRemoteThreadExchange(input) {
+        if (!boot.vidfarmApiKey || !boot.threadsUrl || !input.messages.length) {
+            return;
+        }
+        const url = threadDetailUrl(input.threadId);
+        if (!url) {
+            return;
+        }
+        await fetch(`${url}/exchanges`, {
+            method: "POST",
+            headers: buildAuthHeaders(boot.vidfarmApiKey, "application/json"),
+            body: JSON.stringify({
+                template_id: input.templateId ?? boot.template.templateId,
+                title: input.title || "New chat",
+                tracers: input.tracers,
+                messages: input.messages.map((message) => ({
+                    id: message.id,
+                    role: message.role,
+                    text: message.text,
+                    attachments: message.attachments.map((attachment) => ({
+                        id: attachment.id,
+                        fileName: attachment.fileName,
+                        contentType: attachment.contentType,
+                        viewUrl: attachment.viewUrl
+                    })),
+                    toolExchanges: message.toolExchanges,
+                    httpExchanges: message.httpExchanges?.map(sanitizeHttpExchange)
+                }))
+            })
+        }).catch(() => { });
+    }
     async function deleteRemoteThreadState(threadId) {
         if (!boot.vidfarmApiKey || !boot.threadsUrl) {
             return;
@@ -1343,12 +2758,16 @@ export function TemplateEditorChat({ boot }) {
         const threadId = makeThreadId();
         const nextThread = {
             id: threadId,
+            templateId: boot.template.templateId,
             title: formatThreadTitle(seedText || ""),
             createdAt: now,
             updatedAt: now,
+            lastMessageAt: null,
+            messageCount: 0,
             tracers: normalizeTracerList(tracers),
             messages: []
         };
+        threadsRef.current = [nextThread, ...threadsRef.current];
         setThreads((current) => [nextThread, ...current]);
         setActiveThreadId(threadId);
         return threadId;
@@ -1359,9 +2778,12 @@ export function TemplateEditorChat({ boot }) {
         const threadId = makeThreadId();
         const nextThread = {
             id: threadId,
+            templateId: boot.template.templateId,
             title: options?.title || "New chat",
             createdAt: now,
             updatedAt: now,
+            lastMessageAt: null,
+            messageCount: 0,
             tracers: threadTracers,
             messages: []
         };
@@ -1388,9 +2810,10 @@ export function TemplateEditorChat({ boot }) {
             return;
         }
         const remainingThreads = threads.filter((entry) => entry.id !== threadId);
-        for (const [jobId, poller] of activeJobPollersRef.current.entries()) {
+        threadsRef.current = threadsRef.current.filter((entry) => entry.id !== threadId);
+        for (const [pollerKey, poller] of activeJobPollersRef.current.entries()) {
             if (poller.threadId === threadId) {
-                stopJobPoller(jobId);
+                stopJobPoller(pollerKey);
             }
         }
         setThreads(remainingThreads);
@@ -1402,10 +2825,9 @@ export function TemplateEditorChat({ boot }) {
         void deleteRemoteThreadState(threadId);
     }
     function updateThread(threadId, updater) {
-        setThreads((current) => {
-            const next = current.map((thread) => (thread.id === threadId ? updater(thread) : thread));
-            return [...next].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
-        });
+        const nextThreads = sortThreadsByUpdatedAt(threadsRef.current.map((thread) => (thread.id === threadId ? updater(thread) : thread)));
+        threadsRef.current = nextThreads;
+        setThreads(nextThreads);
     }
     function attachTracersToThread(threadId, nextTracers) {
         const normalized = normalizeTracerList(nextTracers);
@@ -1447,7 +2869,11 @@ export function TemplateEditorChat({ boot }) {
         const normalized = text.toLowerCase();
         return /(?:own|separate|different|new)\s+(?:tracer\s+and\s+)?chat\s+threads?/.test(normalized)
             || /chat\s+threads?.{0,80}(?:own|separate|different|new)\s+tracers?/.test(normalized)
-            || /each.{0,80}(?:own|separate|different|new).{0,80}chat\s+threads?/.test(normalized);
+            || /each.{0,80}(?:own|separate|different|new).{0,80}chat\s+threads?/.test(normalized)
+            || /(?:own|separate|different|new)\s+tracers?/.test(normalized)
+            || /(?:each|every|per|one\s+per).{0,80}(?:own|separate|different|new).{0,80}tracers?/.test(normalized)
+            || /(?:own|separate|different|new)\s+tracers?.{0,80}(?:each|every|per|outputs?|pieces?|posts?|jobs?|generations?)/.test(normalized)
+            || /(?:outputs?|pieces?|posts?|jobs?|generations?).{0,80}(?:own|separate|different|new)\s+tracers?/.test(normalized);
     }
     function mirrorJobToTracerThread(input) {
         const existingThreadId = findThreadIdForTracer(input.tracer, input.sourceThreadId);
@@ -1469,22 +2895,33 @@ export function TemplateEditorChat({ boot }) {
         const statusText = input.job.status === "succeeded" || input.job.status === "failed" || input.job.status === "cancelled"
             ? null
             : `Job ${input.job.job_id} is being tracked. ${getJobPollCadenceText()}`;
+        const mirroredMessage = {
+            id: messageId,
+            role: "assistant",
+            text: messageText,
+            attachments: [],
+            httpExchanges: input.httpExchange ? [input.httpExchange] : [],
+            statusText,
+            isPending: false
+        };
         updateThread(targetThreadId, (thread) => ({
             ...thread,
             updatedAt: now,
             messages: [
                 ...thread.messages,
-                {
-                    id: messageId,
-                    role: "assistant",
-                    text: messageText,
-                    attachments: [],
-                    httpExchanges: input.httpExchange ? [input.httpExchange] : [],
-                    statusText,
-                    isPending: false
-                }
+                mirroredMessage
             ]
         }));
+        const targetThread = threadsRef.current.find((thread) => thread.id === targetThreadId);
+        if (targetThread) {
+            void appendRemoteThreadExchange({
+                threadId: targetThreadId,
+                templateId: targetThread.templateId,
+                title: targetThread.title,
+                tracers: targetThread.tracers,
+                messages: [mirroredMessage]
+            });
+        }
         return { threadId: targetThreadId, messageId };
     }
     function editThreadTracers(threadId) {
@@ -1532,9 +2969,9 @@ export function TemplateEditorChat({ boot }) {
         if (!confirmed) {
             return;
         }
-        for (const [jobId, poller] of activeJobPollersRef.current.entries()) {
+        for (const [pollerKey, poller] of activeJobPollersRef.current.entries()) {
             if (poller.threadId === threadId) {
-                stopJobPoller(jobId);
+                stopJobPoller(pollerKey);
             }
         }
         updateThread(threadId, (current) => ({
@@ -1588,8 +3025,8 @@ export function TemplateEditorChat({ boot }) {
             left: Math.max(8, Math.min(window.innerWidth - menuWidth - 8, rect.right - menuWidth))
         });
     }
-    function stopJobPoller(jobId) {
-        const poller = activeJobPollersRef.current.get(jobId);
+    function stopJobPoller(pollerKey) {
+        const poller = activeJobPollersRef.current.get(pollerKey);
         if (!poller) {
             return;
         }
@@ -1597,10 +3034,10 @@ export function TemplateEditorChat({ boot }) {
             window.clearTimeout(poller.timeoutId);
         }
         poller.abortController?.abort();
-        activeJobPollersRef.current.delete(jobId);
+        activeJobPollersRef.current.delete(pollerKey);
     }
-    function scheduleNextJobPoll(jobId, runPoll, delayMs) {
-        const poller = activeJobPollersRef.current.get(jobId);
+    function scheduleNextJobPoll(pollerKey, runPoll, delayMs) {
+        const poller = activeJobPollersRef.current.get(pollerKey);
         if (!poller) {
             return;
         }
@@ -1631,7 +3068,7 @@ export function TemplateEditorChat({ boot }) {
     }
     function getJobPollCadenceText(ms = getJobPollIntervalMs()) {
         return activeJobPollersRef.current.size >= JOB_POLL_BUSY_THRESHOLD
-            ? `Many jobs are active, so the next check is in ${formatJobPollInterval(ms)}.`
+            ? `Many renders are active, so the next check is in ${formatJobPollInterval(ms)}.`
             : `Checking again gently every ${formatJobPollInterval(ms)}.`;
     }
     function rescheduleActiveJobPollersForLoad() {
@@ -1656,10 +3093,11 @@ export function TemplateEditorChat({ boot }) {
         return slotAt - now;
     }
     function scheduleJobPolling(input) {
-        if (activeJobPollersRef.current.has(input.jobId)) {
+        const pollerKey = makeJobPollerKey(input.threadId, input.assistantMessageId, input.jobId);
+        if (activeJobPollersRef.current.has(pollerKey)) {
             return;
         }
-        activeJobPollersRef.current.set(input.jobId, {
+        activeJobPollersRef.current.set(pollerKey, {
             timeoutId: null,
             abortController: null,
             runPoll: null,
@@ -1670,7 +3108,7 @@ export function TemplateEditorChat({ boot }) {
             threadId: input.threadId
         });
         const runPoll = async () => {
-            const poller = activeJobPollersRef.current.get(input.jobId);
+            const poller = activeJobPollersRef.current.get(pollerKey);
             if (!poller) {
                 return;
             }
@@ -1680,7 +3118,7 @@ export function TemplateEditorChat({ boot }) {
             const now = Date.now();
             const pollIntervalMs = getJobPollIntervalMs();
             if (poller.lastPollAt !== null && now - poller.lastPollAt < pollIntervalMs) {
-                scheduleNextJobPoll(input.jobId, runPoll, pollIntervalMs - (now - poller.lastPollAt));
+                scheduleNextJobPoll(pollerKey, runPoll, pollIntervalMs - (now - poller.lastPollAt));
                 return;
             }
             if (poller.attempts >= JOB_POLL_MAX_ATTEMPTS) {
@@ -1694,16 +3132,16 @@ export function TemplateEditorChat({ boot }) {
                         }
                         : message))
                 }));
-                stopJobPoller(input.jobId);
+                stopJobPoller(pollerKey);
                 return;
             }
             if (document.visibilityState !== "visible" || !navigator.onLine) {
-                scheduleNextJobPoll(input.jobId, runPoll, pollIntervalMs);
+                scheduleNextJobPoll(pollerKey, runPoll, pollIntervalMs);
                 return;
             }
             const globalDelayMs = reserveJobPollSlot(Date.now());
             if (globalDelayMs > 0) {
-                scheduleNextJobPoll(input.jobId, runPoll, globalDelayMs);
+                scheduleNextJobPoll(pollerKey, runPoll, globalDelayMs);
                 return;
             }
             poller.inFlight = true;
@@ -1722,7 +3160,9 @@ export function TemplateEditorChat({ boot }) {
                         }
                         : message))
                 }));
-                const url = `/api/v1/templates/${encodeURIComponent(boot.template.templateId)}/jobs/${encodeURIComponent(input.jobId)}`;
+                const url = input.primitiveId || isPrimitiveRestUrl(input.sourceRequestUrl)
+                    ? `/api/v1/primitives/jobs/${encodeURIComponent(input.jobId)}`
+                    : `/api/v1/templates/${encodeURIComponent(boot.template.templateId)}/jobs/${encodeURIComponent(input.jobId)}`;
                 const response = await fetch(url, {
                     method: "GET",
                     headers: buildAuthHeaders(boot.vidfarmApiKey),
@@ -1756,11 +3196,11 @@ export function TemplateEditorChat({ boot }) {
                         }));
                         const nextStatusText = payload
                             ? payload.status === "succeeded"
-                                ? `Job ${payload.job_id} succeeded.`
+                                ? `Render ${payload.job_id} succeeded.`
                                 : payload.status === "failed" || payload.status === "cancelled"
-                                    ? `Job ${payload.job_id} ${payload.status}.${payload.error?.message ? ` ${payload.error.message}` : ""}`
-                                    : `Job ${payload.job_id} is ${payload.status}. Next check in ${formatJobPollInterval(pollIntervalMs)}.`
-                            : `Job ${input.jobId} checked. Next check in ${formatJobPollInterval(pollIntervalMs)}.`;
+                                    ? `Render ${payload.job_id} ${payload.status}.${payload.error?.message ? ` ${payload.error.message}` : ""}`
+                                    : `Render ${payload.job_id} is ${payload.status}. Next check in ${formatJobPollInterval(pollIntervalMs)}.`
+                            : `Render ${input.jobId} checked. Next check in ${formatJobPollInterval(pollIntervalMs)}.`;
                         return {
                             ...message,
                             httpExchanges: nextHttpExchanges,
@@ -1772,7 +3212,7 @@ export function TemplateEditorChat({ boot }) {
                     })
                 }));
                 if (payload && (payload.status === "succeeded" || payload.status === "failed" || payload.status === "cancelled")) {
-                    stopJobPoller(input.jobId);
+                    stopJobPoller(pollerKey);
                     return;
                 }
             }
@@ -1792,7 +3232,7 @@ export function TemplateEditorChat({ boot }) {
                 }));
             }
             finally {
-                const latestPoller = activeJobPollersRef.current.get(input.jobId);
+                const latestPoller = activeJobPollersRef.current.get(pollerKey);
                 if (!latestPoller) {
                     return;
                 }
@@ -1800,21 +3240,55 @@ export function TemplateEditorChat({ boot }) {
                 latestPoller.abortController = null;
                 if (latestPoller.attempts < JOB_POLL_MAX_ATTEMPTS
                     && latestPoller.timeoutId === null
-                    && activeJobPollersRef.current.has(input.jobId)) {
-                    scheduleNextJobPoll(input.jobId, runPoll, getJobPollIntervalMs());
+                    && activeJobPollersRef.current.has(pollerKey)) {
+                    scheduleNextJobPoll(pollerKey, runPoll, getJobPollIntervalMs());
                 }
             }
         };
-        const initialPoller = activeJobPollersRef.current.get(input.jobId);
+        const initialPoller = activeJobPollersRef.current.get(pollerKey);
         if (initialPoller) {
             initialPoller.runPoll = runPoll;
         }
-        const poller = activeJobPollersRef.current.get(input.jobId);
+        const poller = activeJobPollersRef.current.get(pollerKey);
         if (poller) {
-            scheduleNextJobPoll(input.jobId, runPoll, getJobPollIntervalMs());
+            scheduleNextJobPoll(pollerKey, runPoll, input.initialDelayMs ?? getJobPollIntervalMs());
             rescheduleActiveJobPollersForLoad();
         }
     }
+    function resumePersistedJobPolling(thread) {
+        for (const message of thread.messages) {
+            if (message.role !== "assistant" || !message.httpExchanges?.length) {
+                continue;
+            }
+            for (const exchange of message.httpExchanges) {
+                if (exchange.request.method !== "POST") {
+                    continue;
+                }
+                const payload = tryReadJobStatusPayload(exchange.result.body);
+                const pollerKey = makeJobPollerKey(thread.id, message.id, payload?.job_id ?? "");
+                if (!payload || isTerminalJobStatus(payload.status) || activeJobPollersRef.current.has(pollerKey)) {
+                    continue;
+                }
+                const hasTerminalFollowup = message.httpExchanges.some((candidate) => {
+                    const candidatePayload = tryReadJobStatusPayload(candidate.result.body);
+                    return candidatePayload?.job_id === payload.job_id && isTerminalJobStatus(candidatePayload.status);
+                });
+                if (hasTerminalFollowup) {
+                    continue;
+                }
+                scheduleJobPolling({
+                    threadId: thread.id,
+                    assistantMessageId: message.id,
+                    jobId: payload.job_id,
+                    tracer: payload.tracer,
+                    initialStatus: payload.status,
+                    primitiveId: payload.primitive_id,
+                    sourceRequestUrl: exchange.request.url,
+                    initialDelayMs: JOB_POLL_MIN_TIMER_MS
+                });
+            }
+        }
+    }
     async function appendFiles(files) {
         if (!files.length) {
             return;
@@ -1824,15 +3298,17 @@ export function TemplateEditorChat({ boot }) {
         let lastUploadError = null;
         for (const file of files) {
             try {
-                const transportData = await fileToDataUrl(file);
-                const uploaded = await uploadAttachment({
+                const uploaded = await uploadTemporaryFile({
                     apiKey: boot.vidfarmApiKey,
-                    file
+                    file,
+                    folderPath: CHAT_TEMPORARY_UPLOAD_FOLDER
                 });
-                uploadedAttachments.push({
-                    ...uploaded,
-                    transportData
+                const attachment = await addInlinePreviewForChatUpload({
+                    attachment: uploaded,
+                    file,
+                    currentInlineBytes: estimateInlineAttachmentBytes([...pendingAttachments, ...uploadedAttachments])
                 });
+                uploadedAttachments.push(attachment);
             }
             catch (error) {
                 lastUploadError = error instanceof Error ? error.message : "Unable to upload attachment.";
@@ -1877,6 +3353,7 @@ export function TemplateEditorChat({ boot }) {
         forceChatBottomOnNextRenderRef.current = true;
         const threadId = ensureActiveThread(draft);
         const now = new Date().toISOString();
+        const threadForSend = threadsRef.current.find((thread) => thread.id === threadId);
         const userMessage = {
             id: makeMessageId("user"),
             role: "user",
@@ -1891,8 +3368,8 @@ export function TemplateEditorChat({ boot }) {
             statusText: "Waiting for AI response…",
             isPending: true
         };
-        const existingMessages = threads.find((thread) => thread.id === threadId)?.messages ?? [];
-        const historyForTransport = [...existingMessages, userMessage];
+        const existingMessages = threadForSend?.messages ?? [];
+        const historyForTransport = compactTransportHistory([...existingMessages, userMessage]);
         updateThread(threadId, (thread) => ({
             ...thread,
             title: thread.messages.length === 0 ? formatThreadTitle(userMessage.text) : thread.title,
@@ -1911,42 +3388,44 @@ export function TemplateEditorChat({ boot }) {
             assistantMessageId: assistantMessage.id
         };
         try {
+            const requestBody = JSON.stringify({
+                messages: toTransportMessages(historyForTransport),
+                thread_id: threadId,
+                thread_template_id: threadForSend?.templateId ?? boot.template.templateId,
+                thread_title: existingMessages.length === 0 ? formatThreadTitle(userMessage.text) : (threadForSend?.title ?? formatThreadTitle(userMessage.text)),
+                thread_tracers: requestTracers,
+                client_context: buildBrowserDateContext(),
+                user_message: {
+                    id: userMessage.id,
+                    role: userMessage.role,
+                    text: userMessage.text,
+                    attachments: userMessage.attachments.map((attachment) => ({
+                        id: attachment.id,
+                        fileName: attachment.fileName,
+                        contentType: attachment.contentType,
+                        viewUrl: attachment.viewUrl
+                    }))
+                },
+                assistant_message: {
+                    id: assistantMessage.id
+                },
+                template: {
+                    ...boot.template,
+                    tracers: requestTracers,
+                    defaultRequestTracer,
+                    activeTracer: defaultRequestTracer
+                },
+                cached_context: {
+                    ...boot.cachedContext,
+                    ...readCachedScheduleChannels(),
+                    ...readSelectedLibraryPosts()
+                }
+            });
             const response = await fetch(boot.apiUrl || "/api/v1/editor-chat", {
                 method: "POST",
                 headers: buildAuthHeaders(boot.vidfarmApiKey, "application/json"),
                 signal: abortController.signal,
-                body: JSON.stringify({
-                    messages: toTransportMessages(historyForTransport, systemMessages),
-                    thread_id: threadId,
-                    thread_title: existingMessages.length === 0 ? formatThreadTitle(userMessage.text) : (threads.find((entry) => entry.id === threadId)?.title ?? formatThreadTitle(userMessage.text)),
-                    thread_tracers: requestTracers,
-                    client_context: buildBrowserDateContext(),
-                    user_message: {
-                        id: userMessage.id,
-                        role: userMessage.role,
-                        text: userMessage.text,
-                        attachments: userMessage.attachments.map((attachment) => ({
-                            id: attachment.id,
-                            fileName: attachment.fileName,
-                            contentType: attachment.contentType,
-                            viewUrl: attachment.viewUrl
-                        }))
-                    },
-                    assistant_message: {
-                        id: assistantMessage.id
-                    },
-                    template: {
-                        ...boot.template,
-                        tracers: requestTracers,
-                        defaultRequestTracer,
-                        activeTracer: defaultRequestTracer
-                    },
-                    cached_context: {
-                        ...boot.cachedContext,
-                        ...readCachedScheduleChannels(),
-                        ...readSelectedLibraryPosts()
-                    }
-                })
+                body: requestBody
             });
             if (!response.ok) {
                 const payload = await response.json().catch(() => ({}));
@@ -2049,18 +3528,16 @@ export function TemplateEditorChat({ boot }) {
                         })
                         : null;
                     if (mirroredJobTarget
-                        && toolResultRecordForMirror?.request?.method === "POST"
-                        && toolResultRecordForMirror?.response?.status === 202
                         && jobStatusPayloadForMirror
-                        && jobStatusPayloadForMirror.status !== "succeeded"
-                        && jobStatusPayloadForMirror.status !== "failed"
-                        && jobStatusPayloadForMirror.status !== "cancelled") {
+                        && !isTerminalJobStatus(jobStatusPayloadForMirror.status)) {
                         scheduleJobPolling({
                             threadId: mirroredJobTarget.threadId,
                             assistantMessageId: mirroredJobTarget.messageId,
                             jobId: jobStatusPayloadForMirror.job_id,
                             tracer: jobStatusPayloadForMirror.tracer,
-                            initialStatus: jobStatusPayloadForMirror.status
+                            initialStatus: jobStatusPayloadForMirror.status,
+                            primitiveId: jobStatusPayloadForMirror.primitive_id,
+                            sourceRequestUrl: toolResultRecordForMirror?.request?.url
                         });
                     }
                     updateThread(threadId, (thread) => ({
@@ -2102,30 +3579,35 @@ export function TemplateEditorChat({ boot }) {
                                 }
                                 attachTracersToThread(threadId, [jobStatusPayload.tracer]);
                             }
-                            if (toolResultRecord?.request?.method === "POST"
-                                && toolResultRecord?.response?.status === 202
-                                && jobStatusPayload
+                            if (jobStatusPayload
                                 && !mirroredJobTarget
-                                && jobStatusPayload.status !== "succeeded"
-                                && jobStatusPayload.status !== "failed"
-                                && jobStatusPayload.status !== "cancelled") {
+                                && !isTerminalJobStatus(jobStatusPayload.status)) {
                                 scheduleJobPolling({
                                     threadId,
                                     assistantMessageId: assistantMessage.id,
                                     jobId: jobStatusPayload.job_id,
                                     tracer: jobStatusPayload.tracer,
-                                    initialStatus: jobStatusPayload.status
+                                    initialStatus: jobStatusPayload.status,
+                                    primitiveId: jobStatusPayload.primitive_id,
+                                    sourceRequestUrl: toolResultRecord?.request?.url
                                 });
                             }
                             return {
                                 ...message,
                                 toolExchanges: nextToolExchanges,
                                 httpExchanges: nextHttpExchanges,
+                                statusText: jobStatusPayload
+                                    && !isTerminalJobStatus(jobStatusPayload.status)
+                                    ? `Job ${jobStatusPayload.job_id} is being tracked. ${getJobPollCadenceText()}`
+                                    : message.statusText,
+                                isPending: false,
                                 text: jobStatusPayload && toolResultRecord?.request?.method === "POST" && toolResultRecord?.response?.status === 202
                                     ? appendDistinctMessageText(message.text, buildJobQueuedMessage(jobStatusPayload))
-                                    : jobStatusPayload && (jobStatusPayload.status === "succeeded" || jobStatusPayload.status === "failed" || jobStatusPayload.status === "cancelled")
+                                    : jobStatusPayload && isTerminalJobStatus(jobStatusPayload.status)
                                         ? appendDistinctMessageText(message.text, buildJobCompletionMessage(jobStatusPayload))
-                                        : message.text
+                                        : jobStatusPayload
+                                            ? appendDistinctMessageText(message.text, buildJobCompletionMessage(jobStatusPayload))
+                                            : message.text
                             };
                         })
                     }));
@@ -2145,7 +3627,7 @@ export function TemplateEditorChat({ boot }) {
                 messages: thread.messages.map((message) => (message.id === assistantMessage.id
                     ? {
                         ...message,
-                        statusText: null,
+                        statusText: message.statusText?.includes("being tracked") ? message.statusText : null,
                         isPending: false
                     }
                     : message))
@@ -2220,42 +3702,66 @@ export function TemplateEditorChat({ boot }) {
         }
         activeSendRef.current?.abortController.abort();
     }
+    useEffect(() => {
+        return () => {
+            activeSendRef.current?.abortController.abort();
+            for (const pollerKey of activeJobPollersRef.current.keys()) {
+                stopJobPoller(pollerKey);
+            }
+        };
+    }, []);
     function handleComposerKeyDown(event) {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
             void handleSend();
         }
     }
-    return (_jsxs("div", { className: "vf-editor-chat-shell", "data-mobile-open": isMobileChatOpen ? "true" : "false", children: [_jsx("button", { type: "button", className: "vf-editor-chat-mobile-fab", "aria-label": "Open chat", "aria-expanded": isMobileChatOpen, onClick: () => setIsMobileChatOpen(true), children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), lastError ? (_jsx("div", { className: "vf-editor-chat-error", role: "status", children: lastError })) : null, _jsxs("div", { className: "vf-editor-chat-thread", children: [_jsxs("div", { className: "vf-editor-chat-header", children: [_jsxs("div", { className: "vf-editor-chat-header-row", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-chat-header-title", children: "Copilot" }), _jsx("div", { className: "vf-editor-chat-header-subtitle", children: boot.template.templateTitle })] }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread", onClick: createNewThreadFromClick, children: "New chat" }), _jsx("button", { type: "button", className: "vf-editor-chat-minimize", "aria-label": "Minimize chat", onClick: () => setIsMobileChatOpen(false), children: "\u00D7" })] }), _jsx("div", { className: "vf-editor-chat-thread-list", role: "tablist", "aria-label": "Conversation threads", children: visibleThreads.length ? visibleThreads.map((thread) => (_jsxs("div", { role: "tab", "aria-selected": thread.id === activeThreadId, className: "vf-editor-chat-thread-chip", "data-active": thread.id === activeThreadId ? "true" : "false", children: [_jsxs("button", { type: "button", className: "vf-editor-chat-thread-chip-main", onClick: () => {
-                                                setActiveThreadId(thread.id);
-                                                setLastError(null);
-                                                setOpenThreadMenu(null);
-                                            }, children: [_jsx("span", { className: "vf-editor-chat-thread-chip-title", children: thread.title }), thread.tracers.length ? (_jsxs("span", { className: "vf-editor-chat-thread-chip-tracers", children: [thread.tracers.slice(0, 2).join(", "), thread.tracers.length > 2 ? ` +${thread.tracers.length - 2}` : ""] })) : null] }), _jsx("div", { className: "vf-editor-chat-thread-menu-wrap", children: _jsx("button", { type: "button", className: "vf-editor-chat-thread-chip-menu", "aria-label": `Actions for ${thread.title}`, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    toggleThreadMenu(thread.id, event.currentTarget);
-                                                }, children: "..." }) })] }, thread.id))) : (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "Start a chat to create your first conversation thread." })) }), openThreadMenu && openThreadMenuThread ? createPortal(_jsxs("div", { className: "vf-editor-chat-thread-menu", role: "menu", style: {
-                                    top: openThreadMenu.top,
-                                    left: openThreadMenu.left
-                                }, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: () => copyThreadId(openThreadMenuThread.id), children: "Copy Chat ID" }), _jsx("button", { type: "button", onClick: () => editThreadTracers(openThreadMenuThread.id), children: "Edit tracers" }), _jsx("button", { type: "button", onClick: () => removeThreadFromView(openThreadMenuThread.id), children: "Remove from view" }), _jsx("button", { type: "button", onClick: () => archiveThread(openThreadMenuThread.id), children: "Archive thread" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => deleteThread(openThreadMenuThread.id), children: "Delete" })] }), document.body) : null] }), _jsx("div", { className: "vf-editor-chat-viewport", ref: viewportRef, children: messages.length ? messages.map((message) => (_jsx(ChatBubble, { message: message }, message.id))) : (_jsxs("div", { className: "vf-editor-chat-empty", children: [_jsx("div", { className: "vf-editor-chat-kicker", children: "Template Copilot" }), _jsx("h2", { children: "Ask it to inspect or call the template REST API." }), _jsx("p", { children: "The sidebar can read skill context, execute template routes, attach POST runs to this thread's tracers, and show each HTTP request and response inline per thread." })] })) }), _jsx("div", { className: "vf-editor-chat-footer", children: _jsxs("div", { className: "vf-editor-chat-composer", "data-drop-target": isDropTarget ? "true" : "false", onDragEnter: (event) => {
-                                event.preventDefault();
-                                setIsDropTarget(true);
-                            }, onDragOver: (event) => {
-                                event.preventDefault();
-                                if (!isDropTarget) {
-                                    setIsDropTarget(true);
-                                }
-                            }, onDragLeave: (event) => {
-                                event.preventDefault();
-                                const nextTarget = event.relatedTarget;
-                                if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
-                                    return;
-                                }
-                                setIsDropTarget(false);
-                            }, onDrop: (event) => void handleComposerDrop(event), children: [isDropTarget ? (_jsx("div", { className: "vf-editor-chat-dropzone-hint", children: "Drop files to attach" })) : null, pendingAttachments.length ? (_jsx("div", { className: "vf-editor-chat-composer-attachments-strip", children: pendingAttachments.map((attachment) => (_jsx(ComposerAttachmentItem, { attachment: attachment, onRemove: () => setPendingAttachments((current) => current.filter((entry) => entry.id !== attachment.id)) }, attachment.id))) })) : null, _jsxs("div", { className: "vf-editor-chat-composer-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-attach-button", "aria-label": "Add attachment", onClick: () => fileInputRef.current?.click(), children: "+" }), _jsx("textarea", { rows: 1, placeholder: "Ask it to call a route, inspect jobs, save config, or continue this thread...", className: "vf-editor-chat-input", value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleComposerKeyDown, onPaste: (event) => void handleComposerPaste(event) }), _jsx("button", { type: "button", className: "vf-editor-chat-send-button", onClick: () => {
-                                                if (isActiveThreadSending) {
-                                                    stopActiveSend();
-                                                    return;
-                                                }
-                                                void handleSend();
-                                            }, disabled: isActiveThreadSending ? false : !canSend, children: isActiveThreadSending ? "Stop" : "Send" })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,video/*,audio/*,application/pdf,text/plain,text/markdown", multiple: true, hidden: true, onChange: (event) => void handlePickFiles(event) })] }) })] })] }));
-}
+    const threadListContent = (_jsx("div", { className: `vf-editor-chat-thread-list${isBrainstormSurface ? " vf-editor-chat-thread-list-sidebar" : ""}`, role: "tablist", "aria-label": "Conversation threads", children: visibleThreads.length ? visibleThreads.map((thread) => (_jsxs("div", { role: "tab", "aria-selected": thread.id === activeThreadId, className: "vf-editor-chat-thread-chip", "data-active": thread.id === activeThreadId ? "true" : "false", children: [_jsxs("button", { type: "button", className: "vf-editor-chat-thread-chip-main", onClick: () => {
+                        setActiveThreadId(thread.id);
+                        setLastError(null);
+                        setOpenThreadMenu(null);
+                        if (isBrainstormSurface) {
+                            setIsMobileChatOpen(false);
+                        }
+                    }, children: [_jsx("span", { className: "vf-editor-chat-thread-chip-title", children: thread.title }), thread.tracers.length ? (_jsxs("span", { className: "vf-editor-chat-thread-chip-tracers", children: [thread.tracers.slice(0, 2).join(", "), thread.tracers.length > 2 ? ` +${thread.tracers.length - 2}` : ""] })) : null] }), _jsx("div", { className: "vf-editor-chat-thread-menu-wrap", children: _jsx("button", { type: "button", className: "vf-editor-chat-thread-chip-menu", "aria-label": `Actions for ${thread.title}`, onClick: (event) => {
+                            event.stopPropagation();
+                            toggleThreadMenu(thread.id, event.currentTarget);
+                        }, children: "..." }) })] }, thread.id))) : (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "Start a chat to create your first conversation thread." })) }));
+    const openHistoryDrawer = () => setIsMobileChatOpen(true);
+    const closeHistoryDrawer = () => setIsMobileChatOpen(false);
+    const goBack = () => {
+        if (window.history.length > 1) {
+            window.history.back();
+            return;
+        }
+        window.location.href = "/discover";
+    };
+    return (_jsxs("div", { className: "vf-editor-chat-shell", "data-mobile-open": isMobileChatOpen ? "true" : "false", "data-layout": isBrainstormSurface ? "brainstorm" : "default", children: [_jsx("button", { type: "button", className: "vf-editor-chat-mobile-fab", "aria-label": "Open chat", "aria-expanded": isMobileChatOpen, onClick: () => setIsMobileChatOpen(true), children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), lastError ? (_jsx("div", { className: "vf-editor-chat-error", role: "status", children: lastError })) : null, _jsxs("div", { className: isBrainstormSurface ? "vf-editor-chat-body vf-editor-chat-brainstorm-layout" : "vf-editor-chat-body", children: [isBrainstormSurface ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "vf-editor-chat-history-scrim", "aria-label": "Close chat history", onClick: closeHistoryDrawer }), _jsxs("aside", { className: "vf-editor-chat-history-pane", children: [_jsxs("div", { className: "vf-editor-chat-history-header", children: [_jsxs("div", { className: "vf-editor-chat-history-header-main", children: [_jsx("button", { type: "button", className: "vf-editor-chat-back-button", onClick: goBack, children: "Back" }), _jsx("div", { className: "vf-editor-chat-history-kicker", children: "Threads" })] }), _jsx("button", { type: "button", className: "vf-editor-chat-history-close", "aria-label": "Close chat history", onClick: closeHistoryDrawer, children: "\u00D7" })] }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread vf-editor-chat-new-thread-sidebar", onClick: createNewThreadFromClick, children: "New chat" }), threadListContent] })] })) : null, _jsxs("div", { className: "vf-editor-chat-thread", children: [_jsxs("div", { className: "vf-editor-chat-header", children: [isBrainstormSurface ? (_jsxs("div", { className: "vf-editor-chat-brainstorm-topbar", children: [_jsxs("div", { className: "vf-editor-chat-brainstorm-topbar-left", children: [_jsx("button", { type: "button", className: "vf-editor-chat-history-toggle", onClick: openHistoryDrawer, children: "History" }), _jsx("div", { className: "vf-editor-chat-brainstorm-title", children: boot.template.templateTitle })] }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread", onClick: createNewThreadFromClick, children: "New chat" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vf-editor-chat-header-row", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-chat-header-title", children: "Copilot" }), _jsx("div", { className: "vf-editor-chat-header-subtitle", children: boot.template.templateTitle })] }), _jsx("button", { type: "button", className: "vf-editor-chat-history-icon", "aria-label": showHistoryPanel ? "Close chat history" : "Open chat history", "aria-pressed": showHistoryPanel, onClick: () => setShowHistoryPanel((prev) => !prev), children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 6v4l2.6 1.6" })] }) }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread", onClick: createNewThreadFromClick, children: "New chat" }), _jsx("button", { type: "button", className: "vf-editor-chat-minimize", "aria-label": "Minimize chat", onClick: () => setIsMobileChatOpen(false), children: "\u00D7" })] }), showHistoryPanel ? null : threadListContent] })), openThreadMenu && openThreadMenuThread ? createPortal(_jsxs("div", { className: "vf-editor-chat-thread-menu", role: "menu", style: {
+                                            top: openThreadMenu.top,
+                                            left: openThreadMenu.left
+                                        }, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: () => copyThreadId(openThreadMenuThread.id), children: "Copy Chat ID" }), _jsx("button", { type: "button", onClick: () => editThreadTracers(openThreadMenuThread.id), children: "Edit tracers" }), _jsx("button", { type: "button", onClick: () => removeThreadFromView(openThreadMenuThread.id), children: "Remove from view" }), _jsx("button", { type: "button", onClick: () => archiveThread(openThreadMenuThread.id), children: "Archive thread" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => deleteThread(openThreadMenuThread.id), children: "Delete" })] }), document.body) : null] }), _jsx("div", { className: "vf-editor-chat-viewport", ref: viewportRef, children: showHistoryPanel && !isBrainstormSurface ? (_jsxs("div", { className: "vf-editor-chat-history-panel", children: [_jsxs("div", { className: "vf-editor-chat-history-panel-header", children: [_jsx("div", { className: "vf-editor-chat-kicker", children: "Chat history" }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread", onClick: createNewThreadFromClick, children: "New chat" })] }), threadListContent] })) : messages.length ? messages.map((message) => (_jsx(ChatBubble, { message: message }, message.id))) : activeThreadId && loadingThreadId === activeThreadId ? (_jsxs("div", { className: "vf-editor-chat-empty", children: [_jsx("div", { className: "vf-editor-chat-kicker", children: "Loading chat" }), _jsxs("h2", { children: ["Opening ", activeThreadId] })] })) : (_jsxs("div", { className: "vf-editor-chat-empty", children: [_jsx("div", { className: "vf-editor-chat-kicker", children: "AI Copilot" }), _jsx("h2", { children: isBrainstormSurface ? "Start a new chat." : "Build a HyperFrames timeline." }), _jsx("p", { children: isBrainstormSurface
+                                                ? "Use the brainstorm tools to go from zero context to angles, hooks, and a strategy you can actually test."
+                                                : "Use the Copilot here to reason about layers, draft overlays, prepare assets, and run HyperFrames render jobs. You can also connect from your own AI coding agent, including Claude Code or OpenAI Codex, and ask it to work against this composition." }), _jsx("div", { className: "vf-editor-chat-empty-prompts", "aria-label": "Example prompts", children: isBrainstormSurface ? (_jsxs(_Fragment, { children: [_jsx("div", { children: "I don't know where to start" }), _jsx("div", { children: "Help me think of persuasive angles" }), _jsx("div", { children: "Help me think of viral hooks" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { children: "teach me how this composition works" }), _jsx("div", { children: "where should the overlay layers go?" }), _jsx("div", { children: "create a timeline render using my video..." })] })) })] })) }), _jsx("div", { className: "vf-editor-chat-footer", children: _jsxs("div", { className: "vf-editor-chat-composer", "data-drop-target": isDropTarget ? "true" : "false", onDragEnter: (event) => {
+                                        event.preventDefault();
+                                        setIsDropTarget(true);
+                                    }, onDragOver: (event) => {
+                                        event.preventDefault();
+                                        if (!isDropTarget) {
+                                            setIsDropTarget(true);
+                                        }
+                                    }, onDragLeave: (event) => {
+                                        event.preventDefault();
+                                        const nextTarget = event.relatedTarget;
+                                        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+                                            return;
+                                        }
+                                        setIsDropTarget(false);
+                                    }, onDrop: (event) => void handleComposerDrop(event), children: [isDropTarget ? (_jsx("div", { className: "vf-editor-chat-dropzone-hint", children: "Drop files to attach" })) : null, pendingAttachments.length ? (_jsx("div", { className: "vf-editor-chat-composer-attachments-strip", children: pendingAttachments.map((attachment) => (_jsx(ComposerAttachmentItem, { attachment: attachment, onRemove: () => setPendingAttachments((current) => current.filter((entry) => entry.id !== attachment.id)) }, attachment.id))) })) : null, _jsxs("div", { className: "vf-editor-chat-composer-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-attach-button", "aria-label": "Open upload drawer", onClick: () => setIsUploadDrawerOpen(true), children: "\uD83D\uDCCE" }), _jsx("textarea", { rows: 1, placeholder: isBrainstormSurface ? "Describe the offer, audience, or strategy problem you want help with..." : "Ask it to call a route, inspect jobs, save config, or continue this thread...", className: "vf-editor-chat-input", value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleComposerKeyDown, onPaste: (event) => void handleComposerPaste(event) }), _jsx("button", { type: "button", className: "vf-editor-chat-send-button", onClick: () => {
+                                                        if (isActiveThreadSending) {
+                                                            stopActiveSend();
+                                                            return;
+                                                        }
+                                                        void handleSend();
+                                                    }, disabled: isActiveThreadSending ? false : !canSend, children: isActiveThreadSending ? "Stop" : "Send" })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,video/*,audio/*,application/pdf,text/plain,text/markdown", multiple: true, hidden: true, onChange: (event) => void handlePickFiles(event) })] }) })] })] }), _jsx(UploadDrawer, { apiKey: boot.vidfarmApiKey, open: isUploadDrawerOpen, onClose: () => setIsUploadDrawerOpen(false), onConfirm: (attachments) => setPendingAttachments((current) => [...current, ...attachments]) })] }));
+}
+//# sourceMappingURL=template-editor-chat.js.map