@officexapp/vidfarm-devcli 0.21.27 → 0.21.29

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

@@ -1097,8 +1097,8 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-inpaint-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
 .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}}
-.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)}
+@media(max-width:820px){.rk-inpaint-workbench{grid-template-columns:1fr}.rk-inpaint-output,.rk-ip-chat,.rk-inpaint-panel{grid-column:auto}.rk-ip-chat{order:-1}}
+.rk-inpaint-panel,.rk-ip-chat,.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: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}
@@ -1173,8 +1173,6 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-inpaint-status[data-tone="success"]{color:#1f7a44}
 
 /* center video stage */
-.rk-inpaint-stage{min-height:420px;display:grid;place-items:center;padding:20px;overflow:hidden}
-.rk-ipv-stage{align-content:center}
 .rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:30px 20px}
 .rk-inpaint-empty[hidden]{display:none}
 .rk-inpaint-empty-ic{color:var(--rk-n-400)}
@@ -1201,44 +1199,110 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-ipv-timecode-copy{width:30px;height:30px}
 .rk-ipv-duration{font-size:11.5px;font-weight:700;color:var(--rk-text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
 
-/* text-to-video 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);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-dragref .rk-ip-gen-box{border-color:var(--rk-gold-600);border-style:dashed;background: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)}
+
+/* ---- 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}
+.rk-ip-turn{display:flex;flex-direction:column;gap:6px;max-width:100%}
+.rk-ip-turn[data-role="user"]{align-items:flex-end}
+.rk-ip-turn[data-role="assistant"]{align-items:flex-start}
+.rk-ip-bubble{max-width:min(88%,640px);padding:10px 13px;border-radius:var(--rk-r-2xl);font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
+.rk-ip-turn[data-role="user"] .rk-ip-bubble{background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);color:var(--rk-ink);border-bottom-right-radius:var(--rk-r-md,8px)}
+.rk-ip-turn[data-role="assistant"] .rk-ip-bubble{background:var(--rk-n-50);border:1px solid var(--rk-border);color:var(--rk-text-muted);border-bottom-left-radius:var(--rk-r-md,8px)}
+.rk-ip-turn-tag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-ip-turn-refs{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
+.rk-ip-turn-refs img{width:34px;height:34px;border-radius:var(--rk-r-md,8px);border:1px solid var(--rk-border);object-fit:cover}
+.rk-ip-media{width:fit-content;max-width:min(100%,640px);display:grid;gap:7px}
+.rk-ip-media-frame{position:relative;width:fit-content;max-width:100%;border-radius:var(--rk-r-2xl);overflow:hidden;background:var(--rk-n-100);border:1px solid var(--rk-border);line-height:0}
+.rk-ip-media-frame.is-latest{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-media-frame img,.rk-ip-media-frame video{display:block;max-width:100%;max-height:min(52vh,520px);width:auto;height:auto}
+.rk-ip-media-actions{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
+.rk-ip-act{display:inline-grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid var(--rk-border);border-radius:50%;background:#fff;color:var(--rk-n-700);cursor:pointer;text-decoration:none;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-act:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-act-note{font-size:11.5px;font-weight:700;color:var(--rk-text-faint);margin-left:2px}
+.rk-ip-pending{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);font-size:12.5px;font-weight:700;color:var(--rk-text-muted)}
+.rk-ip-pending::before{content:"";flex:none;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-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}
+
+/* ---- 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)}
+/* 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;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='none' stroke='%2378716c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;background-position:right 9px center}
+.rk-ip-comp-modeselect:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-comp-status{flex:1;min-width:0;margin:0;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--rk-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-comp-status[data-tone="error"]{color:#b42318}
+.rk-ip-comp-status[data-tone="success"]{color:#1f7a44}
+.rk-ip-comp-mask{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 11px;border:1px solid var(--rk-gold-600);border-radius:999px;background:var(--rk-gold-tint);
+  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}
+
+/* ---- 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}
 .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-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}
+.rk-ip-gen-ref button:hover{color:var(--rk-ink)}
+.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.is-busy{background:var(--rk-gold-tint);pointer-events:none}
-.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-send[data-mode="stop"]{background:var(--rk-ink);color:#fff}
 .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) */
-.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}
+/* ---- 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)}
 .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-actions{display:flex;align-items:center;gap:10px}
+.rk-ip-filemodal-upload{border:1px solid var(--rk-border-strong,var(--rk-border));background:var(--rk-n-50);color:var(--rk-n-700);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;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-filemodal-upload:hover:not(:disabled){background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-filemodal-upload:disabled{opacity:.6;cursor:default}
 .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-ipv-quick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0;background:var(--rk-surface)}
+.rk-ipv-quick .rk-ip-preset{display:inline-flex;align-items:center;gap:5px}
+.rk-ipv-quick .rk-ip-preset svg{width:12px;height:12px}
+.rk-ipv-quick + .rk-ip-composer{padding-top:8px;border-top:0}
 
 /* right: result + history */
 .rk-inpaint-output{padding:18px;display:grid;gap:18px;align-content:start}
@@ -1468,44 +1532,61 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     </section>
 
     <!-- CENTER: scrubbable video stage -->
-    <section class="rk-inpaint-stage rk-ipv-stage" aria-label="Video canvas">
-      <div class="rk-inpaint-empty" data-ipv-empty>
-        <span class="rk-inpaint-empty-ic" aria-hidden="true"><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></span>
-        <p class="rk-inpaint-empty-title">Load a video to edit</p>
-        <p class="rk-inpaint-empty-sub">Drop a video here, or set a start &amp; end frame and a prompt to generate one.</p>
-        <button type="button" class="rk-btn rk-btn-ink rk-btn-sm rk-ipv-upload" data-ipv-upload><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> Upload video</button>
-        <input data-ipv-file type="file" accept="video/mp4,video/webm,video/quicktime,video/*" hidden />
+    <!-- CENTER: chat feed + composer, mirroring /tools/image. The scrubbable
+         player + mask canvas is ONE node that gets re-parented into the newest
+         video bubble (exactly how the image page moves its paint stack), so a
+         full feed re-render never tears down the <video> mid-playback. -->
+    <section class="rk-ip-chat" aria-label="Create Video chat">
+      <div class="rk-ip-feed" data-ipv-feed>
+        <div class="rk-inpaint-empty" data-ipv-empty>
+          <span class="rk-inpaint-empty-ic" aria-hidden="true"><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></span>
+          <p class="rk-inpaint-empty-title">Describe the video you want</p>
+          <p class="rk-inpaint-empty-sub">Then keep chatting to refine it — every message regenerates from the newest clip. Upload a clip to edit instead, and paint timed masks on it to steer one region at one moment.</p>
+          <button type="button" class="rk-btn rk-btn-ink rk-btn-sm rk-ipv-upload" data-ipv-upload><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> Upload video</button>
+        </div>
+      </div>
 
-        <div class="rk-ip-gen" id="rk-ipv-gen">
-          <span class="rk-ip-gen-or">or</span>
-          <div class="rk-ip-gen-box">
-            <textarea id="rk-ipv-genprompt" class="rk-ip-gen-input" rows="2" placeholder="Or describe the video you want"></textarea>
-            <div class="rk-ip-gen-refs" id="rk-ipv-genrefs" hidden></div>
-            <div class="rk-ip-gen-bar">
-              <button type="button" class="rk-ip-gen-clip" id="rk-ipv-genclip" aria-label="Attach reference images from your files" title="Attach reference images from your files"><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>
-              <span class="rk-ip-gen-hint">Generate a brand-new clip from a prompt (+ optional frames).</span>
-              <button type="button" class="rk-ip-gen-send" id="rk-ipv-gensend" aria-label="Generate video"><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>
+      <!-- Parked here between renders; renderChat() moves it into the newest clip. -->
+      <div class="rk-ip-canvasholder" data-ipv-canvas-holder>
+        <div class="rk-ipv-player" data-ipv-player hidden>
+          <div class="rk-ipv-canvaswrap" data-ipv-canvaswrap>
+            <video data-ipv-video class="rk-ipv-video" playsinline></video>
+            <canvas data-ipv-canvas class="rk-ipv-canvas"></canvas>
+            <div class="editor-inpaint-brush-cursor" data-ipv-brush-cursor aria-hidden="true"></div>
+          </div>
+          <div class="rk-ipv-controls">
+            <button type="button" class="rk-ipv-playpause" data-ipv-playpause aria-label="Play/pause"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z"/></svg></button>
+            <input type="range" class="rk-ipv-scrub" data-ipv-scrub min="0" max="1000" step="1" value="0" aria-label="Seek" />
+            <div class="rk-ipv-timecode">
+              <input class="rk-ipv-timecode-input" data-ipv-timecode-input type="text" inputmode="numeric" spellcheck="false" value="00:00:000" aria-label="Current time MM:SS:mmm" />
+              <button type="button" class="rk-ip-iconbtn rk-ipv-timecode-copy" data-ipv-timecode-copy aria-label="Copy current timecode" title="Copy timecode"><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></button>
+              <span class="rk-ipv-duration" data-ipv-duration>/ 00:00:000</span>
             </div>
           </div>
-          <p class="rk-ip-gen-status" id="rk-ipv-genstatus" data-tone="" aria-live="polite"></p>
         </div>
       </div>
 
-      <div class="rk-ipv-player" data-ipv-player hidden>
-        <div class="rk-ipv-canvaswrap" data-ipv-canvaswrap>
-          <video data-ipv-video class="rk-ipv-video" playsinline></video>
-          <canvas data-ipv-canvas class="rk-ipv-canvas"></canvas>
-          <div class="editor-inpaint-brush-cursor" data-ipv-brush-cursor aria-hidden="true"></div>
+      <div class="rk-ipv-quick" data-ipv-quick>
+        <button type="button" class="rk-ip-preset" data-ipv-quick-video title="Load a clip to edit"><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> Upload Video</button>
+        <button type="button" class="rk-ip-preset" data-ipv-quick-storyboard title="Attach a storyboard image as a visual reference"><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> Upload Storyboard</button>
+        <input data-ipv-file type="file" accept="video/mp4,video/webm,video/quicktime,video/*" hidden />
+        <input data-ipv-storyboard-input type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" multiple hidden />
+      </div>
+
+      <div class="rk-ip-composer" data-ip-composer>
+        
+        <div class="rk-ip-gen-refs" id="rk-ipv-genrefs" hidden></div>
+        <div class="rk-ip-comp-field">
+          <textarea id="rk-ipv-genprompt" class="rk-ip-comp-input" rows="2" placeholder="Describe the video 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-ipv-controls">
-          <button type="button" class="rk-ipv-playpause" data-ipv-playpause aria-label="Play/pause"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z"/></svg></button>
-          <input type="range" class="rk-ipv-scrub" data-ipv-scrub min="0" max="1000" step="1" value="0" aria-label="Seek" />
-          <div class="rk-ipv-timecode">
-            <input class="rk-ipv-timecode-input" data-ipv-timecode-input type="text" inputmode="numeric" spellcheck="false" value="00:00:000" aria-label="Current time MM:SS:mmm" />
-            <button type="button" class="rk-ip-iconbtn rk-ipv-timecode-copy" data-ipv-timecode-copy aria-label="Copy current timecode" title="Copy timecode"><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></button>
-            <span class="rk-ipv-duration" data-ipv-duration>/ 00:00:000</span>
-          </div>
+        <div class="rk-ip-comp-bar">
+          
+          <button type="button" class="rk-ip-gen-clip" id="rk-ipv-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="rk-ip-comp-status" data-ip-status data-ipv-comp-status data-tone="" aria-live="polite"></p>
+          <button type="button" class="rk-ip-gen-send" id="rk-ipv-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-ipv-genstatus" data-tone="" aria-live="polite" hidden></p>
       </div>
     </section>
 
@@ -1683,6 +1764,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(){
   var videoEl = document.querySelector("[data-ipv-video]");
   var canvas = document.querySelector("[data-ipv-canvas]");
@@ -1743,6 +2100,10 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
   var PLAY_SVG = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z\"/></svg>";
   var PAUSE_SVG = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/></svg>";
   var CLOCK_SVG = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M10 6v4l2.6 1.6\"/></svg>";
+  var EXPAND_SVG = "<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=\"M12 3h5v5\"/><path d=\"M8 17H3v-5\"/><path d=\"M17 3l-6 6\"/><path d=\"M3 17l6-6\"/></svg>";
+  var SAVE_SVG = "<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=\"M5 4h8l2 2v10H5z\"/><path d=\"M8 4v4h4V4\"/><path d=\"M8 12h4\"/></svg>";
+  var DL_SVG = "<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>";
+  var COPY_SVG = "<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>";
 
   // ===== state =====
   var sourceVideoUrl = "";        // playable URL (may be a blob: object URL for uploads)
@@ -2010,6 +2371,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     videoEl.onerror = function(){ if(!crossOriginRetried && videoEl.getAttribute("crossorigin")){ crossOriginRetried = true; videoEl.removeAttribute("crossorigin"); videoEl.src = url; videoEl.load(); } };
     videoEl.src = url;
     videoEl.load();
+    ensureSourceTurn(url, name || "Video");
     setStatus("Video ready. Scrub the timeline and paint timed masks.", "success");
   }
   function loadSourceFile(file){
@@ -2022,6 +2384,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     videoEl.src = sourceObjectUrl;
     videoEl.addEventListener("loadedmetadata", function(){ syncCanvasSize(); if(durationEl) durationEl.textContent = "/ " + formatTimecode(videoEl.duration || 0); redraw(); }, { once: true });
     videoEl.load();
+    ensureSourceTurn(sourceObjectUrl, file.name || "Uploaded video");
     setStatus("Video loaded. Scrub the timeline and paint timed masks.", "success");
   }
 
@@ -2243,17 +2606,25 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     var rows = (entries || []).filter(isVideoEntry)
       .sort(function(a, b){ return Date.parse(a.createdAt || 0) - Date.parse(b.createdAt || 0); });
     if(!rows.length){ setStatus("Opened " + resolveTracer() + " \u2014 no messages in it yet.", ""); return; }
-    var last = rows[rows.length - 1];
-    var text = userTextFromEntry(last);
-    if(text && globalPrompt && !globalPrompt.value.trim()) globalPrompt.value = text;
-    // Newest output of the session becomes the visible result.
-    for(var i = rows.length - 1; i >= 0; i--){
-      var urls = historyEntryUrls(rows[i]);
-      if(urls[0]){
-        try { resultVideo.src = absoluteUrl(urls[0]); outputPanel.hidden = false; } catch(_){}
-        break;
-      }
+    // Replay the whole thread: each history entry is one user message and, when
+    // it produced output, the clip that answered it.
+    chatTurns = []; activeTurnId = ""; turnSeq = 0;
+    var newestUrl = "";
+    rows.forEach(function(row){
+      var msg = userTextFromEntry(row);
+      if(msg) chatTurns.push({ id: nextTurnId(), at: row.createdAt || nowIso(), role: "user", kind: "text", text: msg, refs: [], isEdit: false, masked: false });
+      var urls = historyEntryUrls(row);
+      if(!urls[0]) return;
+      var abs; try { abs = absoluteUrl(urls[0]); } catch(_){ return; }
+      newestUrl = abs;
+      chatTurns.push({ id: nextTurnId(), at: row.createdAt || nowIso(), role: "assistant", kind: "media", url: abs });
+    });
+    if(newestUrl){
+      try { resultVideo.src = newestUrl; outputPanel.hidden = false; } catch(_){}
+      // Make it the source so the next message edits it and it gets the player.
+      loadSourceUrl(newestUrl, "Session video");
     }
+    renderChat();
     setStatus("Session restored \u2014 " + rows.length + " message" + (rows.length === 1 ? "" : "s") + ". Keep editing to pick up where you left off.", "success");
   }
   function loadHistory(){
@@ -2310,35 +2681,6 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     if(frames.last && frames.last.url) arr.push({ image_url: frames.last.url, frame_type: "last_frame" });
     return arr;
   }
-  function setSubmitLoading(loading){ submitBtn.setAttribute("data-loading", loading ? "true" : "false"); submitBtn.disabled = loading; if(submitLabel) submitLabel.textContent = loading ? "Generating\u2026" : "Generate video"; }
-
-  function submitGenerate(){
-    if(submitBtn.disabled) return;
-    var instruction = buildVideoInstruction();
-    if(!instruction){ setStatus("Add a video prompt or a mask instruction first.", "error"); return; }
-    var frameImgs = frameImagesPayload();
-    setSubmitLoading(true);
-    var seed = (globalPrompt && globalPrompt.value.trim()) || (masks.find(function(m){ return String(m.prompt || "").trim(); }) || {}).prompt || "video-edit";
-    var tracer = tracerAutoPending ? nameTracerFromSeed(seed) : getTracerValue();
-    // The message the USER actually wrote (not the compiled instruction). It rides
-    // along on the primitive envelope as chat_message — zod strips it server-side,
-    // but the api-call-history middleware records the raw body, so past sessions can
-    // be titled/replayed by their conversation exactly like /tools/image.
-    var chatMessage = (globalPrompt && globalPrompt.value.trim())
-      || (masks.map(function(m){ return String(m.prompt || "").trim(); }).filter(Boolean)[0] || "");
-    var payload = { prompt: instruction, output_format: "mp4", aspect_ratio: getAspectRatio() };
-    if(frameImgs.length) payload.frame_images = frameImgs;
-    if(providerSelect && providerSelect.value) payload.provider = providerSelect.value;
-    if(durationSelect && durationSelect.value) payload.duration = Number(durationSelect.value);
-    if(audioToggle && audioToggle.checked) payload.generate_audio = true;
-    setStatus("Creating video job\u2026", "");
-    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: chatMessage, chat_mode: "video", chat_masked: masks.length > 0 }) })
-      .then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); })
-      .then(function(res){ if(!res.ok || !res.p.job_id) throw new Error(res.p.error || "Unable to create video job."); setStatus("Video job " + res.p.job_id + " started \u2014 generating\u2026", "success"); upsertHistory(makePending(res.p)); return pollJob(res.p.job_id); })
-      .then(function(){ loadHistory(); loadSessions(); })
-      .catch(function(err){ setStatus(err && err.message ? err.message : "Unable to create video.", "error"); })
-      .then(function(){ setSubmitLoading(false); });
-  }
 
   // ===== lightbox =====
   function openVideoPreview(url, label, downloadName){
@@ -2415,6 +2757,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     ["first","last"].forEach(function(w){ var img = document.querySelector('[data-ipv-frame-img="' + w + '"]'); var ph = document.querySelector('[data-ipv-frame-ph="' + w + '"]'); if(img){ img.hidden = true; img.removeAttribute("src"); } if(ph) ph.style.display = ""; });
     if(globalPrompt) globalPrompt.value = ""; attachments = []; renderAttachChips();
     outputPanel.hidden = true; resultVideo.removeAttribute("src");
+    chatTurns = []; activeTurnId = ""; turnSeq = 0; renderChat();
     emptyState.hidden = false; if(player) player.hidden = true;
     canvas.width = 1; canvas.height = 1; renderMasks();
     if(scrub) scrub.value = "0"; if(timecodeInput) timecodeInput.value = "00:00:000"; if(durationEl) durationEl.textContent = "/ 00:00:000";
@@ -2462,7 +2805,6 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
   if(redoBtn) redoBtn.addEventListener("click", function(){ var m = activeMask(); if(m && m.redo.length){ m.strokes.push(m.redo.pop()); redraw(); syncUndoRedo(); } });
   if(clearBtn) clearBtn.addEventListener("click", function(){ var m = activeMask(); if(m){ m.redo = m.strokes.concat(m.redo); m.strokes = []; redraw(); syncUndoRedo(); } });
   if(attachBtn && attachInput){ attachBtn.addEventListener("click", function(){ attachInput.click(); }); attachInput.addEventListener("change", function(){ addAttachmentFiles(attachInput.files); attachInput.value = ""; }); }
-  if(submitBtn) submitBtn.addEventListener("click", submitGenerate);
 
   masksList.addEventListener("click", function(event){
     var t = event.target; if(!(t instanceof Element)) return;
@@ -2548,94 +2890,345 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
   }
 
   // ===== text-to-video composer =====
+  // ===== chat feed + shared composer =====
   var genPrompt = document.getElementById("rk-ipv-genprompt");
   var genClip = document.getElementById("rk-ipv-genclip");
   var genSend = document.getElementById("rk-ipv-gensend");
   var genRefsEl = document.getElementById("rk-ipv-genrefs");
   var genStatusEl = document.getElementById("rk-ipv-genstatus");
-  var genWrap = document.getElementById("rk-ipv-gen");
-  var GEN_SEND_HTML = genSend ? genSend.innerHTML : "";
-  var genRefs = []; var genBusy = false; var genFileModal = null;
-  function setGenStatus(m, t){ if(!genStatusEl) return; genStatusEl.textContent = m || ""; genStatusEl.setAttribute("data-tone", t || ""); }
-  function syncGenSend(){ if(genPrompt) genPrompt.disabled = genBusy; if(genClip) genClip.disabled = genBusy; if(!genSend) return; if(genBusy){ genSend.classList.add("is-busy"); genSend.innerHTML = "<span class='rk-ip-gen-spin'></span>"; } else { genSend.classList.remove("is-busy"); genSend.innerHTML = GEN_SEND_HTML; } genSend.disabled = genBusy || !(genPrompt && genPrompt.value.trim()); }
-  function renderGenRefs(){ if(!genRefsEl) return; genRefsEl.innerHTML = ""; if(!genRefs.length){ genRefsEl.hidden = true; return; } genRefsEl.hidden = false; genRefs.forEach(function(url, idx){ var chip = document.createElement("span"); chip.className = "rk-ip-gen-ref"; var img = document.createElement("img"); img.src = url; img.alt = ""; chip.appendChild(img); var label = document.createElement("span"); label.textContent = sourceNameFromUrl(url); chip.appendChild(label); var x = document.createElement("button"); x.type = "button"; x.textContent = "\u00d7"; x.addEventListener("click", function(){ genRefs.splice(idx, 1); renderGenRefs(); }); chip.appendChild(x); genRefsEl.appendChild(chip); }); }
-  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(){
-    var dir = window.__vidfarmDirectory; if(!dir || !dir.pick){ setGenStatus("File browser isn't available right now.", "error"); return; }
-    dir.pick({ select: "file", roots: ["files","temp","raws"], title: "Attach reference images", hint: "Pick one or more images to guide the generation \u2014 or drop / upload them from your computer.", confirmLabel: "Attach", multiple: true, allowUpload: true,
-      onPick: function(picked){ var arr = Array.isArray(picked) ? picked : [picked]; arr.forEach(function(f){ var url = f && (f.url || f.viewUrl); if(url){ try { genRefs.push(absoluteUrl(url)); } catch(_){} } }); renderGenRefs(); } });
-  }
-  // 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(uploaded){
-          if(uploaded){ var url = absoluteUrl(uploaded); if(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; });
+  var composerEl = document.querySelector("[data-ip-composer]");
+  var chatFeed = document.querySelector("[data-ipv-feed]");
+  var chatEmpty = document.querySelector("[data-ipv-empty]");
+  var canvasHolder = document.querySelector("[data-ipv-canvas-holder]");
+  var playerStack = document.querySelector("[data-ipv-player]");
+  var compStatusEl = document.querySelector("[data-ipv-comp-status]");
+
+  function setGenStatus(m, t){ setStatus(m, t); }
+  function maskHasInstruction(){ return masks.some(function(m){ return String(m.prompt || "").trim() && (m.strokes || []).length; }); }
+
+  // The composer is the shared implementation from chat-composer.ts — the exact
+  // same auto-grow, drag-to-resize grip, chips, paste/drop and attach panel as
+  // /tools/image.
+  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(); }
+  });
+  // ---- quick actions -----------------------------------------------------
+  // Upload Video swaps the clip being edited; Upload Storyboard is just a
+  // reference image (it rides along as input_references, it does NOT split the
+  // clip into per-panel shots).
+  var quickVideoBtn = document.querySelector("[data-ipv-quick-video]");
+  var quickStoryBtn = document.querySelector("[data-ipv-quick-storyboard]");
+  var storyboardInput = document.querySelector("[data-ipv-storyboard-input]");
+  if(quickVideoBtn && fileInput) quickVideoBtn.addEventListener("click", function(){ fileInput.click(); });
+  if(quickStoryBtn && storyboardInput) quickStoryBtn.addEventListener("click", function(){ storyboardInput.click(); });
+  if(storyboardInput) storyboardInput.addEventListener("change", function(){
+    var files = Array.prototype.slice.call(storyboardInput.files || []);
+    storyboardInput.value = "";
+    if(!files.length) return;
+    // Same funnel as paste/drop — upload, then show as a composer chip.
+    composer.addFiles(files);
+  });
+
+  function renderGenRefs(){ composer.renderRefs(); }
+  function syncGenSend(){ composer.syncSend(); }
+
+  // ===== turn model =====
+  var chatTurns = [];
+  var activeTurnId = "";
+  var turnSeq = 0;
+  function nextTurnId(){ turnSeq += 1; return "t" + turnSeq; }
+  function addTurn(turn){
+    var item = Object.assign({ id: nextTurnId(), at: nowIso(), role: "assistant" }, turn);
+    chatTurns.push(item); renderChat(); return item;
+  }
+  function updateTurn(id, patch){
+    if(!id) return;
+    chatTurns = chatTurns.map(function(t){ return t.id === id ? Object.assign({}, t, patch) : t; });
+    renderChat();
+  }
+  // Patch pending labels in place — a full re-render would restart a clip that is
+  // playing further up the feed.
+  function updatePendingLabel(id, label){
+    if(!id) return;
+    chatTurns = chatTurns.map(function(t){ return t.id === id ? Object.assign({}, t, { label: label }) : t; });
+    var node = chatFeed && chatFeed.querySelector("[data-pending-id='" + id + "']");
+    if(node) node.textContent = label;
+  }
+  function resolveActiveTurn(patch){
+    if(activeTurnId){ updateTurn(activeTurnId, patch); activeTurnId = ""; return; }
+    addTurn(Object.assign({ role: "assistant" }, patch));
+  }
+  function turnById(id){ return chatTurns.filter(function(t){ return t.id === id; })[0] || null; }
+  // A clip that arrives WITHOUT a message (an upload, a ?source_video_url deep
+  // link) still needs a bubble — renderChat only hosts the player inside a media
+  // turn whose url is the current source.
+  function ensureSourceTurn(url, name){
+    if(!url) return;
+    var already = chatTurns.some(function(t){ return t.kind === "media" && t.url === url; });
+    if(already){ renderChat(); return; }
+    addTurn({ role: "assistant", kind: "media", url: url, note: name || "" });
+  }
+
+  // ===== stop =====
+  var activeJob = { kind: "", jobId: "" };
+  var stopRequested = false;
+  function stopError(){ var e = new Error("__vidfarm_stopped__"); e.stopped = true; return e; }
+  function throwIfStopped(){ if(stopRequested) throw stopError(); }
+  function stopActiveTurn(){
+    if(!composer.isBusy() || stopRequested) return;
+    stopRequested = true;
+    setStatus("Stopping\u2026", "");
+    if(activeTurnId) updatePendingLabel(activeTurnId, "Stopping\u2026");
+    if(activeJob.kind && activeJob.jobId){
+      fetch("/api/v1/primitives/" + activeJob.kind + "/jobs/" + encodeURIComponent(activeJob.jobId) + "/cancel", {
+        method: "POST", credentials: "same-origin"
+      }).catch(function(){});
+    }
   }
