@officexapp/vidfarm-devcli 0.21.26 → 0.21.27

package/public/serve-shells/editor.html

@@ -576,6 +576,7 @@
   background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
   transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-act[hidden]{display:none}
 
 /* ── markdown pipe tables (assistant messages + .md previews) ── */
 .rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
@@ -607,6 +608,14 @@
 .rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
 .rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
 .rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
+/* "Edit in the tool" pencil — only on image/video cards; opens /tools/image or
+   /tools/video in a new tab with this file preloaded as the working file. */
+.rk-aichat-file-open{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:var(--rk-r-md);
+  display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--rk-border);color:var(--rk-ink);
+  opacity:0;transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease);z-index:2}
+.rk-aichat-file-open svg{width:13px;height:13px}
+.rk-aichat-file:hover .rk-aichat-file-open,.rk-aichat-file-open:focus-visible{opacity:1}
+.rk-aichat-file-open:hover{background:var(--rk-gold-tint)}
 
 /* create_video pipeline: live status row + clickable result links */
 .rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
@@ -1095,6 +1104,12 @@ html,body{margin:0;background:#050604;color:#fffbe6}
 .rk-aichat--editor .rk-aichat-toolnote.is-ok::before{background:#33d17a}
 .rk-aichat--editor .rk-aichat-toolnote.is-err{color:#ff9b8f}
 .rk-aichat--editor .rk-aichat-toolnote.is-err::before{background:#ff6a5a}
+/* "Edit in the tool" pencil + preview actions are hardcoded light in the shared
+   sheet; dark them so they read on the editor dock's dark chrome. */
+.rk-aichat--editor .rk-aichat-file-open,
+.rk-aichat--editor .rk-aichat-preview-act{background:#141810;color:var(--rk-ink)}
+.rk-aichat--editor .rk-aichat-file-open:hover,
+.rk-aichat--editor .rk-aichat-preview-act:hover{background:#1b2013}
 
 /* Hide the SPA's own embedded chat (replaced by the farmville dock). */
 .chat-dock,.chat-dock-fab{display:none !important}
@@ -1822,6 +1837,34 @@ html,body{margin:0;background:#050604;color:#fffbe6}
   }
   function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
 
+  // ── "edit this media" hand-off: dock chat → the matching creative tool ──
+  // Images open /tools/image, videos /tools/video, each with the file preloaded as
+  // that tool's working file (its chat then edits THAT media). Deliberately a fresh
+  // tool session — no ?tracer — so the tool names its own chat from the first prompt.
+  var PENCIL_SVG = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.6 3.6a1.9 1.9 0 0 1 2.8 2.8L7.7 15.1l-3.6.8.8-3.6z"/></svg>';
+  function toolEditUrl(file) {
+    if (!file || !file.viewUrl) return '';
+    var k = fileKind(file.name, file.contentType);
+    var name = file.name || '';
+    if (k === 'image') return '/tools/image?source_image_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_image_name=' + encodeURIComponent(name) : '');
+    if (k === 'video') return '/tools/video?source_video_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_video_name=' + encodeURIComponent(name) : '');
+    return '';
+  }
+  function toolEditLink(file, className) {
+    var href = toolEditUrl(file);
+    if (!href) return null;
+    var a = document.createElement('a');
+    a.className = className;
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.title = 'Edit in the ' + (fileKind(file.name, file.contentType) === 'video' ? 'video' : 'image') + ' tool';
+    a.setAttribute('aria-label', a.title);
+    // The card itself opens the lightbox; the pencil must not also trigger it.
+    a.addEventListener('click', function (e) { e.stopPropagation(); });
+    return a;
+  }
+
   // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
   // fenced + inline code, bold/italic/links). Escapes first, then injects tags
   // (same order as linkify). Backticks are built via char codes to avoid
@@ -1882,7 +1925,9 @@ html,body{margin:0;background:#050604;color:#fffbe6}
     var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
     var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
     var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
-    head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
+    // Same hand-off as the card pencil, spelled out as a labelled action here.
+    var editBtn = document.createElement('a'); editBtn.className = 'rk-aichat-preview-act'; editBtn.target = '_blank'; editBtn.rel = 'noopener noreferrer'; editBtn.textContent = 'Edit';
+    head.appendChild(nameEl); head.appendChild(editBtn); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
     function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
     // Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
     // durable public S3 URL. Download opens in a new tab when the browser can't
@@ -1931,6 +1976,9 @@ html,body{margin:0;background:#050604;color:#fffbe6}
       var it = items[idx];
       nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
       dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
+      var editHref = toolEditUrl(it);
+      editBtn.hidden = !editHref;
+      if (editHref) { editBtn.href = editHref; editBtn.title = 'Edit in the ' + (fileKind(it.name, it.contentType) === 'video' ? 'video' : 'image') + ' tool'; }
       linkBtn.style.display = it.publicUrl ? '' : 'none';
       body.innerHTML = '';
       var kind = fileKind(it.name, it.contentType);
@@ -1985,7 +2033,15 @@ html,body{margin:0;background:#050604;color:#fffbe6}
     var files = [], seen = {};
     var arts = (job && job.artifacts) || [];
     for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
-    var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
+    // Name the direct result URL after the FILE, not the tracer — fileKind() reads the
+    // extension, and a tracer-named entry ("my-poster") classifies as 'other', losing
+    // the image/video thumbnail and the edit-in-tool hand-off.
+    var mu = rkResultMediaUrl(job);
+    if (mu && !seen[mu]) {
+      seen[mu] = true;
+      var seg = String(mu).split('?')[0].split('/').pop() || '';
+      files.push({ name: (/.[a-z0-9]{2,5}$/i.test(seg) ? seg : (job.tracer || 'output')), contentType: '', viewUrl: mu, publicUrl: mu });
+    }
     var res = job && job.result;
     if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
       try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
@@ -2038,14 +2094,21 @@ html,body{margin:0;background:#050604;color:#fffbe6}
         var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
         list.forEach(function (f, ix) {
           var k = fileKind(f.name, f.contentType);
-          var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
+          // A div, not a button: media cards carry a nested "edit in tool" link, and
+          // an anchor inside a button is invalid (and unclickable in some browsers).
+          var card = document.createElement('div'); card.className = 'rk-aichat-file'; card.tabIndex = 0; card.setAttribute('role', 'button');
           var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
           if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
           else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
           else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
+          var edit = toolEditLink(f, 'rk-aichat-file-open');
+          if (edit) { edit.innerHTML = PENCIL_SVG; thumb.appendChild(edit); }
           var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
           card.appendChild(thumb); card.appendChild(nm);
           card.addEventListener('click', function () { openFilePreview(list, ix); });
+          card.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFilePreview(list, ix); }
+          });
           grid.appendChild(card);
         });
         wrap.appendChild(grid); turn.appendChild(wrap); logBottom();

package/public/serve-shells/library-files.html

@@ -591,6 +591,7 @@
   background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
   transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-act[hidden]{display:none}
 
 /* ── markdown pipe tables (assistant messages + .md previews) ── */
 .rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
@@ -622,6 +623,14 @@
 .rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
 .rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
 .rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
+/* "Edit in the tool" pencil — only on image/video cards; opens /tools/image or
+   /tools/video in a new tab with this file preloaded as the working file. */
+.rk-aichat-file-open{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:var(--rk-r-md);
+  display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--rk-border);color:var(--rk-ink);
+  opacity:0;transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease);z-index:2}
+.rk-aichat-file-open svg{width:13px;height:13px}
+.rk-aichat-file:hover .rk-aichat-file-open,.rk-aichat-file-open:focus-visible{opacity:1}
+.rk-aichat-file-open:hover{background:var(--rk-gold-tint)}
 
 /* create_video pipeline: live status row + clickable result links */
 .rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
@@ -2148,6 +2157,34 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
   }
   function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
 
+  // ── "edit this media" hand-off: dock chat → the matching creative tool ──
+  // Images open /tools/image, videos /tools/video, each with the file preloaded as
+  // that tool's working file (its chat then edits THAT media). Deliberately a fresh
+  // tool session — no ?tracer — so the tool names its own chat from the first prompt.
+  var PENCIL_SVG = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.6 3.6a1.9 1.9 0 0 1 2.8 2.8L7.7 15.1l-3.6.8.8-3.6z"/></svg>';
+  function toolEditUrl(file) {
+    if (!file || !file.viewUrl) return '';
+    var k = fileKind(file.name, file.contentType);
+    var name = file.name || '';
+    if (k === 'image') return '/tools/image?source_image_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_image_name=' + encodeURIComponent(name) : '');
+    if (k === 'video') return '/tools/video?source_video_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_video_name=' + encodeURIComponent(name) : '');
+    return '';
+  }
+  function toolEditLink(file, className) {
+    var href = toolEditUrl(file);
+    if (!href) return null;
+    var a = document.createElement('a');
+    a.className = className;
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.title = 'Edit in the ' + (fileKind(file.name, file.contentType) === 'video' ? 'video' : 'image') + ' tool';
+    a.setAttribute('aria-label', a.title);
+    // The card itself opens the lightbox; the pencil must not also trigger it.
+    a.addEventListener('click', function (e) { e.stopPropagation(); });
+    return a;
+  }
+
   // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
   // fenced + inline code, bold/italic/links). Escapes first, then injects tags
   // (same order as linkify). Backticks are built via char codes to avoid
