@officexapp/vidfarm-devcli 0.21.27 → 0.21.28

package/public/serve-shells/tools-image.html

@@ -1185,7 +1185,8 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .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: chat feed + composer */
+
+/* ---- shared chat surface (tools/image + tools/video) ---------------------- */
 .rk-ip-chat{display:grid;grid-template-rows:minmax(0,1fr) auto;height:min(76vh,860px);min-height:520px;overflow:hidden}
 .rk-ip-feed{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 6px;display:flex;flex-direction:column;gap:14px}
 .rk-ip-canvasholder{display:none}
@@ -1211,43 +1212,24 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-ip-turn.is-flash .rk-ip-bubble,.rk-ip-turn.is-flash .rk-ip-media-frame{box-shadow:0 0 0 3px var(--rk-gold-600)}
 .rk-ip-turn[data-kind="stopped"] .rk-ip-bubble{background:var(--rk-n-100);border-color:var(--rk-border-strong);color:var(--rk-text-muted);font-weight:700}
 .rk-ip-turn[data-kind="error"] .rk-ip-bubble{background:#fdf3f2;border-color:#e6a8a0;color:#b42318;font-weight:600}
-.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:34px 20px;margin:auto 0}
-.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}
-.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(52vh,520px);width:auto;height:auto;object-fit:contain;user-select:none}
-/* paint toolbar — sits directly under the image it paints, never over it */
-/* align-items:center keeps the canvas wrap at the image's intrinsic width — stretching
-   it would stretch the absolutely-positioned mask canvas and skew stroke coordinates. */
-.rk-ip-paintstack{display:inline-flex;flex-direction:column;align-items:center;max-width:100%}
-.rk-ip-painttools{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid var(--rk-border);background:var(--rk-n-50);line-height:1;flex-wrap:wrap}
-.rk-ip-painttools-brush{display:flex;align-items:center;gap:6px}
-.rk-ip-painttools-label{font-size:11px;font-weight:800;color:var(--rk-text-muted);white-space:nowrap}
-.rk-ip-painttools .rk-inpaint-range{width:86px}
-.rk-ip-painttool{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-700);cursor:pointer}
-.rk-ip-painttool:hover:not(:disabled){background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
-.rk-ip-painttool:disabled{opacity:.45;cursor:default}
-.rk-ip-painttool svg{width:13px;height:13px}
-.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}
 
-/* chat composer */
+/* ---- composer ------------------------------------------------------------ */
 .rk-ip-composer{flex:none;margin:0;padding:12px 18px 16px;border-top:1px solid var(--rk-border);background:var(--rk-surface);display:grid;gap:8px;
   border-bottom-left-radius:var(--rk-r-3xl);border-bottom-right-radius:var(--rk-r-3xl)}
 .rk-ip-composer.is-dragref{background:var(--rk-gold-tint)}
 .rk-ip-composer.is-busy .rk-ip-comp-status{color:var(--rk-gold-700)}
