@mhosaic/feedback 0.7.2 → 0.8.0

package/dist/{chunk-2TLTE2VZ.mjs → chunk-XHK6VAU2.mjs}

@@ -30,6 +30,9 @@ function createApiClient(options) {
     if (payload.user?.id) {
       form.append("user", JSON.stringify(payload.user));
     }
+    if (payload.widget_version) {
+      form.append("widget_version", payload.widget_version);
+    }
     const response = await fetcher(`${endpoint}/api/feedback/v1/reports/`, {
       method: "POST",
       headers: { Authorization: `Bearer ${options.apiKey}` },
@@ -59,6 +62,18 @@ function createApiClient(options) {
     }
     return response.json();
   }
+  async function listChangelog(externalId) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/changelog/`,
+      { method: "GET", headers: widgetHeaders(externalId) }
+    );
+    if (response.status === 404) return [];
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`listChangelog failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
   async function getReport(reportId, externalId) {
     const response = await fetcher(
       `${endpoint}/api/feedback/v1/reports/widget/${reportId}/`,
@@ -109,7 +124,7 @@ function createApiClient(options) {
     }
     return response.json();
   }
-  return { submitReport, listMine, getReport, addComment, closeAsResolved };
+  return { submitReport, listMine, listChangelog, getReport, addComment, closeAsResolved };
 }
 
 // src/capture/urlSanitizer.ts
@@ -470,6 +485,12 @@ var DEFAULT_STRINGS = {
   "annotator.applying": "Applying\u2026",
   "tab.send": "Send",
   "tab.mine": "My reports",
+  "tab.changelog": "This week",
+  "changelog.empty.title": "Nothing resolved yet",
+  "changelog.empty.body": "Once a report you sent is fixed it will appear here, grouped by week.",
+  "changelog.week_of": "Week of {date}",
+  "changelog.resolved_one": "{count} resolved",
+  "changelog.resolved_many": "{count} resolved",
   "mine.empty.title": "No reports yet",
   "mine.empty.body": "Once you send feedback you can follow the thread here.",
   "mine.refresh": "Refresh",
@@ -477,6 +498,11 @@ var DEFAULT_STRINGS = {
   "mine.error": "Could not load your reports.",
   "mine.replies_one": "1 reply",
   "mine.replies_many": "{count} replies",
+  "mine.filter.empty": "No reports match this filter.",
+  "kpi.new": "New",
+  "kpi.in_progress": "In progress",
+  "kpi.awaiting_validation": "Awaiting you",
+  "kpi.resolution_rate": "Resolution rate",
   "detail.back": "Back",
   "detail.thread": "Conversation",
   "detail.no_replies": "No replies yet \u2014 we\u2019ll let you know when an operator responds.",
@@ -495,6 +521,18 @@ var DEFAULT_STRINGS = {
   "detail.author.staff": "Operator",
   "detail.author.mcp": "Mhosaic Team",
   "detail.author.system": "System",
+  "detail.tech.title": "What we received",
+  "detail.tech.errors_one": "error",
+  "detail.tech.errors_many": "errors",
+  "detail.tech.device": "Device",
+  "detail.tech.device.viewport": "Viewport",
+  "detail.tech.device.platform": "Platform",
+  "detail.tech.device.language": "Language",
+  "detail.tech.device.timezone": "Timezone",
+  "detail.tech.device.connection": "Connection",
+  "detail.tech.errors": "Runtime errors",
+  "detail.tech.console": "Console (last 20)",
+  "detail.tech.network": "Network (last 15)",
   "status.new": "New",
   "status.in_progress": "In progress",
   "status.awaiting_validation": "Awaiting your validation",
@@ -549,6 +587,12 @@ var FRENCH_STRINGS = {
   "annotator.applying": "Application\u2026",
   "tab.send": "Envoyer",
   "tab.mine": "Mes rapports",
+  "tab.changelog": "Cette semaine",
+  "changelog.empty.title": "Rien de r\xE9solu pour l\u2019instant",
+  "changelog.empty.body": "Quand un rapport que vous avez envoy\xE9 est corrig\xE9, il appara\xEEtra ici, regroup\xE9 par semaine.",
+  "changelog.week_of": "Semaine du {date}",
+  "changelog.resolved_one": "{count} r\xE9solu",
+  "changelog.resolved_many": "{count} r\xE9solus",
   "mine.empty.title": "Aucun rapport",
   "mine.empty.body": "Apr\xE8s votre premier envoi vous pourrez suivre la conversation ici.",
   "mine.refresh": "Actualiser",
@@ -556,6 +600,11 @@ var FRENCH_STRINGS = {
   "mine.error": "Impossible de charger vos rapports.",
   "mine.replies_one": "1 r\xE9ponse",
   "mine.replies_many": "{count} r\xE9ponses",
+  "mine.filter.empty": "Aucun rapport ne correspond \xE0 ce filtre.",
+  "kpi.new": "Nouveau",
+  "kpi.in_progress": "En cours",
+  "kpi.awaiting_validation": "\xC0 valider",
+  "kpi.resolution_rate": "Taux de r\xE9solution",
   "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.",
@@ -574,6 +623,18 @@ var FRENCH_STRINGS = {
   "detail.author.staff": "Op\xE9rateur",
   "detail.author.mcp": "\xC9quipe Mhosaic",
   "detail.author.system": "Syst\xE8me",
+  "detail.tech.title": "Ce que nous avons re\xE7u",
+  "detail.tech.errors_one": "erreur",
+  "detail.tech.errors_many": "erreurs",
+  "detail.tech.device": "Appareil",
+  "detail.tech.device.viewport": "Fen\xEAtre",
+  "detail.tech.device.platform": "Plateforme",
+  "detail.tech.device.language": "Langue",
+  "detail.tech.device.timezone": "Fuseau horaire",
+  "detail.tech.device.connection": "Connexion",
+  "detail.tech.errors": "Erreurs d\u2019ex\xE9cution",
+  "detail.tech.console": "Console (20 derniers)",
+  "detail.tech.network": "R\xE9seau (15 derniers)",
   "status.new": "Nouveau",
   "status.in_progress": "En cours",
   "status.awaiting_validation": "En attente de validation",
@@ -603,10 +664,162 @@ function resolveStrings(overrides, options = {}) {
 import { h, render } from "preact";
 import { useCallback } from "preact/hooks";
 
+// src/widget/ChangelogList.tsx
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+// src/widget/ReportRow.tsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+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__ */ jsxs("button", { type: "button", class: "mine-row", onClick, children: [
+    /* @__PURE__ */ jsxs("div", { class: "mine-row-pills", children: [
+      /* @__PURE__ */ jsx("span", { class: statusClassName(row.status), children: strings[`status.${row.status}`] ?? row.status }),
+      /* @__PURE__ */ jsx("span", { class: typeClassName(), children: strings[`type.${row.feedback_type}`] }),
+      /* @__PURE__ */ jsx("span", { class: severityClassName(row.severity), children: strings[`severity.${row.severity}`] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { class: "mine-row-preview", children: preview }),
+    /* @__PURE__ */ jsxs("div", { class: "mine-row-meta", children: [
+      /* @__PURE__ */ jsx("span", { children: formatRelative(row.updated_at || row.created_at) }),
+      row.comment_count > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        "\xB7 ",
+        repliesLabel(row.comment_count, strings)
+      ] })
+    ] })
+  ] });
+}
+
+// src/widget/ChangelogList.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var POLL_MS = 3e4;
+function isoWeekKey(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const day = (d.getUTCDay() + 6) % 7;
+  const monday = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate() - day));
+  return monday.toISOString().slice(0, 10);
+}
+function groupRowsByWeek(rows) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const key = isoWeekKey(row.resolved_at);
+    if (!key) continue;
+    const existing = buckets.get(key);
+    if (existing) existing.push(row);
+    else buckets.set(key, [row]);
+  }
+  return Array.from(buckets.entries()).sort(([a], [b]) => a < b ? 1 : -1).map(([weekKey, weekRows]) => ({
+    weekKey,
+    label: formatWeekLabel(weekKey),
+    rows: weekRows
+  }));
+}
+function formatWeekLabel(weekKey) {
+  try {
+    return new Date(weekKey).toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return weekKey;
+  }
+}
+function ChangelogList({ api, externalId, strings, onSelect }) {
+  const [rows, setRows] = useState(null);
+  const [error, setError] = useState(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const mountedRef = useRef(true);
+  const fetchRows = async () => {
+    setRefreshing(true);
+    setError(null);
+    try {
+      const next = await api.listChangelog(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);
+    }
+  };
+  useEffect(() => {
+    mountedRef.current = true;
+    void fetchRows();
+    const timer = setInterval(() => {
+      void fetchRows();
+    }, POLL_MS);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(timer);
+    };
+  }, [externalId]);
+  const groups = useMemo(() => rows ? groupRowsByWeek(rows) : [], [rows]);
+  const isLoading = rows === null && !error;
+  const isEmpty = rows !== null && rows.length === 0;
+  return /* @__PURE__ */ jsxs2("div", { class: "mine-list", children: [
+    /* @__PURE__ */ jsxs2("div", { class: "mine-list-header", children: [
+      /* @__PURE__ */ jsx2("h2", { children: strings["tab.changelog"] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          onClick: () => {
+            void fetchRows();
+          },
+          disabled: refreshing,
+          children: refreshing ? strings["mine.loading"] : strings["mine.refresh"]
+        }
+      )
+    ] }),
+    isLoading && /* @__PURE__ */ jsx2("div", { class: "mine-loading", children: strings["mine.loading"] }),
+    error && /* @__PURE__ */ jsx2("div", { class: "error", children: error }),
+    isEmpty && /* @__PURE__ */ jsxs2("div", { class: "mine-empty", children: [
+      /* @__PURE__ */ jsx2("strong", { children: strings["changelog.empty.title"] }),
+      /* @__PURE__ */ jsx2("p", { children: strings["changelog.empty.body"] })
+    ] }),
+    groups.length > 0 && /* @__PURE__ */ jsx2("div", { class: "changelog-groups", children: groups.map((g) => /* @__PURE__ */ jsxs2("section", { class: "changelog-group", children: [
+      /* @__PURE__ */ jsxs2("header", { class: "changelog-group-header", children: [
+        /* @__PURE__ */ jsx2("span", { class: "changelog-group-marker", "aria-hidden": "true", children: "\u25CF" }),
+        /* @__PURE__ */ jsx2("span", { class: "changelog-group-label", children: strings["changelog.week_of"].replace("{date}", g.label) }),
+        /* @__PURE__ */ jsx2("span", { class: "changelog-group-rule", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx2("span", { class: "changelog-group-count", children: strings[g.rows.length === 1 ? "changelog.resolved_one" : "changelog.resolved_many"].replace("{count}", String(g.rows.length)) })
+      ] }),
+      /* @__PURE__ */ jsx2("ul", { class: "mine-rows", children: g.rows.map((row) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(ReportRow, { row, strings, onClick: () => onSelect(row) }) })) })
+    ] }, g.weekKey)) })
+  ] });
+}
+
 // src/widget/Fab.tsx
-import { jsx } from "preact/jsx-runtime";
+import { jsx as jsx3 } from "preact/jsx-runtime";
 function ChatBubbleIcon() {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       width: "24",
@@ -615,7 +828,7 @@ function ChatBubbleIcon() {
       fill: "none",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx3(
         "path",
         {
           d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z",
@@ -626,15 +839,15 @@ function ChatBubbleIcon() {
   );
 }
 function Fab({ label, onClick }) {
-  return /* @__PURE__ */ jsx("button", { type: "button", class: "fab", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsx(ChatBubbleIcon, {}) });
+  return /* @__PURE__ */ jsx3("button", { type: "button", class: "fab", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsx3(ChatBubbleIcon, {}) });
 }
 
 // src/widget/Form.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "preact/hooks";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "preact/hooks";
 
 // src/widget/Annotator.tsx
-import { useEffect, useRef, useState } from "preact/hooks";
-import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "preact/hooks";
+import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 var COLORS = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#ffffff"];
 function drawShape(ctx, shape) {
   ctx.save();
@@ -693,27 +906,27 @@ function drawArrow(ctx, x1, y1, x2, y2) {
   ctx.fill();
 }
 var Icon = {
-  rect: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "12", height: "10", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }) }),
-  arrow: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
-  pencil: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }) }),
-  text: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 3h10M8 3v10M5 13h6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }),
-  undo: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M4 7l3-3M4 7l3 3M4 7h6a3 3 0 0 1 0 6H7", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
-  trash: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M3 4h10M6 4V2.5h4V4M5 4l.5 9h5L11 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
-  close: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M4 4l8 8M12 4l-8 8", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) })
+  rect: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("rect", { x: "2", y: "3", width: "12", height: "10", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }) }),
+  arrow: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  pencil: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }) }),
+  text: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M3 3h10M8 3v10M5 13h6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }),
+  undo: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M4 7l3-3M4 7l3 3M4 7h6a3 3 0 0 1 0 6H7", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  trash: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M3 4h10M6 4V2.5h4V4M5 4l.5 9h5L11 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  close: /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M4 4l8 8M12 4l-8 8", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) })
 };
 function Annotator({ imageBlob, strings, onSave, onCancel }) {
-  const canvasRef = useRef(null);
-  const containerRef = useRef(null);
-  const imageRef = useRef(null);
-  const [tool, setTool] = useState("rectangle");
-  const [color, setColor] = useState(COLORS[0]);
-  const [shapes, setShapes] = useState([]);
-  const isDrawingRef = useRef(false);
-  const [draftShape, setDraftShape] = useState(null);
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const scaleRef = useRef(1);
-  useEffect(() => {
+  const canvasRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const imageRef = useRef2(null);
+  const [tool, setTool] = useState2("rectangle");
+  const [color, setColor] = useState2(COLORS[0]);
+  const [shapes, setShapes] = useState2([]);
+  const isDrawingRef = useRef2(false);
+  const [draftShape, setDraftShape] = useState2(null);
+  const [imageLoaded, setImageLoaded] = useState2(false);
+  const [saving, setSaving] = useState2(false);
+  const scaleRef = useRef2(1);
+  useEffect2(() => {
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
@@ -723,7 +936,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
-  useEffect(() => {
+  useEffect2(() => {
     const url = URL.createObjectURL(imageBlob);
     const img = new Image();
     img.onload = () => {
@@ -733,7 +946,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     img.src = url;
     return () => URL.revokeObjectURL(url);
   }, [imageBlob]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!imageLoaded || !canvasRef.current || !imageRef.current || !containerRef.current) {
       return;
     }
@@ -750,7 +963,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     canvas.style.height = `${img.height * fitScale}px`;
     redraw();
   }, [imageLoaded]);
-  useEffect(() => {
+  useEffect2(() => {
     redraw();
   }, [shapes, draftShape]);
   function redraw() {
@@ -846,7 +1059,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     { id: "freehand", icon: Icon.pencil, label: strings["annotator.tool.freehand"] },
     { id: "text", icon: Icon.text, label: strings["annotator.tool.text"] }
   ];
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       class: "annotator-backdrop",
@@ -854,10 +1067,10 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
       onClick: (e) => {
         if (e.target === e.currentTarget) onCancel();
       },
-      children: /* @__PURE__ */ jsxs("div", { class: "annotator", role: "dialog", "aria-modal": "true", "aria-label": strings["annotator.title"], children: [
-        /* @__PURE__ */ jsxs("div", { class: "annotator-header", children: [
-          /* @__PURE__ */ jsx2("span", { children: strings["annotator.title"] }),
-          /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsxs3("div", { class: "annotator", role: "dialog", "aria-modal": "true", "aria-label": strings["annotator.title"], children: [
+        /* @__PURE__ */ jsxs3("div", { class: "annotator-header", children: [
+          /* @__PURE__ */ jsx4("span", { children: strings["annotator.title"] }),
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -868,8 +1081,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { class: "annotator-toolbar", children: [
-          /* @__PURE__ */ jsx2("div", { class: "annotator-tools", children: tools.map((t) => /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { class: "annotator-toolbar", children: [
+          /* @__PURE__ */ jsx4("div", { class: "annotator-tools", children: tools.map((t) => /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -882,8 +1095,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             },
             t.id
           )) }),
-          /* @__PURE__ */ jsx2("span", { class: "annotator-sep" }),
-          /* @__PURE__ */ jsx2("div", { class: "annotator-colors", children: COLORS.map((c) => /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsx4("div", { class: "annotator-colors", children: COLORS.map((c) => /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -895,8 +1108,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             },
             c
           )) }),
-          /* @__PURE__ */ jsx2("span", { class: "annotator-sep" }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
@@ -905,11 +1118,11 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               disabled: shapes.length === 0,
               children: [
                 Icon.undo,
-                /* @__PURE__ */ jsx2("span", { children: strings["annotator.undo"] })
+                /* @__PURE__ */ jsx4("span", { children: strings["annotator.undo"] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
@@ -918,18 +1131,18 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               disabled: shapes.length === 0,
               children: [
                 Icon.trash,
-                /* @__PURE__ */ jsx2("span", { children: strings["annotator.clear"] })
+                /* @__PURE__ */ jsx4("span", { children: strings["annotator.clear"] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx2("span", { class: "annotator-spacer" }),
-          /* @__PURE__ */ jsxs("span", { class: "annotator-count", children: [
+          /* @__PURE__ */ jsx4("span", { class: "annotator-spacer" }),
+          /* @__PURE__ */ jsxs3("span", { class: "annotator-count", children: [
             shapes.length,
             " ",
             strings["annotator.count_suffix"]
           ] })
         ] }),
-        /* @__PURE__ */ jsx2("div", { ref: containerRef, class: "annotator-canvas-wrap", children: !imageLoaded ? /* @__PURE__ */ jsx2("span", { class: "annotator-loading", children: strings["annotator.loading"] }) : /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4("div", { ref: containerRef, class: "annotator-canvas-wrap", children: !imageLoaded ? /* @__PURE__ */ jsx4("span", { class: "annotator-loading", children: strings["annotator.loading"] }) : /* @__PURE__ */ jsx4(
           "canvas",
           {
             ref: canvasRef,
@@ -940,9 +1153,9 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             class: "annotator-canvas"
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { class: "annotator-footer", children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", class: "btn", onClick: onCancel, children: strings["form.cancel"] }),
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { class: "annotator-footer", children: [
+          /* @__PURE__ */ jsx4("button", { type: "button", class: "btn", onClick: onCancel, children: strings["form.cancel"] }),
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -984,24 +1197,24 @@ function truncateUrl(url, maxLength = 80) {
 }
 
 // src/widget/Form.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
 var TYPES = ["bug", "feature", "question", "praise", "typo"];
 var SEVERITIES = ["blocker", "high", "medium", "low"];
 function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
-  const [description, setDescription] = useState2("");
-  const [feedbackType, setFeedbackType] = useState2("bug");
-  const [severity, setSeverity] = useState2("medium");
-  const [localError, setLocalError] = useState2("");
-  const [screenshotBlob, setScreenshotBlob] = useState2(null);
-  const [screenshotPreview, setScreenshotPreview] = useState2(null);
-  const [isDragOver, setIsDragOver] = useState2(false);
-  const [annotatorOpen, setAnnotatorOpen] = useState2(false);
-  const fileInputRef = useRef2(null);
-  const dropZoneRef = useRef2(null);
+  const [description, setDescription] = useState3("");
+  const [feedbackType, setFeedbackType] = useState3("bug");
+  const [severity, setSeverity] = useState3("medium");
+  const [localError, setLocalError] = useState3("");
+  const [screenshotBlob, setScreenshotBlob] = useState3(null);
+  const [screenshotPreview, setScreenshotPreview] = useState3(null);
+  const [isDragOver, setIsDragOver] = useState3(false);
+  const [annotatorOpen, setAnnotatorOpen] = useState3(false);
+  const fileInputRef = useRef3(null);
+  const dropZoneRef = useRef3(null);
   const submitting = status === "submitting";
   const submitLabel = submitting ? strings["form.submitting"] : strings["form.submit"];
   const pageUrl = typeof window !== "undefined" ? window.location.href : "";
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     };
@@ -1049,7 +1262,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     const file = e.dataTransfer?.files?.[0];
     if (file) acceptFile(file);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const zone = dropZoneRef.current;
     if (!zone) return;
     const onPaste = (e) => {
@@ -1090,11 +1303,11 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     if (screenshotBlob) values.screenshot = screenshotBlob;
     onSubmit(values);
   };
-  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx3("h2", { children: strings["form.title"] }),
-    /* @__PURE__ */ jsxs2("div", { class: "field", children: [
-      /* @__PURE__ */ jsx3("label", { for: "mfb-desc", children: strings["form.description.label"] }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx5("h2", { children: strings["form.title"] }),
+    /* @__PURE__ */ jsxs4("div", { class: "field", children: [
+      /* @__PURE__ */ jsx5("label", { for: "mfb-desc", children: strings["form.description.label"] }),
+      /* @__PURE__ */ jsx5(
         "textarea",
         {
           id: "mfb-desc",
@@ -1104,35 +1317,35 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { class: "row", children: [
-      /* @__PURE__ */ jsxs2("div", { class: "field", children: [
-        /* @__PURE__ */ jsx3("label", { for: "mfb-type", children: strings["form.type.label"] }),
-        /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("div", { class: "row", children: [
+      /* @__PURE__ */ jsxs4("div", { class: "field", children: [
+        /* @__PURE__ */ jsx5("label", { for: "mfb-type", children: strings["form.type.label"] }),
+        /* @__PURE__ */ jsx5(
           "select",
           {
             id: "mfb-type",
             value: feedbackType,
             onChange: (e) => setFeedbackType(e.target.value),
-            children: TYPES.map((t) => /* @__PURE__ */ jsx3("option", { value: t, children: strings[`type.${t}`] }))
+            children: TYPES.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: strings[`type.${t}`] }))
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { class: "field", children: [
-        /* @__PURE__ */ jsx3("label", { for: "mfb-sev", children: strings["form.severity.label"] }),
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("div", { class: "field", children: [
+        /* @__PURE__ */ jsx5("label", { for: "mfb-sev", children: strings["form.severity.label"] }),
+        /* @__PURE__ */ jsx5(
           "select",
           {
             id: "mfb-sev",
             value: severity,
             onChange: (e) => setSeverity(e.target.value),
-            children: SEVERITIES.map((s) => /* @__PURE__ */ jsx3("option", { value: s, children: strings[`severity.${s}`] }))
+            children: SEVERITIES.map((s) => /* @__PURE__ */ jsx5("option", { value: s, children: strings[`severity.${s}`] }))
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { class: "field", children: [
-      /* @__PURE__ */ jsx3("label", { children: strings["form.screenshot.label"] }),
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("div", { class: "field", children: [
+      /* @__PURE__ */ jsx5("label", { children: strings["form.screenshot.label"] }),
+      /* @__PURE__ */ jsx5(
         "input",
         {
           ref: fileInputRef,
@@ -1144,9 +1357,9 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           tabIndex: -1
         }
       ),
-      screenshotPreview ? /* @__PURE__ */ jsxs2("div", { class: "screenshot-preview", children: [
-        /* @__PURE__ */ jsx3("img", { src: screenshotPreview, alt: "" }),
-        /* @__PURE__ */ jsx3(
+      screenshotPreview ? /* @__PURE__ */ jsxs4("div", { class: "screenshot-preview", children: [
+        /* @__PURE__ */ jsx5("img", { src: screenshotPreview, alt: "" }),
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1156,7 +1369,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
             children: "\xD7"
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1165,7 +1378,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
             children: strings["form.screenshot.annotate"]
           }
         )
-      ] }) : /* @__PURE__ */ jsxs2(
+      ] }) : /* @__PURE__ */ jsxs4(
         "div",
         {
           ref: dropZoneRef,
@@ -1184,28 +1397,28 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           onDragLeave: handleDragLeave,
           onDrop: handleDrop,
           children: [
-            /* @__PURE__ */ jsxs2("div", { class: "screenshot-cta", children: [
-              /* @__PURE__ */ jsx3("strong", { children: strings["form.screenshot.cta_click"] }),
+            /* @__PURE__ */ jsxs4("div", { class: "screenshot-cta", children: [
+              /* @__PURE__ */ jsx5("strong", { children: strings["form.screenshot.cta_click"] }),
               ", ",
               strings["form.screenshot.cta_rest"]
             ] }),
-            /* @__PURE__ */ jsx3("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
+            /* @__PURE__ */ jsx5("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
           ]
         }
       )
     ] }),
-    pageUrl && /* @__PURE__ */ jsxs2("div", { class: "page-context", title: pageUrl, children: [
-      /* @__PURE__ */ jsx3("span", { class: "page-context-label", children: strings["form.context.label"] }),
-      /* @__PURE__ */ jsx3("span", { class: "page-context-url", children: truncateUrl(pageUrl, 90) })
+    pageUrl && /* @__PURE__ */ jsxs4("div", { class: "page-context", title: pageUrl, children: [
+      /* @__PURE__ */ jsx5("span", { class: "page-context-label", children: strings["form.context.label"] }),
+      /* @__PURE__ */ jsx5("span", { class: "page-context-url", children: truncateUrl(pageUrl, 90) })
     ] }),
-    localError && /* @__PURE__ */ jsx3("div", { class: "error", children: localError }),
-    status === "error" && errorMessage && /* @__PURE__ */ jsx3("div", { class: "error", children: errorMessage }),
-    status === "success" && /* @__PURE__ */ jsx3("div", { class: "success", children: strings["form.success"] }),
-    /* @__PURE__ */ jsxs2("div", { class: "actions", children: [
-      /* @__PURE__ */ jsx3("button", { type: "button", class: "btn", onClick: onCancel, disabled: submitting, children: strings["form.cancel"] }),
-      /* @__PURE__ */ jsx3("button", { type: "submit", class: "btn btn--primary", disabled: submitting, children: submitLabel })
+    localError && /* @__PURE__ */ jsx5("div", { class: "error", children: localError }),
+    status === "error" && errorMessage && /* @__PURE__ */ jsx5("div", { class: "error", children: errorMessage }),
+    status === "success" && /* @__PURE__ */ jsx5("div", { class: "success", children: strings["form.success"] }),
+    /* @__PURE__ */ jsxs4("div", { class: "actions", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", class: "btn", onClick: onCancel, disabled: submitting, children: strings["form.cancel"] }),
+      /* @__PURE__ */ jsx5("button", { type: "submit", class: "btn btn--primary", disabled: submitting, children: submitLabel })
     ] }),
-    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx3(
+    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx5(
       Annotator,
       {
         imageBlob: screenshotBlob,
@@ -1218,62 +1431,104 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
 }
 
 // src/widget/MineList.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "preact/hooks";
 
-// src/widget/ReportRow.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
-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`;
+// src/widget/KpiStrip.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
+function computeKpiCounts(rows) {
+  const counts = {
+    new: 0,
+    in_progress: 0,
+    awaiting_validation: 0,
+    resolved: 0,
+    total: 0
+  };
+  for (const row of rows) {
+    counts.total += 1;
+    switch (row.status) {
+      case "new":
+        counts.new += 1;
+        break;
+      case "in_progress":
+        counts.in_progress += 1;
+        break;
+      case "awaiting_validation":
+        counts.awaiting_validation += 1;
+        break;
+      case "closed":
+      case "rejected":
+      case "duplicate":
+      case "wontfix":
+        counts.resolved += 1;
+        break;
+    }
+  }
+  return counts;
 }
-function repliesLabel(count, strings) {
-  if (count === 1) return strings["mine.replies_one"];
-  return strings["mine.replies_many"].replace("{count}", String(count));
+function computeResolutionRate(counts) {
+  if (counts.total === 0) return null;
+  return Math.round(
+    (counts.awaiting_validation + counts.resolved) / counts.total * 100
+  );
 }
-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)
-      ] })
-    ] })
-  ] });
+var FILTER_FOR_STATUS = {
+  new: "new",
+  in_progress: "in_progress",
+  awaiting_validation: "awaiting_validation",
+  closed: "resolved",
+  rejected: "resolved",
+  duplicate: "resolved",
+  wontfix: "resolved"
+};
+function rowsMatchingFilter(rows, filter) {
+  if (filter === "all") return rows;
+  return rows.filter((r) => FILTER_FOR_STATUS[r.status] === filter);
+}
+function KpiStrip({ rows, filter, onFilter, strings }) {
+  const counts = computeKpiCounts(rows);
+  const resolutionRate = computeResolutionRate(counts);
+  const cells = [
+    { key: "new", label: strings["kpi.new"], value: String(counts.new) },
+    { key: "in_progress", label: strings["kpi.in_progress"], value: String(counts.in_progress) },
+    {
+      key: "awaiting_validation",
+      label: strings["kpi.awaiting_validation"],
+      value: String(counts.awaiting_validation)
+    },
+    {
+      key: "resolved",
+      label: strings["kpi.resolution_rate"],
+      value: resolutionRate === null ? "\u2014" : `${resolutionRate}%`
+    }
+  ];
+  return /* @__PURE__ */ jsx6("div", { class: "kpi-strip", role: "toolbar", children: cells.map((c) => {
+    const active = filter === c.key;
+    const toggleTo = active ? "all" : c.key;
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        class: `kpi-cell kpi-cell--${c.key}${active ? " is-active" : ""}`,
+        onClick: () => onFilter(toggleTo),
+        "aria-pressed": active,
+        children: [
+          /* @__PURE__ */ jsx6("span", { class: "kpi-value", children: c.value }),
+          /* @__PURE__ */ jsx6("span", { class: "kpi-label", children: c.label })
+        ]
+      }
+    );
+  }) });
 }
 
 // src/widget/MineList.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
-var POLL_MS = 3e4;
+import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
+var POLL_MS2 = 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 [rows, setRows] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [refreshing, setRefreshing] = useState4(false);
+  const [filter, setFilter] = useState4("all");
+  const mountedRef = useRef4(true);
   const fetchRows = async () => {
     setRefreshing(true);
     setError(null);
@@ -1288,12 +1543,12 @@ function MineList({ api, externalId, strings, onSelect }) {
       if (mountedRef.current) setRefreshing(false);
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     mountedRef.current = true;
     void fetchRows();
     const timer = setInterval(() => {
       void fetchRows();
-    }, POLL_MS);
+    }, POLL_MS2);
     return () => {
       mountedRef.current = false;
       clearInterval(timer);
@@ -1301,10 +1556,12 @@ function MineList({ api, externalId, strings, onSelect }) {
   }, [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(
+  const visibleRows = rows ? rowsMatchingFilter(rows, filter) : null;
+  const visibleEmpty = !!rows && rows.length > 0 && (visibleRows?.length ?? 0) === 0;
+  return /* @__PURE__ */ jsxs6("div", { class: "mine-list", children: [
+    /* @__PURE__ */ jsxs6("div", { class: "mine-list-header", children: [
+      /* @__PURE__ */ jsx7("h2", { children: strings["tab.mine"] }),
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1317,23 +1574,25 @@ function MineList({ api, externalId, strings, onSelect }) {
         }
       )
     ] }),
-    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__ */ jsx7(KpiStrip, { rows, filter, onFilter: setFilter, strings }),
+    isLoading && /* @__PURE__ */ jsx7("div", { class: "mine-loading", children: strings["mine.loading"] }),
+    error && /* @__PURE__ */ jsx7("div", { class: "error", children: error }),
+    isEmpty && /* @__PURE__ */ jsxs6("div", { class: "mine-empty", children: [
+      /* @__PURE__ */ jsx7("strong", { children: strings["mine.empty.title"] }),
+      /* @__PURE__ */ jsx7("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) }) })) })
+    visibleEmpty && /* @__PURE__ */ jsx7("div", { class: "mine-empty", children: /* @__PURE__ */ jsx7("p", { children: strings["mine.filter.empty"] }) }),
+    visibleRows && visibleRows.length > 0 && /* @__PURE__ */ jsx7("ul", { class: "mine-rows", children: visibleRows.map((row) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(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";
+import { useEffect as useEffect5, useRef as useRef5 } from "preact/hooks";
+import { jsx as jsx8, jsxs as jsxs7 } from "preact/jsx-runtime";
 function Modal({ onDismiss, children, closeLabel = "Close" }) {
-  const modalRef = useRef4(null);
-  const previouslyFocused = useRef4(null);
-  useEffect4(() => {
+  const modalRef = useRef5(null);
+  const previouslyFocused = useRef5(null);
+  useEffect5(() => {
     previouslyFocused.current = document.activeElement;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -1355,7 +1614,7 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
       if (prev && typeof prev.focus === "function") prev.focus();
     };
   }, [onDismiss]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       class: "backdrop",
@@ -1363,8 +1622,8 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
       onClick: (e) => {
         if (e.target === e.currentTarget) onDismiss();
       },
-      children: /* @__PURE__ */ jsxs5("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
-        /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsxs7("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -1381,10 +1640,10 @@ function Modal({ onDismiss, children, closeLabel = "Close" }) {
 }
 
 // src/widget/ReportDetailView.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "preact/hooks";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "preact/hooks";
 
 // src/widget/CommentBubble.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "preact/jsx-runtime";
 function CommentBubble({ comment, strings }) {
   const isMine = comment.is_mine;
   const isAgent = !isMine && comment.author_source === "mcp";
@@ -1392,10 +1651,10 @@ function CommentBubble({ comment, strings }) {
   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) })
+  return /* @__PURE__ */ jsxs8("div", { class: `comment-bubble ${isMine ? "is-mine" : "is-other"}`, children: [
+    !isMine && label && /* @__PURE__ */ jsx9("div", { class: `comment-author comment-author--${variant}`, children: label }),
+    /* @__PURE__ */ jsx9("div", { class: "comment-body", children: comment.body }),
+    /* @__PURE__ */ jsx9("div", { class: "comment-time", children: formatTime(comment.created_at) })
   ] });
 }
 function formatTime(iso) {
@@ -1410,8 +1669,8 @@ function formatTime(iso) {
 }
 
 // src/widget/ReportDetailView.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "preact/jsx-runtime";
-var POLL_MS2 = 3e4;
+import { Fragment, jsx as jsx10, jsxs as jsxs9 } from "preact/jsx-runtime";
+var POLL_MS3 = 3e4;
 function ReportDetailView({
   api,
   externalId,
@@ -1419,12 +1678,12 @@ function ReportDetailView({
   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 [detail, setDetail] = useState5(null);
+  const [error, setError] = useState5(null);
+  const [composeBody, setComposeBody] = useState5("");
+  const [sending, setSending] = useState5(false);
+  const [closing, setClosing] = useState5(false);
+  const mountedRef = useRef6(true);
   const fetchDetail = async () => {
     try {
       const next = await api.getReport(reportId, externalId);
@@ -1436,12 +1695,12 @@ function ReportDetailView({
       setError(err instanceof Error ? err.message : "load_failed");
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     mountedRef.current = true;
     void fetchDetail();
     const timer = setInterval(() => {
       void fetchDetail();
-    }, POLL_MS2);
+    }, POLL_MS3);
     return () => {
       mountedRef.current = false;
       clearInterval(timer);
@@ -1481,37 +1740,39 @@ function ReportDetailView({
     }
   };
   if (!detail && !error) {
-    return /* @__PURE__ */ jsx8("div", { class: "mine-loading", children: strings["mine.loading"] });
+    return /* @__PURE__ */ jsx10("div", { class: "mine-loading", children: strings["mine.loading"] });
   }
   if (!detail) {
-    return /* @__PURE__ */ jsx8("div", { class: "error", role: "alert", children: error });
+    return /* @__PURE__ */ jsx10("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: [
+  return /* @__PURE__ */ jsxs9("div", { class: "report-detail", children: [
+    /* @__PURE__ */ jsxs9("div", { class: "report-detail-header", children: [
+      /* @__PURE__ */ jsxs9("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__ */ jsx10("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(ContextBlock, { detail, strings }),
-      /* @__PURE__ */ jsx8("p", { class: "report-detail-description", children: detail.description }),
-      detail.screenshot_url && /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs9("div", { class: "report-detail-body", children: [
+      /* @__PURE__ */ jsx10(ContextBlock, { detail, strings }),
+      /* @__PURE__ */ jsx10("p", { class: "report-detail-description", children: detail.description }),
+      detail.screenshot_url && /* @__PURE__ */ jsx10(
         "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" })
+          children: /* @__PURE__ */ jsx10("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(
+      /* @__PURE__ */ jsx10("h3", { class: "report-detail-section", children: strings["detail.thread"] }),
+      detail.comments.length === 0 ? /* @__PURE__ */ jsx10("p", { class: "report-detail-empty", children: strings["detail.no_replies"] }) : /* @__PURE__ */ jsx10("ul", { class: "report-comments", children: detail.comments.map((c) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(CommentBubble, { comment: c, strings }) })) }),
+      detail.status_history && detail.status_history.length > 0 && /* @__PURE__ */ jsx10(StatusHistorySection, { rows: detail.status_history, strings }),
+      detail.technical_context && /* @__PURE__ */ jsx10(TechnicalContextDrawer, { ctx: detail.technical_context, strings }),
+      /* @__PURE__ */ jsxs9("div", { class: "report-compose", children: [
+        /* @__PURE__ */ jsx10(
           "textarea",
           {
             value: composeBody,
@@ -1520,8 +1781,8 @@ function ReportDetailView({
             disabled: sending
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { class: "report-compose-actions", children: [
-          showCloseCta && /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs9("div", { class: "report-compose-actions", children: [
+          showCloseCta && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1531,7 +1792,7 @@ function ReportDetailView({
               children: closing ? strings["detail.close_busy"] : strings["detail.close_cta"]
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1543,7 +1804,7 @@ function ReportDetailView({
           )
         ] })
       ] }),
-      error && /* @__PURE__ */ jsx8("div", { class: "error", children: error })
+      error && /* @__PURE__ */ jsx10("div", { class: "error", children: error })
     ] })
   ] });
 }
@@ -1554,19 +1815,19 @@ function appendComment(current, next) {
 function ContextBlock({ detail, strings }) {
   const captureKey = `detail.context.capture.${detail.capture_method}`;
   const captureLabel = strings[captureKey] ?? detail.capture_method;
-  return /* @__PURE__ */ jsxs7("div", { class: "report-detail-context", children: [
-    /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-pills", children: [
-      /* @__PURE__ */ jsx8("span", { class: "pill pill-type", children: strings[`type.${detail.feedback_type}`] }),
-      /* @__PURE__ */ jsx8("span", { class: `pill pill-severity pill-severity--${detail.severity}`, children: strings[`severity.${detail.severity}`] }),
-      /* @__PURE__ */ jsx8("span", { class: "pill pill-capture", children: captureLabel })
+  return /* @__PURE__ */ jsxs9("div", { class: "report-detail-context", children: [
+    /* @__PURE__ */ jsxs9("div", { class: "report-detail-context-pills", children: [
+      /* @__PURE__ */ jsx10("span", { class: "pill pill-type", children: strings[`type.${detail.feedback_type}`] }),
+      /* @__PURE__ */ jsx10("span", { class: `pill pill-severity pill-severity--${detail.severity}`, children: strings[`severity.${detail.severity}`] }),
+      /* @__PURE__ */ jsx10("span", { class: "pill pill-capture", children: captureLabel })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-line", children: [
-      /* @__PURE__ */ jsx8("span", { class: "report-detail-context-label", children: strings["detail.context.submitted_at"] }),
-      /* @__PURE__ */ jsx8("span", { children: formatSubmittedAt(detail.created_at) })
+    /* @__PURE__ */ jsxs9("div", { class: "report-detail-context-line", children: [
+      /* @__PURE__ */ jsx10("span", { class: "report-detail-context-label", children: strings["detail.context.submitted_at"] }),
+      /* @__PURE__ */ jsx10("span", { children: formatSubmittedAt(detail.created_at) })
     ] }),
-    detail.page_url && /* @__PURE__ */ jsxs7("div", { class: "report-detail-context-line", title: detail.page_url, children: [
-      /* @__PURE__ */ jsx8("span", { class: "report-detail-context-label", children: strings["detail.context.page"] }),
-      /* @__PURE__ */ jsx8(
+    detail.page_url && /* @__PURE__ */ jsxs9("div", { class: "report-detail-context-line", title: detail.page_url, children: [
+      /* @__PURE__ */ jsx10("span", { class: "report-detail-context-label", children: strings["detail.context.page"] }),
+      /* @__PURE__ */ jsx10(
         "a",
         {
           class: "report-detail-context-url",
@@ -1589,6 +1850,120 @@ function formatSubmittedAt(iso) {
     return iso;
   }
 }
+var TECH_CONSOLE_LIMIT = 20;
+var TECH_NETWORK_LIMIT = 15;
+function TechnicalContextDrawer({ ctx, strings }) {
+  const errors = ctx.errors ?? [];
+  const consoleLogs = (ctx.consoleLogs ?? []).slice(-TECH_CONSOLE_LIMIT);
+  const network = (ctx.networkRequests ?? []).slice(-TECH_NETWORK_LIMIT);
+  const device = ctx.device;
+  const hasAny = !!device || errors.length > 0 || consoleLogs.length > 0 || network.length > 0;
+  if (!hasAny) return null;
+  const errorCount = errors.length;
+  const summary = errorCount > 0 ? `${strings["detail.tech.title"]} \xB7 ${errorCount} ${errorCount === 1 ? strings["detail.tech.errors_one"] : strings["detail.tech.errors_many"]}` : strings["detail.tech.title"];
+  return /* @__PURE__ */ jsxs9("details", { class: "report-detail-tech", children: [
+    /* @__PURE__ */ jsx10("summary", { children: summary }),
+    /* @__PURE__ */ jsxs9("div", { class: "tech-body", children: [
+      device && /* @__PURE__ */ jsx10(DeviceSection, { device, strings }),
+      errors.length > 0 && /* @__PURE__ */ jsx10(ErrorsSection, { errors, strings }),
+      consoleLogs.length > 0 && /* @__PURE__ */ jsx10(ConsoleSection, { logs: consoleLogs, strings }),
+      network.length > 0 && /* @__PURE__ */ jsx10(NetworkSection, { rows: network, strings })
+    ] })
+  ] });
+}
+function DeviceSection({
+  device,
+  strings
+}) {
+  const parts = [];
+  if (device?.viewport) {
+    const dpr = device.viewport.dpr ? ` @${device.viewport.dpr}x` : "";
+    parts.push({
+      label: strings["detail.tech.device.viewport"],
+      value: `${device.viewport.w}\xD7${device.viewport.h}${dpr}`
+    });
+  }
+  if (device?.platform) parts.push({ label: strings["detail.tech.device.platform"], value: device.platform });
+  if (device?.language) parts.push({ label: strings["detail.tech.device.language"], value: device.language });
+  if (device?.timezone) parts.push({ label: strings["detail.tech.device.timezone"], value: device.timezone });
+  if (device?.connection) parts.push({ label: strings["detail.tech.device.connection"], value: device.connection });
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ jsxs9("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx10("h4", { children: strings["detail.tech.device"] }),
+    /* @__PURE__ */ jsx10("dl", { class: "tech-device", children: parts.map((p) => /* @__PURE__ */ jsxs9(Fragment, { children: [
+      /* @__PURE__ */ jsx10("dt", { children: p.label }),
+      /* @__PURE__ */ jsx10("dd", { children: p.value })
+    ] })) })
+  ] });
+}
+function ErrorsSection({
+  errors,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs9("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx10("h4", { children: strings["detail.tech.errors"] }),
+    /* @__PURE__ */ jsx10("ul", { class: "tech-errors", children: errors.map((e) => /* @__PURE__ */ jsxs9("li", { children: [
+      /* @__PURE__ */ jsx10("div", { class: "tech-errors-msg", children: e.message }),
+      e.stack && /* @__PURE__ */ jsx10("pre", { class: "tech-errors-stack", children: truncateStack(e.stack) })
+    ] })) })
+  ] });
+}
+function ConsoleSection({
+  logs,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs9("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx10("h4", { children: strings["detail.tech.console"] }),
+    /* @__PURE__ */ jsx10("ul", { class: "tech-console", children: logs.map((l) => /* @__PURE__ */ jsxs9("li", { class: `tech-console-row tech-console-row--${l.level}`, children: [
+      /* @__PURE__ */ jsx10("span", { class: "tech-console-level", children: l.level }),
+      /* @__PURE__ */ jsx10("span", { class: "tech-console-msg", children: l.message })
+    ] })) })
+  ] });
+}
+function NetworkSection({
+  rows,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs9("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx10("h4", { children: strings["detail.tech.network"] }),
+    /* @__PURE__ */ jsx10("ul", { class: "tech-network", children: rows.map((n) => {
+      const failed = n.status >= 400 || n.status === 0;
+      return /* @__PURE__ */ jsxs9("li", { class: `tech-network-row${failed ? " tech-network-row--fail" : ""}`, children: [
+        /* @__PURE__ */ jsx10("span", { class: "tech-network-status", children: n.status || "\u2014" }),
+        /* @__PURE__ */ jsx10("span", { class: "tech-network-method", children: n.method }),
+        /* @__PURE__ */ jsx10("span", { class: "tech-network-url", title: n.url, children: truncateUrl(n.url, 56) }),
+        /* @__PURE__ */ jsxs9("span", { class: "tech-network-time", children: [
+          Math.round(n.durationMs),
+          "ms"
+        ] })
+      ] });
+    }) })
+  ] });
+}
+function truncateStack(stack) {
+  const lines = stack.split("\n");
+  if (lines.length <= 12) return stack;
+  return lines.slice(0, 12).join("\n") + "\n  \u2026";
+}
+function StatusHistorySection({ rows, strings }) {
+  return /* @__PURE__ */ jsxs9("div", { class: "report-detail-history", children: [
+    /* @__PURE__ */ jsx10("h3", { class: "report-detail-section", children: strings["detail.history"] }),
+    /* @__PURE__ */ jsx10("ol", { class: "status-history", children: rows.map((r) => {
+      const from = strings[`status.${r.from_status}`] ?? r.from_status;
+      const to = strings[`status.${r.to_status}`] ?? r.to_status;
+      const sourceKey = r.changed_by_source === "mcp" ? "detail.author.mcp" : r.changed_by_source === "system" ? "detail.author.system" : "detail.author.staff";
+      return /* @__PURE__ */ jsxs9("li", { class: "status-history-row", children: [
+        /* @__PURE__ */ jsx10("span", { class: "status-history-time", children: formatSubmittedAt(r.created_at) }),
+        /* @__PURE__ */ jsxs9("span", { class: "status-history-transition", children: [
+          /* @__PURE__ */ jsx10("span", { class: `pill pill-status pill-status--${r.from_status}`, children: from }),
+          /* @__PURE__ */ jsx10("span", { class: "status-history-arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ jsx10("span", { class: `pill pill-status pill-status--${r.to_status}`, children: to })
+        ] }),
+        /* @__PURE__ */ jsx10("span", { class: `status-history-source status-history-source--${r.changed_by_source}`, children: strings[sourceKey] })
+      ] });
+    }) })
+  ] });
+}
 
 // src/widget/styles.ts
 var WIDGET_STYLES = `
@@ -2310,10 +2685,259 @@ var WIDGET_STYLES = `
   justify-content: flex-end;
   gap: 6px;
 }
+
+/* Status history \u2014 read-only audit trail visible to the submitter.
+   Timeline of who flipped the status and when (operator vs. agent vs.
+   system). Bordered, neutral surface so it doesn't compete visually
+   with the conversation thread above. */
+.report-detail-history {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-surface);
+  padding: 8px 10px;
+}
+.report-detail-history .report-detail-section {
+  margin: 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+}
+.status-history {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.status-history-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 8px;
+  align-items: center;
+  font-size: 11px;
+}
+.status-history-time {
+  color: var(--mfb-text-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.status-history-transition {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.status-history-arrow {
+  color: var(--mfb-text-muted);
+  font-size: 11px;
+}
+.status-history-source {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.status-history-source--mcp { color: #6b21a8; }
+.status-history-source--user { color: #1e40af; }
+.status-history-source--system { color: var(--mfb-text-muted); }
+
+/* Transparency drawer \u2014 closed by default. The user can click open to
+   verify what their browser sent: device, errors, console tail, network
+   tail. Read-only; purely a trust-building gesture. */
+.report-detail-tech {
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-surface);
+}
+.report-detail-tech > summary {
+  cursor: pointer;
+  padding: 8px 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+  user-select: none;
+  list-style: none;
+}
+.report-detail-tech > summary::-webkit-details-marker { display: none; }
+.report-detail-tech > summary::before {
+  content: '\u25B8';
+  display: inline-block;
+  margin-right: 6px;
+  transition: transform 120ms;
+}
+.report-detail-tech[open] > summary::before { transform: rotate(90deg); }
+.tech-body {
+  padding: 0 10px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.tech-section h4 {
+  margin: 0 0 4px 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+  font-weight: 600;
+}
+.tech-device {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 8px;
+  row-gap: 2px;
+  margin: 0;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.tech-device dt { color: var(--mfb-text-muted); }
+.tech-device dd { margin: 0; }
+.tech-errors, .tech-console, .tech-network {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 11px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.tech-errors li { padding: 4px 0; border-top: 1px solid var(--mfb-border); }
+.tech-errors li:first-child { border-top: 0; }
+.tech-errors-msg { color: #991b1b; font-weight: 600; }
+.tech-errors-stack {
+  margin: 4px 0 0 0;
+  padding: 4px 6px;
+  background: var(--mfb-bg);
+  border-radius: 4px;
+  font-size: 10px;
+  white-space: pre-wrap;
+  color: var(--mfb-text-muted);
+  max-height: 120px;
+  overflow-y: auto;
+}
+.tech-console-row {
+  display: grid;
+  grid-template-columns: 48px 1fr;
+  gap: 6px;
+  padding: 1px 0;
+}
+.tech-console-level {
+  text-transform: uppercase;
+  font-size: 9px;
+  font-weight: 600;
+  align-self: center;
+  color: var(--mfb-text-muted);
+}
+.tech-console-row--warn .tech-console-level { color: #92400e; }
+.tech-console-row--error .tech-console-level { color: #991b1b; }
+.tech-console-row--info .tech-console-level { color: #1e40af; }
+.tech-console-msg { word-break: break-word; }
+.tech-network-row {
+  display: grid;
+  grid-template-columns: 48px 56px 1fr 56px;
+  gap: 6px;
+  padding: 1px 0;
+}
+.tech-network-row--fail .tech-network-status { color: #991b1b; font-weight: 700; }
+.tech-network-status { font-variant-numeric: tabular-nums; }
+.tech-network-method { color: var(--mfb-text-muted); }
+.tech-network-url { word-break: break-all; }
+.tech-network-time { text-align: right; color: var(--mfb-text-muted); font-variant-numeric: tabular-nums; }
+
+/* KPI strip \u2014 four pills above the My Reports list. Each is clickable
+   to filter the rows below. Borrowed from thePnr's FeedbackKPICards. */
+.kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+.kpi-cell {
+  appearance: none;
+  background: var(--mfb-bg);
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  padding: 8px 6px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  font-family: inherit;
+  color: inherit;
+  transition: background 120ms, border-color 120ms;
+}
+.kpi-cell:hover { background: var(--mfb-surface); }
+.kpi-cell.is-active {
+  border-color: var(--mfb-accent);
+  background: rgba(59, 130, 246, 0.08);
+}
+.kpi-cell.is-active.kpi-cell--in_progress { border-color: #d97706; background: rgba(251, 191, 36, 0.10); }
+.kpi-cell.is-active.kpi-cell--awaiting_validation { border-color: #9333ea; background: rgba(168, 85, 247, 0.10); }
+.kpi-cell.is-active.kpi-cell--resolved { border-color: #059669; background: rgba(16, 185, 129, 0.10); }
+.kpi-value {
+  font-size: 18px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.kpi-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+}
+
+/* Changelog ("This week") \u2014 week-grouped resolved-report timeline.
+   Borrowed from thePnr's FeedbackChangelogView; the header per group
+   reads "\u25CF Week of {date}  \u2501\u2501\u2501  {n} resolved". */
+.changelog-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.changelog-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.changelog-group-header {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 6px;
+  align-items: center;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mfb-text-muted);
+}
+.changelog-group-marker {
+  color: var(--mfb-accent);
+  font-size: 14px;
+  line-height: 1;
+}
+.changelog-group-label { font-weight: 600; }
+.changelog-group-rule {
+  height: 1px;
+  background: var(--mfb-border);
+  align-self: center;
+}
+.changelog-group-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
 `;
 
 // src/widget/mount.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "preact/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "preact/jsx-runtime";
 function mountWidget(options) {
   const shadow = options.host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
@@ -2360,22 +2984,22 @@ function mountWidget(options) {
     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(
+    return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      fabVisible && /* @__PURE__ */ jsx11(
         Fab,
         {
           label: options.strings["fab.label"],
           onClick: () => rerender({ ...currentState, open: true })
         }
       ),
-      state.open && /* @__PURE__ */ jsxs8(
+      state.open && /* @__PURE__ */ jsxs10(
         Modal,
         {
           onDismiss: () => rerender(clearSelected({ ...currentState, open: false, status: "idle" })),
           closeLabel: options.strings["form.close"],
           children: [
-            showMineTab && /* @__PURE__ */ jsxs8("div", { class: "tab-strip", role: "tablist", children: [
-              /* @__PURE__ */ jsx9(
+            showMineTab && /* @__PURE__ */ jsxs10("div", { class: "tab-strip", role: "tablist", children: [
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -2386,7 +3010,7 @@ function mountWidget(options) {
                   children: options.strings["tab.send"]
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -2396,9 +3020,20 @@ function mountWidget(options) {
                   onClick: () => rerender(clearSelected({ ...currentState, tab: "mine" })),
                   children: options.strings["tab.mine"]
                 }
+              ),
+              /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": state.tab === "changelog",
+                  class: `tab-button ${state.tab === "changelog" ? "is-active" : ""}`,
+                  onClick: () => rerender(clearSelected({ ...currentState, tab: "changelog" })),
+                  children: options.strings["tab.changelog"]
+                }
               )
             ] }),
-            state.tab === "send" && /* @__PURE__ */ jsx9(
+            state.tab === "send" && /* @__PURE__ */ jsx11(
               Form,
               {
                 strings: options.strings,
@@ -2408,7 +3043,7 @@ function mountWidget(options) {
                 ...state.error !== void 0 && { errorMessage: state.error }
               }
             ),
-            state.tab === "mine" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx9(
+            state.tab === "mine" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx11(
               MineList,
               {
                 api: options.api,
@@ -2417,7 +3052,7 @@ function mountWidget(options) {
                 onSelect: (row) => rerender({ ...currentState, selectedReportId: row.id })
               }
             ),
-            state.tab === "mine" && options.api && externalId && state.selectedReportId && /* @__PURE__ */ jsx9(
+            (state.tab === "mine" || state.tab === "changelog") && options.api && externalId && state.selectedReportId && /* @__PURE__ */ jsx11(
               ReportDetailView,
               {
                 api: options.api,
@@ -2426,6 +3061,15 @@ function mountWidget(options) {
                 strings: options.strings,
                 onBack: () => rerender(clearSelected({ ...currentState }))
               }
+            ),
+            state.tab === "changelog" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx11(
+              ChangelogList,
+              {
+                api: options.api,
+                externalId,
+                strings: options.strings,
+                onSelect: (row) => rerender({ ...currentState, selectedReportId: row.id })
+              }
             )
           ]
         }
@@ -2498,6 +3142,9 @@ function createFeedback(config) {
       capture_method: screenshot ? manualScreenshot ? "manual" : "html2canvas" : "none",
       technical_context
     };
+    if ("0.8.0") {
+      payload.widget_version = "0.8.0";
+    }
     if (screenshot) payload.screenshot = screenshot;
     if (values.synthetic) payload.synthetic = true;
     if (user?.id !== void 0 && user.id !== null && user.id !== "") {
@@ -2582,4 +3229,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-2TLTE2VZ.mjs.map
+//# sourceMappingURL=chunk-XHK6VAU2.mjs.map