@mevdragon/vidfarm-devcli 0.18.1 → 0.19.1

package/dist/src/primitive-registry.js

@@ -110,6 +110,58 @@ const removeBackgroundImagePayloadSchema = z.preprocess((raw) => {
     source_image_url: z.string().url(),
     output_format: z.enum(["png", "jpeg", "webp"]).default("webp")
 }));
+// Transparent-capable output only (jpeg has no alpha) for the chroma-key routes.
+const alphaOutputFormatSchema = z.enum(["png", "webp"]).default("png");
+const greenscreenRemoveBackgroundPayloadSchema = z.preprocess((raw) => {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return raw;
+    const p = raw;
+    return {
+        ...p,
+        source_image_url: p.source_image_url ?? p.image_url ?? p.imageUrl ?? p.url,
+        key_color: p.key_color ?? p.keyColor ?? p.background_color ?? p.backgroundColor ?? p.color,
+        tolerance: p.tolerance ?? p.threshold,
+        softness: p.softness ?? p.feather,
+        despill: p.despill ?? p.spill_suppression ?? p.spillSuppression
+    };
+}, z.object({
+    source_image_url: z.string().url(),
+    // The background color to key out. Green by default; pass white/#FFFFFF,
+    // blue, or any hex/rgb/named color to key a different flat background.
+    key_color: z.string().min(1).max(64).default("#00FF00"),
+    // Base similarity radius (0..1). Larger = more aggressive removal.
+    tolerance: z.coerce.number().min(0).max(1).default(0.3),
+    // Feather band beyond `tolerance` for soft anti-aliased edges (0..1).
+    softness: z.coerce.number().min(0).max(1).default(0.1),
+    // Suppress residual key-color fringe on the subject's edges.
+    despill: z.boolean().default(true),
+    output_format: alphaOutputFormatSchema
+}));
+const mediaOverlayPayloadSchema = z.preprocess((raw) => {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return raw;
+    const p = raw;
+    return {
+        ...p,
+        key_color: p.key_color ?? p.keyColor ?? p.background_color ?? p.backgroundColor,
+        tolerance: p.tolerance ?? p.threshold,
+        softness: p.softness ?? p.feather,
+        despill: p.despill ?? p.spill_suppression ?? p.spillSuppression,
+        prompt_attachments: p.prompt_attachments ?? p.promptAttachments ?? p.reference_attachments
+    };
+}, z.object({
+    provider: imageProviderSchema.optional(),
+    model: z.string().min(1).optional(),
+    prompt: z.string().min(3).max(8000),
+    prompt_attachments: z.array(z.string().url()).max(16).default([]),
+    aspect_ratio: aspectRatioSchema,
+    image_size: imageSizeSchema,
+    key_color: z.string().min(1).max(64).default("#00FF00"),
+    tolerance: z.coerce.number().min(0).max(1).default(0.3),
+    softness: z.coerce.number().min(0).max(1).default(0.1),
+    despill: z.boolean().default(true),
+    output_format: alphaOutputFormatSchema
+}));
 const renderHtmlImagePayloadSchema = z.object({
     width: z.number().int().min(16).max(4096).default(1080),
     height: z.number().int().min(16).max(4096).default(1920),
@@ -634,6 +686,8 @@ const PRIMITIVE_IMAGE_EDIT_ID = "primitive:image_edit";
 const PRIMITIVE_IMAGE_INPAINT_ID = "primitive:image_inpaint";
 const PRIMITIVE_IMAGE_RENDER_HTML_ID = "primitive:image_render_html";
 const PRIMITIVE_IMAGE_REMOVE_BACKGROUND_ID = "primitive:image_remove_background";
+const PRIMITIVE_IMAGE_REMOVE_BACKGROUND_GREENSCREEN_ID = "primitive:image_remove_background_greenscreen";
+const PRIMITIVE_MEDIA_OVERLAY_ID = "primitive:media_overlay";
 const PRIMITIVE_VIDEO_GENERATE_ID = "primitive:video_generate";
 const PRIMITIVE_VIDEO_RENDER_SLIDES_ID = "primitive:video_render_slides";
 const PRIMITIVE_VIDEO_NORMALIZE_ID = "primitive:video_normalize";
@@ -963,6 +1017,172 @@ const imageRemoveBackgroundPrimitive = definePrimitive({
         }
     }
 });