-.rk-ip-comp-input{width:100%;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:#fff;outline:0;resize:none;font:inherit;font-size:14px;line-height:1.45;
-  color:var(--rk-ink);min-height:56px;max-height:232px;overflow-y:hidden;padding:10px 12px;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+/* The grip is anchored to this wrapper, not the textarea, so it never scrolls
+   away with the textarea's own overflow once the message passes 10 rows. */
+.rk-ip-comp-field{position:relative;display:block}
+.rk-ip-comp-input{display:block;width:100%;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:#fff;outline:0;resize:none;font:inherit;font-size:14px;line-height:1.45;
+  color:var(--rk-ink);min-height:56px;overflow-y:hidden;padding:10px 12px;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
 .rk-ip-comp-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
 .rk-ip-comp-input::placeholder{color:var(--rk-text-faint)}
 .rk-ip-comp-input:disabled{cursor:not-allowed;color:var(--rk-text-muted);background:var(--rk-n-50)}
+.rk-ip-comp-grip{position:absolute;right:5px;bottom:5px;width:16px;height:16px;display:grid;place-items:center;color:var(--rk-n-400);cursor:ns-resize;touch-action:none;
+  border-radius:4px;opacity:.75;transition:color var(--rk-dur) var(--rk-ease),opacity var(--rk-dur) var(--rk-ease)}
+.rk-ip-comp-grip:hover,.rk-ip-comp-field.is-resizing .rk-ip-comp-grip{color:var(--rk-gold-700);opacity:1}
+.rk-ip-comp-field.is-resizing{user-select:none}
 .rk-ip-comp-bar{display:flex;align-items:center;gap:8px}
 .rk-ip-comp-modeselect{appearance:none;-webkit-appearance:none;border:1px solid var(--rk-border-strong);border-radius:999px;background:var(--rk-n-50);color:var(--rk-ink);
   font:inherit;font-size:12px;font-weight:800;padding:7px 26px 7px 12px;cursor:pointer;outline:0;
@@ -1261,10 +1243,8 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
   font-size:11.5px;font-weight:700;color:var(--rk-gold-700);justify-self:start;max-width:100%}
 .rk-ip-comp-mask[hidden]{display:none}
 .rk-ip-comp-mask button{border:0;background:transparent;color:inherit;font:inherit;font-size:11.5px;font-weight:800;text-decoration:underline;cursor:pointer;padding:0}
-.rk-ip-gen-clip:disabled{opacity:.5;cursor:not-allowed}
-.rk-ip-gen-presets{display:flex;flex-wrap:wrap;gap:6px}
-.rk-ip-preset{flex:none;border:1px dashed var(--rk-border-strong,var(--rk-border));background:var(--rk-n-50);color:var(--rk-n-700);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight: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-preset:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+
+/* ---- attachment chips ---------------------------------------------------- */
 .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}
@@ -1272,25 +1252,25 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .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-ref.is-pending{opacity:.6}
 .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-clip:disabled{opacity:.5;cursor:not-allowed}
 .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[data-mode="stop"]{background:var(--rk-ink);color:#fff}
-.rk-ip-gen-send[data-mode="stop"]:hover{background:#000}
-.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[hidden]{display:none}
 .rk-ip-gen-status[data-tone="error"]{color:#b42318}
 .rk-ip-gen-status[data-tone="success"]{color:#1f7a44}
+.rk-ip-gen-presets{display:flex;flex-wrap:wrap;gap:6px}
+.rk-ip-preset{flex:none;border:1px dashed var(--rk-border-strong,var(--rk-border));background:var(--rk-n-50);color:var(--rk-n-700);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight: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-preset:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
 
-/* file-directory pop panel (reference picker) */
+/* ---- attach pop panel (shared file explorer) ----------------------------- */
 .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)}
@@ -1301,6 +1281,37 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .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}
+@keyframes rk-ip-spin{to{transform:rotate(360deg)}}
+@keyframes rk-ip-fade{from{opacity:0}to{opacity:1}}
+@media(max-width:820px){.rk-ip-chat{height:auto;min-height:0}.rk-ip-feed{max-height:62vh}}
+
+.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:34px 20px;margin:auto 0}
+.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}
+.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(52vh,520px);width:auto;height:auto;object-fit:contain;user-select:none}
+/* paint toolbar — sits directly under the image it paints, never over it */
+/* align-items:center keeps the canvas wrap at the image's intrinsic width — stretching
+   it would stretch the absolutely-positioned mask canvas and skew stroke coordinates. */
+.rk-ip-paintstack{display:inline-flex;flex-direction:column;align-items:center;max-width:100%}
+.rk-ip-painttools{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid var(--rk-border);background:var(--rk-n-50);line-height:1;flex-wrap:wrap}
+.rk-ip-painttools-brush{display:flex;align-items:center;gap:6px}
+.rk-ip-painttools-label{font-size:11px;font-weight:800;color:var(--rk-text-muted);white-space:nowrap}
+.rk-ip-painttools .rk-inpaint-range{width:86px}
+.rk-ip-painttool{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-700);cursor:pointer}
+.rk-ip-painttool:hover:not(:disabled){background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-painttool:disabled{opacity:.45;cursor:default}
+.rk-ip-painttool svg{width:13px;height:13px}
+.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}
+
 
 /* right: result + history */
 .rk-inpaint-output{padding:18px;display:grid;gap:18px;align-content:start}
@@ -1457,7 +1468,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     <div class="rk-inpaint-head-text">
       <div class="rk-ip-tabs" role="tablist" aria-label="Editor mode"><a class="rk-ip-tab is-active" href="/tools/image" role="tab" aria-selected="true"><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><span>Image</span></a><a class="rk-ip-tab" href="/tools/video" role="tab" aria-selected="false"><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><span>Video</span></a><a class="rk-ip-tab" href="/tools/clipper" role="tab" aria-selected="false"><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><span>Clipper</span></a></div>
       <h1 class="rk-h1">Create Image</h1>
-      <p class="rk-sub">Chat to create an image, then keep chatting to refine it — every message edits the newest image, and only that image, so instructions stay sharp. Paint a mask on it to change only that region, or switch the composer to Video to animate it.</p>
+      <p class="rk-sub">Chat to create an image, then keep chatting to refine it — every message edits the newest image, and only that image, so instructions stay sharp. Paint a mask on it to change only that region. To animate an image, take it to the Video tool.</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><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> Start New</button>
@@ -1516,7 +1527,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
         <div class="rk-inpaint-empty" data-custom-inpaint-empty>
           <span class="rk-inpaint-empty-ic" aria-hidden="true"><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></span>
           <p class="rk-inpaint-empty-title">Describe the image you want</p>
-          <p class="rk-inpaint-empty-sub">Then keep chatting to refine it — every message edits the newest image. Paint a mask on it first to edit just that region, or switch the composer to Video to animate it.</p>
+          <p class="rk-inpaint-empty-sub">Then keep chatting to refine it — every message edits the newest image. Paint a mask on it first to edit just that region.</p>
           <div class="rk-ip-gen-presets" id="rk-ip-genpresets">
             <button type="button" class="rk-ip-preset" data-preset="character-card" title="Fill the prompt with a character reference sheet (multi-angle, expressions, poses)">＋ Character card</button>
             <button type="button" class="rk-ip-preset" data-preset="storyboard" title="Fill the prompt with a numbered storyboard (sequential shot panels)">＋ Storyboard</button>