-  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;
+
+  // ===== feed rendering =====
+  function mediaActionsRow(turn){
+    var row = document.createElement("div");
+    row.className = "rk-ip-media-actions";
+    var full = document.createElement("button");
+    full.type = "button"; full.className = "rk-ip-act"; full.dataset.ipvOpen = turn.id;
+    full.setAttribute("aria-label", "Open fullscreen"); full.title = "Fullscreen";
+    full.innerHTML = EXPAND_SVG;
+    var download = document.createElement("a");
+    download.className = "rk-ip-act"; download.href = turn.url; download.target = "_blank"; download.rel = "noopener noreferrer";
+    download.setAttribute("download", videoDownloadName("video-chat", turn.at));
+    download.setAttribute("aria-label", "Download this clip"); download.title = "Download";
+    download.innerHTML = DL_SVG;
+    var copy = document.createElement("button");
+    copy.type = "button"; copy.className = "rk-ip-act"; copy.dataset.ipvCopy = turn.id;
+    copy.setAttribute("aria-label", "Copy the file URL"); copy.title = "Copy URL";
+    copy.innerHTML = COPY_SVG;
+    var save = document.createElement("button");
+    save.type = "button"; save.className = "rk-ip-act"; save.dataset.ipvSave = turn.id;
+    save.setAttribute("aria-label", "Save to My Files"); save.title = "Save to My Files";
+    save.innerHTML = SAVE_SVG;
+    row.append(full, download, copy, save);
+    return row;
   }
