@mevdragon/vidfarm-devcli 0.18.1 → 0.19.0

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

@@ -1,543 +1,2550 @@
-// /reskin/inpaint — "Create Image" masked image editor, ported into the
-// farmville design system. A clean 3-column workbench (upload + prompt | canvas
-// brush mask | result + history) wired to the SAME real endpoints the live
-// /inpaint tool uses:
-//   • temp-file upload  → POST /api/v1/user/me/temporary-files/presign
-//                         → (server|direct) upload → POST /api/v1/user/me/temporary-files
-//   • provider keys     → GET  /api/v1/user/me/provider-keys
-//   • create job        → POST /api/v1/primitives/images/inpaint
-//                         body { tracer, payload:{ source_image_url, mask_url,
-//                         instruction, reference_attachments, provider?, size,
-//                         aspect_ratio?, output_format } }
-//   • poll job          → GET  /api/v1/primitives/image_inpaint/jobs/:jobId
+// /tools/image — "Create Image" masked image editor, ported into the
+// farmville design system. It restores the FULL legacy inpaint workbench
+// (multi-color masks, a per-mask-color prompt for every color, a separate
+// whole-image prompt, the intelligent front-end merge that composes them into
+// one provider instruction, reference attachments, and a real tracer-grouped
+// History strip) AND keeps the newer text-to-image "Create Image" empty-state
+// composer + useAsSource refinement flow.
 //
-// The masking + upload + poll logic is the proven live logic (single-mask
-// variant): the mask PNG is white with alpha holes where the user brushed
-// (destination-out), and the API treats transparent pixels as the only editable
-// region. Everything is same-origin with the session cookie. Loading / auth /
-// error states degrade gracefully; the design stays rk-* farmville.
+// The proven legacy control/mask/merge/history logic (from renderCustomInpaintPage
+// in src/template-editor-pages.ts) is embedded verbatim below and only reskinned;
+// the text-to-image composer is layered on top inside the same IIFE so it can
+// reuse the legacy helpers (setStatus, loadSourceUrl, uploadTemporaryBlob, …).
+//
+// Endpoints (all same-origin, session cookie):
+//   • temp upload  → POST /api/v1/user/me/temporary-files/presign
+//                    → (server|direct) upload → POST /api/v1/user/me/temporary-files
+//   • providers    → GET  /api/v1/user/me/provider-keys
+//   • inpaint job  → POST /api/v1/primitives/images/inpaint
+//                    body { tracer, payload:{ source_image_url, mask_url,
+//                    instruction, reference_attachments, provider?, size,
+//                    aspect_ratio?, output_format } }
+//   • poll inpaint → GET  /api/v1/primitives/image_inpaint/jobs/:jobId
+//   • text→image   → POST /api/v1/primitives/images/generate → poll image_generate
+//   • history      → GET  /job-runs/history?template_id=primitive:image_inpaint&tracer=…
+//
+// The single provider mask is white with alpha holes where the user painted
+// (destination-out); the colors are UI labels only, surfaced textually per
+// region inside the merged instruction. Each completed output is also mirrored
+// into /temp/inpaints/<tracer>/ so a session's outputs are browsable as files.
 import { reskinDocument } from "./document.js";
 // Functional SVG glyphs (no decorative emoji).
 const UPLOAD_ICON = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`;
-const UNDO_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/></svg>`;
-const CLEAR_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg>`;
+const UNDO_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.2 7H3.8V3.6"/><path d="M4 7a7 7 0 1 1 1.9 6.6"/></svg>`;
+const REDO_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.8 7h3.4V3.6"/><path d="M16 7a7 7 0 1 0-1.9 6.6"/></svg>`;
+const CLEAR_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"/></svg>`;
+const GEAR_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8.8 3.4 9.4 2h1.2l.6 1.4 1.2.5 1.4-.6.9.9-.6 1.4.5 1.2 1.4.6v1.2l-1.4.6-.5 1.2.6 1.4-.9.9-1.4-.6-1.2.5-.6 1.4H9.4l-.6-1.4-1.2-.5-1.4.6-.9-.9.6-1.4-.5-1.2L4 8.6V7.4l1.4-.6.5-1.2-.6-1.4.9-.9 1.4.6 1.2-.5Z"/><circle cx="10" cy="8" r="2.4"/></svg>`;
+const REFRESH_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-1.9-4.6"/><path d="M16.5 4.2v4.2h-4.2"/></svg>`;
 const SPARK_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.9 5.1 5.1 1.9-5.1 1.9L12 16.5l-1.9-5.1L5 9.5l5.1-1.9z"/></svg>`;
 const DL_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3v9"/><path d="m6.5 8.5 3.5 3.5 3.5-3.5"/><path d="M4 16h12"/></svg>`;
