makethisbetter 1.9.0 → 1.9.2

package/dist/popup/clarify.d.ts

@@ -7,6 +7,8 @@ interface ClarifyCardOptions {
     apiClient: ApiClient;
     messages: I18nMessages;
     onFinalize: () => Promise<void> | void;
+    element?: HTMLDivElement;
+    position?: 'left' | 'right';
     x?: number;
     y?: number;
     preloadedResult?: ClarifyStreamResult;
@@ -49,7 +51,7 @@ export declare class ClarifyCard {
     private stopPolling;
     private poll;
     private handleDone;
-    private disableConversationInput;
+    private showFinalizeButton;
     private finalize;
     private showRetryButton;
     private renderConversation;

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,mBAAmB,EAAE,MAAM,eAAe,CAAA;AASnE,UAAU,kBAAkB;IAC1B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;IACtB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC,oBAAoB,CAAC,EAAE,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAC3D;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,eAAe,CAA8B;IACrD,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,oBAAoB,CAAC,CAAqC;gBAEtD,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB;IAwB7D,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,SAAS;IAmCjB,OAAO,CAAC,UAAU;YAuBJ,iBAAiB;YA8BjB,WAAW;YA+BX,cAAc;YAmBd,wBAAwB;YAgBxB,aAAa;IAY3B,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;YAOL,IAAI;IAwBlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,wBAAwB;YAKlB,QAAQ;IAgBtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAItB,OAAO,IAAI,IAAI;CAKhB"}
+{"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,mBAAmB,EAAE,MAAM,eAAe,CAAA;AASnE,UAAU,kBAAkB;IAC1B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,YAAY,CAAA;IACtB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,eAAe,CAAC,EAAE,mBAAmB,CAAA;IACrC,oBAAoB,CAAC,EAAE,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAA;CAC3D;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,eAAe,CAA8B;IACrD,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,SAAS,CAAW;IAC5B,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,eAAe,CAAC,CAAqB;IAC7C,OAAO,CAAC,oBAAoB,CAAC,CAAqC;gBAEtD,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB;IA4B7D,OAAO,CAAC,YAAY;IA+BpB,OAAO,CAAC,SAAS;IAmCjB,OAAO,CAAC,UAAU;YAuBJ,iBAAiB;YA8BjB,WAAW;YA+BX,cAAc;YAmBd,wBAAwB;YAgBxB,aAAa;IAY3B,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,WAAW;YAOL,IAAI;IAwBlB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;YAgBZ,QAAQ;IAgBtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAItB,OAAO,IAAI,IAAI;CAKhB"}

package/dist/popup/comment.d.ts

@@ -10,6 +10,7 @@ interface PopupOptions {
     onClose: () => void;
     onMyFeedback?: () => void;
     messages: I18nMessages;
+    position?: 'left' | 'right';
 }
 export declare class CommentPopup {
     private el;
@@ -29,6 +30,7 @@ export declare class CommentPopup {
     private submit;
     setLoading(loading: boolean): void;
     setError(message: string): void;
+    releaseElement(): HTMLDivElement;
     destroy(): void;
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"comment.d.ts","sourceRoot":"","sources":["../../src/popup/comment.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,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,YAAY,CAAA;CACvB;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,EAAE,CAAgB;IAC1B,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,OAAO,CAAY;IAC3B,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,YAAY;IAqBvD,OAAO,CAAC,SAAS;IA6CjB,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,MAAM;IAMd,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAclC,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"comment.d.ts","sourceRoot":"","sources":["../../src/popup/comment.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,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,UAAU,YAAY;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,YAAY,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC5B;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,EAAE,CAAgB;IAC1B,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,OAAO,CAAY;IAC3B,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,YAAY;IAqBvD,OAAO,CAAC,SAAS;IA6CjB,OAAO,CAAC,aAAa;IAwCrB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,MAAM;IAMd,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAclC,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAK/B,cAAc,IAAI,cAAc;IAIhC,OAAO,IAAI,IAAI;CAGhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,oBAAoB,EAAqD,MAAM,UAAU,CAAA;AAYvG,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,OAAO,CAA2B;IAC1C,OAAO,CAAC,GAAG,CAA0B;IACrC,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,CAAqB;IAChD,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,gBAAgB,CAAyC;IACjE,OAAO,CAAC,iBAAiB,CAAI;IAC7B,OAAO,CAAC,WAAW,CAAyE;IAC5F,OAAO,CAAC,0BAA0B,CAAQ;gBAE9B,MAAM,EAAE,oBAAoB;IAoBxC,OAAO,CAAC,aAAa,CAuBpB;IAED,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,uBAAuB;IA+B/B,OAAO,CAAC,gBAAgB,CAKvB;IAED,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;YAyCZ,kBAAkB;IA0ChC,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,WAAW;YAuBL,kBAAkB;IAsBhC,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IA4Bf,OAAO,IAAI,IAAI;CAahB"}
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/widget/controller.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,oBAAoB,EAAqD,MAAM,UAAU,CAAA;AAYvG,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,OAAO,CAA2B;IAC1C,OAAO,CAAC,GAAG,CAA0B;IACrC,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,CAAqB;IAChD,OAAO,CAAC,mBAAmB,CAAmC;IAC9D,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,IAAI,CAAe;IAC3B,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,iBAAiB,CAA0B;IACnD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,gBAAgB,CAAyC;IACjE,OAAO,CAAC,iBAAiB,CAAI;IAC7B,OAAO,CAAC,WAAW,CAAyE;IAC5F,OAAO,CAAC,0BAA0B,CAAQ;gBAE9B,MAAM,EAAE,oBAAoB;IAoBxC,OAAO,CAAC,aAAa,CAuBpB;IAED,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,uBAAuB;IA+B/B,OAAO,CAAC,gBAAgB,CAKvB;IAED,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,SAAS;IAyBjB,OAAO,CAAC,sBAAsB;YAYhB,YAAY;YAyCZ,kBAAkB;IAqChC,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,WAAW;YA0BL,kBAAkB;IAsBhC,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,OAAO;IA4Bf,OAAO,IAAI,IAAI;CAahB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makethisbetter",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Make This Better JS Widget SDK — embed user feedback collection in any website",
   "type": "module",
   "main": "./dist/makethisbetter.cjs",
@@ -60,7 +60,7 @@
   "homepage": "https://makethisbetter.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/makethisbetter/makethisbetter-js.git"
+    "url": "git+https://github.com/makethisbetter/makethisbetter-js.git"
   },
   "license": "MIT"
 }

package/src/i18n/de.ts

@@ -69,6 +69,7 @@ export default {
     thinking: 'Einen Moment...',
     placeholder: 'Antwort eingeben — oder Frage überspringen',
     send: 'Senden',
+    send_feedback: 'Feedback senden',
     skip: 'Überspringen & senden',
     retry: 'Erneut versuchen',
   },

package/src/i18n/en.ts

@@ -69,6 +69,7 @@ export default {
     thinking: 'Thinking...',
     placeholder: 'Type your answer — or skip the question',
     send: 'Send',
+    send_feedback: 'Send feedback',
     skip: 'Skip & send',
     retry: 'Retry',
   },

package/src/i18n/es.ts

@@ -69,6 +69,7 @@ export default {
     thinking: 'Pensando...',
     placeholder: 'Escribe tu respuesta — u omite la pregunta',
     send: 'Enviar',
+    send_feedback: 'Enviar comentario',
     skip: 'Omitir y enviar',
     retry: 'Reintentar',
   },

package/src/i18n/fr.ts

@@ -69,6 +69,7 @@ export default {
     thinking: 'Réflexion...',
     placeholder: 'Saisissez votre réponse — ou ignorez la question',
     send: 'Envoyer',
+    send_feedback: 'Envoyer le retour',
     skip: 'Ignorer et envoyer',
     retry: 'Réessayer',
   },

package/src/i18n/ja.ts

@@ -69,6 +69,7 @@ export default {
     thinking: '考え中...',
     placeholder: '回答を入力、または質問をスキップ',
     send: '送信',
+    send_feedback: 'フィードバックを送信',
     skip: 'スキップして送信',
     retry: '再試行',
   },

package/src/i18n/ko.ts

@@ -69,6 +69,7 @@ export default {
     thinking: '생각 중...',
     placeholder: '답변을 입력하거나 질문을 건너뛰세요',
     send: '보내기',
+    send_feedback: '피드백 보내기',
     skip: '건너뛰고 보내기',
     retry: '재시도',
   },

package/src/i18n/zh-CN.ts

@@ -69,6 +69,7 @@ export default {
     thinking: '思考中...',
     placeholder: '输入回答，或跳过问题',
     send: '发送',
+    send_feedback: '发送反馈',
     skip: '跳过并发送',
     retry: '重试',
   },

package/src/popup/clarify.test.ts

@@ -65,6 +65,38 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
+  it('reuses the current popup element without moving or replaying its entrance', async () => {
+    const shadow = new ShadowContainer()
+    const element = shadow.el<HTMLDivElement>('div', 'mtb-popup')
+    element.style.left = '40px'
+    element.style.top = '60px'
+    shadow.append(element)
+
+    const apiClient = mockApiClient()
+    const card = new ClarifyCard(shadow, {
+      submissionSessionId: 'submission_123',
+      submissionToken: 'submission-secret',
+      apiClient,
+      messages: getMessages('en'),
+      onFinalize: vi.fn(),
+      element,
+      x: 400,
+      y: 300,
+    })
+
+    await vi.waitFor(() => {
+      expect(apiClient.startClarification).toHaveBeenCalled()
+    })
+    expect(shadow.root.querySelector('.mtb-clarify')).toBe(element)
+    expect(element.className).toBe('mtb-clarify mtb-clarify-continuation')
+    expect(element.style.left).toBe('40px')
+    expect(element.style.top).toBe('60px')
+    expect(shadow.root.children).toHaveLength(2)
+
+    card.destroy()
+    shadow.destroy()
+  })
+
   it('renders header with skip button', async () => {
     const { shadow, card, messages, apiClient } = setupCard()
     await vi.waitFor(() => {
@@ -98,7 +130,7 @@ describe('ClarifyCard', () => {
     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(left + 346).toBeLessThanOrEqual(1024 - 44)
     expect(top).toBeGreaterThanOrEqual(12)
     expect(top).toBeLessThanOrEqual(768 - 12)
 
@@ -106,6 +138,26 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
+  it('leaves room for a left-side feedback tab', async () => {
+    const shadow = new ShadowContainer()
+    const card = new ClarifyCard(shadow, {
+      submissionSessionId: 'submission_123',
+      submissionToken: 'submission-secret',
+      apiClient: mockApiClient(),
+      messages: getMessages('en'),
+      onFinalize: vi.fn(),
+      position: 'left',
+      x: 0,
+      y: 300,
+    })
+    const element = shadow.root.querySelector<HTMLDivElement>('.mtb-clarify')!
+
+    expect(Number.parseFloat(element.style.left)).toBeGreaterThanOrEqual(44)
+
+    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)
@@ -253,9 +305,12 @@ describe('ClarifyCard', () => {
       expect(startClarification).toHaveBeenCalledTimes(2)
     })
     expect(startClarification).toHaveBeenCalledWith('submission_123', 'submission-secret', 'Button does nothing')
+    expect(onFinalize).not.toHaveBeenCalled()
     await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalled()
+      expect(shadow.root.querySelector('.mtb-clarify-send-feedback')).toBeTruthy()
     })
+    shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
@@ -382,7 +437,7 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
-  it('auto-finalizes when done=true from start', async () => {
+  it('waits for Send feedback when done=true from start', async () => {
     const startClarification = vi.fn().mockResolvedValue({
       status: 'complete',
       messages: [{ role: 'assistant', content: 'All clear, thanks!' }],
@@ -395,15 +450,19 @@ describe('ClarifyCard', () => {
     })
     await vi.advanceTimersByTimeAsync(0)
 
-    await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalledOnce()
-    })
+    expect(shadow.root.querySelector('.mtb-clarify-ai')?.textContent).toBe('All clear, thanks!')
+    expect(onFinalize).not.toHaveBeenCalled()
+
+    const sendFeedback = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!
+    expect(sendFeedback).toBeTruthy()
+    sendFeedback.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
   })
 
-  it('auto-completes when polling returns done=true', async () => {
+  it('waits for confirmation when polling returns done=true', async () => {
     const getClarification = vi.fn().mockResolvedValueOnce({
       status: 'complete',
       messages: [{ role: 'assistant', content: 'Done' }],
@@ -422,15 +481,17 @@ describe('ClarifyCard', () => {
     })
     await vi.advanceTimersByTimeAsync(0)
 
-    await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalledOnce()
-    })
+    const sendFeedback = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!
+    expect(sendFeedback).toBeTruthy()
+    expect(onFinalize).not.toHaveBeenCalled()
+    sendFeedback.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
   })
 
-  it('auto-finalizes on startClarification error', async () => {
+  it('waits for confirmation on startClarification error', async () => {
     const startClarification = vi.fn().mockRejectedValue(new Error('Network error'))
 
     const { shadow, card, onFinalize } = setupCard({ startClarification })
@@ -439,9 +500,11 @@ describe('ClarifyCard', () => {
     })
     await vi.advanceTimersByTimeAsync(0)
 
-    await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalledOnce()
-    })
+    const sendFeedback = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!
+    expect(sendFeedback).toBeTruthy()
+    expect(onFinalize).not.toHaveBeenCalled()
+    sendFeedback.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
@@ -588,7 +651,7 @@ describe('ClarifyCard', () => {
     shadow.destroy()
   })
 
-  it('completes via streaming done and stops without polling', async () => {
+  it('waits for confirmation after streaming completes without polling', async () => {
     const streamClarification = vi.fn().mockResolvedValue({
       messages: [{ role: 'assistant', content: 'All clear, thanks!' }],
       done: true,
@@ -603,15 +666,17 @@ describe('ClarifyCard', () => {
 
     await vi.advanceTimersByTimeAsync(2000)
     expect(getClarification).not.toHaveBeenCalled()
-    await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalledOnce()
-    })
+    const sendFeedback = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!
+    expect(sendFeedback).toBeTruthy()
+    expect(onFinalize).not.toHaveBeenCalled()
+    sendFeedback.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()
   })
 
-  it('auto-finalizes when polling exceeds the timeout with no reply', async () => {
+  it('waits for confirmation when polling exceeds the timeout with no reply', async () => {
     const getClarification = vi.fn().mockResolvedValue({
       status: 'pending',
       messages: [],
@@ -624,11 +689,13 @@ describe('ClarifyCard', () => {
     })
     await vi.advanceTimersByTimeAsync(0)
 
-    // Poll past the 45s deadline; the card should give up and auto-finalize.
+    // Poll past the 45s deadline; the card should give up and let the reporter confirm.
     await vi.advanceTimersByTimeAsync(48000)
-    await vi.waitFor(() => {
-      expect(onFinalize).toHaveBeenCalledOnce()
-    })
+    const sendFeedback = shadow.root.querySelector<HTMLButtonElement>('.mtb-clarify-send-feedback')!
+    expect(sendFeedback).toBeTruthy()
+    expect(onFinalize).not.toHaveBeenCalled()
+    sendFeedback.click()
+    expect(onFinalize).toHaveBeenCalledOnce()
 
     card.destroy()
     shadow.destroy()

package/src/popup/clarify.ts

@@ -15,6 +15,8 @@ interface ClarifyCardOptions {
   apiClient: ApiClient
   messages: I18nMessages
   onFinalize: () => Promise<void> | void
+  element?: HTMLDivElement
+  position?: 'left' | 'right'
   x?: number
   y?: number
   preloadedResult?: ClarifyStreamResult
@@ -22,7 +24,7 @@ interface ClarifyCardOptions {
 }
 
 const CARD_WIDTH = 346
-const CARD_HEIGHT = 320
+const CARD_HEIGHT = 270
 
 export class ClarifyCard {
   private el: HTMLDivElement
@@ -55,10 +57,14 @@ export class ClarifyCard {
     this.preloadedResult = opts.preloadedResult
     this.pendingClarification = opts.pendingClarification
 
-    this.el = shadow.el<HTMLDivElement>('div', 'mtb-clarify')
+    const existingElement = opts.element
+    this.el = existingElement ?? shadow.el<HTMLDivElement>('div', 'mtb-clarify')
+    this.el.className = existingElement ? 'mtb-clarify mtb-clarify-continuation' : 'mtb-clarify'
     this.el.innerHTML = this.buildHTML(opts.messages)
-    shadow.append(this.el)
-    this.positionCard(opts.x, opts.y)
+    if (!existingElement) {
+      shadow.append(this.el)
+      this.positionCard(opts.x, opts.y, opts.position ?? 'right')
+    }
 
     this.messagesEl = this.el.querySelector('.mtb-clarify-messages')!
     this.inputEl = this.el.querySelector('.mtb-clarify-input')!
@@ -70,15 +76,19 @@ export class ClarifyCard {
 
   // Anchors the card near the annotation point, clamped to the viewport so it
   // never overflows a screen edge (mirrors CommentPopup.positionPopup).
-  private positionCard(x?: number, y?: number): void {
-    const cardW = CARD_WIDTH
-    const cardH = this.el.offsetHeight || CARD_HEIGHT
+  private positionCard(x: number | undefined, y: number | undefined, tabPosition: 'left' | 'right'): void {
     const vw = window.innerWidth
     const vh = window.innerHeight
     const margin = 12
+    const tabWidth = 32
+    const cardW = Math.min(CARD_WIDTH, vw - 2 * margin - tabWidth)
+    const cardH = this.el.offsetHeight || CARD_HEIGHT
+    const minLeft = margin + (tabPosition === 'left' ? tabWidth : 0)
+    const maxRight = vw - margin - (tabPosition === 'right' ? tabWidth : 0)
 
     if (x === undefined || y === undefined) {
-      this.el.style.left = `${Math.max(margin, (vw - cardW) / 2)}px`
+      const centeredLeft = Math.max(minLeft, (vw - cardW) / 2)
+      this.el.style.left = `${Math.min(centeredLeft, maxRight - cardW)}px`
       this.el.style.top = `${Math.max(margin, (vh - cardH) / 2)}px`
       this.el.style.maxHeight = `${vh - 2 * margin}px`
       return
@@ -86,8 +96,9 @@ export class ClarifyCard {
 
     let left = x + 12
     let top = y + 12
-    if (left + cardW > vw - margin) left = x - cardW - 12
-    if (left < margin) left = margin
+    if (left + cardW > maxRight) left = x - cardW - 12
+    if (left + cardW > maxRight) left = maxRight - cardW
+    if (left < minLeft) left = minLeft
     if (top + cardH > vh - margin) top = vh - cardH - margin
     if (top < margin) top = margin
 
@@ -100,7 +111,7 @@ export class ClarifyCard {
     return `
       <div class="mtb-clarify-header">
         <span class="mtb-clarify-icon">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6L12 3z"/>
           </svg>
         </span>
@@ -109,18 +120,18 @@ export class ClarifyCard {
           <div class="mtb-clarify-subtitle">${escapeHtml(m.clarify.subtitle)}</div>
         </div>
         <button class="mtb-clarify-close" type="button" title="${escapeHtml(m.clarify.skip)}" aria-label="${escapeHtml(m.clarify.skip)}">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M18 6L6 18M6 6l12 12"/>
           </svg>
         </button>
       </div>
       <div class="mtb-clarify-messages"></div>
       <div class="mtb-clarify-footer">
-        <textarea class="mtb-clarify-input" rows="2" placeholder="${escapeHtml(m.clarify.placeholder)}"></textarea>
+        <textarea class="mtb-clarify-input" rows="1" placeholder="${escapeHtml(m.clarify.placeholder)}"></textarea>
         <div class="mtb-clarify-actions">
           <button class="mtb-clarify-skip" type="button">${escapeHtml(m.clarify.skip)}</button>
           <button class="mtb-clarify-send" type="button" disabled>
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <line x1="22" y1="2" x2="11" y2="13"/>
               <polygon points="22 2 15 22 11 13 2 9 22 2"/>
             </svg>
@@ -331,13 +342,23 @@ export class ClarifyCard {
     this.done = true
     this.stopPolling()
     this.removeThinking()
-    this.disableConversationInput()
-    void this.finalize()
+    this.showFinalizeButton()
   }
 
-  private disableConversationInput(): void {
-    this.inputEl.disabled = true
-    this.sendBtn.disabled = true
+  private showFinalizeButton(): void {
+    const footer = this.el.querySelector('.mtb-clarify-footer')!
+    footer.innerHTML = `
+      <button class="mtb-clarify-send-feedback" type="button">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="22" y1="2" x2="11" y2="13"/>
+          <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+        </svg>
+        <span>${escapeHtml(this.i18n.clarify.send_feedback)}</span>
+      </button>
+    `
+    footer.querySelector('.mtb-clarify-send-feedback')!.addEventListener('click', () => {
+      if (!this.destroyed) void this.finalize()
+    })
   }
 
   private async finalize(): Promise<void> {
@@ -406,4 +427,3 @@ export class ClarifyCard {
     this.el.remove()
   }
 }
-

package/src/popup/comment.test.ts

@@ -127,4 +127,42 @@ describe('CommentPopup', () => {
     popup.destroy()
     shadow.destroy()
   })
+
+  it('leaves room for the right-side feedback tab', () => {
+    const shadow = new ShadowContainer()
+    const popup = new CommentPopup(shadow, {
+      targetName: 'Export PDF',
+      x: window.innerWidth,
+      y: 120,
+      messages: getMessages('en'),
+      onSubmit: vi.fn(),
+      onClose: vi.fn(),
+      position: 'right',
+    })
+    const element = shadow.root.querySelector<HTMLElement>('.mtb-popup')!
+
+    expect(Number.parseFloat(element.style.left) + 320).toBeLessThanOrEqual(window.innerWidth - 44)
+
+    popup.destroy()
+    shadow.destroy()
+  })
+
+  it('leaves room for the left-side feedback tab', () => {
+    const shadow = new ShadowContainer()
+    const popup = new CommentPopup(shadow, {
+      targetName: 'Export PDF',
+      x: 0,
+      y: 120,
+      messages: getMessages('en'),
+      onSubmit: vi.fn(),
+      onClose: vi.fn(),
+      position: 'left',
+    })
+    const element = shadow.root.querySelector<HTMLElement>('.mtb-popup')!
+
+    expect(Number.parseFloat(element.style.left)).toBeGreaterThanOrEqual(44)
+
+    popup.destroy()
+    shadow.destroy()
+  })
 })

package/src/popup/comment.ts

@@ -12,6 +12,7 @@ interface PopupOptions {
   onClose: () => void
   onMyFeedback?: () => void
   messages: I18nMessages
+  position?: 'left' | 'right'
 }
 
 export class CommentPopup {
@@ -38,7 +39,7 @@ export class CommentPopup {
     this.textarea = this.el.querySelector('.mtb-textarea')!
     this.submitBtn = this.el.querySelector('.mtb-submit-btn')!
 
-    this.positionPopup(opts.x, opts.y, opts.targetRect)
+    this.positionPopup(opts.x, opts.y, opts.targetRect, opts.position ?? 'right')
     this.bindEvents(opts.messages)
     if (opts.onMyFeedback) {
       this.el.querySelector('.mtb-my-feedback')!.addEventListener('click', opts.onMyFeedback)
@@ -91,13 +92,16 @@ export class CommentPopup {
 
 
 
-  private positionPopup(x: number, y: number, targetRect?: TargetRect): void {
-    const popupW = 320
-    const popupH = this.el.offsetHeight || 260
+  private positionPopup(x: number, y: number, targetRect: TargetRect | undefined, tabPosition: 'left' | 'right'): void {
     const vw = window.innerWidth
     const vh = window.innerHeight
     const margin = 12
     const gap = 8
+    const tabWidth = 32
+    const popupW = Math.min(320, vw - 2 * margin - tabWidth)
+    const popupH = this.el.offsetHeight || 260
+    const minLeft = margin + (tabPosition === 'left' ? tabWidth : 0)
+    const maxRight = vw - margin - (tabPosition === 'right' ? tabWidth : 0)
 
     let left: number
     let top: number
@@ -117,10 +121,10 @@ export class CommentPopup {
       top = y + 12
     }
 
-    if (left + popupW > vw - margin) {
-      left = vw - popupW - margin
+    if (left + popupW > maxRight) {
+      left = maxRight - popupW
     }
-    if (left < margin) left = margin
+    if (left < minLeft) left = minLeft
     if (top < margin) top = margin
 
     this.el.style.left = `${left}px`
@@ -188,6 +192,10 @@ export class CommentPopup {
     this.errorEl.hidden = false
   }
 
+  releaseElement(): HTMLDivElement {
+    return this.el
+  }
+
   destroy(): void {
     this.el.remove()
   }
@@ -199,4 +207,3 @@ function formatDuration(seconds: number): string {
   const ss = String(total % 60).padStart(2, '0')
   return `${mm}:${ss}`
 }
-