@rose42/t3-feedback 0.1.0

package/dist/client/mount.js

@@ -0,0 +1,2408 @@
+import { captureFrameBurst, captureScreenshot, createSourceResolver, initFeedbackCapture, } from "@rose42/feedback-capture";
+import { T3_FEEDBACK_CLOSE_EVENT, T3_FEEDBACK_OPEN_EVENT } from "../controls.js";
+import { splitThreadTitleReportType } from "../bridge/format.js";
+import { formatShortcutLabel, resolveActivePlugins, resolveFabConfig, resolvePickConfig, resolveRecordConfig, resolveReportTypeGlyph, resolveScreenshotConfig, resolveShortcut, } from "../types.js";
+import { openInT3Seamless, shouldBypassSeamlessOpen } from "./openInT3.js";
+import { ACTIVE_THREAD_POLL_MS, clearActiveThreads, listActiveThreads, removeActiveThread, removeActiveThreads, upsertActiveThread, } from "./activeThreads.js";
+import { abortScreenshotRegions } from "./cropScreenshot.js";
+import { defaultThreadDestination, readSessionThreadRecord, writeSessionThreadRecord, } from "./sessionThread.js";
+import { defaultThreadSearchQuery, filterThreadListItems } from "./threadPicker.js";
+import { createT3FeedbackHttpTransport } from "./transport.js";
+import { clearFeedbackDraft, migrateDraftExtras, readFeedbackDraft, writeFeedbackDraft, } from "./draft.js";
+import { buildReportTypeHint, gatePluginByReportType, pageContextForReportType, pluginAppliesToReportType, } from "./reportType.js";
+import { createActionRegistry, createAfterPickRegistry, createBusyRegistry, createDraftClearRegistry, createDraftExtrasStore, createHostMedia, } from "./ui/host.js";
+import { createCommentPanelPlugin, createReportTypePanelPlugin } from "./ui/commentPanelPlugin.js";
+import { createCollectOnlyBuiltinPlugins, resolveAllPanelUiContributions, } from "./ui/defaultPlugins.js";
+import { createElementTargetPanelPlugin } from "./ui/elementTargetPanelPlugin.js";
+import { asPluginsWithUi } from "./ui/resolveContributions.js";
+import { createScreenshotPanelPlugin } from "./ui/screenshotPanelPlugin.js";
+import { mountSlotContributions } from "./ui/slots.js";
+import { matchRegisteredShortcut, resolvePluginShortcuts, } from "./ui/shortcuts.js";
+export { buildReportTypeHint, gatePluginByReportType, pageContextForReportType, pluginAppliesToReportType, };
+export { readFeedbackDraft } from "./draft.js";
+const REPORT_TYPE_STORAGE_KEY = "t3-feedback:report-type";
+function readReportType() {
+    try {
+        const raw = sessionStorage.getItem(REPORT_TYPE_STORAGE_KEY);
+        if (raw === "feedback" || raw === "suggestion" || raw === "bug")
+            return raw;
+    }
+    catch {
+        // sessionStorage may be unavailable
+    }
+    return "bug";
+}
+function writeReportType(value) {
+    try {
+        sessionStorage.setItem(REPORT_TYPE_STORAGE_KEY, value);
+    }
+    catch {
+        // ignore
+    }
+}
+const noopHandle = () => ({
+    open: () => undefined,
+    close: () => undefined,
+    pick: () => undefined,
+    capture: () => undefined,
+    record: () => undefined,
+    unmount: () => undefined,
+});
+function cssLength(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function fabPositionCss(position) {
+    const edges = ["top", "right", "bottom", "left"]
+        .filter((edge) => position[edge] !== undefined)
+        .map((edge) => `${edge}: ${cssLength(position[edge])};`)
+        .join(" ");
+    return edges;
+}
+const DEFAULT_COPY = {
+    fabTitle: "Send feedback to T3 (Ctrl/⌘+Shift+F)",
+    fabAriaLabel: "Send feedback to T3",
+    panelTitle: "Feedback → T3",
+    commentPlaceholder: "What’s wrong / what should change?",
+    captureLabel: "Capture screenshot",
+    pickLabel: "Pick element",
+    clearPickLabel: "Clear element",
+    openInEditorLabel: "Open in editor",
+    clearScreenshotLabel: "Clear screenshots",
+    recordLabel: "Record",
+    stopRecordLabel: "Stop",
+    recordingStatus: "Recording… click Stop when done (max 5s).",
+    recordFailedStatus: "Recording failed or cancelled.",
+    burstAttachedStatus: "Frames attached.",
+    galleryFullStatus: "Image limit reached — remove one to add more.",
+    galleryFullTooltip: "Image limit reached — remove one to add more.",
+    pickBurstHint: "Select frames to attach. Click to toggle.",
+    pickBurstConfirmLabel: "Add selected",
+    removeImageLabel: "Remove",
+    discardScreenshotLabel: "Discard",
+    pickingStatus: "Click an element… Esc cancels.",
+    pickCancelledStatus: "Element pick cancelled.",
+    cancelLabel: "Cancel",
+    cancelTitle: "Discard draft and close. Esc or click outside keeps your draft.",
+    sendLabel: "Send to T3",
+    capturingStatus: "Capturing… (this panel is hidden during capture)",
+    captureFailedStatus: "Capture failed or cancelled - paste an image with Ctrl/⌘+V, or retry and share this tab.",
+    screenshotAttachedStatus: "Screenshot attached.",
+    pastedAttachedStatus: "Pasted image attached.",
+    commentRequiredStatus: "Add a short comment.",
+    sendingStatus: "Sending to T3…",
+    sentStatus: "Sent.",
+    openInT3Label: "Open in T3",
+    toastSentLabel: "Sent to T3",
+    activityTitle: "Active chats",
+    activityEmptyLabel: "No active chats.",
+    activityNewLabel: "New feedback",
+    activityOpenLabel: "Open",
+    activityContinueLabel: "Continue",
+    activitySettleLabel: "Settle",
+    activityDismissLabel: "Dismiss",
+    activityClearLabel: "Clear all",
+    activityFabTitle: "Active T3 chats",
+    activityFabAriaLabel: "Active T3 chats",
+    cropHint: "Drag to select a region. Enter crops; Esc uses the full image.",
+    cropHintSeeded: "Region prefilled from the picked element. Adjust the selection, Enter crops, Esc uses full.",
+    cropLabel: "Crop",
+    useFullLabel: "Use full",
+    changeRegionLabel: "Change region",
+    /** Visible CTA on the clipboard offer button (keep short — full phrase is the title). */
+    insertClipboardLabel: "Insert",
+    /** Tooltip / aria for the clipboard insert button. */
+    insertClipboardTitle: "Insert screenshot from clipboard",
+    dismissClipboardLabel: "Dismiss",
+    autoCapturingStatus: "Capturing around the picked element…",
+    autoCroppedStatus: "Screenshot cropped to the picked element.",
+    autoCapturedStatus: "Screenshot attached.",
+    includeInnerHTMLLabel: "innerHTML",
+    stylesLabel: "Styles",
+    stylesNoneLabel: "None",
+    stylesLayoutLabel: "Layout",
+    stylesComputedLabel: "Computed",
+    elementSectionLabel: "Element",
+    screenshotSectionLabel: "Screenshots",
+    reportTypeBugLabel: "Bug",
+    reportTypeFeedbackLabel: "Feedback",
+    reportTypeSuggestionLabel: "Suggestion",
+    reportTypeBugEmoji: "🐛",
+    reportTypeFeedbackEmoji: "💬",
+    reportTypeSuggestionEmoji: "💡",
+    threadDestinationLabel: "Chat",
+    threadNewLabel: "New",
+    threadContinueLabel: "Continue",
+    threadContinueUntitledLabel: "previous",
+    threadPickLabel: "Choose thread",
+    threadSearchPlaceholder: "Search threads",
+    threadSearchEmptyLabel: "No matching threads",
+    threadStateWorkingLabel: "open",
+    threadStateSettledLabel: "settled",
+    threadSearchTruncatedLabel: "Showing {shown} of {total}",
+};
+/** Preferred send action (soft-default New vs Continue, or solo Send). */
+const SEND_PREFERRED_SHORTCUT_LABEL = "Ctrl/⌘+Enter";
+/** Ask-mode dedicated New (always creates a thread). */
+const SEND_NEW_SHORTCUT_LABEL = "Ctrl/⌘+Shift+Enter";
+/** Ask-mode dedicated Continue (always posts to the prior thread). */
+const SEND_CONTINUE_SHORTCUT_LABEL = "Alt+Enter";
+function css(rootId, fab) {
+    const size = cssLength(fab.size);
+    const position = fabPositionCss(fab.position);
+    const mobileOnly = fab.visibility === "mobile"
+        ? `
+@media (min-width: ${fab.mobileMaxWidth + 1}px) {
+  #${rootId}:not(.t3f-has-activity) .t3f-fab { display: none; }
+}
+`
+        : "";
+    return `
+#${rootId} {
+  all: initial;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+}
+#${rootId} * { box-sizing: border-box; }
+#${rootId} .t3f-fab {
+  position: fixed; ${position} z-index: 2147483000;
+  width: ${size}; height: ${size}; border-radius: 999px; border: 1px solid #334155;
+  background: #0f172a; color: #f8fafc; cursor: pointer;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
+  font-size: calc(${size} * 0.4); line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+#${rootId} .t3f-fab:hover { background: #1e293b; }
+#${rootId} .t3f-fab[hidden] { display: none !important; }
+#${rootId} .t3f-fab-badge {
+  position: absolute; top: -4px; right: -4px;
+  min-width: 18px; height: 18px; padding: 0 5px;
+  border-radius: 999px; background: #0284c7; color: #f8fafc;
+  font-size: 11px; font-weight: 700; line-height: 18px;
+  border: 2px solid #0b1220;
+  display: none; align-items: center; justify-content: center;
+}
+#${rootId}.t3f-has-activity .t3f-fab-badge { display: inline-flex; }
+#${rootId}.t3f-has-activity .t3f-fab {
+  display: inline-flex !important;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35), 0 0 0 2px rgba(56, 189, 248, 0.35);
+}
+#${rootId} .t3f-toast {
+  position: fixed; ${position} z-index: 2147483003;
+  margin-bottom: calc(${size} + 12px);
+  max-width: min(320px, calc(100vw - 24px));
+  background: #0b1220; color: #e2e8f0;
+  border: 1px solid #334155; border-radius: 12px;
+  padding: 10px 12px; box-shadow: 0 16px 40px rgba(2, 6, 23, 0.45);
+  display: grid; gap: 8px;
+  font-size: 13px; line-height: 1.35;
+}
+#${rootId} .t3f-toast[hidden] { display: none !important; }
+#${rootId} .t3f-toast-title { font-weight: 650; color: #f8fafc; }
+#${rootId} .t3f-toast-meta {
+  font-size: 12px; color: #94a3b8;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+#${rootId} .t3f-toast-actions {
+  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+}
+#${rootId} .t3f-toast a.t3f-open,
+#${rootId} .t3f-activity a.t3f-open {
+  color: #38bdf8; text-decoration: underline; font-size: 12px; font-weight: 600;
+  display: inline-flex; align-items: center; gap: 4px;
+}
+#${rootId} .t3f-toast a.t3f-open svg,
+#${rootId} .t3f-activity a.t3f-open svg {
+  width: 12px; height: 12px; flex: 0 0 auto; display: block;
+}
+#${rootId} .t3f-toast a.t3f-open:hover,
+#${rootId} .t3f-activity a.t3f-open:hover { color: #7dd3fc; }
+#${rootId} .t3f-activity {
+  position: fixed; ${position} z-index: 2147483002;
+  margin-bottom: calc(${size} + 12px);
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(50dvh, 360px);
+  overflow: auto;
+  background: #0b1220; color: #e2e8f0;
+  border: 1px solid #334155; border-radius: 14px;
+  padding: 12px; box-shadow: 0 20px 48px rgba(2, 6, 23, 0.5);
+  display: grid; gap: 10px;
+}
+#${rootId} .t3f-activity[hidden] { display: none !important; }
+#${rootId} .t3f-activity-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+}
+#${rootId} .t3f-activity-title {
+  font-size: 13px; font-weight: 650; color: #f8fafc;
+}
+#${rootId} .t3f-activity-list { display: grid; gap: 8px; }
+#${rootId} .t3f-activity-empty {
+  font-size: 12px; color: #64748b; padding: 4px 0;
+}
+#${rootId} .t3f-activity-row {
+  display: grid; gap: 6px;
+  padding: 8px; border-radius: 10px;
+  background: #020617; border: 1px solid #1e293b;
+}
+#${rootId} .t3f-activity-row-title {
+  display: flex; align-items: center; gap: 6px; min-width: 0;
+  font-size: 12px; color: #e2e8f0; font-weight: 600;
+}
+#${rootId} .t3f-activity-row-title-icon {
+  flex: 0 0 auto; width: 14px; height: 14px; color: #94a3b8;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+#${rootId} .t3f-activity-row-title-icon svg {
+  width: 14px; height: 14px; display: block;
+}
+#${rootId} .t3f-activity-row-title-text {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+#${rootId} .t3f-activity-row-actions {
+  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
+}
+#${rootId} .t3f-activity-row-actions button.t3f-btn,
+#${rootId} .t3f-activity-head button.t3f-btn,
+#${rootId} .t3f-toast-actions button.t3f-btn {
+  padding: 5px 8px; font-size: 12px; border-radius: 8px; gap: 5px;
+}
+#${rootId} .t3f-activity-row-actions button.t3f-btn svg,
+#${rootId} .t3f-activity-head button.t3f-btn svg,
+#${rootId} .t3f-toast-actions button.t3f-btn svg {
+  width: 12px; height: 12px; flex: 0 0 auto; display: block;
+}
+${mobileOnly}#${rootId} .t3f-backdrop {
+  position: fixed; inset: 0; z-index: 2147483001;
+  background: rgba(2, 6, 23, 0.55);
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px;
+}
+#${rootId} .t3f-panel {
+  position: relative;
+  z-index: 1;
+  width: min(520px, 100%);
+  max-width: 100%;
+  min-width: 0;
+  max-height: min(90dvh, 100%);
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #0b1220; color: #e2e8f0;
+  border: 1px solid #334155; border-radius: 16px;
+  padding: 18px; display: grid; gap: 14px;
+  box-shadow: 0 24px 56px rgba(0,0,0,0.5);
+}
+/* Grid/flex min-content otherwise lets long selectors / screenshots blow the panel out. */
+#${rootId} .t3f-panel > * { min-width: 0; max-width: 100%; }
+#${rootId} .t3f-header {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+}
+#${rootId} .t3f-header-text { flex: 1 1 auto; min-width: 0; }
+#${rootId} .t3f-title { font-size: 15px; font-weight: 650; color: #f8fafc; line-height: 1.3; }
+#${rootId} .t3f-report-type {
+  display: grid; gap: 6px; min-width: 0;
+}
+#${rootId} .t3f-report-type-seg {
+  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px; padding: 3px;
+  border-radius: 10px; background: #020617; border: 1px solid #1e293b;
+}
+#${rootId} .t3f-report-type-seg button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  border: none; border-radius: 8px; background: transparent;
+  color: #94a3b8; padding: 7px 8px; cursor: pointer;
+  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2;
+  min-width: 0;
+}
+#${rootId} .t3f-report-type-seg button svg {
+  width: 14px; height: 14px; flex: 0 0 auto; display: block;
+}
+#${rootId} .t3f-report-type-emoji {
+  flex: 0 0 auto; font-size: 14px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+#${rootId} .t3f-report-type-seg button span {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+#${rootId} .t3f-report-type-seg button:hover { color: #e2e8f0; background: #1e293b; }
+#${rootId} .t3f-report-type-seg button[aria-pressed="true"] {
+  background: #1e293b; color: #f8fafc;
+}
+#${rootId} .t3f-report-type-seg button:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
+#${rootId} .t3f-report-type-hint {
+  font-size: 11px; color: #64748b; line-height: 1.4;
+}
+#${rootId} .t3f-custom-plugins {
+  display: grid; gap: 6px; min-width: 0;
+}
+#${rootId} .t3f-custom-plugins[hidden] { display: none !important; }
+#${rootId} .t3f-custom-plugin {
+  display: grid; gap: 2px; min-width: 0;
+  padding: 8px 10px; border-radius: 8px;
+  background: #0f172a; border: 1px solid #1e293b;
+}
+#${rootId} .t3f-custom-plugin-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase; color: #64748b;
+}
+#${rootId} .t3f-custom-plugin-value {
+  font-size: 12px; color: #e2e8f0; line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+#${rootId} button.t3f-icon-btn {
+  flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; margin: 0; padding: 0;
+  border: none; border-radius: 8px; background: transparent;
+  color: #94a3b8; cursor: pointer; font: inherit; line-height: 1;
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+#${rootId} button.t3f-icon-btn:hover:not(:disabled) { background: #1e293b; color: #f8fafc; }
+#${rootId} button.t3f-icon-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
+#${rootId} button.t3f-icon-btn:disabled {
+  opacity: 0.4; cursor: not-allowed; color: #64748b;
+}
+#${rootId} button.t3f-icon-btn:disabled:hover {
+  background: transparent; color: #64748b;
+}
+#${rootId} button.t3f-icon-btn svg { width: 16px; height: 16px; display: block; }
+#${rootId} .t3f-header > button.t3f-icon-btn { margin: -2px -2px 0 0; }
+#${rootId} .t3f-section {
+  display: grid; gap: 8px; min-width: 0; max-width: 100%;
+}
+#${rootId} .t3f-section-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  min-width: 0;
+}
+#${rootId} .t3f-section-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase; color: #64748b;
+}
+#${rootId} .t3f-section-tools {
+  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
+}
+#${rootId} .t3f-target {
+  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
+  min-width: 0; max-width: 100%;
+  font-size: 12px; color: #cbd5e1;
+}
+#${rootId} .t3f-target-chip {
+  flex: 1 1 0;
+  min-width: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
+  scrollbar-width: none; -ms-overflow-style: none;
+}
+#${rootId} .t3f-target-chip::-webkit-scrollbar { display: none; width: 0; height: 0; }
+#${rootId} .t3f-target-path,
+#${rootId} .t3f-target-hierarchy,
+#${rootId} .t3f-target-comp,
+#${rootId} .t3f-target-label,
+#${rootId} .t3f-target-file { display: inline; }
+#${rootId} .t3f-target-comp-sep { color: #64748b; user-select: none; }
+#${rootId} .t3f-target-role-primary .t3f-target-label,
+#${rootId} .t3f-target-role-primary.t3f-target-label {
+  color: #e2e8f0; font-weight: 600;
+}
+#${rootId} .t3f-target-role-leaf .t3f-target-label,
+#${rootId} .t3f-target-role-secondary .t3f-target-label,
+#${rootId} .t3f-target-role-owner .t3f-target-label {
+  color: #94a3b8;
+}
+#${rootId} .t3f-target-seg {
+  display: inline; margin: 0; padding: 1px 3px; border: none; border-radius: 4px;
+  background: transparent; color: inherit; font: inherit; line-height: 1.35;
+  cursor: default; vertical-align: baseline;
+}
+#${rootId} .t3f-target-seg:hover,
+#${rootId} .t3f-target-label:hover,
+#${rootId} .t3f-target-file:hover {
+  background: rgba(56, 189, 248, 0.16); color: #7dd3fc;
+}
+#${rootId} .t3f-target-seg:focus-visible,
+#${rootId} .t3f-target-label:focus-visible,
+#${rootId} .t3f-target-file:focus-visible {
+  outline: 2px solid #38bdf8; outline-offset: 1px;
+}
+#${rootId} .t3f-target-label {
+  margin: 0; padding: 1px 3px; border: none; border-radius: 4px;
+  background: transparent; color: inherit; font: inherit; line-height: 1.35;
+  cursor: default; vertical-align: baseline;
+}
+#${rootId} .t3f-target-file {
+  margin: 0; padding: 1px 3px; border: none; border-radius: 4px;
+  background: transparent; color: #7dd3fc; font: inherit; line-height: 1.35;
+  cursor: pointer; vertical-align: baseline;
+  text-decoration: underline;
+  text-decoration-color: rgba(125, 211, 252, 0.45);
+  text-underline-offset: 2px;
+}
+#${rootId} a.t3f-target-file {
+  color: #7dd3fc;
+}
+#${rootId} .t3f-target-sep { color: #64748b; margin: 0 1px; user-select: none; }
+#${rootId} .t3f-dom-highlight {
+  position: fixed; pointer-events: none; display: none;
+  border: 2px solid #38bdf8; background: rgba(56, 189, 248, 0.15);
+  border-radius: 2px; box-sizing: border-box; z-index: 0;
+}
+#${rootId} textarea {
+  width: 100%; min-height: 120px; resize: vertical;
+  border-radius: 12px; border: 1px solid #334155; background: #020617;
+  color: #f1f5f9; padding: 12px; font: inherit; line-height: 1.45;
+}
+#${rootId} textarea:focus {
+  outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 0;
+  border-color: #38bdf8;
+}
+/* Standalone clipboard offer (empty gallery only): preview thumb + Insert / dismiss. */
+#${rootId} .t3f-clipboard-offer {
+  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
+  min-width: 0;
+}
+#${rootId} .t3f-clipboard-preview-btn {
+  flex: 0 0 auto;
+  padding: 0; margin: 0; border: none; background: transparent;
+  cursor: pointer; border-radius: 8px;
+  line-height: 0;
+}
+#${rootId} .t3f-clipboard-preview-btn:focus-visible {
+  outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 2px;
+}
+#${rootId} .t3f-clipboard-preview {
+  width: 96px; height: auto; aspect-ratio: 4 / 3;
+  object-fit: contain; object-position: center;
+  border-radius: 8px; background: #020617;
+  display: block;
+  pointer-events: none;
+}
+#${rootId} .t3f-clipboard-offer-actions {
+  display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
+  flex: 1 1 auto; min-width: 0; justify-content: flex-end;
+}
+#${rootId} .t3f-clipboard-offer-actions .t3f-btn-tool {
+  min-width: 0; max-width: 100%;
+}
+#${rootId} .t3f-clipboard-offer-actions .t3f-btn-tool span {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: block; min-width: 0;
+}
+#${rootId} .t3f-preview-wrap {
+  display: grid; gap: 8px; min-width: 0;
+}
+#${rootId} .t3f-gallery {
+  display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0;
+}
+#${rootId} .t3f-thumb {
+  position: relative; flex: 1 1 0; min-width: 0; max-width: 96px;
+  aspect-ratio: 4 / 3; height: auto;
+  border-radius: 8px; border: 1px solid #334155; background: #020617; overflow: hidden;
+}
+#${rootId} .t3f-thumb.t3f-thumb-croppable { cursor: pointer; }
+#${rootId} .t3f-thumb.t3f-thumb-croppable:hover,
+#${rootId} .t3f-thumb.t3f-thumb-croppable:focus-within {
+  border-color: #38bdf8;
+}
+/* In-gallery clipboard suggestion: dashed thumb, same row as attached shots. */
+#${rootId} button.t3f-thumb.t3f-thumb-clipboard {
+  display: block; padding: 0; margin: 0;
+  font: inherit; color: inherit;
+  border-style: dashed; border-color: #64748b;
+  cursor: pointer;
+}
+#${rootId} button.t3f-thumb.t3f-thumb-clipboard:hover,
+#${rootId} button.t3f-thumb.t3f-thumb-clipboard:focus-visible {
+  border-color: #38bdf8;
+  outline: none;
+}
+#${rootId} button.t3f-thumb.t3f-thumb-clipboard:focus-visible {
+  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45);
+}
+#${rootId} button.t3f-thumb.t3f-thumb-clipboard img {
+  opacity: 0.72;
+}
+#${rootId} .t3f-thumb img {
+  width: 100%; height: 100%; object-fit: contain; display: block;
+}
+#${rootId} .t3f-thumb-tools {
+  position: absolute; top: 2px; right: 2px; display: flex; gap: 2px;
+  opacity: 0; pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+#${rootId} .t3f-thumb:hover .t3f-thumb-tools,
+#${rootId} .t3f-thumb:focus-within .t3f-thumb-tools {
+  opacity: 1; pointer-events: auto;
+}
+@media (hover: none) {
+  #${rootId} .t3f-thumb-tools {
+    opacity: 1; pointer-events: auto;
+  }
+}
+#${rootId} .t3f-thumb-tools button {
+  width: 22px; height: 22px; border: 1px solid #475569; border-radius: 6px; padding: 0;
+  background: rgba(15, 23, 42, 0.92); color: #e2e8f0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+#${rootId} .t3f-thumb-tools button:hover {
+  background: #334155; border-color: #38bdf8; color: #f8fafc;
+}
+#${rootId} .t3f-thumb-tools button.t3f-thumb-remove:hover {
+  background: #450a0a; border-color: #f87171; color: #fecaca;
+}
+#${rootId} .t3f-thumb-tools button:focus-visible {
+  outline: 2px solid #38bdf8; outline-offset: 1px;
+}
+#${rootId} .t3f-thumb-tools button svg {
+  width: 12px; height: 12px; display: block;
+}
+#${rootId} .t3f-preview-frame {
+  min-width: 0; max-width: 100%;
+  border-radius: 10px; background: #020617;
+  overflow: hidden;
+}
+#${rootId} .t3f-preview {
+  display: block; width: 100%; max-width: 100%; height: auto; max-height: 160px;
+  object-fit: contain;
+  background: #020617;
+}
+#${rootId} .t3f-record-overlay,
+#${rootId} .t3f-burst-overlay {
+  position: fixed; inset: 0; z-index: 2147483010;
+  background: rgba(2, 6, 23, 0.72);
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+#${rootId} .t3f-record-card,
+#${rootId} .t3f-burst-card {
+  width: min(560px, 100%);
+  background: #0b1220; color: #e2e8f0;
+  border: 1px solid #334155; border-radius: 14px; padding: 16px;
+  display: grid; gap: 12px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
+}
+#${rootId} .t3f-burst-hint,
+#${rootId} .t3f-burst-meta { font-size: 12px; color: #94a3b8; }
+#${rootId} .t3f-burst-strip {
+  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px; max-height: 42vh; overflow: auto; min-width: 0;
+}
+#${rootId} .t3f-burst-item {
+  width: auto; min-width: 0; border-radius: 8px; border: 2px solid #334155; padding: 0;
+  background: #020617; cursor: pointer; overflow: hidden;
+}
+#${rootId} .t3f-burst-item[aria-pressed="true"] { border-color: #38bdf8; }
+#${rootId} .t3f-burst-item img {
+  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; display: block;
+}
+#${rootId} .t3f-burst-actions {
+  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
+}
+#${rootId} .t3f-pick-details {
+  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
+  font-size: 12px; color: #94a3b8;
+}
+#${rootId} .t3f-pick-details label {
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #cbd5e1;
+  user-select: none;
+}
+#${rootId} .t3f-styles-seg {
+  display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2px; padding: 2px;
+  border-radius: 8px; background: #020617; border: 1px solid #1e293b;
+}
+#${rootId} .t3f-styles-seg button {
+  border: none; border-radius: 6px; background: transparent;
+  color: #94a3b8; padding: 4px 8px; cursor: pointer;
+  font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2;
+  white-space: nowrap;
+}
+#${rootId} .t3f-styles-seg button:hover { color: #e2e8f0; background: #1e293b; }
+#${rootId} .t3f-styles-seg button[aria-pressed="true"] {
+  background: #1e293b; color: #f8fafc;
+}
+#${rootId} .t3f-styles-seg button:focus-visible { outline: 2px solid #38bdf8; outline-offset: 1px; }
+#${rootId} .t3f-attachments { display: grid; gap: 12px; min-width: 0; }
+#${rootId} .t3f-attachments > [data-slot="attachments"],
+#${rootId} .t3f-attachments > [data-slot="attachments"] > [data-ui-id] {
+  display: contents;
+}
+#${rootId} .t3f-attachments > [data-slot="attachments"] > [data-ui-id][hidden] {
+  display: none !important;
+}
+#${rootId} .t3f-actions-tools > [data-ui-id] { display: contents; }
+#${rootId} .t3f-actions-tools > [data-ui-id][hidden] { display: none !important; }
+#${rootId} [data-slot="beforeComment"]:empty { display: none; }
+#${rootId} .t3f-status {
+  font-size: 12px; color: #94a3b8; min-height: 0; line-height: 1.4;
+}
+#${rootId} .t3f-status:empty { display: none; }
+#${rootId} .t3f-status.ok { color: #4ade80; }
+#${rootId} .t3f-status.err { color: #f87171; }
+#${rootId} .t3f-status a.t3f-open {
+  color: #38bdf8; margin-left: 0.4em; text-decoration: underline;
+}
+#${rootId} .t3f-status a.t3f-open:hover { color: #7dd3fc; }
+#${rootId} .t3f-actions {
+  display: flex; gap: 10px; justify-content: space-between; align-items: center;
+  flex-wrap: nowrap;
+  margin-top: 2px; padding-top: 14px; border-top: 1px solid #1e293b;
+}
+#${rootId} .t3f-actions-tools {
+  display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: nowrap; align-items: center;
+}
+#${rootId} .t3f-actions-tools:empty { display: none; }
+#${rootId} .t3f-actions-tools .t3f-icon-btn {
+  width: 32px; height: 32px;
+  border: 1px solid #334155; border-radius: 10px;
+  background: #1e293b; color: #f8fafc;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+#${rootId} .t3f-actions-tools .t3f-icon-btn:hover:not(:disabled) {
+  background: #334155; border-color: #38bdf8; color: #f8fafc;
+}
+#${rootId} .t3f-actions-tools .t3f-icon-btn:disabled {
+  opacity: 0.4; cursor: not-allowed; color: #64748b; border-color: #1e293b;
+}
+#${rootId} .t3f-actions-tools .t3f-icon-btn:disabled:hover {
+  background: #1e293b; color: #64748b; border-color: #1e293b;
+}
+#${rootId} .t3f-actions-send {
+  display: flex; gap: 8px; margin-left: auto; align-items: center;
+  flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0;
+}
+#${rootId} .t3f-actions-send .t3f-continue-group {
+  position: relative; display: inline-flex; align-items: stretch; gap: 0;
+  max-width: min(260px, 55vw); min-width: 0;
+}
+#${rootId} .t3f-actions-send .t3f-continue-group[hidden] { display: none !important; }
+#${rootId} .t3f-actions-send .t3f-send-continue {
+  max-width: none; flex: 1 1 auto; min-width: 0; gap: 6px;
+  border-top-right-radius: 0; border-bottom-right-radius: 0;
+}
+#${rootId} .t3f-actions-send .t3f-continue-group:not(:has([data-act="thread-pick"]:not([hidden]))) .t3f-send-continue {
+  border-radius: 10px;
+}
+#${rootId} .t3f-actions-send .t3f-send-continue svg {
+  width: 14px; height: 14px; flex: 0 0 auto; display: block;
+}
+#${rootId} .t3f-actions-send .t3f-send-continue-type {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  color: #e2e8f0;
+}
+#${rootId} .t3f-actions-send .t3f-send-continue-type[hidden] { display: none !important; }
+#${rootId} .t3f-actions-send .t3f-send-continue-type svg {
+  width: 14px; height: 14px; display: block;
+}
+#${rootId} .t3f-actions-send .t3f-send-continue span[data-thread-continue-label] {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: block; min-width: 0;
+}
+#${rootId} .t3f-actions-send .t3f-thread-pick {
+  flex: 0 0 auto; width: 30px; min-width: 30px; padding: 8px 0;
+  border-top-left-radius: 0; border-bottom-left-radius: 0;
+  border-left-color: #475569;
+}
+#${rootId} .t3f-actions-send .t3f-thread-pick.primary {
+  border-left-color: rgba(255, 255, 255, 0.28);
+}
+#${rootId} .t3f-actions-send .t3f-thread-pick[hidden] { display: none !important; }
+#${rootId} .t3f-actions-send .t3f-thread-pick svg {
+  width: 14px; height: 14px; display: block;
+}
+#${rootId} .t3f-thread-picker {
+  /* Fixed so panel overflow cannot clip the menu (short viewports / tall lists). */
+  position: fixed; z-index: 2147483005; width: min(360px, 86vw);
+  display: grid; gap: 8px; padding: 10px;
+  border-radius: 12px; border: 1px solid #334155;
+  background: #0f172a; box-shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
+}
+#${rootId} .t3f-thread-picker[hidden] { display: none !important; }
+#${rootId} .t3f-thread-picker input[data-thread-search] {
+  width: 100%; margin: 0; padding: 8px 10px;
+  border-radius: 8px; border: 1px solid #334155; background: #020617;
+  color: #f8fafc; font: inherit; font-size: 13px;
+}
+#${rootId} .t3f-thread-picker input[data-thread-search]:focus {
+  outline: 2px solid #38bdf8; outline-offset: 0; border-color: #38bdf8;
+}
+#${rootId} .t3f-thread-picker-list {
+  display: grid; gap: 2px; overflow: auto;
+  /* Fallback before layoutThreadPicker runs; inline max-height wins when open. */
+  max-height: min(320px, 42vh);
+}
+#${rootId} .t3f-thread-picker-option {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  margin: 0; padding: 7px 8px; border: none; border-radius: 8px;
+  background: transparent; color: #e2e8f0; font: inherit; font-size: 12.5px;
+  text-align: left; cursor: pointer; min-width: 0;
+}
+#${rootId} .t3f-thread-picker-option:hover,
+#${rootId} .t3f-thread-picker-option[aria-selected="true"],
+#${rootId} .t3f-thread-picker-option.is-active {
+  background: #1e293b;
+}
+#${rootId} .t3f-thread-picker-option.is-active {
+  outline: 1px solid rgba(56, 189, 248, 0.45);
+  outline-offset: -1px;
+}
+#${rootId} .t3f-thread-picker-option:focus-visible {
+  outline: 2px solid #38bdf8; outline-offset: -1px;
+}
+#${rootId} .t3f-thread-picker-option-type {
+  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; color: #94a3b8;
+}
+#${rootId} .t3f-thread-picker-option-type svg {
+  width: 14px; height: 14px; display: block;
+}
+#${rootId} .t3f-thread-picker-option-type .t3f-report-type-emoji {
+  font-size: 13px; line-height: 1;
+}
+#${rootId} .t3f-thread-picker-option-title {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: #e2e8f0;
+}
+#${rootId} .t3f-thread-picker-option-state {
+  flex: 0 0 auto; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
+  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
+  line-height: 1.2;
+}
+#${rootId} .t3f-thread-picker-option-state.is-working {
+  color: #7dd3fc; background: rgba(14, 165, 233, 0.16);
+}
+#${rootId} .t3f-thread-picker-option-state.is-settled {
+  color: #94a3b8; background: rgba(148, 163, 184, 0.12);
+}
+#${rootId} .t3f-thread-picker-empty {
+  font-size: 12px; color: #94a3b8; padding: 6px 4px;
+}
+#${rootId} .t3f-thread-picker-empty[hidden] { display: none !important; }
+#${rootId} .t3f-thread-picker-meta {
+  font-size: 11px; color: #64748b; padding: 0 2px;
+}
+#${rootId} .t3f-thread-picker-meta[hidden] { display: none !important; }
+#${rootId} button.t3f-btn {
+  border-radius: 10px; border: 1px solid #334155; background: #1e293b;
+  color: #f8fafc; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-width: 0;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+#${rootId} button.t3f-btn:hover:not(:disabled) {
+  background: #334155; border-color: #38bdf8;
+}
+#${rootId} button.t3f-btn:focus-visible {
+  outline: 2px solid #38bdf8; outline-offset: 1px;
+}
+#${rootId} button.t3f-btn.primary { background: #0284c7; border-color: #0284c7; }
+#${rootId} button.t3f-btn.primary:hover:not(:disabled) {
+  background: #0369a1; border-color: #7dd3fc;
+}
+#${rootId} button.t3f-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+#${rootId} button.t3f-btn-tool {
+  display: inline-flex; align-items: center; gap: 8px;
+}
+#${rootId} button.t3f-btn-tool svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
+#${rootId} .t3f-crop {
+  position: fixed; inset: 0; z-index: 2147483002;
+  background: rgba(2, 6, 23, 0.92);
+  display: grid; grid-template-rows: 1fr auto; gap: 0; padding: 12px 12px 0;
+}
+#${rootId} .t3f-crop-stage {
+  position: relative; min-height: 0; width: 100%; height: 100%;
+  cursor: crosshair; user-select: none; touch-action: none;
+  background: transparent; border-radius: 0; border: none; overflow: hidden;
+}
+#${rootId} .t3f-crop-img {
+  position: absolute; inset: 0; width: 100%; height: 100%;
+  object-fit: contain; pointer-events: none;
+}
+#${rootId} .t3f-crop-marquee {
+  position: absolute; border: 2px solid #38bdf8;
+  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.55);
+  pointer-events: none;
+}
+#${rootId} .t3f-crop-bar {
+  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
+  margin-top: 4px; padding: 14px 4px 14px;
+  border-top: 1px solid #1e293b;
+}
+#${rootId} .t3f-crop-hint {
+  font-size: 12px; color: #94a3b8; line-height: 1.4;
+  flex: 1 1 200px; min-width: 0;
+}
+#${rootId} .t3f-crop-actions {
+  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
+  margin-left: auto;
+}
+#${rootId} .t3f-crop-actions .t3f-icon-btn {
+  background: rgba(15, 23, 42, 0.55);
+}
+#${rootId} .t3f-crop-actions .t3f-icon-btn:hover { background: #1e293b; color: #f8fafc; }
+#${rootId} .t3f-crop-actions .t3f-crop-discard:hover { color: #fca5a5; }
+`;
+}
+function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+const CLOSE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>`;
+const BUG_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>`;
+const MESSAGE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+const LIGHTBULB_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`;
+const PLAY_ICON_SVG = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.14v13.72a1 1 0 0 0 1.5.86l11-6.86a1 1 0 0 0 0-1.72l-11-6.86A1 1 0 0 0 8 5.14z"/></svg>`;
+const CHEVRON_DOWN_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>`;
+const PLUS_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`;
+const EXTERNAL_LINK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>`;
+const CHECK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+const TRASH_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`;
+/** Icon + text label for activity / toast controls (SVG is trusted constant markup). */
+function setIconLabel(el, iconSvg, label) {
+    el.replaceChildren();
+    el.insertAdjacentHTML("afterbegin", iconSvg);
+    const span = document.createElement("span");
+    span.textContent = label;
+    el.append(span);
+}
+/** Open-in-T3 anchor: pair-then-thread on plain click; bare href for modified clicks. */
+function wireOpenInT3Link(link, options) {
+    link.className = "t3f-open";
+    link.href = options.openUrl;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.dataset.threadId = options.threadId;
+    setIconLabel(link, EXTERNAL_LINK_ICON_SVG, options.label);
+    link.addEventListener("click", (event) => {
+        if (shouldBypassSeamlessOpen(event))
+            return;
+        event.preventDefault();
+        void openInT3Seamless({
+            threadId: options.threadId,
+            fallbackUrl: options.openUrl,
+            endpoint: options.endpoint,
+        });
+    });
+}
+function reportTypeEmojiFor(type, copy) {
+    if (type === "feedback")
+        return copy.reportTypeFeedbackEmoji;
+    if (type === "suggestion")
+        return copy.reportTypeSuggestionEmoji;
+    return copy.reportTypeBugEmoji;
+}
+function reportTypeIconSvg(type) {
+    if (type === "feedback")
+        return MESSAGE_ICON_SVG;
+    if (type === "suggestion")
+        return LIGHTBULB_ICON_SVG;
+    return BUG_ICON_SVG;
+}
+/** SVG icon or emoji span for a report type (aria-hidden). */
+function reportTypeGlyphHtml(type, glyph, copy) {
+    if (glyph !== "icon") {
+        const emoji = typeof glyph === "object" ? glyph[type] : reportTypeEmojiFor(type, copy);
+        return `<span class="t3f-report-type-emoji" aria-hidden="true">${escapeHtml(emoji)}</span>`;
+    }
+    return reportTypeIconSvg(type);
+}
+function closeButtonHtml(opts) {
+    const cls = opts.className ? `t3f-icon-btn ${opts.className}` : "t3f-icon-btn";
+    const title = opts.titleAttr ?? opts.label;
+    return `<button type="button" class="${cls}" data-act="${escapeHtml(opts.act)}" aria-label="${escapeHtml(opts.label)}" title="${escapeHtml(title)}">${CLOSE_ICON_SVG}</button>`;
+}
+export { buildOpenInEditorUrl, buildTargetChipHtml, componentHierarchy, formatComponentLocation, formatElementChip, formatSelectorBreadcrumb, openSourceInEditor, selectorAtAncestorDepth, splitCssSelectorParts, } from "./ui/elementTargetChip.js";
+/**
+ * Track Vite HMR generation for the version plugin.
+ * Starts at 0 when hot is available; null otherwise (production / no HMR).
+ */
+function createHmrGenerationTracker() {
+    const hot = import.meta.hot;
+    if (!hot || typeof hot.on !== "function") {
+        return { getHmr: () => null, dispose: () => undefined };
+    }
+    let count = 0;
+    const onAfterUpdate = () => {
+        count += 1;
+    };
+    hot.on("vite:afterUpdate", onAfterUpdate);
+    return {
+        getHmr: () => count,
+        dispose: () => {
+            if (typeof hot.off === "function") {
+                hot.off("vite:afterUpdate", onAfterUpdate);
+            }
+        },
+    };
+}
+/** Mount the floating feedback control and keyboard shortcut; returns a handle. */
+export function mountT3Feedback(options = {}) {
+    if (typeof document === "undefined")
+        return noopHandle();
+    const rootId = options.rootId ?? "t3-feedback-root";
+    const shortcut = resolveShortcut(options.shortcut, options.shortcutKey);
+    const pickConfig = resolvePickConfig(options.pick);
+    const screenshotConfig = resolveScreenshotConfig(options.screenshot, pickConfig.cropPaddingPx);
+    const recordConfig = resolveRecordConfig(options.record);
+    const endpoint = options.endpoint ?? "/__t3-feedback";
+    const activePluginSet = resolveActivePlugins(options.activePlugins, options.includeConsoleLogs);
+    const pageContextActive = activePluginSet.has("pageContext");
+    const consoleLogsActive = activePluginSet.has("consoleLogs");
+    const screenshotActive = activePluginSet.has("screenshot");
+    const elementTargetActive = activePluginSet.has("elementTarget");
+    const consoleLogsMaxEntries = (() => {
+        const raw = options.pluginOptions?.consoleLogs?.maxEntries;
+        if (raw === undefined || !Number.isFinite(raw))
+            return 200;
+        return Math.max(1, Math.floor(raw));
+    })();
+    const appVersion = options.version?.trim() || undefined;
+    const threadReuse = options.threadReuse ?? "ask";
+    const reportTypeGlyph = resolveReportTypeGlyph(options.reportTypeGlyph);
+    const fabConfig = resolveFabConfig(options.fab);
+    const openChord = formatShortcutLabel(shortcut);
+    const pickChord = elementTargetActive && pickConfig.shortcut !== null
+        ? formatShortcutLabel(pickConfig.shortcut)
+        : null;
+    const captureChord = screenshotActive && screenshotConfig.shortcut !== null
+        ? formatShortcutLabel(screenshotConfig.shortcut)
+        : null;
+    const recordChord = screenshotActive && recordConfig.shortcut !== null
+        ? formatShortcutLabel(recordConfig.shortcut)
+        : null;
+    const copy = {
+        ...DEFAULT_COPY,
+        ...options.copy,
+        fabTitle: options.copy?.fabTitle ??
+            [
+                `Send feedback to T3 (${openChord}`,
+                pickChord ? `; pick ${pickChord}` : "",
+                captureChord ? `; capture ${captureChord}` : "",
+                recordChord ? `; record ${recordChord}` : "",
+                ")",
+            ].join(""),
+    };
+    const captureTitle = captureChord ? `${copy.captureLabel} (${captureChord})` : copy.captureLabel;
+    const recordTitle = recordChord ? `${copy.recordLabel} (${recordChord})` : copy.recordLabel;
+    /** Set just before send in `"ask"` mode when Continue is selected. */
+    const askThreadIdRef = { current: undefined };
+    const transport = options.transport ??
+        createT3FeedbackHttpTransport({
+            url: endpoint,
+            ...(threadReuse === "never"
+                ? {}
+                : {
+                    getThreadId: () => {
+                        if (threadReuse === "session-route") {
+                            return readSessionThreadRecord(window.location.pathname)?.threadId;
+                        }
+                        return askThreadIdRef.current;
+                    },
+                }),
+        });
+    const userPlugins = options.plugins ?? [];
+    const selectedReportTypeRef = {
+        current: readReportType(),
+    };
+    const reportTypeListeners = new Set();
+    const busy = createBusyRegistry();
+    const afterPick = createAfterPickRegistry();
+    const actions = createActionRegistry();
+    const draftClears = createDraftClearRegistry();
+    const draftExtras = createDraftExtrasStore();
+    {
+        const initialDraft = readFeedbackDraft();
+        if (initialDraft) {
+            draftExtras.replace(migrateDraftExtras(initialDraft));
+        }
+    }
+    const root = document.createElement("div");
+    root.id = rootId;
+    const hostMedia = createHostMedia(root, {
+        captureScreenshot,
+        captureFrameBurst,
+    });
+    /** Filled after openPanel exists — plugins call through this ref. */
+    const hostRef = { current: null };
+    const getHost = () => {
+        if (!hostRef.current) {
+            throw new Error("t3-feedback host not ready");
+        }
+        return hostRef.current;
+    };
+    const resolveSource = createSourceResolver({
+        framework: pickConfig.sourceFramework,
+        sourceEndpoint: endpoint,
+        ...(options.pick && "resolveSource" in options.pick && options.pick.resolveSource
+            ? { resolveSource: options.pick.resolveSource }
+            : {}),
+    });
+    const commentPanel = createCommentPanelPlugin({ copy });
+    const reportTypeHintCaps = {
+        pageContext: pageContextActive,
+        consoleLogs: consoleLogsActive,
+        attachments: screenshotActive,
+    };
+    const reportTypeHintFor = (type) => {
+        if (type === "feedback" && copy.reportTypeFeedbackHint) {
+            return copy.reportTypeFeedbackHint;
+        }
+        if (type === "suggestion" && copy.reportTypeSuggestionHint) {
+            return copy.reportTypeSuggestionHint;
+        }
+        if (type === "bug" && copy.reportTypeBugHint)
+            return copy.reportTypeBugHint;
+        return buildReportTypeHint(type, reportTypeHintCaps);
+    };
+    const reportTypePanel = createReportTypePanelPlugin({
+        copy,
+        glyph: reportTypeGlyph,
+        iconSvg: reportTypeIconSvg,
+        hintFor: reportTypeHintFor,
+        getReportType: () => selectedReportTypeRef.current,
+    });
+    const elementPanel = elementTargetActive
+        ? createElementTargetPanelPlugin({
+            copy,
+            pickConfig,
+            pickShortcut: pickConfig.shortcut,
+            pickChord,
+            root,
+            afterPickMode: screenshotActive ? pickConfig.afterPick : "none",
+            ...(resolveSource ? { resolveSource } : {}),
+            getHost,
+        })
+        : null;
+    const screenshotPanel = screenshotActive
+        ? createScreenshotPanelPlugin({
+            copy,
+            captureShortcut: screenshotConfig.shortcut,
+            recordShortcut: recordConfig.shortcut,
+            captureTitle,
+            recordTitle,
+            screenshotConfig,
+            afterPick: pickConfig.afterPick,
+            afterPickCropPaddingPx: pickConfig.cropPaddingPx,
+            getHost,
+        })
+        : null;
+    const hmrTracker = appVersion ? createHmrGenerationTracker() : null;
+    /** Panel plugins (same API as customs): reportType, comment, capture UIs, user plugins. */
+    const panelPlugins = [
+        reportTypePanel,
+        commentPanel,
+        ...(elementPanel ? [elementPanel.plugin] : []),
+        ...(screenshotPanel ? [screenshotPanel.plugin] : []),
+        ...asPluginsWithUi(userPlugins),
+    ];
+    const getSelectedReportType = () => selectedReportTypeRef.current;
+    const sessionPlugins = [
+        ...createCollectOnlyBuiltinPlugins({
+            pageContext: pageContextActive,
+            consoleLogs: consoleLogsActive,
+            consoleLogsMaxEntries,
+            getReportType: getSelectedReportType,
+            ...(appVersion ? { version: appVersion, getHmr: () => hmrTracker?.getHmr() ?? null } : {}),
+        }),
+        reportTypePanel,
+        ...(elementPanel ? [elementPanel.elementPlugin] : []),
+        // screenshot + comment collect via panel plugin instances (no submit extras):
+        ...(screenshotPanel ? [screenshotPanel.plugin] : []),
+        commentPanel,
+        ...userPlugins,
+    ].map((plugin) => gatePluginByReportType(plugin, getSelectedReportType));
+    const session = initFeedbackCapture({ plugins: sessionPlugins });
+    if (document.getElementById(rootId)) {
+        hmrTracker?.dispose();
+        session.dispose();
+        return noopHandle();
+    }
+    const style = document.createElement("style");
+    style.textContent = css(rootId, fabConfig);
+    root.appendChild(style);
+    const fab = document.createElement("button");
+    fab.type = "button";
+    fab.className = "t3f-fab";
+    fab.title = copy.fabTitle;
+    fab.setAttribute("aria-label", copy.fabAriaLabel);
+    const fabGlyph = document.createElement("span");
+    fabGlyph.className = "t3f-fab-glyph";
+    fabGlyph.textContent = "✎";
+    fabGlyph.setAttribute("aria-hidden", "true");
+    const fabBadge = document.createElement("span");
+    fabBadge.className = "t3f-fab-badge";
+    fabBadge.setAttribute("aria-hidden", "true");
+    fab.append(fabGlyph, fabBadge);
+    root.appendChild(fab);
+    const toastEl = document.createElement("div");
+    toastEl.className = "t3f-toast";
+    toastEl.hidden = true;
+    toastEl.setAttribute("role", "status");
+    root.appendChild(toastEl);
+    const activityEl = document.createElement("div");
+    activityEl.className = "t3f-activity";
+    activityEl.hidden = true;
+    activityEl.setAttribute("role", "dialog");
+    activityEl.setAttribute("aria-label", copy.activityTitle);
+    root.appendChild(activityEl);
+    document.body.appendChild(root);
+    let open = false;
+    let activityOpen = false;
+    let backdrop = null;
+    let detachThreadPicker = null;
+    let detachSlotContributions = null;
+    let toastTimer = null;
+    let pollTimer = null;
+    let probing = false;
+    const persistDraft = (panelOpen) => {
+        const extras = draftExtras.snapshot();
+        const hasMeaningfulExtra = Object.entries(extras).some(([key, value]) => {
+            if (value === undefined || value === "")
+                return false;
+            if (key === "comment" && typeof value === "string")
+                return value.trim().length > 0;
+            if (key === "screenshot") {
+                const gallery = value?.gallery;
+                return Array.isArray(gallery) && gallery.length > 0;
+            }
+            return true;
+        });
+        if (!hasMeaningfulExtra && !panelOpen) {
+            clearFeedbackDraft();
+            return;
+        }
+        writeFeedbackDraft({
+            v: 1,
+            comment: "",
+            gallery: [],
+            extras,
+            panelOpen,
+        });
+    };
+    const clearDraftState = () => {
+        draftClears.runDraftClears();
+        draftExtras.clear();
+        clearFeedbackDraft();
+    };
+    /** Assigned when openPanel is declared; used by the shell host openPanel(). */
+    let openPanelImpl = async () => undefined;
+    /** Panel-local send UI sync (wired when the panel is open). */
+    let syncSendActionsUiRef = () => undefined;
+    const buildShellHost = (overrides = {}) => ({
+        root,
+        getReportType: () => selectedReportTypeRef.current,
+        setReportType: (type) => {
+            selectedReportTypeRef.current = type;
+            writeReportType(type);
+            for (const listener of reportTypeListeners)
+                listener(type);
+            syncSendActionsUiRef();
+        },
+        subscribeReportType: (listener) => {
+            reportTypeListeners.add(listener);
+            return () => {
+                reportTypeListeners.delete(listener);
+            };
+        },
+        isPanelOpen: () => open,
+        openPanel: () => {
+            void openPanelImpl();
+        },
+        setStatus: () => undefined,
+        persistDraft: (panelOpen = true) => persistDraft(panelOpen),
+        focusComment: () => commentPanel.getApi().focus(),
+        getDraftExtra: (id) => draftExtras.get(id),
+        setDraftExtra: (id, value) => draftExtras.set(id, value),
+        registerBusy: busy.registerBusy,
+        isBusy: busy.isBusy,
+        registerAfterPick: afterPick.registerAfterPick,
+        notifyPicked: afterPick.notifyPicked,
+        registerAction: actions.registerAction,
+        runAction: actions.runAction,
+        registerDraftClear: draftClears.registerDraftClear,
+        media: hostMedia,
+        ...overrides,
+    });
+    hostRef.current = buildShellHost();
+    commentPanel.installHostHooks(hostRef.current);
+    elementPanel?.installHostHooks(hostRef.current);
+    screenshotPanel?.installHostHooks(hostRef.current);
+    const setStatus = (el, text, kind = "") => {
+        el.replaceChildren();
+        el.append(document.createTextNode(text));
+        el.className = `t3f-status${kind ? ` ${kind}` : ""}`;
+    };
+    const hideToast = () => {
+        if (toastTimer) {
+            clearTimeout(toastTimer);
+            toastTimer = null;
+        }
+        toastEl.hidden = true;
+        toastEl.replaceChildren();
+    };
+    const showSentToast = (result) => {
+        hideToast();
+        const title = document.createElement("div");
+        title.className = "t3f-toast-title";
+        title.textContent = copy.toastSentLabel;
+        const meta = document.createElement("div");
+        meta.className = "t3f-toast-meta";
+        meta.textContent =
+            result.threadTitle.trim().length > 0 ? result.threadTitle.trim() : copy.sentStatus;
+        const actions = document.createElement("div");
+        actions.className = "t3f-toast-actions";
+        if (result.openUrl) {
+            const link = document.createElement("a");
+            wireOpenInT3Link(link, {
+                openUrl: result.openUrl,
+                threadId: result.threadId,
+                endpoint,
+                label: copy.openInT3Label,
+            });
+            actions.append(link);
+        }
+        const dismiss = document.createElement("button");
+        dismiss.type = "button";
+        dismiss.className = "t3f-btn";
+        setIconLabel(dismiss, CLOSE_ICON_SVG, copy.activityDismissLabel);
+        dismiss.addEventListener("click", hideToast);
+        actions.append(dismiss);
+        toastEl.replaceChildren(title, meta, actions);
+        toastEl.hidden = false;
+        toastTimer = setTimeout(hideToast, 2500);
+    };
+    const closeActivity = () => {
+        activityOpen = false;
+        activityEl.hidden = true;
+        activityEl.replaceChildren();
+    };
+    const syncFabVisibility = (activeCount) => {
+        const hasActivity = activeCount > 0;
+        root.classList.toggle("t3f-has-activity", hasActivity);
+        fabBadge.textContent = hasActivity ? String(activeCount) : "";
+        if (hasActivity) {
+            fab.hidden = false;
+            fab.title = copy.activityFabTitle;
+            fab.setAttribute("aria-label", `${copy.activityFabAriaLabel}: ${activeCount}`);
+        }
+        else {
+            fab.title = copy.fabTitle;
+            fab.setAttribute("aria-label", copy.fabAriaLabel);
+            fab.hidden = fabConfig.visibility === "never";
+            closeActivity();
+        }
+    };
+    const stopPolling = () => {
+        if (pollTimer) {
+            clearInterval(pollTimer);
+            pollTimer = null;
+        }
+    };
+    const probeActiveThreads = async () => {
+        if (probing)
+            return;
+        const active = listActiveThreads();
+        if (active.length === 0) {
+            stopPolling();
+            syncFabVisibility(0);
+            return;
+        }
+        probing = true;
+        try {
+            const ids = active.map((t) => t.threadId).join(",");
+            const res = await fetch(`${endpoint}/threads?ids=${encodeURIComponent(ids)}`, {
+                headers: { Accept: "application/json" },
+            });
+            if (!res.ok)
+                return;
+            const body = (await res.json());
+            const settled = (body.threads ?? [])
+                .filter((t) => t.state === "settled")
+                .map((t) => t.threadId);
+            if (settled.length > 0) {
+                const next = removeActiveThreads(settled);
+                syncFabVisibility(next.length);
+                if (activityOpen)
+                    renderActivity(next);
+                if (next.length === 0)
+                    stopPolling();
+            }
+        }
+        catch {
+            // Probe is best-effort; TTL still settles.
+        }
+        finally {
+            probing = false;
+        }
+    };
+    const ensurePolling = () => {
+        if (pollTimer)
+            return;
+        if (listActiveThreads().length === 0)
+            return;
+        pollTimer = setInterval(() => {
+            void probeActiveThreads();
+        }, ACTIVE_THREAD_POLL_MS);
+    };
+    /** Dispatch `thread.settle` via the Vite bridge; returns ids that settled (or were already gone). */
+    const settleActiveThreads = async (threadIds) => {
+        const ids = [...new Set(threadIds.map((id) => id.trim()).filter(Boolean))];
+        if (ids.length === 0)
+            return [];
+        const res = await fetch(`${endpoint}/settle`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Accept: "application/json",
+            },
+            body: JSON.stringify({ threadIds: ids }),
+        });
+        let parsed;
+        try {
+            parsed = await res.json();
+        }
+        catch {
+            parsed = undefined;
+        }
+        if (!res.ok) {
+            const errMsg = parsed &&
+                typeof parsed === "object" &&
+                "error" in parsed &&
+                typeof parsed.error === "string"
+                ? parsed.error
+                : `HTTP ${res.status}`;
+            throw new Error(errMsg);
+        }
+        const body = parsed;
+        return (body.threads ?? []).filter((t) => t.ok).map((t) => t.threadId);
+    };
+    const applySettledLocally = (threadIds) => {
+        const next = removeActiveThreads(threadIds);
+        syncFabVisibility(next.length);
+        if (next.length === 0) {
+            closeActivity();
+            stopPolling();
+        }
+        else if (activityOpen) {
+            renderActivity(next);
+        }
+        return next;
+    };
+    let settling = false;
+    const renderActivity = (records) => {
+        activityEl.replaceChildren();
+        const head = document.createElement("div");
+        head.className = "t3f-activity-head";
+        const title = document.createElement("div");
+        title.className = "t3f-activity-title";
+        title.textContent = copy.activityTitle;
+        const headActions = document.createElement("div");
+        headActions.style.display = "flex";
+        headActions.style.gap = "6px";
+        const newBtn = document.createElement("button");
+        newBtn.type = "button";
+        newBtn.className = "t3f-btn primary";
+        setIconLabel(newBtn, PLUS_ICON_SVG, copy.activityNewLabel);
+        newBtn.addEventListener("click", () => {
+            closeActivity();
+            void openPanel();
+        });
+        headActions.append(newBtn);
+        if (records.length > 0) {
+            const clearBtn = document.createElement("button");
+            clearBtn.type = "button";
+            clearBtn.className = "t3f-btn";
+            setIconLabel(clearBtn, TRASH_ICON_SVG, copy.activityClearLabel);
+            clearBtn.addEventListener("click", () => {
+                clearActiveThreads();
+                syncFabVisibility(0);
+                closeActivity();
+                stopPolling();
+            });
+            headActions.append(clearBtn);
+        }
+        head.append(title, headActions);
+        activityEl.append(head);
+        if (records.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "t3f-activity-empty";
+            empty.textContent = copy.activityEmptyLabel;
+            activityEl.append(empty);
+            return;
+        }
+        const list = document.createElement("div");
+        list.className = "t3f-activity-list";
+        for (const record of records) {
+            const row = document.createElement("div");
+            row.className = "t3f-activity-row";
+            const rowTitle = document.createElement("div");
+            rowTitle.className = "t3f-activity-row-title";
+            const fullTitle = record.threadTitle.trim() || record.threadId;
+            const split = splitThreadTitleReportType(record.threadTitle, reportTypeGlyph);
+            const typeForIcon = split.reportType ?? record.reportType;
+            const displayTitle = split.reportType ? split.displayTitle || record.threadId : fullTitle;
+            if (typeForIcon) {
+                const icon = document.createElement("span");
+                icon.className = "t3f-activity-row-title-icon";
+                icon.setAttribute("aria-hidden", "true");
+                icon.innerHTML = reportTypeGlyphHtml(typeForIcon, reportTypeGlyph, copy);
+                rowTitle.append(icon);
+            }
+            const rowTitleText = document.createElement("span");
+            rowTitleText.className = "t3f-activity-row-title-text";
+            rowTitleText.textContent = displayTitle;
+            rowTitle.append(rowTitleText);
+            rowTitle.title = fullTitle;
+            const actions = document.createElement("div");
+            actions.className = "t3f-activity-row-actions";
+            const openLink = document.createElement("a");
+            wireOpenInT3Link(openLink, {
+                openUrl: record.openUrl,
+                threadId: record.threadId,
+                endpoint,
+                label: copy.activityOpenLabel,
+            });
+            const continueBtn = document.createElement("button");
+            continueBtn.type = "button";
+            continueBtn.className = "t3f-btn";
+            setIconLabel(continueBtn, PLAY_ICON_SVG, copy.activityContinueLabel);
+            continueBtn.addEventListener("click", () => {
+                writeSessionThreadRecord(window.location.pathname, {
+                    threadId: record.threadId,
+                    threadTitle: record.threadTitle,
+                    reportType: record.reportType,
+                    lastSentAt: Date.now(),
+                });
+                closeActivity();
+                void openPanel();
+            });
+            const dismissBtn = document.createElement("button");
+            dismissBtn.type = "button";
+            dismissBtn.className = "t3f-btn";
+            setIconLabel(dismissBtn, CLOSE_ICON_SVG, copy.activityDismissLabel);
+            dismissBtn.addEventListener("click", () => {
+                const next = removeActiveThread(record.threadId);
+                syncFabVisibility(next.length);
+                if (next.length === 0) {
+                    closeActivity();
+                    stopPolling();
+                }
+                else {
+                    renderActivity(next);
+                }
+            });
+            const settleBtn = document.createElement("button");
+            settleBtn.type = "button";
+            settleBtn.className = "t3f-btn";
+            setIconLabel(settleBtn, CHECK_ICON_SVG, copy.activitySettleLabel);
+            settleBtn.disabled = settling;
+            settleBtn.addEventListener("click", () => {
+                void (async () => {
+                    if (settling)
+                        return;
+                    settling = true;
+                    settleBtn.disabled = true;
+                    continueBtn.disabled = true;
+                    dismissBtn.disabled = true;
+                    try {
+                        const okIds = await settleActiveThreads([record.threadId]);
+                        if (!okIds.includes(record.threadId)) {
+                            settleBtn.disabled = false;
+                            continueBtn.disabled = false;
+                            dismissBtn.disabled = false;
+                            return;
+                        }
+                        settling = false;
+                        applySettledLocally(okIds);
+                    }
+                    catch {
+                        settleBtn.disabled = false;
+                        continueBtn.disabled = false;
+                        dismissBtn.disabled = false;
+                    }
+                    finally {
+                        settling = false;
+                    }
+                })();
+            });
+            actions.append(openLink, continueBtn, settleBtn, dismissBtn);
+            row.append(rowTitle, actions);
+            list.append(row);
+        }
+        activityEl.append(list);
+    };
+    const openActivity = () => {
+        hideToast();
+        const records = listActiveThreads();
+        syncFabVisibility(records.length);
+        renderActivity(records);
+        activityOpen = true;
+        activityEl.hidden = false;
+    };
+    const registerSentThread = (result, reportType) => {
+        const next = upsertActiveThread({
+            threadId: result.threadId,
+            threadTitle: typeof result.threadTitle === "string" ? result.threadTitle : "",
+            openUrl: result.openUrl,
+            projectId: result.projectId,
+            ...(typeof result.environmentId === "string" && result.environmentId.trim()
+                ? { environmentId: result.environmentId.trim() }
+                : {}),
+            pathname: window.location.pathname,
+            reportType,
+            startedAt: Date.now(),
+        });
+        syncFabVisibility(next.length);
+        ensurePolling();
+    };
+    const close = (opts) => {
+        if (opts?.clearDraft) {
+            clearDraftState();
+        }
+        else if (open) {
+            persistDraft(false);
+        }
+        open = false;
+        detachThreadPicker?.();
+        detachThreadPicker = null;
+        detachSlotContributions?.();
+        detachSlotContributions = null;
+        backdrop?.remove();
+        backdrop = null;
+    };
+    // Initial activity restore (e.g. soft refresh mid-session).
+    {
+        const initial = listActiveThreads();
+        syncFabVisibility(initial.length);
+        if (initial.length > 0)
+            ensurePolling();
+    }
+    const openPanel = async () => {
+        closeActivity();
+        hideToast();
+        if (open)
+            return;
+        open = true;
+        // Restore in-progress compose state (survives close + full page reload).
+        {
+            const draft = readFeedbackDraft();
+            const extras = draft ? migrateDraftExtras(draft) : {};
+            draftExtras.replace(extras);
+        }
+        backdrop = document.createElement("div");
+        backdrop.className = "t3f-backdrop";
+        backdrop.innerHTML = `
+      <div class="t3f-dom-highlight" hidden></div>
+      <form class="t3f-panel" novalidate>
+        <div class="t3f-header">
+          <div class="t3f-header-text">
+            <div class="t3f-title">${escapeHtml(copy.panelTitle)}</div>
+          </div>
+          ${closeButtonHtml({
+            act: "cancel",
+            label: copy.cancelLabel,
+            titleAttr: copy.cancelTitle,
+        })}
+        </div>
+        <div data-slot="beforeComment"></div>
+        <div data-slot="comment"></div>
+        <div class="t3f-attachments">
+          <div data-slot="attachments"></div>
+          <div class="t3f-status"></div>
+        </div>
+        <div class="t3f-actions">
+          <div class="t3f-actions-tools" data-slot="actionsTools"></div>
+          <div class="t3f-actions-send">
+            <div class="t3f-continue-group" data-continue-group hidden>
+              <button type="button" class="t3f-btn t3f-send-continue" data-act="send-continue" hidden title="${SEND_CONTINUE_SHORTCUT_LABEL}">
+                ${PLAY_ICON_SVG}<span class="t3f-send-continue-type" data-thread-continue-type hidden aria-hidden="true"></span><span data-thread-continue-label></span>
+              </button>
+              <button type="button" class="t3f-btn t3f-thread-pick" data-act="thread-pick" hidden aria-expanded="false" aria-haspopup="listbox" title="${escapeHtml(copy.threadPickLabel)}" aria-label="${escapeHtml(copy.threadPickLabel)}">
+                ${CHEVRON_DOWN_ICON_SVG}
+              </button>
+              <div class="t3f-thread-picker" data-thread-picker hidden>
+                <input type="search" data-thread-search placeholder="${escapeHtml(copy.threadSearchPlaceholder)}" autocomplete="off" spellcheck="false" />
+                <div class="t3f-thread-picker-list" data-thread-list role="listbox" aria-label="${escapeHtml(copy.threadPickLabel)}"></div>
+                <div class="t3f-thread-picker-empty" data-thread-empty hidden>${escapeHtml(copy.threadSearchEmptyLabel)}</div>
+                <div class="t3f-thread-picker-meta" data-thread-meta hidden></div>
+              </div>
+            </div>
+            <button type="button" class="t3f-btn" data-act="send-new" hidden title="${SEND_NEW_SHORTCUT_LABEL}">${escapeHtml(copy.threadNewLabel)}</button>
+            <button type="submit" class="t3f-btn primary" data-act="send" title="${SEND_PREFERRED_SHORTCUT_LABEL}">${escapeHtml(copy.sendLabel)}</button>
+          </div>
+        </div>
+      </form>
+    `;
+        root.appendChild(backdrop);
+        const form = backdrop.querySelector("form");
+        const soloSendBtn = form.querySelector('[data-act="send"]');
+        const sendNewBtn = form.querySelector('[data-act="send-new"]');
+        const continueGroup = form.querySelector("[data-continue-group]");
+        const sendContinueBtn = form.querySelector('[data-act="send-continue"]');
+        const threadPickBtn = form.querySelector('[data-act="thread-pick"]');
+        const threadPickerEl = form.querySelector("[data-thread-picker]");
+        const threadSearchInput = form.querySelector("[data-thread-search]");
+        const threadListEl = form.querySelector("[data-thread-list]");
+        const threadEmptyEl = form.querySelector("[data-thread-empty]");
+        const threadMetaEl = form.querySelector("[data-thread-meta]");
+        const threadContinueLabelEl = form.querySelector("[data-thread-continue-label]");
+        const threadContinueTypeEl = form.querySelector("[data-thread-continue-type]");
+        let reportType = readReportType();
+        selectedReportTypeRef.current = reportType;
+        const emitReportType = (type) => {
+            for (const listener of reportTypeListeners)
+                listener(type);
+        };
+        let threadDestination = "new";
+        const priorThread = threadReuse === "ask" ? readSessionThreadRecord(window.location.pathname) : undefined;
+        let listedThreads = [];
+        let selectedContinue = priorThread
+            ? {
+                threadId: priorThread.threadId,
+                threadTitle: priorThread.threadTitle,
+                ...(priorThread.reportType ? { reportType: priorThread.reportType } : {}),
+            }
+            : undefined;
+        let threadSearchQuery = defaultThreadSearchQuery(window.location.pathname);
+        threadSearchInput.value = threadSearchQuery;
+        let pickerOpen = false;
+        let pickerActiveIndex = -1;
+        const status = form.querySelector(".t3f-status");
+        hostRef.current = buildShellHost({
+            setReportType: (type) => {
+                reportType = type;
+                selectedReportTypeRef.current = type;
+                writeReportType(type);
+                emitReportType(type);
+                syncSendActionsUiRef();
+            },
+            setStatus: (message, kind = "") => setStatus(status, message, kind),
+        });
+        const uiCtx = {
+            ...hostRef.current,
+            form,
+            backdrop,
+        };
+        const panelContributions = resolveAllPanelUiContributions(panelPlugins);
+        const slotMount = mountSlotContributions(form, panelContributions, uiCtx);
+        detachSlotContributions = slotMount.dispose;
+        const textarea = commentPanel.getApi().getTextarea() ??
+            form.querySelector("textarea[name='comment']");
+        const continueTitleExcerpt = (title) => {
+            const trimmed = title.replace(/\s+/g, " ").trim();
+            if (!trimmed)
+                return copy.threadContinueUntitledLabel;
+            const max = 28;
+            return trimmed.length > max ? `${trimmed.slice(0, max - 1)}…` : trimmed;
+        };
+        const continueAriaLabel = (title) => {
+            const excerpt = continueTitleExcerpt(title);
+            return `${copy.threadContinueLabel} ${excerpt}`;
+        };
+        const resolveContinueTarget = () => {
+            const selected = selectedContinue;
+            if (!selected)
+                return undefined;
+            const fromList = listedThreads.find((t) => t.threadId === selected.threadId);
+            if (fromList) {
+                return {
+                    threadId: fromList.threadId,
+                    threadTitle: fromList.title,
+                    ...(selected.reportType ? { reportType: selected.reportType } : {}),
+                };
+            }
+            if (priorThread && priorThread.threadId === selected.threadId) {
+                return {
+                    threadId: priorThread.threadId,
+                    threadTitle: priorThread.threadTitle,
+                    ...(priorThread.reportType ? { reportType: priorThread.reportType } : {}),
+                };
+            }
+            // Sticky / picked id vanished from the live list — still allow continue.
+            return selected;
+        };
+        const askHasContinueTarget = () => resolveContinueTarget() !== undefined;
+        const askHasPicker = () => listedThreads.length > 0;
+        const askShowSplit = () => threadReuse === "ask" &&
+            (askHasContinueTarget() || askHasPicker() || priorThread !== undefined);
+        const preferredThreadDestination = () => {
+            const target = resolveContinueTarget();
+            if (!target)
+                return "new";
+            if (priorThread && target.threadId === priorThread.threadId) {
+                return defaultThreadDestination(priorThread, reportType);
+            }
+            if (listedThreads.some((t) => t.threadId === target.threadId)) {
+                return "continue";
+            }
+            return defaultThreadDestination(priorThread, reportType);
+        };
+        const clearThreadPickerLayout = () => {
+            threadPickerEl.style.top = "";
+            threadPickerEl.style.left = "";
+            threadPickerEl.style.right = "";
+            threadPickerEl.style.bottom = "";
+            threadPickerEl.style.width = "";
+            threadPickerEl.removeAttribute("data-placement");
+            threadListEl.style.maxHeight = "";
+        };
+        /** Place the fixed picker above/below the continue control within the viewport. */
+        const layoutThreadPicker = () => {
+            if (!pickerOpen || threadPickerEl.hidden)
+                return;
+            const anchor = continueGroup.getBoundingClientRect();
+            const margin = 8;
+            const gap = 6;
+            const width = Math.min(360, Math.max(240, window.innerWidth - margin * 2), Math.max(anchor.width, 280));
+            let left = anchor.right - width;
+            left = Math.min(Math.max(margin, left), window.innerWidth - margin - width);
+            threadPickerEl.style.right = "auto";
+            threadPickerEl.style.bottom = "auto";
+            threadPickerEl.style.width = `${Math.round(width)}px`;
+            threadPickerEl.style.left = `${Math.round(left)}px`;
+            // Measure chrome (search + padding + meta) with a collapsed list.
+            threadListEl.style.maxHeight = "0px";
+            threadPickerEl.style.top = `${Math.round(margin)}px`;
+            const chrome = Math.ceil(threadPickerEl.getBoundingClientRect().height);
+            const spaceAbove = anchor.top - gap - margin;
+            const spaceBelow = window.innerHeight - anchor.bottom - gap - margin;
+            const openAbove = spaceAbove >= 160 || spaceAbove >= spaceBelow;
+            const available = Math.max(96, openAbove ? spaceAbove : spaceBelow);
+            const listMax = Math.max(72, Math.min(320, available - chrome));
+            threadListEl.style.maxHeight = `${Math.round(listMax)}px`;
+            const pickerHeight = Math.ceil(threadPickerEl.getBoundingClientRect().height);
+            if (openAbove) {
+                const top = Math.max(margin, anchor.top - gap - pickerHeight);
+                threadPickerEl.style.top = `${Math.round(top)}px`;
+                threadPickerEl.dataset.placement = "above";
+            }
+            else {
+                threadPickerEl.style.top = `${Math.round(anchor.bottom + gap)}px`;
+                threadPickerEl.dataset.placement = "below";
+            }
+        };
+        const closeThreadPicker = () => {
+            pickerOpen = false;
+            pickerActiveIndex = -1;
+            threadPickerEl.hidden = true;
+            threadPickBtn.setAttribute("aria-expanded", "false");
+            threadListEl.removeAttribute("aria-activedescendant");
+            clearThreadPickerLayout();
+        };
+        const selectListedThread = (item) => {
+            selectedContinue = {
+                threadId: item.threadId,
+                threadTitle: item.title,
+            };
+            closeThreadPicker();
+            syncSendActionsUi();
+        };
+        const visiblePickerMatches = () => {
+            const selectedId = selectedContinue?.threadId;
+            return filterThreadListItems(listedThreads, threadSearchQuery, {
+                ...(selectedId ? { selectedId } : {}),
+            }).items;
+        };
+        const pickerOptionButtons = () => Array.from(threadListEl.querySelectorAll("[data-thread-id]"));
+        const syncPickerActiveOption = () => {
+            const options = pickerOptionButtons();
+            if (options.length === 0) {
+                pickerActiveIndex = -1;
+                threadListEl.removeAttribute("aria-activedescendant");
+                return;
+            }
+            if (pickerActiveIndex < 0)
+                pickerActiveIndex = 0;
+            if (pickerActiveIndex >= options.length)
+                pickerActiveIndex = options.length - 1;
+            let activeId = "";
+            for (let i = 0; i < options.length; i++) {
+                const option = options[i];
+                const active = i === pickerActiveIndex;
+                option.classList.toggle("is-active", active);
+                if (active) {
+                    activeId = option.id;
+                    option.scrollIntoView({ block: "nearest" });
+                }
+            }
+            if (activeId)
+                threadListEl.setAttribute("aria-activedescendant", activeId);
+            else
+                threadListEl.removeAttribute("aria-activedescendant");
+        };
+        const movePickerActive = (delta) => {
+            const options = pickerOptionButtons();
+            if (options.length === 0)
+                return;
+            if (pickerActiveIndex < 0) {
+                pickerActiveIndex = delta > 0 ? 0 : options.length - 1;
+            }
+            else {
+                pickerActiveIndex = (pickerActiveIndex + delta + options.length * 10) % options.length;
+            }
+            syncPickerActiveOption();
+        };
+        const renderThreadPickerList = () => {
+            const selectedId = selectedContinue?.threadId;
+            const { items: filtered, matchedCount, openMatchedCount, } = filterThreadListItems(listedThreads, threadSearchQuery, {
+                ...(selectedId ? { selectedId } : {}),
+            });
+            threadListEl.replaceChildren();
+            threadEmptyEl.hidden = filtered.length > 0;
+            const truncated = matchedCount > filtered.length;
+            if (truncated) {
+                threadMetaEl.hidden = false;
+                const base = copy.threadSearchTruncatedLabel
+                    .replaceAll("{shown}", String(filtered.length))
+                    .replaceAll("{total}", String(matchedCount));
+                threadMetaEl.textContent =
+                    openMatchedCount > 0 ? `${base} · ${openMatchedCount} open` : base;
+            }
+            else if (matchedCount > 0) {
+                threadMetaEl.hidden = false;
+                threadMetaEl.textContent =
+                    openMatchedCount > 0
+                        ? `${matchedCount} thread${matchedCount === 1 ? "" : "s"} · ${openMatchedCount} open`
+                        : `${matchedCount} thread${matchedCount === 1 ? "" : "s"}`;
+            }
+            else {
+                threadMetaEl.hidden = true;
+                threadMetaEl.textContent = "";
+            }
+            const selectedIndex = selectedId
+                ? filtered.findIndex((item) => item.threadId === selectedId)
+                : -1;
+            for (let index = 0; index < filtered.length; index++) {
+                const item = filtered[index];
+                const option = document.createElement("button");
+                option.type = "button";
+                option.className = "t3f-thread-picker-option";
+                option.id = `t3f-thread-opt-${index}`;
+                option.setAttribute("role", "option");
+                option.tabIndex = -1;
+                option.dataset.threadId = item.threadId;
+                option.setAttribute("aria-selected", item.threadId === selectedId ? "true" : "false");
+                const split = splitThreadTitleReportType(item.title, reportTypeGlyph);
+                const displayTitle = split.reportType ? split.displayTitle || item.title : item.title;
+                if (split.reportType) {
+                    const typeEl = document.createElement("span");
+                    typeEl.className = "t3f-thread-picker-option-type";
+                    typeEl.setAttribute("aria-hidden", "true");
+                    typeEl.innerHTML = reportTypeGlyphHtml(split.reportType, reportTypeGlyph, copy);
+                    option.append(typeEl);
+                }
+                const title = document.createElement("span");
+                title.className = "t3f-thread-picker-option-title";
+                title.textContent = displayTitle;
+                option.append(title);
+                if (item.state === "working" || item.state === "settled") {
+                    const state = document.createElement("span");
+                    state.className = `t3f-thread-picker-option-state ${item.state === "working" ? "is-working" : "is-settled"}`;
+                    state.textContent =
+                        item.state === "working" ? copy.threadStateWorkingLabel : copy.threadStateSettledLabel;
+                    option.append(state);
+                }
+                option.title = displayTitle;
+                option.addEventListener("click", () => {
+                    selectListedThread(item);
+                });
+                option.addEventListener("mousemove", () => {
+                    if (pickerActiveIndex === index)
+                        return;
+                    pickerActiveIndex = index;
+                    syncPickerActiveOption();
+                });
+                threadListEl.append(option);
+            }
+            if (filtered.length === 0) {
+                pickerActiveIndex = -1;
+                threadListEl.removeAttribute("aria-activedescendant");
+            }
+            else if (pickerActiveIndex < 0 || pickerActiveIndex >= filtered.length) {
+                pickerActiveIndex = selectedIndex >= 0 ? selectedIndex : 0;
+                syncPickerActiveOption();
+            }
+            else {
+                syncPickerActiveOption();
+            }
+        };
+        const openThreadPicker = () => {
+            if (!askHasPicker())
+                return;
+            pickerOpen = true;
+            pickerActiveIndex = -1;
+            threadPickerEl.hidden = false;
+            threadPickBtn.setAttribute("aria-expanded", "true");
+            renderThreadPickerList();
+            layoutThreadPicker();
+            queueMicrotask(() => {
+                layoutThreadPicker();
+                threadSearchInput.focus();
+                threadSearchInput.select();
+            });
+        };
+        const syncSendActionsUi = () => {
+            const showSplit = askShowSplit();
+            const target = resolveContinueTarget();
+            const hasPicker = askHasPicker();
+            continueGroup.hidden = !showSplit;
+            soloSendBtn.hidden = showSplit;
+            sendNewBtn.hidden = !showSplit;
+            sendContinueBtn.hidden = !target;
+            threadPickBtn.hidden = !hasPicker;
+            if (!showSplit) {
+                soloSendBtn.classList.add("primary");
+                sendNewBtn.classList.remove("primary");
+                sendContinueBtn.classList.remove("primary");
+                threadPickBtn.classList.remove("primary");
+                threadContinueTypeEl.hidden = true;
+                threadContinueTypeEl.replaceChildren();
+                closeThreadPicker();
+                return;
+            }
+            if (!target) {
+                sendContinueBtn.hidden = !hasPicker;
+                if (hasPicker) {
+                    threadContinueLabelEl.textContent = copy.threadPickLabel;
+                    threadContinueTypeEl.hidden = true;
+                    threadContinueTypeEl.replaceChildren();
+                    sendContinueBtn.setAttribute("aria-label", copy.threadPickLabel);
+                    sendContinueBtn.title = copy.threadPickLabel;
+                    sendContinueBtn.classList.remove("primary");
+                    threadPickBtn.classList.remove("primary");
+                }
+                sendNewBtn.classList.add("primary");
+                sendNewBtn.title = `${SEND_PREFERRED_SHORTCUT_LABEL} · ${SEND_NEW_SHORTCUT_LABEL}`;
+                if (pickerOpen) {
+                    renderThreadPickerList();
+                    layoutThreadPicker();
+                }
+                return;
+            }
+            const preferred = preferredThreadDestination();
+            const fullTitle = target.threadTitle.trim();
+            const split = splitThreadTitleReportType(target.threadTitle, reportTypeGlyph);
+            const typeForIcon = split.reportType ?? target.reportType;
+            const displayTitle = split.reportType ? split.displayTitle : fullTitle;
+            const excerpt = continueTitleExcerpt(displayTitle);
+            const aria = continueAriaLabel(fullTitle || displayTitle);
+            threadContinueLabelEl.textContent = excerpt;
+            if (typeForIcon) {
+                threadContinueTypeEl.hidden = false;
+                threadContinueTypeEl.innerHTML = reportTypeGlyphHtml(typeForIcon, reportTypeGlyph, copy);
+            }
+            else {
+                threadContinueTypeEl.hidden = true;
+                threadContinueTypeEl.replaceChildren();
+            }
+            sendContinueBtn.setAttribute("aria-label", aria);
+            soloSendBtn.classList.remove("primary");
+            sendNewBtn.classList.toggle("primary", preferred === "new");
+            sendContinueBtn.classList.toggle("primary", preferred === "continue");
+            threadPickBtn.classList.toggle("primary", preferred === "continue");
+            const newShortcut = preferred === "new"
+                ? `${SEND_PREFERRED_SHORTCUT_LABEL} · ${SEND_NEW_SHORTCUT_LABEL}`
+                : SEND_NEW_SHORTCUT_LABEL;
+            const continueShortcut = preferred === "continue"
+                ? `${SEND_PREFERRED_SHORTCUT_LABEL} · ${SEND_CONTINUE_SHORTCUT_LABEL}`
+                : SEND_CONTINUE_SHORTCUT_LABEL;
+            sendNewBtn.title = newShortcut;
+            sendContinueBtn.title = fullTitle
+                ? `${fullTitle} (${continueShortcut})`
+                : `${aria} (${continueShortcut})`;
+            if (pickerOpen) {
+                renderThreadPickerList();
+                layoutThreadPicker();
+            }
+        };
+        syncSendActionsUiRef = syncSendActionsUi;
+        const syncReportTypeUi = () => {
+            slotMount.syncReportType(reportType);
+            emitReportType(reportType);
+            syncSendActionsUi();
+        };
+        syncReportTypeUi();
+        threadPickBtn.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (pickerOpen)
+                closeThreadPicker();
+            else
+                openThreadPicker();
+        });
+        threadSearchInput.addEventListener("input", () => {
+            threadSearchQuery = threadSearchInput.value;
+            pickerActiveIndex = -1;
+            renderThreadPickerList();
+            layoutThreadPicker();
+        });
+        threadSearchInput.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                closeThreadPicker();
+                textarea.focus();
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                event.stopPropagation();
+                movePickerActive(1);
+                return;
+            }
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                event.stopPropagation();
+                movePickerActive(-1);
+                return;
+            }
+            if (event.key === "Enter") {
+                const matches = visiblePickerMatches();
+                if (matches.length === 0)
+                    return;
+                const active = pickerActiveIndex >= 0 && pickerActiveIndex < matches.length
+                    ? matches[pickerActiveIndex]
+                    : matches.length === 1
+                        ? matches[0]
+                        : undefined;
+                if (!active)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                selectListedThread(active);
+            }
+        });
+        threadPickerEl.addEventListener("click", (event) => {
+            event.stopPropagation();
+        });
+        if (threadReuse === "ask") {
+            void fetch(`${endpoint}/threads`, { headers: { Accept: "application/json" } })
+                .then(async (res) => {
+                if (!res.ok)
+                    throw new Error(`HTTP ${res.status}`);
+                const body = (await res.json());
+                listedThreads = Array.isArray(body.threads) ? body.threads : [];
+                if (!selectedContinue &&
+                    priorThread &&
+                    listedThreads.some((t) => t.threadId === priorThread.threadId)) {
+                    selectedContinue = {
+                        threadId: priorThread.threadId,
+                        threadTitle: priorThread.threadTitle,
+                        ...(priorThread.reportType ? { reportType: priorThread.reportType } : {}),
+                    };
+                }
+                if (form.isConnected)
+                    syncSendActionsUi();
+            })
+                .catch(() => {
+                listedThreads = [];
+                if (form.isConnected)
+                    syncSendActionsUi();
+            });
+        }
+        let sending = false;
+        textarea.focus();
+        const setSendButtonsDisabled = (disabled) => {
+            soloSendBtn.disabled = disabled;
+            sendNewBtn.disabled = disabled;
+            sendContinueBtn.disabled = disabled;
+            threadPickBtn.disabled = disabled;
+            threadSearchInput.disabled = disabled;
+        };
+        textarea.addEventListener("keydown", (event) => {
+            if (event.key !== "Enter")
+                return;
+            const mod = event.metaKey || event.ctrlKey;
+            let destination;
+            if (mod && event.shiftKey && !event.altKey) {
+                destination = "new";
+            }
+            else if (event.altKey && !mod && !event.shiftKey) {
+                if (!askHasContinueTarget())
+                    return;
+                destination = "continue";
+            }
+            else if (mod && !event.shiftKey && !event.altKey) {
+                destination = askShowSplit() ? preferredThreadDestination() : "new";
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            queueMicrotask(() => {
+                void submitFeedback(destination);
+            });
+        });
+        backdrop.addEventListener("click", (e) => {
+            if (e.target === backdrop && !busy.isBusy())
+                close();
+        });
+        form.querySelector('[data-act="cancel"]')?.addEventListener("click", () => {
+            close({ clearDraft: true });
+        });
+        const submitFeedback = async (destination) => {
+            if (sending)
+                return;
+            if (!commentPanel.getApi().validate()) {
+                setStatus(status, copy.commentRequiredStatus, "err");
+                return;
+            }
+            if (destination === "continue" && !resolveContinueTarget()) {
+                openThreadPicker();
+                return;
+            }
+            threadDestination = destination;
+            sending = true;
+            setSendButtonsDisabled(true);
+            setStatus(status, copy.sendingStatus);
+            try {
+                // Session plugins (comment, reportType, screenshot, …) collect themselves.
+                const envelope = await session.build();
+                if (threadReuse === "ask") {
+                    const target = resolveContinueTarget();
+                    askThreadIdRef.current =
+                        threadDestination === "continue" && target ? target.threadId : undefined;
+                }
+                try {
+                    const result = (await transport.send(envelope));
+                    if (result &&
+                        typeof result === "object" &&
+                        typeof result.threadId === "string" &&
+                        typeof result.openUrl === "string") {
+                        if (threadReuse === "session-route" || threadReuse === "ask") {
+                            writeSessionThreadRecord(window.location.pathname, {
+                                threadId: result.threadId,
+                                threadTitle: typeof result.threadTitle === "string" ? result.threadTitle : "",
+                                reportType,
+                                lastSentAt: Date.now(),
+                            });
+                        }
+                        if (typeof result.projectId === "string" && result.projectId) {
+                            registerSentThread(result, reportType);
+                        }
+                        close({ clearDraft: true });
+                        showSentToast(result);
+                    }
+                    else {
+                        setStatus(status, copy.sentStatus, "ok");
+                        close({ clearDraft: true });
+                    }
+                }
+                finally {
+                    askThreadIdRef.current = undefined;
+                }
+            }
+            catch (error) {
+                setStatus(status, error instanceof Error ? error.message : String(error), "err");
+                sending = false;
+                setSendButtonsDisabled(false);
+            }
+        };
+        sendNewBtn.addEventListener("click", () => {
+            void submitFeedback("new");
+        });
+        sendContinueBtn.addEventListener("click", () => {
+            if (!resolveContinueTarget()) {
+                openThreadPicker();
+                return;
+            }
+            void submitFeedback("continue");
+        });
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void submitFeedback(askShowSplit() ? preferredThreadDestination() : "new");
+        });
+        const onDocPointerDown = (event) => {
+            if (!pickerOpen)
+                return;
+            const target = event.target;
+            if (!(target instanceof Node))
+                return;
+            if (continueGroup.contains(target))
+                return;
+            closeThreadPicker();
+        };
+        const onPickerReposition = () => {
+            if (pickerOpen)
+                layoutThreadPicker();
+        };
+        document.addEventListener("pointerdown", onDocPointerDown, true);
+        window.addEventListener("resize", onPickerReposition);
+        form.addEventListener("scroll", onPickerReposition, { passive: true });
+        detachThreadPicker = () => {
+            document.removeEventListener("pointerdown", onDocPointerDown, true);
+            window.removeEventListener("resize", onPickerReposition);
+            form.removeEventListener("scroll", onPickerReposition);
+            detachThreadPicker = null;
+        };
+        persistDraft(true);
+    };
+    openPanelImpl = openPanel;
+    fab.addEventListener("click", () => {
+        const active = listActiveThreads();
+        if (active.length > 0) {
+            if (activityOpen)
+                closeActivity();
+            else
+                openActivity();
+            return;
+        }
+        void openPanel();
+    });
+    /**
+     * Plugin chords (first match wins) + shell open-panel chord.
+     * Built-in pick/capture/record register via their panel plugins — same path as customs.
+     */
+    const registeredShortcuts = [
+        ...resolvePluginShortcuts(panelPlugins),
+        {
+            id: "builtin:open",
+            shortcut,
+            run: (ctx) => {
+                ctx.openPanel();
+            },
+        },
+    ];
+    const onKeyDown = (event) => {
+        const shortcutCtx = hostRef.current ?? buildShellHost();
+        const matched = matchRegisteredShortcut(event, registeredShortcuts, selectedReportTypeRef.current);
+        if (matched) {
+            event.preventDefault();
+            void matched.run(shortcutCtx);
+            return;
+        }
+        if (event.key === "Escape") {
+            if (busy.isBusy())
+                return;
+            if (activityOpen) {
+                event.preventDefault();
+                closeActivity();
+                return;
+            }
+            if (toastEl.hidden === false) {
+                event.preventDefault();
+                hideToast();
+                return;
+            }
+            if (open) {
+                event.preventDefault();
+                close();
+            }
+        }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    const onOpenEvent = () => {
+        void openPanel();
+    };
+    const onCloseEvent = () => {
+        if (busy.isBusy())
+            return;
+        closeActivity();
+        hideToast();
+        close();
+    };
+    window.addEventListener(T3_FEEDBACK_OPEN_EVENT, onOpenEvent);
+    window.addEventListener(T3_FEEDBACK_CLOSE_EVENT, onCloseEvent);
+    const onPageHide = () => {
+        if (open)
+            persistDraft(true);
+    };
+    window.addEventListener("pagehide", onPageHide);
+    // Reopen an in-progress draft after reload (soft or hard).
+    if (readFeedbackDraft()?.panelOpen) {
+        queueMicrotask(() => {
+            void openPanel();
+        });
+    }
+    const unmount = () => {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener(T3_FEEDBACK_OPEN_EVENT, onOpenEvent);
+        window.removeEventListener(T3_FEEDBACK_CLOSE_EVENT, onCloseEvent);
+        window.removeEventListener("pagehide", onPageHide);
+        stopPolling();
+        hideToast();
+        closeActivity();
+        if (open)
+            persistDraft(true);
+        else
+            persistDraft(false);
+        open = false;
+        abortScreenshotRegions(root);
+        detachThreadPicker?.();
+        detachThreadPicker = null;
+        detachSlotContributions?.();
+        detachSlotContributions = null;
+        backdrop?.remove();
+        backdrop = null;
+        root.remove();
+        hmrTracker?.dispose();
+        session.dispose();
+    };
+    return {
+        open: () => {
+            void openPanel();
+        },
+        close: () => {
+            if (busy.isBusy())
+                return;
+            close();
+        },
+        pick: () => {
+            actions.runAction("pick");
+        },
+        capture: () => {
+            actions.runAction("capture");
+        },
+        record: () => {
+            actions.runAction("record");
+        },
+        unmount,
+    };
+}
+/** Convenience for the injected virtual module (config + optional custom plugins). */
+export function mountT3FeedbackFromConfig(config, customPlugins = []) {
+    return mountT3Feedback({
+        shortcut: config.shortcut,
+        endpoint: config.endpoint,
+        fab: config.fab,
+        threadReuse: config.threadReuse,
+        reportTypeGlyph: config.reportTypeGlyph,
+        activePlugins: config.activePlugins,
+        ...(config.pluginOptions ? { pluginOptions: config.pluginOptions } : {}),
+        ...(customPlugins.length > 0 ? { plugins: customPlugins } : {}),
+        ...(config.version ? { version: config.version } : {}),
+        pick: {
+            ...(config.pick.shortcut === null
+                ? { shortcut: false }
+                : { shortcut: config.pick.shortcut }),
+            afterPick: config.pick.afterPick,
+            cropPaddingPx: config.pick.cropPaddingPx,
+            includeInnerHTML: config.pick.includeInnerHTML,
+            maxInnerHTMLLength: config.pick.maxInnerHTMLLength,
+            styles: config.pick.styles,
+            sourceFramework: config.pick.sourceFramework,
+            openInEditor: config.pick.openInEditor === null
+                ? false
+                : config.pick.openInEditor.urlTemplate
+                    ? {
+                        endpoint: config.pick.openInEditor.endpoint,
+                        urlTemplate: config.pick.openInEditor.urlTemplate,
+                    }
+                    : { endpoint: config.pick.openInEditor.endpoint },
+        },
+        screenshot: {
+            ...(config.screenshot.shortcut === null
+                ? { shortcut: false }
+                : { shortcut: config.screenshot.shortcut }),
+            crop: config.screenshot.crop,
+            cropPaddingPx: config.screenshot.cropPaddingPx,
+            maxImages: config.screenshot.maxImages,
+        },
+        record: {
+            ...(config.record.shortcut === null
+                ? { shortcut: false }
+                : { shortcut: config.record.shortcut }),
+        },
+    });
+}