-  function dtHasFiles(e){ var t = (e.dataTransfer && e.dataTransfer.types) || []; return Array.prototype.indexOf.call(t, "Files") !== -1; }
-  function pollGenerateJob(jobId){
-    var attempt = 0;
-    function step(){
-      return fetch("/api/v1/primitives/video_generate/jobs/" + encodeURIComponent(jobId), { credentials: "same-origin" }).then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); }).then(function(res){
-        var payload = res.p; if(!res.ok) throw new Error(payload.error || "Unable to poll job.");
-        if(payload.status === "failed" || payload.status === "cancelled") throw new Error((payload.error && payload.error.message) || ("Video job " + payload.status + "."));
-        var out = extractVideoUrl(payload);
-        if(payload.status === "succeeded" || payload.status === "complete" || out){ if(!out) throw new Error("Completed without an output URL."); return absoluteUrl(out); }
-        setGenStatus("Generating video (" + (payload.status || "running") + ")\u2026 this can take a few minutes", "");
-        attempt++; if(attempt >= 120){ setGenStatus("Still running \u2014 check History shortly.", ""); return ""; }
-        return new Promise(function(res2){ setTimeout(res2, attempt < 8 ? 2000 : 4000); }).then(step);
-      });
+
+  function renderChat(){
+    if(!chatFeed) return;
+    // Park the player before the innerHTML rebuild, or it would be destroyed.
+    if(playerStack && playerStack.parentElement !== canvasHolder && canvasHolder) canvasHolder.appendChild(playerStack);
+    var wasNearBottom = (chatFeed.scrollHeight - chatFeed.scrollTop - chatFeed.clientHeight) < 120;
+    chatFeed.innerHTML = "";
+    if(!chatTurns.length){
+      if(chatEmpty){ chatEmpty.hidden = false; chatFeed.appendChild(chatEmpty); }
+      return;
     }
-    return step();
+    if(chatEmpty) chatEmpty.hidden = true;
+    // The newest clip that IS the current source gets the scrubbable player, so
+    // timed masks are always painted on the clip the next message will edit.
+    var latestPlayableId = "";
+    for(var i = chatTurns.length - 1; i >= 0; i--){
+      var c = chatTurns[i];
+      if(c.kind === "media" && c.url && c.url === sourceVideoUrl){ latestPlayableId = c.id; break; }
+    }
+    chatTurns.forEach(function(turn){
+      var row = document.createElement("div");
+      row.className = "rk-ip-turn";
+      row.dataset.role = turn.role; row.dataset.kind = turn.kind; row.dataset.turnId = turn.id;
+      if(turn.role === "user"){
+        if(turn.refs && turn.refs.length){
+          var refs = document.createElement("div"); refs.className = "rk-ip-turn-refs";
+          turn.refs.forEach(function(url){ var im = document.createElement("img"); im.src = url; im.alt = ""; im.loading = "lazy"; refs.appendChild(im); });
+          row.appendChild(refs);
+        }
+        var tag = document.createElement("span");
+        tag.className = "rk-ip-turn-tag";
+        tag.textContent = turn.masked ? "Masked edit" : (turn.isEdit ? "Edit" : "New video");
+        row.appendChild(tag);
+        var bubble = document.createElement("div"); bubble.className = "rk-ip-bubble";
+        bubble.textContent = turn.text || ""; row.appendChild(bubble);
+      } else if(turn.kind === "pending"){
+        var pending = document.createElement("div"); pending.className = "rk-ip-pending";
+        pending.dataset.pendingId = turn.id; pending.textContent = turn.label || "Working\u2026";
+        row.appendChild(pending);
+      } else if(turn.kind === "error" || turn.kind === "stopped"){
+        var err = document.createElement("div"); err.className = "rk-ip-bubble";
+        err.textContent = turn.text || "Something went wrong."; row.appendChild(err);
+      } else if(turn.kind === "media" && turn.url){
+        var media = document.createElement("div"); media.className = "rk-ip-media";
+        var isLatest = turn.id === latestPlayableId;
+        var frame = document.createElement("div");
+        frame.className = "rk-ip-media-frame" + (isLatest ? " is-latest" : "");
+        if(isLatest && playerStack){
+          playerStack.hidden = false;
+          frame.appendChild(playerStack);
+        } else {
+          var v = document.createElement("video");
+          v.src = turn.url; v.controls = true; v.playsInline = true; v.preload = "metadata";
+          frame.appendChild(v);
+        }
+        media.appendChild(frame);
+        var actions = mediaActionsRow(turn);
+        var note = document.createElement("span"); note.className = "rk-ip-act-note";
+        note.textContent = isLatest
+          ? (masks.length ? "Newest \u00b7 timed masks active" : "Newest \u00b7 scrub and paint a timed mask")
+          : (turn.note || "");
+        if(note.textContent) actions.appendChild(note);
+        media.appendChild(actions);
+        row.appendChild(media);
+      } else {
+        var text = document.createElement("div"); text.className = "rk-ip-bubble";
+        text.textContent = turn.text || ""; row.appendChild(text);
+      }
+      chatFeed.appendChild(row);
+    });
+    if(wasNearBottom) chatFeed.scrollTop = chatFeed.scrollHeight;
   }