@@ -2208,7 +2245,9 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
     var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
     var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
-    head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
+    // Same hand-off as the card pencil, spelled out as a labelled action here.
+    var editBtn = document.createElement('a'); editBtn.className = 'rk-aichat-preview-act'; editBtn.target = '_blank'; editBtn.rel = 'noopener noreferrer'; editBtn.textContent = 'Edit';
+    head.appendChild(nameEl); head.appendChild(editBtn); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
     function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
     // Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
     // durable public S3 URL. Download opens in a new tab when the browser can't
@@ -2257,6 +2296,9 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
       var it = items[idx];
       nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
       dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
+      var editHref = toolEditUrl(it);
+      editBtn.hidden = !editHref;
+      if (editHref) { editBtn.href = editHref; editBtn.title = 'Edit in the ' + (fileKind(it.name, it.contentType) === 'video' ? 'video' : 'image') + ' tool'; }
       linkBtn.style.display = it.publicUrl ? '' : 'none';
       body.innerHTML = '';
       var kind = fileKind(it.name, it.contentType);
@@ -2311,7 +2353,15 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     var files = [], seen = {};
     var arts = (job && job.artifacts) || [];
     for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
-    var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
+    // Name the direct result URL after the FILE, not the tracer — fileKind() reads the
+    // extension, and a tracer-named entry ("my-poster") classifies as 'other', losing
+    // the image/video thumbnail and the edit-in-tool hand-off.
+    var mu = rkResultMediaUrl(job);
+    if (mu && !seen[mu]) {
+      seen[mu] = true;
+      var seg = String(mu).split('?')[0].split('/').pop() || '';
+      files.push({ name: (/.[a-z0-9]{2,5}$/i.test(seg) ? seg : (job.tracer || 'output')), contentType: '', viewUrl: mu, publicUrl: mu });
+    }
     var res = job && job.result;
     if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
       try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
