makethisbetter 1.9.0 → 1.9.2

package/src/styles/widget.css

@@ -338,7 +338,7 @@
   z-index: 2147483645;
   display: flex;
   flex-direction: column;
-  width: 320px;
+  width: min(320px, calc(100vw - 56px));
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 16px;
@@ -999,7 +999,7 @@
 .mtb-clarify {
   position: fixed;
   z-index: 2147483645;
-  width: 346px;
+  width: min(346px, calc(100vw - 56px));
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 16px;
@@ -1011,18 +1011,23 @@
   overflow: hidden;
 }
 
+.mtb-clarify-continuation {
+  width: min(320px, calc(100vw - 56px));
+  animation: none;
+}
+
 .mtb-clarify-header {
-  padding: 11px 13px 11px 14px;
+  padding: 8px 10px;
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 7px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }
 
 .mtb-clarify-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
   background: linear-gradient(140deg, #10b981, #059669);
   box-shadow: 0 1px 3px rgba(5, 150, 105, 0.4);
   display: flex;
@@ -1037,14 +1042,14 @@
 }
 
 .mtb-clarify-title {
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 650;
   line-height: 1.2;
   color: #191a1c;
 }
 
 .mtb-clarify-subtitle {
-  font-size: 10px;
+  font-size: 9.5px;
   color: rgba(0, 0, 0, 0.42);
 }
 