+const CLIP_ICON = `<svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"/><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"/></svg>`;
+const SEND_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>`;
+const COPY_ICON = `<svg width="13" height="13" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"/><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"/></svg>`;
+const CLOSE_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg>`;
+const HISTORY_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 10a6.8 6.8 0 1 1 2 4.8"/><path d="M3.2 14.4v-3.6h3.6"/><path d="M10 6.2V10l2.6 1.6"/></svg>`;
+const PLUS_ICON = `<svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12"/><path d="M4 10h12"/></svg>`;
+// Image / Video / Clipper mode switch — the creative tool is three twins under
+// /tools (masked image edits at /tools/image, start/end-frame + time-scoped
+// video edits at /tools/video, subrange video clipping at /tools/clipper).
+// Shared here so all three pages render an identical segmented tab.
+const TAB_IMAGE_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9" r="1.5"/><path d="m4 17 4.5-4.5 3 3L16 11l4 4"/></svg>`;
+const TAB_VIDEO_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="14" height="14" rx="2"/><path d="m17 9 4-2v10l-4-2"/></svg>`;
+const TAB_CLIPPER_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.1 8.1 20 18M8.1 15.9 20 6"/></svg>`;
+export function renderInpaintModeTabs(active) {
+    const tab = (mode, href, icon, label) => `<a class="rk-ip-tab${active === mode ? " is-active" : ""}" href="${href}" role="tab" aria-selected="${active === mode ? "true" : "false"}">${icon}<span>${label}</span></a>`;
+    return `<div class="rk-ip-tabs" role="tablist" aria-label="Editor mode">${tab("image", "/tools/image", TAB_IMAGE_ICON, "Image")}${tab("video", "/tools/video", TAB_VIDEO_ICON, "Video")}${tab("clipper", "/tools/clipper", TAB_CLIPPER_ICON, "Clipper")}</div>`;
+}
+export const INPAINT_TABS_CSS = `
+.rk-ip-tabs{display:inline-flex;gap:3px;padding:3px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:999px;margin-bottom:12px}
+.rk-ip-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 15px;border-radius:999px;font-size:13px;font-weight:700;color:var(--rk-text-muted);text-decoration:none;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-ip-tab:hover{color:var(--rk-ink)}
+.rk-ip-tab.is-active{background:var(--rk-surface);color:var(--rk-ink);box-shadow:var(--rk-shadow-sm)}
+.rk-ip-tab svg{flex:none}
+`;
 export function renderReskinInpaint(input = {}) {
     const boot = { accountId: input.accountId || "", isLoggedIn: Boolean(input.isLoggedIn) };
     const body = `
 <main class="rk-container-wide rk-page rk-inpaint-page">
-  <div class="rk-page-head">
-    <h1 class="rk-h1">Create Image</h1>
-    <p class="rk-sub">Upload an image, brush a mask over what you want to change, describe the edit, and generate — everything outside the mask stays untouched.</p>
+  <div class="rk-page-head rk-inpaint-head">
+    <div class="rk-inpaint-head-text">
+      ${renderInpaintModeTabs("image")}
+      <h1 class="rk-h1">Create Image</h1>
+      <p class="rk-sub">Upload an image (or generate one), paint mask regions in different colors, give each color its own instruction, add an optional whole-image prompt, and generate — everything outside your mask stays untouched.</p>
+    </div>
+    <div class="rk-inpaint-toolbar">
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-inpaint-startnew" data-custom-inpaint-start-new>${PLUS_ICON} Start New</button>
+      <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-settings-button aria-label="Settings" title="Settings">${GEAR_ICON}</button>
+      <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-history-toggle aria-label="Past sessions" title="Past sessions">${HISTORY_ICON}</button>
+    </div>
   </div>
 
   <div class="rk-inpaint-workbench">
-    <!-- LEFT: upload + prompt + brush controls -->
+    <!-- LEFT: source + prompts + brush/color controls -->
     <section class="rk-inpaint-panel" aria-label="Controls">
       <div class="rk-inpaint-block">
-        <label class="rk-label" for="rk-ip-file">Source image</label>
-        <label class="rk-inpaint-drop" id="rk-ip-drop" for="rk-ip-file">
+        <label class="rk-label">Source image</label>
+        <button type="button" class="rk-inpaint-drop" data-custom-inpaint-upload>
           <span class="rk-inpaint-drop-ic" aria-hidden="true">${UPLOAD_ICON}</span>
-          <span class="rk-inpaint-drop-main"><strong>Choose an image</strong> or drop it here</span>
-          <span class="rk-inpaint-drop-name" id="rk-ip-srcname">No image selected</span>
-          <input id="rk-ip-file" class="rk-inpaint-file" type="file" accept="image/*" />
-        </label>
+          <span class="rk-inpaint-drop-main"><strong>Add source image</strong> or drop it here</span>
+          <span class="rk-inpaint-drop-name" data-custom-inpaint-source-name>No image selected</span>
+        </button>
+        <input data-custom-inpaint-file type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" hidden />
       </div>
 
       <div class="rk-inpaint-block">
-        <label class="rk-label" for="rk-ip-prompt">What should change in the masked area?</label>
-        <textarea id="rk-ip-prompt" class="rk-textarea rk-inpaint-prompt" placeholder="e.g. replace the sky with a warm golden sunset"></textarea>
-        <span class="rk-hint">Only the pixels you brush are edited. The rest of the image is preserved.</span>
+        <label class="rk-label">Whole image prompt</label>
+        <div class="rk-ip-promptfield">
+          <textarea class="rk-textarea rk-ip-global" data-editor-inpaint-global-prompt placeholder="Describe the overall edit, style, constraints, or preservation notes (optional)."></textarea>
+          <button type="button" class="rk-ip-attach" data-editor-inpaint-attach-scope="global" aria-label="Attach reference image" title="Attach reference image">${CLIP_ICON}</button>
+        </div>
+        <span class="editor-inpaint-attachment-chips rk-ip-attach-chips" data-editor-inpaint-attachments="global"></span>
+        <input data-editor-inpaint-attachment-input type="file" accept="image/jpeg,image/png,image/webp" multiple hidden />
+        <span class="rk-hint">Guidance for the masked edit and overall consistency. It never permits changing unmasked pixels.</span>
       </div>
 
       <div class="rk-inpaint-block">
         <div class="rk-inpaint-brushrow">
-          <label class="rk-label" for="rk-ip-brush">Brush size</label>
-          <span class="rk-inpaint-brushval" id="rk-ip-brushval">40&nbsp;px</span>
-        </div>
-        <input id="rk-ip-brush" class="rk-inpaint-range" type="range" min="8" max="160" value="40" step="2" />
-        <div class="rk-inpaint-tools">
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" id="rk-ip-undo">${UNDO_ICON} Undo</button>
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" id="rk-ip-clear">${CLEAR_ICON} Clear mask</button>
+          <label class="rk-label">Brush <span data-editor-inpaint-brush-label>70</span>&nbsp;px</label>
+          <div class="rk-ip-toolbtns">
+            <button type="button" class="rk-ip-iconbtn" data-editor-inpaint-undo aria-label="Undo stroke" title="Undo">${UNDO_ICON}</button>
+            <button type="button" class="rk-ip-iconbtn" data-editor-inpaint-redo aria-label="Redo stroke" title="Redo">${REDO_ICON}</button>
+            <button type="button" class="rk-ip-iconbtn" data-editor-inpaint-clear aria-label="Clear mask" title="Clear mask">${CLEAR_ICON}</button>
+          </div>
         </div>
+        <input data-editor-inpaint-brush class="rk-inpaint-range" type="range" min="6" max="180" step="1" value="70" />
       </div>
 
-      <div class="rk-inpaint-block rk-inpaint-provwrap" id="rk-ip-provwrap" data-visible="false">
-        <label class="rk-label" for="rk-ip-provider">AI provider</label>
-        <select id="rk-ip-provider" class="rk-select rk-inpaint-select"><option value="">Auto</option></select>
+      <div class="rk-inpaint-block">
+        <div class="rk-inpaint-brushrow">
+          <label class="rk-label">Mask colors</label>
+          <input class="rk-ip-colorpicker" data-editor-inpaint-color-picker type="color" value="#ff2d55" aria-label="Mask color" />
+        </div>
+        <span class="rk-hint">Paint regions in different colors, then give each color its own replacement instruction below.</span>
+        <div class="editor-inpaint-swatches" data-editor-inpaint-swatches></div>
+        <div class="editor-inpaint-prompts" data-editor-inpaint-prompts></div>
+        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-ip-addcolor" data-editor-inpaint-add-color>+ Add color</button>
       </div>
 
-      <div class="rk-inpaint-keynote" id="rk-ip-keynote" hidden>
-        Add an AI provider key (OpenAI, Gemini, or OpenRouter) to generate edits.
-        <a href="/settings/developer">Open Settings</a>
+      <div class="rk-inpaint-block">
+        <button type="button" class="rk-btn rk-btn-gold rk-inpaint-generate" data-editor-inpaint-submit>${SPARK_ICON} <span data-editor-inpaint-submit-label>Generate edit</span></button>
+        <p class="custom-inpaint-status rk-inpaint-status" data-custom-inpaint-status data-tone="" aria-live="polite"></p>
       </div>
-
-      <button type="button" class="rk-btn rk-btn-gold rk-inpaint-generate" id="rk-ip-generate" disabled>${SPARK_ICON} Generate edit</button>
-      <p class="rk-inpaint-status" id="rk-ip-status" data-tone="" aria-live="polite"></p>
     </section>
 
-    <!-- CENTER: canvas stage -->
+    <!-- CENTER: canvas stage (with text-to-image empty state) -->
     <section class="rk-inpaint-stage" aria-label="Canvas">
-      <div class="rk-inpaint-empty" id="rk-ip-empty">
+      <div class="rk-inpaint-empty" data-custom-inpaint-empty>
         <span class="rk-inpaint-empty-ic" aria-hidden="true">${UPLOAD_ICON}</span>
         <p class="rk-inpaint-empty-title">Upload an image to start</p>
-        <p class="rk-inpaint-empty-sub">Then brush over the area you want the AI to change.</p>
+        <p class="rk-inpaint-empty-sub">Then paint mask regions in one or more colors.</p>
+
+        <!-- Or generate an image from scratch (text-to-image) -->
+        <div class="rk-ip-gen" id="rk-ip-gen">
+          <span class="rk-ip-gen-or">or</span>
+          <div class="rk-ip-gen-box">
+            <textarea id="rk-ip-genprompt" class="rk-ip-gen-input" rows="2" placeholder="Or type your image prompt"></textarea>
+            <div class="rk-ip-gen-refs" id="rk-ip-genrefs" hidden></div>
+            <div class="rk-ip-gen-bar">
+              <button type="button" class="rk-ip-gen-clip" id="rk-ip-genclip" aria-label="Attach reference images from your files" title="Attach reference images from your files">${CLIP_ICON}</button>
+              <span class="rk-ip-gen-hint">Generate a brand-new image, then paint to refine it.</span>
+              <button type="button" class="rk-ip-gen-send" id="rk-ip-gensend" aria-label="Generate image">${SEND_ICON}</button>
+            </div>
+          </div>
+          <p class="rk-ip-gen-status" id="rk-ip-genstatus" data-tone="" aria-live="polite"></p>
+        </div>
       </div>
-      <div class="rk-inpaint-canvaswrap" id="rk-ip-canvaswrap" hidden>
-        <img id="rk-ip-img" class="rk-inpaint-img" alt="Source image" />
-        <canvas id="rk-ip-canvas" class="rk-inpaint-canvas"></canvas>
-        <span class="rk-inpaint-cursor" id="rk-ip-cursor" hidden></span>
+      <div class="rk-inpaint-canvaswrap editor-inpaint-canvas-wrap" data-custom-inpaint-canvas-wrap hidden>
+        <img data-editor-inpaint-image class="rk-inpaint-img" alt="" />
+        <canvas data-editor-inpaint-canvas class="rk-inpaint-canvas"></canvas>
+        <div class="editor-inpaint-brush-cursor" data-editor-inpaint-brush-cursor aria-hidden="true"></div>
       </div>
     </section>
 
-    <!-- RIGHT: result + history -->
-    <section class="rk-inpaint-output" aria-label="Result">
-      <div class="rk-inpaint-result" id="rk-ip-result" hidden>
+    <!-- RIGHT: result + tracer-grouped history -->
+    <section class="rk-inpaint-output" aria-label="Result and history">
+      <div class="custom-inpaint-output rk-inpaint-result" data-custom-inpaint-output hidden>
         <div class="rk-inpaint-result-head">
           <h2 class="rk-inpaint-h2">Result</h2>
-          <a class="rk-btn rk-btn-ink rk-btn-sm rk-inpaint-dl" id="rk-ip-dl" href="#" download>${DL_ICON} Download</a>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-custom-inpaint-save>Save to Files</button>
         </div>
-        <a class="rk-inpaint-result-imgwrap" id="rk-ip-resultlink" href="#" target="_blank" rel="noopener">
-          <img id="rk-ip-resultimg" class="rk-inpaint-result-img" alt="Edited image" />
-        </a>
+        <button type="button" class="rk-inpaint-result-imgwrap custom-inpaint-preview" data-custom-inpaint-result-open aria-label="View image edit result">
+          <img class="rk-inpaint-result-img" data-custom-inpaint-result alt="Image edit result" />
+        </button>
       </div>
+
       <div class="rk-inpaint-history">
-        <h2 class="rk-inpaint-h2">History</h2>
-        <div class="rk-inpaint-historylist" id="rk-ip-history"></div>
+        <div class="rk-inpaint-history-head">
+          <h2 class="rk-inpaint-h2">This session</h2>
+          <div class="rk-ip-histtools">
+            <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-history-refresh aria-label="Refresh history" title="Refresh history">${REFRESH_ICON}</button>
+          </div>
+        </div>
+        <div class="custom-inpaint-history-list rk-inpaint-historylist" data-custom-inpaint-history-list>
+          <div class="custom-inpaint-history-empty">Loading history…</div>
+        </div>
       </div>
     </section>
   </div>
 
+  <!-- settings modal (tracer + AI model) -->
+  <div class="rk-ip-settingsmodal" data-custom-inpaint-settings hidden>
+    <div class="rk-ip-settingsmodal-panel" role="dialog" aria-modal="true" aria-label="Image edit settings">
+      <div class="rk-ip-settingsmodal-head">
+        <span class="rk-ip-settingsmodal-title">Settings</span>
+        <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-settings-close aria-label="Close settings" title="Close">${CLOSE_ICON}</button>
+      </div>
+      <div class="rk-ip-settingsmodal-body">
+        <label class="rk-ip-setting editor-inpaint-provider rk-ip-provider" data-editor-inpaint-provider-wrap>
+          <span class="rk-label">AI model</span>
+          <select data-editor-inpaint-provider class="rk-select rk-inpaint-select"></select>
+        </label>
+        <label class="rk-ip-setting">
+          <span class="rk-label">Session name <span class="rk-ip-setting-note">(tracer — groups this session's History)</span></span>
+          <input data-custom-inpaint-tracer class="rk-ip-input" type="text" autocomplete="off" spellcheck="false" placeholder="Auto-named from your first prompt" />
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <!-- past-sessions (tracers) left slide-in panel -->
+  <aside class="rk-ip-sessions" data-custom-inpaint-sessions aria-label="Past sessions">
+    <div class="rk-ip-sessions-head">
+      <span class="rk-ip-sessions-title">Past sessions</span>
+      <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-sessions-close aria-label="Close past sessions" title="Close">${CLOSE_ICON}</button>
+    </div>
+    <div class="rk-ip-sessions-list" data-custom-inpaint-sessions-list>
+      <div class="rk-ip-sessions-empty">Loading…</div>
+    </div>
+  </aside>
+  <div class="rk-ip-sessions-backdrop" data-custom-inpaint-sessions-backdrop hidden></div>
+
+  <!-- image preview lightbox (result + history) -->
+  <div class="custom-inpaint-lightbox rk-ip-lightbox" data-custom-inpaint-lightbox data-open="false" hidden>
+    <div class="custom-inpaint-lightbox-dialog" role="dialog" aria-modal="true" aria-labelledby="custom-inpaint-lightbox-title">
+      <div class="custom-inpaint-lightbox-head">
+        <p class="custom-inpaint-lightbox-title" id="custom-inpaint-lightbox-title" data-custom-inpaint-lightbox-title>Image edit output</p>
+        <div class="custom-inpaint-lightbox-actions">
+          <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-lightbox-copy aria-label="Copy image URL" title="Copy URL">${COPY_ICON}</button>
+          <a class="rk-btn rk-btn-ink rk-btn-sm" data-custom-inpaint-lightbox-download href="#" target="_blank" rel="noopener noreferrer" download>${DL_ICON} Download</a>
+          <button type="button" class="rk-ip-iconbtn" data-custom-inpaint-lightbox-close aria-label="Close preview" title="Close">${CLOSE_ICON}</button>
+        </div>
+      </div>
+      <div class="custom-inpaint-lightbox-stage">
+        <img data-custom-inpaint-lightbox-image alt="Image edit output preview" />
+      </div>
+    </div>
+  </div>
+
   <script type="application/json" data-rk-inpaint-boot>${JSON.stringify(boot).replace(/</g, "\\u003c")}</script>
 </main>`;
     const pageCss = `
+${INPAINT_TABS_CSS}
 .rk-inpaint-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
-/* slimmer side rails so the center canvas (the primary work surface) isn't
-   starved once the 248px app sidebar is subtracted; drop the right rail under
-   the canvas sooner (≤1200) so mid-size laptops give the canvas full width. */
-.rk-inpaint-workbench{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:20px;align-items:start}
-@media(max-width:1200px){.rk-inpaint-workbench{grid-template-columns:280px minmax(0,1fr)}.rk-inpaint-output{grid-column:1 / -1;grid-row:2}}
-@media(max-width:820px){.rk-inpaint-workbench{grid-template-columns:1fr}.rk-inpaint-output,.rk-inpaint-stage,.rk-inpaint-panel{grid-column:auto}
-  /* stack canvas ABOVE the controls so you can paint without scrolling past Generate */
-  .rk-inpaint-stage{order:-1}}
-@media(max-height:520px){.rk-inpaint-stage{min-height:0}}
+.rk-inpaint-workbench{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:20px;align-items:start}
+@media(max-width:1200px){.rk-inpaint-workbench{grid-template-columns:320px minmax(0,1fr)}.rk-inpaint-output{grid-column:1 / -1;grid-row:2}}
+@media(max-width:820px){.rk-inpaint-workbench{grid-template-columns:1fr}.rk-inpaint-output,.rk-inpaint-stage,.rk-inpaint-panel{grid-column:auto}.rk-inpaint-stage{order:-1}}
 
 /* panels (no side borders — uniform hairline) */
 .rk-inpaint-panel,.rk-inpaint-stage,.rk-inpaint-output{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card)}
-.rk-inpaint-panel{padding:20px;display:grid;gap:18px;align-content:start}
+.rk-inpaint-panel{padding:18px;display:grid;gap:16px;align-content:start}
 .rk-inpaint-block{display:grid;gap:9px}
 .rk-inpaint-h2{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:800;color:var(--rk-ink);letter-spacing:-.01em}
 
-/* upload dropzone */
-.rk-inpaint-drop{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 16px;cursor:pointer;
-  border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);color:var(--rk-text-muted);
+/* upload dropzone (button) */
+.rk-inpaint-drop{display:grid;justify-items:center;gap:6px;text-align:center;padding:20px 16px;cursor:pointer;width:100%;
+  border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);color:var(--rk-text-muted);font:inherit;
   transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
 .rk-inpaint-drop:hover,.rk-inpaint-drop.is-drag{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
 .rk-inpaint-drop-ic{color:var(--rk-gold-700);display:grid;place-items:center}
 .rk-inpaint-drop-main{font-size:13px}
 .rk-inpaint-drop-main strong{color:var(--rk-ink);font-weight:700}
 .rk-inpaint-drop-name{font-size:12px;color:var(--rk-text-faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.rk-inpaint-file{display:none}
-.rk-inpaint-prompt{min-height:88px}
 
-/* brush controls */
+/* whole-image + per-color prompt fields */
+.rk-ip-promptfield{position:relative}
+.rk-ip-global{min-height:74px;width:100%;padding-right:44px}
+.editor-inpaint-prompt{width:100%;min-height:60px;resize:vertical;padding:9px 40px 9px 11px;font:inherit;font-size:13px;line-height:1.45;color:var(--rk-ink);
+  border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-xl);background:#fff;outline:0;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.editor-inpaint-prompt:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-attach,.editor-inpaint-attach-button{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;cursor:pointer;
+  border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-attach:hover,.editor-inpaint-attach-button:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.editor-inpaint-prompt-stack .editor-inpaint-prompt-field{position:relative}
+.rk-ip-attach-chips,.editor-inpaint-attachment-chips{display:flex;flex-wrap:wrap;gap:6px}
+.editor-inpaint-attachment-tools{margin-top:6px}
+.editor-inpaint-attachment-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);font-size:11.5px;color:var(--rk-n-700);max-width:170px}
+.editor-inpaint-attachment-chip img{width:22px;height:22px;border-radius:4px;object-fit:cover;flex:none}
+.editor-inpaint-attachment-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.editor-inpaint-attachment-chip button{flex:none;border:0;background:transparent;cursor:pointer;color:var(--rk-text-faint);font-size:15px;line-height:1;padding:0 2px}
+.editor-inpaint-attachment-chip button:hover{color:var(--rk-ink)}
+
+/* brush / tools row */
 .rk-inpaint-brushrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
-.rk-inpaint-brushval{font-size:12.5px;font-weight:700;color:var(--rk-n-600);font-variant-numeric:tabular-nums}
+.rk-ip-toolbtns{display:flex;gap:6px}
+.rk-ip-iconbtn{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-iconbtn:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
 .rk-inpaint-range{width:100%;accent-color:var(--rk-gold-700);cursor:pointer}
-.rk-inpaint-tools{display:flex;gap:8px}
-.rk-inpaint-tools .rk-btn{flex:1;gap:6px}
-.rk-inpaint-provwrap[data-visible="false"]{display:none}
-.rk-inpaint-keynote{font-size:12.5px;color:var(--rk-text-muted);line-height:1.5;background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-xl);padding:10px 12px}
-.rk-inpaint-keynote[hidden]{display:none}
-.rk-inpaint-keynote a{color:var(--rk-gold-700);font-weight:700}
+.rk-ip-settings{margin-top:2px;padding:10px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50);display:grid;gap:12px}
+.rk-ip-settings[hidden]{display:none}
+.rk-ip-setting{display:grid;gap:6px}
+.rk-ip-setting-note{font-weight:600;color:var(--rk-text-faint)}
+.rk-ip-input{width:100%;padding:8px 10px;font:inherit;font-size:13px;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
+.rk-ip-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+
+/* mask colors */
+.rk-ip-colorpicker{width:42px;height:32px;padding:2px;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;cursor:pointer}
+.editor-inpaint-swatches{display:none}
+.editor-inpaint-prompts{display:grid;align-content:start;gap:10px}
+.editor-inpaint-color-row{position:relative;display:flex;align-items:flex-start;gap:10px;padding:6px;border-radius:var(--rk-r-xl);border:1px solid transparent}
+.editor-inpaint-color-row[data-active="true"]{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.editor-inpaint-color-tools{flex:0 0 auto;display:grid;justify-items:center;gap:6px}
+.editor-inpaint-color-dot{width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;cursor:pointer;background:var(--inpaint-color,#ff2d55);box-shadow:0 0 0 1px var(--rk-border-strong)}
+.editor-inpaint-color-row[data-active="true"] .editor-inpaint-color-dot{box-shadow:0 0 0 2px var(--rk-gold-700)}
+.editor-inpaint-color-remove{display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--rk-border);border-radius:50%;background:#fff;color:var(--rk-text-muted);cursor:pointer}
+.editor-inpaint-color-remove:hover{color:#b42318;border-color:#e6a8a0}
+.editor-inpaint-color-remove svg{width:12px;height:12px}
+.editor-inpaint-prompt-stack{flex:1;min-width:0;display:grid;gap:6px}
+.rk-ip-addcolor{justify-self:start}
+
+/* provider */
+.editor-inpaint-provider{display:none;gap:6px}
+.editor-inpaint-provider[data-visible="true"]{display:grid}
+.rk-inpaint-select{width:100%}
+
+/* generate + status */
 .rk-inpaint-generate{width:100%;justify-content:center;gap:8px;padding:13px}
-.rk-inpaint-generate:disabled{opacity:.55;cursor:default}
+.rk-inpaint-generate[data-loading="true"]{opacity:.7;cursor:wait}
 .rk-inpaint-status{font-size:12.5px;font-weight:600;line-height:1.5;min-height:18px;color:var(--rk-text-muted)}
 .rk-inpaint-status[data-tone="error"]{color:#b42318}
 .rk-inpaint-status[data-tone="success"]{color:#1f7a44}
 
-/* center stage */
+/* locked session — inputs frozen after an edit is generated (Start New to edit again) */
+.rk-inpaint-workbench.is-locked .rk-inpaint-panel{position:relative}
+.rk-inpaint-workbench.is-locked .rk-inpaint-block:not(:last-child){opacity:.55}
+.rk-inpaint-workbench.is-locked .editor-inpaint-prompt,
+.rk-inpaint-workbench.is-locked .rk-ip-global{cursor:default;background:var(--rk-n-50)}
+.rk-inpaint-workbench.is-locked .rk-inpaint-canvas{cursor:not-allowed}
+.rk-inpaint-workbench.is-locked .rk-inpaint-generate{opacity:1;cursor:default;background:var(--rk-n-50);color:var(--rk-text-muted);border-color:var(--rk-border);box-shadow:none;font-size:12.5px}
+.rk-inpaint-workbench.is-locked .rk-inpaint-generate svg{display:none}
+
+/* center stage + canvas */
 .rk-inpaint-stage{min-height:420px;display:grid;place-items:center;padding:20px;overflow:hidden}
-.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:40px 20px}
+.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:34px 20px}
 .rk-inpaint-empty[hidden]{display:none}
 .rk-inpaint-empty-ic{color:var(--rk-n-400)}
 .rk-inpaint-empty-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink)}
 .rk-inpaint-empty-sub{font-size:13px}
-.rk-inpaint-canvaswrap{position:relative;display:inline-block;line-height:0;max-width:100%;border-radius:var(--rk-r-2xl);overflow:hidden;box-shadow:var(--rk-shadow-md)}
-.rk-inpaint-canvaswrap[hidden]{display:none}
-.rk-inpaint-img{display:block;max-width:100%;max-height:min(64vh,620px);width:auto;height:auto}
-.rk-inpaint-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
-.rk-inpaint-cursor{position:absolute;z-index:3;border:2px solid rgba(252,185,0,.95);background:rgba(252,185,0,.28);border-radius:50%;
-  pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
-.rk-inpaint-cursor[hidden]{display:none}
+.editor-inpaint-canvas-wrap{position:relative;display:inline-block;line-height:0;max-width:100%;border-radius:var(--rk-r-2xl);overflow:hidden;box-shadow:var(--rk-shadow-md);
+  --inpaint-brush-cursor-size:70px;--inpaint-brush-cursor-x:0px;--inpaint-brush-cursor-y:0px}
+.editor-inpaint-canvas-wrap[hidden]{display:none}
+.editor-inpaint-canvas-wrap img{display:block;max-width:100%;max-height:min(64vh,620px);width:auto;height:auto;object-fit:contain;user-select:none}
+.editor-inpaint-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.86;cursor:none;touch-action:none}
+.editor-inpaint-brush-cursor{position:absolute;z-index:2;left:0;top:0;width:var(--inpaint-brush-cursor-size);height:var(--inpaint-brush-cursor-size);
+  border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 1px rgba(28,25,23,.7),0 0 18px rgba(28,25,23,.25);opacity:0;pointer-events:none;
+  transform:translate(var(--inpaint-brush-cursor-x),var(--inpaint-brush-cursor-y)) translate(-50%,-50%)}
+.editor-inpaint-brush-cursor[data-visible="true"]{opacity:1}
+
+/* text-to-image composer (empty state) */
+.rk-ip-gen{width:100%;max-width:460px;margin-top:16px;display:grid;gap:10px;justify-items:stretch}
+.rk-ip-gen-or{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-ip-gen-or::before,.rk-ip-gen-or::after{content:"";position:absolute;top:50%;width:calc(50% - 26px);height:1px;background:var(--rk-border)}
+.rk-ip-gen-or::before{left:0}.rk-ip-gen-or::after{right:0}
+.rk-ip-gen-box{background:#fff;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);padding:10px 10px 8px;display:grid;gap:8px;
+  box-shadow:var(--rk-shadow-sm);transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease);text-align:left}
+.rk-ip-gen-box:focus-within{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-gen.is-busy .rk-ip-gen-box{opacity:.75}
+.rk-ip-gen-input{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:14px;line-height:1.45;color:var(--rk-ink);min-height:44px;padding:2px 4px}
+.rk-ip-gen-input::placeholder{color:var(--rk-text-faint)}
+.rk-ip-gen-input:disabled{cursor:not-allowed;color:var(--rk-text-muted)}
+.rk-ip-gen-clip:disabled{opacity:.5;cursor:not-allowed}
+.rk-ip-gen-refs{display:flex;flex-wrap:wrap;gap:6px}
+.rk-ip-gen-refs[hidden]{display:none}
+.rk-ip-gen-ref{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);font-size:11.5px;color:var(--rk-n-700);max-width:180px}
+.rk-ip-gen-ref img{width:22px;height:22px;border-radius:4px;object-fit:cover;flex:none}
+.rk-ip-gen-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-gen-ref button{flex:none;border:0;background:transparent;cursor:pointer;color:var(--rk-text-faint);font-size:15px;line-height:1;padding:0 2px}
+.rk-ip-gen-ref button:hover{color:var(--rk-ink)}
+.rk-ip-gen-bar{display:flex;align-items:center;gap:8px}
+.rk-ip-gen-hint{flex:1;font-size:11.5px;color:var(--rk-text-faint);line-height:1.35}
+.rk-ip-gen-clip,.rk-ip-gen-send{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),opacity var(--rk-dur) var(--rk-ease)}
+.rk-ip-gen-clip{border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600)}
+.rk-ip-gen-clip:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-gen-send{border:0;background:var(--rk-gold-500,var(--rk-gold-600));color:var(--rk-ink)}
+.rk-ip-gen-send:hover:not(:disabled){background:var(--rk-gold-600)}
+.rk-ip-gen-send:disabled{opacity:.5;cursor:default}
+.rk-ip-gen-send.is-busy{background:var(--rk-gold-tint);pointer-events:none}
+.rk-ip-gen-spin,.rk-ip-gen-send .rk-ip-gen-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--rk-gold-tint2,rgba(252,185,0,.35));border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+.rk-ip-gen-status{font-size:12px;font-weight:600;min-height:16px;color:var(--rk-text-muted);text-align:left;padding-left:2px}
+.rk-ip-gen-status[data-tone="error"]{color:#b42318}
+.rk-ip-gen-status[data-tone="success"]{color:#1f7a44}
+
+/* file-directory pop panel (reference picker) */
+.rk-ip-filemodal{position:fixed;inset:0;z-index:60;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;animation:rk-ip-fade .16s var(--rk-ease)}
+@keyframes rk-ip-fade{from{opacity:0}to{opacity:1}}
+.rk-ip-filemodal-panel{width:min(560px,100%);max-height:min(80vh,680px);display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
+.rk-ip-filemodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-filemodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-filemodal-close{border:0;background:transparent;font-size:22px;line-height:1;color:var(--rk-text-muted);cursor:pointer;padding:0 4px}
+.rk-ip-filemodal-close:hover{color:var(--rk-ink)}
+.rk-ip-filemodal-mount{padding:12px 14px;overflow:auto;flex:1;min-height:0}
 
 /* right: result + history */
 .rk-inpaint-output{padding:18px;display:grid;gap:18px;align-content:start}
-.rk-inpaint-result[hidden]{display:none}
+.custom-inpaint-output[hidden]{display:none}
 .rk-inpaint-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
-.rk-inpaint-dl{gap:6px}
-.rk-inpaint-result-imgwrap{display:block;border-radius:var(--rk-r-2xl);overflow:hidden;background:var(--rk-n-100);box-shadow:var(--rk-shadow-sm)}
+.rk-inpaint-result-imgwrap{display:block;width:100%;padding:0;border:0;border-radius:var(--rk-r-2xl);overflow:hidden;background:var(--rk-n-100);box-shadow:var(--rk-shadow-sm);cursor:zoom-in}
 .rk-inpaint-result-img{display:block;width:100%;height:auto}
-.rk-inpaint-historylist{display:grid;gap:10px;margin-top:10px}
-.rk-inpaint-hitem{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50)}
-.rk-inpaint-hthumb{width:52px;height:52px;flex:none;border-radius:var(--rk-r-lg);overflow:hidden;background:var(--rk-n-200);display:grid;place-items:center}
-.rk-inpaint-hthumb img{width:100%;height:100%;object-fit:cover}
-.rk-inpaint-hspin{width:20px;height:20px;border-radius:50%;border:3px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+.rk-inpaint-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.rk-ip-histtools{display:flex;align-items:center;gap:8px}
+.rk-inpaint-historylist{display:grid;gap:10px}
+.custom-inpaint-history-empty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;text-align:center;line-height:1.4}
+.custom-inpaint-history-item{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50)}
+.custom-inpaint-history-item[data-kind="source"]{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.custom-inpaint-history-thumb-button{width:54px;height:54px;display:grid;padding:0;border:0;border-radius:var(--rk-r-lg);background:transparent;cursor:zoom-in}
+.custom-inpaint-history-thumb{width:54px;height:54px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);object-fit:cover;background:var(--rk-n-200)}
+.custom-inpaint-history-generating{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-100)}
+.custom-inpaint-history-generating::before{content:"";width:22px;height:22px;border-radius:50%;border:2.5px solid var(--rk-gold-tint2,rgba(252,185,0,.35));border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+.custom-inpaint-history-meta{min-width:0;display:grid;gap:5px}
+.custom-inpaint-history-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-history-subtitle{min-width:0;color:var(--rk-text-muted);font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-history-actions{display:flex;align-items:center;gap:5px}
+.custom-inpaint-history-icon{width:26px;height:26px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--rk-border);border-radius:50%;background:#fff;color:var(--rk-n-700);cursor:pointer;text-decoration:none}
+.custom-inpaint-history-icon:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.custom-inpaint-history-icon svg{width:13px;height:13px}
+.custom-inpaint-history-check{min-height:26px;padding:0 10px;border:1px solid var(--rk-border);border-radius:999px;background:#fff;color:var(--rk-ink);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
+.custom-inpaint-history-check[disabled]{cursor:wait;opacity:.6}
+.custom-inpaint-history-popconfirm{position:absolute;right:6px;top:6px;z-index:6;width:160px;display:grid;gap:7px;padding:9px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-surface);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card))}
+.custom-inpaint-history-popconfirm[hidden]{display:none}
+.custom-inpaint-history-popconfirm p{margin:0;color:var(--rk-ink);font-size:12px;font-weight:700;line-height:1.3}
+.custom-inpaint-history-popconfirm-actions{display:flex;gap:6px}
+.custom-inpaint-history-popconfirm-actions button{flex:1 1 0;min-height:26px;padding:0 8px;border-radius:var(--rk-r-md,8px);border:1px solid var(--rk-border);background:#fff;color:var(--rk-ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
+.custom-inpaint-history-popconfirm-actions button[data-danger="true"]{border-color:#e6a8a0;color:#b42318}
+
+/* lightbox */
+.custom-inpaint-lightbox{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:22px;background:rgba(28,25,23,.66);backdrop-filter:blur(8px)}
+.custom-inpaint-lightbox[data-open="true"]{display:grid}
+.custom-inpaint-lightbox[hidden]{display:none}
+.custom-inpaint-lightbox-dialog{width:min(1100px,calc(100vw - 44px));max-height:94svh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:14px;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card))}
+.custom-inpaint-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.custom-inpaint-lightbox-title{min-width:0;margin:0;color:var(--rk-ink);font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.custom-inpaint-lightbox-actions{display:flex;align-items:center;gap:8px}
+.custom-inpaint-lightbox-stage{min-height:0;display:grid;place-items:center;overflow:auto}
+.custom-inpaint-lightbox-stage img{max-width:100%;max-height:calc(94svh - 92px);object-fit:contain;border-radius:var(--rk-r-xl);background:var(--rk-n-100)}
+
 @keyframes rk-ip-spin{to{transform:rotate(360deg)}}
-.rk-inpaint-hmain{flex:1;min-width:0;display:grid;gap:2px}
-.rk-inpaint-htitle{font-size:12.5px;font-weight:700;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.rk-inpaint-hsub{font-size:11.5px;color:var(--rk-text-muted)}
-.rk-inpaint-hdl{flex:none;color:var(--rk-gold-700);display:grid;place-items:center;width:30px;height:30px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff}
-.rk-inpaint-hdl:hover{background:var(--rk-gold-tint)}
-.rk-inpaint-hempty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;text-align:center}
+
+/* page-head toolbar (Start New + gear + past-sessions) */
+.rk-inpaint-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.rk-inpaint-head-text{min-width:0;flex:1 1 320px}
+.rk-inpaint-toolbar{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
+.rk-inpaint-startnew{gap:6px}
+
+/* settings modal */
+.rk-ip-settingsmodal{position:fixed;inset:0;z-index:70;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;animation:rk-ip-fade .16s var(--rk-ease)}
+.rk-ip-settingsmodal[hidden]{display:none}
+.rk-ip-settingsmodal-panel{width:min(440px,100%);display:flex;flex-direction:column;gap:0;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
+.rk-ip-settingsmodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-settingsmodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-settingsmodal-body{padding:16px 18px;display:grid;gap:14px}
+
+/* past-sessions left slide-in panel (like /chat history) */
+.rk-ip-sessions{position:fixed;left:0;top:0;bottom:0;z-index:96;width:min(320px,86vw);display:flex;flex-direction:column;
+  background:var(--rk-surface);border-right:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xl,var(--rk-shadow-card));
+  transform:translateX(-100%);transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-ip-sessions.is-open{transform:none}
+.rk-ip-sessions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 10px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-sessions-title{font-family:var(--rk-font-display);font-weight:800;font-size:14px;color:var(--rk-ink)}
+.rk-ip-sessions-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:grid;gap:4px;align-content:start}
+.rk-ip-sessions-empty{font-size:12.5px;color:var(--rk-text-faint);padding:16px 8px;text-align:center;line-height:1.4}
+.rk-ip-session{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;padding:7px;border:1px solid transparent;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;text-align:left;font:inherit;width:100%}
+.rk-ip-session:hover{background:var(--rk-n-50)}
+.rk-ip-session.is-active{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-ip-session-thumb{width:44px;height:44px;border:1px solid var(--rk-border);border-radius:var(--rk-r-md,8px);object-fit:cover;background:var(--rk-n-200)}
+.rk-ip-session-thumb.is-empty{display:grid;place-items:center;color:var(--rk-text-faint)}
+.rk-ip-session-meta{min-width:0;display:grid;gap:3px}
+.rk-ip-session-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-session-sub{min-width:0;color:var(--rk-text-muted);font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-sessions-backdrop{position:fixed;inset:0;z-index:95;background:rgba(28,25,23,.34)}
+.rk-ip-sessions-backdrop[hidden]{display:none}
 `;
     const script = `
 (function(){
-  var root=document;
-  var boot={};
-  try{ var b=root.querySelector('[data-rk-inpaint-boot]'); boot=b?JSON.parse(b.textContent||'{}'):{}; }catch(e){ boot={}; }
-
-  var fileInput=root.getElementById('rk-ip-file');
-  var drop=root.getElementById('rk-ip-drop');
-  var srcName=root.getElementById('rk-ip-srcname');
-  var promptEl=root.getElementById('rk-ip-prompt');
-  var brush=root.getElementById('rk-ip-brush');
-  var brushVal=root.getElementById('rk-ip-brushval');
-  var undoBtn=root.getElementById('rk-ip-undo');
-  var clearBtn=root.getElementById('rk-ip-clear');
-  var provWrap=root.getElementById('rk-ip-provwrap');
-  var provSelect=root.getElementById('rk-ip-provider');
-  var keyNote=root.getElementById('rk-ip-keynote');
-  var generate=root.getElementById('rk-ip-generate');
-  var statusEl=root.getElementById('rk-ip-status');
-  var emptyState=root.getElementById('rk-ip-empty');
-  var canvasWrap=root.getElementById('rk-ip-canvaswrap');
-  var img=root.getElementById('rk-ip-img');
-  var canvas=root.getElementById('rk-ip-canvas');
-  var cursor=root.getElementById('rk-ip-cursor');
-  var resultBox=root.getElementById('rk-ip-result');
-  var resultImg=root.getElementById('rk-ip-resultimg');
-  var resultLink=root.getElementById('rk-ip-resultlink');
-  var resultDl=root.getElementById('rk-ip-dl');
-  var historyList=root.getElementById('rk-ip-history');
-
-  var MASK_COLOR='rgba(252,185,0,0.55)';
-  var sourceUrl='';
-  var strokes=[];        // [{size, points:[{x,y}]}]
-  var current=null;
-  var painting=false;
-  var busy=false;
-  var historyItems=[];   // [{kind:'pending'|'output', jobId, url, createdAt, status, progress}]
-
-  function setStatus(msg,tone){ if(!statusEl) return; statusEl.textContent=msg||''; statusEl.setAttribute('data-tone',tone||''); }
-  function absUrl(v){ try{ return new URL(v, window.location.href).toString(); }catch(e){ return v; } }
-  function parseJson(r){ return r.json().catch(function(){ return {}; }); }
-  function tracerId(){ return 'reskin-inpaint-'+Date.now().toString(36)+'-'+Math.floor(Math.random()*1e6).toString(36); }
-
-  function canGenerate(){ return Boolean(sourceUrl) && strokes.length>0 && !busy; }
-  function syncGenerate(){ if(generate) generate.disabled=!canGenerate(); }
-
-  // ── canvas mask ──────────────────────────────────────────────────────────
-  function redraw(){
-    var ctx=canvas.getContext('2d'); if(!ctx) return;
-    ctx.clearRect(0,0,canvas.width,canvas.height);
-    ctx.lineCap='round'; ctx.lineJoin='round'; ctx.globalAlpha=1; ctx.strokeStyle=MASK_COLOR;
-    for(var s=0;s<strokes.length;s++){
-      var st=strokes[s]; if(!st.points.length) continue;
-      ctx.lineWidth=st.size; ctx.beginPath(); ctx.moveTo(st.points[0].x,st.points[0].y);
-      if(st.points.length===1){ ctx.lineTo(st.points[0].x+0.01,st.points[0].y+0.01); }
-      else { for(var i=1;i<st.points.length;i++){ ctx.lineTo(st.points[i].x,st.points[i].y); } }
-      ctx.stroke();
-    }
-  }
-  function syncCanvasSize(){
-    if(!img.naturalWidth||!img.naturalHeight) return;
-    if(canvas.width!==img.naturalWidth||canvas.height!==img.naturalHeight){
-      canvas.width=img.naturalWidth; canvas.height=img.naturalHeight; redraw();
-    }
-  }
-  function pointOf(e){
-    var rect=canvas.getBoundingClientRect();
-    return {
-      x:Math.max(0,Math.min(canvas.width,(e.clientX-rect.left)*(canvas.width/rect.width))),
-      y:Math.max(0,Math.min(canvas.height,(e.clientY-rect.top)*(canvas.height/rect.height)))
-    };
-  }
-  function resetMask(){ strokes=[]; current=null; painting=false; redraw(); syncGenerate(); }
-
-  canvas.addEventListener('pointerdown',function(e){
-    if(!sourceUrl||busy) return;
-    e.preventDefault();
-    try{ canvas.setPointerCapture(e.pointerId); }catch(_){}
-    painting=true;
-    current={ size:Number(brush.value)||40, points:[pointOf(e)] };
-    strokes.push(current); redraw(); syncGenerate();
-  });
-  canvas.addEventListener('pointermove',function(e){
-    moveCursor(e);
-    if(!painting||!current) return;
-    e.preventDefault();
-    current.points.push(pointOf(e)); redraw();
-  });
-  function endStroke(e){ if(!painting) return; painting=false; current=null; try{ canvas.releasePointerCapture(e.pointerId); }catch(_){} }
-  canvas.addEventListener('pointerup',endStroke);
-  canvas.addEventListener('pointercancel',endStroke);
-  canvas.addEventListener('pointerleave',function(){ if(cursor) cursor.hidden=true; });
-
-  // brush cursor preview
-  function cursorPx(){
-    if(!img.naturalWidth) return Number(brush.value)||40;
-    var rect=canvas.getBoundingClientRect();
-    return (Number(brush.value)||40)*(rect.width/canvas.width);
-  }
-  function moveCursor(e){
-    if(!cursor||!sourceUrl) return;
-    var wrapRect=canvasWrap.getBoundingClientRect();
-    var d=cursorPx();
-    cursor.hidden=false;
-    cursor.style.width=d+'px'; cursor.style.height=d+'px';
-    cursor.style.left=(e.clientX-wrapRect.left)+'px';
-    cursor.style.top=(e.clientY-wrapRect.top)+'px';
-  }
-
-  if(brush) brush.addEventListener('input',function(){ if(brushVal) brushVal.innerHTML=(brush.value)+'&nbsp;px'; });
-  if(undoBtn) undoBtn.addEventListener('click',function(){ strokes.pop(); redraw(); syncGenerate(); });
-  if(clearBtn) clearBtn.addEventListener('click',function(){ resetMask(); });
-
-  // ── mask blob: white + destination-out holes where painted ────────────────
-  function maskBlob(){
-    return new Promise(function(resolve,reject){
-      var m=document.createElement('canvas'); m.width=canvas.width; m.height=canvas.height;
-      var ctx=m.getContext('2d'); if(!ctx){ reject(new Error('Unable to prepare mask image.')); return; }
-      ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,m.width,m.height);
-      ctx.globalCompositeOperation='destination-out'; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.strokeStyle='rgba(0,0,0,1)';
-      for(var s=0;s<strokes.length;s++){
-        var st=strokes[s]; if(!st.points.length) continue;
-        ctx.lineWidth=st.size; ctx.beginPath(); ctx.moveTo(st.points[0].x,st.points[0].y);
-        if(st.points.length===1){ ctx.lineTo(st.points[0].x+0.01,st.points[0].y+0.01); }
-        else { for(var i=1;i<st.points.length;i++){ ctx.lineTo(st.points[i].x,st.points[i].y); } }
-        ctx.stroke();
-      }
-      m.toBlob(function(blob){ blob?resolve(blob):reject(new Error('Unable to prepare mask image.')); },'image/png');
-    });
-  }
-  function aspectRatio(){
-    var w=canvas.width||img.naturalWidth||0, h=canvas.height||img.naturalHeight||0;
-    if(!w||!h) return '';
-    var r=w/h;
-    if(Math.abs(r-1)<0.08) return '1:1';
-    if(r>1) return r>=1.55?'16:9':'4:3';
-    return r<=0.65?'9:16':'3:4';
-  }
-  function buildInstruction(){
-    var p=(promptEl.value||'').trim();
-    if(!p) return '';
-    return [
-      'INPAINTING SYSTEM WRAPPER:',
-      'You are editing an existing image with an alpha mask. Treat transparent mask pixels as the only editable region. Everything outside the mask must remain the same image: preserve identity, layout, pose, camera angle, framing, background, lighting, colors, textures, text, logos, and all unmasked details.',
-      'Do not redraw, reinterpret, beautify, crop, zoom, rotate, expand, or stylize unmasked content. Keep the original dimensions and aspect ratio.',
-      'Edit only the masked region to: '+p+'. Match the surrounding perspective, lighting, grain, shadows, and edge blending.'
-    ].join(' ');
-  }
-
-  // ── temp-file upload (presign → upload → finalize) ────────────────────────
-  function uploadTemp(blob,fileName,contentType){
-    return fetch('/api/v1/user/me/temporary-files/presign',{
-      method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
-      body:JSON.stringify({ file_name:fileName, content_type:contentType, size_bytes:blob.size, folder_path:'inpaint' })
-    }).then(parseJson).then(function(pre){
-      if(!pre||!pre.transport){ throw new Error((pre&&pre.error)||'Unable to prepare upload.'); }
-      if(pre.transport==='server'){
-        var fd=new FormData();
-        fd.append((pre.upload&&pre.upload.form_field)||'file', new File([blob],fileName,{type:contentType}));
-        fd.append('folder_path','inpaint');
-        return fetch((pre.upload&&pre.upload.url)||'/api/v1/user/me/temporary-files/upload',{
-          method:(pre.upload&&pre.upload.method)||'POST',credentials:'same-origin',body:fd
-        }).then(parseJson).then(function(up){
-          if(!up||!up.file){ throw new Error((up&&up.error)||'Unable to upload file.'); }
-          return up.file.viewUrl||up.file.view_url||up.file.s3Url||up.file.s3_url;
-        });
-      }
-      return fetch(pre.upload.url,{ method:pre.upload.method, headers:pre.upload.headers, body:blob }).then(function(r){
-        if(!r.ok) throw new Error('Upload failed with status '+r.status+'.');
-        return fetch('/api/v1/user/me/temporary-files',{
-          method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
-          body:JSON.stringify({ file_id:pre.file_id, file_name:pre.file_name, content_type:pre.content_type, size_bytes:blob.size, storage_key:pre.storage_key, folder_path:pre.folder_path||'inpaint' })
-        }).then(parseJson).then(function(fin){
-          if(!fin||!fin.file){ throw new Error((fin&&fin.error)||'Unable to save file.'); }
-          return fin.file.viewUrl||fin.file.view_url||fin.file.s3Url||fin.file.s3_url;
-        });
-      });
-    });
-  }
-
-  function loadSourceFile(file){
-    if(!file||!/^image\\//.test(file.type||'')){ setStatus('Choose an image file.','error'); return; }
-    if(generate) generate.disabled=true;
-    setStatus('Uploading source image\\u2026','');
-    uploadTemp(file, file.name||'source.png', file.type||'image/png').then(function(url){
-      sourceUrl=absUrl(url);
-      if(srcName) srcName.textContent=file.name||'Source image';
-      if(emptyState) emptyState.hidden=true;
-      if(canvasWrap) canvasWrap.hidden=false;
-      if(resultBox) resultBox.hidden=true;
-      resetMask();
-      img.onload=function(){ syncCanvasSize(); resetMask(); };
-      img.src=sourceUrl;
-      setStatus('Source ready. Brush the area to change.','success');
-    }).catch(function(err){
-      setStatus((err&&err.message)?err.message:'Unable to upload source image.','error');
-    }).then(function(){ syncGenerate(); });
-  }
-
-  if(fileInput) fileInput.addEventListener('change',function(){ if(fileInput.files&&fileInput.files[0]) loadSourceFile(fileInput.files[0]); });
-  if(drop){
-    ['dragenter','dragover'].forEach(function(ev){ drop.addEventListener(ev,function(e){ e.preventDefault(); drop.classList.add('is-drag'); }); });
-    ['dragleave','drop'].forEach(function(ev){ drop.addEventListener(ev,function(e){ e.preventDefault(); drop.classList.remove('is-drag'); }); });
-    drop.addEventListener('drop',function(e){ var f=e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files[0]; if(f) loadSourceFile(f); });
-  }
-
-  // ── provider keys ─────────────────────────────────────────────────────────
-  function loadProviders(){
-    fetch('/api/v1/user/me/provider-keys',{credentials:'same-origin'}).then(function(r){ return r.ok?parseJson(r):null; }).then(function(j){
-      if(!j){ return; }
-      var supported={openai:1,gemini:1,openrouter:1}; var seen={}; var providers=[];
-      var keys=Array.isArray(j.provider_keys)?j.provider_keys:[];
-      for(var i=0;i<keys.length;i++){
-        var p=String(keys[i].provider||''); var status=String(keys[i].status||'active');
-        var cd=keys[i].cooldown_until?Date.parse(String(keys[i].cooldown_until)):0;
-        if(!supported[p]||status!=='active'||(cd&&cd>Date.now())||seen[p]) continue;
-        seen[p]=1; providers.push(p);
-      }
-      if(provSelect){
-        provSelect.innerHTML='<option value="">Auto</option>'+providers.map(function(p){ return '<option value="'+p+'">'+p.charAt(0).toUpperCase()+p.slice(1)+'</option>'; }).join('');
-      }
-      if(provWrap) provWrap.setAttribute('data-visible', providers.length>1?'true':'false');
-      if(keyNote) keyNote.hidden=providers.length>0;
-    }).catch(function(){});
-  }
-
-  // ── history ────────────────────────────────────────────────────────────────
-  function renderHistory(){
-    if(!historyList) return;
-    if(!historyItems.length){ historyList.innerHTML='<div class="rk-inpaint-hempty">No edits yet.</div>'; return; }
-    historyList.innerHTML='';
-    historyItems.forEach(function(it){
-      var row=document.createElement('div'); row.className='rk-inpaint-hitem';
-      var thumb=document.createElement('div'); thumb.className='rk-inpaint-hthumb';
-      if(it.kind==='pending'){ thumb.innerHTML='<span class="rk-inpaint-hspin" aria-hidden="true"></span>'; }
-      else { var im=document.createElement('img'); im.src=it.url; im.alt='Edit output'; im.loading='lazy'; thumb.appendChild(im); }
-      var main=document.createElement('div'); main.className='rk-inpaint-hmain';
-      var t=document.createElement('div'); t.className='rk-inpaint-htitle';
-      t.textContent=it.kind==='pending'?'Generating\\u2026':(it.createdAt?new Date(it.createdAt).toLocaleTimeString([], {hour:'numeric',minute:'2-digit'}):'Edit output');
-      var sub=document.createElement('div'); sub.className='rk-inpaint-hsub';
-      sub.textContent=it.kind==='pending'?('Job '+(it.status||'running')+(it.progress>0?(' \\u00b7 '+Math.round(it.progress*100)+'%'):'')):'Ready';
-      main.appendChild(t); main.appendChild(sub);
-      row.appendChild(thumb); row.appendChild(main);
-      if(it.kind==='output'&&it.url){
-        var dl=document.createElement('a'); dl.className='rk-inpaint-hdl'; dl.href=it.url; dl.target='_blank'; dl.rel='noopener';
-        dl.setAttribute('download','inpaint-'+(it.jobId||'output')+'.png'); dl.setAttribute('aria-label','Download'); dl.innerHTML=${JSON.stringify(DL_ICON)};
-        row.appendChild(dl);
-      }
-      historyList.appendChild(row);
-    });
-  }
-  function upsertPending(jobId,status,progress){
-    if(!jobId) return;
-    historyItems=historyItems.filter(function(x){ return x.jobId!==jobId; });
-    historyItems.unshift({ kind:'pending', jobId:jobId, status:status||'queued', progress:progress||0, createdAt:new Date().toISOString() });
-    renderHistory();
-  }
-  function upsertOutput(jobId,url){
-    historyItems=historyItems.filter(function(x){ return x.jobId!==jobId; });
-    historyItems.unshift({ kind:'output', jobId:jobId, url:url, createdAt:new Date().toISOString() });
-    renderHistory();
-  }
-
-  function extractOutput(payload){
-    var r=(payload&&payload.result)?payload.result:{};
-    return (r.output&&r.output.image&&r.output.image.file_url)
-      ||(r.output&&r.output.primary_file_url)
-      ||(r.image&&r.image.file_url)
-      ||r.primary_file_url
-      ||(r.output&&Array.isArray(r.output.files)?r.output.files[0]:'')
-      ||(Array.isArray(r.files)?r.files[0]:'')
-      ||'';
-  }
-  function applyCompleted(payload){
-    var out=extractOutput(payload); if(!out) return '';
-    var url=absUrl(out); var jobId=String((payload&&(payload.job_id||payload.jobId))||'');
-    if(resultImg) resultImg.src=url;
-    if(resultLink) resultLink.href=url;
-    if(resultDl){ resultDl.href=url; resultDl.setAttribute('download','inpaint-'+Date.now()+'.png'); }
-    if(resultBox) resultBox.hidden=false;
-    upsertOutput(jobId||'inpaint', url);
-    return url;
-  }
-
-  function pollJob(jobId){
-    var attempt=0;
-    function step(){
-      return fetch('/api/v1/primitives/image_inpaint/jobs/'+encodeURIComponent(jobId),{credentials:'same-origin'}).then(function(r){
-        return parseJson(r).then(function(payload){
-          if(!r.ok) throw new Error(payload.error||'Unable to poll image edit job.');
-          if(payload.status==='failed'||payload.status==='cancelled'){ throw new Error((payload.error&&payload.error.message)||('Image edit job '+payload.status+'.')); }
-          var out=extractOutput(payload);
-          if(payload.status==='succeeded'||payload.status==='complete'||out){
-            if(!out) throw new Error('Image edit completed without an output URL.');
-            applyCompleted(payload); setStatus('Image edit complete.','success'); return out;
-          }
-          upsertPending(jobId,payload.status,Number(payload.progress||0));
-          setStatus('Image edit job is '+(payload.status||'running')+'\\u2026','');
-          attempt++;
-          if(attempt>=90){ setStatus('Still running \\u2014 check back shortly.',''); return null; }
-          return new Promise(function(res){ setTimeout(res, attempt<8?1500:3000); }).then(step);
-        });
-      });
-    }
-    return step();
-  }
-
-  function submit(){
-    if(!canGenerate()){
-      if(!sourceUrl) setStatus('Upload a source image first.','error');
-      else if(!strokes.length) setStatus('Brush at least one mask region.','error');
-      return;
-    }
-    if(!(promptEl.value||'').trim()){ setStatus('Describe what should change in the masked area.','error'); return; }
-    var instruction=buildInstruction(); if(!instruction){ setStatus('Describe what should change in the masked area.','error'); return; }
-    busy=true; syncGenerate();
-    setStatus('Uploading mask\\u2026','');
-    maskBlob().then(function(blob){ return uploadTemp(blob,'inpaint-mask-'+Date.now()+'.png','image/png'); }).then(function(maskUrl){
-      setStatus('Creating image edit job\\u2026','');
-      var payload={ source_image_url:sourceUrl, mask_url:absUrl(maskUrl), instruction:instruction, reference_attachments:[], size:'auto', output_format:'png' };
-      if(provSelect&&provSelect.value) payload.provider=provSelect.value;
-      var ar=aspectRatio(); if(ar) payload.aspect_ratio=ar;
-      return fetch('/api/v1/primitives/images/inpaint',{
-        method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
-        body:JSON.stringify({ tracer:tracerId(), payload:payload })
-      }).then(parseJson).then(function(j){
-        if(!j||!j.job_id){ throw new Error((j&&j.error)||'Unable to create image edit job.'); }
-        setStatus('Image edit job started\\u2026','success');
-        upsertPending(j.job_id,'queued',0);
-        return pollJob(j.job_id);
-      });
-    }).catch(function(err){
-      var msg=(err&&err.message)?err.message:'Unable to create image edit.';
-      if(/401|403|sign in|unauth/i.test(msg)) msg='Sign in to generate edits.';
-      setStatus(msg,'error');
-    }).then(function(){ busy=false; syncGenerate(); });
-  }
-  if(generate) generate.addEventListener('click',submit);
-
-  renderHistory();
-  loadProviders();
-  syncGenerate();
+          const uploadButton = document.querySelector("[data-custom-inpaint-upload]");
+          const startNewButton = document.querySelector("[data-custom-inpaint-start-new]");
+          const fileInput = document.querySelector("[data-custom-inpaint-file]");
+          const sourceName = document.querySelector("[data-custom-inpaint-source-name]");
+          const statusEl = document.querySelector("[data-custom-inpaint-status]");
+          const emptyState = document.querySelector("[data-custom-inpaint-empty]");
+          const canvasWrap = document.querySelector("[data-custom-inpaint-canvas-wrap]");
+          const outputPanel = document.querySelector("[data-custom-inpaint-output]");
+          const resultOpenButton = document.querySelector("[data-custom-inpaint-result-open]");
+          const resultImage = document.querySelector("[data-custom-inpaint-result]");
+          const historyList = document.querySelector("[data-custom-inpaint-history-list]");
+          const historyRefresh = document.querySelector("[data-custom-inpaint-history-refresh]");
+          const inpaintImage = document.querySelector("[data-editor-inpaint-image]");
+          const inpaintCanvas = document.querySelector("[data-editor-inpaint-canvas]");
+          const inpaintBrushCursor = document.querySelector("[data-editor-inpaint-brush-cursor]");
+          const inpaintUndo = document.querySelector("[data-editor-inpaint-undo]");
+          const inpaintRedo = document.querySelector("[data-editor-inpaint-redo]");
+          const inpaintClear = document.querySelector("[data-editor-inpaint-clear]");
+          const inpaintBrush = document.querySelector("[data-editor-inpaint-brush]");
+          const inpaintBrushLabel = document.querySelector("[data-editor-inpaint-brush-label]");
+          const inpaintColorPicker = document.querySelector("[data-editor-inpaint-color-picker]");
+          const inpaintAddColor = document.querySelector("[data-editor-inpaint-add-color]");
+          const inpaintProviderWrap = document.querySelector("[data-editor-inpaint-provider-wrap]");
+          const inpaintProviderSelect = document.querySelector("[data-editor-inpaint-provider]");
+          const inpaintGlobalPrompt = document.querySelector("[data-editor-inpaint-global-prompt]");
+          const inpaintAttachmentInput = document.querySelector("[data-editor-inpaint-attachment-input]");
+          const inpaintGlobalAttachments = document.querySelector('[data-editor-inpaint-attachments="global"]');
+          const inpaintSwatches = document.querySelector("[data-editor-inpaint-swatches]");
+          const inpaintPrompts = document.querySelector("[data-editor-inpaint-prompts]");
+          const inpaintSubmit = document.querySelector("[data-editor-inpaint-submit]");
+          const inpaintSubmitLabel = document.querySelector("[data-editor-inpaint-submit-label]");
+          const settingsButton = document.querySelector("[data-custom-inpaint-settings-button]");
+          const settingsPopover = document.querySelector("[data-custom-inpaint-settings]");
+          const settingsClose = document.querySelector("[data-custom-inpaint-settings-close]");
+          const tracerInput = document.querySelector("[data-custom-inpaint-tracer]");
+          const sessionsToggle = document.querySelector("[data-custom-inpaint-history-toggle]");
+          const sessionsPanel = document.querySelector("[data-custom-inpaint-sessions]");
+          const sessionsList = document.querySelector("[data-custom-inpaint-sessions-list]");
+          const sessionsClose = document.querySelector("[data-custom-inpaint-sessions-close]");
+          const sessionsBackdrop = document.querySelector("[data-custom-inpaint-sessions-backdrop]");
+          const lightbox = document.querySelector("[data-custom-inpaint-lightbox]");
+          const lightboxTitle = document.querySelector("[data-custom-inpaint-lightbox-title]");
+          const lightboxImage = document.querySelector("[data-custom-inpaint-lightbox-image]");
+          const lightboxCopy = document.querySelector("[data-custom-inpaint-lightbox-copy]");
+          const lightboxDownload = document.querySelector("[data-custom-inpaint-lightbox-download]");
+          const lightboxClose = document.querySelector("[data-custom-inpaint-lightbox-close]");
+          if (!(uploadButton instanceof HTMLButtonElement)
+            || !(startNewButton instanceof HTMLButtonElement)
+            || !(fileInput instanceof HTMLInputElement)
+            || !(sourceName instanceof HTMLElement)
+            || !(statusEl instanceof HTMLElement)
+            || !(emptyState instanceof HTMLElement)
+            || !(canvasWrap instanceof HTMLElement)
+            || !(outputPanel instanceof HTMLElement)
+            || !(resultOpenButton instanceof HTMLButtonElement)
+            || !(resultImage instanceof HTMLImageElement)
+            || !(historyList instanceof HTMLElement)
+            || !(historyRefresh instanceof HTMLButtonElement)
+            || !(inpaintImage instanceof HTMLImageElement)
+            || !(inpaintCanvas instanceof HTMLCanvasElement)
+            || !(inpaintBrushCursor instanceof HTMLElement)
+            || !(inpaintUndo instanceof HTMLButtonElement)
+            || !(inpaintRedo instanceof HTMLButtonElement)
+            || !(inpaintClear instanceof HTMLButtonElement)
+            || !(inpaintBrush instanceof HTMLInputElement)
+            || !(inpaintBrushLabel instanceof HTMLElement)
+            || !(inpaintColorPicker instanceof HTMLInputElement)
+            || !(inpaintAddColor instanceof HTMLButtonElement)
+            || !(inpaintProviderWrap instanceof HTMLElement)
+            || !(inpaintProviderSelect instanceof HTMLSelectElement)
+            || !(inpaintGlobalPrompt instanceof HTMLTextAreaElement)
+            || !(inpaintAttachmentInput instanceof HTMLInputElement)
+            || !(inpaintGlobalAttachments instanceof HTMLElement)
+            || !(inpaintSwatches instanceof HTMLElement)
+            || !(inpaintPrompts instanceof HTMLElement)
+            || !(inpaintSubmit instanceof HTMLButtonElement)
+            || !(inpaintSubmitLabel instanceof HTMLElement)
+            || !(settingsButton instanceof HTMLButtonElement)
+            || !(settingsPopover instanceof HTMLElement)
+            || !(tracerInput instanceof HTMLInputElement)
+            || !(lightbox instanceof HTMLElement)
+            || !(lightboxTitle instanceof HTMLElement)
+            || !(lightboxImage instanceof HTMLImageElement)
+            || !(lightboxCopy instanceof HTMLButtonElement)
+            || !(lightboxDownload instanceof HTMLAnchorElement)
+            || !(lightboxClose instanceof HTMLButtonElement)) {
+            return;
+          }
+
+          let sourceImageUrl = "";
+          let sourceImageName = "";
+          let inpaintMaskColors = [{ color: "#ff2d55", prompt: "" }];
+          let activeInpaintColor = "#ff2d55";
+          let inpaintStrokes = [];
+          let redoStrokes = [];
+          let currentInpaintStroke = null;
+          let isInpaintPainting = false;
+          let inpaintAttachments = [];
+          let pendingInpaintAttachmentScope = null;
+          let inpaintHistoryItems = [];
+          // Local "starting image" history entries (uploaded / generated / deep-linked
+          // sources). They are not job runs, so they survive server-history reloads by
+          // being re-injected after each rebuild — this lets users see where a session
+          // started from.
+          let sourceHistoryItems = [];
+          let historyTracerRefreshTimer = 0;
+          const hiddenInpaintHistoryKeys = new Set();
+          const maxInpaintAttachments = 8;
+          const allowedInpaintAttachmentTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
+
+          // Session tracer. A fresh session starts "auto-pending": the tracer is left
+          // unnamed until the first prompt / file upload, then it is auto-named from
+          // that seed (readable slug + random suffix) so History groups per session.
+          let sessionTracer = "";
+          let tracerAutoPending = true;
+
+          function tracerSuffix() {
+            return globalThis.crypto && typeof globalThis.crypto.randomUUID === "function"
+              ? globalThis.crypto.randomUUID().replace(/-/g, "").slice(0, 6)
+              : Math.random().toString(16).slice(2, 8).padEnd(6, "0").slice(0, 6);
+          }
+
+          function makeTracerId() {
+            return "image-edit-" + tracerSuffix();
+          }
+
+          function slugifyTracer(value) {
+            const normalized = String(value || "").trim().toLowerCase()
+              .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+            return (normalized || "image-edit").slice(0, 24);
+          }
+
+          // Turn the first prompt / filename into the session's tracer name.
+          function nameTracerFromSeed(seed) {
+            const tracer = slugifyTracer(seed) + "-" + tracerSuffix();
+            sessionTracer = tracer;
+            tracerInput.value = tracer;
+            tracerAutoPending = false;
+            return tracer;
+          }
+
+          function commitRandomTracer() {
+            const tracer = makeTracerId();
+            sessionTracer = tracer;
+            tracerInput.value = tracer;
+            tracerAutoPending = false;
+            return tracer;
+          }
+
+          // Effective tracer without forcing a name — "" while still auto-pending.
+          function resolveTracer() {
+            const typed = tracerInput.value.trim();
+            if (typed) return typed;
+            return sessionTracer;
+          }
+
+          // Used at submit/persist time — must always return a concrete tracer.
+          function getTracerValue() {
+            const typed = tracerInput.value.trim();
+            if (typed) { sessionTracer = typed; tracerAutoPending = false; return typed; }
+            if (sessionTracer) return sessionTracer;
+            return commitRandomTracer();
+          }
+
+          function queueInpaintHistoryReload() {
+            window.clearTimeout(historyTracerRefreshTimer);
+            historyTracerRefreshTimer = window.setTimeout(() => {
+              void loadInpaintHistory();
+            }, 300);
+          }
+
+          function setSubmitLoading(isLoading) {
+            inpaintSubmit.disabled = isLoading || sessionLocked;
+            inpaintSubmit.setAttribute("data-loading", isLoading ? "true" : "false");
+            inpaintSubmitLabel.textContent = isLoading
+              ? "Generating\\u2026"
+              : (sessionLocked ? "Edit generated \\u2014 Start New to edit again" : "Generate edit");
+          }
+
+          // Once an edit is generated the inputs that produced it are frozen (prompts,
+          // masks, brush, colors, references, source) so the record stays truthful —
+          // to make another edit the user hits Start New (or opens/loads another image).
+          let sessionLocked = false;
+          function applySessionLock() {
+            const locked = sessionLocked;
+            const workbench = document.querySelector(".rk-inpaint-workbench");
+            if (workbench instanceof HTMLElement) workbench.classList.toggle("is-locked", locked);
+            inpaintGlobalPrompt.readOnly = locked;
+            inpaintBrush.disabled = locked;
+            inpaintUndo.disabled = locked;
+            inpaintRedo.disabled = locked;
+            inpaintClear.disabled = locked;
+            inpaintColorPicker.disabled = locked;
+            inpaintAddColor.disabled = locked;
+            uploadButton.disabled = locked;
+            const globalAttach = document.querySelector('[data-editor-inpaint-attach-scope="global"]');
+            if (globalAttach instanceof HTMLButtonElement) globalAttach.disabled = locked;
+            inpaintPrompts.querySelectorAll("textarea.editor-inpaint-prompt").forEach((el) => { el.readOnly = locked; });
+            inpaintPrompts.querySelectorAll(".editor-inpaint-color-remove, .editor-inpaint-attach-button").forEach((el) => { el.disabled = locked; });
+            // Keep the submit button + label consistent with the lock while not loading.
+            if (inpaintSubmit.getAttribute("data-loading") !== "true") setSubmitLoading(false);
+          }
+          function setSessionLocked(locked) {
+            sessionLocked = Boolean(locked);
+            applySessionLock();
+          }
+
+          function setStatus(message, tone) {
+            statusEl.textContent = message || "";
+            if (tone) {
+              statusEl.setAttribute("data-tone", tone);
+            } else {
+              statusEl.removeAttribute("data-tone");
+            }
+          }
+
+          function imageDownloadName(prefix, createdAt) {
+            const stamp = String(createdAt || new Date().toISOString()).replace(/[^0-9a-z]+/gi, "-");
+            return prefix + "-" + stamp + ".png";
+          }
+
+          function openImagePreview(url, label, downloadName) {
+            if (!url) return;
+            lightboxImage.src = url;
+            lightboxImage.alt = label || "Image edit output preview";
+            lightboxTitle.textContent = label || "Image edit output";
+            lightboxCopy.dataset.copyUrl = url;
+            lightboxCopy.setAttribute("title", "Copy URL");
+            lightboxDownload.href = url;
+            lightboxDownload.setAttribute("download", downloadName || imageDownloadName("inpaint-output"));
+            lightbox.hidden = false;
+            lightbox.setAttribute("data-open", "true");
+            document.body.style.overflow = "hidden";
+          }
+
+          function closeImagePreview() {
+            lightbox.setAttribute("data-open", "false");
+            lightbox.hidden = true;
+            lightboxImage.removeAttribute("src");
+            lightboxCopy.dataset.copyUrl = "";
+            lightboxCopy.setAttribute("title", "Copy URL");
+            lightboxDownload.href = "#";
+            document.body.style.overflow = "";
+          }
+
+          function updateBrushCursorSize() {
+            const rect = inpaintCanvas.getBoundingClientRect();
+            const brushSize = Math.max(1, Number(inpaintBrush.value) || 40);
+            const displayScale = inpaintCanvas.width && rect.width ? rect.width / inpaintCanvas.width : 1;
+            canvasWrap.style.setProperty("--inpaint-brush-cursor-size", Math.max(6, brushSize * displayScale) + "px");
+          }
+
+          function updateBrushCursorPosition(event) {
+            const rect = inpaintCanvas.getBoundingClientRect();
+            canvasWrap.style.setProperty("--inpaint-brush-cursor-x", Math.max(0, Math.min(rect.width, event.clientX - rect.left)) + "px");
+            canvasWrap.style.setProperty("--inpaint-brush-cursor-y", Math.max(0, Math.min(rect.height, event.clientY - rect.top)) + "px");
+            updateBrushCursorSize();
+            inpaintBrushCursor.dataset.visible = "true";
+          }
+
+          function hideBrushCursor() {
+            inpaintBrushCursor.dataset.visible = "false";
+          }
+
+          function normalizeHexColor(value) {
+            const raw = String(value || "").trim().toLowerCase();
+            if (/^#[0-9a-f]{6}$/i.test(raw)) return raw;
+            if (/^#[0-9a-f]{3}$/i.test(raw)) {
+              return "#" + raw.slice(1).split("").map((part) => part + part).join("");
+            }
+            return "#ff2d55";
+          }
+
+          const inpaintColorPalette = ["#ff2d55", "#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#f97316", "#ec4899"];
+
+          function syncInpaintPromptValuesFromDom() {
+            const fields = Array.from(inpaintPrompts.querySelectorAll("[data-color]"));
+            for (const field of fields) {
+              if (field instanceof HTMLTextAreaElement) {
+                updateInpaintPrompt(field.dataset.color || "", field.value);
+              }
+            }
+          }
+
+          function attachmentId() {
+            return "att_" + Date.now().toString(36) + "_" + Math.random().toString(16).slice(2, 8);
+          }
+
+          function attachmentsForScope(scope, color) {
+            const normalizedColor = color ? normalizeHexColor(color) : "";
+            return inpaintAttachments.filter((attachment) => (
+              attachment.scope === scope && (!normalizedColor || attachment.color === normalizedColor)
+            ));
+          }
+
+          function renderAttachmentChips(container, scope, color) {
+            container.innerHTML = "";
+            for (const attachment of attachmentsForScope(scope, color)) {
+              const chip = document.createElement("span");
+              chip.className = "editor-inpaint-attachment-chip";
+              const preview = document.createElement("img");
+              preview.src = attachment.url;
+              preview.alt = "";
+              preview.loading = "lazy";
+              const label = document.createElement("span");
+              label.textContent = attachment.fileName || "reference image";
+              const remove = document.createElement("button");
+              remove.type = "button";
+              remove.textContent = "×";
+              remove.dataset.editorInpaintRemoveAttachment = attachment.id;
+              remove.setAttribute("aria-label", "Remove " + (attachment.fileName || "reference image"));
+              chip.append(preview, label, remove);
+              container.append(chip);
+            }
+          }
+
+          function renderAllAttachmentChips() {
+            renderAttachmentChips(inpaintGlobalAttachments, "global");
+            for (const container of Array.from(inpaintPrompts.querySelectorAll("[data-editor-inpaint-attachments]"))) {
+              if (container instanceof HTMLElement && container.dataset.color) {
+                renderAttachmentChips(container, "color", container.dataset.color);
+              }
+            }
+          }
+
+          function openAttachmentPicker(scope, color) {
+            pendingInpaintAttachmentScope = { scope, color: color ? normalizeHexColor(color) : "" };
+            inpaintAttachmentInput.click();
+          }
+
+          function isAllowedInpaintAttachment(file) {
+            return file instanceof File && allowedInpaintAttachmentTypes.has(file.type);
+          }
+
+          function imageFilesFromPaste(event) {
+            const clipboard = event.clipboardData;
+            if (!clipboard) return [];
+            const files = [];
+            for (const item of Array.from(clipboard.items || [])) {
+              if (item.kind !== "file") continue;
+              const file = item.getAsFile();
+              if (file) files.push(file);
+            }
+            if (!files.length) {
+              for (const file of Array.from(clipboard.files || [])) {
+                files.push(file);
+              }
+            }
+            return files;
+          }
+
+          function handleAttachmentPaste(event, scope, color) {
+            const files = imageFilesFromPaste(event);
+            if (!files.length) return;
+            event.preventDefault();
+            const allowed = files.filter(isAllowedInpaintAttachment);
+            if (!allowed.length) {
+              setStatus("Reference attachments must be JPEG, PNG, or WebP images.", "error");
+              return;
+            }
+            void addAttachmentFilesForScope(allowed, {
+              scope,
+              color: scope === "color" ? normalizeHexColor(color) : ""
+            });
+          }
+
+          function pickNextInpaintColor(requestedColor) {
+            const requested = normalizeHexColor(requestedColor);
+            const used = new Set(inpaintMaskColors.map((entry) => entry.color));
+            if (!used.has(requested)) {
+              return requested;
+            }
+            for (const color of inpaintColorPalette) {
+              if (!used.has(color)) {
+                return color;
+              }
+            }
+            for (let index = 0; index < 32; index += 1) {
+              const color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");
+              if (!used.has(color)) {
+                return color;
+              }
+            }
+            return requested;
+          }
+
+          function renderInpaintControls() {
+            syncInpaintPromptValuesFromDom();
+            inpaintBrushLabel.textContent = inpaintBrush.value;
+            inpaintSwatches.innerHTML = "";
+            inpaintPrompts.innerHTML = "";
+            for (const entry of inpaintMaskColors) {
+              const row = document.createElement("div");
+              row.className = "editor-inpaint-color-row";
+              row.dataset.color = entry.color;
+              row.dataset.active = entry.color === activeInpaintColor ? "true" : "false";
+              const dot = document.createElement("button");
+              dot.type = "button";
+              dot.className = "editor-inpaint-color-dot";
+              dot.style.setProperty("--inpaint-color", entry.color);
+              dot.dataset.color = entry.color;
+              dot.setAttribute("aria-label", "Use mask color " + entry.color);
+              dot.setAttribute("title", entry.color);
+              const colorTools = document.createElement("div");
+              colorTools.className = "editor-inpaint-color-tools";
+              colorTools.append(dot);
+              if (inpaintMaskColors.length > 1) {
+                const removeColor = document.createElement("button");
+                removeColor.type = "button";
+                removeColor.className = "editor-inpaint-color-remove";
+                removeColor.dataset.editorInpaintRemoveColor = entry.color;
+                removeColor.setAttribute("aria-label", "Remove mask color " + entry.color);
+                removeColor.setAttribute("title", "Remove color");
+                removeColor.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>';
+                removeColor.addEventListener("click", (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  removeInpaintColor(entry.color);
+                });
+                colorTools.append(removeColor);
+              }
+              const prompt = document.createElement("textarea");
+              prompt.className = "editor-inpaint-prompt";
+              prompt.dataset.color = entry.color;
+              prompt.value = entry.prompt || "";
+              prompt.placeholder = "In color " + entry.color + " replace with...";
+              const stack = document.createElement("div");
+              stack.className = "editor-inpaint-prompt-stack";
+              const field = document.createElement("div");
+              field.className = "editor-inpaint-prompt-field";
+              const tools = document.createElement("div");
+              tools.className = "editor-inpaint-attachment-tools";
+              const attach = document.createElement("button");
+              attach.type = "button";
+              attach.className = "editor-inpaint-attach-button";
+              attach.dataset.editorInpaintAttachScope = "color";
+              attach.dataset.color = entry.color;
+              attach.setAttribute("aria-label", "Attach reference image for " + entry.color);
+              attach.setAttribute("title", "Attach reference image");
+              attach.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"></path><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"></path></svg>';
+              const chips = document.createElement("span");
+              chips.className = "editor-inpaint-attachment-chips";
+              chips.dataset.editorInpaintAttachments = "color";
+              chips.dataset.color = entry.color;
+              field.append(prompt, attach);
+              tools.append(chips);
+              stack.append(field, tools);
+              row.append(colorTools, stack);
+              inpaintPrompts.append(row);
+            }
+            renderAllAttachmentChips();
+            applySessionLock();
+          }
+
+          function redrawInpaintMask() {
+            const ctx = inpaintCanvas.getContext("2d");
+            if (!ctx) return;
+            ctx.clearRect(0, 0, inpaintCanvas.width, inpaintCanvas.height);
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            for (const stroke of inpaintStrokes) {
+              if (!stroke.points || stroke.points.length < 1) continue;
+              ctx.strokeStyle = stroke.color;
+              ctx.lineWidth = stroke.size;
+              ctx.globalAlpha = 1;
+              ctx.beginPath();
+              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+              if (stroke.points.length === 1) {
+                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
+              } else {
+                for (let index = 1; index < stroke.points.length; index += 1) {
+                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
+                }
+              }
+              ctx.stroke();
+            }
+          }
+
+          function syncInpaintCanvasSize() {
+            if (!inpaintImage.naturalWidth || !inpaintImage.naturalHeight) return;
+            if (inpaintCanvas.width !== inpaintImage.naturalWidth || inpaintCanvas.height !== inpaintImage.naturalHeight) {
+              inpaintCanvas.width = inpaintImage.naturalWidth;
+              inpaintCanvas.height = inpaintImage.naturalHeight;
+              redrawInpaintMask();
+            }
+            updateBrushCursorSize();
+          }
+
+          function getInpaintPoint(event) {
+            const rect = inpaintCanvas.getBoundingClientRect();
+            return {
+              x: Math.max(0, Math.min(inpaintCanvas.width, (event.clientX - rect.left) * (inpaintCanvas.width / rect.width))),
+              y: Math.max(0, Math.min(inpaintCanvas.height, (event.clientY - rect.top) * (inpaintCanvas.height / rect.height)))
+            };
+          }
+
+          function beginInpaintStroke(event) {
+            if (!sourceImageUrl || !inpaintCanvas.width || inpaintSubmit.disabled || sessionLocked) return;
+            event.preventDefault();
+            inpaintCanvas.setPointerCapture(event.pointerId);
+            isInpaintPainting = true;
+            currentInpaintStroke = {
+              color: activeInpaintColor,
+              size: Number(inpaintBrush.value) || 40,
+              points: [getInpaintPoint(event)]
+            };
+            inpaintStrokes.push(currentInpaintStroke);
+            redoStrokes = [];
+            redrawInpaintMask();
+          }
+
+          function continueInpaintStroke(event) {
+            if (!isInpaintPainting || !currentInpaintStroke) return;
+            event.preventDefault();
+            currentInpaintStroke.points.push(getInpaintPoint(event));
+            redrawInpaintMask();
+          }
+
+          function endInpaintStroke(event) {
+            if (!isInpaintPainting) return;
+            event.preventDefault();
+            isInpaintPainting = false;
+            currentInpaintStroke = null;
+            try {
+              inpaintCanvas.releasePointerCapture(event.pointerId);
+            } catch {}
+          }
+
+          function addInpaintColor(color) {
+            syncInpaintPromptValuesFromDom();
+            const normalized = pickNextInpaintColor(color);
+            if (!inpaintMaskColors.some((entry) => entry.color === normalized)) {
+              inpaintMaskColors.push({ color: normalized, prompt: "" });
+            }
+            activeInpaintColor = normalized;
+            inpaintColorPicker.value = normalized;
+            renderInpaintControls();
+          }
+
+          function removeInpaintColor(color) {
+            syncInpaintPromptValuesFromDom();
+            const normalized = normalizeHexColor(color);
+            if (inpaintMaskColors.length <= 1 || !inpaintMaskColors.some((entry) => entry.color === normalized)) {
+              setStatus("Keep at least one mask color.", "error");
+              return;
+            }
+            inpaintMaskColors = inpaintMaskColors.filter((entry) => entry.color !== normalized);
+            inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.scope !== "color" || attachment.color !== normalized);
+            inpaintStrokes = inpaintStrokes.filter((stroke) => normalizeHexColor(stroke.color) !== normalized);
+            redoStrokes = redoStrokes.filter((stroke) => normalizeHexColor(stroke.color) !== normalized);
+            if (activeInpaintColor === normalized) {
+              activeInpaintColor = inpaintMaskColors[0]?.color || "#ff2d55";
+              inpaintColorPicker.value = activeInpaintColor;
+            }
+            redrawInpaintMask();
+            renderInpaintControls();
+            setStatus("", "");
+          }
+
+          function selectInpaintColor(color) {
+            activeInpaintColor = normalizeHexColor(color);
+            inpaintColorPicker.value = activeInpaintColor;
+            for (const row of Array.from(inpaintPrompts.querySelectorAll(".editor-inpaint-color-row"))) {
+              if (row instanceof HTMLElement) {
+                row.dataset.active = row.dataset.color === activeInpaintColor ? "true" : "false";
+              }
+            }
+          }
+
+          function updateInpaintPrompt(color, prompt) {
+            const normalized = normalizeHexColor(color);
+            inpaintMaskColors = inpaintMaskColors.map((entry) => (
+              entry.color === normalized ? { ...entry, prompt: String(prompt || "") } : entry
+            ));
+          }
+
+          function buildInpaintInstruction() {
+            const globalPrompt = inpaintGlobalPrompt.value.trim();
+            const regions = inpaintMaskColors
+              .map((entry) => ({ color: entry.color.toUpperCase(), prompt: String(entry.prompt || "").trim() }))
+              .filter((entry) => entry.prompt);
+            if (!globalPrompt && !regions.length) return "";
+            const attachmentNotes = inpaintAttachments.map((attachment, index) => {
+              const label = "reference image " + (index + 1) + " (" + (attachment.fileName || "attachment") + ")";
+              return attachment.scope === "global"
+                ? label + " applies to the whole image instruction"
+                : label + " applies only to the UI mask color " + String(attachment.color || "").toUpperCase();
+            });
+            return [
+              "INPAINTING SYSTEM WRAPPER:",
+              "You are editing an existing image with an alpha mask. Treat transparent mask pixels as the only editable region. Everything outside the editable mask must remain the same image: preserve identity, layout, pose, camera angle, framing, background, lighting, colors, textures, text, logos, and all unmasked details.",
+              "Do not redraw, reinterpret, beautify, crop, zoom, rotate, expand, stylize, or otherwise alter unmasked content. Do not render the UI mask colors; they are labels only.",
+              "The final image must keep the original dimensions and aspect ratio unless the user explicitly asks for a dimension change.",
+              globalPrompt ? "Whole image prompt: " + globalPrompt + ". Apply this only as guidance for the masked edit and overall consistency; it does not permit changing unmasked content." : "",
+              regions.map((entry) => (
+                "Masked region " + entry.color + ": replace only that marked area with " + entry.prompt + ". Match the surrounding perspective, lighting, grain, shadows, and edge blending."
+              )).join(" "),
+              attachmentNotes.length ? "Reference image scope: " + attachmentNotes.join("; ") + ". Use each reference only for its stated scope and do not copy unrelated reference details into unmasked areas." : ""
+            ].filter(Boolean).join(" ");
+          }
+
+          function getInpaintAspectRatio() {
+            const width = inpaintCanvas.width || inpaintImage.naturalWidth || 0;
+            const height = inpaintCanvas.height || inpaintImage.naturalHeight || 0;
+            if (!width || !height) return undefined;
+            const ratio = width / height;
+            if (Math.abs(ratio - 1) < 0.08) return "1:1";
+            if (ratio > 1) return ratio >= 1.55 ? "16:9" : "4:3";
+            return ratio <= 0.65 ? "9:16" : "3:4";
+          }
+
+          function canvasToPngBlob(canvas) {
+            return new Promise((resolve, reject) => {
+              canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("Unable to prepare image.")), "image/png");
+            });
+          }
+
+          async function createProviderMaskBlob() {
+            const maskCanvas = document.createElement("canvas");
+            maskCanvas.width = inpaintCanvas.width;
+            maskCanvas.height = inpaintCanvas.height;
+            const ctx = maskCanvas.getContext("2d");
+            if (!ctx) throw new Error("Unable to prepare mask image.");
+            ctx.fillStyle = "#ffffff";
+            ctx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
+            ctx.globalCompositeOperation = "destination-out";
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            for (const stroke of inpaintStrokes) {
+              if (!stroke.points || stroke.points.length < 1) continue;
+              ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+              ctx.lineWidth = stroke.size;
+              ctx.beginPath();
+              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+              if (stroke.points.length === 1) {
+                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
+              } else {
+                for (let index = 1; index < stroke.points.length; index += 1) {
+                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
+                }
+              }
+              ctx.stroke();
+            }
+            return canvasToPngBlob(maskCanvas);
+          }
+
+          function parseJsonResponse(response) {
+            return response.json().catch(() => ({}));
+          }
+
+          async function loadInpaintProviders() {
+            try {
+              const response = await fetch("/api/v1/user/me/provider-keys", { credentials: "same-origin" });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok) return;
+              const supported = new Set(["openai", "gemini", "openrouter"]);
+              const providers = [];
+              const seen = new Set();
+              for (const key of Array.isArray(payload.provider_keys) ? payload.provider_keys : []) {
+                const provider = String(key.provider || "");
+                const status = String(key.status || "active");
+                const cooldownUntil = key.cooldown_until ? Date.parse(String(key.cooldown_until)) : 0;
+                if (!supported.has(provider) || status !== "active" || (cooldownUntil && cooldownUntil > Date.now()) || seen.has(provider)) {
+                  continue;
+                }
+                seen.add(provider);
+                providers.push(provider);
+              }
+              inpaintProviderSelect.innerHTML = '<option value="">Auto</option>' + providers.map((provider) => (
+                '<option value="' + provider + '">' + provider.charAt(0).toUpperCase() + provider.slice(1) + '</option>'
+              )).join("");
+              inpaintProviderWrap.setAttribute("data-visible", providers.length > 1 ? "true" : "false");
+            } catch {}
+          }
+
+          async function uploadTemporaryBlob(blob, fileName, contentType, folderPath) {
+            // All inpaint temp artifacts live under a single top-level "inpaints"
+            // folder so the file explorer shows ONE session tree, never a confusing
+            // "inpaint" (inputs) + "inpaints" (outputs) pair. Intermediate inputs
+            // (source uploads, alpha masks, reference images) go to inpaints/_inputs;
+            // finished outputs are mirrored into inpaints/<tracer>/ by their callers.
+            const folder = folderPath || "inpaints/_inputs";
+            const presignResponse = await fetch("/api/v1/user/me/temporary-files/presign", {
+              method: "POST",
+              credentials: "same-origin",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                file_name: fileName,
+                content_type: contentType,
+                size_bytes: blob.size,
+                folder_path: folder
+              })
+            });
+            const presignPayload = await parseJsonResponse(presignResponse);
+            if (!presignResponse.ok || !presignPayload || !presignPayload.transport) {
+              throw new Error(presignPayload && presignPayload.error ? presignPayload.error : "Unable to prepare upload.");
+            }
+            if (presignPayload.transport === "server") {
+              const formData = new FormData();
+              formData.append(presignPayload.upload?.form_field || "file", new File([blob], fileName, { type: contentType }));
+              formData.append("folder_path", folder);
+              const uploadResponse = await fetch(presignPayload.upload?.url || "/api/v1/user/me/temporary-files/upload", {
+                method: presignPayload.upload?.method || "POST",
+                credentials: "same-origin",
+                body: formData
+              });
+              const uploadPayload = await parseJsonResponse(uploadResponse);
+              if (!uploadResponse.ok || !uploadPayload.file) {
+                throw new Error(uploadPayload.error || "Unable to upload file.");
+              }
+              return uploadPayload.file.viewUrl || uploadPayload.file.view_url || uploadPayload.file.s3Url || uploadPayload.file.s3_url;
+            }
+            const uploadResponse = await fetch(presignPayload.upload.url, {
+              method: presignPayload.upload.method,
+              headers: presignPayload.upload.headers,
+              body: blob
+            });
+            if (!uploadResponse.ok) throw new Error("Upload failed with status " + uploadResponse.status + ".");
+            const finalizeResponse = await fetch("/api/v1/user/me/temporary-files", {
+              method: "POST",
+              credentials: "same-origin",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                file_id: presignPayload.file_id,
+                file_name: presignPayload.file_name,
+                content_type: presignPayload.content_type,
+                size_bytes: blob.size,
+                storage_key: presignPayload.storage_key,
+                folder_path: presignPayload.folder_path || folder
+              })
+            });
+            const finalizePayload = await parseJsonResponse(finalizeResponse);
+            if (!finalizeResponse.ok || !finalizePayload.file) {
+              throw new Error(finalizePayload.error || "Unable to save file.");
+            }
+            return finalizePayload.file.viewUrl || finalizePayload.file.view_url || finalizePayload.file.s3Url || finalizePayload.file.s3_url;
+          }
+
+          function absoluteUrl(value) {
+            return new URL(value, window.location.href).toString();
+          }
+
+          // Save a finished media output into My Files: pick a destination folder
+          // with the shared file-directory pop-panel, then ingest the URL
+          // server-side (handles cross-origin S3 objects). "/files" only.
+          function saveMediaToFiles(mediaUrl, defaultName) {
+            if (!mediaUrl) return;
+            var dir = window.__vidfarmDirectory;
+            if (!dir || !dir.pick) { setStatus("File browser isn't available right now.", "error"); return; }
+            dir.pick({
+              select: "folder",
+              roots: ["files"],
+              initialPath: "/files",
+              title: "Save to My Files",
+              hint: "Open a folder in your Files, then choose it to save this output there.",
+              confirmLabel: "Save here",
+              onPick: function(folder){
+                setStatus("Saving to " + (folder && folder.path ? folder.path : "My Files") + "\\u2026", "");
+                fetch("/api/v1/user/me/attachments/from-url", {
+                  method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" },
+                  body: JSON.stringify({ source_url: mediaUrl, folder_path: (folder && folder.folderPath) || "", file_name: defaultName || "" })
+                }).then(function(r){ return r.json().then(function(j){ return { ok: r.ok, j: j }; }); })
+                  .then(function(res){
+                    if(!res.ok || !res.j || res.j.error){ throw new Error((res.j && res.j.error) || "Couldn't save to My Files."); }
+                    setStatus("Saved to " + (folder && folder.path ? folder.path : "My Files") + ".", "success");
+                  })
+                  .catch(function(err){ setStatus(err instanceof Error ? err.message : "Couldn't save to My Files.", "error"); });
+              }
+            });
+          }
+
+          function firstSearchParam(names) {
+            const params = new URLSearchParams(window.location.search);
+            for (const name of names) {
+              const value = params.get(name);
+              if (value && value.trim()) return value.trim();
+            }
+            return "";
+          }
+
+          function sourceNameFromUrl(value) {
+            try {
+              const pathName = new URL(value, window.location.href).pathname;
+              const fileName = decodeURIComponent(pathName.split("/").filter(Boolean).pop() || "");
+              return fileName || "Source image";
+            } catch {
+              return "Source image";
+            }
+          }
+
+          function loadSourceUrl(value, origin) {
+            if (!value) return;
+            let url = "";
+            try {
+              url = absoluteUrl(value);
+            } catch {
+              setStatus("The source image URL is invalid.", "error");
+              return;
+            }
+            setSessionLocked(false);
+            sourceImageUrl = url;
+            sourceImageName = firstSearchParam(["source_image_name", "image_name", "file_name"]) || sourceNameFromUrl(url);
+            sourceName.textContent = sourceImageName;
+            emptyState.hidden = true;
+            canvasWrap.hidden = false;
+            outputPanel.hidden = true;
+            resultImage.removeAttribute("src");
+            resetMask();
+            inpaintImage.onload = () => {
+              syncInpaintCanvasSize();
+              resetMask();
+            };
+            inpaintImage.src = sourceImageUrl;
+            recordSourceHistoryItem(sourceImageUrl, origin || "url", sourceImageName);
+            setStatus("Source ready from URL.", "success");
+          }
+
+          function clearInpaintUrlParams() {
+            const url = new URL(window.location.href);
+            for (const key of ["tracer", "tracer_id", "trace", "source_image_url", "image_url", "input_image_url", "image", "source_image_name", "image_name", "file_name"]) {
+              url.searchParams.delete(key);
+            }
+            window.history.replaceState({}, "", url.toString());
+          }
+
+          function initializeFromUrl() {
+            const urlTracer = firstSearchParam(["tracer", "tracer_id", "trace"]);
+            if (urlTracer) {
+              sessionTracer = urlTracer;
+              tracerInput.value = urlTracer;
+              tracerAutoPending = false;
+            } else {
+              sessionTracer = "";
+              tracerInput.value = "";
+              tracerAutoPending = true;
+            }
+            loadSourceUrl(firstSearchParam(["source_image_url", "image_url", "input_image_url", "image"]), "url");
+          }
+
+          async function addAttachmentFilesForScope(files, scope) {
+            if (!scope) return;
+            const selected = Array.from(files || []);
+            if (!selected.length) return;
+            if (inpaintAttachments.length + selected.length > maxInpaintAttachments) {
+              setStatus("Use up to " + maxInpaintAttachments + " reference images.", "error");
+              return;
+            }
+            const previousDisabled = inpaintSubmit.disabled;
+            inpaintSubmit.disabled = true;
+            setStatus("Uploading reference image...", "");
+            try {
+              for (const file of selected) {
+                if (!isAllowedInpaintAttachment(file)) {
+                  throw new Error("Reference attachments must be JPEG, PNG, or WebP images.");
+                }
+                const fileName = file.name || "reference.png";
+                const uploadedUrl = await uploadTemporaryBlob(file, fileName, file.type || "image/png");
+                inpaintAttachments.push({
+                  id: attachmentId(),
+                  scope: scope.scope === "color" ? "color" : "global",
+                  color: scope.scope === "color" ? normalizeHexColor(scope.color) : "",
+                  fileName,
+                  url: absoluteUrl(uploadedUrl)
+                });
+              }
+              renderAllAttachmentChips();
+              setStatus("Reference image ready.", "success");
+            } catch (error) {
+              console.error(error);
+              setStatus(error instanceof Error ? error.message : "Unable to upload reference image.", "error");
+            } finally {
+              inpaintSubmit.disabled = previousDisabled;
+            }
+          }
+
+          async function addAttachmentFiles(files) {
+            const scope = pendingInpaintAttachmentScope;
+            pendingInpaintAttachmentScope = null;
+            await addAttachmentFilesForScope(files, scope);
+          }
+
+          function resetMask() {
+            inpaintStrokes = [];
+            redoStrokes = [];
+            currentInpaintStroke = null;
+            isInpaintPainting = false;
+            redrawInpaintMask();
+          }
+
+          function resetWorkspace() {
+            sessionLocked = false;
+            sourceImageUrl = "";
+            sourceImageName = "";
+            sourceName.textContent = "No image selected";
+            emptyState.hidden = false;
+            canvasWrap.hidden = true;
+            outputPanel.hidden = true;
+            resultImage.removeAttribute("src");
+            inpaintImage.removeAttribute("src");
+            inpaintCanvas.width = 1;
+            inpaintCanvas.height = 1;
+            inpaintGlobalPrompt.value = "";
+            inpaintMaskColors = [{ color: "#ff2d55", prompt: "" }];
+            inpaintAttachments = [];
+            pendingInpaintAttachmentScope = null;
+            activeInpaintColor = "#ff2d55";
+            inpaintColorPicker.value = activeInpaintColor;
+            sourceHistoryItems = [];
+            resetMask();
+            renderInpaintControls();
+            setStatus("", "");
+          }
+
+          async function loadSourceFile(file) {
+            if (!file || !file.type.startsWith("image/")) {
+              setStatus("Choose an image file.", "error");
+              return;
+            }
+            uploadButton.disabled = true;
+            inpaintSubmit.disabled = true;
+            setStatus("Uploading source image...", "");
+            try {
+              const fileName = file.name || "source.png";
+              // Name the session up-front (when still auto-pending) so the source upload
+              // lands in this session's folder, then unlock any prior generated edit.
+              const wasAutoPending = tracerAutoPending;
+              if (wasAutoPending) nameTracerFromSeed(fileName.replace(/\\.[a-z0-9]+$/i, ""));
+              const uploadedUrl = await uploadTemporaryBlob(file, fileName, file.type || "image/png", "inpaints/" + getTracerValue());
+              setSessionLocked(false);
+              sourceImageUrl = absoluteUrl(uploadedUrl);
+              sourceImageName = fileName;
+              sourceName.textContent = fileName;
+              emptyState.hidden = true;
+              canvasWrap.hidden = false;
+              outputPanel.hidden = true;
+              resultImage.removeAttribute("src");
+              resetMask();
+              inpaintImage.onload = () => {
+                syncInpaintCanvasSize();
+                resetMask();
+              };
+              inpaintImage.src = sourceImageUrl;
+              if (wasAutoPending) {
+                void loadInpaintHistory();
+                void loadTracerSessions();
+              }
+              recordSourceHistoryItem(sourceImageUrl, "upload", fileName);
+              setStatus("Source ready.", "success");
+            } catch (error) {
+              console.error(error);
+              setStatus(error instanceof Error ? error.message : "Unable to upload source image.", "error");
+            } finally {
+              uploadButton.disabled = false;
+              inpaintSubmit.disabled = false;
+            }
+          }
+
+          function extractOutputUrl(payload) {
+            const result = payload && payload.result ? payload.result : {};
+            return result.output?.image?.file_url
+              || result.output?.primary_file_url
+              || result.image?.file_url
+              || result.primary_file_url
+              || (Array.isArray(result.output?.files) ? result.output.files[0] : "")
+              || (Array.isArray(result.files) ? result.files[0] : "");
+          }
+
+          function isPendingJobStatus(status) {
+            return ["queued", "running", "waiting_for_provider", "waiting_for_child", "waiting_for_human"].includes(String(status || ""));
+          }
+
+          function pendingHistoryItemKey(jobId) {
+            return "job:" + String(jobId || "");
+          }
+
+          function makePendingInpaintHistoryItem(input) {
+            const jobId = String(input?.jobId || input?.job_id || "");
+            if (!jobId) return null;
+            return {
+              key: pendingHistoryItemKey(jobId),
+              kind: "pending",
+              jobId,
+              status: String(input?.status || "queued"),
+              progress: Number(input?.progress || 0),
+              createdAt: String(input?.createdAt || input?.created_at || new Date().toISOString()),
+              updatedAt: String(input?.updatedAt || input?.updated_at || new Date().toISOString())
+            };
+          }
+
+          function upsertInpaintHistoryItem(item) {
+            if (!item || !item.key) return;
+            inpaintHistoryItems = inpaintHistoryItems.filter((entry) => (
+              entry.key !== item.key
+              && (!item.jobId || entry.jobId !== item.jobId)
+            ));
+            inpaintHistoryItems.unshift(item);
+            inpaintHistoryItems.sort((a, b) => Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0));
+            renderInpaintHistory();
+          }
+
+          // Record the image a session started from (upload / generation / deep-link) so
+          // it appears in History. De-duplicated by URL; kept in sourceHistoryItems so a
+          // subsequent server-history reload doesn't drop it.
+          function recordSourceHistoryItem(url, origin, name) {
+            if (!url) return;
+            let abs = "";
+            try { abs = absoluteUrl(url); } catch { return; }
+            const key = "source:" + abs;
+            let item = sourceHistoryItems.find((entry) => entry.key === key);
+            if (!item) {
+              item = {
+                key,
+                kind: "source",
+                origin: origin || "upload",
+                url: abs,
+                name: name || sourceNameFromUrl(abs),
+                createdAt: new Date().toISOString()
+              };
+              sourceHistoryItems.push(item);
+            }
+            upsertInpaintHistoryItem(item);
+          }
+
+          function reinjectSourceHistoryItems() {
+            for (const item of sourceHistoryItems) {
+              if (!inpaintHistoryItems.some((entry) => entry.key === item.key)) {
+                inpaintHistoryItems.push(item);
+              }
+            }
+            inpaintHistoryItems.sort((a, b) => Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0));
+          }
+
+          // Mirror each completed inpaint output into /temp/inpaints/<tracer>/ so a
+          // session's outputs are browsable as files (grouped by the same tracer that
+          // groups the History strip). Best-effort + de-duplicated; never blocks the UI.
+          const persistedInpaintOutputs = new Set();
+          async function persistInpaintOutputToTemp(url, jobId) {
+            const dedupeKey = String(jobId || url || "");
+            if (!url || persistedInpaintOutputs.has(dedupeKey)) return;
+            persistedInpaintOutputs.add(dedupeKey);
+            try {
+              const response = await fetch(url, { credentials: "same-origin" });
+              if (!response.ok) throw new Error("fetch " + response.status);
+              const blob = await response.blob();
+              const contentType = blob.type || "image/png";
+              const ext = contentType.includes("jpeg") ? "jpg" : contentType.includes("webp") ? "webp" : "png";
+              const fileName = "inpaint-output-" + (jobId || Date.now().toString(36)) + "." + ext;
+              await uploadTemporaryBlob(blob, fileName, contentType, "inpaints/" + getTracerValue());
+              void loadInpaintHistory();
+            } catch (error) {
+              persistedInpaintOutputs.delete(dedupeKey);
+              console.warn("Unable to mirror inpaint output to temp files.", error);
+            }
+          }
+
+          function applyCompletedInpaintJob(payload) {
+            const outputUrl = extractOutputUrl(payload);
+            if (!outputUrl) return "";
+            const url = absoluteUrl(outputUrl);
+            const jobId = String(payload?.job_id || payload?.jobId || "");
+            resultImage.src = url;
+            outputPanel.hidden = false;
+            setSessionLocked(true);
+            void persistInpaintOutputToTemp(url, jobId);
+            upsertInpaintHistoryItem({
+              key: historyItemKey({ jobId: jobId || "inpaint" }, url, 0),
+              kind: "output",
+              jobId,
+              url,
+              createdAt: String(payload?.completed_at || payload?.updated_at || new Date().toISOString())
+            });
+            return url;
+          }
+
+          function historyEntryUrls(entry) {
+            const urls = Array.isArray(entry?.outputMediaUrls) ? entry.outputMediaUrls : [];
+            return urls.filter((url) => {
+              const value = String(url || "");
+              if (!/\\.(png|jpe?g|webp|gif|avif)(\\?|#|$)/i.test(value)) {
+                return false;
+              }
+              try {
+                const parsed = new URL(value, window.location.href);
+                const storageKey = parsed.searchParams.get("key") || decodeURIComponent(parsed.pathname).replace(/^\\/+/, "");
+                return !/\\/temporary\\/inpaints\\/_inputs(?:\\/|$)/i.test(storageKey)
+                  && !/\\/temporary\\/inpaint(?:-|\\/|$)/i.test(storageKey)
+                  && !/\\/temporary\\/inpaint-masks(?:\\/|$)/i.test(storageKey)
+                  && !/inpaint-mask-[^/]+\\.png/i.test(storageKey);
+              } catch {
+                return !/\\/temporary\\/inpaints\\/_inputs(?:\\/|$)/i.test(value)
+                  && !/\\/temporary\\/inpaint(?:-|\\/|$)/i.test(value)
+                  && !/\\/temporary\\/inpaint-masks(?:\\/|$)/i.test(value)
+                  && !/inpaint-mask-[^/]+\\.png/i.test(value);
+              }
+            });
+          }
+
+          function isInpaintHistoryEntry(entry) {
+            const templateId = String(entry?.linkedJob?.template_id || entry?.linkedJob?.templateId || "").toLowerCase();
+            const path = String(entry?.path || "").toLowerCase();
+            return templateId === "primitive:image_inpaint"
+              || path.includes("/primitives/images/inpaint")
+              || path.includes("/primitives/image_inpaint");
+          }
+
+          function historyItemKey(entry, url, index) {
+            return String(entry?.jobId || entry?.job_id || entry?.id || "inpaint") + ":" + index + ":" + String(url || "");
+          }
+
+          function setHistoryEmpty(message) {
+            historyList.innerHTML = "";
+            const empty = document.createElement("div");
+            empty.className = "custom-inpaint-history-empty";
+            empty.textContent = message;
+            historyList.append(empty);
+          }
+
+          function renderInpaintHistory() {
+            historyList.innerHTML = "";
+            const visible = inpaintHistoryItems.filter((item) => !hiddenInpaintHistoryKeys.has(item.key));
+            if (!visible.length) {
+              setHistoryEmpty("No inpaint outputs yet.");
+              return;
+            }
+            for (const item of visible) {
+              const row = document.createElement("div");
+              row.className = "custom-inpaint-history-item";
+              row.dataset.historyKey = item.key;
+              row.dataset.kind = item.kind;
+              let thumbButton;
+              if (item.kind === "pending") {
+                thumbButton = document.createElement("div");
+                thumbButton.className = "custom-inpaint-history-generating";
+                thumbButton.setAttribute("aria-label", "Image edit generating");
+                thumbButton.setAttribute("role", "img");
+              } else {
+                thumbButton = document.createElement("button");
+                thumbButton.type = "button";
+                thumbButton.className = "custom-inpaint-history-thumb-button";
+                thumbButton.dataset.historyPreview = item.key;
+                thumbButton.setAttribute("aria-label", "View inpaint output");
+                const thumb = document.createElement("img");
+                thumb.className = "custom-inpaint-history-thumb";
+                thumb.src = item.url;
+                thumb.alt = "Image edit output";
+                thumb.loading = "lazy";
+                thumbButton.append(thumb);
+              }
+              const meta = document.createElement("div");
+              meta.className = "custom-inpaint-history-meta";
+              const title = document.createElement("div");
+              title.className = "custom-inpaint-history-title";
+              title.textContent = item.kind === "pending"
+                ? "Generating inpaint"
+                : item.kind === "source"
+                ? (item.origin === "generated" ? "Generated starting image"
+                  : item.origin === "upload" ? "Uploaded starting image"
+                  : "Starting image")
+                : (item.createdAt ? new Date(item.createdAt).toLocaleString() : "Image edit output");
+              if (item.kind === "pending") {
+                const subtitle = document.createElement("div");
+                subtitle.className = "custom-inpaint-history-subtitle";
+                const progress = Number(item.progress || 0);
+                subtitle.textContent = "Job " + (item.status || "queued") + (progress > 0 ? " · " + Math.round(progress * 100) + "%" : "");
+                meta.append(title, subtitle);
+              } else if (item.kind === "source") {
+                const subtitle = document.createElement("div");
+                subtitle.className = "custom-inpaint-history-subtitle";
+                subtitle.textContent = "Where you started" + (item.createdAt ? " · " + new Date(item.createdAt).toLocaleString() : "");
+                meta.append(title, subtitle);
+              } else {
+                meta.append(title);
+              }
+              const actions = document.createElement("div");
+              actions.className = "custom-inpaint-history-actions";
+              if (item.kind === "pending") {
+                const check = document.createElement("button");
+                check.type = "button";
+                check.className = "custom-inpaint-history-check";
+                check.dataset.historyCheck = item.jobId || "";
+                check.textContent = "Check Status";
+                actions.append(check);
+              } else {
+                const download = document.createElement("a");
+                download.className = "custom-inpaint-history-icon";
+                download.href = item.url;
+                download.target = "_blank";
+                download.rel = "noopener noreferrer";
+                download.download = imageDownloadName("inpaint-history", item.createdAt);
+                download.setAttribute("aria-label", "Download inpaint output");
+                download.setAttribute("title", "Download");
+                download.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3v9"></path><path d="m6.5 8.5 3.5 3.5 3.5-3.5"></path><path d="M4 16h12"></path></svg>';
+                const copy = document.createElement("button");
+                copy.type = "button";
+                copy.className = "custom-inpaint-history-icon";
+                copy.dataset.historyCopy = item.key;
+                copy.setAttribute("aria-label", "Copy inpaint output URL");
+                copy.setAttribute("title", "Copy URL");
+                copy.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"></path><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"></path></svg>';
+                const save = document.createElement("button");
+                save.type = "button";
+                save.className = "custom-inpaint-history-icon";
+                save.dataset.historySave = item.key;
+                save.setAttribute("aria-label", "Save this output to My Files");
+                save.setAttribute("title", "Save to Files");
+                save.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h8l2 2v10H5z"></path><path d="M8 4v4h4V4"></path><path d="M8 12h4"></path></svg>';
+                actions.append(download, copy, save);
+              }
+              const remove = document.createElement("button");
+              remove.type = "button";
+              remove.className = "custom-inpaint-history-icon";
+              remove.dataset.historyRemove = item.key;
+              remove.setAttribute("aria-label", "Remove inpaint output from history strip");
+              remove.setAttribute("title", "Remove");
+              remove.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>';
+              actions.append(remove);
+              meta.append(actions);
+              const confirm = document.createElement("div");
+              confirm.className = "custom-inpaint-history-popconfirm";
+              confirm.hidden = true;
+              confirm.dataset.historyConfirm = item.key;
+              const confirmText = document.createElement("p");
+              confirmText.textContent = "Remove from this history strip?";
+              const confirmActions = document.createElement("div");
+              confirmActions.className = "custom-inpaint-history-popconfirm-actions";
+              const cancel = document.createElement("button");
+              cancel.type = "button";
+              cancel.dataset.historyCancel = item.key;
+              cancel.textContent = "Cancel";
+              const confirmRemove = document.createElement("button");
+              confirmRemove.type = "button";
+              confirmRemove.dataset.historyConfirmRemove = item.key;
+              confirmRemove.dataset.danger = "true";
+              confirmRemove.textContent = "Remove";
+              confirmActions.append(cancel, confirmRemove);
+              confirm.append(confirmText, confirmActions);
+              row.append(thumbButton, meta, confirm);
+              historyList.append(row);
+            }
+          }
+
+          function closeInpaintHistoryConfirms(exceptKey) {
+            historyList.querySelectorAll("[data-history-confirm]").forEach((entry) => {
+              if (!(entry instanceof HTMLElement)) return;
+              entry.hidden = exceptKey ? entry.dataset.historyConfirm !== exceptKey : true;
+            });
+          }
+
+          function extractInpaintHistoryItems(entries) {
+            const items = [];
+            const seen = new Set();
+            for (const entry of Array.isArray(entries) ? entries : []) {
+              if (!isInpaintHistoryEntry(entry)) continue;
+              const linkedJob = entry?.linkedJob || null;
+              if (linkedJob && isPendingJobStatus(linkedJob.status)) {
+                const pending = makePendingInpaintHistoryItem({
+                  job_id: linkedJob.job_id,
+                  status: linkedJob.status,
+                  progress: linkedJob.progress,
+                  created_at: linkedJob.created_at || entry.createdAt,
+                  updated_at: linkedJob.updated_at || entry.createdAt
+                });
+                if (pending && !seen.has(pending.key)) {
+                  seen.add(pending.key);
+                  items.push(pending);
+                }
+                continue;
+              }
+              historyEntryUrls(entry).forEach((rawUrl, index) => {
+                const url = absoluteUrl(rawUrl);
+                const key = historyItemKey(entry, url, index);
+                if (seen.has(key)) return;
+                seen.add(key);
+                items.push({
+                  key,
+                  kind: "output",
+                  jobId: String(entry?.jobId || entry?.job_id || entry?.linkedJob?.job_id || ""),
+                  url,
+                  createdAt: String(entry.createdAt || new Date().toISOString())
+                });
+              });
+            }
+            return items;
+          }
+
+          async function copyText(value) {
+            if (navigator.clipboard && window.isSecureContext) {
+              try {
+                await navigator.clipboard.writeText(value);
+                return true;
+              } catch {}
+            }
+            const field = document.createElement("textarea");
+            field.value = value;
+            field.setAttribute("readonly", "");
+            field.style.position = "fixed";
+            field.style.opacity = "0";
+            document.body.appendChild(field);
+            field.select();
+            let copied = false;
+            try {
+              copied = document.execCommand("copy");
+            } finally {
+              field.remove();
+            }
+            return copied;
+          }
+
+          async function loadInpaintHistory() {
+            const tracer = resolveTracer();
+            // Brand-new (unnamed) session: nothing on the server yet — just show any
+            // local starting image, without minting a random tracer.
+            if (!tracer) {
+              inpaintHistoryItems = [];
+              reinjectSourceHistoryItems();
+              renderInpaintHistory();
+              return;
+            }
+            historyRefresh.disabled = true;
+            try {
+              const endpoint = new URL("/job-runs/history", window.location.origin);
+              endpoint.searchParams.set("limit", "120");
+              endpoint.searchParams.set("template_id", "primitive:image_inpaint");
+              endpoint.searchParams.set("tracer", tracer);
+              const response = await fetch(endpoint, { credentials: "same-origin" });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok || (payload && payload.error)) throw new Error(payload.error || "Unable to load inpaint history.");
+              inpaintHistoryItems = extractInpaintHistoryItems(payload.entries);
+              reinjectSourceHistoryItems();
+              renderInpaintHistory();
+            } catch (error) {
+              console.error(error);
+              setHistoryEmpty(error instanceof Error ? error.message : "Unable to load inpaint history.");
+            } finally {
+              historyRefresh.disabled = false;
+            }
+          }
+
+          async function checkInpaintJobStatus(jobId, button) {
+            if (!jobId) return null;
+            if (button instanceof HTMLButtonElement) {
+              button.disabled = true;
+              button.textContent = "Checking";
+            }
+            try {
+              const response = await fetch("/api/v1/primitives/image_inpaint/jobs/" + encodeURIComponent(jobId), {
+                credentials: "same-origin"
+              });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok) throw new Error(payload.error || "Unable to check inpaint job.");
+              if (payload.status === "failed" || payload.status === "cancelled") {
+                const pending = makePendingInpaintHistoryItem(payload);
+                upsertInpaintHistoryItem({
+                  ...(pending || { key: pendingHistoryItemKey(jobId), kind: "pending", jobId, createdAt: new Date().toISOString() }),
+                  status: payload.status,
+                  progress: Number(payload.progress || 0)
+                });
+                throw new Error(payload.error?.message || "Image edit job " + payload.status + ".");
+              }
+              const outputUrl = extractOutputUrl(payload);
+              if (payload.status === "succeeded" || payload.status === "complete" || outputUrl) {
+                const url = applyCompletedInpaintJob(payload);
+                if (!url) throw new Error("Image edit completed without an output URL.");
+                setStatus("Image edit complete.", "success");
+                return payload;
+              }
+              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
+              setStatus("Image edit job " + jobId + " is " + (payload.status || "running") + ".", "");
+              return payload;
+            } catch (error) {
+              console.error(error);
+              setStatus(error instanceof Error ? error.message : "Unable to check inpaint job.", "error");
+              return null;
+            } finally {
+              if (button instanceof HTMLButtonElement) {
+                button.disabled = false;
+                button.textContent = "Check Status";
+              }
+            }
+          }
+
+          async function pollInpaintJob(jobId) {
+            for (let attempt = 0; attempt < 90; attempt += 1) {
+              const response = await fetch("/api/v1/primitives/image_inpaint/jobs/" + encodeURIComponent(jobId), {
+                credentials: "same-origin"
+              });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok) throw new Error(payload.error || "Unable to poll inpaint job.");
+              if (payload.status === "failed" || payload.status === "cancelled") {
+                throw new Error(payload.error?.message || "Image edit job " + payload.status + ".");
+              }
+              const outputUrl = extractOutputUrl(payload);
+              if (payload.status === "succeeded" || payload.status === "complete" || outputUrl) {
+                if (!outputUrl) throw new Error("Image edit completed without an output URL.");
+                applyCompletedInpaintJob(payload);
+                setStatus("Image edit complete.", "success");
+                return outputUrl;
+              }
+              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
+              setStatus("Image edit job " + jobId + " is " + (payload.status || "running") + ".", "");
+              await new Promise((resolve) => window.setTimeout(resolve, attempt < 8 ? 1500 : 3000));
+            }
+            upsertInpaintHistoryItem(makePendingInpaintHistoryItem({ job_id: jobId, status: "running" }));
+            setStatus("Image edit job is still running. Use Check Status in History.", "");
+            return null;
+          }
+
+          async function submitInpaintJob() {
+            if (!sourceImageUrl || inpaintSubmit.disabled) {
+              setStatus("Upload a source image first.", "error");
+              return;
+            }
+            if (!inpaintStrokes.length) {
+              setStatus("Paint at least one mask region.", "error");
+              return;
+            }
+            const usedColors = new Set(inpaintStrokes.map((stroke) => normalizeHexColor(stroke.color)));
+            const globalPrompt = inpaintGlobalPrompt.value.trim();
+            const missingPromptColor = inpaintMaskColors.find((entry) => usedColors.has(entry.color) && !String(entry.prompt || "").trim());
+            if (!globalPrompt && missingPromptColor) {
+              setStatus("Add a replacement prompt for " + missingPromptColor.color.toUpperCase() + ".", "error");
+              return;
+            }
+            const instruction = buildInpaintInstruction();
+            if (!instruction) {
+              setStatus("Add a replacement prompt for at least one color.", "error");
+              return;
+            }
+            setSubmitLoading(true);
+            uploadButton.disabled = true;
+            setStatus("Uploading masks...", "");
+            try {
+              const maskUrl = await uploadTemporaryBlob(await createProviderMaskBlob(), "inpaint-mask-" + Date.now() + ".png", "image/png");
+              const tracer = tracerAutoPending
+                ? nameTracerFromSeed(globalPrompt || (inpaintMaskColors.find((entry) => String(entry.prompt || "").trim()) || {}).prompt || "image-edit")
+                : getTracerValue();
+              setStatus("Creating image edit job...", "");
+              const response = await fetch("/api/v1/primitives/images/inpaint", {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({
+                  tracer,
+                  payload: {
+                    source_image_url: sourceImageUrl,
+                    mask_url: absoluteUrl(maskUrl),
+                    instruction,
+                    reference_attachments: inpaintAttachments.map((attachment) => attachment.url),
+                    ...(inpaintProviderSelect.value ? { provider: inpaintProviderSelect.value } : {}),
+                    size: "auto",
+                    ...(getInpaintAspectRatio() ? { aspect_ratio: getInpaintAspectRatio() } : {}),
+                    output_format: "png"
+                  }
+                })
+              });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok) throw new Error(payload.error || "Unable to create image edit job.");
+              setStatus("Image edit job " + (payload.job_id || "") + " started.", "success");
+              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
+              await pollInpaintJob(payload.job_id);
+              await loadInpaintHistory();
+              void loadTracerSessions();
+            } catch (error) {
+              console.error(error);
+              setStatus(error instanceof Error ? error.message : "Unable to create image edit.", "error");
+            } finally {
+              setSubmitLoading(false);
+              // Respect the post-generate lock — don't re-enable source upload if the
+              // job succeeded and froze the session.
+              uploadButton.disabled = sessionLocked;
+            }
+          }
+
+          renderInpaintControls();
+          void loadInpaintProviders();
+          initializeFromUrl();
+          void loadInpaintHistory();
+          uploadButton.addEventListener("click", () => fileInput.click());
+          historyRefresh.addEventListener("click", () => {
+            void loadInpaintHistory();
+          });
+          historyList.addEventListener("pointerdown", (event) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest("[data-history-confirm]")) {
+              event.stopPropagation();
+            }
+          });
+          historyList.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const confirmPopover = target.closest("[data-history-confirm]");
+            if (confirmPopover instanceof HTMLElement) {
+              event.stopPropagation();
+            }
+            const previewButton = target.closest("[data-history-preview]");
+            if (previewButton instanceof HTMLElement) {
+              const key = previewButton.dataset.historyPreview || "";
+              const item = inpaintHistoryItems.find((entry) => entry.key === key);
+              if (!item) return;
+              openImagePreview(item.url, item.createdAt ? new Date(item.createdAt).toLocaleString() : "Image edit output", imageDownloadName("image-edit-history", item.createdAt));
+              return;
+            }
+            const copyButton = target.closest("[data-history-copy]");
+            if (copyButton instanceof HTMLElement) {
+              const key = copyButton.dataset.historyCopy || "";
+              const item = inpaintHistoryItems.find((entry) => entry.key === key);
+              if (!item) return;
+              void copyText(item.url).then((copied) => {
+                copyButton.setAttribute("title", copied ? "Copied" : "Copy failed");
+                window.setTimeout(() => copyButton.setAttribute("title", "Copy URL"), 1200);
+              });
+              return;
+            }
+            const saveButton = target.closest("[data-history-save]");
+            if (saveButton instanceof HTMLElement) {
+              const key = saveButton.dataset.historySave || "";
+              const item = inpaintHistoryItems.find((entry) => entry.key === key);
+              if (item && item.url) saveMediaToFiles(item.url, imageDownloadName("inpaint-output", item.createdAt));
+              return;
+            }
+            const checkButton = target.closest("[data-history-check]");
+            if (checkButton instanceof HTMLButtonElement) {
+              void checkInpaintJobStatus(checkButton.dataset.historyCheck || "", checkButton);
+              return;
+            }
+            const removeButton = target.closest("[data-history-remove]");
+            if (removeButton instanceof HTMLElement) {
+              const key = removeButton.dataset.historyRemove || "";
+              const confirm = historyList.querySelector('[data-history-confirm="' + CSS.escape(key) + '"]');
+              const shouldOpen = !(confirm instanceof HTMLElement) || confirm.hidden;
+              closeInpaintHistoryConfirms();
+              if (confirm instanceof HTMLElement) {
+                confirm.hidden = !shouldOpen;
+              }
+              removeButton.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
+              return;
+            }
+            const cancelButton = target.closest("[data-history-cancel]");
+            if (cancelButton instanceof HTMLElement) {
+              const confirm = cancelButton.closest("[data-history-confirm]");
+              if (confirm instanceof HTMLElement) confirm.hidden = true;
+              return;
+            }
+            const confirmRemove = target.closest("[data-history-confirm-remove]");
+            if (confirmRemove instanceof HTMLElement) {
+              const key = confirmRemove.dataset.historyConfirmRemove || "";
+              if (key) {
+                hiddenInpaintHistoryKeys.add(key);
+                renderInpaintHistory();
+              }
+              return;
+            }
+          });
+          resultOpenButton.addEventListener("click", () => {
+            if (!resultImage.currentSrc && !resultImage.src) return;
+            openImagePreview(resultImage.currentSrc || resultImage.src, "Image edit result", imageDownloadName("image-edit-result"));
+          });
+          const resultSaveButton = document.querySelector("[data-custom-inpaint-save]");
+          if (resultSaveButton) {
+            resultSaveButton.addEventListener("click", () => {
+              const url = resultImage.currentSrc || resultImage.src;
+              if (!url) { setStatus("Generate an image first, then save it.", "error"); return; }
+              saveMediaToFiles(url, imageDownloadName("image-edit-result"));
+            });
+          }
+          lightboxCopy.addEventListener("click", () => {
+            const url = lightboxCopy.dataset.copyUrl || lightboxImage.currentSrc || lightboxImage.src || "";
+            if (!url) return;
+            void copyText(url).then((copied) => {
+              lightboxCopy.setAttribute("title", copied ? "Copied" : "Copy failed");
+              window.setTimeout(() => lightboxCopy.setAttribute("title", "Copy URL"), 1200);
+            });
+          });
+          lightboxClose.addEventListener("click", () => closeImagePreview());
+          lightbox.addEventListener("click", (event) => {
+            if (event.target === lightbox) closeImagePreview();
+          });
+          startNewButton.addEventListener("click", () => {
+            sessionTracer = "";
+            tracerAutoPending = true;
+            tracerInput.value = "";
+            clearInpaintUrlParams();
+            resetWorkspace();
+            void loadInpaintHistory();
+            void loadTracerSessions();
+            setStatus("New session — it will be named from your first prompt or upload.", "");
+          });
+          tracerInput.addEventListener("input", () => {
+            tracerAutoPending = !tracerInput.value.trim();
+            sessionTracer = tracerInput.value.trim();
+            queueInpaintHistoryReload();
+          });
+          fileInput.addEventListener("change", () => {
+            void loadSourceFile(fileInput.files && fileInput.files[0]);
+            fileInput.value = "";
+          });
+          inpaintAttachmentInput.addEventListener("change", () => {
+            void addAttachmentFiles(inpaintAttachmentInput.files);
+            inpaintAttachmentInput.value = "";
+          });
+          inpaintGlobalAttachments.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const removeColor = target.closest("[data-editor-inpaint-remove-color]");
+            if (removeColor instanceof HTMLElement && removeColor.dataset.editorInpaintRemoveColor) {
+              removeInpaintColor(removeColor.dataset.editorInpaintRemoveColor);
+              return;
+            }
+            const remove = target.closest("[data-editor-inpaint-remove-attachment]");
+            if (remove instanceof HTMLElement) {
+              inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
+              renderAllAttachmentChips();
+            }
+          });
+          document.querySelector('[data-editor-inpaint-attach-scope="global"]')?.addEventListener("click", () => {
+            openAttachmentPicker("global");
+          });
+          inpaintGlobalPrompt.addEventListener("paste", (event) => {
+            handleAttachmentPaste(event, "global");
+          });
+          inpaintUndo.addEventListener("click", () => {
+            const stroke = inpaintStrokes.pop();
+            if (stroke) redoStrokes.push(stroke);
+            redrawInpaintMask();
+            setStatus("", "");
+          });
+          inpaintRedo.addEventListener("click", () => {
+            const stroke = redoStrokes.pop();
+            if (stroke) inpaintStrokes.push(stroke);
+            redrawInpaintMask();
+            setStatus("", "");
+          });
+          inpaintClear.addEventListener("click", () => {
+            resetMask();
+            setStatus("", "");
+          });
+          inpaintBrush.addEventListener("input", () => {
+            inpaintBrushLabel.textContent = inpaintBrush.value;
+            updateBrushCursorSize();
+          });
+          inpaintColorPicker.addEventListener("input", () => {
+            activeInpaintColor = normalizeHexColor(inpaintColorPicker.value);
+            renderInpaintControls();
+          });
+          inpaintAddColor.addEventListener("click", () => addInpaintColor(inpaintColorPicker.value));
+          inpaintPrompts.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const remove = target.closest("[data-editor-inpaint-remove-attachment]");
+            if (remove instanceof HTMLElement) {
+              inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
+              renderAllAttachmentChips();
+              return;
+            }
+            const attach = target.closest("[data-editor-inpaint-attach-scope]");
+            if (attach instanceof HTMLElement && attach.dataset.editorInpaintAttachScope === "color" && attach.dataset.color) {
+              openAttachmentPicker("color", attach.dataset.color);
+              return;
+            }
+            const row = target.closest(".editor-inpaint-color-row");
+            if (row instanceof HTMLElement && row.dataset.color) selectInpaintColor(row.dataset.color);
+          });
+          inpaintPrompts.addEventListener("focusin", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const row = target.closest(".editor-inpaint-color-row");
+            if (row instanceof HTMLElement && row.dataset.color) selectInpaintColor(row.dataset.color);
+          });
+          inpaintPrompts.addEventListener("input", (event) => {
+            const target = event.target;
+            if (target instanceof HTMLTextAreaElement) updateInpaintPrompt(target.dataset.color || "", target.value);
+          });
+          inpaintPrompts.addEventListener("paste", (event) => {
+            const target = event.target;
+            if (target instanceof HTMLTextAreaElement && target.dataset.color) {
+              handleAttachmentPaste(event, "color", target.dataset.color);
+            }
+          });
+          inpaintCanvas.addEventListener("pointerenter", (event) => updateBrushCursorPosition(event));
+          inpaintCanvas.addEventListener("pointerdown", (event) => {
+            updateBrushCursorPosition(event);
+            beginInpaintStroke(event);
+          });
+          inpaintCanvas.addEventListener("pointermove", (event) => {
+            updateBrushCursorPosition(event);
+            continueInpaintStroke(event);
+          });
+          inpaintCanvas.addEventListener("pointerup", (event) => endInpaintStroke(event));
+          inpaintCanvas.addEventListener("pointercancel", (event) => {
+            endInpaintStroke(event);
+            hideBrushCursor();
+          });
+          inpaintCanvas.addEventListener("pointerleave", (event) => {
+            endInpaintStroke(event);
+            hideBrushCursor();
+          });
+          inpaintSubmit.addEventListener("click", () => {
+            void submitInpaintJob();
+          });
+          function openSettingsModal() {
+            settingsPopover.hidden = false;
+            document.body.style.overflow = "hidden";
+            window.setTimeout(() => tracerInput.focus(), 0);
+          }
+          function closeSettingsModal() {
+            settingsPopover.hidden = true;
+            if (!sessionsPanel || !sessionsPanel.classList.contains("is-open")) {
+              document.body.style.overflow = "";
+            }
+          }
+          settingsButton.addEventListener("click", () => {
+            if (settingsPopover.hidden) openSettingsModal(); else closeSettingsModal();
+          });
+          if (settingsClose) settingsClose.addEventListener("click", () => closeSettingsModal());
+          settingsPopover.addEventListener("click", (event) => {
+            if (event.target === settingsPopover) closeSettingsModal();
+          });
+
+          // ===== past-sessions (tracers) left panel ==================================
+          function openSessionsPanel() {
+            if (!sessionsPanel) return;
+            sessionsPanel.classList.add("is-open");
+            if (sessionsBackdrop) sessionsBackdrop.hidden = false;
+            document.body.style.overflow = "hidden";
+            void loadTracerSessions();
+          }
+          function closeSessionsPanel() {
+            if (!sessionsPanel) return;
+            sessionsPanel.classList.remove("is-open");
+            if (sessionsBackdrop) sessionsBackdrop.hidden = true;
+            if (settingsPopover.hidden) document.body.style.overflow = "";
+          }
+          function isImageSessionEntry(entry) {
+            const templateId = String(entry && entry.linkedJob && (entry.linkedJob.template_id || entry.linkedJob.templateId) || "").toLowerCase();
+            const path = String(entry && entry.path || "").toLowerCase();
+            return templateId.includes("image_inpaint")
+              || templateId.includes("image_generate")
+              || path.includes("/primitives/images/inpaint")
+              || path.includes("/primitives/image_inpaint")
+              || path.includes("/primitives/images/generate")
+              || path.includes("/primitives/image_generate");
+          }
+          function relTimeShort(value) {
+            const then = Date.parse(value || 0);
+            if (!then) return "";
+            const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
+            if (secs < 60) return "just now";
+            const mins = Math.floor(secs / 60);
+            if (mins < 60) return mins + "m ago";
+            const hours = Math.floor(mins / 60);
+            if (hours < 24) return hours + "h ago";
+            const days = Math.floor(hours / 24);
+            if (days < 7) return days + "d ago";
+            return new Date(then).toLocaleDateString();
+          }
+          function renderTracerSessions(groups, message) {
+            if (!sessionsList) return;
+            sessionsList.innerHTML = "";
+            if (message) {
+              const note = document.createElement("div");
+              note.className = "rk-ip-sessions-empty";
+              note.textContent = message;
+              sessionsList.append(note);
+              return;
+            }
+            if (!groups.length) {
+              const note = document.createElement("div");
+              note.className = "rk-ip-sessions-empty";
+              note.textContent = "No past sessions yet. Generate or edit an image to start one.";
+              sessionsList.append(note);
+              return;
+            }
+            const active = resolveTracer();
+            for (const group of groups) {
+              const isImage = group.kind === "image";
+              const row = document.createElement("button");
+              row.type = "button";
+              row.className = "rk-ip-session" + (!isImage && group.tracer === active ? " is-active" : "");
+              if (isImage) {
+                row.dataset.sessionImage = group.url;
+                row.title = "Load this image into a new edit session";
+              } else {
+                row.dataset.sessionTracer = group.tracer;
+              }
+              const thumbUrl = group.thumb || (isImage ? group.url : "");
+              if (thumbUrl) {
+                const thumb = document.createElement("img");
+                thumb.className = "rk-ip-session-thumb";
+                thumb.src = thumbUrl;
+                thumb.alt = "";
+                thumb.loading = "lazy";
+                row.append(thumb);
+              } else {
+                const ph = document.createElement("span");
+                ph.className = "rk-ip-session-thumb is-empty";
+                ph.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="m6 15 3-3 3 3 3-4 3 4"/></svg>';
+                row.append(ph);
+              }
+              const meta = document.createElement("div");
+              meta.className = "rk-ip-session-meta";
+              const title = document.createElement("div");
+              title.className = "rk-ip-session-title";
+              title.textContent = isImage ? (group.name || "Standalone image") : group.tracer;
+              const sub = document.createElement("div");
+              sub.className = "rk-ip-session-sub";
+              const when = relTimeShort(group.createdAt);
+              sub.textContent = isImage
+                ? "Standalone image — tap to edit" + (when ? " · " + when : "")
+                : (group.count ? group.count + " image" + (group.count === 1 ? "" : "s") : "session") + (when ? " · " + when : "");
+              meta.append(title, sub);
+              row.append(meta);
+              sessionsList.append(row);
+            }
+          }
+          let sessionsLoading = false;
+          async function loadTracerSessions() {
+            if (!sessionsList || sessionsLoading) return;
+            sessionsLoading = true;
+            try {
+              const endpoint = new URL("/job-runs/history", window.location.origin);
+              endpoint.searchParams.set("limit", "500");
+              const response = await fetch(endpoint, { credentials: "same-origin" });
+              const payload = await parseJsonResponse(response);
+              if (!response.ok || (payload && payload.error)) throw new Error((payload && payload.error) || "Unable to load sessions.");
+              const groups = new Map();
+              // Past image gens that carry NO session tracer (e.g. one-off generations
+              // from other surfaces) can't be reopened as a session, so surface each as
+              // a standalone image the user can load fresh into a new inpaint session.
+              const loose = [];
+              const looseSeen = new Set();
+              for (const entry of Array.isArray(payload.entries) ? payload.entries : []) {
+                if (!isImageSessionEntry(entry)) continue;
+                const urls = historyEntryUrls(entry);
+                const tracer = String(entry.tracer || "").trim();
+                if (!tracer) {
+                  for (const raw of urls) {
+                    let url = "";
+                    try { url = absoluteUrl(raw); } catch { continue; }
+                    if (looseSeen.has(url)) continue;
+                    looseSeen.add(url);
+                    loose.push({ kind: "image", url, thumb: url, name: sourceNameFromUrl(url), createdAt: entry.createdAt || "" });
+                  }
+                  continue;
+                }
+                let group = groups.get(tracer);
+                if (!group) { group = { kind: "session", tracer, thumb: "", count: 0, createdAt: entry.createdAt || "" }; groups.set(tracer, group); }
+                if (!group.thumb && urls[0]) { try { group.thumb = absoluteUrl(urls[0]); } catch {} }
+                group.count += urls.length;
+                if (Date.parse(entry.createdAt || 0) > Date.parse(group.createdAt || 0)) group.createdAt = entry.createdAt;
+              }
+              const list = Array.from(groups.values()).concat(loose)
+                .sort((a, b) => Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0));
+              renderTracerSessions(list);
+            } catch (error) {
+              console.error(error);
+              renderTracerSessions([], error instanceof Error ? error.message : "Unable to load sessions.");
+            } finally {
+              sessionsLoading = false;
+            }
+          }
+          function switchToTracer(tracer, sourceUrl) {
+            const value = String(tracer || "").trim();
+            if (!value) return;
+            clearInpaintUrlParams();
+            resetWorkspace();
+            sessionTracer = value;
+            tracerInput.value = value;
+            tracerAutoPending = false;
+            closeSessionsPanel();
+            void loadInpaintHistory();
+            void loadTracerSessions();
+            // Load this session's latest image straight onto the canvas so it's ready
+            // to paint/refine — reopening a session with a blank stage is useless.
+            if (sourceUrl) {
+              loadSourceUrl(sourceUrl, "history");
+              setStatus("Opened session " + value + " — paint mask regions to keep editing.", "success");
+            } else {
+              setStatus("Opened session " + value + ".", "");
+            }
+          }
+          // A past image gen with no session tracer: start a brand-new session and drop
+          // that image onto the editor as the source so it can be edited immediately.
+          function startSessionFromImage(url) {
+            const value = String(url || "").trim();
+            if (!value) return;
+            sessionTracer = "";
+            tracerAutoPending = true;
+            tracerInput.value = "";
+            clearInpaintUrlParams();
+            resetWorkspace();
+            closeSessionsPanel();
+            loadSourceUrl(value, "history");
+            void loadTracerSessions();
+            setStatus("New session started from that image — paint mask regions to edit it.", "success");
+          }
+          if (sessionsToggle) sessionsToggle.addEventListener("click", () => {
+            if (sessionsPanel && sessionsPanel.classList.contains("is-open")) closeSessionsPanel(); else openSessionsPanel();
+          });
+          if (sessionsClose) sessionsClose.addEventListener("click", () => closeSessionsPanel());
+          if (sessionsBackdrop) sessionsBackdrop.addEventListener("click", () => closeSessionsPanel());
+          if (sessionsList) sessionsList.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const imageRow = target.closest("[data-session-image]");
+            if (imageRow instanceof HTMLElement && imageRow.dataset.sessionImage) {
+              startSessionFromImage(imageRow.dataset.sessionImage);
+              return;
+            }
+            const row = target.closest("[data-session-tracer]");
+            if (row instanceof HTMLElement && row.dataset.sessionTracer) {
+              const thumb = row.querySelector("img.rk-ip-session-thumb");
+              switchToTracer(row.dataset.sessionTracer, thumb instanceof HTMLImageElement ? thumb.src : "");
+            }
+          });
+
+          window.addEventListener("click", (event) => {
+            const target = event.target;
+            if (!(target instanceof Node)) return;
+            const isHistoryConfirmTarget = target instanceof Element && Boolean(target.closest("[data-history-confirm]"));
+            if (!historyList.contains(target) && !isHistoryConfirmTarget) {
+              closeInpaintHistoryConfirms();
+            }
+          });
+          window.addEventListener("resize", () => syncInpaintCanvasSize());
+          window.addEventListener("keydown", (event) => {
+            if (event.key !== "Escape") return;
+            if (lightbox.getAttribute("data-open") === "true") { closeImagePreview(); return; }
+            if (!settingsPopover.hidden) { closeSettingsModal(); return; }
+            if (sessionsPanel && sessionsPanel.classList.contains("is-open")) { closeSessionsPanel(); return; }
+          });
+
+          // ===== text-to-image "Create Image" empty-state composer =====================
+          // Layered on top of the legacy inpaint logic; reuses its in-scope helpers
+          // (setStatus, loadSourceUrl, uploadTemporaryBlob, getTracerValue, parseJsonResponse,
+          // absoluteUrl, extractOutputUrl, inpaintProviderSelect). A generated image becomes
+          // the editable SOURCE so you can immediately paint to refine it.
+          var genPrompt = document.getElementById('rk-ip-genprompt');
+          var genClip = document.getElementById('rk-ip-genclip');
+          var genSend = document.getElementById('rk-ip-gensend');
+          var genRefsEl = document.getElementById('rk-ip-genrefs');
+          var genStatusEl = document.getElementById('rk-ip-genstatus');
+          var genWrap = document.getElementById('rk-ip-gen');
+          var GEN_SEND_HTML = genSend ? genSend.innerHTML : '';
+          var genRefs = [];
+          var genBusy = false;
+
+          function setGenStatus(m, t){ if(!genStatusEl) return; genStatusEl.textContent = m || ''; genStatusEl.setAttribute('data-tone', t || ''); }
+          function canGenNew(){ return Boolean((genPrompt && genPrompt.value || '').trim()) && !genBusy; }
+          function syncGenSend(){
+            if(genPrompt) genPrompt.disabled = genBusy;
+            if(genClip) genClip.disabled = genBusy;
+            if(!genSend) return;
+            genSend.disabled = !canGenNew();
+            genSend.classList.toggle('is-busy', genBusy);
+            genSend.innerHTML = genBusy ? '<span class="rk-ip-gen-spin" aria-hidden="true"></span>' : GEN_SEND_HTML;
+          }
+          function renderGenRefs(){
+            if(!genRefsEl) return;
+            genRefsEl.hidden = genRefs.length === 0;
+            genRefsEl.innerHTML = '';
+            genRefs.forEach(function(url, idx){
+              var chip = document.createElement('span'); chip.className = 'rk-ip-gen-ref';
+              var im = document.createElement('img'); im.src = url; im.alt = ''; im.loading = 'lazy'; chip.appendChild(im);
+              var lbl = document.createElement('span'); var nm = url.split('/').pop() || 'reference'; lbl.textContent = decodeURIComponent(nm).slice(0, 28); chip.appendChild(lbl);
+              var x = document.createElement('button'); x.type = 'button'; x.setAttribute('aria-label', 'Remove reference'); x.innerHTML = '&times;';
+              x.addEventListener('click', function(){ genRefs.splice(idx, 1); renderGenRefs(); }); chip.appendChild(x);
+              genRefsEl.appendChild(chip);
+            });
+          }
+
+          // Paperclip -> shared file-directory explorer (pop panel) to attach image refs.
+          var genFileModal = null;
+          function closeGenFilePanel(){ if(genFileModal){ try{ genFileModal._handle && genFileModal._handle.destroy && genFileModal._handle.destroy(); }catch(_){} genFileModal.remove(); genFileModal = null; document.removeEventListener('keydown', onGenFileEsc, true); } }
+          function onGenFileEsc(e){ if(e.key === 'Escape') closeGenFilePanel(); }
+          function openGenFilePanel(){
+            if(genFileModal) return;
+            var overlay = document.createElement('div'); overlay.className = 'rk-ip-filemodal';
+            var panel = document.createElement('div'); panel.className = 'rk-ip-filemodal-panel';
+            var head = document.createElement('div'); head.className = 'rk-ip-filemodal-head';
+            var title = document.createElement('span'); title.className = 'rk-ip-filemodal-title'; title.textContent = 'Attach reference images';
+            var close = document.createElement('button'); close.type = 'button'; close.className = 'rk-ip-filemodal-close'; close.setAttribute('aria-label', 'Close'); close.innerHTML = '&times;';
+            head.appendChild(title); head.appendChild(close);
+            var mountEl = document.createElement('div'); mountEl.className = 'rk-ip-filemodal-mount';
+            panel.appendChild(head); panel.appendChild(mountEl); overlay.appendChild(panel);
+            document.body.appendChild(overlay); genFileModal = overlay;
+            close.addEventListener('click', closeGenFilePanel);
+            overlay.addEventListener('click', function(e){ if(e.target === overlay) closeGenFilePanel(); });
+            document.addEventListener('keydown', onGenFileEsc, true);
+            if(window.__vidfarmDirectory && window.__vidfarmDirectory.mount){
+              genFileModal._handle = window.__vidfarmDirectory.mount(mountEl, {
+                mode: 'attach', showMultiSelect: true, primaryClick: 'attach',
+                onAttach: function(items){
+                  var added = 0;
+                  (items || []).forEach(function(it){
+                    var ct = (it.contentType || ''); var isImg = ct.indexOf('image/') === 0 || /\\.(png|jpe?g|gif|webp|svg|avif)$/i.test(it.name || '');
+                    if(it.viewUrl && isImg && genRefs.indexOf(it.viewUrl) === -1){ genRefs.push(it.viewUrl); added++; }
+                  });
+                  renderGenRefs();
+                  if(added){ setGenStatus(added + ' reference' + (added > 1 ? 's' : '') + ' attached.', 'success'); closeGenFilePanel(); }
+                  else setGenStatus('Pick an image file to use as a reference.', 'error');
+                }
+              });
+            } else {
+              mountEl.innerHTML = '<p style="padding:16px;color:var(--rk-text-muted);font-size:13px">File browser is unavailable right now.</p>';
+            }
+          }
+
+          function pollImageGenerateJob(jobId){
+            var attempt = 0;
+            function step(){
+              return fetch('/api/v1/primitives/image_generate/jobs/' + encodeURIComponent(jobId), { credentials: 'same-origin' }).then(function(r){
+                return parseJsonResponse(r).then(function(payload){
+                  if(!r.ok) throw new Error(payload.error || 'Unable to poll image job.');
+                  if(payload.status === 'failed' || payload.status === 'cancelled'){ throw new Error((payload.error && payload.error.message) || ('Image job ' + payload.status + '.')); }
+                  var out = extractOutputUrl(payload);
+                  if(payload.status === 'succeeded' || payload.status === 'complete' || out){
+                    if(!out) throw new Error('Image job completed without an output URL.');
+                    return absoluteUrl(out);
+                  }
+                  setGenStatus('Generating image (' + (payload.status || 'running') + ')\\u2026', '');
+                  attempt++;
+                  if(attempt >= 90){ setGenStatus('Still running \\u2014 check back shortly.', ''); return ''; }
+                  return new Promise(function(res){ setTimeout(res, attempt < 8 ? 1500 : 3000); }).then(step);
+                });
+              });
+            }
+            return step();
+          }
+
+          function submitGenerate(){
+            var p = (genPrompt && genPrompt.value || '').trim();
+            if(!p){ setGenStatus('Type a prompt to generate an image.', 'error'); if(genPrompt) genPrompt.focus(); return; }
+            if(genBusy) return;
+            genBusy = true; syncGenSend(); if(genWrap) genWrap.classList.add('is-busy');
+            setGenStatus('Creating image\\u2026', '');
+            var payload = { prompt: p, output_format: 'png' };
+            if(genRefs.length) payload.prompt_attachments = genRefs.slice();
+            if(inpaintProviderSelect && inpaintProviderSelect.value) payload.provider = inpaintProviderSelect.value;
+            var genTracer = tracerAutoPending ? nameTracerFromSeed(p) : getTracerValue();
+            if(tracerAutoPending === false){ void loadTracerSessions(); }
+            fetch('/api/v1/primitives/images/generate', {
+              method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ tracer: genTracer, payload: payload })
+            }).then(parseJsonResponse).then(function(j){
+              if(!j || !j.job_id){ throw new Error((j && j.error) || 'Unable to start image generation.'); }
+              setGenStatus('Generating image\\u2026', '');
+              return pollImageGenerateJob(j.job_id);
+            }).then(function(out){
+              if(out){ loadSourceUrl(out, 'generated'); setStatus('Generated image ready. Paint mask regions to refine, or download it.', 'success'); }
+            }).catch(function(err){
+              var msg = (err && err.message) ? err.message : 'Unable to generate image.';
+              if(/401|403|sign in|unauth/i.test(msg)) msg = 'Sign in to generate images.';
+              setGenStatus(msg, 'error');
+            }).then(function(){ genBusy = false; if(genWrap) genWrap.classList.remove('is-busy'); syncGenSend(); });
+          }
+
+          if(genPrompt){
+            genPrompt.addEventListener('input', syncGenSend);
+            genPrompt.addEventListener('keydown', function(e){ if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); submitGenerate(); } });
+          }
+          if(genClip) genClip.addEventListener('click', openGenFilePanel);
+          if(genSend) genSend.addEventListener('click', submitGenerate);
+          renderGenRefs();
+          syncGenSend();
+
+          // Drag-and-drop onto the upload dropzone (legacy only wired click).
+          var dropZone = document.querySelector('[data-custom-inpaint-upload]');
+          if(dropZone){
+            ['dragenter', 'dragover'].forEach(function(ev){ dropZone.addEventListener(ev, function(e){ e.preventDefault(); dropZone.classList.add('is-drag'); }); });
+            ['dragleave', 'drop'].forEach(function(ev){ dropZone.addEventListener(ev, function(e){ e.preventDefault(); dropZone.classList.remove('is-drag'); }); });
+            dropZone.addEventListener('drop', function(e){ var f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]; if(f) void loadSourceFile(f); });
+          }
 })();`;
     return reskinDocument({
         title: "vidfarm reskin — Create Image",
-        description: "Reskinned vidfarm masked image editor — upload, brush a mask, describe the edit, and generate on your own AI keys.",
+        description: "Reskinned vidfarm masked image editor — upload or generate, paint multi-color masks with per-color prompts, and generate on your own AI keys.",
         activeSlug: "inpaint",
         pageCss,
         body,