feat: two-step extract preview with editable fields before create

Extract now calls extract-note-preview and shows an editable preview in the
refinement modal; Create note persists via create-extracted-note. E2E covers
the two-step flow and saving edited preview content.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: terryyin

e2e_test/features/assimilation/note_refinement.feature

@@ -58,9 +58,19 @@ Feature: Note refinement
       | C    | 2     | true             |
       | D    | 1     |                  |
       | E    | 1     |                  |
-    And I extract refinement layout points "B" and "D" to a new note
+    And I open extraction preview for refinement layout points "B" and "D"
+    And I create the note from the extraction preview
     Then the note title should be "Point B and D"
     And I should see folder "Sample tree/Context" containing these notes:
       | note-title    |
       | Sample        |
       | Point B and D |
+
+  Scenario: Save edited extraction preview content
+    Given OpenAI will extract layout points "B and D" to a new note with title "Point B and D" and content "Combined B and D" and updated parent content "A. C. E."
+    When I am assimilating the note "Sample"
+    And I open extraction preview for refinement layout points "B" and "D"
+    And I edit the extraction preview to title "Edited B and D" and content "Edited combined content" and updated parent content "A. C. E. edited"
+    And I create the note from the extraction preview
+    Then the note title should be "Edited B and D"
+    And I should see note "Sample tree/Context/Sample" has content "A. C. E. edited"

e2e_test/start/pageObjects/assimilationPage/refinementLayoutExpectations.ts

@@ -3,8 +3,18 @@ import {
   refinementLayoutPanel,
   removeRefinementLayoutButton,
   waitForExtractNote,
+  waitForExtractNotePreview,
 } from './shared'
 