@@ -1548,16 +1559,14 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
       <div class="rk-ip-composer" data-ip-composer>
         <div class="rk-ip-comp-mask" data-ip-comp-mask hidden></div>
         <div class="rk-ip-gen-refs" id="rk-ip-genrefs" hidden></div>
-        <textarea id="rk-ip-genprompt" class="rk-ip-comp-input" rows="2" placeholder="Describe the image you want…"></textarea>
+        <div class="rk-ip-comp-field">
+          <textarea id="rk-ip-genprompt" class="rk-ip-comp-input" rows="2" placeholder="Describe the image you want…"></textarea>
+          <span class="rk-ip-comp-grip" data-ip-grip role="separator" aria-label="Drag to resize the message box" title="Drag to resize"><svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M11 4 4 11"/><path d="M11 8.5 8.5 11"/></svg></span>
+        </div>
         <div class="rk-ip-comp-bar">
-          <span class="rk-ip-comp-mode" data-ip-mode-wrap>
-            <select class="rk-ip-comp-modeselect" data-ip-mode aria-label="What to create">
-              <option value="image">Image</option>
-              <option value="video">Video</option>
-            </select>
-          </span>
+          
           <button type="button" class="rk-ip-gen-clip" id="rk-ip-genclip" aria-label="Attach reference images from your files" title="Attach reference images"><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></button>
-          <p class="custom-inpaint-status rk-ip-comp-status" data-custom-inpaint-status data-tone="" aria-live="polite"></p>
+          <p class="rk-ip-comp-status custom-inpaint-status" data-ip-status data-custom-inpaint-status data-tone="" aria-live="polite"></p>
           <button type="button" class="rk-ip-gen-send" id="rk-ip-gensend" aria-label="Send"><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></button>
         </div>
         <p class="rk-ip-gen-status" id="rk-ip-genstatus" data-tone="" aria-live="polite" hidden></p>
@@ -1718,6 +1727,282 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 </aside>
 </div>
 <script>
