From 9d950d81cf3f7827a6253679fea8a76f35d8c82f Mon Sep 17 00:00:00 2001
From: FernandoM33 <fernandomonge2001@gmail.com>
Date: Mon, 7 Sep 2026 00:54:13 -0700
Subject: [PATCH] ux: make clip finding manual-first

---
 .../scripts/smoke-create-clips-workspace.mjs  |  9 ++++-
 frontend/src/features/clips/ClipFindStage.tsx | 38 ++++++++++++-------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/scripts/smoke-create-clips-workspace.mjs b/frontend/scripts/smoke-create-clips-workspace.mjs
index f63b644..c1bf743 100644
--- a/frontend/scripts/smoke-create-clips-workspace.mjs
+++ b/frontend/scripts/smoke-create-clips-workspace.mjs
@@ -64,8 +64,13 @@ assert.match(panelSource, /getNewManualClipDrafts\(clipDrafts, knownClipDraftIds
 assert.match(panelSource, /if \(mode !== 'clips' \|\| newlyAddedManualDrafts\.length === 0\) return/);
 assert.match(panelSource, /setClipStage\('prepare'\);\s+setActiveClipDraftId\(draft\.id\);\s+setSelectedWordIndices\(getWordIndicesForClip\(words, draft\)\)/);
 assert.match(findStageSource, /Find moments with AI/);
-assert.match(findStageSource, />Find moments<\/h3>/);
-assert.match(findStageSource, /Choose moments yourself/);
+assert.match(findStageSource, />Choose moments<\/h3>/);
+assert.match(findStageSource, /Start from the transcript — no AI required/);
+assert.match(findStageSource, /Optional AI discovery/);
+assert.ok(
+  findStageSource.indexOf('Start from the transcript — no AI required') < findStageSource.indexOf('Find moments with AI'),
+  'manual transcript clipping must be presented before optional AI discovery',
+);
 assert.match(reviewSource, /Preview each moment/);
 assert.match(reviewSource, /Prepare approved clips/);
 assert.match(reviewSource, /Find more moments/);
diff --git a/frontend/src/features/clips/ClipFindStage.tsx b/frontend/src/features/clips/ClipFindStage.tsx
index 9ec7ba0..0756205 100644
--- a/frontend/src/features/clips/ClipFindStage.tsx
+++ b/frontend/src/features/clips/ClipFindStage.tsx
@@ -19,21 +19,31 @@ export default function ClipFindStage({
 }: ClipFindStageProps) {
   return (
     <div className="space-y-3">
-      <h3 className="text-xs font-medium text-editor-text">Find moments</h3>
-      <p className="text-xs leading-5 text-editor-text-muted">
-        Start with AI discovery, or choose moments yourself from the transcript. AI suggestions are never approved or exported automatically.
-      </p>
-      <button
-        onClick={onFindWithAI}
-        disabled={isProcessing || !hasWords}
-        className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
-      >
-        {isProcessing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Film className="w-4 h-4" />}
-        {isProcessing ? processingMessage : 'Find moments with AI'}
-      </button>
-      <div className="rounded bg-editor-surface px-3 py-2 text-xs leading-5 text-editor-text-muted">
-        <span className="font-medium text-editor-text">Choose moments yourself:</span> select transcript words, then choose <span className="text-editor-text">Draft clip</span>. Speaker turns are a secondary shortcut.
+      <h3 className="text-xs font-medium text-editor-text">Choose moments</h3>
+      <div className="rounded border border-editor-accent/30 bg-editor-accent/5 px-3 py-3 text-xs leading-5 text-editor-text-muted">
+        <div className="font-medium text-editor-text">Start from the transcript — no AI required</div>
+        <p className="mt-1">
+          Select the words you want, preview the selection, then choose <span className="font-medium text-editor-text">Draft clip</span>.
+        </p>
       </div>
+
+      <div className="space-y-2 border-t border-editor-border pt-3">
+        <div>
+          <div className="text-[11px] font-medium text-editor-text">Optional AI discovery</div>
+          <p className="mt-1 text-[11px] leading-4 text-editor-text-muted">
+            Ask AI to suggest candidate moments for you to review. Nothing is approved or exported automatically.
+          </p>
+        </div>
+        <button
+          onClick={onFindWithAI}
+          disabled={isProcessing || !hasWords}
+          className="w-full flex items-center justify-center gap-2 rounded-lg border border-editor-border bg-editor-surface px-4 py-2 text-xs font-medium text-editor-text-muted transition-colors hover:border-editor-accent/50 hover:text-editor-text disabled:opacity-50"
+        >
+          {isProcessing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Film className="w-4 h-4" />}
+          {isProcessing ? processingMessage : 'Find moments with AI'}
+        </button>
+      </div>
+
       {speakerTurnCount > 0 && (
         <button
           onClick={onDraftSpeakerTurns}