@@ -2364,14 +2414,21 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
         var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
         list.forEach(function (f, ix) {
           var k = fileKind(f.name, f.contentType);
-          var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
+          // A div, not a button: media cards carry a nested "edit in tool" link, and
+          // an anchor inside a button is invalid (and unclickable in some browsers).
+          var card = document.createElement('div'); card.className = 'rk-aichat-file'; card.tabIndex = 0; card.setAttribute('role', 'button');
           var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
           if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
           else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
           else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
+          var edit = toolEditLink(f, 'rk-aichat-file-open');
+          if (edit) { edit.innerHTML = PENCIL_SVG; thumb.appendChild(edit); }
           var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
           card.appendChild(thumb); card.appendChild(nm);
           card.addEventListener('click', function () { openFilePreview(list, ix); });
+          card.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFilePreview(list, ix); }
+          });
           grid.appendChild(card);
         });
         wrap.appendChild(grid); turn.appendChild(wrap); logBottom();

package/public/serve-shells/library-raws.html

@@ -591,6 +591,7 @@
   background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
   transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-act[hidden]{display:none}
 
 /* ── markdown pipe tables (assistant messages + .md previews) ── */
 .rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
@@ -622,6 +623,14 @@
 .rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
 .rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
 .rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
+/* "Edit in the tool" pencil — only on image/video cards; opens /tools/image or
+   /tools/video in a new tab with this file preloaded as the working file. */
+.rk-aichat-file-open{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:var(--rk-r-md);
+  display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--rk-border);color:var(--rk-ink);
+  opacity:0;transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease);z-index:2}
+.rk-aichat-file-open svg{width:13px;height:13px}
+.rk-aichat-file:hover .rk-aichat-file-open,.rk-aichat-file-open:focus-visible{opacity:1}
+.rk-aichat-file-open:hover{background:var(--rk-gold-tint)}
 
 /* create_video pipeline: live status row + clickable result links */
 .rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
@@ -3224,6 +3233,34 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
   }
   function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
 
