@mhosaic/feedback 0.6.3 → 0.7.0

package/dist/{chunk-3RIR3JHF.mjs → chunk-W6JAJT2U.mjs}

@@ -27,6 +27,9 @@ function createApiClient(options) {
     form.append("technical_context", JSON.stringify(payload.technical_context));
     if (payload.screenshot) form.append("screenshot", payload.screenshot, "screenshot.png");
     if (payload.synthetic) form.append("synthetic", "true");
+    if (payload.user?.id) {
+      form.append("user", JSON.stringify(payload.user));
+    }
     const response = await fetcher(`${endpoint}/api/feedback/v1/reports/`, {
       method: "POST",
       headers: { Authorization: `Bearer ${options.apiKey}` },
@@ -38,7 +41,75 @@ function createApiClient(options) {
     }
     return response.json();
   }
-  return { submitReport };
+  function widgetHeaders(externalId) {
+    return {
+      Authorization: `Bearer ${options.apiKey}`,
+      "X-Mhosaic-User": externalId
+    };
+  }
+  async function listMine(externalId) {
+    const response = await fetcher(`${endpoint}/api/feedback/v1/reports/widget/mine/`, {
+      method: "GET",
+      headers: widgetHeaders(externalId)
+    });
+    if (response.status === 404) return [];
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`listMine failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  async function getReport(reportId, externalId) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/${reportId}/`,
+      { method: "GET", headers: widgetHeaders(externalId) }
+    );
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`getReport failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  async function addComment(reportId, externalId, body, clientNonce) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/${reportId}/comments/`,
+      {
+        method: "POST",
+        headers: {
+          ...widgetHeaders(externalId),
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          body,
+          ...clientNonce !== void 0 && { client_nonce: clientNonce }
+        })
+      }
+    );
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`addComment failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  async function closeAsResolved(reportId, externalId) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/${reportId}/`,
+      {
+        method: "PATCH",
+        headers: {
+          ...widgetHeaders(externalId),
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ status: "closed" })
+      }
+    );
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`closeAsResolved failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  return { submitReport, listMine, getReport, addComment, closeAsResolved };
 }
 
 // src/capture/urlSanitizer.ts
@@ -396,7 +467,35 @@ var DEFAULT_STRINGS = {
   "annotator.count_suffix": "annotations",
   "annotator.loading": "Loading\u2026",
   "annotator.apply": "Apply",
-  "annotator.applying": "Applying\u2026"
+  "annotator.applying": "Applying\u2026",
+  "tab.send": "Send",
+  "tab.mine": "My reports",
+  "mine.empty.title": "No reports yet",
+  "mine.empty.body": "Once you send feedback you can follow the thread here.",
+  "mine.refresh": "Refresh",
+  "mine.loading": "Loading\u2026",
+  "mine.error": "Could not load your reports.",
+  "mine.replies_one": "1 reply",
+  "mine.replies_many": "{count} replies",
+  "detail.back": "Back",
+  "detail.thread": "Conversation",
+  "detail.no_replies": "No replies yet \u2014 we\u2019ll let you know when an operator responds.",
+  "detail.compose_placeholder": "Add a follow-up reply\u2026",
+  "detail.compose_send": "Reply",
+  "detail.compose_sending": "Sending\u2026",
+  "detail.close_cta": "Mark as resolved",
+  "detail.close_busy": "Marking\u2026",
+  "detail.history": "Status history",
+  "detail.author.staff": "Operator",
+  "detail.author.mcp": "Mhosaic Team",
+  "detail.author.system": "System",
+  "status.new": "New",
+  "status.in_progress": "In progress",
+  "status.awaiting_validation": "Awaiting your validation",
+  "status.closed": "Closed",
+  "status.rejected": "Rejected",
+  "status.duplicate": "Duplicate",
+  "status.wontfix": "Won\u2019t fix"
 };
 var FRENCH_STRINGS = {
   "fab.label": "Envoyer un commentaire",
@@ -441,7 +540,35 @@ var FRENCH_STRINGS = {
   "annotator.count_suffix": "annotations",
   "annotator.loading": "Chargement\u2026",
   "annotator.apply": "Appliquer",
-  "annotator.applying": "Application\u2026"
+  "annotator.applying": "Application\u2026",
+  "tab.send": "Envoyer",
+  "tab.mine": "Mes rapports",
+  "mine.empty.title": "Aucun rapport",
+  "mine.empty.body": "Apr\xE8s votre premier envoi vous pourrez suivre la conversation ici.",
+  "mine.refresh": "Actualiser",
+  "mine.loading": "Chargement\u2026",
+  "mine.error": "Impossible de charger vos rapports.",
+  "mine.replies_one": "1 r\xE9ponse",
+  "mine.replies_many": "{count} r\xE9ponses",
+  "detail.back": "Retour",
+  "detail.thread": "Conversation",
+  "detail.no_replies": "Pas encore de r\xE9ponse \u2014 vous serez notifi\xE9 d\xE8s qu\u2019un op\xE9rateur r\xE9pondra.",
+  "detail.compose_placeholder": "Ajouter une r\xE9ponse\u2026",
+  "detail.compose_send": "R\xE9pondre",
+  "detail.compose_sending": "Envoi\u2026",
+  "detail.close_cta": "Marquer comme r\xE9solu",
+  "detail.close_busy": "Validation\u2026",
+  "detail.history": "Historique du statut",
+  "detail.author.staff": "Op\xE9rateur",
+  "detail.author.mcp": "\xC9quipe Mhosaic",
+  "detail.author.system": "Syst\xE8me",
+  "status.new": "Nouveau",
+  "status.in_progress": "En cours",
+  "status.awaiting_validation": "En attente de validation",
+  "status.closed": "Ferm\xE9",
+  "status.rejected": "Rejet\xE9",
+  "status.duplicate": "Doublon",
+  "status.wontfix": "Non corrig\xE9"
 };
 var LOCALE_PACKS = {
   fr: FRENCH_STRINGS
@@ -1058,13 +1185,123 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
   ] });
 }
 
-// src/widget/Modal.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "preact/hooks";
+// src/widget/MineList.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "preact/hooks";
+
+// src/widget/ReportRow.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
-function Modal({ onDismiss, children, closeLabel = "Close" }) {
-  const modalRef = useRef3(null);
-  const previouslyFocused = useRef3(null);
+function statusClassName(status) {
+  return `pill pill-status pill-status--${status}`;
+}
+function severityClassName(severity) {
+  return `pill pill-severity pill-severity--${severity}`;
+}
+function typeClassName() {
+  return "pill pill-type";
+}
+function formatRelative(iso) {
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) return "";
+  const seconds = Math.max(1, Math.round((Date.now() - then) / 1e3));
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 48) return `${hours}h`;
+  const days = Math.round(hours / 24);
+  return `${days}d`;
+}
+function repliesLabel(count, strings) {
+  if (count === 1) return strings["mine.replies_one"];
+  return strings["mine.replies_many"].replace("{count}", String(count));
+}
+function ReportRow({ row, strings, onClick }) {
+  const preview = row.description.length > 120 ? row.description.slice(0, 117) + "\u2026" : row.description;
+  return /* @__PURE__ */ jsxs3("button", { type: "button", class: "mine-row", onClick, children: [
+    /* @__PURE__ */ jsxs3("div", { class: "mine-row-pills", children: [
+      /* @__PURE__ */ jsx4("span", { class: statusClassName(row.status), children: strings[`status.${row.status}`] ?? row.status }),
+      /* @__PURE__ */ jsx4("span", { class: typeClassName(), children: strings[`type.${row.feedback_type}`] }),
+      /* @__PURE__ */ jsx4("span", { class: severityClassName(row.severity), children: strings[`severity.${row.severity}`] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { class: "mine-row-preview", children: preview }),
+    /* @__PURE__ */ jsxs3("div", { class: "mine-row-meta", children: [
+      /* @__PURE__ */ jsx4("span", { children: formatRelative(row.updated_at || row.created_at) }),
+      row.comment_count > 0 && /* @__PURE__ */ jsxs3("span", { children: [
+        "\xB7 ",
+        repliesLabel(row.comment_count, strings)
+      ] })
+    ] })
+  ] });
+}
+
+// src/widget/MineList.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+var POLL_MS = 3e4;
+function MineList({ api, externalId, strings, onSelect }) {
+  const [rows, setRows] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [refreshing, setRefreshing] = useState3(false);
+  const mountedRef = useRef3(true);
+  const fetchRows = async () => {
+    setRefreshing(true);
+    setError(null);
+    try {
+      const next = await api.listMine(externalId);
+      if (!mountedRef.current) return;
+      setRows(next);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(err instanceof Error ? err.message : strings["mine.error"]);
+    } finally {
+      if (mountedRef.current) setRefreshing(false);
+    }
+  };
   useEffect3(() => {
+    mountedRef.current = true;
+    void fetchRows();
+    const timer = setInterval(() => {
+      void fetchRows();
+    }, POLL_MS);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(timer);
+    };
+  }, [externalId]);
+  const isEmpty = rows !== null && rows.length === 0;
+  const isLoading = rows === null && !error;
+  return /* @__PURE__ */ jsxs4("div", { class: "mine-list", children: [
+    /* @__PURE__ */ jsxs4("div", { class: "mine-list-header", children: [
+      /* @__PURE__ */ jsx5("h2", { children: strings["tab.mine"] }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          onClick: () => {
+            void fetchRows();
+          },
+          disabled: refreshing,
+          children: refreshing ? strings["mine.loading"] : strings["mine.refresh"]
+        }
+      )
+    ] }),
+    isLoading && /* @__PURE__ */ jsx5("div", { class: "mine-loading", children: strings["mine.loading"] }),
+    error && /* @__PURE__ */ jsx5("div", { class: "error", children: error }),
+    isEmpty && /* @__PURE__ */ jsxs4("div", { class: "mine-empty", children: [
+      /* @__PURE__ */ jsx5("strong", { children: strings["mine.empty.title"] }),
+      /* @__PURE__ */ jsx5("p", { children: strings["mine.empty.body"] })
+    ] }),
+    rows && rows.length > 0 && /* @__PURE__ */ jsx5("ul", { class: "mine-rows", children: rows.map((row) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(ReportRow, { row, strings, onClick: () => onSelect(row) }) })) })
+  ] });
+}
+
+// src/widget/Modal.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "preact/hooks";
+import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
+function Modal({ onDismiss, children, closeLabel = "Close" }) {
+  const modalRef = useRef4(null);
+  const previouslyFocused = useRef4(null);
+  useEffect4(() => {
     previouslyFocused.current = document.activeElement;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -1086,7 +1323,7 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
       if (prev && typeof prev.focus === "function") prev.focus();
     };
   }, [onDismiss]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       class: "backdrop",
@@ -1094,8 +1331,8 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
       onClick: (e) => {
         if (e.target === e.currentTarget) onDismiss();
       },
-      children: /* @__PURE__ */ jsxs3("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
-        /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsxs5("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
+        /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1111,6 +1348,177 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
   );
 }
 
+// src/widget/ReportDetailView.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "preact/hooks";
+
+// src/widget/CommentBubble.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
+function CommentBubble({ comment, strings }) {
+  const isMine = comment.is_mine;
+  const isAgent = !isMine && comment.author_source === "mcp";
+  const isSystem = !isMine && comment.author_source === "system";
+  const variant = isAgent ? "mcp" : isSystem ? "system" : "staff";
+  const labelKey = variant === "mcp" ? "detail.author.mcp" : variant === "system" ? "detail.author.system" : "detail.author.staff";
+  const label = comment.author_label || strings[labelKey];
+  return /* @__PURE__ */ jsxs6("div", { class: `comment-bubble ${isMine ? "is-mine" : "is-other"}`, children: [
+    !isMine && label && /* @__PURE__ */ jsx7("div", { class: `comment-author comment-author--${variant}`, children: label }),
+    /* @__PURE__ */ jsx7("div", { class: "comment-body", children: comment.body }),
+    /* @__PURE__ */ jsx7("div", { class: "comment-time", children: formatTime(comment.created_at) })
+  ] });
+}
+function formatTime(iso) {
+  try {
+    return new Date(iso).toLocaleString(void 0, {
+      dateStyle: "short",
+      timeStyle: "short"
+    });
+  } catch {
+    return iso;
+  }
+}
+
+// src/widget/ReportDetailView.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "preact/jsx-runtime";
+var POLL_MS2 = 3e4;
+function ReportDetailView({
+  api,
+  externalId,
+  reportId,
+  strings,
+  onBack
+}) {
+  const [detail, setDetail] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [composeBody, setComposeBody] = useState4("");
+  const [sending, setSending] = useState4(false);
+  const [closing, setClosing] = useState4(false);
+  const mountedRef = useRef5(true);
+  const fetchDetail = async () => {
+    try {
+      const next = await api.getReport(reportId, externalId);
+      if (!mountedRef.current) return;
+      setDetail(next);
+      setError(null);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(err instanceof Error ? err.message : "load_failed");
+    }
+  };
+  useEffect5(() => {
+    mountedRef.current = true;
+    void fetchDetail();
+    const timer = setInterval(() => {
+      void fetchDetail();
+    }, POLL_MS2);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(timer);
+    };
+  }, [reportId, externalId]);
+  const handleSend = async () => {
+    if (!composeBody.trim() || sending) return;
+    setSending(true);
+    try {
+      const nonce = `${reportId}:${Date.now()}`;
+      const created = await api.addComment(reportId, externalId, composeBody.trim(), nonce);
+      if (!mountedRef.current) return;
+      setComposeBody("");
+      setDetail(
+        (prev) => prev ? { ...prev, comments: appendComment(prev.comments, created) } : prev
+      );
+      void fetchDetail();
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(err instanceof Error ? err.message : "comment_failed");
+    } finally {
+      if (mountedRef.current) setSending(false);
+    }
+  };
+  const handleClose = async () => {
+    if (closing) return;
+    setClosing(true);
+    try {
+      const next = await api.closeAsResolved(reportId, externalId);
+      if (!mountedRef.current) return;
+      setDetail(next);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(err instanceof Error ? err.message : "close_failed");
+    } finally {
+      if (mountedRef.current) setClosing(false);
+    }
+  };
+  if (!detail && !error) {
+    return /* @__PURE__ */ jsx8("div", { class: "mine-loading", children: strings["mine.loading"] });
+  }
+  if (!detail) {
+    return /* @__PURE__ */ jsx8("div", { class: "error", role: "alert", children: error });
+  }
+  const showCloseCta = detail.status === "awaiting_validation";
+  return /* @__PURE__ */ jsxs7("div", { class: "report-detail", children: [
+    /* @__PURE__ */ jsxs7("div", { class: "report-detail-header", children: [
+      /* @__PURE__ */ jsxs7("button", { type: "button", class: "btn", onClick: onBack, children: [
+        "\u2190 ",
+        strings["detail.back"]
+      ] }),
+      /* @__PURE__ */ jsx8("span", { class: `pill pill-status pill-status--${detail.status}`, children: strings[`status.${detail.status}`] ?? detail.status })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { class: "report-detail-body", children: [
+      /* @__PURE__ */ jsx8("p", { class: "report-detail-description", children: detail.description }),
+      detail.screenshot_url && /* @__PURE__ */ jsx8(
+        "a",
+        {
+          class: "report-detail-screenshot",
+          href: detail.screenshot_url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /* @__PURE__ */ jsx8("img", { src: detail.screenshot_url, alt: "", loading: "lazy" })
+        }
+      ),
+      /* @__PURE__ */ jsx8("h3", { class: "report-detail-section", children: strings["detail.thread"] }),
+      detail.comments.length === 0 ? /* @__PURE__ */ jsx8("p", { class: "report-detail-empty", children: strings["detail.no_replies"] }) : /* @__PURE__ */ jsx8("ul", { class: "report-comments", children: detail.comments.map((c) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(CommentBubble, { comment: c, strings }) })) }),
+      /* @__PURE__ */ jsxs7("div", { class: "report-compose", children: [
+        /* @__PURE__ */ jsx8(
+          "textarea",
+          {
+            value: composeBody,
+            placeholder: strings["detail.compose_placeholder"],
+            onInput: (e) => setComposeBody(e.target.value),
+            disabled: sending
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { class: "report-compose-actions", children: [
+          showCloseCta && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              class: "btn",
+              onClick: handleClose,
+              disabled: closing,
+              children: closing ? strings["detail.close_busy"] : strings["detail.close_cta"]
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              class: "btn btn--primary",
+              onClick: handleSend,
+              disabled: !composeBody.trim() || sending,
+              children: sending ? strings["detail.compose_sending"] : strings["detail.compose_send"]
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx8("div", { class: "error", children: error })
+    ] })
+  ] });
+}
+function appendComment(current, next) {
+  if (current.some((c) => c.id === next.id)) return current;
+  return [...current, next];
+}
+
 // src/widget/styles.ts
 var WIDGET_STYLES = `
 :host {
@@ -1496,10 +1904,232 @@ var WIDGET_STYLES = `
   padding: 10px 14px;
   border-top: 1px solid var(--mfb-border);
 }
+
+/* ---- v0.7: tabs + reader UI -------------------------------------- */
+
+.tab-strip {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--mfb-border);
+  margin: 0 -4px 4px;
+  padding: 0 4px;
+}
+.tab-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 8px 12px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--mfb-text-muted);
+  cursor: pointer;
+}
+.tab-button:hover { color: var(--mfb-text); }
+.tab-button.is-active {
+  color: var(--mfb-text);
+  border-bottom-color: var(--mfb-accent);
+}
+.tab-button[aria-selected="true"] { font-weight: 600; }
+
+.mine-list { display: flex; flex-direction: column; gap: 10px; }
+.mine-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mine-list-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.mine-loading { color: var(--mfb-text-muted); font-size: 13px; }
+.mine-empty {
+  text-align: center;
+  padding: 24px 12px;
+  color: var(--mfb-text-muted);
+  font-size: 13px;
+}
+.mine-empty strong { display: block; color: var(--mfb-text); margin-bottom: 4px; }
+
+.mine-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 380px;
+  overflow-y: auto;
+}
+.mine-row {
+  appearance: none;
+  text-align: left;
+  background: var(--mfb-surface);
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  padding: 10px 12px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.mine-row:hover { border-color: var(--mfb-text-muted); }
+.mine-row:focus-visible {
+  outline: 2px solid var(--mfb-accent);
+  outline-offset: 2px;
+}
+.mine-row-pills { display: flex; gap: 4px; flex-wrap: wrap; }
+.mine-row-preview {
+  font-size: 13px;
+  color: var(--mfb-text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.mine-row-meta {
+  display: flex;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--mfb-text-muted);
+}
+
+.pill {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+}
+.pill-status { background: #eff6ff; color: #1e40af; border-color: #dbeafe; }
+.pill-status--in_progress { background: #fffbeb; color: #92400e; border-color: #fde68a; }
+.pill-status--awaiting_validation { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
+.pill-status--closed { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
+.pill-status--rejected, .pill-status--wontfix, .pill-status--duplicate { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
+.pill-type { background: var(--mfb-surface); color: var(--mfb-text-muted); border-color: var(--mfb-border); }
+.pill-severity { background: var(--mfb-surface); color: var(--mfb-text-muted); border-color: var(--mfb-border); }
+.pill-severity--blocker { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
+.pill-severity--high { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
+.pill-severity--medium { background: #fefce8; color: #854d0e; border-color: #fef08a; }
+.pill-severity--low { background: var(--mfb-surface); color: var(--mfb-text-muted); }
+
+.report-detail { display: flex; flex-direction: column; gap: 12px; }
+.report-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.report-detail-body { display: flex; flex-direction: column; gap: 10px; }
+.report-detail-description {
+  font-size: 14px;
+  white-space: pre-wrap;
+  margin: 0;
+}
+.report-detail-screenshot {
+  display: block;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  overflow: hidden;
+  background: #1a1a1a;
+}
+.report-detail-screenshot img {
+  display: block;
+  width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+}
+.report-detail-section {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+  margin: 8px 0 4px;
+  font-weight: 600;
+}
+.report-detail-empty {
+  font-size: 12px;
+  color: var(--mfb-text-muted);
+  margin: 0;
+}
+
+.report-comments {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.comment-bubble {
+  padding: 8px 10px;
+  border-radius: 12px;
+  max-width: 88%;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.comment-bubble.is-mine {
+  align-self: flex-end;
+  background: var(--mfb-accent);
+  color: var(--mfb-accent-contrast);
+}
+.comment-bubble.is-other {
+  align-self: flex-start;
+  background: var(--mfb-surface);
+  border: 1px solid var(--mfb-border);
+  color: var(--mfb-text);
+}
+.comment-author {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.comment-author--mcp { color: #6b21a8; }
+.comment-author--staff { color: #1e40af; }
+.comment-author--system { color: var(--mfb-text-muted); }
+.comment-body { white-space: pre-wrap; }
+.comment-time {
+  font-size: 10px;
+  margin-top: 4px;
+  opacity: 0.7;
+}
+
+.report-compose {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+.report-compose textarea {
+  font: inherit;
+  font-size: 13px;
+  padding: 8px 10px;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-surface);
+  color: inherit;
+  min-height: 64px;
+  resize: vertical;
+}
+.report-compose-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
 `;
 
 // src/widget/mount.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "preact/jsx-runtime";
 function mountWidget(options) {
   const shadow = options.host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
@@ -1507,45 +2137,113 @@ function mountWidget(options) {
   shadow.appendChild(style);
   const mountPoint = document.createElement("div");
   shadow.appendChild(mountPoint);
-  let currentState = { open: false, status: "idle" };
+  let currentState = { open: false, status: "idle", tab: "send" };
   function rerender(state) {
     currentState = state;
     render(h(Root, { state }), mountPoint);
   }
+  function clearSelected(s) {
+    const { selectedReportId: _drop, ...rest } = s;
+    void _drop;
+    return rest;
+  }
   function Root({ state }) {
     const handleSubmit = useCallback(async (values) => {
-      rerender({ open: true, status: "submitting" });
+      rerender({ ...currentState, status: "submitting" });
       try {
         await options.onSubmit(values);
-        rerender({ open: true, status: "success" });
-        setTimeout(() => rerender({ open: false, status: "idle" }), 1200);
+        rerender({ ...currentState, status: "success" });
+        setTimeout(
+          () => rerender({
+            ...currentState,
+            open: false,
+            status: "idle",
+            // After a successful submit, jump the user to "My reports" so
+            // they immediately see their just-filed report in the list
+            // (and the conversation that's about to start).
+            tab: options.api ? "mine" : "send"
+          }),
+          1200
+        );
       } catch (err) {
-        rerender({ open: true, status: "error", error: err instanceof Error ? err.message : String(err) });
+        rerender({
+          ...currentState,
+          status: "error",
+          error: err instanceof Error ? err.message : String(err)
+        });
       }
     }, []);
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      options.showFAB && /* @__PURE__ */ jsx5(
+    const externalId = options.getExternalId?.();
+    const fabVisible = options.showFAB && (options.getExternalId === void 0 ? true : Boolean(externalId));
+    const showMineTab = Boolean(options.api && externalId);
+    return /* @__PURE__ */ jsxs8(Fragment, { children: [
+      fabVisible && /* @__PURE__ */ jsx9(
         Fab,
         {
           label: options.strings["fab.label"],
           onClick: () => rerender({ ...currentState, open: true })
         }
       ),
-      state.open && /* @__PURE__ */ jsx5(
+      state.open && /* @__PURE__ */ jsxs8(
         Modal,
         {
-          onDismiss: () => rerender({ open: false, status: "idle" }),
+          onDismiss: () => rerender(clearSelected({ ...currentState, open: false, status: "idle" })),
           closeLabel: options.strings["form.close"],
-          children: /* @__PURE__ */ jsx5(
-            Form,
-            {
-              strings: options.strings,
-              onSubmit: handleSubmit,
-              onCancel: () => rerender({ open: false, status: "idle" }),
-              status: state.status,
-              ...state.error !== void 0 && { errorMessage: state.error }
-            }
-          )
+          children: [
+            showMineTab && /* @__PURE__ */ jsxs8("div", { class: "tab-strip", role: "tablist", children: [
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": state.tab === "send",
+                  class: `tab-button ${state.tab === "send" ? "is-active" : ""}`,
+                  onClick: () => rerender(clearSelected({ ...currentState, tab: "send" })),
+                  children: options.strings["tab.send"]
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": state.tab === "mine",
+                  class: `tab-button ${state.tab === "mine" ? "is-active" : ""}`,
+                  onClick: () => rerender(clearSelected({ ...currentState, tab: "mine" })),
+                  children: options.strings["tab.mine"]
+                }
+              )
+            ] }),
+            state.tab === "send" && /* @__PURE__ */ jsx9(
+              Form,
+              {
+                strings: options.strings,
+                onSubmit: handleSubmit,
+                onCancel: () => rerender({ ...currentState, open: false, status: "idle" }),
+                status: state.status,
+                ...state.error !== void 0 && { errorMessage: state.error }
+              }
+            ),
+            state.tab === "mine" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx9(
+              MineList,
+              {
+                api: options.api,
+                externalId,
+                strings: options.strings,
+                onSelect: (row) => rerender({ ...currentState, selectedReportId: row.id })
+              }
+            ),
+            state.tab === "mine" && options.api && externalId && state.selectedReportId && /* @__PURE__ */ jsx9(
+              ReportDetailView,
+              {
+                api: options.api,
+                externalId,
+                reportId: state.selectedReportId,
+                strings: options.strings,
+                onBack: () => rerender(clearSelected({ ...currentState }))
+              }
+            )
+          ]
         }
       )
     ] });
@@ -1561,6 +2259,9 @@ function mountWidget(options) {
     dispose() {
       render(null, mountPoint);
       options.host.innerHTML = "";
+    },
+    notifyIdentityChanged() {
+      rerender({ ...currentState });
     }
   };
 }
@@ -1615,6 +2316,15 @@ function createFeedback(config) {
     };
     if (screenshot) payload.screenshot = screenshot;
     if (values.synthetic) payload.synthetic = true;
+    if (user?.id !== void 0 && user.id !== null && user.id !== "") {
+      payload.user = {
+        // The host can pass `id` as a string or number; the backend
+        // stores it as an opaque string. Coerce here to a stable shape.
+        id: String(user.id),
+        ...user.email !== void 0 && { email: user.email },
+        ...user.name !== void 0 && { name: user.name }
+      };
+    }
     let finalPayload = payload;
     for (const t of transformers) finalPayload = await t(finalPayload);
     try {
@@ -1634,7 +2344,12 @@ function createFeedback(config) {
     showFAB: config.showFAB ?? true,
     onSubmit: async (values) => {
       await buildAndSubmit(values);
-    }
+    },
+    api,
+    // Keep this a callback (not a snapshot) so the mount picks up identity
+    // changes that happen after createFeedback() — `notifyIdentityChanged()`
+    // is the trigger for a re-render.
+    getExternalId: () => user?.id !== void 0 && user.id !== null && user.id !== "" ? String(user.id) : void 0
   });
   const instance = {
     show() {
@@ -1658,6 +2373,7 @@ function createFeedback(config) {
     },
     identify(u) {
       user = u;
+      handle.notifyIdentityChanged();
     },
     setMetadata(kv) {
       metadata = { ...metadata, ...kv };
@@ -1682,4 +2398,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-3RIR3JHF.mjs.map
+//# sourceMappingURL=chunk-W6JAJT2U.mjs.map