@@ -1064,19 +1069,18 @@
 
 .mtb-clarify-messages {
   flex: 1;
-  max-height: 250px;
   overflow-y: auto;
-  padding: 13px 13px 5px;
+  padding: 8px 10px 4px;
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: 6px;
 }
 
 .mtb-clarify-bubble {
   max-width: 82%;
-  padding: 9px 12px;
-  font-size: 12.5px;
-  line-height: 1.5;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.4;
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -1086,7 +1090,7 @@
   background: #ffffff;
   color: #191a1c;
   border: 1px solid rgba(0, 0, 0, 0.09);
-  border-radius: 13px 13px 13px 4px;
+  border-radius: 11px 11px 11px 3px;
 }
 
 .mtb-clarify-user {
@@ -1094,14 +1098,14 @@
   background: #059669;
   color: #fff;
   border: 1px solid #059669;
-  border-radius: 13px 13px 4px 13px;
+  border-radius: 11px 11px 3px 11px;
 }
 
 .mtb-clarify-thinking {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 11px 14px;
+  padding: 8px 12px;
 }
 
 .mtb-clarify-thinking .mtb-dot {
@@ -1111,20 +1115,20 @@
 }
 
 .mtb-clarify-footer {
-  padding: 3px 13px 13px;
+  padding: 3px 10px 10px;
   display: flex;
   flex-direction: column;
 }
 
 .mtb-clarify-input {
   width: 100%;
-  height: 52px;
-  padding: 9px 11px;
+  height: 40px;
+  padding: 7px 10px;
   border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 10px;
+  border-radius: 8px;
   font-family: inherit;
-  font-size: 13px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.4;
   color: #191a1c;
   outline: none;
   background: #fafafa;
@@ -1145,20 +1149,20 @@
 
 .mtb-clarify-actions {
   display: flex;
-  gap: 8px;
-  margin-top: 9px;
+  gap: 6px;
+  margin-top: 6px;
 }
 
 .mtb-clarify-skip {
   flex: 0 0 auto;
-  height: 34px;
-  padding: 0 14px;
+  height: 30px;
+  padding: 0 12px;
   border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 10px;
+  border-radius: 8px;
   background: #fff;
   cursor: pointer;
   font-family: inherit;
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 550;
   color: rgba(0, 0, 0, 0.55);
   white-space: nowrap;
@@ -1171,13 +1175,40 @@
 
 .mtb-clarify-send {
   flex: 1;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: none;
+  border-radius: 8px;
+  background: #059669;
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  transition: background 0.12s;
+}
+
+.mtb-clarify-send:not(:disabled):hover {
+  background: #047857;
+}
+
+.mtb-clarify-send:disabled {
+  background: rgba(0, 0, 0, 0.15);
+  cursor: not-allowed;
+}
+
+.mtb-clarify-send-feedback {
+  width: 100%;
   height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   border: none;
-  border-radius: 10px;
+  border-radius: 9px;
   background: #059669;
   color: #fff;
   cursor: pointer;
@@ -1187,11 +1218,11 @@
   transition: background 0.12s;
 }
 
-.mtb-clarify-send:not(:disabled):hover {
+.mtb-clarify-send-feedback:not(:disabled):hover {
   background: #047857;
 }
 
-.mtb-clarify-send:disabled {
+.mtb-clarify-send-feedback:disabled {
   background: rgba(0, 0, 0, 0.15);
   cursor: not-allowed;
 }
@@ -1503,4 +1534,3 @@
   font-size: 11px;
   color: rgba(0, 0, 0, 0.42);
 }
-

package/src/widget/controller.test.ts

@@ -36,7 +36,10 @@ function sessionFlowResponse(
 }
 
 async function confirmSubmission(shadow: ShadowRoot): Promise<void> {
-  // ClarifyCard auto-finalizes after done, no manual confirmation needed
+  await vi.waitFor(() => {
+    expect(shadow.querySelector('.mtb-clarify-send-feedback')).not.toBeNull()
+  })
+  shadow.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!.click()
   await vi.waitFor(() => {
     expect(shadow.querySelector('.mtb-success')).not.toBeNull()
   })
@@ -78,9 +81,10 @@ describe('MakeThisBetter widget flow', () => {
         }), { status: 201 })
       }
       if (href.endsWith('/clarification')) {
-        return new Response(JSON.stringify({
-          clarification: { status: 'completed', messages: [], done: true },
-        }), { status: 200, headers: { 'Content-Type': 'application/json' } })
+        return new Response(
+          'event: done\ndata: {"messages":[{"role":"assistant","content":"All clear, thanks!"}],"done":true}\n\n',
+          { status: 200, headers: { 'Content-Type': 'text/event-stream' } },
+        )
       }
       if (init?.body instanceof FormData) capturedBody = init.body
       return new Response(JSON.stringify({
@@ -102,6 +106,8 @@ describe('MakeThisBetter widget flow', () => {
     overlay.dispatchEvent(new MouseEvent('mouseup', { clientX: 20, clientY: 30, bubbles: true }))
 
     const textarea = shadow.querySelector<HTMLTextAreaElement>('.mtb-textarea')!
+    const feedbackPopup = shadow.querySelector<HTMLDivElement>('.mtb-popup')!
+    const popupPosition = { left: feedbackPopup.style.left, top: feedbackPopup.style.top }
     textarea.value = 'Export is broken'
     textarea.dispatchEvent(new Event('input'))
     shadow.querySelector<HTMLButtonElement>('.mtb-submit-btn')!.click()
@@ -119,7 +125,19 @@ describe('MakeThisBetter widget flow', () => {
       text: 'Export PDF',
       name: 'Export PDF',
     }))
-    // ClarifyCard auto-finalizes after done, wait for the success card
+    await vi.waitFor(() => {
+      expect(shadow.querySelector('.mtb-clarify-send-feedback')).not.toBeNull()
+    }, { timeout: 5000 })
+    const clarification = shadow.querySelector<HTMLDivElement>('.mtb-clarify')!
+    expect(clarification).toBe(feedbackPopup)
+    expect(clarification.classList.contains('mtb-clarify-continuation')).toBe(true)
+    expect({ left: clarification.style.left, top: clarification.style.top }).toEqual(popupPosition)
+    expect(shadow.querySelector('.mtb-popup')).toBeNull()
+    expect(shadow.querySelector('.mtb-clarify-ai')?.textContent).toBe('All clear, thanks!')
+    expect(fetchSpy.mock.calls.some(([url]) => String(url).endsWith('/feedback'))).toBe(false)
+
+    shadow.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!.click()
+
     await vi.waitFor(() => {
       expect(shadow.querySelector('.mtb-success-title')?.textContent).toBe('Sent — thanks!')
     }, { timeout: 5000 })
@@ -255,8 +273,13 @@ describe('MakeThisBetter widget flow', () => {
     textarea.dispatchEvent(new Event('input'))
     shadow.querySelector<HTMLButtonElement>('.mtb-submit-btn')!.click()
 
-    // ClarifyCard auto-finalizes after done=true, which triggers the /feedback
-    // POST. That POST hangs on finalizeResponse, so success never appears.
+    await vi.waitFor(() => {
+      expect(shadow.querySelector('.mtb-clarify-send-feedback')).not.toBeNull()
+    })
+    shadow.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!.click()
+
+    // The explicit confirmation triggers the /feedback POST. That POST hangs
+    // on finalizeResponse, so Exit can still invalidate the pending result.
     await vi.waitFor(() => {
       expect(fetchSpy.mock.calls.some(([url]) => String(url).endsWith('/feedback'))).toBe(true)
     })
@@ -713,7 +736,7 @@ describe('MakeThisBetter widget flow', () => {
     })
   })
 
-  it('auto-finalizes when AI clarification is unavailable', async () => {
+  it('requires Send feedback when AI clarification is unavailable', async () => {
     const target = document.createElement('button')
     target.id = 'export-btn'
     target.textContent = 'Export PDF'
@@ -742,7 +765,13 @@ describe('MakeThisBetter widget flow', () => {
     textarea.dispatchEvent(new Event('input'))
     shadow.querySelector<HTMLButtonElement>('.mtb-submit-btn')!.click()
 
-    // ClarifyCard auto-finalizes, so the success card should appear directly
+    await vi.waitFor(() => {
+      expect(shadow.querySelector('.mtb-clarify-send-feedback')).not.toBeNull()
+    }, { timeout: 5000 })
+    expect(fetchSpy.mock.calls.some(([url]) => String(url).endsWith('/feedback'))).toBe(false)
+
+    shadow.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!.click()
+
     await vi.waitFor(() => {
       expect(shadow.querySelector('.mtb-success-title')?.textContent).toBe("Thanks! We've received your feedback.")
     }, { timeout: 5000 })

package/src/widget/controller.ts

@@ -279,6 +279,7 @@ export class WidgetController {
       onSubmit: (description) => this.handleSubmit(description),
       onClose: () => this.exitAll(),
       onMyFeedback: this.buildMyFeedbackHandler(),
+      position: this.config.position ?? 'right',
     })
     this.submittingUi = this.popup
   }
@@ -342,10 +343,11 @@ export class WidgetController {
     submissionAttempt: number,
   ): Promise<void> {
     if (!submission.ai_clarify_available) {
-      this.teardownSubmittingUi()
-      this.mode = 'clarifying'
-      this.tab?.setActive(true)
-      await this.finalizeSubmission()
+      const element = this.teardownSubmittingUi(true)
+      this.showClarify(submission, pos, {
+        element,
+        preloadedResult: { messages: [], done: true },
+      })
       return
     }
 
@@ -363,24 +365,19 @@ export class WidgetController {
 
     if (submissionAttempt !== this.submissionAttempt) return
 
-    this.teardownSubmittingUi()
+    const element = this.teardownSubmittingUi(true)
 
     if (result) {
-      if (result.done) {
-        this.mode = 'clarifying'
-        this.tab?.setActive(true)
-        await this.finalizeSubmission()
-      } else {
-        this.showClarify(submission, pos, { preloadedResult: result })
-      }
+      this.showClarify(submission, pos, { element, preloadedResult: result })
     } else {
-      this.showClarify(submission, pos, { pendingClarification: clarifyPromise })
+      this.showClarify(submission, pos, { element, pendingClarification: clarifyPromise })
     }
   }
 
-  private teardownSubmittingUi(): void {
+  private teardownSubmittingUi(preservePopup = false): HTMLDivElement | undefined {
+    const popupElement = preservePopup ? this.popup?.releaseElement() : undefined
     this.teardownDraw()
-    this.popup?.destroy()
+    if (!popupElement) this.popup?.destroy()
     this.popup = null
     this.dim?.destroy()
     this.dim = null
@@ -390,12 +387,14 @@ export class WidgetController {
     this.recordingManager?.destroy()
     this.recordingManager = null
     this.submittingUi = null
+    return popupElement
   }
 
   private showClarify(
     submission: SubmissionSessionResponse,
     pos: { x: number; y: number } | null,
     speculative?: {
+      element?: HTMLDivElement
       preloadedResult?: ClarifyStreamResult
       pendingClarification?: Promise<ClarifyStreamResult | null>
     },
@@ -407,6 +406,8 @@ export class WidgetController {
       submissionToken: submission.token,
       apiClient: this.apiClient,
       messages: this.messages,
+      element: speculative?.element,
+      position: this.config.position ?? 'right',
       x: pos?.x,
       y: pos?.y,
       onFinalize: () => this.finalizeSubmission(),