+  // ── "edit this media" hand-off: dock chat → the matching creative tool ──
+  // Images open /tools/image, videos /tools/video, each with the file preloaded as
+  // that tool's working file (its chat then edits THAT media). Deliberately a fresh
+  // tool session — no ?tracer — so the tool names its own chat from the first prompt.
+  var PENCIL_SVG = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.6 3.6a1.9 1.9 0 0 1 2.8 2.8L7.7 15.1l-3.6.8.8-3.6z"/></svg>';
+  function toolEditUrl(file) {
+    if (!file || !file.viewUrl) return '';
+    var k = fileKind(file.name, file.contentType);
+    var name = file.name || '';
+    if (k === 'image') return '/tools/image?source_image_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_image_name=' + encodeURIComponent(name) : '');
+    if (k === 'video') return '/tools/video?source_video_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_video_name=' + encodeURIComponent(name) : '');
+    return '';
+  }
+  function toolEditLink(file, className) {
+    var href = toolEditUrl(file);
+    if (!href) return null;
+    var a = document.createElement('a');
+    a.className = className;
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.title = 'Edit in the ' + (fileKind(file.name, file.contentType) === 'video' ? 'video' : 'image') + ' tool';
+    a.setAttribute('aria-label', a.title);
+    // The card itself opens the lightbox; the pencil must not also trigger it.
+    a.addEventListener('click', function (e) { e.stopPropagation(); });
+    return a;
+  }
+
   // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
   // fenced + inline code, bold/italic/links). Escapes first, then injects tags
   // (same order as linkify). Backticks are built via char codes to avoid
@@ -3284,7 +3321,9 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
     var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
     var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
-    head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
+    // Same hand-off as the card pencil, spelled out as a labelled action here.
+    var editBtn = document.createElement('a'); editBtn.className = 'rk-aichat-preview-act'; editBtn.target = '_blank'; editBtn.rel = 'noopener noreferrer'; editBtn.textContent = 'Edit';
+    head.appendChild(nameEl); head.appendChild(editBtn); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
     function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
     // Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
     // durable public S3 URL. Download opens in a new tab when the browser can't
@@ -3333,6 +3372,9 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
       var it = items[idx];
       nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
       dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
+      var editHref = toolEditUrl(it);
+      editBtn.hidden = !editHref;
+      if (editHref) { editBtn.href = editHref; editBtn.title = 'Edit in the ' + (fileKind(it.name, it.contentType) === 'video' ? 'video' : 'image') + ' tool'; }
       linkBtn.style.display = it.publicUrl ? '' : 'none';
       body.innerHTML = '';
       var kind = fileKind(it.name, it.contentType);
@@ -3387,7 +3429,15 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     var files = [], seen = {};
     var arts = (job && job.artifacts) || [];
     for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
-    var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
+    // Name the direct result URL after the FILE, not the tracer — fileKind() reads the
+    // extension, and a tracer-named entry ("my-poster") classifies as 'other', losing
+    // the image/video thumbnail and the edit-in-tool hand-off.
+    var mu = rkResultMediaUrl(job);
+    if (mu && !seen[mu]) {
+      seen[mu] = true;
+      var seg = String(mu).split('?')[0].split('/').pop() || '';
+      files.push({ name: (/.[a-z0-9]{2,5}$/i.test(seg) ? seg : (job.tracer || 'output')), contentType: '', viewUrl: mu, publicUrl: mu });
+    }
     var res = job && job.result;
     if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
       try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
@@ -3440,14 +3490,21 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
         var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
         list.forEach(function (f, ix) {
           var k = fileKind(f.name, f.contentType);
-          var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
+          // A div, not a button: media cards carry a nested "edit in tool" link, and
+          // an anchor inside a button is invalid (and unclickable in some browsers).
+          var card = document.createElement('div'); card.className = 'rk-aichat-file'; card.tabIndex = 0; card.setAttribute('role', 'button');
           var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
           if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
           else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
           else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
+          var edit = toolEditLink(f, 'rk-aichat-file-open');
+          if (edit) { edit.innerHTML = PENCIL_SVG; thumb.appendChild(edit); }
           var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
           card.appendChild(thumb); card.appendChild(nm);
           card.addEventListener('click', function () { openFilePreview(list, ix); });
+          card.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFilePreview(list, ix); }
+          });
           grid.appendChild(card);
         });
         wrap.appendChild(grid); turn.appendChild(wrap); logBottom();

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