+const imageRemoveBackgroundGreenscreenPrimitive = definePrimitive({
+    id: PRIMITIVE_IMAGE_REMOVE_BACKGROUND_GREENSCREEN_ID,
+    kind: "image_remove_background_greenscreen",
+    operations: {
+        run: {
+            description: "Cheap local chroma-key background removal. Drops a flat, solid key-color background (green screen by default; pass key_color for white/blue/any flat fill) to a transparent PNG/WebP cut-out using sharp — no third-party API, compute only. Ideal for images you generated on a controlled solid background; for arbitrary photos with a messy background use image_remove_background (RapidAPI matting) instead.",
+            inputSchema: greenscreenRemoveBackgroundPayloadSchema,
+            workflow: "run"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = greenscreenRemoveBackgroundPayloadSchema.parse(input);
+            const sourceUrl = payload.source_image_url;
+            ctx.logger.progress(0.2, "Downloading source image for chroma key", { sourceUrl });
+            const source = await fetchRemoteBinary(sourceUrl, "image/png");
+            ctx.logger.progress(0.5, "Keying out background", { keyColor: payload.key_color });
+            const keyed = await chromaKeyRemoveBackground(source.bytes, {
+                keyColor: payload.key_color,
+                tolerance: payload.tolerance,
+                softness: payload.softness,
+                despill: payload.despill,
+                outputFormat: payload.output_format
+            });
+            const stored = await storePrimitiveImage(ctx, {
+                key: `output.${keyed.contentType === "image/webp" ? "webp" : "png"}`,
+                bytes: keyed.bytes,
+                contentType: keyed.contentType,
+                metadata: {
+                    primitive: "image_remove_background_greenscreen",
+                    source_image_url: sourceUrl,
+                    key_color: payload.key_color,
+                    tolerance: payload.tolerance,
+                    softness: payload.softness,
+                    despill: payload.despill,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            });
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.GREENSCREEN_CHROMA_KEY_COST_USD,
+                costCenterSlug: "greenscreen_chroma_key",
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "remove-background-greenscreen",
+                    source_image_url: sourceUrl,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    output_key: stored.key
+                }
+            });
+            ctx.logger.progress(1, "Chroma-key background removal complete");
+            return {
+                progress: 1,
+                output: {
+                    ...buildImagePrimitiveOutput({
+                        fileUrl: stored.url,
+                        contentType: keyed.contentType,
+                        derivedFromUrl: sourceUrl,
+                        files: compactUrls([stored.url])
+                    }),
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            };
+        }
+    }
+});
+const mediaOverlayPrimitive = definePrimitive({
+    id: PRIMITIVE_MEDIA_OVERLAY_ID,
+    kind: "media_overlay",
+    operations: {
+        run: {
+            description: "Create a transparent-background media overlay in ONE job: generate an AI image of the subject on a forced flat key-color background (using the caller's own BYOK image keys), then chroma-key that background out to a ready-to-composite transparent PNG/WebP. This is the go-to way to mint 'Vox-style' floating illustrations, props, icons, or cut-out characters to animate over a composition — prefer it over generate-then-manually-remove.",
+            inputSchema: mediaOverlayPayloadSchema,
+            workflow: "run",
+            providerHint: "openai"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = mediaOverlayPayloadSchema.parse(input);
+            const provider = payload.provider ?? "openai";
+            const model = payload.model ?? defaultImageModelForProvider(provider);
+            const keyRgb = parseKeyColor(payload.key_color);
+            const keyLabel = describeKeyColor(payload.key_color, keyRgb);
+            const augmentedPrompt = buildOverlayGenerationPrompt(payload.prompt, payload.key_color, keyLabel);
+            ctx.logger.progress(0.12, "Generating overlay subject on flat key-color background", { provider, model, keyColor: payload.key_color });
+            const generated = await ctx.providers.generateImage({
+                provider,
+                model,
+                prompt: augmentedPrompt,
+                promptAttachments: payload.prompt_attachments,
+                aspectRatio: payload.aspect_ratio,
+                imageSize: payload.image_size
+            });
+            // Keep the raw key-color frame as an artifact for debugging / re-keying at
+            // different tolerances without paying for a second generation.
+            const normalizedSource = await normalizePrimitiveImageOutput(generated.bytes, "png");
+            const sourceStored = await storePrimitiveImage(ctx, {
+                key: "source-greenscreen.png",
+                bytes: normalizedSource.bytes,
+                contentType: normalizedSource.contentType,
+                metadata: {
+                    primitive: "media_overlay",
+                    stage: "greenscreen_source",
+                    prompt: payload.prompt,
+                    key_color: payload.key_color,
+                    revised_prompt: generated.revisedPrompt
+                }
+            });
+            ctx.logger.progress(0.62, "Keying out background", { keyColor: payload.key_color });
+            const keyed = await chromaKeyRemoveBackground(generated.bytes, {
+                keyColor: payload.key_color,
+                tolerance: payload.tolerance,
+                softness: payload.softness,
+                despill: payload.despill,
+                outputFormat: payload.output_format
+            });
+            const stored = await storePrimitiveImage(ctx, {
+                key: `output.${keyed.contentType === "image/webp" ? "webp" : "png"}`,
+                bytes: keyed.bytes,
+                contentType: keyed.contentType,
+                metadata: {
+                    primitive: "media_overlay",
+                    stage: "transparent_overlay",
+                    prompt: payload.prompt,
+                    provider,
+                    model,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    revised_prompt: generated.revisedPrompt
+                }
+            });
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.MEDIA_OVERLAY_COST_USD,
+                costCenterSlug: "media_overlay",
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "create-media-overlay",
+                    prompt: payload.prompt,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    output_key: stored.key,
+                    greenscreen_source_key: sourceStored.key
+                }
+            });
+            ctx.logger.progress(1, "Media overlay ready");
+            return {
+                progress: 1,
+                output: {
+                    ...buildImagePrimitiveOutput({
+                        fileUrl: stored.url,
+                        contentType: keyed.contentType,
+                        revisedPrompt: generated.revisedPrompt,
+                        files: compactUrls([stored.url, sourceStored.url])
+                    }),
+                    greenscreen_source_url: sourceStored.url,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            };
+        }
+    }
+});
 const videoGeneratePrimitive = definePrimitive({
     id: PRIMITIVE_VIDEO_GENERATE_ID,
     kind: "video_generate",
@@ -1285,13 +1505,58 @@ const videoDownloadPrimitive = definePrimitive({
                     upstream_source: lookup.source ?? null
                 }
             });
+            // Re-host a DURABLE poster so the frontend never depends on the ephemeral
+            // third-party `lookup.thumbnail` URL. Prefer extracting a frame from the
+            // MP4 we just stored (works even when the provider gives no thumbnail);
+            // fall back to re-hosting the provider thumbnail bytes. Best-effort.
+            let durableThumbnailUrl = null;
+            ctx.logger.progress(0.7, "Extracting thumbnail frame");
+            try {
+                const frame = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_extract_frame",
+                    payload: { source_video_url: storedVideo.url, at_ms: 1000, output_format: "jpeg" },
+                    outputKey: "thumbnail.jpg"
+                });
+                durableThumbnailUrl = frame.publicUrl;
+            }
+            catch (error) {
+                ctx.logger.progress(0.75, "Thumbnail frame extraction skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            if (!durableThumbnailUrl && lookup.thumbnail) {
+                try {
+                    const remoteThumb = await fetchRemoteBinary(lookup.thumbnail, "image/jpeg");
+                    const thumbContentType = remoteThumb.contentType.startsWith("image/") ? remoteThumb.contentType : "image/jpeg";
+                    const storedThumb = await storePrimitiveImage(ctx, {
+                        key: "thumbnail.jpg",
+                        bytes: remoteThumb.bytes,
+                        contentType: thumbContentType,
+                        metadata: {
+                            primitive: "video_download",
+                            operation: "download-video",
+                            source_url: sourceUrl,
+                            rehosted_from: lookup.thumbnail
+                        }
+                    });
+                    durableThumbnailUrl = storedThumb.url;
+                }
+                catch (error) {
+                    ctx.logger.progress(0.78, "Thumbnail re-host skipped", {
+                        error: error instanceof Error ? error.message : String(error)
+                    });
+                }
+            }
             const manifest = {
                 primitive: "video_download",
                 operation: "download-video",
                 sourceUrl,
                 sourceHost,
                 title: lookup.title ?? null,
-                thumbnail: lookup.thumbnail ?? null,
+                // Raw ephemeral third-party thumbnail (kept for provenance) plus the
+                // durable re-hosted poster the finalizer/frontend should actually use.
+                thumbnail: durableThumbnailUrl ?? lookup.thumbnail ?? null,
+                rawThumbnail: lookup.thumbnail ?? null,
                 duration: lookup.duration ?? null,
                 source: lookup.source ?? null,
                 selectedMedia: {
@@ -1336,19 +1601,22 @@ const videoDownloadPrimitive = definePrimitive({
             });
             ctx.logger.progress(1, "Video download complete", {
                 videoUrl: storedVideo.url,
-                sourceHost
+                sourceHost,
+                thumbnailUrl: durableThumbnailUrl
             });
             return {
                 progress: 1,
                 output: {
-                    files: compactUrls([storedVideo.url, manifestArtifact?.url]),
+                    files: compactUrls([storedVideo.url, durableThumbnailUrl, manifestArtifact?.url]),
                     sourceUrl,
                     sourceHost,
                     videoUrl: storedVideo.url,
                     sourceVideoUrl: storedVideo.url,
                     primary_file_url: storedVideo.url,
                     title: lookup.title ?? null,
-                    thumbnail: lookup.thumbnail ?? null,
+                    // Durable re-hosted poster (falls back to the raw provider thumbnail).
+                    thumbnailUrl: durableThumbnailUrl ?? lookup.thumbnail ?? null,
+                    thumbnail: durableThumbnailUrl ?? lookup.thumbnail ?? null,
                     duration: lookup.duration ?? null,
                     selectedMediaUrl: selectedMedia.url,
                     manifest: manifestArtifact
@@ -2824,6 +3092,8 @@ class PrimitiveRegistry {
         [imageInpaintPrimitive.id, imageInpaintPrimitive],
         [imageRenderHtmlPrimitive.id, imageRenderHtmlPrimitive],
         [imageRemoveBackgroundPrimitive.id, imageRemoveBackgroundPrimitive],
+        [imageRemoveBackgroundGreenscreenPrimitive.id, imageRemoveBackgroundGreenscreenPrimitive],
+        [mediaOverlayPrimitive.id, mediaOverlayPrimitive],
         [videoGeneratePrimitive.id, videoGeneratePrimitive],
         [videoRenderSlidesPrimitive.id, videoRenderSlidesPrimitive],
         [mediaDedupePrimitive.id, mediaDedupePrimitive],
@@ -3017,6 +3287,141 @@ async function normalizePrimitiveImageOutput(bytes, format) {
         contentType: "image/png"
     };
 }
+function clampByte(value) {
+    const n = Math.round(Number.isFinite(value) ? value : 0);
+    return Math.max(0, Math.min(255, n));
+}
+const NAMED_KEY_COLORS = {
+    green: [0, 255, 0],
+    lime: [0, 255, 0],
+    "chroma-green": [0, 177, 64],
+    "chromakey-green": [0, 177, 64],
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    blue: [0, 0, 255],
+    "chroma-blue": [0, 71, 187],
+    "chromakey-blue": [0, 71, 187],
+    red: [255, 0, 0],
+    magenta: [255, 0, 255],
+    cyan: [0, 255, 255],
+    gray: [128, 128, 128],
+    grey: [128, 128, 128]
+};
+// Parse a key color from hex (#rgb / #rrggbb), rgb()/rgba() triples, or a small
+// set of named colors. Throws on anything unrecognized so a typo surfaces
+// instead of silently keying out the wrong color.
+function parseKeyColor(value) {
+    const raw = value.trim().toLowerCase();
+    const named = NAMED_KEY_COLORS[raw];
+    if (named) {
+        return { r: named[0], g: named[1], b: named[2] };
+    }
+    const rgbMatch = raw.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgbMatch) {
+        return { r: clampByte(Number(rgbMatch[1])), g: clampByte(Number(rgbMatch[2])), b: clampByte(Number(rgbMatch[3])) };
+    }
+    let hex = raw.startsWith("#") ? raw.slice(1) : raw;
+    if (/^[0-9a-f]{3}$/.test(hex)) {
+        hex = hex.split("").map((ch) => ch + ch).join("");
+    }
+    if (/^[0-9a-f]{6}$/.test(hex)) {
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16)
+        };
+    }
+    throw new Error(`Unrecognized key_color "${value}". Use a hex value (e.g. #00FF00), an rgb(...) triple, or a named color (green/white/blue/black).`);
+}
+// A plain-English label for the key color so the image-generation prompt can
+// tell the model exactly which flat background to paint.
+function describeKeyColor(raw, rgb) {
+    const named = raw.trim().toLowerCase();
+    if (/green|lime/.test(named))
+        return "chroma green";
+    if (/blue/.test(named))
+        return "chroma blue";
+    if (named === "white" || (rgb.r > 240 && rgb.g > 240 && rgb.b > 240))
+        return "solid white";
+    if (named === "black" || (rgb.r < 15 && rgb.g < 15 && rgb.b < 15))
+        return "solid black";
+    if (rgb.g > rgb.r && rgb.g > rgb.b)
+        return "chroma green";
+    if (rgb.b > rgb.r && rgb.b > rgb.g)
+        return "chroma blue";
+    return "flat solid";
+}
+function buildOverlayGenerationPrompt(subject, keyHex, keyLabel) {
+    return [
+        subject.trim(),
+        "",
+        `BACKGROUND REQUIREMENT (critical for clean keying): render ONLY the subject, fully in frame, on a completely flat, uniform, evenly-lit ${keyLabel} background (target color ${keyHex}). The background must be one single solid ${keyLabel} fill — absolutely NO gradient, NO vignette, NO cast shadows or reflections on the background, and NO ${keyLabel} tones anywhere on the subject itself (avoid ${keyLabel} clothing, props, or rim light). Do not add any border, frame, text, or watermark. Give the subject clean, crisp edges against the ${keyLabel} so it can be cut out to a transparent PNG.`
+    ].join("\n");
+}
+// Local chroma-key background removal. Distance-thresholds every pixel against
+// the key color: within `tolerance` becomes fully transparent, a `softness`
+// feather band anti-aliases the edge, and (for chromatic keys) a classic
+// despill clamps the key's dominant channel so no colored fringe survives.
+async function chromaKeyRemoveBackground(source, options) {
+    const key = parseKeyColor(options.keyColor);
+    const buffer = Buffer.isBuffer(source) ? source : Buffer.from(source);
+    const { data, info } = await sharp(buffer).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+    const channels = info.channels;
+    const maxDist = Math.sqrt(3) * 255;
+    const inner = Math.max(0, options.tolerance) * maxDist;
+    const outer = Math.max(inner + 1e-6, (options.tolerance + Math.max(0, options.softness)) * maxDist);
+    const keyChannels = [key.r, key.g, key.b];
+    const keyChroma = Math.max(...keyChannels) - Math.min(...keyChannels);
+    // Only despill chromatic keys (green/blue/etc.); white/gray/black have no hue
+    // fringe to suppress and clamping them would tint the subject.
+    const doDespill = options.despill && keyChroma >= 40;
+    const dominant = keyChannels.indexOf(Math.max(...keyChannels));
+    let keyedPixels = 0;
+    const totalPixels = info.width * info.height;
+    for (let i = 0; i < data.length; i += channels) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const baseAlpha = channels === 4 ? data[i + 3] : 255;
+        const dr = r - key.r;
+        const dg = g - key.g;
+        const db = b - key.b;
+        const dist = Math.sqrt(dr * dr + dg * dg + db * db);
+        let alpha;
+        if (dist <= inner) {
+            alpha = 0;
+            keyedPixels++;
+        }
+        else if (dist >= outer) {
+            alpha = baseAlpha;
+        }
+        else {
+            const t = (dist - inner) / (outer - inner);
+            alpha = Math.round(baseAlpha * t);
+        }
+        if (doDespill && alpha > 0) {
+            if (dominant === 1)
+                data[i + 1] = Math.min(g, Math.max(r, b));
+            else if (dominant === 0)
+                data[i] = Math.min(r, Math.max(g, b));
+            else
+                data[i + 2] = Math.min(b, Math.max(r, g));
+        }
+        if (channels === 4)
+            data[i + 3] = alpha;
+    }
+    const encoded = sharp(data, { raw: { width: info.width, height: info.height, channels } });
+    const bytes = options.outputFormat === "webp"
+        ? await encoded.webp({ quality: 92, alphaQuality: 100 }).toBuffer()
+        : await encoded.png().toBuffer();
+    return {
+        bytes,
+        contentType: options.outputFormat === "webp" ? "image/webp" : "image/png",
+        width: info.width,
+        height: info.height,
+        keyedFraction: totalPixels > 0 ? keyedPixels / totalPixels : 0
+    };
+}
 async function recordPrimitiveProviderBilling(ctx, generated, kind) {
     if (!Number.isFinite(generated.usageCostUsd) || generated.usageCostUsd <= 0) {
         return;

package/dist/src/reskin/chat-page.js

@@ -58,7 +58,9 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
           <label class="rk-chat-mode" aria-label="Studio mode">
             <select class="rk-chat-mode-select" id="rk-chat-mode">
               <option value="/chat" selected>Chat</option>
-              <option value="/inpaint">Create Image</option>
+              <option value="/tools/image">Create Image</option>
+              <option value="/tools/clipper">Clip a Video</option>
+              <option value="/editor/original/fork/new">Create Video</option>
             </select>
             <span class="rk-chat-mode-chev" aria-hidden="true">&#9662;</span>
           </label>
@@ -139,15 +141,18 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
 .rk-chat-head-actions{display:flex;align-items:center;gap:9px;flex:none}
 .rk-chat-plus{font-size:14px;font-weight:700;line-height:1;margin-right:1px}
 
-/* studio mode select (Brainstorm ↔ Create Image → /reskin/inpaint) */
+/* studio mode select (Chat ↔ Create Image → /tools/image ↔ Create Video → /editor).
+   A prominent gold pill so it reads clearly as the "what do you want to make?"
+   switcher, not a faint afterthought. */
 .rk-chat-mode{position:relative;display:inline-flex;align-items:center}
-.rk-chat-mode-select{appearance:none;-webkit-appearance:none;font-family:var(--rk-font-body);font-size:13px;font-weight:700;
-  color:var(--rk-ink);background:var(--rk-surface);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-full);
-  padding:9px 32px 9px 15px;cursor:pointer;box-shadow:var(--rk-shadow-xs);
-  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
-.rk-chat-mode-select:hover{border-color:var(--rk-gold-600)}
-.rk-chat-mode-select:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
-.rk-chat-mode-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:11px;color:var(--rk-n-500)}
+.rk-chat-mode-select{appearance:none;-webkit-appearance:none;font-family:var(--rk-font-body);font-size:13.5px;font-weight:800;
+  letter-spacing:-.01em;color:var(--rk-ink);background:var(--rk-gold-tint);border:1.5px solid var(--rk-gold-600);
+  border-radius:var(--rk-r-full);padding:10px 38px 10px 17px;cursor:pointer;box-shadow:var(--rk-shadow-sm);
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-chat-mode-select:hover{background:var(--rk-gold-tint2);border-color:var(--rk-gold-700);box-shadow:var(--rk-shadow-md,var(--rk-shadow-sm))}
+.rk-chat-mode-select:focus{outline:none;border-color:var(--rk-gold-700);box-shadow:var(--rk-ring-gold)}
+.rk-chat-mode-chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:12px;
+  font-weight:900;color:var(--rk-gold-700)}
 
 /* thread — flex:1 pushes the dock to the bottom when the page is short */
 .rk-chat-thread{flex:1;display:grid;gap:28px;align-content:start;padding:30px 0 26px}
@@ -255,6 +260,8 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
 .rk-chat-attach-chip .rk-chat-attach-preview{font-family:inherit;font-size:12.5px;font-weight:600;padding:0;max-width:200px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent}
 .rk-chat-attach-chip .rk-chat-attach-preview:hover{text-decoration-color:currentColor}
+.rk-chat-attach-chip.is-pending{opacity:.75}
+.rk-chat-attach-chip.is-pending .rk-chat-attach-preview{text-decoration:none;cursor:default}
 .rk-chat-input{width:100%;min-width:0;min-height:76px;border:0;background:transparent;resize:none;font-family:var(--rk-font-body);
   font-size:15px;line-height:1.5;color:var(--rk-ink);padding:4px 4px 0;max-height:210px}
 .rk-chat-input:focus{outline:none;box-shadow:none}
@@ -314,10 +321,11 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
     if(!chipsEl) return;
     chipsEl.innerHTML='';
     attachments.forEach(function(f, i){
-      var chip=el('rk-chat-attach-chip');
+      var chip=el('rk-chat-attach-chip'+(f.pending?' is-pending':''));
+      if(f.pending){ var sp=root.createElement('span'); sp.className='rk-aichat-chip-spin'; sp.setAttribute('aria-hidden','true'); chip.appendChild(sp); }
       var label=root.createElement('button'); label.type='button'; label.className='rk-chat-attach-preview';
-      label.title='Preview '+f.name; label.textContent=f.name;
-      if(f.viewUrl){ label.addEventListener('click',function(){ openFilePreview(attachments, i); }); }
+      label.title=f.pending?('Uploading '+f.name+'\\u2026'):('Preview '+f.name); label.textContent=f.name;
+      if(f.viewUrl && !f.pending){ label.addEventListener('click',function(){ var vs=attachments.filter(function(a){return !a.pending;}); openFilePreview(vs, vs.indexOf(f)); }); }
       chip.appendChild(label);
       var x=root.createElement('button'); x.type='button'; x.setAttribute('aria-label','Remove '+f.name); x.textContent='\\u00d7';
       x.addEventListener('click',function(){ attachments=attachments.filter(function(a){ return a.id!==f.id; }); renderAttachChips(); });
@@ -335,6 +343,46 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
     if(input) input.focus();
   });
 
+  // ─── paste-to-attach: a copied image/file dropped into the composer gets
+  // auto-uploaded to the user's /temp folder, then attached like a picked file.
+  function pasteExtName(blob, idx){
+    var ct=(blob && blob.type)||'';
+    var base=ct.indexOf('image/')===0?'pasted-image':ct.indexOf('video/')===0?'pasted-video':ct.indexOf('audio/')===0?'pasted-audio':'pasted-file';
+    var ext=ct && ct.indexOf('/')>-1?ct.split('/')[1].split('+')[0].split(';')[0]:'bin';
+    if(ext==='jpeg') ext='jpg';
+    return base+'-'+Date.now().toString(36)+(idx?'-'+idx:'')+'.'+ext;
+  }
+  function uploadPasted(blob, fileName, pendingId){
+    var fd=new FormData(); fd.append('file', blob, fileName);
+    var h={}; if(API_KEY) h['vidfarm-api-key']=API_KEY;
+    fetch(window.location.origin+'/api/v1/user/me/temporary-files/upload', { method:'POST', credentials:'same-origin', headers:h, body:fd })
+      .then(function(r){ return r.json().catch(function(){ return {}; }).then(function(j){ if(!r.ok) throw new Error((j&&j.error)||('upload failed ('+r.status+')')); return j; }); })
+      .then(function(j){
+        var f=j&&j.file; if(!f||!f.viewUrl) throw new Error('upload returned no file');
+        var idx=attachments.map(function(a){ return a.id; }).indexOf(pendingId);
+        var item={ id:String(f.id), name:f.fileName||fileName, contentType:f.contentType||(blob&&blob.type)||'application/octet-stream', viewUrl:f.viewUrl };
+        if(idx>-1) attachments[idx]=item; else attachments.push(item);
+        renderAttachChips();
+      })
+      .catch(function(){ attachments=attachments.filter(function(a){ return a.id!==pendingId; }); renderAttachChips(); });
+  }
+  if(input) input.addEventListener('paste', function(e){
+    var dt=e.clipboardData; if(!dt) return;
+    var blobs=[], items=dt.items;
+    if(items && items.length){ for(var i=0;i<items.length;i++){ if(items[i] && items[i].kind==='file'){ var b=items[i].getAsFile(); if(b) blobs.push(b); } } }
+    if(!blobs.length && dt.files && dt.files.length){ for(var k=0;k<dt.files.length;k++) blobs.push(dt.files[k]); }
+    if(!blobs.length) return; // plain-text paste → leave it to the textarea
+    e.preventDefault();
+    blobs.forEach(function(blob, idx){
+      var name=(blob && blob.name)||pasteExtName(blob, idx);
+      var pendingId='paste-'+Date.now().toString(36)+'-'+idx+'-'+Math.random().toString(36).slice(2,6);
+      attachments.push({ id:pendingId, name:name, contentType:(blob&&blob.type)||'application/octet-stream', pending:true });
+      renderAttachChips();
+      uploadPasted(blob, name, pendingId);
+    });
+    if(input) input.focus();
+  });
+
   // Each conversation has its own URL (/chat/<id>); a fresh page is /chat.
   var pageEl=root.querySelector('.rk-chat-page');
   var INITIAL_THREAD=(pageEl && pageEl.getAttribute('data-initial-thread')) || null;
@@ -552,11 +600,22 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
     else if(chunk.type==='error'){ h.onError((typeof chunk.errorText==='string')?chunk.errorText:((chunk.error && chunk.error.message)||'Unable to read assistant response.')); }
   }
 
+  // Attachment URL line the model can quote back as REST payload URLs, alongside
+  // the binary file content parts. Mirrors the /editor React dock. Double-
+  // backslash-n = a browser-side newline (this function lives in a template literal).
+  function buildAttachmentUrlText(atts){
+    if(!atts || !atts.length) return '';
+    var lines=atts.map(function(a){ return '- '+(a.fileName||'file')+' ('+(a.contentType||'')+'): '+a.viewUrl; });
+    return '\\n\\nAttached file URLs for REST payloads:\\n'+lines.join('\\n')+'\\nUse these exact URLs as prompt_attachments for image generation, source_image_url for image edits, media_url for video slides, or reference attachment URLs when calling template routes.';
+  }
+
   function sendMessage(text){
     if(busy) return;
     text=(text||'').trim();
     // Attachments picked from the drawer travel in user_message.attachments;
     // sending is allowed with only files (no text) too.
+    // A pasted file may still be uploading to /temp — wait rather than drop it.
+    if(attachments.some(function(f){ return f && f.pending; })){ renderAttachChips(); return; }
     var atts=attachments.map(function(f){ return { id:String(f.id), fileName:f.name, contentType:f.contentType, viewUrl:f.viewUrl }; });
     if(!text && !atts.length) return;
 
@@ -578,8 +637,19 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
     var userMsgId=genId('user');
     var asstMsgId=genId('assistant');
 
+    // Attachments must ride in messages[].content as file parts + a URL text
+    // line — the backend feeds the model messages[].content, not the persistence-
+    // only user_message.attachments. Append to the latest user turn (= last entry).
+    var attUrlText = atts.length ? buildAttachmentUrlText(atts) : '';
     var body={
-      messages: history.map(function(m){ return { role:m.role, content:[{ type:'text', text:m.text }] }; }),
+      messages: history.map(function(m, i){
+        var isLastUser = (i === history.length - 1) && m.role === 'user';
+        var t = m.text;
+        if(isLastUser && attUrlText) t = t + attUrlText;
+        var content = [{ type:'text', text:t }];
+        if(isLastUser && atts.length){ atts.forEach(function(a){ content.push({ type:'file', data:a.viewUrl, mediaType:a.contentType||'application/octet-stream' }); }); }
+        return { role:m.role, content:content };
+      }),
       thread_id: threadId,
       thread_template_id: (TEMPLATE && TEMPLATE.templateId) || 'chat-brainstorm',
       thread_title: (text||line).slice(0,42),
@@ -832,12 +902,30 @@ export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
     newBtn.addEventListener('click',function(){ if(busy) return; resetChat(); });
   }
 
-  // studio mode: choosing "Create Image" navigates to the inpaint workbench
+  // Navigate to another surface (Create Image → /tools/image, Create Video → a new
+  // /editor project, or any AI-driven page nav) while HANDING OFF the live
+  // conversation: append ?rk_chat=<threadId> so the destination's AI pop-panel
+  // (document.ts) auto-opens and reloads this exact thread — a seamless jump that
+  // never loses the chat context. Uses a global URL param so any page's dock can
+  // honor it. No active thread → just navigate.
+  function navigateWithChat(dest){
+    if(!dest) return;
+    try{
+      if(threadId){
+        var u=new URL(dest, window.location.origin);
+        u.searchParams.set('rk_chat', threadId);
+        dest=u.pathname + u.search + u.hash;
+      }
+    }catch(e){}
+    window.location.href=dest;
+  }
+  // studio mode: choosing "Create Image" / "Create Video" navigates to that
+  // workbench, carrying the current chat thread along for the ride.
   var modeSel=root.getElementById('rk-chat-mode');
   if(modeSel){
     modeSel.addEventListener('change',function(){
       var dest=modeSel.value;
-      if(dest && dest!=='/chat'){ window.location.href=dest; }
+      if(dest && dest!=='/chat'){ navigateWithChat(dest); }
     });
   }
 })();`;