@mevdragon/vidfarm-devcli 0.5.3 → 0.7.0

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

@@ -0,0 +1,3960 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { debugError, debugLog, debugWarn } from "./debug.js";
+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 || 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,
+        sizeBytes: typeof raw.sizeBytes === "number" ? raw.sizeBytes : raw.size_bytes,
+        folderPath: raw.folderPath ?? raw.folder_path ?? ""
+    };
+}
+function isImageAttachment(attachment) {
+    return attachment.contentType.startsWith("image/");
+}
+function isVideoAttachment(attachment) {
+    return attachment.contentType.startsWith("video/");
+}
+const INLINE_MEDIA_IMAGE_EXTENSIONS = new Set([
+    "apng",
+    "avif",
+    "gif",
+    "jpeg",
+    "jpg",
+    "png",
+    "svg",
+    "webp"
+]);
+const INLINE_MEDIA_VIDEO_EXTENSIONS = new Set([
+    "m4v",
+    "mov",
+    "mp4",
+    "mpeg",
+    "mpg",
+    "ogv",
+    "webm"
+]);
+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 "";
+    }
+    if (typeof value === "string") {
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        }
+        catch {
+            return value;
+        }
+    }
+    return JSON.stringify(value, null, 2);
+}
+function summarizeLargeString(value) {
+    const dataUrlMatch = DATA_URL_PREFIX_REGEX.exec(value);
+    if (dataUrlMatch) {
+        return `[${dataUrlMatch[1]} data URL omitted, ${value.length.toLocaleString()} chars]`;
+    }
+    if (value.length > MAX_CHAT_PAYLOAD_STRING_LENGTH) {
+        return `${value.slice(0, MAX_CHAT_PAYLOAD_STRING_LENGTH)}… [truncated ${value.length.toLocaleString()} chars]`;
+    }
+    return value;
+}
+function sanitizeChatPayload(value, depth = 0) {
+    if (value === null || value === undefined) {
+        return value;
+    }
+    if (typeof value === "string") {
+        return summarizeLargeString(value);
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+        return value;
+    }
+    if (typeof value === "bigint") {
+        return value.toString();
+    }
+    if (typeof value === "function" || typeof value === "symbol") {
+        return undefined;
+    }
+    if (depth >= 8) {
+        return "[nested payload omitted]";
+    }
+    if (Array.isArray(value)) {
+        const items = value
+            .slice(0, MAX_CHAT_PAYLOAD_ARRAY_ITEMS)
+            .map((entry) => sanitizeChatPayload(entry, depth + 1));
+        if (value.length > MAX_CHAT_PAYLOAD_ARRAY_ITEMS) {
+            items.push(`[${value.length - MAX_CHAT_PAYLOAD_ARRAY_ITEMS} more items omitted]`);
+        }
+        return items;
+    }
+    if (typeof value === "object") {
+        const output = {};
+        const entries = Object.entries(value);
+        for (const [key, entry] of entries.slice(0, MAX_CHAT_PAYLOAD_OBJECT_KEYS)) {
+            const sanitized = sanitizeChatPayload(entry, depth + 1);
+            if (sanitized !== undefined) {
+                output[key] = sanitized;
+            }
+        }
+        if (entries.length > MAX_CHAT_PAYLOAD_OBJECT_KEYS) {
+            output.__omitted_keys = entries.length - MAX_CHAT_PAYLOAD_OBJECT_KEYS;
+        }
+        return output;
+    }
+    return String(value);
+}
+function sanitizeToolResult(result) {
+    return sanitizeChatPayload(result);
+}
+function sanitizeHttpExchange(exchange) {
+    return {
+        ...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
+        }
+    };
+}
+function buildBrowserDateContext() {
+    const now = new Date();
+    let localDateTime = null;
+    let timeZone = null;
+    try {
+        localDateTime = new Intl.DateTimeFormat(undefined, {
+            dateStyle: "full",
+            timeStyle: "long"
+        }).format(now);
+    }
+    catch {
+        localDateTime = now.toString();
+    }
+    try {
+        timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || null;
+    }
+    catch {
+        timeZone = null;
+    }
+    return {
+        currentDateTime: now.toISOString(),
+        localDateTime,
+        timeZone
+    };
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll("\"", "&quot;")
+        .replaceAll("'", "&#39;");
+}
+function renderInlineMarkdown(value) {
+    let html = escapeHtml(value);
+    html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+    html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+    html = html.replace(/(^|[^\*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>");
+    html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    html = html.replace(/(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
+    return html;
+}
+function renderMarkdownToHtml(value) {
+    const normalized = value.replace(/\r\n/g, "\n").trim();
+    if (!normalized) {
+        return "";
+    }
+    const blocks = normalized.split(/\n{2,}/);
+    return blocks.map((block) => {
+        const trimmed = block.trim();
+        if (!trimmed) {
+            return "";
+        }
+        if (trimmed.startsWith("```") && trimmed.endsWith("```")) {
+            const code = trimmed.replace(/^```[^\n]*\n?/, "").replace(/\n?```$/, "");
+            return `<pre><code>${escapeHtml(code)}</code></pre>`;
+        }
+        const lines = trimmed.split("\n");
+        const isBulletList = lines.every((line) => /^[-*]\s+/.test(line.trim()));
+        if (isBulletList) {
+            const items = lines
+                .map((line) => line.trim().replace(/^[-*]\s+/, ""))
+                .map((line) => `<li>${renderInlineMarkdown(line)}</li>`)
+                .join("");
+            return `<ul>${items}</ul>`;
+        }
+        const isOrderedList = lines.every((line) => /^\d+\.\s+/.test(line.trim()));
+        if (isOrderedList) {
+            const items = lines
+                .map((line) => line.trim().replace(/^\d+\.\s+/, ""))
+                .map((line) => `<li>${renderInlineMarkdown(line)}</li>`)
+                .join("");
+            return `<ol>${items}</ol>`;
+        }
+        return `<p>${lines.map((line) => renderInlineMarkdown(line.trim())).join("<br />")}</p>`;
+    }).filter(Boolean).join("");
+}
+function titleCaseLabel(value) {
+    return value
+        .replace(/[_-]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function isGenericPathLabel(value) {
+    return /^item \d+$/i.test(value.trim()) || /^output$/i.test(value.trim());
+}
+function extractStorageKeyFromUrl(url) {
+    try {
+        const parsed = new URL(url);
+        const queryKey = parsed.searchParams.get("key");
+        if (queryKey?.trim()) {
+            return queryKey.trim().replace(/^\/+/, "");
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+function safeDecodeURIComponent(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+function extractFilenameFromUrl(url) {
+    const storageKey = extractStorageKeyFromUrl(url);
+    if (storageKey) {
+        const fileName = safeDecodeURIComponent(storageKey.split("/").filter(Boolean).pop() || "");
+        if (fileName) {
+            return fileName;
+        }
+    }
+    try {
+        const pathname = new URL(url).pathname;
+        return safeDecodeURIComponent(pathname.split("/").filter(Boolean).pop() || "");
+    }
+    catch {
+        return "";
+    }
+}
+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() || "";
+    if (INLINE_MEDIA_IMAGE_EXTENSIONS.has(extension)) {
+        return "image";
+    }
+    if (INLINE_MEDIA_VIDEO_EXTENSIONS.has(extension)) {
+        return "video";
+    }
+    return null;
+}
+function extractCandidateUrls(value) {
+    const urls = new Set();
+    const markdownLinkPattern = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
+    const bareUrlPattern = /(^|[\s(])(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/gm;
+    let match = null;
+    while ((match = markdownLinkPattern.exec(value)) !== null) {
+        urls.add(match[2]);
+    }
+    while ((match = bareUrlPattern.exec(value)) !== null) {
+        urls.add(match[2]);
+    }
+    return [...urls];
+}
+function extractInlineMediaPreviews(text, excludedUrls = []) {
+    const excluded = new Set(excludedUrls);
+    const seen = new Set();
+    const previews = [];
+    for (const url of extractCandidateUrls(text)) {
+        if (excluded.has(url) || seen.has(url)) {
+            continue;
+        }
+        const kind = getMediaKindFromUrl(url);
+        if (!kind) {
+            continue;
+        }
+        seen.add(url);
+        previews.push({
+            kind,
+            url,
+            label: labelFromUrl(url)
+        });
+    }
+    return previews;
+}
+function collectLabeledUrls(value, output, seen = new Set(), path = []) {
+    if (output.length >= 12 || value == null) {
+        return;
+    }
+    if (typeof value === "string") {
+        const trimmed = value.trim();
+        if (/^https?:\/\//i.test(trimmed) && !seen.has(trimmed)) {
+            seen.add(trimmed);
+            const rawPathLabel = path.length ? path[path.length - 1] || "Output" : "";
+            const pathLabel = titleCaseLabel(rawPathLabel);
+            const filenameLabel = labelFromUrl(trimmed);
+            output.push({
+                label: filenameLabel !== "Output" ? filenameLabel : pathLabel && !isGenericPathLabel(rawPathLabel) ? pathLabel : filenameLabel,
+                url: trimmed
+            });
+        }
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (const [index, entry] of value.entries()) {
+            collectLabeledUrls(entry, output, seen, [...path, `item ${index + 1}`]);
+            if (output.length >= 12) {
+                return;
+            }
+        }
+        return;
+    }
+    if (typeof value === "object") {
+        for (const [key, entry] of Object.entries(value)) {
+            collectLabeledUrls(entry, output, seen, [...path, key]);
+            if (output.length >= 12) {
+                return;
+            }
+        }
+    }
+}
+function buildJobQueuedMessage(job) {
+    return [
+        `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 = [`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:");
+            lines.push(...urls.map(({ url, label }) => `- [${label}](${url})`));
+        }
+        return lines.join("\n");
+    }
+    if (job.status === "failed") {
+        return `Render \`${job.job_id}\` failed.${job.error?.message ? ` ${job.error.message}` : ""}`;
+    }
+    if (job.status === "cancelled") {
+        return `Render \`${job.job_id}\` was cancelled.`;
+    }
+    return `Render \`${job.job_id}\` is ${job.status}.`;
+}
+function appendDistinctMessageText(current, addition) {
+    const normalizedCurrent = current.trim();
+    const normalizedAddition = addition.trim();
+    if (!normalizedAddition) {
+        return current;
+    }
+    if (normalizedCurrent.includes(normalizedAddition)) {
+        return current;
+    }
+    return normalizedCurrent ? `${normalizedCurrent}\n\n${normalizedAddition}` : normalizedAddition;
+}
+const CHAT_BOTTOM_STICKY_THRESHOLD_PX = 48;
+function isScrolledNearBottom(element) {
+    return element.scrollHeight - element.scrollTop - element.clientHeight <= CHAT_BOTTOM_STICKY_THRESHOLD_PX;
+}
+function upsertAutomaticPollExchange(exchanges, nextExchange) {
+    const current = [...(exchanges ?? [])];
+    const matchIndex = current.findIndex((exchange) => (exchange.pollMode === "automatic" && exchange.pollJobId === nextExchange.pollJobId));
+    if (matchIndex === -1) {
+        current.push(nextExchange);
+        return current;
+    }
+    current[matchIndex] = nextExchange;
+    return current;
+}
+const JOB_POLL_INTERVAL_MS = 30_000;
+const JOB_POLL_BUSY_INTERVAL_MS = 180_000;
+const JOB_POLL_BUSY_THRESHOLD = 4;
+const JOB_POLL_MAX_ATTEMPTS = 40;
+const JOB_POLL_GLOBAL_MIN_GAP_MS = 1_500;
+const JOB_POLL_MIN_TIMER_MS = 250;
+function tryReadJobStatusPayload(value) {
+    if (!value || typeof value !== "object") {
+        return null;
+    }
+    const record = value;
+    if (typeof record.job_id !== "string" || typeof record.status !== "string") {
+        return null;
+    }
+    return {
+        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"
+                    ? record.error.message
+                    : undefined,
+                type: typeof record.error.type === "string"
+                    ? record.error.type
+                    : undefined
+            }
+            : 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) {
+        headers.set("vidfarm-api-key", apiKey);
+    }
+    if (contentType) {
+        headers.set("content-type", contentType);
+    }
+    return headers;
+}
+async function parseJson(response) {
+    return await response.json();
+}
+async function fileToDataUrl(file) {
+    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 attachment contents."));
+        };
+        reader.onerror = () => reject(reader.error ?? new Error("Unable to read attachment contents."));
+        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 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 || "");
+    debugLog("chat.upload.attempt", {
+        file_name: input.file.name,
+        size_bytes: input.file.size,
+        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) {
+        debugError("chat.upload.failed", {
+            file_name: input.file.name,
+            status: uploadResponse.status,
+            error: uploadPayload.error
+        });
+        throw new Error(uploadPayload.error || "Unable to upload attachment.");
+    }
+    debugLog("chat.upload.succeeded", {
+        file_name: input.file.name,
+        attachment_id: uploadPayload.attachment.id
+    });
+    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.");
+    }
+    debugLog("chat.temp_upload.attempt", {
+        file_name: input.file.name,
+        size_bytes: input.file.size,
+        content_type: input.file.type
+    });
+    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,
+            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 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.file) {
+            throw new Error(uploadPayload.error || "Unable to upload temporary file.");
+        }
+        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,
+        headers: presignPayload.upload.headers,
+        body: input.file
+    });
+    if (!uploadResponse.ok) {
+        throw new Error(`Upload failed with status ${uploadResponse.status}.`);
+    }
+    const finalizeResponse = await fetch("/api/v1/user/me/temporary-files", {
+        method: "POST",
+        headers: buildAuthHeaders(input.apiKey, "application/json"),
+        body: JSON.stringify({
+            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,
+            folder_path: presignPayload.folder_path || input.folderPath || ""
+        })
+    });
+    const finalizePayload = await parseJson(finalizeResponse);
+    if (!finalizeResponse.ok || !finalizePayload.file) {
+        throw new Error(finalizePayload.error || "Unable to save temporary file.");
+    }
+    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 buildAttachmentTransportText(attachments) {
+    if (!attachments.length) {
+        return null;
+    }
+    const lines = attachments.map((attachment) => (`- ${attachment.fileName} (${attachment.contentType}): ${attachment.viewUrl}`));
+    return [
+        "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: messageIndex === latestIndex ? attachment.transportData || attachment.viewUrl : attachment.viewUrl,
+                    mediaType: attachment.contentType
+                }))
+            ]
+        };
+    });
+}
+function readCachedScheduleChannels() {
+    const cache = window.__vidfarmFlockPosterCache;
+    const snapshot = cache?.readSnapshot?.();
+    if (!snapshot) {
+        return {};
+    }
+    const channels = Array.isArray(snapshot?.channels)
+        ? snapshot.channels
+            .map((channel) => channel && typeof channel === "object" ? channel : null)
+            .filter((channel) => typeof channel?.id === "string" && Boolean(channel.id.trim()))
+            .map((channel) => ({
+            id: String(channel?.id || ""),
+            name: typeof channel?.name === "string" ? channel.name : null,
+            title: typeof channel?.title === "string" ? channel.title : null,
+            handle: typeof channel?.handle === "string" ? channel.handle : null,
+            platform: typeof channel?.platform === "string" ? channel.platform : null,
+            status: typeof channel?.status === "string" ? channel.status : null
+        }))
+        : [];
+    return channels.length || snapshot?.channelsUpdatedAt
+        ? {
+            scheduleChannels: channels,
+            scheduleChannelsUpdatedAt: snapshot?.channelsUpdatedAt ?? null
+        }
+        : {};
+}
+function readSelectedLibraryPosts() {
+    const snapshot = window.__vidfarmLibrarySelection?.readSelectedPosts?.();
+    const posts = Array.isArray(snapshot?.posts)
+        ? snapshot.posts
+            .map((post) => post && typeof post === "object" ? post : null)
+            .filter((post) => typeof post?.post_id === "string" && Boolean(post.post_id.trim()))
+            .map((post) => ({
+            post_id: String(post?.post_id || ""),
+            title: typeof post?.title === "string" ? post.title : null,
+            caption: typeof post?.caption === "string" ? post.caption : null,
+            tracer: typeof post?.tracer === "string" ? post.tracer : null,
+            status: typeof post?.status === "string" ? post.status : null,
+            share_url: typeof post?.share_url === "string" ? post.share_url : null,
+            media: Array.isArray(post?.media)
+                ? post.media.slice(0, 8).map((asset) => asset && typeof asset === "object" ? asset : null).filter(Boolean).map((asset) => ({
+                    url: typeof asset?.url === "string" ? asset.url : null,
+                    kind: typeof asset?.kind === "string" ? asset.kind : null,
+                    role: typeof asset?.role === "string" ? asset.role : null,
+                    content_type: typeof asset?.content_type === "string" ? asset.content_type : null
+                }))
+                : []
+        }))
+        : [];
+    return {
+        selectedPosts: posts,
+        selectedPostsUpdatedAt: snapshot?.updatedAt ?? null
+    };
+}
+async function readStreamText(response, handlers) {
+    if (!response.body) {
+        throw new Error("Chat response did not include a body.");
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+            break;
+        }
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+        buffer = events.pop() ?? "";
+        for (const event of events) {
+            const line = event
+                .split("\n")
+                .map((entry) => entry.trim())
+                .find((entry) => entry.startsWith("data:"));
+            if (!line) {
+                continue;
+            }
+            const payload = line.slice(5).trim();
+            if (payload === "[DONE]") {
+                continue;
+            }
+            let parsed;
+            try {
+                parsed = JSON.parse(payload);
+            }
+            catch {
+                continue;
+            }
+            if (!parsed || typeof parsed !== "object") {
+                continue;
+            }
+            const chunk = parsed;
+            if (chunk.type === "text-delta" && typeof chunk.delta === "string") {
+                handlers.onDelta(chunk.delta);
+            }
+            else if (chunk.type === "status") {
+                const statusMessage = typeof chunk.status === "string"
+                    ? chunk.status
+                    : typeof chunk.message === "string"
+                        ? chunk.message
+                        : null;
+                if (statusMessage && handlers.onStatus) {
+                    handlers.onStatus(statusMessage);
+                }
+            }
+            else if (chunk.type === "tool-call"
+                && typeof chunk.toolCallId === "string"
+                && typeof chunk.toolName === "string"
+                && handlers.onToolCall) {
+                handlers.onToolCall({
+                    toolCallId: chunk.toolCallId,
+                    toolName: chunk.toolName,
+                    args: chunk.args && typeof chunk.args === "object" ? chunk.args : undefined
+                });
+            }
+            else if (chunk.type === "tool-result"
+                && typeof chunk.toolCallId === "string"
+                && typeof chunk.toolName === "string"
+                && handlers.onToolResult) {
+                handlers.onToolResult({
+                    toolCallId: chunk.toolCallId,
+                    toolName: chunk.toolName,
+                    result: chunk.result
+                });
+            }
+            else if (chunk.type === "error" && handlers.onError) {
+                handlers.onError?.(typeof chunk.errorText === "string"
+                    ? chunk.errorText
+                    : typeof chunk.error?.message === "string"
+                        ? chunk.error.message
+                        : "Unable to read assistant response.");
+            }
+        }
+    }
+}
+function makeStorageKeys(templateId) {
+    return {
+        threads: `vidfarm-editor-chat-threads:${templateId}`,
+        activeThread: `vidfarm-editor-chat-active-thread:${templateId}`
+    };
+}
+function getChatStorage() {
+    if (typeof window === "undefined") {
+        return null;
+    }
+    try {
+        return window.sessionStorage;
+    }
+    catch {
+        try {
+            return window.localStorage;
+        }
+        catch {
+            return null;
+        }
+    }
+}
+function makeThreadId() {
+    return `thread-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function makeMessageId(prefix) {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return `${prefix}-${crypto.randomUUID()}`;
+    }
+    return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function normalizeTracerList(values) {
+    const seen = new Set();
+    const tracers = [];
+    for (const value of values) {
+        const tracer = value.trim();
+        if (!tracer || seen.has(tracer)) {
+            continue;
+        }
+        seen.add(tracer);
+        tracers.push(tracer);
+    }
+    return tracers;
+}
+function mergeTracerLists(...groups) {
+    return normalizeTracerList(groups.flat());
+}
+function archiveTracerValue(tracer) {
+    const normalized = tracer.trim();
+    if (!normalized || normalized.startsWith("archived_")) {
+        return normalized;
+    }
+    return `archived_${normalized}`;
+}
+function makeTracerSuffix() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID().replace(/-/g, "").slice(-8);
+    }
+    return Math.random().toString(16).slice(2, 10).padEnd(8, "0").slice(0, 8);
+}
+function slugifyTracerPrefix(value) {
+    const normalized = value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return (normalized || "tracer").slice(0, 28);
+}
+function makeTracerId(templateSlug, existing) {
+    const prefix = slugifyTracerPrefix(templateSlug);
+    let candidate = "";
+    do {
+        candidate = `${prefix}-${makeTracerSuffix()}`;
+    } while (existing.includes(candidate));
+    return candidate;
+}
+function ensureTracerHasRandomSuffix(tracer, existing) {
+    const normalized = tracer.trim();
+    if (!normalized) {
+        return "";
+    }
+    if (/-[a-z0-9]{8}$/i.test(normalized)) {
+        return normalized;
+    }
+    let candidate = `${normalized}-${makeTracerSuffix()}`;
+    while (existing.includes(candidate)) {
+        candidate = `${normalized}-${makeTracerSuffix()}`;
+    }
+    return candidate;
+}
+function readTracersFromLocation() {
+    const params = new URLSearchParams(window.location.search);
+    const values = [...params.getAll("tracers"), ...params.getAll("tracer")];
+    const output = [];
+    for (const rawValue of values) {
+        const normalized = rawValue.trim();
+        if (!normalized) {
+            continue;
+        }
+        const inner = normalized.startsWith("[") && normalized.endsWith("]")
+            ? normalized.slice(1, -1)
+            : normalized;
+        output.push(...inner.split(",").map((value) => value.trim().replace(/^["']|["']$/g, "")));
+    }
+    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) {
+        return "New chat";
+    }
+    return normalized.length > 42 ? `${normalized.slice(0, 42).trimEnd()}…` : normalized;
+}
+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.id === activeThreadId ? thread.messages.slice(-LOCAL_THREAD_MESSAGE_CACHE_LIMIT) : []).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?.map((exchange) => ({
+                ...exchange,
+                args: sanitizeChatPayload(exchange.args),
+                result: sanitizeToolResult(exchange.result)
+            })),
+            httpExchanges: message.httpExchanges?.map(sanitizeHttpExchange)
+        }))
+    }));
+}
+function hydrateThreads(raw, fallbackTemplateId) {
+    if (!raw) {
+        return [];
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) {
+            return [];
+        }
+        return parsed
+            .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)
+                ? thread.messages.map((message) => ({
+                    id: message.id,
+                    role: message.role,
+                    text: message.text,
+                    attachments: Array.isArray(message.attachments) ? message.attachments : [],
+                    toolExchanges: Array.isArray(message.toolExchanges) ? message.toolExchanges : [],
+                    httpExchanges: Array.isArray(message.httpExchanges) ? message.httpExchanges : []
+                }))
+                : []
+        }));
+    }
+    catch {
+        return [];
+    }
+}
+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)
+            ? thread.messages.map((message) => ({
+                id: message.id,
+                role: message.role,
+                text: message.text,
+                attachments: Array.isArray(message.attachments) ? message.attachments : [],
+                toolExchanges: Array.isArray(message.toolExchanges) ? message.toolExchanges : [],
+                httpExchanges: Array.isArray(message.httpExchanges) ? message.httpExchanges : []
+            }))
+            : []
+    };
+}
+function mergeThreadSets(localThreads, remoteThreads) {
+    const byId = new Map();
+    for (const thread of remoteThreads) {
+        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)) {
+            byId.set(thread.id, thread);
+        }
+    }
+    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;
+    }
+    return thread.tracers.some((threadTracer) => selectedTracers.some((selectedTracer) => doesTracerMatchSelection(threadTracer, selectedTracer)));
+}
+function doesTracerMatchSelection(threadTracer, selectedTracer) {
+    const normalizedThreadTracer = threadTracer.trim();
+    const normalizedSelectedTracer = selectedTracer.trim();
+    if (!normalizedThreadTracer || !normalizedSelectedTracer) {
+        return false;
+    }
+    if (normalizedThreadTracer === normalizedSelectedTracer) {
+        return true;
+    }
+    return normalizedThreadTracer.startsWith(`${normalizedSelectedTracer}-`) && /-[a-z0-9]{8}$/i.test(normalizedThreadTracer);
+}
+function summarizeThread(thread) {
+    const lastMessage = [...thread.messages].reverse().find((message) => message.text.trim());
+    return lastMessage?.text.trim() || "No messages yet";
+}
+function summarizeThreadPreview(thread) {
+    const preview = summarizeThread(thread);
+    if (!thread.messages.length) {
+        return "No messages yet";
+    }
+    const normalizedTitle = thread.title.trim().toLowerCase();
+    const normalizedPreview = preview.trim().toLowerCase();
+    if (!preview || normalizedPreview === normalizedTitle) {
+        return `${thread.messages.length} message${thread.messages.length === 1 ? "" : "s"}`;
+    }
+    return preview;
+}
+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: 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, 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" })] }) }));
+}
+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, 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" })] }));
+}
+function HttpExchangeCard(props) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    const requestBody = formatJsonBody(props.exchange.request.body);
+    const responseBody = formatJsonBody(props.exchange.result.body);
+    const requestUrl = props.exchange.request.url;
+    const displayUrl = requestUrl.length > 52
+        ? `${requestUrl.slice(0, 52).trimEnd()}...`
+        : requestUrl;
+    const isError = props.exchange.result.status >= 400 || Boolean(props.exchange.result.error);
+    const isSuccess = props.exchange.result.status >= 200 && props.exchange.result.status < 300;
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    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] }));
+}
+const ChatBubble = memo(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 [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));
+    const inlineMediaPreviews = hasVisibleText
+        ? extractInlineMediaPreviews(props.message.text, props.message.attachments.map((attachment) => attachment.viewUrl))
+        : [];
+    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: (preview, gallery) => setMediaModalState({ preview, gallery }) }), videoAttachments.map((attachment) => (_jsx(VideoPreviewCard, { preview: {
+                                    kind: "video",
+                                    url: attachment.viewUrl,
+                                    label: attachment.fileName
+                                }, 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 showPersistentSidebar = isBrainstormSurface && boot.template.persistentHistorySidebar === true;
+    const storageKeys = useMemo(() => makeStorageKeys(boot.template.templateId), [boot.template.templateId]);
+    const chatStorage = useMemo(() => getChatStorage(), []);
+    const fileInputRef = useRef(null);
+    const viewportRef = useRef(null);
+    const shouldStickToChatBottomRef = useRef(true);
+    const forceChatBottomOnNextRenderRef = useRef(false);
+    const previousActiveThreadIdRef = useRef(null);
+    const activeSendRef = useRef(null);
+    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([]);
+    const [lastError, setLastError] = useState(null);
+    const [sendingThreadId, setSendingThreadId] = useState(null);
+    const [loadingStatus, setLoadingStatus] = useState(null);
+    const [hasHydrated, setHasHydrated] = useState(false);
+    const [isDropTarget, setIsDropTarget] = useState(false);
+    const [isMobileChatOpen, setIsMobileChatOpen] = useState(false);
+    const [showHistoryPanel, setShowHistoryPanel] = useState(false);
+    const [showBranchesPanel, setShowBranchesPanel] = useState(false);
+    const [branches, setBranches] = useState(null);
+    const [branchesLoading, setBranchesLoading] = useState(false);
+    const [branchesError, setBranchesError] = useState(null);
+    const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
+    const [tracers, setTracers] = useState(() => {
+        const bridge = typeof window !== "undefined" ? window.__vidfarmEditorTracers : null;
+        if (bridge) {
+            return bridge.get();
+        }
+        if (typeof window !== "undefined") {
+            const fromUrl = readTracersFromLocation();
+            if (fromUrl.length) {
+                return fromUrl;
+            }
+        }
+        return normalizeTracerList(boot.template.tracers || []);
+    });
+    const threadListUrl = useMemo(() => {
+        if (!boot.threadsUrl) {
+            return null;
+        }
+        const url = new URL(boot.threadsUrl, window.location.origin);
+        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, 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, boot.template.templateId);
+        const savedActiveThread = chatStorage?.getItem(storageKeys.activeThread) ?? null;
+        const requestedThreadId = readThreadIdFromLocation();
+        const currentTracers = window.__vidfarmEditorTracers?.get() ?? readTracersFromLocation();
+        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 = 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);
+        }
+        else {
+            setActiveThreadId(newestMatchingThread?.id ?? visibleHydratedThreads[0]?.id ?? null);
+        }
+        setHasHydrated(true);
+    }, [boot.template.templateId, chatStorage, storageKeys]);
+    useEffect(() => {
+        if (!boot.vidfarmApiKey || !threadListUrl) {
+            return;
+        }
+        const abortController = new AbortController();
+        void (async () => {
+            try {
+                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) => {
+                    const nextThreads = mergeThreadSets(current, remoteThreads);
+                    threadsRef.current = nextThreads;
+                    return nextThreads;
+                });
+                setActiveThreadId((current) => {
+                    // Keep whatever the client is showing as long as it still exists
+                    // somewhere in the merged set. Otherwise a freshly-created local
+                    // "New chat" (not yet persisted to the server) gets swapped out for
+                    // the server's most-recent thread on every remote fetch.
+                    if (current && threadsRef.current.some((thread) => thread.id === current)) {
+                        return current;
+                    }
+                    return remoteThreads[0]?.id ?? current;
+                });
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "AbortError") {
+                    return;
+                }
+            }
+        })();
+        return () => {
+            abortController.abort();
+        };
+    }, [boot.template.templateId, boot.vidfarmApiKey, threadListUrl]);
+    useEffect(() => {
+        threadsRef.current = threads;
+    }, [threads]);
+    const [currentForkId, setCurrentForkId] = useState(() => {
+        if (typeof window === "undefined") {
+            return null;
+        }
+        try {
+            return new URL(window.location.href).searchParams.get("fork");
+        }
+        catch {
+            return null;
+        }
+    });
+    useEffect(() => {
+        const syncForkFromLocation = () => {
+            try {
+                setCurrentForkId(new URL(window.location.href).searchParams.get("fork"));
+            }
+            catch {
+                setCurrentForkId(null);
+            }
+        };
+        window.addEventListener("popstate", syncForkFromLocation);
+        return () => {
+            window.removeEventListener("popstate", syncForkFromLocation);
+        };
+    }, []);
+    async function loadBranches(options) {
+        if (!boot.vidfarmApiKey) {
+            setBranchesError("Sign in to see forks.");
+            return;
+        }
+        if (branchesLoading) {
+            return;
+        }
+        if (!options?.force && branches !== null) {
+            return;
+        }
+        setBranchesLoading(true);
+        setBranchesError(null);
+        try {
+            const response = await fetch("/api/v1/compositions", {
+                method: "GET",
+                headers: buildAuthHeaders(boot.vidfarmApiKey)
+            });
+            if (!response.ok) {
+                setBranchesError(response.status === 401 ? "Sign in to see forks." : `Failed to load forks (${response.status}).`);
+                setBranches([]);
+                return;
+            }
+            const payload = await response.json().catch(() => null);
+            const raw = Array.isArray(payload?.forks) ? payload.forks : [];
+            const summaries = raw
+                .map((entry) => {
+                if (!entry || typeof entry !== "object") {
+                    return null;
+                }
+                const record = entry;
+                const forkId = typeof record.fork_id === "string" ? record.fork_id : null;
+                if (!forkId) {
+                    return null;
+                }
+                return {
+                    forkId,
+                    templateId: typeof record.template_id === "string" ? record.template_id : null,
+                    parentForkId: typeof record.parent_fork_id === "string" ? record.parent_fork_id : null,
+                    parentVersion: typeof record.parent_version === "number" ? record.parent_version : null,
+                    title: typeof record.title === "string" ? record.title : null,
+                    visibility: typeof record.visibility === "string" ? record.visibility : null,
+                    latestVersion: typeof record.latest_version === "number" ? record.latest_version : null,
+                    ownerCustomerId: typeof record.owner_customer_id === "string" ? record.owner_customer_id : null,
+                    createdAt: typeof record.created_at === "string" ? record.created_at : null,
+                    updatedAt: typeof record.updated_at === "string" ? record.updated_at : null
+                };
+            })
+                .filter((entry) => Boolean(entry))
+                .filter((entry) => entry.templateId === boot.template.templateId)
+                .sort((a, b) => String(b.updatedAt ?? "").localeCompare(String(a.updatedAt ?? "")));
+            setBranches(summaries);
+        }
+        catch (error) {
+            setBranchesError("Could not load forks. Please try again.");
+            setBranches([]);
+        }
+        finally {
+            setBranchesLoading(false);
+        }
+    }
+    useEffect(() => {
+        if (showBranchesPanel && branches === null && !branchesLoading) {
+            void loadBranches();
+        }
+    }, [showBranchesPanel]);
+    useEffect(() => {
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            setTracers(bridge.get());
+            return bridge.subscribe((nextTracers) => setTracers(nextTracers));
+        }
+        const syncFromLocation = () => {
+            const fromUrl = readTracersFromLocation();
+            setTracers(fromUrl.length ? fromUrl : normalizeTracerList(boot.template.tracers || []));
+        };
+        syncFromLocation();
+        window.addEventListener("popstate", syncFromLocation);
+        return () => {
+            window.removeEventListener("popstate", syncFromLocation);
+        };
+    }, [boot.template.tracers]);
+    // Debounce localStorage persistence so streamed deltas (fires on every
+    // token) don't JSON.stringify the whole thread bag per keystroke. Reads
+    // the latest state via refs so the closure never captures stale data.
+    const persistThreadsRef = useRef(threads);
+    const persistActiveThreadIdRef = useRef(activeThreadId);
+    useEffect(() => {
+        persistThreadsRef.current = threads;
+        persistActiveThreadIdRef.current = activeThreadId;
+    }, [threads, activeThreadId]);
+    useEffect(() => {
+        if (!hasHydrated) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            try {
+                chatStorage?.setItem(storageKeys.threads, JSON.stringify(serializeThreads(persistThreadsRef.current, persistActiveThreadIdRef.current)));
+            }
+            catch (error) {
+                console.warn("Unable to persist editor chat threads.", error);
+            }
+        }, 300);
+        return () => window.clearTimeout(timer);
+    }, [activeThreadId, chatStorage, hasHydrated, storageKeys, threads]);
+    useEffect(() => {
+        if (!hasHydrated) {
+            return;
+        }
+        try {
+            if (activeThreadId) {
+                chatStorage?.setItem(storageKeys.activeThread, activeThreadId);
+            }
+            else {
+                chatStorage?.removeItem(storageKeys.activeThread);
+            }
+        }
+        catch (error) {
+            console.warn("Unable to persist active editor chat thread.", error);
+        }
+    }, [activeThreadId, chatStorage, hasHydrated, storageKeys]);
+    // Keep the URL's thread_id in sync with the client's active thread so a
+    // reload, back-nav, or shared link always resolves to the same conversation
+    // — even for a "New chat" the user hasn't sent a message in yet.
+    useEffect(() => {
+        if (!hasHydrated || typeof window === "undefined") {
+            return;
+        }
+        const url = new URL(window.location.href);
+        const currentThreadParam = url.searchParams.get("thread_id");
+        if (activeThreadId) {
+            if (currentThreadParam === activeThreadId)
+                return;
+            url.searchParams.set("thread_id", activeThreadId);
+        }
+        else {
+            if (!currentThreadParam)
+                return;
+            url.searchParams.delete("thread_id");
+        }
+        window.history.replaceState({}, "", url.toString());
+    }, [activeThreadId, hasHydrated]);
+    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();
+        const isUnsentLocalThread = Boolean(existingThread
+            && (existingThread.messageCount ?? 0) === 0
+            && existingThread.messages.length === 0);
+        if (isUnsentLocalThread) {
+            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);
+                    const isLikelyUnsentThread = Boolean(existingThread && (existingThread.messageCount ?? 0) === 0 && existingThread.messages.length === 0);
+                    if (response.status === 404 && !isLocalOnlyThread && !isLikelyUnsentThread) {
+                        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;
+        }
+        const newestMatchingThread = threads.find((thread) => !thread.hiddenFromView && threadMatchesTracers(thread, tracers));
+        setActiveThreadId(newestMatchingThread?.id ?? threads.find((thread) => !thread.hiddenFromView)?.id ?? null);
+    }, [activeThread, hasHydrated, threads, tracers]);
+    const requestTracers = useMemo(() => activeThread?.tracers.length ? activeThread.tracers : tracers, [activeThread?.tracers, tracers]);
+    const visibleThreads = useMemo(() => (threads.filter((thread) => !thread.hiddenFromView).sort((a, b) => {
+        const aMatches = threadMatchesTracers(a, tracers);
+        const bMatches = threadMatchesTracers(b, tracers);
+        if (aMatches !== bMatches) {
+            return aMatches ? -1 : 1;
+        }
+        return Date.parse(b.updatedAt) - Date.parse(a.updatedAt);
+    })), [threads, tracers]);
+    const defaultRequestTracer = requestTracers[0] ?? null;
+    const messages = activeThread?.messages ?? [];
+    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;
+        }
+        const url = threadDetailUrl(thread.id);
+        if (!url) {
+            return;
+        }
+        await fetch(url, {
+            method: "PATCH",
+            headers: buildAuthHeaders(boot.vidfarmApiKey, "application/json"),
+            body: JSON.stringify({
+                template_id: boot.template.templateId,
+                title: overrides?.title ?? thread.title,
+                tracers: overrides?.tracers ?? thread.tracers,
+                hidden_from_view: overrides?.hiddenFromView ?? (thread.hiddenFromView === true),
+                archived: overrides?.archived
+            })
+        }).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;
+        }
+        const url = threadDetailUrl(threadId);
+        if (!url) {
+            return;
+        }
+        await fetch(url, {
+            method: "DELETE",
+            headers: buildAuthHeaders(boot.vidfarmApiKey)
+        }).catch(() => { });
+    }
+    function syncTracerUrl(nextTracers) {
+        const url = new URL(window.location.href);
+        if (nextTracers.length) {
+            url.searchParams.set("tracers", nextTracers.join(","));
+        }
+        else {
+            url.searchParams.delete("tracers");
+        }
+        window.history.replaceState({}, "", url.toString());
+        window.dispatchEvent(new CustomEvent("vidfarm:editor-tracers-changed", {
+            detail: {
+                tracers: nextTracers
+            }
+        }));
+    }
+    function applyTracerList(nextTracers) {
+        const normalized = normalizeTracerList(nextTracers);
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            bridge.set(normalized);
+            return;
+        }
+        setTracers(normalized);
+        syncTracerUrl(normalized);
+    }
+    function createTracer() {
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            return bridge.add();
+        }
+        const tracer = makeTracerId(boot.template.templateSlug, tracers);
+        applyTracerList([tracer, ...tracers]);
+        return tracer;
+    }
+    function addAiTracer(tracer) {
+        const existing = window.__vidfarmEditorTracers?.get() ?? tracers;
+        const normalized = tracer ? ensureTracerHasRandomSuffix(tracer, existing) : null;
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            return bridge.add(normalized ?? undefined);
+        }
+        if (normalized) {
+            applyTracerList([normalized, ...existing.filter((entry) => entry !== normalized)]);
+            return normalized;
+        }
+        return createTracer();
+    }
+    function setDefaultRequestTracerSelection(tracer) {
+        const normalized = tracer.trim();
+        if (!normalized) {
+            return;
+        }
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            bridge.add(normalized);
+        }
+        else if (!tracers.includes(normalized)) {
+            applyTracerList([normalized, ...tracers]);
+        }
+        if (activeThread) {
+            updateThread(activeThread.id, (thread) => ({
+                ...thread,
+                tracers: [normalized, ...thread.tracers.filter((entry) => entry !== normalized)],
+                updatedAt: new Date().toISOString()
+            }));
+        }
+    }
+    function removeTracer(tracer) {
+        const bridge = window.__vidfarmEditorTracers;
+        if (bridge) {
+            bridge.remove(tracer);
+            return;
+        }
+        const remaining = tracers.filter((entry) => entry !== tracer);
+        applyTracerList(remaining);
+    }
+    useEffect(() => {
+        syncTracerUrl(tracers);
+    }, [tracers]);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        const handleScroll = () => {
+            shouldStickToChatBottomRef.current = isScrolledNearBottom(viewport);
+            if (!shouldStickToChatBottomRef.current) {
+                forceChatBottomOnNextRenderRef.current = false;
+            }
+        };
+        handleScroll();
+        viewport.addEventListener("scroll", handleScroll, { passive: true });
+        return () => {
+            viewport.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return;
+        }
+        const activeThreadChanged = previousActiveThreadIdRef.current !== activeThreadId;
+        previousActiveThreadIdRef.current = activeThreadId;
+        if (activeThreadChanged || forceChatBottomOnNextRenderRef.current || shouldStickToChatBottomRef.current) {
+            viewport.scrollTo({ top: viewport.scrollHeight, behavior: "auto" });
+            shouldStickToChatBottomRef.current = true;
+            forceChatBottomOnNextRenderRef.current = false;
+        }
+    }, [messages, activeThreadId]);
+    useEffect(() => {
+        return () => {
+            activeSendRef.current?.abortController.abort();
+            activeSendRef.current = null;
+            for (const poller of activeJobPollersRef.current.values()) {
+                if (poller.timeoutId !== null) {
+                    window.clearTimeout(poller.timeoutId);
+                }
+                poller.abortController?.abort();
+            }
+            activeJobPollersRef.current.clear();
+        };
+    }, []);
+    useEffect(() => {
+        if (!openThreadMenu) {
+            return;
+        }
+        const closeMenu = () => setOpenThreadMenu(null);
+        document.addEventListener("click", closeMenu);
+        window.addEventListener("resize", closeMenu);
+        window.addEventListener("scroll", closeMenu, true);
+        return () => {
+            document.removeEventListener("click", closeMenu);
+            window.removeEventListener("resize", closeMenu);
+            window.removeEventListener("scroll", closeMenu, true);
+        };
+    }, [openThreadMenu]);
+    useEffect(() => {
+        const resumePolling = () => {
+            if (document.visibilityState !== "visible" || !navigator.onLine) {
+                return;
+            }
+            const now = Date.now();
+            for (const poller of activeJobPollersRef.current.values()) {
+                if (poller.inFlight) {
+                    continue;
+                }
+                if (poller.nextPollAt !== null && poller.nextPollAt <= now && poller.runPoll) {
+                    scheduleNextJobPollForPoller(poller, poller.runPoll, poller.nextPollAt - now);
+                }
+            }
+        };
+        window.addEventListener("online", resumePolling);
+        document.addEventListener("visibilitychange", resumePolling);
+        return () => {
+            window.removeEventListener("online", resumePolling);
+            document.removeEventListener("visibilitychange", resumePolling);
+        };
+    }, []);
+    function ensureActiveThread(seedText) {
+        if (activeThread) {
+            return activeThread.id;
+        }
+        const now = new Date().toISOString();
+        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;
+    }
+    function createNewThread(options) {
+        const now = new Date().toISOString();
+        const threadTracers = normalizeTracerList(options?.tracers ?? tracers);
+        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: []
+        };
+        threadsRef.current = [nextThread, ...threadsRef.current];
+        setThreads((current) => [nextThread, ...current]);
+        if (options?.activate !== false) {
+            setActiveThreadId(threadId);
+            setDraft("");
+            setPendingAttachments([]);
+            setLastError(null);
+        }
+        setOpenThreadMenu(null);
+        return threadId;
+    }
+    function createNewThreadFromClick() {
+        createNewThread();
+        setShowHistoryPanel(false);
+    }
+    function deleteThread(threadId) {
+        const thread = threads.find((entry) => entry.id === threadId);
+        if (!thread) {
+            return;
+        }
+        if (!window.confirm(`Delete conversation "${thread.title}"?`)) {
+            return;
+        }
+        const remainingThreads = threads.filter((entry) => entry.id !== threadId);
+        threadsRef.current = threadsRef.current.filter((entry) => entry.id !== threadId);
+        for (const [pollerKey, poller] of activeJobPollersRef.current.entries()) {
+            if (poller.threadId === threadId) {
+                stopJobPoller(pollerKey);
+            }
+        }
+        setThreads(remainingThreads);
+        if (activeThreadId === threadId) {
+            setActiveThreadId(remainingThreads[0]?.id ?? null);
+        }
+        setLastError(null);
+        setOpenThreadMenu(null);
+        void deleteRemoteThreadState(threadId);
+    }
+    function updateThread(threadId, updater) {
+        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);
+        updateThread(threadId, (thread) => ({
+            ...thread,
+            tracers: mergeTracerLists(thread.tracers, normalized),
+            updatedAt: new Date().toISOString()
+        }));
+        const thread = threadsRef.current.find((entry) => entry.id === threadId);
+        if (thread) {
+            void updateRemoteThreadState({
+                ...thread,
+                tracers: mergeTracerLists(thread.tracers, normalized),
+                updatedAt: new Date().toISOString()
+            }, {
+                tracers: mergeTracerLists(thread.tracers, normalized)
+            });
+        }
+    }
+    function findThreadIdForTracer(tracer, exceptThreadId) {
+        const normalized = tracer.trim();
+        if (!normalized) {
+            return null;
+        }
+        return threadsRef.current.find((thread) => (!thread.hiddenFromView && thread.id !== exceptThreadId && thread.tracers.includes(normalized)))?.id ?? null;
+    }
+    function ensureThreadForTracer(tracer, options) {
+        const existing = findThreadIdForTracer(tracer);
+        if (existing) {
+            return existing;
+        }
+        return createNewThread({
+            tracers: [tracer],
+            title: options?.title || `Tracer ${tracer}`,
+            activate: options?.activate ?? false
+        });
+    }
+    function userRequestedSeparateTracerThreads(text) {
+        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)
+            || /(?: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);
+        if (!existingThreadId && !input.shouldCreateThread) {
+            return null;
+        }
+        const targetThreadId = existingThreadId ?? ensureThreadForTracer(input.tracer, {
+            title: `Tracer ${input.tracer}`,
+            activate: false
+        });
+        if (!targetThreadId || targetThreadId === input.sourceThreadId) {
+            return null;
+        }
+        const messageId = makeMessageId("assistant");
+        const now = new Date().toISOString();
+        const messageText = input.job.status === "succeeded" || input.job.status === "failed" || input.job.status === "cancelled"
+            ? buildJobCompletionMessage(input.job)
+            : buildJobQueuedMessage(input.job);
+        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,
+                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) {
+        const thread = threads.find((entry) => entry.id === threadId);
+        if (!thread) {
+            return;
+        }
+        const value = window.prompt("Thread tracers, comma separated", thread.tracers.join(", "));
+        if (value === null) {
+            return;
+        }
+        const nextTracers = normalizeTracerList(value.split(","));
+        updateThread(threadId, (current) => ({
+            ...current,
+            tracers: nextTracers,
+            updatedAt: new Date().toISOString()
+        }));
+        void updateRemoteThreadState(thread, { tracers: nextTracers });
+        setOpenThreadMenu(null);
+    }
+    function archiveThread(threadId) {
+        const thread = threads.find((entry) => entry.id === threadId);
+        if (!thread) {
+            return;
+        }
+        const confirmed = window.confirm(`Archive conversation "${thread.title}"? Its tracer links will be prefixed with archived_.`);
+        if (!confirmed) {
+            return;
+        }
+        const nextTracers = normalizeTracerList(thread.tracers.map(archiveTracerValue));
+        updateThread(threadId, (current) => ({
+            ...current,
+            tracers: nextTracers,
+            updatedAt: new Date().toISOString()
+        }));
+        void updateRemoteThreadState(thread, { tracers: nextTracers, archived: true });
+        setOpenThreadMenu(null);
+    }
+    function removeThreadFromView(threadId) {
+        const thread = threads.find((entry) => entry.id === threadId);
+        if (!thread) {
+            return;
+        }
+        const confirmed = window.confirm(`Remove conversation "${thread.title}" from this frontend view? The thread and tracer links stay available; Delete removes the thread completely.`);
+        if (!confirmed) {
+            return;
+        }
+        for (const [pollerKey, poller] of activeJobPollersRef.current.entries()) {
+            if (poller.threadId === threadId) {
+                stopJobPoller(pollerKey);
+            }
+        }
+        updateThread(threadId, (current) => ({
+            ...current,
+            hiddenFromView: true,
+            updatedAt: new Date().toISOString()
+        }));
+        if (activeThreadId === threadId) {
+            const nextThread = visibleThreads.find((entry) => entry.id !== threadId);
+            setActiveThreadId(nextThread?.id ?? null);
+        }
+        setOpenThreadMenu(null);
+        setLastError(null);
+        void updateRemoteThreadState(thread, { hiddenFromView: true });
+    }
+    async function copyThreadId(threadId) {
+        try {
+            if (navigator.clipboard?.writeText) {
+                await navigator.clipboard.writeText(threadId);
+            }
+            else {
+                const textarea = document.createElement("textarea");
+                textarea.value = threadId;
+                textarea.setAttribute("readonly", "");
+                textarea.style.position = "fixed";
+                textarea.style.opacity = "0";
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textarea);
+            }
+            setLastError(null);
+        }
+        catch {
+            setLastError("Unable to copy chat ID.");
+        }
+        finally {
+            setOpenThreadMenu(null);
+        }
+    }
+    function toggleThreadMenu(threadId, button) {
+        if (openThreadMenu?.threadId === threadId) {
+            setOpenThreadMenu(null);
+            return;
+        }
+        const rect = button.getBoundingClientRect();
+        const menuWidth = 148;
+        setOpenThreadMenu({
+            threadId,
+            top: rect.bottom + 6,
+            left: Math.max(8, Math.min(window.innerWidth - menuWidth - 8, rect.right - menuWidth))
+        });
+    }
+    function stopJobPoller(pollerKey) {
+        const poller = activeJobPollersRef.current.get(pollerKey);
+        if (!poller) {
+            return;
+        }
+        if (poller.timeoutId !== null) {
+            window.clearTimeout(poller.timeoutId);
+        }
+        poller.abortController?.abort();
+        activeJobPollersRef.current.delete(pollerKey);
+    }
+    function scheduleNextJobPoll(pollerKey, runPoll, delayMs) {
+        const poller = activeJobPollersRef.current.get(pollerKey);
+        if (!poller) {
+            return;
+        }
+        scheduleNextJobPollForPoller(poller, runPoll, delayMs);
+    }
+    function scheduleNextJobPollForPoller(poller, runPoll, delayMs) {
+        if (poller.timeoutId !== null) {
+            window.clearTimeout(poller.timeoutId);
+        }
+        const safeDelayMs = Math.max(JOB_POLL_MIN_TIMER_MS, delayMs);
+        poller.nextPollAt = Date.now() + safeDelayMs;
+        poller.timeoutId = window.setTimeout(() => {
+            poller.timeoutId = null;
+            void runPoll();
+        }, safeDelayMs);
+    }
+    function getJobPollIntervalMs() {
+        return activeJobPollersRef.current.size >= JOB_POLL_BUSY_THRESHOLD
+            ? JOB_POLL_BUSY_INTERVAL_MS
+            : JOB_POLL_INTERVAL_MS;
+    }
+    function formatJobPollInterval(ms = getJobPollIntervalMs()) {
+        if (ms >= 60_000) {
+            const minutes = Math.round(ms / 60_000);
+            return `${minutes} min${minutes === 1 ? "" : "s"}`;
+        }
+        return `${Math.round(ms / 1_000)}s`;
+    }
+    function getJobPollCadenceText(ms = getJobPollIntervalMs()) {
+        return activeJobPollersRef.current.size >= JOB_POLL_BUSY_THRESHOLD
+            ? `Many renders are active, so the next check is in ${formatJobPollInterval(ms)}.`
+            : `Checking again gently every ${formatJobPollInterval(ms)}.`;
+    }
+    function rescheduleActiveJobPollersForLoad() {
+        const intervalMs = getJobPollIntervalMs();
+        if (intervalMs === JOB_POLL_INTERVAL_MS) {
+            return;
+        }
+        const now = Date.now();
+        for (const poller of activeJobPollersRef.current.values()) {
+            if (poller.inFlight || !poller.runPoll) {
+                continue;
+            }
+            const remainingMs = poller.nextPollAt === null ? 0 : poller.nextPollAt - now;
+            if (remainingMs < intervalMs) {
+                scheduleNextJobPollForPoller(poller, poller.runPoll, intervalMs);
+            }
+        }
+    }
+    function reserveJobPollSlot(now) {
+        const slotAt = Math.max(now, jobPollGateRef.current.nextAvailableAt);
+        jobPollGateRef.current.nextAvailableAt = slotAt + JOB_POLL_GLOBAL_MIN_GAP_MS;
+        return slotAt - now;
+    }
+    function scheduleJobPolling(input) {
+        const pollerKey = makeJobPollerKey(input.threadId, input.assistantMessageId, input.jobId);
+        if (activeJobPollersRef.current.has(pollerKey)) {
+            return;
+        }
+        activeJobPollersRef.current.set(pollerKey, {
+            timeoutId: null,
+            abortController: null,
+            runPoll: null,
+            inFlight: false,
+            nextPollAt: null,
+            lastPollAt: null,
+            attempts: 0,
+            threadId: input.threadId
+        });
+        const runPoll = async () => {
+            const poller = activeJobPollersRef.current.get(pollerKey);
+            if (!poller) {
+                return;
+            }
+            if (poller.inFlight) {
+                return;
+            }
+            const now = Date.now();
+            const pollIntervalMs = getJobPollIntervalMs();
+            if (poller.lastPollAt !== null && now - poller.lastPollAt < pollIntervalMs) {
+                scheduleNextJobPoll(pollerKey, runPoll, pollIntervalMs - (now - poller.lastPollAt));
+                return;
+            }
+            if (poller.attempts >= JOB_POLL_MAX_ATTEMPTS) {
+                updateThread(input.threadId, (thread) => ({
+                    ...thread,
+                    updatedAt: new Date().toISOString(),
+                    messages: thread.messages.map((message) => (message.id === input.assistantMessageId
+                        ? {
+                            ...message,
+                            statusText: "Background polling stopped after multiple checks. Open the job route when you want to refresh again."
+                        }
+                        : message))
+                }));
+                stopJobPoller(pollerKey);
+                return;
+            }
+            if (document.visibilityState !== "visible" || !navigator.onLine) {
+                scheduleNextJobPoll(pollerKey, runPoll, pollIntervalMs);
+                return;
+            }
+            const globalDelayMs = reserveJobPollSlot(Date.now());
+            if (globalDelayMs > 0) {
+                scheduleNextJobPoll(pollerKey, runPoll, globalDelayMs);
+                return;
+            }
+            poller.inFlight = true;
+            poller.lastPollAt = now;
+            poller.nextPollAt = null;
+            poller.attempts += 1;
+            poller.abortController = new AbortController();
+            try {
+                updateThread(input.threadId, (thread) => ({
+                    ...thread,
+                    updatedAt: new Date().toISOString(),
+                    messages: thread.messages.map((message) => (message.id === input.assistantMessageId
+                        ? {
+                            ...message,
+                            statusText: `Job ${input.jobId} is being tracked. ${getJobPollCadenceText(pollIntervalMs)}`
+                        }
+                        : message))
+                }));
+                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),
+                    signal: poller.abortController.signal
+                });
+                const responseBody = await response.json().catch(() => null);
+                const responseHeaders = Object.fromEntries(response.headers.entries());
+                const payload = tryReadJobStatusPayload(responseBody);
+                updateThread(input.threadId, (thread) => ({
+                    ...thread,
+                    updatedAt: new Date().toISOString(),
+                    messages: thread.messages.map((message) => {
+                        if (message.id !== input.assistantMessageId) {
+                            return message;
+                        }
+                        const nextHttpExchanges = upsertAutomaticPollExchange(message.httpExchanges, sanitizeHttpExchange({
+                            explanation: `Automatic ${formatJobPollInterval(pollIntervalMs)} job status check for ${input.jobId}`,
+                            pollJobId: input.jobId,
+                            pollMode: "automatic",
+                            request: {
+                                method: "GET",
+                                url,
+                                headers: Object.fromEntries(buildAuthHeaders(boot.vidfarmApiKey).entries())
+                            },
+                            result: {
+                                status: response.status,
+                                statusText: response.statusText,
+                                headers: responseHeaders,
+                                body: responseBody
+                            }
+                        }));
+                        const nextStatusText = payload
+                            ? payload.status === "succeeded"
+                                ? `Render ${payload.job_id} succeeded.`
+                                : payload.status === "failed" || payload.status === "cancelled"
+                                    ? `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,
+                            statusText: nextStatusText,
+                            text: payload && (payload.status === "succeeded" || payload.status === "failed" || payload.status === "cancelled")
+                                ? appendDistinctMessageText(message.text, buildJobCompletionMessage(payload))
+                                : message.text
+                        };
+                    })
+                }));
+                if (payload && (payload.status === "succeeded" || payload.status === "failed" || payload.status === "cancelled")) {
+                    stopJobPoller(pollerKey);
+                    return;
+                }
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "AbortError") {
+                    return;
+                }
+                updateThread(input.threadId, (thread) => ({
+                    ...thread,
+                    updatedAt: new Date().toISOString(),
+                    messages: thread.messages.map((message) => (message.id === input.assistantMessageId
+                        ? {
+                            ...message,
+                            statusText: `Automatic polling paused after an error. It will retry in ${formatJobPollInterval()}.`
+                        }
+                        : message))
+                }));
+            }
+            finally {
+                const latestPoller = activeJobPollersRef.current.get(pollerKey);
+                if (!latestPoller) {
+                    return;
+                }
+                latestPoller.inFlight = false;
+                latestPoller.abortController = null;
+                if (latestPoller.attempts < JOB_POLL_MAX_ATTEMPTS
+                    && latestPoller.timeoutId === null
+                    && activeJobPollersRef.current.has(pollerKey)) {
+                    scheduleNextJobPoll(pollerKey, runPoll, getJobPollIntervalMs());
+                }
+            }
+        };
+        const initialPoller = activeJobPollersRef.current.get(pollerKey);
+        if (initialPoller) {
+            initialPoller.runPoll = runPoll;
+        }
+        const poller = activeJobPollersRef.current.get(pollerKey);
+        if (poller) {
+            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;
+        }
+        setLastError(null);
+        const uploadedAttachments = [];
+        let lastUploadError = null;
+        for (const file of files) {
+            try {
+                const uploaded = await uploadTemporaryFile({
+                    apiKey: boot.vidfarmApiKey,
+                    file,
+                    folderPath: CHAT_TEMPORARY_UPLOAD_FOLDER
+                });
+                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.";
+            }
+        }
+        if (lastUploadError && uploadedAttachments.length === 0) {
+            setLastError(lastUploadError);
+        }
+        if (uploadedAttachments.length) {
+            setPendingAttachments((current) => [...current, ...uploadedAttachments]);
+            if (lastUploadError) {
+                setLastError(lastUploadError);
+            }
+        }
+    }
+    async function handlePickFiles(event) {
+        const files = Array.from(event.target.files ?? []);
+        await appendFiles(files);
+        event.target.value = "";
+    }
+    async function handleComposerPaste(event) {
+        const files = Array.from(event.clipboardData.files ?? []).filter((file) => file.size > 0);
+        if (!files.length) {
+            return;
+        }
+        event.preventDefault();
+        await appendFiles(files);
+    }
+    async function handleComposerDrop(event) {
+        event.preventDefault();
+        setIsDropTarget(false);
+        const files = Array.from(event.dataTransfer.files ?? []).filter((file) => file.size > 0);
+        if (!files.length) {
+            return;
+        }
+        await appendFiles(files);
+    }
+    async function handleSend() {
+        if (!canSend) {
+            return;
+        }
+        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",
+            text: draft.trim(),
+            attachments: pendingAttachments
+        };
+        const assistantMessage = {
+            id: makeMessageId("assistant"),
+            role: "assistant",
+            text: "",
+            attachments: [],
+            statusText: "Waiting for AI response…",
+            isPending: true
+        };
+        const existingMessages = threadForSend?.messages ?? [];
+        const historyForTransport = compactTransportHistory([...existingMessages, userMessage]);
+        updateThread(threadId, (thread) => ({
+            ...thread,
+            title: thread.messages.length === 0 ? formatThreadTitle(userMessage.text) : thread.title,
+            updatedAt: now,
+            messages: [...thread.messages, userMessage, assistantMessage]
+        }));
+        setDraft("");
+        setPendingAttachments([]);
+        setLastError(null);
+        setSendingThreadId(threadId);
+        setLoadingStatus("Waiting for AI response…");
+        const abortController = new AbortController();
+        activeSendRef.current = {
+            abortController,
+            threadId,
+            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()
+                }
+            });
+            debugLog("chat.send.attempt", {
+                thread_id: threadId,
+                template_id: boot.template.templateId,
+                message_count: historyForTransport.length,
+                attachment_count: userMessage.attachments.length,
+                text_length: userMessage.text.length
+            });
+            const sendStartedAt = Date.now();
+            const response = await fetch(boot.apiUrl || "/api/v1/editor-chat", {
+                method: "POST",
+                headers: buildAuthHeaders(boot.vidfarmApiKey, "application/json"),
+                signal: abortController.signal,
+                body: requestBody
+            });
+            if (!response.ok) {
+                const payload = await response.json().catch(() => ({}));
+                debugError("chat.send.rejected", {
+                    thread_id: threadId,
+                    status: response.status,
+                    error: typeof payload?.error === "string" ? payload.error : null
+                });
+                throw new Error(typeof payload?.error === "string" ? payload.error : `Chat failed with status ${response.status}.`);
+            }
+            debugLog("chat.send.stream_open", {
+                thread_id: threadId,
+                latency_ms: Date.now() - sendStartedAt
+            });
+            const pendingToolCalls = new Map();
+            const shouldSplitJobsIntoThreads = userRequestedSeparateTracerThreads(userMessage.text);
+            await readStreamText(response, {
+                onDelta: (chunk) => {
+                    setLoadingStatus("AI is responding…");
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        updatedAt: new Date().toISOString(),
+                        messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                            ? {
+                                ...message,
+                                text: `${message.text}${chunk}`,
+                                statusText: "AI is responding…",
+                                isPending: false
+                            }
+                            : message))
+                    }));
+                },
+                onStatus: (status) => {
+                    setLoadingStatus(status);
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                            ? {
+                                ...message,
+                                statusText: status,
+                                isPending: !message.text
+                            }
+                            : message))
+                    }));
+                },
+                onToolCall: (toolCall) => {
+                    pendingToolCalls.set(toolCall.toolCallId, {
+                        toolName: toolCall.toolName,
+                        args: toolCall.args
+                    });
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        updatedAt: new Date().toISOString(),
+                        messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                            ? {
+                                ...message,
+                                toolExchanges: [
+                                    ...(message.toolExchanges ?? []),
+                                    {
+                                        toolCallId: toolCall.toolCallId,
+                                        toolName: toolCall.toolName,
+                                        args: sanitizeChatPayload(toolCall.args),
+                                        status: "pending"
+                                    }
+                                ]
+                            }
+                            : message))
+                    }));
+                },
+                onToolResult: (toolResult) => {
+                    const sanitizedToolResult = sanitizeToolResult(toolResult.result);
+                    const pendingCall = pendingToolCalls.get(toolResult.toolCallId);
+                    if (toolResult.toolName === "frontend_action") {
+                        const actionResult = toolResult.result;
+                        if (actionResult?.action === "add_tracer") {
+                            addAiTracer(actionResult.tracer ?? undefined);
+                        }
+                        else if (actionResult?.action === "remove_tracer" && actionResult.tracer) {
+                            removeTracer(actionResult.tracer);
+                        }
+                        else if (actionResult?.action === "activate_tracer" && actionResult.tracer) {
+                            setDefaultRequestTracerSelection(actionResult.tracer);
+                        }
+                        else if (actionResult?.action === "create_thread") {
+                            const threadTracer = actionResult.tracer ? addAiTracer(actionResult.tracer) : createTracer();
+                            createNewThread({
+                                tracers: threadTracer ? [threadTracer] : [],
+                                title: threadTracer ? `Tracer ${threadTracer}` : "New chat",
+                                activate: false
+                            });
+                        }
+                    }
+                    const toolResultRecordForMirror = toolResult.result;
+                    const jobStatusPayloadForMirror = tryReadJobStatusPayload(toolResultRecordForMirror?.response?.body);
+                    const mirrorHttpExchange = toolResultRecordForMirror?.request && toolResultRecordForMirror?.response
+                        ? sanitizeHttpExchange({
+                            explanation: toolResultRecordForMirror.explanation ?? null,
+                            request: toolResultRecordForMirror.request,
+                            result: toolResultRecordForMirror.response
+                        })
+                        : undefined;
+                    const mirroredJobTarget = toolResultRecordForMirror?.request?.method === "POST" && jobStatusPayloadForMirror?.tracer
+                        ? mirrorJobToTracerThread({
+                            sourceThreadId: threadId,
+                            tracer: jobStatusPayloadForMirror.tracer,
+                            job: jobStatusPayloadForMirror,
+                            httpExchange: mirrorHttpExchange,
+                            shouldCreateThread: shouldSplitJobsIntoThreads
+                        })
+                        : null;
+                    if (mirroredJobTarget
+                        && jobStatusPayloadForMirror
+                        && !isTerminalJobStatus(jobStatusPayloadForMirror.status)) {
+                        scheduleJobPolling({
+                            threadId: mirroredJobTarget.threadId,
+                            assistantMessageId: mirroredJobTarget.messageId,
+                            jobId: jobStatusPayloadForMirror.job_id,
+                            tracer: jobStatusPayloadForMirror.tracer,
+                            initialStatus: jobStatusPayloadForMirror.status,
+                            primitiveId: jobStatusPayloadForMirror.primitive_id,
+                            sourceRequestUrl: toolResultRecordForMirror?.request?.url
+                        });
+                    }
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        updatedAt: new Date().toISOString(),
+                        messages: thread.messages.map((message) => {
+                            if (message.id !== assistantMessage.id) {
+                                return message;
+                            }
+                            const nextToolExchanges = (message.toolExchanges ?? []).map((exchange) => (exchange.toolCallId === toolResult.toolCallId
+                                ? {
+                                    ...exchange,
+                                    result: sanitizedToolResult,
+                                    status: (typeof toolResult.result?.error === "string" ? "error" : "complete")
+                                }
+                                : exchange));
+                            const toolResultRecord = toolResult.result;
+                            const jobStatusPayload = tryReadJobStatusPayload(toolResultRecord?.response?.body);
+                            const nextHttpExchanges = toolResultRecord?.request && toolResultRecord?.response
+                                ? [
+                                    ...(message.httpExchanges ?? []),
+                                    sanitizeHttpExchange({
+                                        explanation: toolResultRecord.explanation ?? null,
+                                        request: toolResultRecord.request,
+                                        result: toolResultRecord.response
+                                    })
+                                ]
+                                : message.httpExchanges;
+                            if (pendingCall) {
+                                pendingToolCalls.delete(toolResult.toolCallId);
+                            }
+                            if (toolResultRecord?.request?.method === "POST" && jobStatusPayload?.tracer) {
+                                const bridge = window.__vidfarmEditorTracers;
+                                if (bridge) {
+                                    bridge.add(jobStatusPayload.tracer);
+                                }
+                                else {
+                                    applyTracerList([jobStatusPayload.tracer, ...tracers.filter((entry) => entry !== jobStatusPayload.tracer)]);
+                                }
+                                attachTracersToThread(threadId, [jobStatusPayload.tracer]);
+                            }
+                            if (jobStatusPayload
+                                && !mirroredJobTarget
+                                && !isTerminalJobStatus(jobStatusPayload.status)) {
+                                scheduleJobPolling({
+                                    threadId,
+                                    assistantMessageId: assistantMessage.id,
+                                    jobId: jobStatusPayload.job_id,
+                                    tracer: jobStatusPayload.tracer,
+                                    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 && isTerminalJobStatus(jobStatusPayload.status)
+                                        ? appendDistinctMessageText(message.text, buildJobCompletionMessage(jobStatusPayload))
+                                        : jobStatusPayload
+                                            ? appendDistinctMessageText(message.text, buildJobCompletionMessage(jobStatusPayload))
+                                            : message.text
+                            };
+                        })
+                    }));
+                },
+                onError: (errorMessage) => {
+                    debugError("chat.stream.error", { thread_id: threadId, message: errorMessage });
+                    setLastError(errorMessage);
+                    setLoadingStatus(null);
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        messages: thread.messages.filter((message) => message.id !== assistantMessage.id)
+                    }));
+                }
+            });
+            debugLog("chat.stream.completed", {
+                thread_id: threadId,
+                duration_ms: Date.now() - sendStartedAt
+            });
+            updateThread(threadId, (thread) => ({
+                ...thread,
+                updatedAt: new Date().toISOString(),
+                messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                    ? {
+                        ...message,
+                        statusText: message.statusText?.includes("being tracked") ? message.statusText : null,
+                        isPending: false
+                    }
+                    : message))
+            }));
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === "AbortError") {
+                debugWarn("chat.send.aborted", { thread_id: threadId });
+                setLastError(null);
+                setLoadingStatus(null);
+                updateThread(threadId, (thread) => ({
+                    ...thread,
+                    updatedAt: new Date().toISOString(),
+                    messages: thread.messages.map((message) => {
+                        if (message.id !== assistantMessage.id) {
+                            return message;
+                        }
+                        const hasContent = Boolean(message.text.trim()
+                            || message.toolExchanges?.length
+                            || message.httpExchanges?.length);
+                        return hasContent
+                            ? {
+                                ...message,
+                                statusText: "Stopped.",
+                                isPending: false
+                            }
+                            : {
+                                ...message,
+                                text: "Stopped.",
+                                statusText: null,
+                                isPending: false
+                            };
+                    })
+                }));
+                return;
+            }
+            debugError("chat.send.failed", {
+                thread_id: threadId,
+                message: error instanceof Error ? error.message : String(error)
+            });
+            setLastError(error instanceof Error ? error.message : "Unable to send chat message.");
+            setLoadingStatus(null);
+            updateThread(threadId, (thread) => ({
+                ...thread,
+                messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                    ? {
+                        ...message,
+                        text: error instanceof Error ? `Error: ${error.message}` : "Error: Unable to send chat message.",
+                        statusText: null,
+                        isPending: false
+                    }
+                    : message))
+            }));
+        }
+        finally {
+            if (activeSendRef.current?.assistantMessageId === assistantMessage.id) {
+                activeSendRef.current = null;
+            }
+            setSendingThreadId((current) => (current === threadId ? null : current));
+            setLoadingStatus(null);
+        }
+    }
+    function stopActiveSend() {
+        setLoadingStatus("Stopping…");
+        const activeSend = activeSendRef.current;
+        if (activeSend) {
+            updateThread(activeSend.threadId, (thread) => ({
+                ...thread,
+                updatedAt: new Date().toISOString(),
+                messages: thread.messages.map((message) => (message.id === activeSend.assistantMessageId
+                    ? {
+                        ...message,
+                        statusText: "Stopping…"
+                    }
+                    : message))
+            }));
+        }
+        activeSendRef.current?.abortController.abort();
+    }
+    useEffect(() => {
+        return () => {
+            activeSendRef.current?.abortController.abort();
+            for (const pollerKey of activeJobPollersRef.current.keys()) {
+                stopJobPoller(pollerKey);
+            }
+            // Flush the debounced persistence so a mid-stream unmount does not
+            // lose the last few deltas before the 300ms timer fires.
+            try {
+                chatStorage?.setItem(storageKeys.threads, JSON.stringify(serializeThreads(persistThreadsRef.current, persistActiveThreadIdRef.current)));
+            }
+            catch { }
+        };
+    }, [chatStorage, storageKeys]);
+    function handleComposerKeyDown(event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            void handleSend();
+        }
+    }
+    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);
+                        setShowHistoryPanel(false);
+                        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." })) }));
+    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"}${showPersistentSidebar ? " has-sidebar" : ""}`, "data-history-open": showHistoryPanel || showBranchesPanel ? "true" : "false", children: [showPersistentSidebar ? (_jsxs("aside", { className: "vf-editor-chat-history-pane", children: [_jsx("div", { className: "vf-editor-chat-history-header", children: _jsxs("div", { className: "vf-editor-chat-history-header-main", children: [_jsxs("a", { className: "vf-editor-chat-back-button", href: "/discover", "aria-label": "Back to Discover", children: [_jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 4-6 6 6 6" }) }), "Discover"] }), _jsx("div", { className: "vf-editor-chat-history-kicker", children: "Chat history" })] }) }), _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: [_jsxs("div", { className: "vf-editor-chat-header-row", children: [_jsx("a", { className: "vf-editor-chat-back-button vf-editor-chat-back-button--header", href: "/discover", "aria-label": "Back to Discover", children: _jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 4-6 6 6 6" }) }) }), _jsx("button", { type: "button", className: "vf-editor-chat-history-icon", "aria-label": showHistoryPanel ? "Back to chat" : "Open chat history", "aria-pressed": showHistoryPanel, onClick: () => {
+                                                    setShowHistoryPanel((prev) => !prev);
+                                                    setShowBranchesPanel(false);
+                                                }, children: showHistoryPanel ? (_jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 4-6 6 6 6" }) })) : (_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-history-icon vf-editor-chat-branches-icon", "aria-label": showBranchesPanel ? "Back to chat" : "Open template forks", "aria-pressed": showBranchesPanel, onClick: () => {
+                                                    setShowBranchesPanel((prev) => !prev);
+                                                    setShowHistoryPanel(false);
+                                                }, children: showBranchesPanel ? (_jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m12 4-6 6 6 6" }) })) : (_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: "5.5", cy: "4.5", r: "1.9" }), _jsx("circle", { cx: "5.5", cy: "15.5", r: "1.9" }), _jsx("circle", { cx: "14.5", cy: "8", r: "1.9" }), _jsx("path", { d: "M5.5 6.4v7.2" }), _jsx("path", { d: "M5.5 13.6c0-3.2 2.4-3.6 4.4-3.9 2-.3 4.6-.5 4.6-3.7" })] })) }), _jsxs("div", { className: "vf-editor-chat-header-titles", children: [_jsx("div", { className: "vf-editor-chat-header-title", children: "Vidfarm" }), _jsx("div", { className: "vf-editor-chat-header-subtitle", children: showHistoryPanel ? "Chat history" : showBranchesPanel ? "Template forks" : 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" })] }), 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 ? (_jsx("div", { className: "vf-editor-chat-history-panel", children: threadListContent })) : showBranchesPanel ? (_jsxs("div", { className: "vf-editor-chat-history-panel vf-editor-chat-branches-panel", children: [_jsxs("div", { className: "vf-editor-chat-branches-header", children: [_jsxs("div", { className: "vf-editor-chat-branches-header-main", children: [_jsx("div", { className: "vf-editor-chat-branches-kicker", children: "Forks" }), _jsxs("div", { className: "vf-editor-chat-branches-title", children: [branches?.length ?? 0, " fork", (branches?.length ?? 0) === 1 ? "" : "s", " of this template"] })] }), _jsx("button", { type: "button", className: "vf-editor-chat-branches-refresh", onClick: () => { void loadBranches({ force: true }); }, disabled: branchesLoading, "aria-label": "Refresh forks", children: branchesLoading ? "Loading…" : "Refresh" })] }), branchesError ? (_jsx("div", { className: "vf-editor-chat-thread-empty", role: "status", children: branchesError })) : branchesLoading && !branches ? (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "Loading forks\u2026" })) : branches && branches.length ? (_jsx("div", { className: "vf-editor-chat-thread-list", children: branches.map((fork) => {
+                                                const isCurrent = currentForkId === fork.forkId;
+                                                const forkUrl = `/editor/${encodeURIComponent(boot.template.templateId)}?fork=${encodeURIComponent(fork.forkId)}`;
+                                                const label = fork.title && fork.title.trim() ? fork.title : fork.forkId;
+                                                const parentSuffix = fork.parentForkId ? ` · forked from ${fork.parentForkId.slice(0, 12)}${fork.parentVersion ? `#v${fork.parentVersion}` : ""}` : "";
+                                                const versionSuffix = fork.latestVersion && fork.latestVersion > 0 ? ` · v${fork.latestVersion}` : "";
+                                                return (_jsx("div", { role: "listitem", className: "vf-editor-chat-thread-chip", "data-active": isCurrent ? "true" : "false", children: _jsxs("a", { className: "vf-editor-chat-thread-chip-main vf-editor-chat-branch-chip-link", href: forkUrl, target: "_blank", rel: "noopener noreferrer", children: [_jsxs("span", { className: "vf-editor-chat-thread-chip-title", children: [label, isCurrent ? _jsx("span", { className: "vf-editor-chat-branch-current-badge", children: "current" }) : null] }), _jsxs("span", { className: "vf-editor-chat-thread-chip-tracers", children: [fork.visibility ?? "private", versionSuffix, parentSuffix] })] }) }, fork.forkId));
+                                            }) })) : (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "No forks yet for this template." }))] })) : 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." : "Repurpose this video." }), _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 brainstorm tools to turn this video into a native ad for your product, spot product-placement opportunities, and shape the timeline you can actually test. 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: "I don't know where to start" }), _jsx("div", { children: "Repurpose this video into a social media native ad for my product" }), _jsx("div", { children: "Help me identify product placement opportunities in this video for my product" })] })) })] })) }), _jsx("div", { className: "vf-editor-chat-footer", hidden: showHistoryPanel || showBranchesPanel, 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