@mevdragon/vidfarm-devcli 0.19.1 → 0.20.1

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

@@ -1,39 +1,47 @@
 // /tools/clipper — the third creative-tool twin. Where /tools/image does masked
 // image edits and /tools/video does time-scoped video edits, /tools/clipper cuts
-// EXACT subranges out of a source video into the raws library. It plays the
-// source straight from its resolved RapidAPI/direct URL (nothing is uploaded to
-// preview), lets the user pick an in/out point down to sub-second precision
-// (HH:MM:SS:NNNN), shows a live estimate of the clip length, and on "Save clip"
-// POSTs to /raws/clip-range which trims just that window and lands one raw. It is
-// a MULTI-CLIP surface — the source stays loaded so you can grab clip after clip,
-// each grouped under the session's tracer/folder and listed in "Clips this
-// session", with a past-sessions slide-in grouped by tracer (like /tools/video).
+// EXACT subranges out of a source video (or audio) into the raws library. It
+// plays the source straight from its resolved RapidAPI/direct URL (nothing is
+// uploaded to preview), lets the user pick an in/out point down to sub-second
+// precision (HH:MM:SS:NNNN) on ONE unified timeline shared with the playhead,
+// shows a live estimate of the clip length, and on "Clip Media" POSTs to
+// /raws/clip-range which trims just that window and lands one raw. It is a
+// MULTI-CLIP surface — the source stays loaded so you can grab clip after clip,
+// each grouped under the session's tracer/folder and listed in the right-hand
+// history card, with a past-sessions slide-in grouped by tracer (like /tools/*).
+//
+// Layout: one big LEFT column (source URL + compact ingest above the preview;
+// video preview; unified in/out timeline + <advanced> below) and a RIGHT history
+// card styled to match /tools/image. Works for audio sources too.
 //
 // Data flow:
 //   • load source  → POST /raws/resolve-source { source_url } → { preview_url, ... }
-//   • save clip     → POST /raws/clip-range { preview_url, start_sec, end_sec, tracer, folder_path, name }
+//   • clip media    → POST /raws/clip-range { preview_url, start_sec, end_sec, tracer, folder_path, name, notes, audio_only }
 //   • session list  → GET /raws/feed?folder=<slug>  (this session's clips)
 //   • past sessions → GET /raws/feed?limit=200 grouped by folder_path/tracer
 import { reskinDocument } from "./document.js";
 import { renderInpaintModeTabs, INPAINT_TABS_CSS } from "./inpaint-page.js";
-const UPLOAD_ICON = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`;
+const UPLOAD_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`;
 const GEAR_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8.8 3.4 9.4 2h1.2l.6 1.4 1.2.5 1.4-.6.9.9-.6 1.4.5 1.2 1.4.6v1.2l-1.4.6-.5 1.2.6 1.4-.9.9-1.4-.6-1.2.5-.6 1.4H9.4l-.6-1.4-1.2-.5-1.4.6-.9-.9.6-1.4-.5-1.2L4 8.6V7.4l1.4-.6.5-1.2-.6-1.4.9-.9 1.4.6 1.2-.5Z"/><circle cx="10" cy="8" r="2.4"/></svg>`;
 const HISTORY_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 10a6.8 6.8 0 1 1 2 4.8"/><path d="M3.2 14.4v-3.6h3.6"/><path d="M10 6.2V10l2.6 1.6"/></svg>`;