+
+(function(){
+  var IMAGE_RE = /\.(png|jpe?g|gif|webp|avif)$/i;
+  var 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>";
+  var STOP_ICON = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"5\" y=\"5\" width=\"10\" height=\"10\" rx=\"2\"/></svg>";
+  var MAX_ROWS = 10;
+
+  function isImageFile(f){ return /^image\//i.test((f && f.type) || '') || IMAGE_RE.test((f && f.name) || ''); }
+  function imagesFromClipboard(e){
+    var items = (e.clipboardData && e.clipboardData.items) || [], out = [];
+    for(var i = 0; i < items.length; i++){
+      if(items[i].kind === 'file'){ var f = items[i].getAsFile(); if(f && /^image\//i.test(f.type || '')) out.push(f); }
+    }
+    return out;
+  }
+  function dtHasFiles(e){
+    var t = (e.dataTransfer && e.dataTransfer.types) || [];
+    return Array.prototype.indexOf.call(t, 'Files') !== -1;
+  }
+  function plural(n, word){ return n + ' ' + word + (n > 1 ? 's' : ''); }
+
+  window.__rkChatComposer = function(cfg){
+    cfg = cfg || {};
+    var root = cfg.root, ta = cfg.textarea, refsEl = cfg.refsEl;
+    var sendBtn = cfg.sendBtn, clipBtn = cfg.clipBtn;
+    var uploadBlob = cfg.uploadBlob || function(){ return Promise.reject(new Error('Uploads are unavailable.')); };
+    var status = cfg.onStatus || function(){};
+    var canSendExtra = cfg.canSend || function(){ return false; };
+    var refs = [];
+    var busy = false;
+    // Once the user drags the grip, their height wins: auto-grow stops fighting
+    // them. Sending clears it so the next message starts compact again.
+    var manualHeight = 0;
+
+    // ---- height ------------------------------------------------------------
+    function maxHeight(){
+      if(!ta) return 0;
+      var s = window.getComputedStyle(ta);
+      var line = parseFloat(s.lineHeight) || 20;
+      var pad = (parseFloat(s.paddingTop) || 0) + (parseFloat(s.paddingBottom) || 0)
+        + (parseFloat(s.borderTopWidth) || 0) + (parseFloat(s.borderBottomWidth) || 0);
+      return Math.round(line * MAX_ROWS + pad);
+    }
+    function applyHeight(px, cap){
+      ta.style.height = px + 'px';
+      ta.style.overflowY = ta.scrollHeight > px + 1 ? 'auto' : (cap ? 'auto' : 'hidden');
+    }
+    function autoGrow(){
+      if(!ta) return;
+      if(manualHeight){ applyHeight(manualHeight, true); return; }
+      var max = maxHeight();
+      ta.style.height = 'auto';
+      applyHeight(Math.min(max, Math.max(56, ta.scrollHeight)), ta.scrollHeight > max);
+    }
+    function resetHeight(){ manualHeight = 0; if(ta){ ta.style.height = 'auto'; } autoGrow(); }
+
+    // Corner grip: pointer-drag the textarea taller/shorter. Bounded so it can
+    // never collapse under one row or grow past the viewport.
+    var field = ta && ta.parentElement;
+    var grip = root && root.querySelector('[data-ip-grip]');
+    if(grip && ta){
+      grip.addEventListener('pointerdown', function(e){
+        e.preventDefault();
+        var startY = e.clientY, startH = ta.getBoundingClientRect().height;
+        var maxPx = Math.max(120, Math.round(window.innerHeight * 0.6));
+        try{ grip.setPointerCapture(e.pointerId); }catch(_){}
+        if(field) field.classList.add('is-resizing');
+        function move(ev){
+          var next = Math.min(maxPx, Math.max(56, Math.round(startH + (ev.clientY - startY))));
+          manualHeight = next;
+          applyHeight(next, true);
+        }
+        function up(ev){
+          try{ grip.releasePointerCapture(e.pointerId); }catch(_){}
+          if(field) field.classList.remove('is-resizing');
+          grip.removeEventListener('pointermove', move);
+          grip.removeEventListener('pointerup', up);
+          grip.removeEventListener('pointercancel', up);
+          // A click with no travel resets to auto-grow — an escape hatch out of
+          // a height you dragged and no longer want.
+          if(Math.abs(ev.clientY - startY) < 3) resetHeight();
+        }
+        grip.addEventListener('pointermove', move);
+        grip.addEventListener('pointerup', up);
+        grip.addEventListener('pointercancel', up);
+      });
+      grip.addEventListener('dblclick', function(){ resetHeight(); });
+    }
+
+    // ---- send / stop button ------------------------------------------------
+    function syncSend(){
+      if(!sendBtn) return;
+      if(busy){
+        sendBtn.disabled = false;
+        sendBtn.dataset.mode = 'stop';
+        sendBtn.setAttribute('aria-label', 'Stop generating');
+        sendBtn.setAttribute('title', 'Stop generating');
+        sendBtn.innerHTML = STOP_ICON;
+        return;
+      }
+      sendBtn.dataset.mode = 'send';
+      sendBtn.setAttribute('aria-label', 'Send');
+      sendBtn.setAttribute('title', 'Send');
+      sendBtn.disabled = !(Boolean((ta && ta.value || '').trim()) || canSendExtra());
+      sendBtn.innerHTML = SEND_ICON;
+    }
+    function setBusy(v){
+      busy = Boolean(v);
+      if(root) root.classList.toggle('is-busy', busy);
+      syncSend();
+    }
+
+    // ---- reference chips ---------------------------------------------------
+    function renderRefs(){
+      if(!refsEl) return;
+      refsEl.hidden = refs.length === 0;
+      refsEl.innerHTML = '';
+      refs.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(){ refs.splice(idx, 1); renderRefs(); });
+        chip.appendChild(x);
+        refsEl.appendChild(chip);
+      });
+    }
+
+    // Paste or drop image files straight into the composer -> temp upload -> ref.
+    function addFiles(fileList){
+      var files = Array.prototype.slice.call(fileList || []).filter(isImageFile);
+      if(!files.length) return Promise.resolve(0);
+      status('Uploading ' + plural(files.length, 'reference') + '\u2026', '');
+      var added = 0;
+      return files.reduce(function(chain, f){
+        return chain.then(function(){
+          return uploadBlob(f, f.name || 'pasted-image.png', f.type || 'image/png').then(function(url){
+            if(url && refs.indexOf(url) === -1){ refs.push(url); added++; renderRefs(); }
+          });
+        });
+      }, Promise.resolve()).then(function(){
+        if(added) status(plural(added, 'reference') + ' attached.', 'success');
+        return added;
+      }).catch(function(err){
+        status((err && err.message) ? err.message : 'Upload failed.', 'error');
+        return added;
+      });
+    }
+
+    // ---- attach pop panel (shared file-directory explorer) -----------------
+    var modal = null;
+    function onEsc(e){ if(e.key === 'Escape') closePanel(); }
+    function closePanel(){
+      if(!modal) return;
+      try{ modal._handle && modal._handle.destroy && modal._handle.destroy(); }catch(_){}
+      modal.remove(); modal = null;
+      document.removeEventListener('keydown', onEsc, true);
+    }
+    function openPanel(){
+      if(modal) 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 = cfg.attachTitle || 'Attach reference images';
+      var actions = document.createElement('div'); actions.className = 'rk-ip-filemodal-actions';
+      var uploadBtn = document.createElement('button'); uploadBtn.type = 'button';
+      uploadBtn.className = 'rk-ip-filemodal-upload'; uploadBtn.textContent = '\u2191 Upload from computer';
+      var uploadInput = document.createElement('input'); uploadInput.type = 'file';
+      uploadInput.accept = 'image/png,image/jpeg,image/webp,image/gif,image/avif';
+      uploadInput.multiple = true; uploadInput.hidden = true;
+      var close = document.createElement('button'); close.type = 'button';
+      close.className = 'rk-ip-filemodal-close'; close.setAttribute('aria-label', 'Close'); close.innerHTML = '&times;';
+      actions.appendChild(uploadBtn); actions.appendChild(close);
+      head.appendChild(title); head.appendChild(actions); head.appendChild(uploadInput);
+      uploadBtn.addEventListener('click', function(){ if(!uploadBtn.disabled) uploadInput.click(); });
+      uploadInput.addEventListener('change', function(){
+        var files = Array.prototype.slice.call(uploadInput.files || []).filter(isImageFile);
+        uploadInput.value = '';
+        if(!files.length){ status('Pick an image file to upload as a reference.', 'error'); return; }
+        var original = uploadBtn.textContent;
+        uploadBtn.disabled = true; uploadBtn.textContent = 'Uploading\u2026';
+        addFiles(files).then(function(added){
+          uploadBtn.disabled = false; uploadBtn.textContent = original;
+          if(added) closePanel();
+          else status('Those files were already attached.', '');
+        });
+      });
+      var mountEl = document.createElement('div'); mountEl.className = 'rk-ip-filemodal-mount';
+      panel.appendChild(head); panel.appendChild(mountEl); overlay.appendChild(panel);
+      document.body.appendChild(overlay); modal = overlay;
+      close.addEventListener('click', closePanel);
+      overlay.addEventListener('click', function(e){ if(e.target === overlay) closePanel(); });
+      document.addEventListener('keydown', onEsc, true);
+      if(window.__vidfarmDirectory && window.__vidfarmDirectory.mount){
+        modal._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 && refs.indexOf(it.viewUrl) === -1){ refs.push(it.viewUrl); added++; }
+            });
+            renderRefs();
+            if(added){ status(plural(added, 'reference') + ' attached.', 'success'); closePanel(); }
+            else status('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>';
+      }
+    }
+
+    // ---- wiring ------------------------------------------------------------
+    if(ta){
+      ta.addEventListener('input', function(){ autoGrow(); syncSend(); });
+      ta.addEventListener('keydown', function(e){
+        if(e.key !== 'Enter' || e.shiftKey) return;
+        e.preventDefault();
+        // Enter is ignored mid-turn so an impatient double-send cannot queue a
+        // second job; the draft stays put.
+        if(busy) return;
+        if(cfg.onSend) cfg.onSend();
+      });
+      ta.addEventListener('paste', function(e){
+        var imgs = imagesFromClipboard(e);
+        if(imgs.length){ e.preventDefault(); addFiles(imgs); }
+      });
+    }
+    if(clipBtn) clipBtn.addEventListener('click', openPanel);
+    if(sendBtn) sendBtn.addEventListener('click', function(){
+      if(busy){ if(cfg.onStop) cfg.onStop(); return; }
+      if(cfg.onSend) cfg.onSend();
+    });
+    if(root){
+      ['dragenter', 'dragover'].forEach(function(ev){
+        root.addEventListener(ev, function(e){
+          if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); root.classList.add('is-dragref'); }
+        });
+      });
+      ['dragleave', 'dragend'].forEach(function(ev){
+        root.addEventListener(ev, function(){ root.classList.remove('is-dragref'); });
+      });
+      root.addEventListener('drop', function(e){
+        if(!dtHasFiles(e)) return;
+        e.preventDefault(); e.stopPropagation();
+        root.classList.remove('is-dragref');
+        addFiles(e.dataTransfer.files);
+      });
+    }
+
+    autoGrow();
+    syncSend();
+
+    return {
+      refs: function(){ return refs.slice(); },
+      setRefs: function(list){ refs = (list || []).slice(); renderRefs(); },
+      clearRefs: function(){ refs = []; renderRefs(); },
+      addFiles: addFiles,
+      renderRefs: renderRefs,
+      autoGrow: autoGrow,
+      resetHeight: resetHeight,
+      setBusy: setBusy,
+      isBusy: function(){ return busy; },
+      syncSend: syncSend,
+      closePanel: closePanel,
+      setPlaceholder: function(s){ if(ta) ta.placeholder = s; }
+    };
+  };
+})();
+
 (function(){
           const uploadButton = document.querySelector("[data-custom-inpaint-upload]");
           const startNewButton = document.querySelector("[data-custom-inpaint-start-new]");
@@ -1771,7 +2056,6 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           const chatFeed = document.querySelector("[data-ip-feed]");
           const canvasHolder = document.querySelector("[data-ip-canvas-holder]");
           const composerEl = document.querySelector("[data-ip-composer]");
-          const modeSelect = document.querySelector("[data-ip-mode]");
           const maskBlock = document.querySelector("[data-ip-mask-block]");
           const maskChip = document.querySelector("[data-ip-comp-mask]");
           const paintStack = document.querySelector("[data-ip-paint-stack]");
@@ -1818,7 +2102,6 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             || !(chatFeed instanceof HTMLElement)
             || !(canvasHolder instanceof HTMLElement)
             || !(composerEl instanceof HTMLElement)
-            || !(modeSelect instanceof HTMLSelectElement)
             || !(maskBlock instanceof HTMLElement)
             || !(maskChip instanceof HTMLElement)
             || !(paintStack instanceof HTMLElement)) {
@@ -3074,7 +3357,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
               return;
             }
             // Never stomp on a turn that is mid-flight locally.
-            if (genBusy || activeTurnId) { syncSessionAssets(); return; }
+            if (isGenBusy() || activeTurnId) { syncSessionAssets(); return; }
             historyRefresh.disabled = true;
             try {
               const endpoint = new URL("/job-runs/history", window.location.origin);
@@ -3711,41 +3994,36 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           var genSend = document.getElementById('rk-ip-gensend');
           var genRefsEl = document.getElementById('rk-ip-genrefs');
           var genStatusEl = document.getElementById('rk-ip-genstatus');
-          var genWrap = composerEl;
-          var GEN_SEND_HTML = genSend ? genSend.innerHTML : '';
-          var genRefs = [];
-          var genBusy = false;
+          // The composer itself — auto-grow, the drag-to-resize grip, reference chips,
+          // paste/drop, and the attach pop panel — is the shared implementation from
+          // chat-composer.ts, byte-identical to the one on /tools/video.
+          var composer = window.__rkChatComposer({
+            root: composerEl,
+            textarea: genPrompt,
+            refsEl: genRefsEl,
+            sendBtn: genSend,
+            clipBtn: genClip,
+            attachTitle: "Attach reference images",
+            uploadBlob: function(f, name, type){ return uploadTemporaryBlob(f, name, type); },
+            onStatus: function(m, t){ setStatus(m, t); },
+            canSend: function(){ return maskHasInstruction(); },
+            onSend: function(){ sendChatMessage(); },
+            onStop: function(){ stopActiveTurn(); }
+          });
+          // Aliases so the rest of the page keeps its original call sites.
+          function isGenBusy(){ return Boolean(composer && composer.isBusy()); }
+          function renderGenRefs(){ composer.renderRefs(); }
+          function autoGrowComposer(){ composer.autoGrow(); }
+          function addGenReferenceFiles(fl){ return composer.addFiles(fl); }
+          function closeGenFilePanel(){ composer.closePanel(); }
+          function syncGenSend(){ composer.syncSend(); }
+          function setGenBusy(v){ composer.setBusy(v); }
 
           // One status line for the whole surface — the composer's.
           function setGenStatus(m, t){ setStatus(m, t); }
           function maskHasInstruction(){
             return inpaintStrokes.length > 0 && inpaintMaskColors.some(function(entry){ return String(entry.prompt || '').trim(); });
           }
-          function canGenNew(){ return !genBusy && (Boolean((genPrompt && genPrompt.value || '').trim()) || maskHasInstruction()); }
-          // While a turn is in flight the composer stays fully usable — you can keep
-          // typing the next message, attach references, and scroll the history. The send
-          // button turns into Stop, which cancels the running job.
-          function syncGenSend(){
-            if(!genSend) return;
-            if(genBusy){
-              genSend.disabled = false;
-              genSend.dataset.mode = 'stop';
-              genSend.setAttribute('aria-label', 'Stop generating');
-              genSend.setAttribute('title', 'Stop generating');
-              genSend.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"5\" y=\"5\" width=\"10\" height=\"10\" rx=\"2\"/></svg>";
-              return;
-            }
-            genSend.dataset.mode = 'send';
-            genSend.setAttribute('aria-label', 'Send');
-            genSend.setAttribute('title', 'Send');
-            genSend.disabled = !canGenNew();
-            genSend.innerHTML = GEN_SEND_HTML;
-          }
-          function setGenBusy(value){
-            genBusy = Boolean(value);
-            composerEl.classList.toggle('is-busy', genBusy);
-            syncGenSend();
-          }
 
           // ---- stop --------------------------------------------------------------
           // Stop aborts the client poll AND best-effort cancels the job server-side so a
@@ -3755,7 +4033,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           function stopError(){ var e = new Error('__vidfarm_stopped__'); e.stopped = true; return e; }
           function throwIfStopped(){ if(stopRequested) throw stopError(); }
           function stopActiveTurn(){
-            if(!genBusy || stopRequested) return;
+            if(!isGenBusy() || stopRequested) return;
             stopRequested = true;
             setStatus('Stopping…', '');
             if(activeTurnId) updatePendingLabel(activeTurnId, 'Stopping…');
@@ -3767,129 +4045,11 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           }
           function composerPlaceholder(){
             if(!genPrompt) return;
-            genPrompt.placeholder = modeSelect.value === 'video'
-              ? (sourceImageUrl ? 'Describe the video \u2014 the newest image is used as its opening frame\u2026' : 'Describe the video you want\u2026')
-              : (sourceImageUrl ? (inpaintStrokes.length ? 'Describe the masked edit (whole-image guidance)\u2026' : 'Describe the next edit to the newest image\u2026') : 'Describe the image you want\u2026');
-          }
-          // Grows with the message up to 10 rows, then scrolls inside itself.
-          var COMPOSER_MAX_ROWS = 10;
-          function composerMaxHeight(){
-            if(!genPrompt) return 0;
-            var styles = window.getComputedStyle(genPrompt);
-            var line = parseFloat(styles.lineHeight) || 20;
-            var pad = (parseFloat(styles.paddingTop) || 0) + (parseFloat(styles.paddingBottom) || 0)
-              + (parseFloat(styles.borderTopWidth) || 0) + (parseFloat(styles.borderBottomWidth) || 0);
-            return Math.round(line * COMPOSER_MAX_ROWS + pad);
-          }
-          function autoGrowComposer(){
-            if(!genPrompt) return;
-            var max = composerMaxHeight();
-            genPrompt.style.height = 'auto';
-            genPrompt.style.height = Math.min(max, Math.max(56, genPrompt.scrollHeight)) + 'px';
-            genPrompt.style.overflowY = genPrompt.scrollHeight > max ? 'auto' : 'hidden';
-          }
-          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);
-            });
+            genPrompt.placeholder = sourceImageUrl
+              ? (inpaintStrokes.length ? 'Describe the masked edit (whole-image guidance)\u2026' : 'Describe the next edit to the newest image\u2026')
+              : 'Describe the image you want\u2026';
           }
 
