makethisbetter 1.5.0 → 1.5.2

package/dist/popup/clarify.d.ts

@@ -6,6 +6,8 @@ interface ClarifyCardOptions {
     apiClient: ApiClient;
     messages: I18nMessages;
     onDone: () => void;
+    x?: number;
+    y?: number;
 }
 export declare class ClarifyCard {
     private el;
@@ -13,17 +15,24 @@ export declare class ClarifyCard {
     private inputEl;
     private sendBtn;
     private pollTimer;
+    private pollDeadline;
     private doneTimer;
+    private streamingBubble;
     private feedbackId;
     private apiClient;
     private onDone;
     private sending;
     private destroyed;
     constructor(shadow: ShadowContainer, opts: ClarifyCardOptions);
+    private positionCard;
     private buildHTML;
     private bindEvents;
     private startConversation;
     private sendMessage;
+    private runTurn;
+    private runTurnViaPolling;
+    private appendStreamDelta;
+    private endStreamingBubble;
     private startPolling;
     private stopPolling;
     private poll;
@@ -32,6 +41,7 @@ export declare class ClarifyCard {
     private renderMessages;
     private appendMessage;
     private showThinking;
+    private removeThinking;
     destroy(): void;
 }
 export {};

package/dist/popup/clarify.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clarify.d.ts","sourceRoot":"","sources":["../../src/popup/clarify.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAO9C,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;IACtB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,qBAAa,WAAW;IACtB,OAAO,CAAC,EAAE,CAAgB;IAC1B,OAAO,CAAC,UAAU,CAAiB;IACnC,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,SAAS,CAA6C;IAC9D,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,SAAS,CAAQ;gBAEb,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB;IAmB7D,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,UAAU;YAuBJ,iBAAiB;YAiBjB,WAAW;IAiCzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;YAOL,IAAI;IAelB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IAQpB,OAAO,IAAI,IAAI;CAShB"}
+{"version":3,"file":"clarify.d.ts","sourceRoot":"","sources":["../../src/popup/clarify.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAS9C,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;IACtB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;CACX;AAKD,qBAAa,WAAW;IACtB,OAAO,CAAC,EAAE,CAAgB;IAC1B,OAAO,CAAC,UAAU,CAAiB;IACnC,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,SAAS,CAA6C;IAC9D,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,SAAS,CAAQ;gBAEb,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB;IAoB7D,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,SAAS;IAmCjB,OAAO,CAAC,UAAU;YAqBJ,iBAAiB;YAKjB,WAAW;YA0BX,OAAO;YAmBP,iBAAiB;IAa/B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;YAOL,IAAI;IAoBlB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAItB,OAAO,IAAI,IAAI;CAShB"}

package/dist/screenshot/capture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../src/screenshot/capture.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,wBAAsB,iBAAiB,CAAC,WAAW,GAAE,UAAU,EAAO,GAAG,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAkB5F"}
+{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../src/screenshot/capture.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAK1C,wBAAsB,iBAAiB,CAAC,WAAW,GAAE,UAAU,EAAO,GAAG,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAqB5F"}

package/dist/widget/controller.d.ts

@@ -15,6 +15,7 @@ export declare class WidgetController {
     private messages;
     private mode;
     private currentAnnotation;
+    private lastPopupPos;
     private recordingManager;
     private lastHandoff;
     constructor(config: MakeThisBetterConfig);

package/dist/widget/controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,WAAW,CAAyE;gBAEhF,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;IA8C1B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IAgBf,OAAO,IAAI,IAAI;CAWhB"}
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,UAAU,CAAA;AAIhE,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,iBAAiB,CAAqC;IAC9D,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,WAAW,CAAyE;gBAEhF,MAAM,EAAE,oBAAoB;IAcxC,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;IA8C1B,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IAgBf,OAAO,IAAI,IAAI;CAWhB"}

package/dist/widget/shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../src/widget/shadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAEpD,qBAAa,eAAe;IAC1B,OAAO,CAAC,IAAI,CAAa;IACzB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAA;gBAEb,KAAK,GAAE,oBAAoB,CAAC,OAAO,CAAU;IAczD,EAAE,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;IAM3E,MAAM,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAI9B,MAAM,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM9B,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../src/widget/shadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAEpD,qBAAa,eAAe;IAC1B,OAAO,CAAC,IAAI,CAAa;IACzB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAA;gBAEb,KAAK,GAAE,oBAAoB,CAAC,OAAO,CAAU;IAczD,EAAE,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC;IAM3E,MAAM,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAI9B,MAAM,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAM9B,OAAO,IAAI,IAAI;CAMhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makethisbetter",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Make This Better JS Widget SDK — embed user feedback collection in any website",
   "type": "module",
   "main": "./dist/makethisbetter.cjs",

package/src/api/client.test.ts

@@ -198,6 +198,37 @@ describe('ApiClient', () => {
     expect(key2).toBe(key1)
   })
 
+  it('streams clarify deltas and resolves the done result', async () => {
+    const sse = [
+      'event: delta\ndata: {"text":"Hi "}\n\n',
+      'event: delta\ndata: {"text":"there"}\n\n',
+      'event: done\ndata: {"done":true,"messages":[{"role":"assistant","content":"Hi there"}]}\n\n',
+    ].join('')
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(sse, { status: 200, headers: { 'Content-Type': 'text/event-stream' } }),
+    )
+
+    const client = new ApiClient('key', 'https://api.example.com')
+    const deltas: string[] = []
+    const result = await client.streamClarification('fb_1', 'hello', (t) => deltas.push(t))
+
+    expect(deltas).toEqual(['Hi ', 'there'])
+    expect(result.done).toBe(true)
+    expect(result.messages).toEqual([{ role: 'assistant', content: 'Hi there' }])
+  })
+
+  it('throws from streamClarification when the server does not stream', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response(JSON.stringify({ done: false }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    )
+
+    const client = new ApiClient('key', 'https://api.example.com')
+    await expect(client.streamClarification('fb_1', undefined, () => {})).rejects.toThrow()
+  })
+
   it('uses a fresh idempotency key for each separate submission', async () => {
     const keys: string[] = []
     vi.spyOn(globalThis, 'fetch').mockImplementation(async (_url, init) => {

package/src/api/client.ts

@@ -1,4 +1,9 @@
-import type { FeedbackPayload, FeedbackResponse, ClarifyResponse } from '../types'
+import type { FeedbackPayload, FeedbackResponse, ClarifyResponse, ClarifyMessage } from '../types'
+
+export interface ClarifyStreamResult {
+  messages: ClarifyMessage[]
+  done: boolean
+}
 
 const DEFAULT_API_URL = 'https://makethisbetter.dev/api/v1'
 
@@ -59,7 +64,8 @@ export class ApiClient {
     }
 
     if (screenshot) {
-      form.append('feedback[screenshot]', screenshot, 'screenshot.png')
+      const ext = screenshot.type === 'image/jpeg' ? 'jpg' : 'png'
+      form.append('feedback[screenshot]', screenshot, `screenshot.${ext}`)
     }
 
     const headers = await this.authHeaders()
@@ -125,6 +131,33 @@ export class ApiClient {
     return res.json() as Promise<ClarifyResponse>
   }
 
+  // Streams a clarification turn over SSE. Calls onDelta for each token and
+  // resolves with the committed result. Throws if the server doesn't stream
+  // (e.g. old backend returns JSON) so the caller can fall back to polling.
+  async streamClarification(
+    feedbackId: string,
+    message: string | undefined,
+    onDelta: (text: string) => void,
+  ): Promise<ClarifyStreamResult> {
+    const body: Record<string, string> = {}
+    if (message) body.message = message
+    const headers = await this.authHeaders('application/json')
+    headers['Accept'] = 'text/event-stream'
+
+    const res = await fetch(`${this.apiUrl}/widget/feedbacks/${feedbackId}/clarify`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body),
+    })
+
+    const contentType = res.headers.get('Content-Type') ?? ''
+    if (!res.ok || !res.body || !contentType.includes('text/event-stream')) {
+      throw new Error('clarify stream unavailable')
+    }
+
+    return consumeSse(res.body, onDelta)
+  }
+
   private async fetchWithRetry(url: string, init: RequestInit, retries = 1): Promise<Response> {
     let res: Response
     try {
@@ -151,6 +184,46 @@ function delay(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
 
+async function consumeSse(
+  body: ReadableStream<Uint8Array>,
+  onDelta: (text: string) => void,
+): Promise<ClarifyStreamResult> {
+  const reader = body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let result: ClarifyStreamResult = { messages: [], done: true }
+
+  const flush = (raw: string): void => {
+    // Each SSE record is "event: <name>\n data: <json>". Parse event + data.
+    const eventLine = raw.split('\n').find(l => l.startsWith('event:'))
+    const dataLine = raw.split('\n').find(l => l.startsWith('data:'))
+    if (!dataLine) return
+    const event = eventLine?.slice(6).trim()
+    const payload = JSON.parse(dataLine.slice(5).trim())
+    if (event === 'delta' && typeof payload.text === 'string') {
+      onDelta(payload.text)
+    } else if (event === 'done') {
+      result = {
+        messages: Array.isArray(payload.messages) ? payload.messages : [],
+        done: payload.done !== false,
+      }
+    }
+  }
+
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+    let sep: number
+    while ((sep = buffer.indexOf('\n\n')) !== -1) {
+      const record = buffer.slice(0, sep)
+      buffer = buffer.slice(sep + 2)
+      try { flush(record) } catch { /* skip malformed record */ }
+    }
+  }
+  return result
+}
+
 function generateIdempotencyKey(): string {
   if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID()

package/src/i18n/de.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: 'Maximale Aufnahmezeit erreicht',
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: 'Wir schärfen dein Feedback',
     thinking: 'Einen Moment...',
-    placeholder: 'Antwort eingeben...',
+    placeholder: 'Gib deine Antwort ein — oder Überspringen',
     send: 'Senden',
     skip: 'Überspringen',
   },

package/src/i18n/en.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: 'Maximum recording time reached',
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: 'Sharpening your feedback',
     thinking: 'Thinking...',
-    placeholder: 'Type your response...',
+    placeholder: 'Type your answer — or Skip',
     send: 'Send',
     skip: 'Skip',
   },

package/src/i18n/es.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: 'Se alcanzó el tiempo máximo de grabación',
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: 'Afinando tus comentarios',
     thinking: 'Pensando...',
-    placeholder: 'Escribe tu respuesta...',
+    placeholder: 'Escribe tu respuesta — o Omitir',
     send: 'Enviar',
     skip: 'Omitir',
   },

package/src/i18n/fr.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: "Durée maximale d'enregistrement atteinte",
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: 'Affinement de votre retour',
     thinking: 'Réflexion...',
-    placeholder: 'Tapez votre réponse...',
+    placeholder: 'Saisissez votre réponse — ou Ignorer',
     send: 'Envoyer',
     skip: 'Passer',
   },

package/src/i18n/ja.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: '最大録画時間に達しました',
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: 'フィードバックを整えています',
     thinking: '考え中...',
-    placeholder: '回答を入力...',
+    placeholder: '回答を入力 — またはスキップ',
     send: '送信',
     skip: 'スキップ',
   },

package/src/i18n/ko.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: '최대 녹화 시간에 도달했습니다',
   },
   clarify: {
+    title: 'Make This Better AI',
+    subtitle: '피드백을 다듬는 중',
     thinking: '생각 중...',
-    placeholder: '답변을 입력하세요...',
+    placeholder: '답변 입력 — 또는 건너뛰기',
     send: '보내기',
     skip: '건너뛰기',
   },

package/src/i18n/zh-CN.ts

@@ -54,8 +54,10 @@ export default {
     max_reached: '已达到最大录制时长',
   },
   clarify: {
+    title: '让它更好 AI',
+    subtitle: '正在完善你的反馈',
     thinking: '思考中...',
-    placeholder: '输入你的回复...',
+    placeholder: '输入你的回答 —— 或跳过',
     send: '发送',
     skip: '跳过',
   },

package/src/popup/clarify.test.ts

@@ -22,7 +22,7 @@ function mockApiClient(overrides: Partial<ApiClient> = {}): ApiClient {
   } as unknown as ApiClient
 }
 
-function setupCard(apiOverrides: Partial<ApiClient> = {}) {
+function setupCard(apiOverrides: Partial<ApiClient> = {}, pos?: { x: number; y: number }) {
   const shadow = new ShadowContainer()
   const onDone = vi.fn()
   const apiClient = mockApiClient(apiOverrides)
@@ -33,6 +33,8 @@ function setupCard(apiOverrides: Partial<ApiClient> = {}) {
     apiClient,
     messages,
     onDone,
+    x: pos?.x,
+    y: pos?.y,
   })
 
   return { shadow, card, onDone, apiClient, messages }
@@ -76,10 +78,56 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
-  it('calls startClarification on construction', async () => {
+  it('anchors near the given position instead of a fixed corner', async () => {
+    const { shadow, card } = setupCard({}, { x: 400, y: 300 })
+    const el = shadow.root.querySelector<HTMLDivElement>('.mtb-clarify')!
+    // Positioned via left/top near the point, not pinned to a corner.
+    expect(el.style.left).toBe('412px')
+    expect(el.style.top).toBe('312px')
+    expect(el.style.right).toBe('')
+    expect(el.style.bottom).toBe('')
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('clamps to the viewport when the point is near a screen edge', async () => {
+    // jsdom default viewport is 1024x768; a point at the far-right/bottom must
+    // pull the card back inside so it never overflows off-screen.
+    const { shadow, card } = setupCard({}, { x: 1020, y: 760 })
+    const el = shadow.root.querySelector<HTMLDivElement>('.mtb-clarify')!
+    const left = parseInt(el.style.left, 10)
+    const top = parseInt(el.style.top, 10)
+    expect(left + 346).toBeLessThanOrEqual(1024)
+    expect(top).toBeGreaterThanOrEqual(12)
+    expect(top).toBeLessThanOrEqual(768 - 12)
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('renders the redesigned header title and subtitle', async () => {
+    const { shadow, card, messages } = setupCard()
+    expect(shadow.root.querySelector('.mtb-clarify-title')?.textContent).toBe(messages.clarify.title)
+    expect(shadow.root.querySelector('.mtb-clarify-subtitle')?.textContent).toBe(messages.clarify.subtitle)
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('header close button ends the conversation', async () => {
+    const { shadow, card, onDone } = setupCard()
+    shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-close')!.click()
+    expect(onDone).toHaveBeenCalledOnce()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('falls back to startClarification when streaming is unavailable', async () => {
     const { shadow, card, apiClient } = setupCard()
     await vi.waitFor(() => {
-      expect(apiClient.startClarification).toHaveBeenCalledWith('fb_123')
+      expect(apiClient.startClarification).toHaveBeenCalledWith('fb_123', undefined)
     })
 
     card.destroy()
@@ -120,50 +168,44 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
-  it('send button is disabled when input is empty', async () => {
+  it('send button stays enabled (green) even when input is empty', async () => {
     const { shadow, card, apiClient } = setupCard()
     await vi.waitFor(() => {
       expect(apiClient.startClarification).toHaveBeenCalled()
     })
 
+    // The mockup keeps Send green at all times; the empty-input guard lives in
+    // the send handler, not a disabled attribute.
     const sendBtn = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send')!
-    expect(sendBtn.disabled).toBe(true)
-
-    card.destroy()
-    shadow.destroy()
-  })
-
-  it('send button enables when user types text', async () => {
-    const { shadow, card, apiClient } = setupCard()
-    await vi.waitFor(() => {
-      expect(apiClient.startClarification).toHaveBeenCalled()
-    })
-
-    const input = shadow.root.querySelector<HTMLInputElement>('.mtb-clarify-input')!
-    const sendBtn = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send')!
-
-    input.value = 'It crashes on click'
-    input.dispatchEvent(new Event('input'))
-
     expect(sendBtn.disabled).toBe(false)
 
     card.destroy()
     shadow.destroy()
   })
 
-  it('send button stays disabled for whitespace-only input', async () => {
-    const { shadow, card, apiClient } = setupCard()
+  it('does not send when input is empty or whitespace-only', async () => {
+    const startClarification = vi.fn().mockResolvedValue({
+      status: 'pending',
+      messages: [{ role: 'assistant', content: 'Tell me more' }],
+      done: false,
+    } satisfies ClarifyResponse)
+
+    const { shadow, card } = setupCard({ startClarification })
     await vi.waitFor(() => {
-      expect(apiClient.startClarification).toHaveBeenCalled()
+      expect(startClarification).toHaveBeenCalledOnce()
     })
+    await vi.advanceTimersByTimeAsync(0)
 
-    const input = shadow.root.querySelector<HTMLInputElement>('.mtb-clarify-input')!
+    const input = shadow.root.querySelector<HTMLTextAreaElement>('.mtb-clarify-input')!
     const sendBtn = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send')!
 
     input.value = '   '
     input.dispatchEvent(new Event('input'))
+    sendBtn.click()
 
-    expect(sendBtn.disabled).toBe(true)
+    // No second turn — whitespace is guarded in the send handler.
+    await vi.advanceTimersByTimeAsync(0)
+    expect(startClarification).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
@@ -498,6 +540,73 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
+  it('renders streamed deltas live and completes on the stream result', async () => {
+    const streamClarification = vi.fn().mockImplementation(
+      async (_id: string, _msg: string | undefined, onDelta: (t: string) => void) => {
+        onDelta('What ')
+        onDelta('broke?')
+        return {
+          messages: [{ role: 'assistant', content: 'What broke?' }],
+          done: false,
+        }
+      },
+    )
+
+    const { shadow, card } = setupCard({ streamClarification } as never)
+    await vi.waitFor(() => {
+      expect(streamClarification).toHaveBeenCalledWith('fb_123', undefined, expect.any(Function))
+    })
+    await vi.advanceTimersByTimeAsync(0)
+
+    expect(shadow.root.querySelector('.mtb-clarify-thinking')).toBeNull()
+    expect(shadow.root.querySelector('.mtb-clarify-ai')?.textContent).toBe('What broke?')
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('completes via streaming done and stops without polling', async () => {
+    const streamClarification = vi.fn().mockResolvedValue({
+      messages: [{ role: 'assistant', content: 'All clear, thanks!' }],
+      done: true,
+    })
+    const getClarification = vi.fn()
+
+    const { shadow, card, onDone } = setupCard({ streamClarification, getClarification } as never)
+    await vi.waitFor(() => {
+      expect(streamClarification).toHaveBeenCalled()
+    })
+    await vi.advanceTimersByTimeAsync(0)
+
+    await vi.advanceTimersByTimeAsync(2000)
+    expect(onDone).toHaveBeenCalledOnce()
+    expect(getClarification).not.toHaveBeenCalled()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
+  it('ends the conversation when polling exceeds the timeout with no reply', async () => {
+    const getClarification = vi.fn().mockResolvedValue({
+      status: 'pending',
+      messages: [],
+      done: false,
+    } satisfies ClarifyResponse)
+
+    const { shadow, card, onDone } = setupCard({ getClarification })
+    await vi.waitFor(() => {
+      expect(card).toBeTruthy()
+    })
+    await vi.advanceTimersByTimeAsync(0)
+
+    // Poll past the 45s deadline; the card should give up and call onDone.
+    await vi.advanceTimersByTimeAsync(48000)
+    expect(onDone).toHaveBeenCalledOnce()
+
+    card.destroy()
+    shadow.destroy()
+  })
+
   it('stops polling on destroy', async () => {
     const getClarification = vi.fn().mockResolvedValue({
       status: 'pending',