-  function submitGenerateNew(){
-    var p = (genPrompt && genPrompt.value || "").trim();
-    if(!p){ setGenStatus("Describe the video to generate.", "error"); if(genPrompt) genPrompt.focus(); return; }
-    if(genBusy) return; genBusy = true; syncGenSend(); if(genWrap) genWrap.classList.add("is-busy");
-    setGenStatus("Creating video\u2026", "");
-    var payload = { prompt: p, output_format: "mp4" };
-    var frameImgs = frameImagesPayload(); if(frameImgs.length) payload.frame_images = frameImgs;
-    if(genRefs.length) payload.input_references = genRefs.slice();
+
+  if(chatFeed){
+    chatFeed.addEventListener("click", function(event){
+      var target = event.target;
+      if(!(target instanceof Element)) return;
+      var open = target.closest("[data-ipv-open]");
+      if(open instanceof HTMLElement){
+        var t = turnById(open.dataset.ipvOpen || "");
+        if(t && t.url) openVideoPreview(t.url, "Video output", videoDownloadName("video-chat", t.at));
+        return;
+      }
+      var copy = target.closest("[data-ipv-copy]");
+      if(copy instanceof HTMLElement){
+        var ct = turnById(copy.dataset.ipvCopy || "");
+        if(ct && ct.url){ try { navigator.clipboard.writeText(ct.url); setStatus("File URL copied.", "success"); } catch(_){} }
+        return;
+      }
+      var save = target.closest("[data-ipv-save]");
+      if(save instanceof HTMLElement){
+        var st = turnById(save.dataset.ipvSave || "");
+        if(st && st.url) saveMediaToFiles(st.url, videoDownloadName("video-chat", st.at));
+      }
+    });
+  }
+  // ===== send =====
+  // ONE send path for every message, so the page is a single conversation rather
+  // than two disconnected surfaces. With a clip loaded, the message + timed masks
+  // + frames compile into the rich instruction buildVideoInstruction() produces;
+  // with no clip it is plain text->video. Both are POST /videos/generate.
+  function sendChatMessage(){
+    if(composer.isBusy()) return;
+    var text = (genPrompt && genPrompt.value || "").trim();
+    var masked = maskHasInstruction();
+    if(!text && !masked){
+      setStatus("Describe the video you want.", "error");
+      if(genPrompt) genPrompt.focus();
+      return;
+    }
+    var refs = composer.refs();
+    var editing = Boolean(sourceVideoUrl);
+    // The whole-clip prompt field is what buildVideoInstruction() compiles from,
+    // so the composer text becomes that field for this turn.
+    if(globalPrompt) globalPrompt.value = text;
+    var instruction = editing ? (buildVideoInstruction() || text) : text;
+    if(!instruction){ setStatus("Describe the video you want.", "error"); return; }
+
+    addTurn({
+      role: "user", kind: "text",
+      text: text || "Apply the painted mask instructions.",
+      refs: refs, isEdit: editing, masked: masks.length > 0
+    });
+    if(genPrompt){ genPrompt.value = ""; composer.resetHeight(); }
+    composer.clearRefs();
+    stopRequested = false;
+    activeJob = { kind: "", jobId: "" };
+    composer.setBusy(true);
+    var pending = addTurn({ role: "assistant", kind: "pending", label: "Creating video\u2026" });
+    activeTurnId = pending.id;
+    setStatus("Creating video\u2026", "");
+
+    var payload = { prompt: instruction, output_format: "mp4", aspect_ratio: getAspectRatio() };
+    var frameImgs = frameImagesPayload();
+    if(frameImgs.length) payload.frame_images = frameImgs;
+    if(refs.length) payload.input_references = refs;
     if(providerSelect && providerSelect.value) payload.provider = providerSelect.value;
     if(durationSelect && durationSelect.value) payload.duration = Number(durationSelect.value);
     if(audioToggle && audioToggle.checked) payload.generate_audio = true;
-    var genTracer = tracerAutoPending ? nameTracerFromSeed(p) : getTracerValue();
-    fetch("/api/v1/primitives/videos/generate", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ tracer: genTracer, payload: payload }) })
+    var seed = text || "video-edit";
+    var tracer = tracerAutoPending ? nameTracerFromSeed(seed) : getTracerValue();
+
+    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", chat_masked: masks.length > 0 })
+    })
       .then(function(r){ return parseJsonResponse(r).then(function(j){ return { ok: r.ok, j: j }; }); })