+type ExtractionPreviewFields = {
+  newNoteTitle: string
+  newNoteContent: string
+  updatedOriginalNoteContent: string
+}
+
+const extractionPreviewPanel = () =>
+  cy.get('[data-test-id="extraction-preview"]')
+
 export function assimilationRefinementLayoutExpectations() {
   const showRefinementLayout = function (this: {
     openRefineNoteModal(): unknown
@@ -52,6 +62,12 @@ export function assimilationRefinementLayoutExpectations() {
       return this
     },
     extractLayoutPointsToNewNote(...layoutPointTexts: string[]) {
+      this.openExtractionPreviewForLayoutPoints(...layoutPointTexts)
+      this.createNoteFromExtractionPreview()
+      return this
+    },
+    openExtractionPreviewForLayoutPoints(...layoutPointTexts: string[]) {
+      showRefinementLayout.call(this)
       refinementLayoutPanel().within(() => {
         layoutPointTexts.forEach((layoutPointText) => {
           cy.contains('[data-layout-level] > label', layoutPointText)
@@ -61,6 +77,28 @@ export function assimilationRefinementLayoutExpectations() {
         })
         cy.findByRole('button', { name: 'Extract' }).click()
       })
+      waitForExtractNotePreview()
+      extractionPreviewPanel().should('be.visible')
+      return this
+    },
+    editExtractionPreviewFields(fields: ExtractionPreviewFields) {
+      extractionPreviewPanel().within(() => {
+        cy.get('[data-test-id="extraction-preview-new-title"]')
+          .clear()
+          .type(fields.newNoteTitle)
+        cy.get('[data-test-id="extraction-preview-new-content"]')
+          .clear()
+          .type(fields.newNoteContent)
+        cy.get('[data-test-id="extraction-preview-original-content"]')
+          .clear()
+          .type(fields.updatedOriginalNoteContent)
+      })
+      return this
+    },
+    createNoteFromExtractionPreview() {
+      extractionPreviewPanel()
+        .find('[data-test-id="extraction-preview-create"]')
+        .click()
       waitForExtractNote()
       return this
     },

e2e_test/start/pageObjects/assimilationPage/shared.ts

@@ -41,6 +41,12 @@ export const refinementLayoutPanel = () =>
 export const removeRefinementLayoutButton = () =>
   refinementLayoutPanel().find('[data-test-id="remove-refinement-layout"]')
 
+export const waitForExtractNotePreview = () => {
+  cy.contains('p.loading-message', 'AI is generating preview...', {
+    timeout: 15000,
+  }).should('not.exist')
+}
+
 export const waitForExtractNote = () => {
   cy.contains('p.loading-message', 'AI is creating note...', {
     timeout: 15000,

e2e_test/step_definitions/note.ts

@@ -828,6 +828,34 @@ When(
   }
 )
 
+When(
+  'I open extraction preview for refinement layout points {string} and {string}',
+  (firstPoint: string, secondPoint: string) => {
+    start
+      .assumeAssimilationPage()
+      .openExtractionPreviewForLayoutPoints(firstPoint, secondPoint)
+  }
+)
+
+When('I create the note from the extraction preview', () => {
+  start.assumeAssimilationPage().createNoteFromExtractionPreview()
+})
+
+When(
+  'I edit the extraction preview to title {string} and content {string} and updated parent content {string}',
+  (
+    newNoteTitle: string,
+    newNoteContent: string,
+    updatedOriginalNoteContent: string
+  ) => {
+    start.assumeAssimilationPage().editExtractionPreviewFields({
+      newNoteTitle,
+      newNoteContent,
+      updatedOriginalNoteContent,
+    })
+  }
+)
+
 Then(
   'the link {string} should link to the note with the same title',
   (linkText: string) => {

frontend/src/components/recall/NoteRefinement.vue

@@ -4,7 +4,7 @@
     class="mb-4 rounded-lg bg-accent p-4"
     data-test-id="refinement-layout"
   >
-    <div class="text-base">
+    <div v-if="!showExtractionPreview" class="text-base">
       <div class="font-semibold mb-3 text-accent-content">
         Note layout:
       </div>
@@ -62,12 +62,76 @@
         </button>
       </div>
     </div>
+
+    <div
+      v-else
+      class="text-base"
+      data-test-id="extraction-preview"
+    >
+      <div class="font-semibold mb-3 text-accent-content">
+        Extract preview:
+      </div>
+
+      <div
+        v-if="createError"
+        class="daisy-alert daisy-alert-error mb-3 text-sm"
+        data-test-id="extraction-preview-error"
+      >
+        {{ createError }}
+      </div>
+
+      <label class="block mb-3 text-accent-content">
+        <span class="font-medium">Updated original note content</span>
+        <textarea
+          v-model="extractionPreview.updatedOriginalNoteContent"
+          data-test-id="extraction-preview-original-content"
+          class="daisy-textarea daisy-textarea-bordered mt-1 w-full min-h-24"
+        />
+      </label>
+
+      <label class="block mb-3 text-accent-content">
+        <span class="font-medium">New note title</span>
+        <textarea
+          v-model="extractionPreview.newNoteTitle"
+          data-test-id="extraction-preview-new-title"
+          class="daisy-textarea daisy-textarea-bordered mt-1 w-full"
+          rows="1"
+        />
+      </label>
+
+      <label class="block mb-3 text-accent-content">
+        <span class="font-medium">New note content</span>
+        <textarea
+          v-model="extractionPreview.newNoteContent"
+          data-test-id="extraction-preview-new-content"
+          class="daisy-textarea daisy-textarea-bordered mt-1 w-full min-h-24"
+        />
+      </label>
+
+      <div class="flex gap-2 mt-4">
+        <button
+          data-test-id="extraction-preview-back"
+          class="daisy-btn daisy-btn-ghost daisy-btn-sm"
+          @click="backToLayout"
+        >
+          Back
+        </button>
+        <button
+          data-test-id="extraction-preview-create"
+          class="daisy-btn daisy-btn-primary daisy-btn-sm"
+          @click="createExtractedNote"
+        >
+          Create note
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type {
   Note,
+  NoteExtractionResult,
   NoteRefinementLayoutItem,
 } from "@generated/doughnut-backend-api"
 import { AiController } from "@generated/doughnut-backend-api/sdk.gen"
@@ -76,6 +140,7 @@ import {
   apiCallWithLoading,
   runWithBlockingApiLoading,
 } from "@/managedApi/clientSetup"
+import { toOpenApiError } from "@/managedApi/openApiError"
 import { useRefinementLayoutSelection } from "@/composables/useRefinementLayoutSelection"
 import usePopups from "../commons/Popups/usePopups"
 import RefinementLayoutItemRow from "./RefinementLayoutItemRow.vue"
@@ -93,6 +158,13 @@ const emit = defineEmits<{
 }>()
 
 const refinementLayoutItems = ref<NoteRefinementLayoutItem[]>([])
+const showExtractionPreview = ref(false)
+const extractionPreview = ref<NoteExtractionResult>({
+  newNoteTitle: "",
+  newNoteContent: "",
+  updatedOriginalNoteContent: "",
+})
+const createError = ref("")
 
 const {
   selectedItemIds,
@@ -102,6 +174,16 @@ const {
   clearSelection,
 } = useRefinementLayoutSelection(refinementLayoutItems)
 
+const resetExtractionPreview = () => {
+  showExtractionPreview.value = false
+  createError.value = ""
+  extractionPreview.value = {
+    newNoteTitle: "",
+    newNoteContent: "",
+    updatedOriginalNoteContent: "",
+  }
+}
+
 const loadRefinementLayout = async () => {
   try {
     const result = await apiCallWithLoading(() =>
@@ -113,10 +195,12 @@ const loadRefinementLayout = async () => {
     refinementLayoutItems.value =
       !result.error && result.data?.items ? result.data.items : []
     clearSelection()
+    resetExtractionPreview()
   } catch (err) {
     console.error("Failed to generate note layout:", err)
     refinementLayoutItems.value = []
     clearSelection()
+    resetExtractionPreview()
   }
 }
 
@@ -173,7 +257,7 @@ const extractNote = async () => {
   try {
     await runWithBlockingApiLoading(async () => {
       const response = await apiCallWithLoading(() =>
-        AiController.extractNote({
+        AiController.extractNotePreview({
           path: { note: props.note.id },
           body: {
             layout: { items: refinementLayoutItems.value },
@@ -183,7 +267,46 @@ const extractNote = async () => {
       )
 
       if (response.error || !response.data) {
-        await popups.alert("Failed to create note with AI")
+        await popups.alert("Failed to generate extract preview")
+        return
+      }
+
+      extractionPreview.value = { ...response.data }
+      createError.value = ""
+      showExtractionPreview.value = true
+    }, "AI is generating preview...")
+  } catch (err) {
+    console.error("Failed to generate extract preview:", err)
+    await popups.alert(`Error: ${err}`)
+  }
+}
+
+const backToLayout = () => {
+  showExtractionPreview.value = false
+  createError.value = ""
+}
+
+const createExtractedNote = async () => {
+  createError.value = ""
+
+  try {
+    await runWithBlockingApiLoading(async () => {
+      const response = await apiCallWithLoading(() =>
+        AiController.createExtractedNote({
+          path: { note: props.note.id },
+          body: {
+            newNoteTitle: extractionPreview.value.newNoteTitle,
+            newNoteContent: extractionPreview.value.newNoteContent,
+            updatedOriginalNoteContent:
+              extractionPreview.value.updatedOriginalNoteContent,
+          },
+        })
+      )
+
+      if (response.error || !response.data) {
+        const openApiError = toOpenApiError(response.error)
+        createError.value =
+          openApiError.message ?? "Failed to create note from preview"
         return
       }
 
@@ -192,8 +315,8 @@ const extractNote = async () => {
         .focusNoteRealm(router, response.data)
     }, "AI is creating note...")
   } catch (err) {
-    console.error("Failed to extract note:", err)
-    await popups.alert(`Error: ${err}`)
+    console.error("Failed to create extracted note:", err)
+    createError.value = `Error: ${err}`
   }
 }
 </script>