@mevdragon/vidfarm-devcli 0.2.7 → 0.2.9

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

@@ -0,0 +1,2261 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+function normalizeUploadedAttachment(raw) {
+    const id = raw.id || raw.attachment_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 };
+}
+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;
+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,
+            body: sanitizeChatPayload(exchange.request.body)
+        },
+        result: {
+            ...exchange.result,
+            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 extractFilenameFromUrl(url) {
+    const storageKey = extractStorageKeyFromUrl(url);
+    if (storageKey) {
+        const fileName = decodeURIComponent(storageKey.split("/").filter(Boolean).pop() || "");
+        if (fileName) {
+            return fileName;
+        }
+    }
+    try {
+        const pathname = new URL(url).pathname;
+        return decodeURIComponent(pathname.split("/").filter(Boolean).pop() || "");
+    }
+    catch {
+        return "";
+    }
+}
+function labelFromUrl(url) {
+    const filename = extractFilenameFromUrl(url);
+    return filename || "Output";
+}
+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 job \`${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 buildJobCompletionMessage(job) {
+    if (job.status === "succeeded") {
+        const urls = [];
+        collectLabeledUrls(job.result, urls);
+        const lines = [`Job \`${job.job_id}\` succeeded.`];
+        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 `Job \`${job.job_id}\` failed.${job.error?.message ? ` ${job.error.message}` : ""}`;
+    }
+    if (job.status === "cancelled") {
+        return `Job \`${job.job_id}\` was cancelled.`;
+    }
+    return `Job \`${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,
+        progress: typeof record.progress === "number" ? record.progress : null,
+        result: record.result,
+        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 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 uploadAttachment(input) {
+    const presignResponse = await fetch("/api/v1/user/me/attachments/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
+        })
+    });
+    const presignPayload = await parseJson(presignResponse);
+    if (!presignResponse.ok || !("transport" in presignPayload)) {
+        throw new Error(("error" in presignPayload && presignPayload.error) || "Unable to prepare upload.");
+    }
+    if (presignPayload.transport === "server") {
+        const uploadFormData = new FormData();
+        uploadFormData.append(presignPayload.upload.form_field || "file", input.file);
+        const uploadResponse = await fetch(presignPayload.upload.url, {
+            method: presignPayload.upload.method || "POST",
+            headers: buildAuthHeaders(input.apiKey),
+            body: uploadFormData
+        });
+        const uploadPayload = await parseJson(uploadResponse);
+        if (!uploadResponse.ok || !uploadPayload.attachment) {
+            throw new Error(uploadPayload.error || "Unable to upload attachment.");
+        }
+        return normalizeUploadedAttachment(uploadPayload.attachment) ?? (() => {
+            throw new Error("Attachment response was incomplete.");
+        })();
+    }
+    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/attachments", {
+        method: "POST",
+        headers: buildAuthHeaders(input.apiKey, "application/json"),
+        body: JSON.stringify({
+            attachment_id: presignPayload.attachment_id,
+            file_name: presignPayload.file_name,
+            content_type: presignPayload.content_type,
+            size_bytes: input.file.size,
+            storage_key: presignPayload.storage_key
+        })
+    });
+    const finalizePayload = await parseJson(finalizeResponse);
+    if (!finalizeResponse.ok || !finalizePayload.attachment) {
+        throw new Error(finalizePayload.error || "Unable to save uploaded attachment.");
+    }
+    return normalizeUploadedAttachment(finalizePayload.attachment) ?? (() => {
+        throw new Error("Attachment response was incomplete.");
+    })();
+}
+function toTransportMessages(messages, systemMessages) {
+    return [
+        ...systemMessages
+            .filter((entry) => entry.trim().length > 0)
+            .map((entry) => ({
+            role: "system",
+            content: entry
+        })),
+        ...messages.map((message) => ({
+            role: message.role,
+            content: [
+                ...(message.text ? [{ type: "text", text: message.text }] : []),
+                ...message.attachments.map((attachment) => ({
+                    type: "file",
+                    data: attachment.transportData || 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 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) {
+    return threads.map((thread) => ({
+        id: thread.id,
+        title: thread.title,
+        createdAt: thread.createdAt,
+        updatedAt: thread.updatedAt,
+        tracers: thread.tracers,
+        hiddenFromView: thread.hiddenFromView,
+        messages: thread.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?.map((exchange) => ({
+                ...exchange,
+                args: sanitizeChatPayload(exchange.args),
+                result: sanitizeToolResult(exchange.result)
+            })),
+            httpExchanges: message.httpExchanges?.map(sanitizeHttpExchange)
+        }))
+    }));
+}
+function hydrateThreads(raw) {
+    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,
+            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(),
+            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) {
+    if (!thread || typeof thread.id !== "string") {
+        return null;
+    }
+    return {
+        id: thread.id,
+        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(),
+        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) {
+        byId.set(thread.id, thread);
+    }
+    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 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 MediaPreviewModal(props) {
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    if (!isMounted) {
+        return null;
+    }
+    return createPortal(_jsx("div", { className: "vf-editor-chat-media-modal-backdrop", onClick: props.onClose, children: _jsxs("div", { className: "vf-editor-chat-media-modal", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vf-editor-chat-media-modal-header", children: [_jsx("a", { className: "vf-editor-chat-media-modal-link", href: props.preview.url, target: "_blank", rel: "noopener noreferrer", children: props.preview.label }), _jsx("button", { type: "button", className: "vf-editor-chat-media-modal-close", onClick: props.onClose, "aria-label": "Close media preview", children: "\u00D7" })] }), _jsx("div", { className: "vf-editor-chat-media-modal-body", children: props.preview.kind === "image" ? (_jsx("img", { src: props.preview.url, alt: props.preview.label, className: "vf-editor-chat-media-modal-image" })) : (_jsx("video", { src: props.preview.url, className: "vf-editor-chat-media-modal-video", controls: true, autoPlay: true, playsInline: true })) })] }) }), document.body);
+}
+function ImagePreviewButton(props) {
+    const [hasError, setHasError] = useState(false);
+    return (_jsx("button", { type: "button", className: "vf-editor-chat-message-thumb-button is-image", onClick: () => props.onOpenModal(props.preview), "aria-label": `Preview ${props.preview.label}`, title: props.preview.label, "data-error": hasError ? "true" : "false", children: hasError ? (_jsx("span", { className: "vf-editor-chat-message-thumb-fallback", children: "Preview unavailable" })) : (_jsx("img", { src: props.preview.url, alt: props.preview.label, className: "vf-editor-chat-message-attachment-thumb", loading: "lazy", onError: () => setHasError(true) })) }));
+}
+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, 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 ChatBubble(props) {
+    const isAssistant = props.message.role === "assistant";
+    const hasVisibleText = props.message.text.trim().length > 0;
+    const renderedText = hasVisibleText ? renderMarkdownToHtml(props.message.text) : "";
+    const [mediaModalPreview, setMediaModalPreview] = useState(null);
+    const 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");
+    return (_jsxs("div", { className: `vf-editor-chat-message ${isAssistant ? "is-assistant" : "is-user"}`, children: [_jsx("div", { className: "vf-editor-chat-message-meta", children: isAssistant ? "Copilot" : "You" }), _jsxs("div", { className: "vf-editor-chat-bubble", "data-pending": props.message.isPending ? "true" : "false", children: [props.message.attachments.length ? (_jsxs("div", { className: "vf-editor-chat-message-attachments", children: [fileAttachments.map((attachment) => (_jsx("div", { className: "vf-editor-chat-message-attachment-row", children: _jsx("a", { className: "vf-editor-chat-message-preview-link", href: attachment.viewUrl, target: "_blank", rel: "noopener noreferrer", children: _jsx(AttachmentChip, { attachment: attachment }) }) }, attachment.id))), _jsx(ImagePreviewRail, { previews: imageAttachments.map((attachment) => ({
+                                    kind: "image",
+                                    url: attachment.viewUrl,
+                                    label: attachment.fileName
+                                })), onOpenModal: setMediaModalPreview }), videoAttachments.map((attachment) => (_jsx(VideoPreviewCard, { preview: {
+                                    kind: "video",
+                                    url: attachment.viewUrl,
+                                    label: attachment.fileName
+                                }, onOpenModal: setMediaModalPreview }, attachment.id)))] })) : null, props.message.statusText ? (_jsxs("div", { className: "vf-editor-chat-message-status", "aria-live": "polite", children: [_jsx("span", { className: "vf-editor-chat-status-dot" }), props.message.statusText] })) : null, props.message.httpExchanges?.length ? (_jsx("div", { className: "vf-editor-chat-http-list", children: props.message.httpExchanges.map((exchange, index) => (_jsx(HttpExchangeCard, { exchange: exchange }, `${exchange.request.method}:${exchange.request.url}:${index}`))) })) : null, hasVisibleText ? (_jsx("div", { className: "vf-editor-chat-message-body", dangerouslySetInnerHTML: { __html: renderedText } })) : props.message.isPending ? (_jsxs("div", { className: "vf-editor-chat-message-loading", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })) : null, inlineMediaPreviews.length ? (_jsxs("div", { className: "vf-editor-chat-message-attachments", children: [_jsx(ImagePreviewRail, { previews: inlineImagePreviews, onOpenModal: setMediaModalPreview }), inlineVideoPreviews.map((preview) => (_jsx(VideoPreviewCard, { preview: preview, onOpenModal: setMediaModalPreview }, preview.url)))] })) : null] }), mediaModalPreview ? (_jsx(MediaPreviewModal, { preview: mediaModalPreview, onClose: () => setMediaModalPreview(null) })) : null] }));
+}
+export function TemplateEditorChat({ boot }) {
+    const storageKeys = useMemo(() => makeStorageKeys(boot.template.templateId), [boot.template.templateId]);
+    const chatStorage = useMemo(() => getChatStorage(), []);
+    const systemMessages = useMemo(() => {
+        const messages = [];
+        if (boot.cachedContext.directorSkill?.trim()) {
+            messages.push(`Director skill context:\n\n${boot.cachedContext.directorSkill.trim()}`);
+        }
+        if (boot.cachedContext.templateSkill?.trim()) {
+            messages.push(`Template skill context:\n\n${boot.cachedContext.templateSkill.trim()}`);
+        }
+        return messages;
+    }, [boot.cachedContext.directorSkill, boot.cachedContext.templateSkill]);
+    const fileInputRef = useRef(null);
+    const viewportRef = useRef(null);
+    const shouldStickToChatBottomRef = useRef(true);
+    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 [threads, setThreads] = useState([]);
+    const [activeThreadId, setActiveThreadId] = 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 [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);
+        url.searchParams.set("template_id", boot.template.templateId);
+        return url.toString();
+    }, [boot.template.templateId, boot.threadsUrl]);
+    const threadDetailUrl = (threadId) => (boot.threadsUrl
+        ? new URL(`${boot.threadsUrl.replace(/\/$/, "")}/${encodeURIComponent(threadId)}`, window.location.origin).toString()
+        : null);
+    useEffect(() => {
+        const hydratedThreads = hydrateThreads(chatStorage?.getItem(storageKeys.threads) ?? null);
+        const savedActiveThread = chatStorage?.getItem(storageKeys.activeThread) ?? null;
+        const currentTracers = window.__vidfarmEditorTracers?.get() ?? readTracersFromLocation();
+        const visibleHydratedThreads = hydratedThreads.filter((thread) => !thread.hiddenFromView);
+        const newestMatchingThread = visibleHydratedThreads.find((thread) => threadMatchesTracers(thread, currentTracers));
+        threadsRef.current = hydratedThreads;
+        setThreads(hydratedThreads);
+        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);
+    }, [chatStorage, storageKeys]);
+    useEffect(() => {
+        if (!boot.vidfarmApiKey || !threadListUrl) {
+            return;
+        }
+        const abortController = new AbortController();
+        void (async () => {
+            try {
+                const response = await fetch(threadListUrl, {
+                    method: "GET",
+                    headers: buildAuthHeaders(boot.vidfarmApiKey),
+                    signal: abortController.signal
+                });
+                if (!response.ok) {
+                    return;
+                }
+                const payload = await response.json().catch(() => null);
+                const remoteThreads = Array.isArray(payload?.threads)
+                    ? payload.threads.map(hydrateThreadRecord).filter((thread) => Boolean(thread))
+                    : [];
+                if (!remoteThreads.length) {
+                    return;
+                }
+                setThreads((current) => mergeThreadSets(current, remoteThreads));
+                setActiveThreadId((current) => {
+                    if (current && remoteThreads.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.vidfarmApiKey, threadListUrl]);
+    useEffect(() => {
+        threadsRef.current = threads;
+    }, [threads]);
+    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]);
+    useEffect(() => {
+        if (!hasHydrated) {
+            return;
+        }
+        try {
+            chatStorage?.setItem(storageKeys.threads, JSON.stringify(serializeThreads(threads)));
+        }
+        catch (error) {
+            console.warn("Unable to persist editor chat threads.", error);
+        }
+    }, [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]);
+    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 || 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]);
+    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 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);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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,
+            title: formatThreadTitle(seedText || ""),
+            createdAt: now,
+            updatedAt: now,
+            tracers: normalizeTracerList(tracers),
+            messages: []
+        };
+        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,
+            title: options?.title || "New chat",
+            createdAt: now,
+            updatedAt: now,
+            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();
+    }
+    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);
+        for (const [jobId, poller] of activeJobPollersRef.current.entries()) {
+            if (poller.threadId === threadId) {
+                stopJobPoller(jobId);
+            }
+        }
+        setThreads(remainingThreads);
+        if (activeThreadId === threadId) {
+            setActiveThreadId(remainingThreads[0]?.id ?? null);
+        }
+        setLastError(null);
+        setOpenThreadMenu(null);
+        void deleteRemoteThreadState(threadId);
+    }
+    function updateThread(threadId, updater) {
+        setThreads((current) => {
+            const next = current.map((thread) => (thread.id === threadId ? updater(thread) : thread));
+            return [...next].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
+        });
+    }
+    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);
+    }
+    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()}`;
+        updateThread(targetThreadId, (thread) => ({
+            ...thread,
+            updatedAt: now,
+            messages: [
+                ...thread.messages,
+                {
+                    id: messageId,
+                    role: "assistant",
+                    text: messageText,
+                    attachments: [],
+                    httpExchanges: input.httpExchange ? [input.httpExchange] : [],
+                    statusText,
+                    isPending: false
+                }
+            ]
+        }));
+        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 [jobId, poller] of activeJobPollersRef.current.entries()) {
+            if (poller.threadId === threadId) {
+                stopJobPoller(jobId);
+            }
+        }
+        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(jobId) {
+        const poller = activeJobPollersRef.current.get(jobId);
+        if (!poller) {
+            return;
+        }
+        if (poller.timeoutId !== null) {
+            window.clearTimeout(poller.timeoutId);
+        }
+        poller.abortController?.abort();
+        activeJobPollersRef.current.delete(jobId);
+    }
+    function scheduleNextJobPoll(jobId, runPoll, delayMs) {
+        const poller = activeJobPollersRef.current.get(jobId);
+        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 jobs 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) {
+        if (activeJobPollersRef.current.has(input.jobId)) {
+            return;
+        }
+        activeJobPollersRef.current.set(input.jobId, {
+            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(input.jobId);
+            if (!poller) {
+                return;
+            }
+            if (poller.inFlight) {
+                return;
+            }
+            const now = Date.now();
+            const pollIntervalMs = getJobPollIntervalMs();
+            if (poller.lastPollAt !== null && now - poller.lastPollAt < pollIntervalMs) {
+                scheduleNextJobPoll(input.jobId, 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(input.jobId);
+                return;
+            }
+            if (document.visibilityState !== "visible" || !navigator.onLine) {
+                scheduleNextJobPoll(input.jobId, runPoll, pollIntervalMs);
+                return;
+            }
+            const globalDelayMs = reserveJobPollSlot(Date.now());
+            if (globalDelayMs > 0) {
+                scheduleNextJobPoll(input.jobId, 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 = `/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"
+                                ? `Job ${payload.job_id} succeeded.`
+                                : payload.status === "failed" || payload.status === "cancelled"
+                                    ? `Job ${payload.job_id} ${payload.status}.${payload.error?.message ? ` ${payload.error.message}` : ""}`
+                                    : `Job ${payload.job_id} is ${payload.status}. Next check in ${formatJobPollInterval(pollIntervalMs)}.`
+                            : `Job ${input.jobId} checked. Next check in ${formatJobPollInterval(pollIntervalMs)}.`;
+                        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(input.jobId);
+                    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(input.jobId);
+                if (!latestPoller) {
+                    return;
+                }
+                latestPoller.inFlight = false;
+                latestPoller.abortController = null;
+                if (latestPoller.attempts < JOB_POLL_MAX_ATTEMPTS
+                    && latestPoller.timeoutId === null
+                    && activeJobPollersRef.current.has(input.jobId)) {
+                    scheduleNextJobPoll(input.jobId, runPoll, getJobPollIntervalMs());
+                }
+            }
+        };
+        const initialPoller = activeJobPollersRef.current.get(input.jobId);
+        if (initialPoller) {
+            initialPoller.runPoll = runPoll;
+        }
+        const poller = activeJobPollersRef.current.get(input.jobId);
+        if (poller) {
+            scheduleNextJobPoll(input.jobId, runPoll, getJobPollIntervalMs());
+            rescheduleActiveJobPollersForLoad();
+        }
+    }
+    async function appendFiles(files) {
+        if (!files.length) {
+            return;
+        }
+        setLastError(null);
+        const uploadedAttachments = [];
+        let lastUploadError = null;
+        for (const file of files) {
+            try {
+                const transportData = await fileToDataUrl(file);
+                const uploaded = await uploadAttachment({
+                    apiKey: boot.vidfarmApiKey,
+                    file
+                });
+                uploadedAttachments.push({
+                    ...uploaded,
+                    transportData
+                });
+            }
+            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 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 = threads.find((thread) => thread.id === threadId)?.messages ?? [];
+        const historyForTransport = [...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 response = await fetch(boot.apiUrl || "/api/v1/editor-chat", {
+                method: "POST",
+                headers: buildAuthHeaders(boot.vidfarmApiKey, "application/json"),
+                signal: abortController.signal,
+                body: JSON.stringify({
+                    messages: toTransportMessages(historyForTransport, systemMessages),
+                    thread_id: threadId,
+                    thread_title: existingMessages.length === 0 ? formatThreadTitle(userMessage.text) : (threads.find((entry) => entry.id === threadId)?.title ?? formatThreadTitle(userMessage.text)),
+                    thread_tracers: requestTracers,
+                    client_context: buildBrowserDateContext(),
+                    user_message: {
+                        id: userMessage.id,
+                        role: userMessage.role,
+                        text: userMessage.text,
+                        attachments: userMessage.attachments.map((attachment) => ({
+                            id: attachment.id,
+                            fileName: attachment.fileName,
+                            contentType: attachment.contentType,
+                            viewUrl: attachment.viewUrl
+                        }))
+                    },
+                    assistant_message: {
+                        id: assistantMessage.id
+                    },
+                    template: {
+                        ...boot.template,
+                        tracers: requestTracers,
+                        defaultRequestTracer,
+                        activeTracer: defaultRequestTracer
+                    },
+                    cached_context: {
+                        ...boot.cachedContext,
+                        ...readCachedScheduleChannels(),
+                        ...readSelectedLibraryPosts()
+                    }
+                })
+            });
+            if (!response.ok) {
+                const payload = await response.json().catch(() => ({}));
+                throw new Error(typeof payload?.error === "string" ? payload.error : `Chat failed with status ${response.status}.`);
+            }
+            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
+                        && toolResultRecordForMirror?.request?.method === "POST"
+                        && toolResultRecordForMirror?.response?.status === 202
+                        && jobStatusPayloadForMirror
+                        && jobStatusPayloadForMirror.status !== "succeeded"
+                        && jobStatusPayloadForMirror.status !== "failed"
+                        && jobStatusPayloadForMirror.status !== "cancelled") {
+                        scheduleJobPolling({
+                            threadId: mirroredJobTarget.threadId,
+                            assistantMessageId: mirroredJobTarget.messageId,
+                            jobId: jobStatusPayloadForMirror.job_id,
+                            tracer: jobStatusPayloadForMirror.tracer,
+                            initialStatus: jobStatusPayloadForMirror.status
+                        });
+                    }
+                    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 (toolResultRecord?.request?.method === "POST"
+                                && toolResultRecord?.response?.status === 202
+                                && jobStatusPayload
+                                && !mirroredJobTarget
+                                && jobStatusPayload.status !== "succeeded"
+                                && jobStatusPayload.status !== "failed"
+                                && jobStatusPayload.status !== "cancelled") {
+                                scheduleJobPolling({
+                                    threadId,
+                                    assistantMessageId: assistantMessage.id,
+                                    jobId: jobStatusPayload.job_id,
+                                    tracer: jobStatusPayload.tracer,
+                                    initialStatus: jobStatusPayload.status
+                                });
+                            }
+                            return {
+                                ...message,
+                                toolExchanges: nextToolExchanges,
+                                httpExchanges: nextHttpExchanges,
+                                text: jobStatusPayload && toolResultRecord?.request?.method === "POST" && toolResultRecord?.response?.status === 202
+                                    ? appendDistinctMessageText(message.text, buildJobQueuedMessage(jobStatusPayload))
+                                    : jobStatusPayload && (jobStatusPayload.status === "succeeded" || jobStatusPayload.status === "failed" || jobStatusPayload.status === "cancelled")
+                                        ? appendDistinctMessageText(message.text, buildJobCompletionMessage(jobStatusPayload))
+                                        : message.text
+                            };
+                        })
+                    }));
+                },
+                onError: (errorMessage) => {
+                    setLastError(errorMessage);
+                    setLoadingStatus(null);
+                    updateThread(threadId, (thread) => ({
+                        ...thread,
+                        messages: thread.messages.filter((message) => message.id !== assistantMessage.id)
+                    }));
+                }
+            });
+            updateThread(threadId, (thread) => ({
+                ...thread,
+                updatedAt: new Date().toISOString(),
+                messages: thread.messages.map((message) => (message.id === assistantMessage.id
+                    ? {
+                        ...message,
+                        statusText: null,
+                        isPending: false
+                    }
+                    : message))
+            }));
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === "AbortError") {
+                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;
+            }
+            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();
+    }
+    function handleComposerKeyDown(event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            void handleSend();
+        }
+    }
+    return (_jsxs("div", { className: "vf-editor-chat-shell", "data-mobile-open": isMobileChatOpen ? "true" : "false", children: [_jsx("button", { type: "button", className: "vf-editor-chat-mobile-fab", "aria-label": "Open chat", "aria-expanded": isMobileChatOpen, onClick: () => setIsMobileChatOpen(true), children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), lastError ? (_jsx("div", { className: "vf-editor-chat-error", role: "status", children: lastError })) : null, _jsxs("div", { className: "vf-editor-chat-thread", children: [_jsxs("div", { className: "vf-editor-chat-header", children: [_jsxs("div", { className: "vf-editor-chat-header-row", children: [_jsxs("div", { children: [_jsx("div", { className: "vf-editor-chat-header-title", children: "Copilot" }), _jsx("div", { className: "vf-editor-chat-header-subtitle", children: boot.template.templateTitle })] }), _jsx("button", { type: "button", className: "vf-editor-chat-new-thread", onClick: createNewThreadFromClick, children: "New chat" }), _jsx("button", { type: "button", className: "vf-editor-chat-minimize", "aria-label": "Minimize chat", onClick: () => setIsMobileChatOpen(false), children: "\u00D7" })] }), _jsx("div", { className: "vf-editor-chat-thread-list", role: "tablist", "aria-label": "Conversation threads", children: visibleThreads.length ? visibleThreads.map((thread) => (_jsxs("div", { role: "tab", "aria-selected": thread.id === activeThreadId, className: "vf-editor-chat-thread-chip", "data-active": thread.id === activeThreadId ? "true" : "false", children: [_jsxs("button", { type: "button", className: "vf-editor-chat-thread-chip-main", onClick: () => {
+                                                setActiveThreadId(thread.id);
+                                                setLastError(null);
+                                                setOpenThreadMenu(null);
+                                            }, children: [_jsx("span", { className: "vf-editor-chat-thread-chip-title", children: thread.title }), thread.tracers.length ? (_jsxs("span", { className: "vf-editor-chat-thread-chip-tracers", children: [thread.tracers.slice(0, 2).join(", "), thread.tracers.length > 2 ? ` +${thread.tracers.length - 2}` : ""] })) : null] }), _jsx("div", { className: "vf-editor-chat-thread-menu-wrap", children: _jsx("button", { type: "button", className: "vf-editor-chat-thread-chip-menu", "aria-label": `Actions for ${thread.title}`, onClick: (event) => {
+                                                    event.stopPropagation();
+                                                    toggleThreadMenu(thread.id, event.currentTarget);
+                                                }, children: "..." }) })] }, thread.id))) : (_jsx("div", { className: "vf-editor-chat-thread-empty", children: "Start a chat to create your first conversation thread." })) }), openThreadMenu && openThreadMenuThread ? createPortal(_jsxs("div", { className: "vf-editor-chat-thread-menu", role: "menu", style: {
+                                    top: openThreadMenu.top,
+                                    left: openThreadMenu.left
+                                }, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: () => copyThreadId(openThreadMenuThread.id), children: "Copy Chat ID" }), _jsx("button", { type: "button", onClick: () => editThreadTracers(openThreadMenuThread.id), children: "Edit tracers" }), _jsx("button", { type: "button", onClick: () => removeThreadFromView(openThreadMenuThread.id), children: "Remove from view" }), _jsx("button", { type: "button", onClick: () => archiveThread(openThreadMenuThread.id), children: "Archive thread" }), _jsx("button", { type: "button", "data-danger": "true", onClick: () => deleteThread(openThreadMenuThread.id), children: "Delete" })] }), document.body) : null] }), _jsx("div", { className: "vf-editor-chat-viewport", ref: viewportRef, children: messages.length ? messages.map((message) => (_jsx(ChatBubble, { message: message }, message.id))) : (_jsxs("div", { className: "vf-editor-chat-empty", children: [_jsx("div", { className: "vf-editor-chat-kicker", children: "Template Copilot" }), _jsx("h2", { children: "Ask it to inspect or call the template REST API." }), _jsx("p", { children: "The sidebar can read skill context, execute template routes, attach POST runs to this thread's tracers, and show each HTTP request and response inline per thread." })] })) }), _jsx("div", { className: "vf-editor-chat-footer", children: _jsxs("div", { className: "vf-editor-chat-composer", "data-drop-target": isDropTarget ? "true" : "false", onDragEnter: (event) => {
+                                event.preventDefault();
+                                setIsDropTarget(true);
+                            }, onDragOver: (event) => {
+                                event.preventDefault();
+                                if (!isDropTarget) {
+                                    setIsDropTarget(true);
+                                }
+                            }, onDragLeave: (event) => {
+                                event.preventDefault();
+                                const nextTarget = event.relatedTarget;
+                                if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+                                    return;
+                                }
+                                setIsDropTarget(false);
+                            }, onDrop: (event) => void handleComposerDrop(event), children: [isDropTarget ? (_jsx("div", { className: "vf-editor-chat-dropzone-hint", children: "Drop files to attach" })) : null, pendingAttachments.length ? (_jsx("div", { className: "vf-editor-chat-composer-attachments-strip", children: pendingAttachments.map((attachment) => (_jsx(ComposerAttachmentItem, { attachment: attachment, onRemove: () => setPendingAttachments((current) => current.filter((entry) => entry.id !== attachment.id)) }, attachment.id))) })) : null, _jsxs("div", { className: "vf-editor-chat-composer-row", children: [_jsx("button", { type: "button", className: "vf-editor-chat-attach-button", "aria-label": "Add attachment", onClick: () => fileInputRef.current?.click(), children: "+" }), _jsx("textarea", { rows: 1, placeholder: "Ask it to call a route, inspect jobs, save config, or continue this thread...", className: "vf-editor-chat-input", value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleComposerKeyDown, onPaste: (event) => void handleComposerPaste(event) }), _jsx("button", { type: "button", className: "vf-editor-chat-send-button", onClick: () => {
+                                                if (isActiveThreadSending) {
+                                                    stopActiveSend();
+                                                    return;
+                                                }
+                                                void handleSend();
+                                            }, disabled: isActiveThreadSending ? false : !canSend, children: isActiveThreadSending ? "Stop" : "Send" })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,video/*,audio/*,application/pdf,text/plain,text/markdown", multiple: true, hidden: true, onChange: (event) => void handlePickFiles(event) })] }) })] })] }));
+}