-          // 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 headActions = document.createElement('div'); headActions.className = 'rk-ip-filemodal-actions';
-            var uploadBtn = document.createElement('button'); uploadBtn.type = 'button'; uploadBtn.className = 'rk-ip-filemodal-upload'; uploadBtn.textContent = '\u2191 Upload from computer';
-            var uploadInput = document.createElement('input'); uploadInput.type = 'file'; uploadInput.accept = 'image/png,image/jpeg,image/webp,image/gif,image/avif'; uploadInput.multiple = true; uploadInput.hidden = true;
-            var close = document.createElement('button'); close.type = 'button'; close.className = 'rk-ip-filemodal-close'; close.setAttribute('aria-label', 'Close'); close.innerHTML = '&times;';
-            headActions.appendChild(uploadBtn); headActions.appendChild(close);
-            head.appendChild(title); head.appendChild(headActions); head.appendChild(uploadInput);
-            uploadBtn.addEventListener('click', function(){ if(!uploadBtn.disabled) uploadInput.click(); });
-            uploadInput.addEventListener('change', function(){
-              var files = Array.prototype.slice.call(uploadInput.files || []).filter(function(f){ return /^image\//i.test(f.type || '') || /\.(png|jpe?g|gif|webp|avif)$/i.test(f.name || ''); });
-              uploadInput.value = '';
-              if(!files.length){ setGenStatus('Pick an image file to upload as a reference.', 'error'); return; }
-              uploadBtn.disabled = true; var original = uploadBtn.textContent; uploadBtn.textContent = 'Uploading\u2026';
-              setGenStatus('Uploading ' + files.length + ' reference' + (files.length > 1 ? 's' : '') + '\u2026', '');
-              var added = 0;
-              files.reduce(function(chain, f){
-                return chain.then(function(){
-                  return uploadTemporaryBlob(f, f.name || 'reference.png', f.type || 'image/png').then(function(url){
-                    if(url && genRefs.indexOf(url) === -1){ genRefs.push(url); added++; renderGenRefs(); }
-                  });
-                });
-              }, Promise.resolve()).then(function(){
-                uploadBtn.disabled = false; uploadBtn.textContent = original;
-                if(added){ setGenStatus(added + ' reference' + (added > 1 ? 's' : '') + ' uploaded.', 'success'); closeGenFilePanel(); }
-                else setGenStatus('Those files were already attached.', '');
-              }).catch(function(err){
-                uploadBtn.disabled = false; uploadBtn.textContent = original;
-                setGenStatus((err && err.message) ? err.message : 'Upload failed.', 'error');
-              });
-            });
-            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>';
-            }
-          }
-
-          // Paste or drop image files straight into the composer -> temp upload -> reference.
-          function addGenReferenceFiles(fileList){
-            var files = Array.prototype.slice.call(fileList || []).filter(function(f){ return /^image\//i.test(f.type || '') || /\.(png|jpe?g|gif|webp|avif)$/i.test(f.name || ''); });
-            if(!files.length) return Promise.resolve(0);
-            setGenStatus('Uploading ' + files.length + ' reference' + (files.length > 1 ? 's' : '') + '\u2026', '');
-            var added = 0;
-            return files.reduce(function(chain, f){
-              return chain.then(function(){
-                return uploadTemporaryBlob(f, f.name || 'pasted-image.png', f.type || 'image/png').then(function(url){
-                  if(url && genRefs.indexOf(url) === -1){ genRefs.push(url); added++; renderGenRefs(); }
-                });
-              });
-            }, Promise.resolve()).then(function(){
-              if(added) setGenStatus(added + ' reference' + (added > 1 ? 's' : '') + ' attached.', 'success');
-              return added;
-            }).catch(function(err){ setGenStatus((err && err.message) ? err.message : 'Upload failed.', 'error'); return added; });
-          }
-          function imagesFromClipboard(e){
-            var items = (e.clipboardData && e.clipboardData.items) || []; var out = [];
-            for(var i = 0; i < items.length; i++){ if(items[i].kind === 'file'){ var f = items[i].getAsFile(); if(f && /^image\//i.test(f.type || '')) out.push(f); } }
-            return out;
-          }
-          function dtHasFiles(e){ var t = (e.dataTransfer && e.dataTransfer.types) || []; return Array.prototype.indexOf.call(t, 'Files') !== -1; }
-
           // "character card" / "storyboard" shorthand — spell out the full layout
           // so the image model produces a reference sheet / numbered shot board
           // instead of a single picture. Snippets are shared with the AI chat +
@@ -4235,61 +4395,31 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             });
           }
 
-          function runVideoTurn(text){
-            return Promise.resolve().then(function(){
-              var pending = addTurn({ kind: 'pending', label: 'Generating video \u2014 this can take a few minutes\u2026', prompt: text });
-              activeTurnId = pending.id;
-              var payload = { prompt: text, output_format: 'mp4' };
-              // The newest image is the only visual reference — it is the opening frame.
-              if(sourceImageUrl) payload.input_references = [sourceImageUrl];
-              if(inpaintProviderSelect.value) payload.provider = inpaintProviderSelect.value;
-              var tracer = tracerAutoPending ? nameTracerFromSeed(text) : getTracerValue();
-              return fetch('/api/v1/primitives/videos/generate', {
-                method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json' },
-                body: JSON.stringify({ tracer: tracer, payload: payload, chat_message: text, chat_mode: 'video' })
-              }).then(parseJsonResponse).then(function(j){
-                if(!j || !j.job_id) throw new Error((j && j.error) || 'Unable to start video generation.');
-                activeJob = { kind: 'video_generate', jobId: j.job_id };
-                return pollPrimitiveJob('video_generate', j.job_id, 'Generating video', true).then(function(out){
-                  if(!out){ updatePendingLabel(activeTurnId, 'Still rendering \u2014 check the Video tool\u2019s history shortly.'); activeTurnId = ''; return; }
-                  resolveActiveTurn({ kind: 'media', mediaKind: 'video', url: out, jobId: j.job_id, note: 'video' });
-                  setStatus('Video ready.', 'success');
-                  void loadTracerSessions();
-                });
-              });
-            });
-          }
-
           // ---- send ----------------------------------------------------------------
           function sendChatMessage(){
-            if(genBusy) return;
-            var mode = modeSelect.value === 'video' ? 'video' : 'image';
-            var raw = (genPrompt && genPrompt.value || '').trim();
-            var text = mode === 'image' ? expandShorthand(raw) : raw;
-            var masked = mode === 'image' && inpaintStrokes.length > 0;
+            if(isGenBusy()) return;
+            var text = expandShorthand((genPrompt && genPrompt.value || '').trim());
+            var masked = inpaintStrokes.length > 0;
             if(!text && !(masked && maskHasInstruction())){
-              setStatus(mode === 'video' ? 'Describe the video you want.' : 'Type what you want to create or change.', 'error');
+              setStatus('Type what you want to create or change.', 'error');
               if(genPrompt) genPrompt.focus();
               return;
             }
-            if(mode === 'video' && !text){ setStatus('Describe the video you want.', 'error'); return; }
-            var refs = genRefs.slice();
+            var refs = composer.refs();
             addTurn({
               role: 'user', kind: 'text',
               text: text || 'Apply the painted mask instructions.',
-              refs: refs, mode: mode, masked: masked,
-              isEdit: mode === 'image' && Boolean(sourceImageUrl)
+              refs: refs, mode: 'image', masked: masked,
+              isEdit: Boolean(sourceImageUrl)
             });
-            if(genPrompt){ genPrompt.value = ''; autoGrowComposer(); }
-            genRefs = [];
-            renderGenRefs();
+            if(genPrompt){ genPrompt.value = ''; composer.resetHeight(); }
+            composer.clearRefs();
             stopRequested = false;
             activeJob = { kind: '', jobId: '' };
             setGenBusy(true);
-            setStatus(mode === 'video' ? 'Creating video\u2026' : 'Working\u2026', '');
+            setStatus('Working\u2026', '');
             var work;
-            if(mode === 'video') work = runVideoTurn(text);
-            else if(!sourceImageUrl) work = runGenerateTurn(text, refs);
+            if(!sourceImageUrl) work = runGenerateTurn(text, refs);
             else if(masked) work = runMaskedTurn(text, refs);
             else work = runEditTurn(text, refs);
             work.catch(function(err){
@@ -4312,25 +4442,8 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             });
           }
 
-          if(genPrompt){
-            genPrompt.addEventListener('input', function(){ syncGenSend(); autoGrowComposer(); });
-            genPrompt.addEventListener('keydown', function(e){
-              if(e.key !== 'Enter' || e.shiftKey) return;
-              e.preventDefault();
-              // Keep typing freely while a turn runs; Enter just won't fire a second one.
-              if(genBusy){ setStatus('Still generating — press Stop to cancel, or wait and send then.', ''); return; }
-              sendChatMessage();
-            });
-            genPrompt.addEventListener('paste', function(e){ var imgs = imagesFromClipboard(e); if(imgs.length){ e.preventDefault(); addGenReferenceFiles(imgs); } });
-          }
-          if(genWrap){
-            ['dragenter', 'dragover'].forEach(function(ev){ genWrap.addEventListener(ev, function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.add('is-dragref'); } }); });
-            ['dragleave', 'dragend'].forEach(function(ev){ genWrap.addEventListener(ev, function(){ genWrap.classList.remove('is-dragref'); }); });
-            genWrap.addEventListener('drop', function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.remove('is-dragref'); addGenReferenceFiles(e.dataTransfer.files); } });
-          }
-          if(genClip) genClip.addEventListener('click', openGenFilePanel);
-          if(genSend) genSend.addEventListener('click', function(){ if(genBusy) stopActiveTurn(); else sendChatMessage(); });
-          modeSelect.addEventListener('change', function(){ composerPlaceholder(); syncGenSend(); });
+          // input / Enter-to-send / paste / drag-drop / paperclip / send-stop are all
+          // wired by the shared composer runtime above.
           // ⌘Z / ⇧⌘Z anywhere outside a text field undoes and redoes the paint.
           window.addEventListener('keydown', function(e){
             if(!(e.metaKey || e.ctrlKey) || String(e.key).toLowerCase() !== 'z') return;