@@ -591,6 +591,7 @@
   background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:4px 11px;text-decoration:none;line-height:1.4;
   transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-aichat-preview-act:hover{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-aichat-preview-act[hidden]{display:none}
 
 /* ── markdown pipe tables (assistant messages + .md previews) ── */
 .rk-md-tablewrap{max-width:100%;overflow-x:auto;margin:8px 0;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg)}
@@ -622,6 +623,14 @@
 .rk-aichat-file-thumb--markdown,.rk-aichat-file-thumb--text{background:var(--rk-n-50)}.rk-aichat-file-thumb--audio{background:var(--rk-gold-tint2)}
 .rk-aichat-file-play{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
 .rk-aichat-file-name{font-size:11px;font-weight:600;color:var(--rk-n-600);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
+/* "Edit in the tool" pencil — only on image/video cards; opens /tools/image or
+   /tools/video in a new tab with this file preloaded as the working file. */
+.rk-aichat-file-open{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:var(--rk-r-md);
+  display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--rk-border);color:var(--rk-ink);
+  opacity:0;transition:opacity var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease);z-index:2}
+.rk-aichat-file-open svg{width:13px;height:13px}
+.rk-aichat-file:hover .rk-aichat-file-open,.rk-aichat-file-open:focus-visible{opacity:1}
+.rk-aichat-file-open:hover{background:var(--rk-gold-tint)}
 
 /* create_video pipeline: live status row + clickable result links */
 .rk-aichat-flow{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rk-text-muted);padding:2px 2px}
@@ -2674,6 +2683,34 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
   }
   function fileIcon(kind) { return kind === 'pdf' ? '📕' : kind === 'json' ? '{ }' : kind === 'markdown' ? '📝' : kind === 'audio' ? '🎵' : kind === 'text' ? '📄' : '📄'; }
 
+  // ── "edit this media" hand-off: dock chat → the matching creative tool ──
+  // Images open /tools/image, videos /tools/video, each with the file preloaded as
+  // that tool's working file (its chat then edits THAT media). Deliberately a fresh
+  // tool session — no ?tracer — so the tool names its own chat from the first prompt.
+  var PENCIL_SVG = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.6 3.6a1.9 1.9 0 0 1 2.8 2.8L7.7 15.1l-3.6.8.8-3.6z"/></svg>';
+  function toolEditUrl(file) {
+    if (!file || !file.viewUrl) return '';
+    var k = fileKind(file.name, file.contentType);
+    var name = file.name || '';
+    if (k === 'image') return '/tools/image?source_image_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_image_name=' + encodeURIComponent(name) : '');
+    if (k === 'video') return '/tools/video?source_video_url=' + encodeURIComponent(file.viewUrl) + (name ? '&source_video_name=' + encodeURIComponent(name) : '');
+    return '';
+  }
+  function toolEditLink(file, className) {
+    var href = toolEditUrl(file);
+    if (!href) return null;
+    var a = document.createElement('a');
+    a.className = className;
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.title = 'Edit in the ' + (fileKind(file.name, file.contentType) === 'video' ? 'video' : 'image') + ' tool';
+    a.setAttribute('aria-label', a.title);
+    // The card itself opens the lightbox; the pencil must not also trigger it.
+    a.addEventListener('click', function (e) { e.stopPropagation(); });
+    return a;
+  }
+
   // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
   // fenced + inline code, bold/italic/links). Escapes first, then injects tags
   // (same order as linkify). Backticks are built via char codes to avoid
@@ -2734,7 +2771,9 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     var dlBtn = document.createElement('a'); dlBtn.className = 'rk-aichat-preview-act'; dlBtn.target = '_blank'; dlBtn.rel = 'noopener noreferrer'; dlBtn.textContent = 'Download';
     var linkBtn = document.createElement('button'); linkBtn.type = 'button'; linkBtn.className = 'rk-aichat-preview-act'; linkBtn.textContent = 'Copy link';
     var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
-    head.appendChild(nameEl); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
+    // Same hand-off as the card pencil, spelled out as a labelled action here.
+    var editBtn = document.createElement('a'); editBtn.className = 'rk-aichat-preview-act'; editBtn.target = '_blank'; editBtn.rel = 'noopener noreferrer'; editBtn.textContent = 'Edit';
+    head.appendChild(nameEl); head.appendChild(editBtn); head.appendChild(copyBtn); head.appendChild(dlBtn); head.appendChild(linkBtn); head.appendChild(xBtn);
     function flashAct(btn, label) { var o = btn.getAttribute('data-label') || btn.textContent; btn.setAttribute('data-label', o); btn.textContent = label; setTimeout(function () { btn.textContent = o; }, 1400); }
     // Copy = file text (json/md/txt) or its URL for binaries. Copy link = the
     // durable public S3 URL. Download opens in a new tab when the browser can't