+const REFRESH_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-1.9-4.6"/><path d="M16.5 4.2v4.2h-4.2"/></svg>`;
 const PLUS_ICON = `<svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12"/><path d="M4 10h12"/></svg>`;
 const CLIP_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.1 8.1 20 18M8.1 15.9 20 6"/></svg>`;
 const PLAY_ICON = `<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>`;
 const PAUSE_ICON = `<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>`;
 const CLOSE_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg>`;
-const FOLDER_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 5.5A1.5 1.5 0 0 1 4 4h3.2l1.4 1.6H16a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 16 15.6H4a1.5 1.5 0 0 1-1.5-1.5Z"/></svg>`;
+const FOLDER_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 5.5A1.5 1.5 0 0 1 4 4h3.2l1.4 1.6H16a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 16 15.6H4a1.5 1.5 0 0 1-1.5-1.5Z"/></svg>`;
+const CHEVRON_ICON = `<svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 8 4 4 4-4"/></svg>`;
+const AUDIO_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4"/><path d="M8 6v12"/><path d="M12 3v18"/><path d="M16 7v10"/><path d="M20 10v4"/></svg>`;
 export function renderReskinInpaintClipper(input = {}) {
     const boot = { accountId: input.accountId || "", isLoggedIn: Boolean(input.isLoggedIn) };
     const body = `
 <main class="rk-container-wide rk-page rk-inpaint-page rk-clp-page">
-  <div class="rk-page-head rk-inpaint-head">
+  <div class="rk-page-head rk-inpaint-head rk-clp-head">
     <div class="rk-inpaint-head-text">
       ${renderInpaintModeTabs("clipper")}
-      <h1 class="rk-h1">Clip a Video</h1>
-      <p class="rk-sub">Paste (or upload) a video, scrub to the exact moment, and set a precise <strong>in</strong> and <strong>out</strong> point (HH:MM:SS:NNNN). Only the selected subrange is saved to your raws — grab as many clips as you like from the same source.</p>
+      <h1 class="rk-h1">Clip Media</h1>
+      <p class="rk-sub">Paste (or upload) a video or audio source, scrub to the exact moment, and drag the <strong>in</strong> and <strong>out</strong> edges on the timeline (HH:MM:SS:NNNN). Only the selected subrange is saved to your raws — grab as many clips as you like from the same source.</p>
     </div>
     <div class="rk-inpaint-toolbar">
       <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-inpaint-startnew" data-clp-start-new>${PLUS_ICON} Start New</button>
@@ -42,115 +50,137 @@ export function renderReskinInpaintClipper(input = {}) {
     </div>
   </div>
 
-  <div class="rk-inpaint-workbench rk-clp-workbench">
-    <!-- LEFT: source + subrange controls -->
-    <section class="rk-inpaint-panel" aria-label="Clip controls">
-      <div class="rk-inpaint-block">
-        <label class="rk-label" for="rkClpUrl">Source video URL</label>
+  <div class="rk-clp-workbench">
+    <!-- LEFT: source (top) → preview → timeline + advanced (bottom) -->
+    <section class="rk-clp-main" aria-label="Clip controls">
+      <!-- Source, above the preview -->
+      <div class="rk-clp-sourcebar">
+        <label class="rk-label" for="rkClpUrl">Source URL <span class="rk-hint">video or audio</span></label>
         <div class="rk-clp-urlrow">
-          <input class="rk-input" id="rkClpUrl" data-clp-url-input type="url" placeholder="https://youtube.com/watch?v=… or https://…/video.mp4" autocomplete="off" spellcheck="false" />
-          <button type="button" class="rk-btn rk-btn-gold rk-btn-sm" data-clp-url-load>Load</button>
-        </div>
-        <div class="rk-clp-ingest">
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-clp-upload>${UPLOAD_ICON}<span>Upload</span></button>
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-clp-attach>${FOLDER_ICON}<span>From Files</span></button>
+          <input class="rk-input" id="rkClpUrl" data-clp-url-input type="url" placeholder="https://youtube.com/watch?v=… or https://…/media.mp4" autocomplete="off" spellcheck="false" />
+          <button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-clp-loadbtn" data-clp-url-load>Load</button>
+          <span class="rk-clp-or">or</span>
+          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-upload title="Upload from your computer" aria-label="Upload">${UPLOAD_ICON}</button>
+          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-attach title="Attach from your Files" aria-label="From Files">${FOLDER_ICON}</button>
         </div>
-        <input data-clp-file type="file" accept="video/mp4,video/quicktime,video/webm,video/x-matroska,video/*" hidden />
-        <span class="rk-hint">TikTok, YouTube, Instagram, X, or a direct link — we play it straight from the source; nothing is saved until you clip.</span>
+        <input data-clp-file type="file" accept="video/*,audio/*" hidden />
+        <span class="rk-hint rk-clp-sourcehint">TikTok, YouTube, Instagram, X, or a direct link — we play it straight from the source; nothing is saved until you clip.</span>
       </div>
 
-      <div class="rk-inpaint-block rk-clp-rangeblock" data-clp-range-controls hidden>
-        <div class="rk-inpaint-brushrow">
-          <label class="rk-label">Subrange</label>
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-xs" data-clp-whole title="Select the whole video">Whole video</button>
+      <!-- Preview -->
+      <div class="rk-clp-stage" data-clp-stage>
+        <div class="rk-clp-empty" data-clp-empty>
+          <span class="rk-clp-empty-ic" aria-hidden="true">${CLIP_ICON}</span>
+          <p>Load media to start clipping.</p>
+          <span>Paste a URL and hit <strong>Load</strong>, or upload a file.</span>
         </div>
-
-        <div class="rk-clp-inout">
-          <div class="rk-clp-field">
-            <div class="rk-clp-field-head">
-              <span class="rk-clp-field-label">In</span>
-              <button type="button" class="rk-clp-tinybtn" data-clp-set-start title="Set in-point to the playhead">Set to playhead</button>
+        <div class="rk-clp-player" data-clp-player hidden>
+          <div class="rk-clp-videowrap" data-clp-videowrap>
+            <video data-clp-video playsinline preload="auto"></video>
+            <div class="rk-clp-audioposter" data-clp-audio-poster hidden>
+              <span class="rk-clp-audioposter-ic" aria-hidden="true">${AUDIO_ICON}</span>
+              <span>Audio source</span>
             </div>
-            <input class="rk-input rk-clp-tc" data-clp-start-input type="text" inputmode="numeric" placeholder="00:00:00:0000" value="00:00:00:0000" />
-            <input class="rk-clp-slider" data-clp-start-slider type="range" min="0" max="1000" step="1" value="0" aria-label="In point" />
           </div>
-          <div class="rk-clp-field">
-            <div class="rk-clp-field-head">
-              <span class="rk-clp-field-label">Out</span>
-              <button type="button" class="rk-clp-tinybtn" data-clp-set-end title="Set out-point to the playhead">Set to playhead</button>
-            </div>
-            <input class="rk-input rk-clp-tc" data-clp-end-input type="text" inputmode="numeric" placeholder="00:00:00:0000" value="00:00:00:0000" />
-            <input class="rk-clp-slider" data-clp-end-slider type="range" min="0" max="1000" step="1" value="1000" aria-label="Out point" />
+        </div>
+      </div>
+
+      <!-- Transport + unified timeline (only when a source is loaded) -->
+      <div class="rk-clp-controls" data-clp-controls hidden>
+        <div class="rk-clp-transport">
+          <button type="button" class="rk-ip-iconbtn rk-clp-playpause" data-clp-playpause aria-label="Play / pause">${PLAY_ICON}</button>
+          <input class="rk-clp-tc rk-clp-tc-now" data-clp-timecode type="text" inputmode="numeric" value="00:00:00:0000" aria-label="Current time" />
+          <span class="rk-clp-duration" data-clp-duration>/ 00:00:00:0000</span>
+          <div class="rk-clp-spacer"></div>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-xs" data-clp-whole title="Select the whole source">Whole</button>
+        </div>
+
+        <!-- ONE timeline: playhead + draggable in/out edges + selected subrange -->
+        <div class="rk-clp-timeline" data-clp-timeline>
+          <div class="rk-clp-tl-track" data-clp-tl-track>
+            <div class="rk-clp-tl-sel" data-clp-tl-sel></div>
+            <div class="rk-clp-tl-playhead" data-clp-tl-playhead aria-hidden="true"></div>
+            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-in" data-clp-tl-in aria-label="In point"><span></span></button>
+            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-out" data-clp-tl-out aria-label="Out point"><span></span></button>
           </div>
         </div>
 
-        <div class="rk-clp-estimate" data-clp-estimate>Clip length — <strong data-clp-length>0:00.0</strong></div>
+        <div class="rk-clp-inout">
+          <label class="rk-clp-field">
+            <span class="rk-clp-field-label">In</span>
+            <input class="rk-input rk-clp-tc" data-clp-start-input type="text" inputmode="numeric" value="00:00:00:0000" />
+            <button type="button" class="rk-clp-tinybtn" data-clp-set-start title="Set in-point to the playhead">Set to playhead</button>
+          </label>
+          <label class="rk-clp-field">
+            <span class="rk-clp-field-label">Out</span>
+            <input class="rk-input rk-clp-tc" data-clp-end-input type="text" inputmode="numeric" value="00:00:00:0000" />
+            <button type="button" class="rk-clp-tinybtn" data-clp-set-end title="Set out-point to the playhead">Set to playhead</button>
+          </label>
+          <div class="rk-clp-lenbox">
+            <span class="rk-clp-field-label">Length</span>
+            <strong data-clp-length>0:00.0</strong>
+          </div>
+        </div>
         <div class="rk-clp-rangenote" data-clp-range-note hidden></div>
-      </div>
 
-      <div class="rk-inpaint-block rk-clp-saveblock" data-clp-save-block hidden>
-        <label class="rk-label" for="rkClpName">Clip name <span class="rk-hint">optional</span></label>
-        <input class="rk-input" id="rkClpName" data-clp-name type="text" placeholder="hook-01" autocomplete="off" />
-        <label class="rk-label" for="rkClpFolder" style="margin-top:10px">Save to raws folder <span class="rk-hint">optional</span></label>
-        <input class="rk-input" id="rkClpFolder" data-clp-folder type="text" placeholder="defaults to the session tracer" autocomplete="off" spellcheck="false" />
+        <!-- Advanced (collapsed) -->
+        <div class="rk-clp-advanced" data-clp-advanced>
+          <button type="button" class="rk-clp-adv-toggle" data-clp-adv-toggle aria-expanded="false">
+            <span class="rk-clp-adv-chev" aria-hidden="true">${CHEVRON_ICON}</span>
+            <span>Advanced</span>
+            <span class="rk-hint rk-clp-adv-hint">name · notes · audio only</span>
+          </button>
+          <div class="rk-clp-adv-body" data-clp-adv-body hidden>
+            <label class="rk-label" for="rkClpName">Filename <span class="rk-hint">optional</span></label>
+            <input class="rk-input" id="rkClpName" data-clp-name type="text" placeholder="hook-01" autocomplete="off" />
+            <label class="rk-label" for="rkClpNotes" style="margin-top:11px">Notes <span class="rk-hint">helps you find this clip later by search</span></label>
+            <textarea class="rk-input rk-clp-notes" id="rkClpNotes" data-clp-notes rows="2" placeholder="What's in this clip / how you'll use it — indexed for search."></textarea>
+            <label class="rk-label" for="rkClpFolder" style="margin-top:11px">Save to raws folder <span class="rk-hint">optional</span></label>
+            <input class="rk-input" id="rkClpFolder" data-clp-folder type="text" placeholder="defaults to the session tracer" autocomplete="off" spellcheck="false" />
+            <label class="rk-clp-audio-toggle">
+              <input type="checkbox" data-clp-audio-only />
+              <span class="rk-clp-audio-text">
+                <strong>Clip audio only</strong>
+                <span class="rk-hint">Save just the sound (no video) — e.g. grab a track from a copyright-free sound video. Your choice is remembered.</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
         <button type="button" class="rk-btn rk-btn-gold rk-clp-savebtn" data-clp-save>
-          ${CLIP_ICON}<span data-clp-save-label>Save clip to raws</span>
+          ${CLIP_ICON}<span data-clp-save-label>Clip Media</span>
         </button>
         <div class="rk-clp-status" data-clp-status role="status"></div>
       </div>
     </section>
 
-    <!-- CENTER: video preview + timeline -->
-    <section class="rk-inpaint-stage rk-clp-stage" aria-label="Video preview">
-      <div class="rk-clp-empty" data-clp-empty>
-        <div class="rk-clp-empty-inner">
-          ${CLIP_ICON}
-          <p>Load a video to start clipping.</p>
-          <span>Paste a URL and hit <strong>Load</strong>, or upload a file.</span>
+    <!-- RIGHT: this-session history card -->
+    <aside class="rk-clp-side" aria-label="Clips this session">
+      <div class="rk-clp-side-card">
+        <div class="rk-clp-side-head">
+          <h2 class="rk-inpaint-h2">This session</h2>
+          <button type="button" class="rk-ip-iconbtn rk-ip-iconbtn-sm" data-clp-session-refresh aria-label="Refresh" title="Refresh">${REFRESH_ICON}</button>
         </div>
-      </div>
-      <div class="rk-clp-player" data-clp-player hidden>
-        <div class="rk-clp-videowrap">
-          <video data-clp-video playsinline preload="auto"></video>
+        <div class="rk-clp-session-list" data-clp-session-list>
+          <div class="rk-clp-session-empty">No clips yet — set an in/out point and clip your first media.</div>
         </div>
-        <div class="rk-clp-transport">
-          <button type="button" class="rk-ip-iconbtn rk-clp-playpause" data-clp-playpause aria-label="Play / pause">${PLAY_ICON}</button>
-          <div class="rk-clp-scrubwrap">
-            <input class="rk-clp-scrub" data-clp-scrub type="range" min="0" max="1000" step="1" value="0" aria-label="Scrub" />
-            <div class="rk-clp-rangebar" data-clp-rangebar aria-hidden="true"><span class="rk-clp-rangefill" data-clp-range-fill></span></div>
-          </div>
-          <div class="rk-clp-time">
-            <input class="rk-clp-tc rk-clp-tc-now" data-clp-timecode type="text" inputmode="numeric" value="00:00:00:0000" aria-label="Current time" />
-            <span class="rk-clp-duration" data-clp-duration>/ 00:00:00:0000</span>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- RIGHT: clips this session -->
-    <aside class="rk-inpaint-side rk-clp-side" aria-label="Clips this session">
-      <div class="rk-clp-side-head">
-        <span class="rk-eyebrow">Clips this session</span>
-        <button type="button" class="rk-ip-iconbtn rk-ip-iconbtn-sm" data-clp-session-refresh aria-label="Refresh" title="Refresh">${HISTORY_ICON}</button>
+        <a class="rk-clp-librarylink" href="/library/raws">Open your raws library →</a>
       </div>
-      <div class="rk-clp-session-list" data-clp-session-list>
-        <div class="rk-clp-session-empty">No clips yet — set an in/out point and save your first clip.</div>
-      </div>
-      <a class="rk-clp-librarylink" href="/library/raws">Open your raws library →</a>
     </aside>
   </div>
 
   <!-- Settings modal -->
   <div class="rk-ip-settingsmodal" data-clp-settings hidden>
-    <div class="rk-ip-settingsmodal-backdrop" data-clp-settings-close></div>
-    <div class="rk-ip-settingsmodal-card" role="dialog" aria-modal="true" aria-label="Clipper settings">
+    <div class="rk-ip-settingsmodal-panel" role="dialog" aria-modal="true" aria-label="Clipper settings">
       <div class="rk-ip-settingsmodal-head">
-        <h2>Session settings</h2>
+        <span class="rk-ip-settingsmodal-title">Settings</span>
         <button type="button" class="rk-ip-iconbtn" data-clp-settings-close aria-label="Close">${CLOSE_ICON}</button>
       </div>
-      <div class="rk-field">
-        <label class="rk-label" for="rkClpTracer">Session name (tracer)</label>
-        <input class="rk-input" id="rkClpTracer" data-clp-tracer type="text" placeholder="auto — named from the source" autocomplete="off" spellcheck="false" />
+      <div class="rk-ip-settingsmodal-body">
+        <label class="rk-ip-setting">
+          <span class="rk-label">Session name <span class="rk-ip-setting-note">(tracer — groups this session's clips)</span></span>
+          <input class="rk-ip-input" id="rkClpTracer" data-clp-tracer type="text" placeholder="auto — named from the source" autocomplete="off" spellcheck="false" />
+        </label>
         <span class="rk-hint">Every clip you save in this session is grouped under this tracer — and lands in a matching <code>/raws</code> folder.</span>
       </div>
     </div>
@@ -159,7 +189,7 @@ export function renderReskinInpaintClipper(input = {}) {
   <!-- Past sessions slide-in -->
   <aside class="rk-ip-sessions rk-clp-sessions" data-clp-sessions aria-label="Past clipping sessions">
     <div class="rk-ip-sessions-head">
-      <span class="rk-eyebrow">Past sessions</span>
+      <span class="rk-ip-sessions-title">Past sessions</span>
       <button type="button" class="rk-ip-iconbtn" data-clp-sessions-close aria-label="Close">${CLOSE_ICON}</button>
     </div>
     <div class="rk-ip-sessions-list" data-clp-sessions-list></div>
@@ -170,63 +200,160 @@ export function renderReskinInpaintClipper(input = {}) {
 </main>`;
     const pageCss = `
 ${INPAINT_TABS_CSS}
-.rk-clp-page{padding-bottom:40px}
-.rk-clp-workbench{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:18px;align-items:start}
-.rk-clp-urlrow{display:flex;gap:8px}
-.rk-clp-urlrow .rk-input{flex:1;min-width:0}
-.rk-clp-ingest{display:flex;gap:8px;margin-top:8px}
-.rk-clp-ingest .rk-btn{flex:1;gap:6px}
-.rk-clp-rangeblock .rk-clp-inout{display:flex;flex-direction:column;gap:14px;margin-top:6px}
-.rk-clp-field{display:flex;flex-direction:column;gap:6px}
-.rk-clp-field-head{display:flex;align-items:center;justify-content:space-between}
-.rk-clp-field-label{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--rk-ink)}
-.rk-clp-tinybtn{border:0;background:transparent;color:var(--rk-gold-ink,#9a6b12);font-size:11px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px}
-.rk-clp-tinybtn:hover{background:var(--rk-n-100)}
+.rk-clp-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter);padding-bottom:44px}
+
+/* shared page-head toolbar (Start New + gear + history) — top-right, like /tools/image */
+.rk-inpaint-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.rk-inpaint-head-text{min-width:0;flex:1 1 340px}
+.rk-inpaint-toolbar{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
+.rk-inpaint-startnew{gap:6px}
+.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;margin:0}
+
+/* shared icon buttons */
+.rk-ip-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-iconbtn:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-iconbtn:disabled{opacity:.45;cursor:not-allowed;background:var(--rk-n-50);color:var(--rk-n-400);border-color:var(--rk-border)}
+.rk-ip-iconbtn-sm{width:28px;height:28px}
+
+/* workbench grid — one big left column + right history card */
+.rk-clp-workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
+.rk-clp-main{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:16px;align-content:start}
+
+/* source bar (above the preview) */
+.rk-clp-sourcebar{display:grid;gap:8px}
+.rk-clp-urlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.rk-clp-urlrow .rk-input{flex:1 1 240px;min-width:0}
+.rk-clp-loadbtn{flex:none}
+.rk-clp-or{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-clp-ingestbtn{flex:none}
+.rk-clp-sourcehint{line-height:1.4}
+.rk-clp-loadbtn[data-loading="true"]{opacity:.7;pointer-events:none}
+.rk-clp-sourcebar.is-loading .rk-clp-ingestbtn,.rk-clp-sourcebar.is-loading .rk-input{opacity:.5;pointer-events:none}
+
+/* preview stage */
+.rk-clp-stage{min-height:300px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
+.rk-clp-empty{padding:44px 24px;text-align:center;color:var(--rk-text-muted)}
+.rk-clp-empty[hidden]{display:none}
+.rk-clp-empty-ic{display:inline-grid;place-items:center;color:var(--rk-n-400);margin-bottom:10px}
+.rk-clp-empty-ic svg{width:30px;height:30px}
+.rk-clp-empty p{font-size:15px;font-weight:800;color:var(--rk-ink);margin:0 0 4px}
+.rk-clp-empty span{font-size:12.5px}
+.rk-clp-player{width:100%}
+.rk-clp-player[hidden]{display:none}
+.rk-clp-videowrap{width:100%;background:#000;display:flex;align-items:center;justify-content:center;position:relative;min-height:300px;max-height:58vh}
+.rk-clp-videowrap video{width:100%;max-height:58vh;display:block}
+.rk-clp-audioposter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,#2a2622,#1b1815)}
+.rk-clp-audioposter[hidden]{display:none}
+.rk-clp-audioposter-ic{display:grid;place-items:center;color:var(--rk-gold-500,#f0b429)}
+.rk-clp-audioposter-ic svg{width:34px;height:34px}
+.rk-clp-audioposter span{font-size:13px;font-weight:700;letter-spacing:.02em}
+
+/* transport row */
+.rk-clp-controls[hidden]{display:none}
+.rk-clp-controls{display:grid;gap:13px}
+.rk-clp-transport{display:flex;align-items:center;gap:10px}
+.rk-clp-spacer{flex:1}
 .rk-clp-tc{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700}
-.rk-clp-slider,.rk-clp-scrub{width:100%;accent-color:var(--rk-gold,#e2a63a)}
-.rk-clp-estimate{margin-top:12px;font-size:13px;color:var(--rk-text-muted)}
-.rk-clp-estimate strong{color:var(--rk-ink);font-variant-numeric:tabular-nums}
-.rk-clp-rangenote{margin-top:8px;font-size:12px;font-weight:600;color:#b42318}
-.rk-clp-savebtn{width:100%;justify-content:center;gap:8px;margin-top:12px}
+.rk-clp-tc-now{width:132px;padding:6px 9px;font-size:12.5px}
+.rk-clp-duration{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px;color:var(--rk-text-muted)}
+.rk-btn-xs{padding:4px 11px;font-size:11.5px}
+
+/* unified timeline */
+.rk-clp-timeline{padding:16px 12px 8px}
+.rk-clp-tl-track{position:relative;height:12px;border-radius:999px;background:var(--rk-n-200,#e7e2da);cursor:pointer;touch-action:none}
+.rk-clp-tl-sel{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--rk-gold-500,#f0b429);border-radius:999px;box-shadow:inset 0 0 0 1px var(--rk-gold-600,#dd9a1f)}
+.rk-clp-tl-playhead{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:var(--rk-ink);border-radius:2px;transform:translateX(-1px);pointer-events:none;z-index:3}
+.rk-clp-tl-playhead::after{content:"";position:absolute;top:-3px;left:50%;width:9px;height:9px;background:var(--rk-ink);border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}
+.rk-clp-tl-handle{position:absolute;top:50%;width:16px;height:26px;padding:0;border:0;background:transparent;cursor:ew-resize;transform:translate(-50%,-50%);z-index:4;touch-action:none}
+.rk-clp-tl-handle span{display:block;width:14px;height:26px;margin:0 auto;border-radius:5px;background:#fff;border:2px solid var(--rk-gold-600,#dd9a1f);box-shadow:var(--rk-shadow-sm),0 0 0 1px rgba(0,0,0,.04)}
+.rk-clp-tl-handle:hover span,.rk-clp-tl-handle.is-drag span{border-color:var(--rk-gold-700);background:var(--rk-gold-tint)}
+.rk-clp-tl-handle::before{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;background:var(--rk-gold-700,#c98a1a);border-radius:2px;transform:translate(-50%,-50%);opacity:.7}
+
+/* in / out inputs */
+.rk-clp-inout{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
+.rk-clp-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:130px}
+.rk-clp-field-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-muted)}
+.rk-clp-tinybtn{align-self:flex-start;border:0;background:transparent;color:var(--rk-gold-ink,#9a6b12);font-size:11px;font-weight:700;cursor:pointer;padding:1px 2px;border-radius:6px}
+.rk-clp-tinybtn:hover{text-decoration:underline}
+.rk-clp-lenbox{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;padding-bottom:2px}
+.rk-clp-lenbox strong{font-size:14px;color:var(--rk-ink);font-variant-numeric:tabular-nums}
+.rk-clp-rangenote{font-size:12px;font-weight:600;color:#b42318}
+.rk-clp-rangenote[hidden]{display:none}
+
+/* advanced */
+.rk-clp-advanced{border-top:1px solid var(--rk-border);padding-top:12px}
+.rk-clp-adv-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:2px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:var(--rk-ink);text-align:left}
+.rk-clp-adv-chev{display:grid;place-items:center;color:var(--rk-text-muted);transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-clp-adv-toggle[aria-expanded="true"] .rk-clp-adv-chev{transform:rotate(180deg)}
+.rk-clp-adv-hint{font-weight:600;margin-left:auto}
+.rk-clp-adv-body{margin-top:12px}
+.rk-clp-adv-body[hidden]{display:none}
+.rk-clp-notes{min-height:52px;resize:vertical;line-height:1.45}
+.rk-clp-audio-toggle{display:flex;gap:9px;align-items:flex-start;margin-top:14px;cursor:pointer}
+.rk-clp-audio-toggle input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--rk-gold-700);cursor:pointer}
+.rk-clp-audio-text{display:flex;flex-direction:column;gap:2px;line-height:1.35}
+.rk-clp-audio-text strong{font-size:13px;color:var(--rk-ink);font-weight:800}
+.rk-clp-audio-text .rk-hint{font-size:11.5px}
+
+/* clip button + status */
+.rk-clp-savebtn{width:100%;justify-content:center;gap:8px;padding:13px}
 .rk-clp-savebtn[data-loading="true"]{opacity:.7;pointer-events:none}
-.rk-clp-status{margin-top:8px;font-size:12.5px;font-weight:600;min-height:16px}
+.rk-clp-savebtn:disabled{opacity:.5;cursor:not-allowed}
+.rk-clp-status{font-size:12.5px;font-weight:600;min-height:16px;line-height:1.5}
 .rk-clp-status[data-tone="error"]{color:#b42318}
-.rk-clp-status[data-tone="success"]{color:#15803d}
-.rk-clp-stage{min-height:360px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-radius-lg,18px);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
-.rk-clp-empty{padding:40px;text-align:center;color:var(--rk-text-muted)}
-.rk-clp-empty-inner svg{width:34px;height:34px;opacity:.5;margin-bottom:10px}
-.rk-clp-empty-inner p{font-size:15px;font-weight:700;color:var(--rk-ink);margin:0 0 4px}
-.rk-clp-empty-inner span{font-size:12.5px}
-.rk-clp-player{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px}
-.rk-clp-videowrap{width:100%;background:#000;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;max-height:56vh}
-.rk-clp-videowrap video{width:100%;max-height:56vh;display:block}
-.rk-clp-transport{display:flex;align-items:center;gap:12px;padding:2px 4px}
-.rk-clp-playpause{flex:none}
-.rk-clp-scrubwrap{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:4px}
-.rk-clp-rangebar{position:relative;height:5px;border-radius:999px;background:var(--rk-n-200,#e7e2da);overflow:hidden}
-.rk-clp-rangefill{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--rk-gold,#e2a63a);border-radius:999px}
-.rk-clp-time{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--rk-text-muted)}
-.rk-clp-tc-now{width:118px;padding:5px 8px;font-size:12px}
-.rk-clp-duration{font-variant-numeric:tabular-nums;white-space:nowrap}
+.rk-clp-status[data-tone="success"]{color:#1f7a44}
+
+/* right: this-session history card (matches /tools/image) */
 .rk-clp-side{position:sticky;top:16px}
-.rk-clp-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
-.rk-ip-iconbtn-sm{width:28px;height:28px}
-.rk-clp-session-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
-.rk-clp-session-empty{font-size:12.5px;color:var(--rk-text-muted);padding:10px 2px;line-height:1.5}
-.rk-clp-clip{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid var(--rk-border);border-radius:12px;background:var(--rk-surface);text-decoration:none}
-.rk-clp-clip:hover{border-color:var(--rk-gold,#e2a63a)}
-.rk-clp-clip-thumb{flex:none;width:64px;height:40px;border-radius:8px;object-fit:cover;background:var(--rk-n-200,#e7e2da)}
-.rk-clp-clip-meta{min-width:0;flex:1}
+.rk-clp-side-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:12px;align-content:start}
+.rk-clp-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.rk-clp-session-list{display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow:auto}
+.rk-clp-session-empty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;line-height:1.5;text-align:center}
+.rk-clp-clip{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50);text-decoration:none}
+.rk-clp-clip:hover{border-color:var(--rk-gold-600)}
+.rk-clp-clip-thumb{flex:none;width:60px;height:40px;border-radius:var(--rk-r-lg);object-fit:cover;background:var(--rk-n-200,#e7e2da)}
+.rk-clp-clip-meta{min-width:0;flex:1;display:grid;gap:3px}
 .rk-clp-clip-title{font-size:12.5px;font-weight:700;color:var(--rk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rk-clp-clip-sub{font-size:11px;color:var(--rk-text-muted);font-variant-numeric:tabular-nums}
-.rk-clp-librarylink{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--rk-gold-ink,#9a6b12);text-decoration:none}
+.rk-clp-librarylink{font-size:12.5px;font-weight:700;color:var(--rk-gold-ink,#9a6b12);text-decoration:none}
 .rk-clp-librarylink:hover{text-decoration:underline}
-.rk-btn-xs{padding:3px 9px;font-size:11px}
-@media (max-width: 1080px){ .rk-clp-workbench{grid-template-columns:1fr;} .rk-clp-side{position:static} }
+
+/* settings modal (shared look with /tools/image) */
+.rk-ip-settingsmodal{position:fixed;inset:0;z-index:70;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;animation:rk-clp-fade .16s var(--rk-ease)}
+.rk-ip-settingsmodal[hidden]{display:none}
+.rk-ip-settingsmodal-panel{width:min(440px,100%);background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
+.rk-ip-settingsmodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-settingsmodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-settingsmodal-body{padding:16px 18px;display:grid;gap:10px}
+.rk-ip-setting{display:grid;gap:6px}
+.rk-ip-setting-note{font-weight:600;color:var(--rk-text-faint)}
+.rk-ip-input{width:100%;padding:9px 11px;font:inherit;font-size:13px;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
+.rk-ip-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+@keyframes rk-clp-fade{from{opacity:0}to{opacity:1}}
+
+/* past-sessions left slide-in panel (shared look with /tools/image) */
+.rk-ip-sessions{position:fixed;left:0;top:0;bottom:0;z-index:96;width:min(320px,86vw);display:flex;flex-direction:column;background:var(--rk-surface);border-right:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xl,var(--rk-shadow-card));transform:translateX(-100%);transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-ip-sessions.is-open{transform:none}
+.rk-ip-sessions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 10px;border-bottom:1px solid var(--rk-border)}
+.rk-ip-sessions-title{font-family:var(--rk-font-display);font-weight:800;font-size:14px;color:var(--rk-ink)}
+.rk-ip-sessions-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:grid;gap:4px;align-content:start}
+.rk-ip-sessions-empty{font-size:12.5px;color:var(--rk-text-faint);padding:16px 8px;text-align:center;line-height:1.4}
+.rk-ip-session{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;padding:7px;border:1px solid transparent;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;text-align:left;font:inherit;width:100%}
+.rk-ip-session:hover{background:var(--rk-n-50)}
+.rk-ip-session.is-active{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
+.rk-ip-session-thumb{width:44px;height:44px;border:1px solid var(--rk-border);border-radius:var(--rk-r-md,8px);object-fit:cover;background:var(--rk-n-200)}
+.rk-ip-session-thumb.is-empty{display:grid;place-items:center;color:var(--rk-text-faint)}
+.rk-ip-session-meta{min-width:0;display:grid;gap:3px}
+.rk-ip-session-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-session-sub{min-width:0;color:var(--rk-text-muted);font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-ip-sessions-backdrop{position:fixed;inset:0;z-index:95;background:rgba(28,25,23,.34)}
+.rk-ip-sessions-backdrop[hidden]{display:none}
+
+@media(max-width:960px){.rk-clp-workbench{grid-template-columns:1fr}.rk-clp-side{position:static}}
 `;
     return reskinDocument({
-        title: "vidfarm — Clip a Video",
-        description: "Cut exact subranges out of any video straight into your raws library — preview from the source, pick a precise in/out point, and save only the clip.",
+        title: "vidfarm — Clip Media",
+        description: "Cut exact subranges out of any video or audio straight into your raws library — preview from the source, drag a precise in/out point, and save only the clip.",
         activeSlug: "inpaint",
         pageCss,
         body,
@@ -240,7 +367,9 @@ const CLIPPER_SCRIPT = `
 (function(){
   var bootEl = document.querySelector("[data-clp-boot]");
   var boot = {}; try { boot = JSON.parse(bootEl && bootEl.textContent || "{}"); } catch(_){}
+  var AUDIO_ONLY_KEY = "vf_clipper_audio_only";
 
+  var sourceBar = document.querySelector(".rk-clp-sourcebar");
   var urlInput = document.querySelector("[data-clp-url-input]");
   var loadBtn = document.querySelector("[data-clp-url-load]");
   var uploadBtn = document.querySelector("[data-clp-upload]");
@@ -249,24 +378,29 @@ const CLIPPER_SCRIPT = `
   var emptyState = document.querySelector("[data-clp-empty]");
   var player = document.querySelector("[data-clp-player]");
   var video = document.querySelector("[data-clp-video]");
+  var audioPoster = document.querySelector("[data-clp-audio-poster]");
+  var controls = document.querySelector("[data-clp-controls]");
   var playpause = document.querySelector("[data-clp-playpause]");
-  var scrub = document.querySelector("[data-clp-scrub]");
   var timecodeNow = document.querySelector("[data-clp-timecode]");
   var durationEl = document.querySelector("[data-clp-duration]");
-  var rangeControls = document.querySelector("[data-clp-range-controls]");
+  var track = document.querySelector("[data-clp-tl-track]");
+  var selEl = document.querySelector("[data-clp-tl-sel]");
+  var playhead = document.querySelector("[data-clp-tl-playhead]");
+  var handleIn = document.querySelector("[data-clp-tl-in]");
+  var handleOut = document.querySelector("[data-clp-tl-out]");
   var startInput = document.querySelector("[data-clp-start-input]");
   var endInput = document.querySelector("[data-clp-end-input]");
-  var startSlider = document.querySelector("[data-clp-start-slider]");
-  var endSlider = document.querySelector("[data-clp-end-slider]");
   var setStartBtn = document.querySelector("[data-clp-set-start]");
   var setEndBtn = document.querySelector("[data-clp-set-end]");
   var wholeBtn = document.querySelector("[data-clp-whole]");
   var lengthEl = document.querySelector("[data-clp-length]");
   var rangeNote = document.querySelector("[data-clp-range-note]");
-  var rangeFill = document.querySelector("[data-clp-range-fill]");
-  var saveBlock = document.querySelector("[data-clp-save-block]");
+  var advToggle = document.querySelector("[data-clp-adv-toggle]");
+  var advBody = document.querySelector("[data-clp-adv-body]");
   var nameInput = document.querySelector("[data-clp-name]");
+  var notesInput = document.querySelector("[data-clp-notes]");
   var folderInput = document.querySelector("[data-clp-folder]");
+  var audioOnlyInput = document.querySelector("[data-clp-audio-only]");
   var saveBtn = document.querySelector("[data-clp-save]");
   var saveLabel = document.querySelector("[data-clp-save-label]");
   var statusEl = document.querySelector("[data-clp-status]");
@@ -292,13 +426,14 @@ const CLIPPER_SCRIPT = `
   var sourceName = "";
   var sourceObjectUrl = "";     // object URL for a local upload
   var uploadTempFileId = "";    // temp_file_id when the source was uploaded
+  var isAudioSource = false;    // heuristic: source looks like audio
   var durationSec = 0;
   var startSec = 0;
   var endSec = 0;
   var sessionTracer = "";
   var tracerAutoPending = true;
+  var dragging = null;          // "in" | "out" | null
 
-  function nowIso(){ return new Date().toISOString(); }
   function esc(t){ var d=document.createElement("div"); d.textContent=(t==null?"":String(t)); return d.innerHTML; }
   function pad(n, w){ n=String(Math.max(0, Math.floor(n))); while(n.length<w) n="0"+n; return n; }
   function absoluteUrl(u){ try { return new URL(u, window.location.origin).toString(); } catch(_){ return u; } }
@@ -320,14 +455,12 @@ const CLIPPER_SCRIPT = `
     var parts = String(str).trim().split(":").map(function(p){ return p.trim(); });
     if(!parts.length) return NaN;
     var h=0,m=0,s=0,frac=0;
-    if(parts.length === 4){ h=+parts[0]; m=+parts[1]; s=+parts[2]; frac=+parts[3]; }
-    else if(parts.length === 3){ m=+parts[0]; s=+parts[1]; frac=+parts[2]; }
-    else if(parts.length === 2){ s=+parts[0]; frac=+parts[1]; }
+    if(parts.length === 4){ h=+parts[0]; m=+parts[1]; s=+parts[2]; }
+    else if(parts.length === 3){ m=+parts[0]; s=+parts[1]; }
+    else if(parts.length === 2){ s=+parts[0]; }
     else { s=+parts[0]; }
-    if([h,m,s,frac].some(function(n){ return isNaN(n); })) return NaN;
-    // Frac field: 4 digits = ten-thousandths; be forgiving of shorter entries.
-    var fracDivisor = Math.pow(10, String(parts[parts.length-1]||"").length || 4);
-    if(parts.length >= 2){ frac = (+parts[parts.length-1]) / fracDivisor; } else { frac = 0; }
+    if([h,m,s].some(function(n){ return isNaN(n); })) return NaN;
+    if(parts.length >= 2){ var last = parts[parts.length-1]||""; var div = Math.pow(10, last.length||4); frac = (+last)/div; if(isNaN(frac)) frac=0; }
     return h*3600 + m*60 + s + frac;
   }
   function fmtLen(sec){
@@ -337,11 +470,12 @@ const CLIPPER_SCRIPT = `
     return m+":"+pad(Math.floor(s),2)+"."+pad(Math.round((s-Math.floor(s))*10),1);
   }
   function slug(v){ return String(v||"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,60); }
+  function looksAudio(u){ return /\\.(mp3|m4a|aac|wav|ogg|oga|flac|opus)(\\?|#|$)/i.test(String(u||"")); }
 
   function setStatus(msg, tone){ if(!statusEl) return; statusEl.textContent = msg||""; if(tone) statusEl.setAttribute("data-tone", tone); else statusEl.removeAttribute("data-tone"); }
   function setRangeNote(msg){ if(!rangeNote) return; if(msg){ rangeNote.textContent = msg; rangeNote.hidden = false; } else { rangeNote.hidden = true; } }
 
-  // ── tracer ──
+  // ── tracer / session id ──
   function tracerSuffix(){ return Math.random().toString(36).slice(2, 6); }
   function nameTracerFromSeed(seed){
     var base = slug(seed) || "clipper";
@@ -354,14 +488,31 @@ const CLIPPER_SCRIPT = `
     if(tracerInput && tracerInput.value.trim()){ sessionTracer = tracerInput.value.trim(); tracerAutoPending = false; return sessionTracer; }
     return sessionTracer;
   }
+  // Always return a concrete session id — never leave the tracer unset at save time.
+  function ensureTracer(){
+    var t = resolveTracer();
+    if(tracerAutoPending || !t){ t = nameTracerFromSeed(sourceName || "clip"); }
+    return t;
+  }
   function currentFolder(){
     var f = (folderInput && folderInput.value.trim()) || "";
     return f || slug(resolveTracer() || sessionTracer || "");
   }
 
   // ── source loading ──
-  function revealPlayer(){ if(emptyState) emptyState.hidden = true; if(player) player.hidden = false; if(rangeControls) rangeControls.hidden = false; if(saveBlock) saveBlock.hidden = false; }
+  function revealPlayer(){ if(emptyState) emptyState.hidden = true; if(player) player.hidden = false; if(controls) controls.hidden = false; }
   function clearSourceObjectUrl(){ if(sourceObjectUrl){ try { URL.revokeObjectURL(sourceObjectUrl); } catch(_){} sourceObjectUrl=""; } }
+  function applyAudioPoster(){
+    // Once a frame is decoded (readyState>=2) a real video reports videoWidth>0;
+    // a frameless source (audio) never does → treat it as audio and force the
+    // audio-only clip mode (a "video" trim of a frameless source is meaningless).
+    if(video && video.readyState >= 2 && (!video.videoWidth || !video.videoHeight)){
+      isAudioSource = true;
+      if(audioOnlyInput && !audioOnlyInput.checked){ audioOnlyInput.checked = true; refreshSaveLabel(); }
+    }
+    var showPoster = isAudioSource || (video && video.readyState >= 1 && (!video.videoWidth || !video.videoHeight));
+    if(audioPoster) audioPoster.hidden = !showPoster;
+  }
 
   function playSrc(url){
     if(!video) return;
@@ -369,28 +520,39 @@ const CLIPPER_SCRIPT = `
     video.src = url;
     video.load();
     revealPlayer();
+    applyAudioPoster();
+  }
+
+  // Toggle the ingest controls off while a URL is resolving.
+  function setSourceLoading(on){
+    if(sourceBar) sourceBar.classList.toggle("is-loading", !!on);
+    if(loadBtn){ loadBtn.setAttribute("data-loading", on?"true":"false"); loadBtn.disabled = !!on; loadBtn.textContent = on ? "Loading\\u2026" : "Load"; }
+    if(uploadBtn) uploadBtn.disabled = !!on;
+    if(attachBtn) attachBtn.disabled = !!on;
   }
 
   // Resolve a pasted/handoff URL to a direct preview media URL, then play it.
   function loadSourceUrl(rawUrl, name){
     var u = String(rawUrl||"").trim();
-    if(!u){ setStatus("Enter a video URL.", "error"); return; }
+    if(!u){ setStatus("Enter a media URL.", "error"); return; }
     if(!/^https?:\\/\\//i.test(u)){ setStatus("That doesn't look like a valid URL.", "error"); return; }
     sourceUrl = u; sourceName = name || ""; uploadTempFileId = ""; clearSourceObjectUrl();
-    if(loadBtn){ loadBtn.disabled = true; loadBtn.textContent = "Loading\\u2026"; }
+    isAudioSource = looksAudio(u);
+    setSourceLoading(true);
     setStatus("Resolving source\\u2026");
     fetch("/raws/resolve-source", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify({ source_url: u }) })
       .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
       .then(function(res){
-        if(!res.ok || !res.p.preview_url) throw new Error(res.p.error || "Could not load that video.");
+        if(!res.ok || !res.p.preview_url) throw new Error(res.p.error || "Could not load that source.");
         previewUrl = res.p.preview_url;
         if(res.p.title && !sourceName) sourceName = res.p.title;
+        if(looksAudio(previewUrl)) isAudioSource = true;
         if(tracerAutoPending) nameTracerFromSeed(sourceName || "clip");
         playSrc(previewUrl);
-        setStatus("Loaded \\u2014 scrub and set your in/out points.", "success");
+        setStatus("Loaded \\u2014 drag the in/out edges on the timeline.", "success");
       })
-      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not load that video.", "error"); })
-      .then(function(){ if(loadBtn){ loadBtn.disabled = false; loadBtn.textContent = "Load"; } });
+      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not load that source.", "error"); })
+      .then(function(){ setSourceLoading(false); });
   }
 
   function loadLocalFile(file){
@@ -398,6 +560,7 @@ const CLIPPER_SCRIPT = `
     clearSourceObjectUrl();
     sourceObjectUrl = URL.createObjectURL(file);
     previewUrl = ""; sourceName = file.name || "upload.mp4"; sourceUrl = ""; uploadTempFileId = "";
+    isAudioSource = /^audio\\//i.test(file.type||"") || looksAudio(file.name);
     if(tracerAutoPending) nameTracerFromSeed(sourceName);
     playSrc(sourceObjectUrl);
     setStatus("Uploading source in the background\\u2026");
@@ -409,7 +572,7 @@ const CLIPPER_SCRIPT = `
       .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
       .then(function(res){
         var id = res.p && (res.p.id || res.p.file_id || (res.p.file && res.p.file.id));
-        if(res.ok && id){ uploadTempFileId = String(id); setStatus("Source ready \\u2014 set your in/out points.", "success"); }
+        if(res.ok && id){ uploadTempFileId = String(id); setStatus("Source ready \\u2014 drag the in/out edges on the timeline.", "success"); }
         else { setStatus("Preview ready, but the upload failed \\u2014 saving a clip may not work. " + ((res.p && res.p.error)||""), "error"); }
       })
       .catch(function(){ setStatus("Preview ready, but the upload failed \\u2014 saving a clip may not work.", "error"); });
@@ -427,38 +590,83 @@ const CLIPPER_SCRIPT = `
     }
   }
 
-  // ── range sync ──
+  // ── range + timeline sync ──
   function clamp(v, lo, hi){ return Math.max(lo, Math.min(hi, v)); }
-  function updateFill(){
-    if(!rangeFill || durationSec <= 0){ if(rangeFill){ rangeFill.style.left="0"; rangeFill.style.width="0"; } return; }
-    var a = clamp(startSec/durationSec, 0, 1) * 100;
-    var b = clamp(endSec/durationSec, 0, 1) * 100;
-    rangeFill.style.left = a + "%";
-    rangeFill.style.width = Math.max(0, b - a) + "%";
+  function pctOf(sec){ return durationSec > 0 ? clamp(sec/durationSec, 0, 1) : 0; }
+  function renderTimeline(){
+    if(!durationSec || durationSec <= 0){
+      if(selEl){ selEl.style.left="0"; selEl.style.width="100%"; }
+      if(handleIn) handleIn.style.left="0%";
+      if(handleOut) handleOut.style.left="100%";
+      return;
+    }
+    var a = pctOf(startSec)*100, b = pctOf(endSec)*100;
+    if(selEl){ selEl.style.left = a+"%"; selEl.style.width = Math.max(0, b-a)+"%"; }
+    if(handleIn) handleIn.style.left = a+"%";
+    if(handleOut) handleOut.style.left = b+"%";
+  }
+  function renderPlayhead(){
+    if(!playhead) return;
+    playhead.style.left = (pctOf(video ? (video.currentTime||0) : 0)*100)+"%";
   }
   function refreshRangeUI(sync){
     if(sync !== "start" && startInput && document.activeElement !== startInput) startInput.value = fmtTC(startSec);
     if(sync !== "end" && endInput && document.activeElement !== endInput) endInput.value = fmtTC(endSec);
-    if(durationSec > 0){
-      if(startSlider && document.activeElement !== startSlider) startSlider.value = String(Math.round((startSec/durationSec)*1000));
-      if(endSlider && document.activeElement !== endSlider) endSlider.value = String(Math.round((endSec/durationSec)*1000));
-    }
     var len = endSec - startSec;
     if(lengthEl) lengthEl.textContent = fmtLen(Math.max(0, len)) + " (" + Math.max(0, len).toFixed(2) + "s)";
-    updateFill();
+    renderTimeline();
     var valid = len > 0.02 && (durationSec <= 0 || (startSec >= 0 && endSec <= durationSec + 0.01));
-    if(!valid){ setRangeNote(len <= 0 ? "Out point must be after the in point." : "Range is outside the video."); }
+    if(!valid){ setRangeNote(len <= 0 ? "Out point must be after the in point." : "Range is outside the source."); }
     else setRangeNote("");
     if(saveBtn) saveBtn.disabled = !valid;
   }
   function setStart(sec){ startSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(endSec < startSec) endSec = Math.min(durationSec>0?durationSec:startSec, startSec + 0.1); refreshRangeUI(); }
   function setEnd(sec){ endSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(startSec > endSec) startSec = Math.max(0, endSec - 0.1); refreshRangeUI(); }
 
+  // Seek to a time and reflect the playhead / timecode.
+  function seekTo(sec){ if(!video || durationSec<=0) return; video.currentTime = clamp(sec, 0, durationSec); syncNow(); }
+
+  function secFromPointer(clientX){
+    if(!track || durationSec<=0) return 0;
+    var r = track.getBoundingClientRect();
+    var pct = r.width>0 ? clamp((clientX - r.left)/r.width, 0, 1) : 0;
+    return pct * durationSec;
+  }
+
+  // Timeline pointer interactions: click track = seek; drag handle = set in/out.
+  function onTrackPointerDown(e){
+    if(durationSec<=0) return;
+    var t = e.target;
+    if(t === handleIn || (handleIn && handleIn.contains(t))){ beginDrag("in", e); return; }
+    if(t === handleOut || (handleOut && handleOut.contains(t))){ beginDrag("out", e); return; }
+    seekTo(secFromPointer(e.clientX));
+  }
+  function beginDrag(which, e){
+    dragging = which;
+    var h = which==="in" ? handleIn : handleOut;
+    if(h) h.classList.add("is-drag");
+    e.preventDefault();
+    window.addEventListener("pointermove", onDragMove);
+    window.addEventListener("pointerup", onDragEnd);
+  }
+  function onDragMove(e){
+    if(!dragging) return;
+    var sec = secFromPointer(e.clientX);
+    if(dragging==="in"){ setStart(sec); seekTo(sec); }
+    else { setEnd(sec); seekTo(sec); }
+  }
+  function onDragEnd(){
+    if(handleIn) handleIn.classList.remove("is-drag");
+    if(handleOut) handleOut.classList.remove("is-drag");
+    dragging = null;
+    window.removeEventListener("pointermove", onDragMove);
+    window.removeEventListener("pointerup", onDragEnd);
+  }
+
   // ── playback ──
   function syncNow(){
-    var t = video.currentTime || 0;
-    if(scrub && document.activeElement !== scrub && durationSec > 0) scrub.value = String(Math.round((t/durationSec)*1000));
-    if(timecodeNow && document.activeElement !== timecodeNow) timecodeNow.value = fmtTC(t);
+    if(timecodeNow && document.activeElement !== timecodeNow) timecodeNow.value = fmtTC(video ? (video.currentTime||0) : 0);
+    renderPlayhead();
   }
   function tick(){ if(video && !video.paused && !video.ended){ syncNow(); requestAnimationFrame(tick); } }
   function setPlayIcon(){ if(playpause) playpause.innerHTML = (video && !video.paused) ? PAUSE_SVG : PLAY_SVG; }
@@ -468,55 +676,82 @@ const CLIPPER_SCRIPT = `
       durationSec = video.duration || 0;
       startSec = 0; endSec = durationSec || 0;
       if(durationEl) durationEl.textContent = "/ " + fmtTC(durationSec);
-      refreshRangeUI();
+      applyAudioPoster();
+      refreshRangeUI(); renderPlayhead();
     });
+    video.addEventListener("loadeddata", applyAudioPoster);
     video.addEventListener("timeupdate", syncNow);
     video.addEventListener("play", function(){ setPlayIcon(); tick(); });
     video.addEventListener("pause", setPlayIcon);
     video.addEventListener("ended", setPlayIcon);
-    video.addEventListener("error", function(){ setStatus("The browser couldn't play this source. Try a direct .mp4 URL or upload the file.", "error"); });
+    video.addEventListener("error", function(){ setStatus("The browser couldn't play this source. Try a direct file URL or upload it.", "error"); });
   }
 
   // ── wire controls ──
   if(loadBtn) loadBtn.addEventListener("click", function(){ loadSourceUrl(urlInput && urlInput.value, ""); });
   if(urlInput) urlInput.addEventListener("keydown", function(e){ if(e.key === "Enter"){ e.preventDefault(); loadSourceUrl(urlInput.value, ""); } });
-  if(uploadBtn && fileInput){ uploadBtn.addEventListener("click", function(){ fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadLocalFile(fileInput.files[0]); }); }
-  if(attachBtn) attachBtn.addEventListener("click", openAttach);
+  if(uploadBtn && fileInput){ uploadBtn.addEventListener("click", function(){ if(!uploadBtn.disabled) fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadLocalFile(fileInput.files[0]); }); }
+  if(attachBtn) attachBtn.addEventListener("click", function(){ if(!attachBtn.disabled) openAttach(); });
   if(playpause) playpause.addEventListener("click", function(){ if(!video) return; if(video.paused) video.play(); else video.pause(); });
-  if(scrub) scrub.addEventListener("input", function(){ if(durationSec > 0){ video.currentTime = (scrub.value/1000)*durationSec; syncNow(); } });
-  if(timecodeNow) timecodeNow.addEventListener("change", function(){ var t = parseTC(timecodeNow.value); if(isFinite(t)){ video.currentTime = clamp(t, 0, durationSec||t); syncNow(); } });
+  if(timecodeNow) timecodeNow.addEventListener("change", function(){ var t = parseTC(timecodeNow.value); if(isFinite(t)) seekTo(t); });
 
-  if(startSlider) startSlider.addEventListener("input", function(){ if(durationSec>0) setStart((startSlider.value/1000)*durationSec); });
-  if(endSlider) endSlider.addEventListener("input", function(){ if(durationSec>0) setEnd((endSlider.value/1000)*durationSec); });
+  if(track) track.addEventListener("pointerdown", onTrackPointerDown);
   if(startInput) startInput.addEventListener("change", function(){ var t = parseTC(startInput.value); if(isFinite(t)) setStart(t); else refreshRangeUI(); });
   if(endInput) endInput.addEventListener("change", function(){ var t = parseTC(endInput.value); if(isFinite(t)) setEnd(t); else refreshRangeUI(); });
-  if(setStartBtn) setStartBtn.addEventListener("click", function(){ setStart(video.currentTime || 0); });
-  if(setEndBtn) setEndBtn.addEventListener("click", function(){ setEnd(video.currentTime || 0); });
+  if(setStartBtn) setStartBtn.addEventListener("click", function(){ setStart(video ? (video.currentTime||0) : 0); });
+  if(setEndBtn) setEndBtn.addEventListener("click", function(){ setEnd(video ? (video.currentTime||0) : 0); });
   if(wholeBtn) wholeBtn.addEventListener("click", function(){ startSec = 0; endSec = durationSec || 0; refreshRangeUI(); });
 
-  // ── save clip ──
-  function setSaving(on){ if(saveBtn){ saveBtn.setAttribute("data-loading", on?"true":"false"); saveBtn.disabled = on; } if(saveLabel) saveLabel.textContent = on ? "Saving\\u2026" : "Save clip to raws"; }
+  // ── advanced toggle + sticky audio-only ──
+  if(advToggle && advBody){
+    advToggle.addEventListener("click", function(){
+      var open = advBody.hidden;
+      advBody.hidden = !open;
+      advToggle.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  }
+  function loadStickyAudioOnly(){
+    var v = false; try { v = localStorage.getItem(AUDIO_ONLY_KEY) === "1"; } catch(_){}
+    if(audioOnlyInput) audioOnlyInput.checked = v;
+    // If it was previously enabled, reveal Advanced so the choice is visible.
+    if(v && advBody && advToggle && advBody.hidden){ advBody.hidden = false; advToggle.setAttribute("aria-expanded","true"); }
+  }
+  if(audioOnlyInput){
+    audioOnlyInput.addEventListener("change", function(){
+      try { localStorage.setItem(AUDIO_ONLY_KEY, audioOnlyInput.checked ? "1" : "0"); } catch(_){}
+      refreshSaveLabel();
+    });
+  }
+
+  // ── clip media ──
+  function isAudioOnly(){ return !!(audioOnlyInput && audioOnlyInput.checked); }
+  function restingSaveLabel(){ return isAudioOnly() ? "Clip Audio" : "Clip Media"; }
+  function refreshSaveLabel(){ if(saveLabel && saveBtn && saveBtn.getAttribute("data-loading") !== "true") saveLabel.textContent = restingSaveLabel(); }
+  function setSaving(on){ if(saveBtn){ saveBtn.setAttribute("data-loading", on?"true":"false"); saveBtn.disabled = on; } if(saveLabel) saveLabel.textContent = on ? "Saving\\u2026" : restingSaveLabel(); }
   function saveClip(){
     if(!video){ return; }
     var len = endSec - startSec;
     if(!(len > 0.02)){ setStatus("Set an in point and a later out point first.", "error"); return; }
-    if(!previewUrl && !sourceUrl && !uploadTempFileId){ setStatus("Load a source video first.", "error"); return; }
-    var tracer = resolveTracer(); if(tracerAutoPending || !tracer){ tracer = nameTracerFromSeed(sourceName || "clip"); }
+    if(!previewUrl && !sourceUrl && !uploadTempFileId){ setStatus("Load a source first.", "error"); return; }
+    var tracer = ensureTracer();
     var folder = currentFolder();
-    var payload = { start_sec: Number(startSec.toFixed(3)), end_sec: Number(endSec.toFixed(3)), tracer: tracer };
+    var payload = { start_sec: Number(startSec.toFixed(3)), end_sec: Number(endSec.toFixed(3)), tracer: tracer, session_id: tracer };
+    if(isAudioOnly()) payload.audio_only = true;
     if(folder) payload.folder_path = folder;
     if(nameInput && nameInput.value.trim()) payload.name = nameInput.value.trim();
+    if(notesInput && notesInput.value.trim()) payload.notes = notesInput.value.trim();
     // Prefer the already-resolved direct URL (no re-resolve); else the uploaded
     // temp file; else the raw source URL (server resolves + bills).
     if(previewUrl) payload.preview_url = previewUrl;
     if(uploadTempFileId) payload.temp_file_id = uploadTempFileId;
     if(sourceUrl) payload.source_url = sourceUrl;
-    setSaving(true); setStatus("Trimming and saving your clip\\u2026");
+    var audioOnly = isAudioOnly();
+    setSaving(true); setStatus(audioOnly ? "Extracting and saving the audio\\u2026" : "Trimming and saving your clip\\u2026");
     fetch("/raws/clip-range", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify(payload) })
       .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
       .then(function(res){
         if(!res.ok || !res.p.clip_id) throw new Error(res.p.error || "Could not save that clip.");
-        setStatus("Saved \\u2014 clip added to your raws (" + (res.p.folder_path||folder) + ").", "success");
+        setStatus("Saved \\u2014 " + (audioOnly ? "audio" : "clip") + " added to your raws (" + (res.p.folder_path||folder) + ").", "success");
         prependSessionClip(res.p);
         loadSession();
       })
@@ -536,7 +771,8 @@ const CLIPPER_SCRIPT = `
     var title = document.createElement("div"); title.className = "rk-clp-clip-title"; title.textContent = clip.description || clip.name || clip.clip_id || "clip";
     var sub = document.createElement("div"); sub.className = "rk-clp-clip-sub";
     var d = Number(clip.duration_sec || 0);
-    sub.textContent = (d>0 ? d.toFixed(2)+"s" : "clip");
+    var kind = clip.media_kind === "audio" ? "audio" : "clip";
+    sub.textContent = (d>0 ? d.toFixed(2)+"s" : "") + (d>0 ? " · " : "") + kind;
     meta.appendChild(title); meta.appendChild(sub); a.appendChild(thumb); a.appendChild(meta);
     return a;
   }
@@ -557,7 +793,7 @@ const CLIPPER_SCRIPT = `
         if(!res.ok) return;
         var clips = (res.p && res.p.clips) || [];
         sessionList.innerHTML = "";
-        if(!clips.length){ var e=document.createElement("div"); e.className="rk-clp-session-empty"; e.textContent="No clips yet — set an in/out point and save your first clip."; sessionList.appendChild(e); return; }
+        if(!clips.length){ var e=document.createElement("div"); e.className="rk-clp-session-empty"; e.textContent="No clips yet — set an in/out point and clip your first media."; sessionList.appendChild(e); return; }
         clips.forEach(function(c){ sessionList.appendChild(clipRow(c)); });
       }).catch(function(){});
   }
@@ -614,17 +850,20 @@ const CLIPPER_SCRIPT = `
   if(sessionsToggle) sessionsToggle.addEventListener("click", openSessions);
   if(sessionsClose) sessionsClose.addEventListener("click", closeSessions);
   if(sessionsBackdrop) sessionsBackdrop.addEventListener("click", closeSessions);
+  if(settingsModal) settingsModal.addEventListener("click", function(e){ if(e.target === settingsModal) settingsModal.hidden = true; });
   document.addEventListener("keydown", function(e){ if(e.key === "Escape"){ if(settingsModal && !settingsModal.hidden) settingsModal.hidden = true; closeSessions(); } });
 
   // ── start new ──
   function resetWorkspace(){
     clearSourceObjectUrl();
-    sourceUrl=""; previewUrl=""; sourceName=""; uploadTempFileId=""; durationSec=0; startSec=0; endSec=0;
+    sourceUrl=""; previewUrl=""; sourceName=""; uploadTempFileId=""; isAudioSource=false; durationSec=0; startSec=0; endSec=0;
     try { video.pause(); } catch(_){} if(video){ video.removeAttribute("src"); video.load(); }
     if(emptyState) emptyState.hidden = false; if(player) player.hidden = true;
-    if(rangeControls) rangeControls.hidden = true; if(saveBlock) saveBlock.hidden = true;
-    if(urlInput) urlInput.value=""; if(nameInput) nameInput.value=""; if(folderInput) folderInput.value="";
-    if(sessionList) sessionList.innerHTML = "<div class=\\"rk-clp-session-empty\\">No clips yet — set an in/out point and save your first clip.</div>";
+    if(controls) controls.hidden = true; if(audioPoster) audioPoster.hidden = true;
+    if(urlInput) urlInput.value=""; if(nameInput) nameInput.value=""; if(notesInput) notesInput.value=""; if(folderInput) folderInput.value="";
+    setSourceLoading(false);
+    refreshSaveLabel();
+    if(sessionList) sessionList.innerHTML = "<div class=\\"rk-clp-session-empty\\">No clips yet — set an in/out point and clip your first media.</div>";
     setStatus(""); setRangeNote("");
   }
   if(startNewBtn) startNewBtn.addEventListener("click", function(){
@@ -644,6 +883,8 @@ const CLIPPER_SCRIPT = `
     if(t) loadSession();
   }
 
+  loadStickyAudioOnly();
+  refreshSaveLabel();
   initFromUrl();
 })();`;
 //# sourceMappingURL=inpaint-clipper-page.js.map