-      .then(function(res){ if(!res.ok || !res.j.job_id) throw new Error(res.j.error || "Unable to start video generation."); upsertHistory(makePending(res.j)); return pollGenerateJob(res.j.job_id); })
-      .then(function(out){ if(out){ loadSourceUrl(out, "Generated video"); recordSourceHistoryItem(out, "Generated video"); setGenStatus("Video generated. Scrub and paint timed masks to refine.", "success"); setStatus("Generated video loaded.", "success"); loadHistory(); } })
-      .catch(function(err){ var msg = (err && err.message) ? err.message : "Unable to generate video."; if(/401|403|sign in|unauth/i.test(msg)) msg = "Sign in to generate videos."; 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(); submitGenerateNew(); } });
-    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", submitGenerateNew);
-  renderGenRefs(); syncGenSend();
+      .then(function(res){
+        if(!res.ok || !res.j.job_id) throw new Error(res.j.error || "Unable to start video generation.");
+        throwIfStopped();
+        activeJob = { kind: "video_generate", jobId: String(res.j.job_id) };
+        upsertHistory(makePending(res.j));
+        return pollChatJob(res.j.job_id);
+      })
+      .then(function(out){
+        if(!out) return;
+        // Resolve the pending bubble into the clip FIRST — loadSourceUrl calls
+        // ensureSourceTurn, which would otherwise add a second bubble for the
+        // same clip because this turn is still "pending" at that moment.
+        resolveActiveTurn({ kind: "media", url: out });
+        // The new clip becomes the source, so the NEXT message edits it.
+        loadSourceUrl(out, "Generated video");
+        recordSourceHistoryItem(out, "Generated video");
+        setStatus("Video ready \u2014 scrub and paint a timed mask to refine it.", "success");
+        loadHistory(); loadSessions();
+      })
+      .catch(function(err){
+        if(err && err.stopped){ resolveActiveTurn({ kind: "stopped", text: "Stopped." }); setStatus("Stopped.", ""); return; }
+        var msg = (err && err.message) ? err.message : "Unable to generate video.";
+        if(/401|403|sign in|unauth/i.test(msg)) msg = "Sign in to generate videos.";
+        resolveActiveTurn({ kind: "error", text: msg });
+        setStatus(msg, "error");
+      })
+      .then(function(){ composer.setBusy(false); stopRequested = false; activeJob = { kind: "", jobId: "" }; });
+  }
+
+  // Poll that reports progress into the pending bubble and honours Stop.
+  function pollChatJob(jobId){
+    var attempt = 0;
+    function step(){
+      throwIfStopped();
+      return fetch("/api/v1/primitives/video_generate/jobs/" + encodeURIComponent(jobId), { credentials: "same-origin" })
+        .then(function(r){ return parseJsonResponse(r).then(function(p){ return { ok: r.ok, p: p }; }); })
+        .then(function(res){
+          throwIfStopped();
+          var payload = res.p;
+          if(!res.ok) throw new Error(payload.error || "Unable to poll job.");
+          if(payload.status === "failed" || payload.status === "cancelled") throw new Error((payload.error && payload.error.message) || ("Video job " + payload.status + "."));
+          var out = extractVideoUrl(payload);
+          if(payload.status === "succeeded" || payload.status === "complete" || out){
+            if(!out) throw new Error("Completed without an output URL.");
+            applyCompletedJob(payload);
+            return absoluteUrl(out);
+          }
+          upsertHistory(makePending(payload));
+          if(activeTurnId) updatePendingLabel(activeTurnId, "Generating video (" + (payload.status || "running") + ")\u2026 this can take a few minutes");
+          attempt++;
+          if(attempt >= 120){ setStatus("Still running \u2014 check History shortly.", ""); return ""; }
+          return new Promise(function(res2){ setTimeout(res2, attempt < 8 ? 2000 : 4000); }).then(step);
+        });
+    }
+    return step();
+  }
+
+  // The left panel's Generate button now routes through the same conversation.
+  if(submitBtn) submitBtn.addEventListener("click", function(){ sendChatMessage(); });
+  // Everything else on the composer (input, Enter, paste, drag-drop, paperclip,
+  // send/stop) is wired by the shared composer runtime.
+  renderChat();
 
   // ===== boot =====
   renderMasks();