@@ -2783,6 +2822,9 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
       var it = items[idx];
       nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
       dlBtn.href = it.viewUrl; dlBtn.setAttribute('download', it.name || '');
+      var editHref = toolEditUrl(it);
+      editBtn.hidden = !editHref;
+      if (editHref) { editBtn.href = editHref; editBtn.title = 'Edit in the ' + (fileKind(it.name, it.contentType) === 'video' ? 'video' : 'image') + ' tool'; }
       linkBtn.style.display = it.publicUrl ? '' : 'none';
       body.innerHTML = '';
       var kind = fileKind(it.name, it.contentType);
@@ -2837,7 +2879,15 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     var files = [], seen = {};
     var arts = (job && job.artifacts) || [];
     for (var i = 0; i < arts.length; i++) { var f = rkFileFromArtifact(arts[i]); if (f && !seen[f.viewUrl]) { seen[f.viewUrl] = true; files.push(f); } }
-    var mu = rkResultMediaUrl(job); if (mu && !seen[mu]) { seen[mu] = true; files.push({ name: (job.tracer || 'output'), contentType: '', viewUrl: mu, publicUrl: mu }); }
+    // Name the direct result URL after the FILE, not the tracer — fileKind() reads the
+    // extension, and a tracer-named entry ("my-poster") classifies as 'other', losing
+    // the image/video thumbnail and the edit-in-tool hand-off.
+    var mu = rkResultMediaUrl(job);
+    if (mu && !seen[mu]) {
+      seen[mu] = true;
+      var seg = String(mu).split('?')[0].split('/').pop() || '';
+      files.push({ name: (/.[a-z0-9]{2,5}$/i.test(seg) ? seg : (job.tracer || 'output')), contentType: '', viewUrl: mu, publicUrl: mu });
+    }
     var res = job && job.result;
     if (res && typeof res === 'object' && !Array.isArray(res) && Object.keys(res).length) {
       try { var blob = new Blob([JSON.stringify(res, null, 2)], { type: 'application/json' }); files.push({ name: (job.tracer || 'result') + '.json', contentType: 'application/json', viewUrl: URL.createObjectURL(blob), publicUrl: null }); } catch (e) {}
@@ -2890,14 +2940,21 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
         var grid = document.createElement('div'); grid.className = 'rk-aichat-files-grid';
         list.forEach(function (f, ix) {
           var k = fileKind(f.name, f.contentType);
-          var card = document.createElement('button'); card.type = 'button'; card.className = 'rk-aichat-file';
+          // A div, not a button: media cards carry a nested "edit in tool" link, and
+          // an anchor inside a button is invalid (and unclickable in some browsers).
+          var card = document.createElement('div'); card.className = 'rk-aichat-file'; card.tabIndex = 0; card.setAttribute('role', 'button');
           var thumb = document.createElement('div'); thumb.className = 'rk-aichat-file-thumb rk-aichat-file-thumb--' + k;
           if (k === 'image') { var im = document.createElement('img'); im.src = f.viewUrl; im.alt = ''; im.loading = 'lazy'; thumb.appendChild(im); }
           else if (k === 'video') { var v = document.createElement('video'); v.src = f.viewUrl; v.muted = true; v.preload = 'metadata'; v.playsInline = true; thumb.appendChild(v); var pl = document.createElement('span'); pl.className = 'rk-aichat-file-play'; pl.textContent = '▶'; thumb.appendChild(pl); }
           else { var ic = document.createElement('span'); ic.className = 'rk-aichat-file-ic'; ic.textContent = fileIcon(k); thumb.appendChild(ic); }
+          var edit = toolEditLink(f, 'rk-aichat-file-open');
+          if (edit) { edit.innerHTML = PENCIL_SVG; thumb.appendChild(edit); }
           var nm = document.createElement('div'); nm.className = 'rk-aichat-file-name'; nm.textContent = f.name || 'file'; nm.title = f.name || '';
           card.appendChild(thumb); card.appendChild(nm);
           card.addEventListener('click', function () { openFilePreview(list, ix); });
+          card.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFilePreview(list, ix); }
+          });
           grid.appendChild(card);
         });
         wrap.appendChild(grid); turn.appendChild(wrap); logBottom();