@mhosaic/feedback 0.11.0 → 0.12.0

package/dist/{chunk-AO3BXEG5.mjs → chunk-XSYC5TDL.mjs}

@@ -134,7 +134,56 @@ function createApiClient(options) {
     }
     return response.json();
   }
-  return { submitReport, listMine, listChangelog, getReport, addComment, closeAsResolved };
+  function boardQueryString(filters) {
+    if (!filters) return "";
+    const params = new URLSearchParams();
+    filters.status?.forEach((s) => params.append("status", s));
+    filters.type?.forEach((t) => params.append("type", t));
+    filters.severity?.forEach((s) => params.append("severity", s));
+    if (filters.q) params.set("q", filters.q);
+    if (filters.mine) params.set("mine", "1");
+    if (filters.page && filters.page > 1) params.set("page", String(filters.page));
+    const qs = params.toString();
+    return qs ? `?${qs}` : "";
+  }
+  async function listBoard(externalId, filters) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/board/${boardQueryString(filters)}`,
+      { method: "GET", headers: widgetHeaders(externalId) }
+    );
+    if (response.status === 404) {
+      return { count: 0, next: null, previous: null, results: [] };
+    }
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`listBoard failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  async function fetchBoardKpis(externalId, filters) {
+    const response = await fetcher(
+      `${endpoint}/api/feedback/v1/reports/widget/board/kpis/${boardQueryString(filters)}`,
+      { method: "GET", headers: widgetHeaders(externalId) }
+    );
+    if (response.status === 404) {
+      return { total: 0, by_status: {}, resolution_rate: 0, scope: "mine" };
+    }
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`fetchBoardKpis failed: ${response.status} ${text}`);
+    }
+    return response.json();
+  }
+  return {
+    submitReport,
+    listMine,
+    listChangelog,
+    getReport,
+    addComment,
+    closeAsResolved,
+    listBoard,
+    fetchBoardKpis
+  };
 }
 
 // src/capture/urlSanitizer.ts
@@ -465,65 +514,6 @@ function installCapture(options = {}) {
   };
 }
 
-// src/screenshot/index.ts
-var DEFAULT_REDACTED_INPUT_SELECTORS = [
-  'input[type="password"]',
-  'input[type="tel"]',
-  'input[autocomplete*="cc-"]',
-  'input[autocomplete*="current-password"]',
-  'input[autocomplete*="new-password"]',
-  'input[autocomplete*="one-time-code"]',
-  'input[name*="cvv" i]',
-  'input[name*="ccv" i]',
-  'input[name*="cardnum" i]',
-  'input[name*="card-num" i]'
-];
-var REDACTION_MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
-function isMaskedElement(el) {
-  return el.hasAttribute("data-mfb-mask") || el.classList.contains("mfb-mask");
-}
-function prepareMaskMatcher(selectors) {
-  const joined = selectors.join(",").trim();
-  if (!joined) return isMaskedElement;
-  return (el) => isMaskedElement(el) || el.matches(joined);
-}
-function redactSensitiveInputs(clonedDoc, extraSelectors) {
-  const selectors = [
-    ...DEFAULT_REDACTED_INPUT_SELECTORS,
-    ...extraSelectors,
-    "[data-mfb-mask]",
-    ".mfb-mask"
-  ].join(",");
-  const elements = clonedDoc.querySelectorAll(selectors);
-  elements.forEach((el) => {
-    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-      const len = Math.min(Math.max(el.value.length || 8, 4), 16);
-      el.value = REDACTION_MASK.slice(0, len);
-      el.setAttribute("value", el.value);
-    } else if (el instanceof HTMLElement) {
-      el.textContent = REDACTION_MASK;
-    }
-  });
-}
-async function takeScreenshot(target, options = {}) {
-  if (typeof document === "undefined") return null;
-  try {
-    const html2canvas = (await import("html2canvas-pro")).default;
-    const extraSelectors = options.mask ?? [];
-    const matcher = prepareMaskMatcher(extraSelectors);
-    const canvas = await html2canvas(target, {
-      ignoreElements: (el) => matcher(el),
-      onclone: (clonedDoc) => redactSensitiveInputs(clonedDoc, extraSelectors),
-      useCORS: true,
-      logging: false,
-      backgroundColor: null
-    });
-    return await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
-  } catch {
-    return null;
-  }
-}
-
 // src/widget/i18n.ts
 var DEFAULT_STRINGS = {
   "fab.label": "Send feedback",
@@ -547,6 +537,10 @@ var DEFAULT_STRINGS = {
   "form.screenshot.annotate": "Annotate",
   "form.screenshot.error_type": "Unsupported file type. Use PNG, JPEG or WebP.",
   "form.screenshot.error_size": "File too large (max {max} MB).",
+  "form.screenshot.or": "or",
+  "form.screenshot.capture_page": "Capture this page",
+  "form.screenshot.capture_page_hint": "Pick a tab or window to share",
+  "form.screenshot.capture_error": "Couldn\u2019t capture the page. Try uploading a screenshot instead.",
   "form.context.label": "Page",
   "type.bug": "Bug",
   "type.feature": "Feature request",
@@ -576,6 +570,33 @@ var DEFAULT_STRINGS = {
   "tab.send": "Send",
   "tab.mine": "My reports",
   "tab.changelog": "This week",
+  "tab.board": "Board",
+  "board.kpi.total": "Total",
+  "board.kpi.new": "New",
+  "board.kpi.in_progress": "In progress",
+  "board.kpi.awaiting_validation": "Awaiting validation",
+  "board.kpi.closed": "Closed",
+  "board.kpi.rejected": "Rejected",
+  "board.kpi.resolution_rate": "Resolution rate",
+  "board.filter.status": "Status",
+  "board.filter.type": "Type",
+  "board.filter.severity": "Severity",
+  "board.filter.search.placeholder": "Search\u2026",
+  "board.filter.mine": "Mine only",
+  "board.filter.clear": "Clear filters",
+  "board.list.empty.title": "Nothing here yet",
+  "board.list.empty.description": "When reports land, they\u2019ll show up here.",
+  "board.list.loading": "Loading\u2026",
+  "board.list.error": "Couldn\u2019t load reports. Try again.",
+  "board.list.you": "you",
+  "board.list.count": "{n} of {total}",
+  "board.detail.empty": "Pick a report on the left to see its full thread.",
+  "board.detail.by": "By",
+  "board.detail.confirm_resolution": "Confirm resolution",
+  "board.detail.status_history": "History",
+  "board.scope.project": "Project reports",
+  "board.scope.mine": "Your reports",
+  "board.back": "Back",
   "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}",
@@ -653,6 +674,10 @@ var FRENCH_STRINGS = {
   "form.screenshot.annotate": "Annoter",
   "form.screenshot.error_type": "Format non support\xE9. Utilisez PNG, JPEG ou WebP.",
   "form.screenshot.error_size": "Fichier trop volumineux (max {max} Mo).",
+  "form.screenshot.or": "ou",
+  "form.screenshot.capture_page": "Capturer la page",
+  "form.screenshot.capture_page_hint": "Choisissez un onglet ou une fen\xEAtre \xE0 partager",
+  "form.screenshot.capture_error": "Impossible de capturer la page. T\xE9l\xE9versez une capture \xE0 la place.",
   "form.context.label": "Page",
   "type.bug": "Bogue",
   "type.feature": "Suggestion",
@@ -682,6 +707,33 @@ var FRENCH_STRINGS = {
   "tab.send": "Envoyer",
   "tab.mine": "Mes rapports",
   "tab.changelog": "Cette semaine",
+  "tab.board": "Tableau",
+  "board.kpi.total": "Total",
+  "board.kpi.new": "Nouveau",
+  "board.kpi.in_progress": "En cours",
+  "board.kpi.awaiting_validation": "\xC0 valider",
+  "board.kpi.closed": "Ferm\xE9",
+  "board.kpi.rejected": "Refus\xE9",
+  "board.kpi.resolution_rate": "Taux de r\xE9solution",
+  "board.filter.status": "Statut",
+  "board.filter.type": "Type",
+  "board.filter.severity": "S\xE9v\xE9rit\xE9",
+  "board.filter.search.placeholder": "Rechercher\u2026",
+  "board.filter.mine": "Les miens",
+  "board.filter.clear": "Effacer les filtres",
+  "board.list.empty.title": "Rien \xE0 voir ici",
+  "board.list.empty.description": "Les rapports appara\xEEtront ici d\xE8s qu\u2019ils arrivent.",
+  "board.list.loading": "Chargement\u2026",
+  "board.list.error": "Impossible de charger les rapports. R\xE9essayez.",
+  "board.list.you": "vous",
+  "board.list.count": "{n} sur {total}",
+  "board.detail.empty": "S\xE9lectionnez un rapport \xE0 gauche pour voir le fil complet.",
+  "board.detail.by": "Par",
+  "board.detail.confirm_resolution": "Confirmer la r\xE9solution",
+  "board.detail.status_history": "Historique",
+  "board.scope.project": "Rapports du projet",
+  "board.scope.mine": "Vos rapports",
+  "board.back": "Retour",
   "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}",
@@ -758,190 +810,1003 @@ 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/BoardView.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "preact/hooks";
 
-// src/widget/ReportRow.tsx
+// src/widget/ReportDetailView.tsx
+import { useEffect, useRef, useState } from "preact/hooks";
+
+// src/widget/CommentBubble.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)
-      ] })
-    ] })
+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__ */ jsxs("div", { class: `comment-bubble ${isMine ? "is-mine" : "is-other"}`, children: [
+    !isMine && label && /* @__PURE__ */ jsx("div", { class: `comment-author comment-author--${variant}`, children: label }),
+    /* @__PURE__ */ jsx("div", { class: "comment-body", children: comment.body }),
+    /* @__PURE__ */ jsx("div", { class: "comment-time", children: formatTime(comment.created_at) })
   ] });
 }
-
-// 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 formatTime(iso) {
+  try {
+    return new Date(iso).toLocaleString(void 0, {
+      dateStyle: "short",
+      timeStyle: "short"
+    });
+  } catch {
+    return iso;
+  }
 }
-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]);
+
+// src/widget/screenshot-utils.ts
+var ALLOWED_IMAGE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp"
+];
+var MAX_SCREENSHOT_BYTES = 10 * 1024 * 1024;
+function validateScreenshotFile(file) {
+  if (!ALLOWED_IMAGE_TYPES.includes(
+    file.type
+  )) {
+    return { kind: "type" };
   }
-  return Array.from(buckets.entries()).sort(([a], [b]) => a < b ? 1 : -1).map(([weekKey, weekRows]) => ({
-    weekKey,
-    label: formatWeekLabel(weekKey),
-    rows: weekRows
-  }));
+  if (file.size > MAX_SCREENSHOT_BYTES) {
+    return { kind: "size", maxMb: MAX_SCREENSHOT_BYTES / (1024 * 1024) };
+  }
+  return null;
 }
-function formatWeekLabel(weekKey) {
+function truncateUrl(url, maxLength = 80) {
+  if (url.length <= maxLength) return url;
+  const keepStart = Math.floor((maxLength - 1) / 2);
+  const keepEnd = maxLength - 1 - keepStart;
+  return `${url.slice(0, keepStart)}\u2026${url.slice(url.length - keepEnd)}`;
+}
+async function captureWithDisplayMedia() {
+  if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
+    return null;
+  }
+  let stream = null;
   try {
-    return new Date(weekKey).toLocaleDateString(void 0, {
-      year: "numeric",
-      month: "short",
-      day: "numeric"
+    stream = await navigator.mediaDevices.getDisplayMedia({
+      video: { displaySurface: "browser" },
+      audio: false
+      // Hint that audio isn't needed; not all browsers honor this but it
+      // avoids the audio-share toggle being defaulted on in some.
     });
   } catch {
-    return weekKey;
+    return null;
+  }
+  try {
+    const track = stream.getVideoTracks()[0];
+    if (!track) return null;
+    const ImageCaptureCtor = window.ImageCapture;
+    let bitmap = null;
+    if (ImageCaptureCtor) {
+      try {
+        const ic = new ImageCaptureCtor(track);
+        bitmap = await ic.grabFrame();
+      } catch {
+        bitmap = null;
+      }
+    }
+    if (!bitmap) {
+      bitmap = await grabFrameViaVideo(stream);
+    }
+    if (!bitmap) return null;
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(bitmap, 0, 0);
+    return await new Promise(
+      (resolve) => canvas.toBlob(resolve, "image/png")
+    );
+  } finally {
+    stream.getTracks().forEach((t) => t.stop());
   }
 }
-function ChangelogList({ api, externalId, strings, onSelect }) {
-  const [rows, setRows] = useState(null);
+async function grabFrameViaVideo(stream) {
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  video.srcObject = stream;
+  try {
+    await video.play();
+    await new Promise((r) => requestAnimationFrame(() => r()));
+    if (!video.videoWidth || !video.videoHeight) return null;
+    return await createImageBitmap(video);
+  } catch {
+    return null;
+  }
+}
+
+// src/widget/ReportDetailView.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+var POLL_MS = 3e4;
+function ReportDetailView({
+  api,
+  externalId,
+  reportId,
+  strings,
+  onBack,
+  canModerate = true,
+  variant = "modal"
+}) {
+  const [detail, setDetail] = useState(null);
   const [error, setError] = useState(null);
-  const [refreshing, setRefreshing] = useState(false);
+  const [composeBody, setComposeBody] = useState("");
+  const [sending, setSending] = useState(false);
+  const [closing, setClosing] = useState(false);
   const mountedRef = useRef(true);
-  const fetchRows = async () => {
-    setRefreshing(true);
-    setError(null);
+  const fetchDetail = async () => {
     try {
-      const next = await api.listChangelog(externalId);
+      const next = await api.getReport(reportId, externalId);
       if (!mountedRef.current) return;
-      setRows(next);
+      setDetail(next);
+      setError(null);
     } catch (err) {
       if (!mountedRef.current) return;
-      setError(err instanceof Error ? err.message : strings["mine.error"]);
-    } finally {
-      if (mountedRef.current) setRefreshing(false);
+      setError(err instanceof Error ? err.message : "load_failed");
     }
   };
   useEffect(() => {
     mountedRef.current = true;
-    void fetchRows();
+    void fetchDetail();
     const timer = setInterval(() => {
-      void fetchRows();
+      void fetchDetail();
     }, 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(
+  }, [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__ */ jsx2("div", { class: "mine-loading", children: strings["mine.loading"] });
+  }
+  if (!detail) {
+    return /* @__PURE__ */ jsx2("div", { class: "error", role: "alert", children: error });
+  }
+  const showCloseCta = canModerate && detail.status === "awaiting_validation";
+  return /* @__PURE__ */ jsxs2("div", { class: `report-detail variant-${variant}`, children: [
+    variant === "modal" && /* @__PURE__ */ jsxs2("div", { class: "report-detail-header", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", class: "btn", onClick: onBack, children: [
+        "\u2190 ",
+        strings["detail.back"]
+      ] }),
+      /* @__PURE__ */ jsx2("span", { class: `pill pill-status pill-status--${detail.status}`, children: strings[`status.${detail.status}`] ?? detail.status })
+    ] }),
+    variant === "board" && /* @__PURE__ */ jsxs2("div", { class: "report-detail-header report-detail-header--board", children: [
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
-          class: "btn",
-          onClick: () => {
-            void fetchRows();
-          },
-          disabled: refreshing,
-          children: refreshing ? strings["mine.loading"] : strings["mine.refresh"]
+          class: "btn btn--ghost report-detail-back",
+          onClick: onBack,
+          "aria-label": strings["board.back"],
+          children: [
+            "\u2190 ",
+            strings["board.back"]
+          ]
         }
-      )
-    ] }),
-    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"] })
+      ),
+      /* @__PURE__ */ jsx2("span", { class: `pill pill-status pill-status--${detail.status}`, children: strings[`status.${detail.status}`] ?? detail.status })
     ] }),
-    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 as jsx3 } from "preact/jsx-runtime";
-function ChatBubbleIcon() {
-  return /* @__PURE__ */ jsx3(
-    "svg",
-    {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-hidden": "true",
-      focusable: "false",
-      children: /* @__PURE__ */ jsx3(
-        "path",
+    /* @__PURE__ */ jsxs2("div", { class: "report-detail-body", children: [
+      /* @__PURE__ */ jsx2(ContextBlock, { detail, strings }),
+      /* @__PURE__ */ jsx2("p", { class: "report-detail-description", children: detail.description }),
+      detail.screenshot_url && /* @__PURE__ */ jsx2(
+        "a",
         {
-          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",
-          fill: "currentColor"
+          class: "report-detail-screenshot",
+          href: detail.screenshot_url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /* @__PURE__ */ jsx2("img", { src: detail.screenshot_url, alt: "", loading: "lazy" })
+        }
+      ),
+      /* @__PURE__ */ jsx2("h3", { class: "report-detail-section", children: strings["detail.thread"] }),
+      detail.comments.length === 0 ? /* @__PURE__ */ jsx2("p", { class: "report-detail-empty", children: strings["detail.no_replies"] }) : /* @__PURE__ */ jsx2("ul", { class: "report-comments", children: detail.comments.map((c) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(CommentBubble, { comment: c, strings }) })) }),
+      detail.status_history && detail.status_history.length > 0 && /* @__PURE__ */ jsx2(StatusHistorySection, { rows: detail.status_history, strings }),
+      detail.technical_context && /* @__PURE__ */ jsx2(TechnicalContextDrawer, { ctx: detail.technical_context, strings }),
+      /* @__PURE__ */ jsxs2("div", { class: "report-compose", children: [
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            value: composeBody,
+            placeholder: strings["detail.compose_placeholder"],
+            onInput: (e) => setComposeBody(e.target.value),
+            disabled: sending
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { class: "report-compose-actions", children: [
+          showCloseCta && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              class: "btn",
+              onClick: handleClose,
+              disabled: closing,
+              children: closing ? strings["detail.close_busy"] : strings["detail.close_cta"]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2("div", { class: "error", children: error })
+    ] })
+  ] });
+}
+function appendComment(current, next) {
+  if (current.some((c) => c.id === next.id)) return current;
+  return [...current, next];
+}
+function ContextBlock({ detail, strings }) {
+  const captureKey = `detail.context.capture.${detail.capture_method}`;
+  const captureLabel = strings[captureKey] ?? detail.capture_method;
+  return /* @__PURE__ */ jsxs2("div", { class: "report-detail-context", children: [
+    /* @__PURE__ */ jsxs2("div", { class: "report-detail-context-pills", children: [
+      /* @__PURE__ */ jsx2("span", { class: "pill pill-type", children: strings[`type.${detail.feedback_type}`] }),
+      /* @__PURE__ */ jsx2("span", { class: `pill pill-severity pill-severity--${detail.severity}`, children: strings[`severity.${detail.severity}`] }),
+      /* @__PURE__ */ jsx2("span", { class: "pill pill-capture", children: captureLabel })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { class: "report-detail-context-line", children: [
+      /* @__PURE__ */ jsx2("span", { class: "report-detail-context-label", children: strings["detail.context.submitted_at"] }),
+      /* @__PURE__ */ jsx2("span", { children: formatSubmittedAt(detail.created_at) })
+    ] }),
+    detail.page_url && /* @__PURE__ */ jsxs2("div", { class: "report-detail-context-line", title: detail.page_url, children: [
+      /* @__PURE__ */ jsx2("span", { class: "report-detail-context-label", children: strings["detail.context.page"] }),
+      /* @__PURE__ */ jsx2(
+        "a",
+        {
+          class: "report-detail-context-url",
+          href: detail.page_url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: truncateUrl(detail.page_url, 64)
+        }
+      )
+    ] })
+  ] });
+}
+function formatSubmittedAt(iso) {
+  try {
+    return new Date(iso).toLocaleString(void 0, {
+      dateStyle: "medium",
+      timeStyle: "short"
+    });
+  } catch {
+    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__ */ jsxs2("details", { class: "report-detail-tech", children: [
+    /* @__PURE__ */ jsx2("summary", { children: summary }),
+    /* @__PURE__ */ jsxs2("div", { class: "tech-body", children: [
+      device && /* @__PURE__ */ jsx2(DeviceSection, { device, strings }),
+      errors.length > 0 && /* @__PURE__ */ jsx2(ErrorsSection, { errors, strings }),
+      consoleLogs.length > 0 && /* @__PURE__ */ jsx2(ConsoleSection, { logs: consoleLogs, strings }),
+      network.length > 0 && /* @__PURE__ */ jsx2(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__ */ jsxs2("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx2("h4", { children: strings["detail.tech.device"] }),
+    /* @__PURE__ */ jsx2("dl", { class: "tech-device", children: parts.map((p) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("dt", { children: p.label }),
+      /* @__PURE__ */ jsx2("dd", { children: p.value })
+    ] })) })
+  ] });
+}
+function ErrorsSection({
+  errors,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs2("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx2("h4", { children: strings["detail.tech.errors"] }),
+    /* @__PURE__ */ jsx2("ul", { class: "tech-errors", children: errors.map((e) => /* @__PURE__ */ jsxs2("li", { children: [
+      /* @__PURE__ */ jsx2("div", { class: "tech-errors-msg", children: e.message }),
+      e.stack && /* @__PURE__ */ jsx2("pre", { class: "tech-errors-stack", children: truncateStack(e.stack) })
+    ] })) })
+  ] });
+}
+function ConsoleSection({
+  logs,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs2("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx2("h4", { children: strings["detail.tech.console"] }),
+    /* @__PURE__ */ jsx2("ul", { class: "tech-console", children: logs.map((l) => /* @__PURE__ */ jsxs2("li", { class: `tech-console-row tech-console-row--${l.level}`, children: [
+      /* @__PURE__ */ jsx2("span", { class: "tech-console-level", children: l.level }),
+      /* @__PURE__ */ jsx2("span", { class: "tech-console-msg", children: l.message })
+    ] })) })
+  ] });
+}
+function NetworkSection({
+  rows,
+  strings
+}) {
+  return /* @__PURE__ */ jsxs2("div", { class: "tech-section", children: [
+    /* @__PURE__ */ jsx2("h4", { children: strings["detail.tech.network"] }),
+    /* @__PURE__ */ jsx2("ul", { class: "tech-network", children: rows.map((n) => {
+      const failed = n.status >= 400 || n.status === 0;
+      return /* @__PURE__ */ jsxs2("li", { class: `tech-network-row${failed ? " tech-network-row--fail" : ""}`, children: [
+        /* @__PURE__ */ jsx2("span", { class: "tech-network-status", children: n.status || "\u2014" }),
+        /* @__PURE__ */ jsx2("span", { class: "tech-network-method", children: n.method }),
+        /* @__PURE__ */ jsx2("span", { class: "tech-network-url", title: n.url, children: truncateUrl(n.url, 56) }),
+        /* @__PURE__ */ jsxs2("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__ */ jsxs2("div", { class: "report-detail-history", children: [
+    /* @__PURE__ */ jsx2("h3", { class: "report-detail-section", children: strings["detail.history"] }),
+    /* @__PURE__ */ jsx2("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__ */ jsxs2("li", { class: "status-history-row", children: [
+        /* @__PURE__ */ jsx2("span", { class: "status-history-time", children: formatSubmittedAt(r.created_at) }),
+        /* @__PURE__ */ jsxs2("span", { class: "status-history-transition", children: [
+          /* @__PURE__ */ jsx2("span", { class: `pill pill-status pill-status--${r.from_status}`, children: from }),
+          /* @__PURE__ */ jsx2("span", { class: "status-history-arrow", "aria-hidden": "true", children: "\u2192" }),
+          /* @__PURE__ */ jsx2("span", { class: `pill pill-status pill-status--${r.to_status}`, children: to })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { class: `status-history-source status-history-source--${r.changed_by_source}`, children: strings[sourceKey] })
+      ] });
+    }) })
+  ] });
+}
+
+// src/widget/BoardView.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
+var POLL_MS2 = 3e4;
+var STATUSES = [
+  "new",
+  "in_progress",
+  "awaiting_validation",
+  "closed",
+  "rejected"
+];
+var TYPES = ["bug", "feature", "question", "praise", "typo"];
+var SEVERITIES = ["blocker", "high", "medium", "low"];
+function BoardView({ api, externalId, strings }) {
+  const [filters, setFilters] = useState2({});
+  const [page, setPage] = useState2(null);
+  const [kpis, setKpis] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const [selectedId, setSelectedId] = useState2(null);
+  const [detailKey, setDetailKey] = useState2(0);
+  const activeFilterCount = useMemo(() => {
+    return (filters.status?.length ?? 0) + (filters.type?.length ?? 0) + (filters.severity?.length ?? 0) + (filters.q ? 1 : 0) + (filters.mine ? 1 : 0);
+  }, [filters]);
+  useEffect2(() => {
+    let cancelled = false;
+    let timer = null;
+    const tick = async () => {
+      try {
+        const [list, k] = await Promise.all([
+          api.listBoard(externalId, filters),
+          api.fetchBoardKpis(externalId, filters)
+        ]);
+        if (cancelled) return;
+        setPage(list);
+        setKpis(k);
+        setError(null);
+      } catch (e) {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (!cancelled) setLoading(false);
+        if (!cancelled) timer = setTimeout(tick, POLL_MS2);
+      }
+    };
+    setLoading(true);
+    void tick();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [api, externalId, filtersHash(filters)]);
+  const selectedRow = useMemo(() => {
+    if (!selectedId || !page) return null;
+    return page.results.find((r) => r.id === selectedId) ?? null;
+  }, [selectedId, page]);
+  const onPickRow = (row) => {
+    setSelectedId(row.id);
+    setDetailKey((k) => k + 1);
+  };
+  return /* @__PURE__ */ jsxs3("div", { class: "board-view", children: [
+    /* @__PURE__ */ jsx3(BoardHeader, { strings, kpis }),
+    /* @__PURE__ */ jsx3(
+      BoardFilters,
+      {
+        filters,
+        onChange: setFilters,
+        activeCount: activeFilterCount,
+        strings
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { class: "board-body", children: [
+      /* @__PURE__ */ jsxs3("div", { class: "board-list-wrap", "aria-busy": loading && !page, children: [
+        error && /* @__PURE__ */ jsx3("div", { class: "board-error", children: strings["board.list.error"] }),
+        !error && loading && !page && /* @__PURE__ */ jsx3(BoardListSkeleton, {}),
+        !error && page && page.results.length === 0 && !loading && /* @__PURE__ */ jsx3(BoardEmpty, { strings }),
+        !error && page && page.results.length > 0 && /* @__PURE__ */ jsx3(
+          BoardList,
+          {
+            rows: page.results,
+            selectedId,
+            onPick: onPickRow,
+            strings,
+            total: page.count
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3("div", { class: `board-detail-wrap ${selectedRow ? "has-selection" : ""}`, children: selectedRow ? /* @__PURE__ */ jsx3(
+        ReportDetailView,
+        {
+          api,
+          externalId,
+          reportId: selectedRow.id,
+          strings,
+          onBack: () => setSelectedId(null),
+          canModerate: selectedRow.is_mine,
+          variant: "board"
+        },
+        detailKey
+      ) : /* @__PURE__ */ jsxs3("div", { class: "board-detail-empty", children: [
+        /* @__PURE__ */ jsx3(DetailEmptyIllustration, {}),
+        /* @__PURE__ */ jsx3("p", { children: strings["board.detail.empty"] })
+      ] }) })
+    ] })
+  ] });
+}
+function BoardHeader({
+  strings,
+  kpis
+}) {
+  const scopeLabel = kpis?.scope === "project" ? strings["board.scope.project"] : strings["board.scope.mine"];
+  return /* @__PURE__ */ jsxs3("header", { class: "board-header", children: [
+    /* @__PURE__ */ jsxs3("div", { class: "board-header-title", children: [
+      /* @__PURE__ */ jsx3("span", { class: "board-header-emoji", "aria-hidden": "true", children: "\u{1F4CB}" }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("h2", { class: "board-header-h", children: strings["tab.board"] }),
+        /* @__PURE__ */ jsx3("p", { class: "board-header-sub", children: kpis ? `${kpis.total} \xB7 ${scopeLabel}` : scopeLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(BoardKpiStrip, { kpis, strings })
+  ] });
+}
+function BoardKpiStrip({
+  kpis,
+  strings
+}) {
+  const cells = [
+    {
+      key: "new",
+      label: strings["board.kpi.new"],
+      value: String(kpis?.by_status?.new ?? 0),
+      tone: "tone-new"
+    },
+    {
+      key: "in_progress",
+      label: strings["board.kpi.in_progress"],
+      value: String(kpis?.by_status?.in_progress ?? 0),
+      tone: "tone-progress"
+    },
+    {
+      key: "awaiting_validation",
+      label: strings["board.kpi.awaiting_validation"],
+      value: String(kpis?.by_status?.awaiting_validation ?? 0),
+      tone: "tone-validation"
+    },
+    {
+      key: "rate",
+      label: strings["board.kpi.resolution_rate"],
+      value: kpis ? `${Math.round((kpis.resolution_rate || 0) * 100)}%` : "\u2014",
+      tone: "tone-rate"
+    }
+  ];
+  return /* @__PURE__ */ jsx3("div", { class: `board-kpi-strip ${kpis ? "is-ready" : "is-loading"}`, "aria-live": "polite", children: cells.map((c) => /* @__PURE__ */ jsxs3("div", { class: `board-kpi-card ${c.tone}`, children: [
+    /* @__PURE__ */ jsx3("div", { class: "board-kpi-value", children: c.value }),
+    /* @__PURE__ */ jsx3("div", { class: "board-kpi-label", children: c.label })
+  ] }, c.key)) });
+}
+function BoardFilters({
+  filters,
+  onChange,
+  activeCount,
+  strings
+}) {
+  const setStatus = (value) => {
+    if (value === "") {
+      const { status: _drop, ...rest } = filters;
+      void _drop;
+      onChange(rest);
+    } else {
+      onChange({ ...filters, status: [value] });
+    }
+  };
+  const setType = (value) => {
+    if (value === "") {
+      const { type: _drop, ...rest } = filters;
+      void _drop;
+      onChange(rest);
+    } else {
+      onChange({ ...filters, type: [value] });
+    }
+  };
+  const setSeverity = (value) => {
+    if (value === "") {
+      const { severity: _drop, ...rest } = filters;
+      void _drop;
+      onChange(rest);
+    } else {
+      onChange({ ...filters, severity: [value] });
+    }
+  };
+  const setSearch = (q) => onChange({ ...filters, q });
+  const toggleMine = () => {
+    if (filters.mine) {
+      const { mine: _drop, ...rest } = filters;
+      void _drop;
+      onChange(rest);
+    } else {
+      onChange({ ...filters, mine: true });
+    }
+  };
+  const clear = () => onChange({});
+  return /* @__PURE__ */ jsxs3("div", { class: "board-filters", children: [
+    /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        class: "board-filter-select",
+        "aria-label": strings["board.filter.status"],
+        value: filters.status?.[0] ?? "",
+        onChange: (e) => setStatus(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: strings["board.filter.status"] }),
+          STATUSES.map((s) => /* @__PURE__ */ jsx3("option", { value: s, children: strings[`board.kpi.${s}`] ?? s }, s))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        class: "board-filter-select",
+        "aria-label": strings["board.filter.type"],
+        value: filters.type?.[0] ?? "",
+        onChange: (e) => setType(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: strings["board.filter.type"] }),
+          TYPES.map((t) => /* @__PURE__ */ jsx3("option", { value: t, children: strings[`type.${t}`] ?? t }, t))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        class: "board-filter-select",
+        "aria-label": strings["board.filter.severity"],
+        value: filters.severity?.[0] ?? "",
+        onChange: (e) => setSeverity(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: strings["board.filter.severity"] }),
+          SEVERITIES.map((s) => /* @__PURE__ */ jsx3("option", { value: s, children: strings[`severity.${s}`] ?? s }, s))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "search",
+        class: "board-filter-search",
+        placeholder: strings["board.filter.search.placeholder"],
+        value: filters.q ?? "",
+        onInput: (e) => setSearch(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs3("label", { class: "board-filter-toggle", children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(filters.mine),
+          onChange: toggleMine
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { children: strings["board.filter.mine"] })
+    ] }),
+    activeCount > 0 && /* @__PURE__ */ jsxs3("button", { type: "button", class: "board-filter-clear", onClick: clear, children: [
+      /* @__PURE__ */ jsx3(CloseIcon, {}),
+      strings["board.filter.clear"]
+    ] })
+  ] });
+}
+function BoardList({
+  rows,
+  selectedId,
+  onPick,
+  strings,
+  total
+}) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("div", { class: "board-list-count", children: strings["board.list.count"].replace("{n}", String(rows.length)).replace("{total}", String(total)) }),
+    /* @__PURE__ */ jsx3("ul", { class: "board-list", role: "list", children: rows.map((row) => /* @__PURE__ */ jsx3(
+      BoardRowCard,
+      {
+        row,
+        selected: row.id === selectedId,
+        onPick,
+        strings
+      },
+      row.id
+    )) })
+  ] });
+}
+function BoardRowCard({
+  row,
+  selected,
+  onPick,
+  strings
+}) {
+  const author = row.is_mine ? strings["board.list.you"] : row.author_label || "\u2014";
+  return /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      class: `board-row ${selected ? "is-selected" : ""}`,
+      onClick: () => onPick(row),
+      "aria-pressed": selected,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { class: "board-row-badges", children: [
+          /* @__PURE__ */ jsx3("span", { class: `badge status-${row.status}`, children: strings[`status.${row.status}`] ?? row.status }),
+          /* @__PURE__ */ jsx3("span", { class: `badge severity-${row.severity}`, children: strings[`severity.${row.severity}`] ?? row.severity })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { class: "board-row-description", children: row.description }),
+        /* @__PURE__ */ jsxs3("div", { class: "board-row-meta", children: [
+          /* @__PURE__ */ jsx3("span", { class: "board-row-author", children: author }),
+          row.comment_count > 0 && /* @__PURE__ */ jsxs3("span", { class: "board-row-comments", children: [
+            /* @__PURE__ */ jsx3(CommentIcon, {}),
+            " ",
+            row.comment_count
+          ] }),
+          /* @__PURE__ */ jsx3("span", { class: "board-row-time", children: formatRelative(row.created_at) })
+        ] })
+      ]
+    }
+  ) });
+}
+function BoardEmpty({ strings }) {
+  return /* @__PURE__ */ jsxs3("div", { class: "board-empty", children: [
+    /* @__PURE__ */ jsx3(EmptyIllustration, {}),
+    /* @__PURE__ */ jsx3("h3", { children: strings["board.list.empty.title"] }),
+    /* @__PURE__ */ jsx3("p", { children: strings["board.list.empty.description"] })
+  ] });
+}
+function BoardListSkeleton() {
+  return /* @__PURE__ */ jsx3("ul", { class: "board-list board-list-skeleton", "aria-hidden": "true", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3("div", { class: "board-row skeleton-row", children: [
+    /* @__PURE__ */ jsx3("div", { class: "skeleton-line skeleton-badges" }),
+    /* @__PURE__ */ jsx3("div", { class: "skeleton-line skeleton-text" }),
+    /* @__PURE__ */ jsx3("div", { class: "skeleton-line skeleton-text short" })
+  ] }) }, i)) });
+}
+function CommentIcon() {
+  return /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function EmptyIllustration() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "32", cy: "32", r: "28", stroke: "currentColor", "stroke-opacity": "0.18", "stroke-width": "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M22 32h20M32 22v20", stroke: "currentColor", "stroke-opacity": "0.35", "stroke-width": "2", "stroke-linecap": "round" })
+  ] });
+}
+function DetailEmptyIllustration() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "80", height: "80", viewBox: "0 0 64 64", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx3("rect", { x: "10", y: "12", width: "44", height: "36", rx: "4", stroke: "currentColor", "stroke-opacity": "0.22", "stroke-width": "2" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18", y1: "22", x2: "46", y2: "22", stroke: "currentColor", "stroke-opacity": "0.22", "stroke-width": "2", "stroke-linecap": "round" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18", y1: "30", x2: "38", y2: "30", stroke: "currentColor", "stroke-opacity": "0.18", "stroke-width": "2", "stroke-linecap": "round" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18", y1: "38", x2: "32", y2: "38", stroke: "currentColor", "stroke-opacity": "0.14", "stroke-width": "2", "stroke-linecap": "round" })
+  ] });
+}
+function filtersHash(f) {
+  return JSON.stringify({
+    s: f.status?.slice().sort(),
+    t: f.type?.slice().sort(),
+    sv: f.severity?.slice().sort(),
+    q: f.q ?? "",
+    m: Boolean(f.mine)
+  });
+}
+function formatRelative(iso) {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const delta = Math.max(0, Date.now() - then);
+  const m = Math.floor(delta / 6e4);
+  if (m < 1) return "just now";
+  if (m < 60) return `${m}m`;
+  const h2 = Math.floor(m / 60);
+  if (h2 < 24) return `${h2}h`;
+  const d = Math.floor(h2 / 24);
+  if (d < 7) return `${d}d`;
+  const w = Math.floor(d / 7);
+  return `${w}w`;
+}
+
+// src/widget/ChangelogList.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "preact/hooks";
+
+// src/widget/ReportRow.tsx
+import { jsx as jsx4, jsxs as jsxs4 } 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 formatRelative2(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__ */ jsxs4("button", { type: "button", class: "mine-row", onClick, children: [
+    /* @__PURE__ */ jsxs4("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__ */ jsxs4("div", { class: "mine-row-meta", children: [
+      /* @__PURE__ */ jsx4("span", { children: formatRelative2(row.updated_at || row.created_at) }),
+      row.comment_count > 0 && /* @__PURE__ */ jsxs4("span", { children: [
+        "\xB7 ",
+        repliesLabel(row.comment_count, strings)
+      ] })
+    ] })
+  ] });
+}
+
+// src/widget/ChangelogList.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
+var POLL_MS3 = 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] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [refreshing, setRefreshing] = useState3(false);
+  const mountedRef = useRef2(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);
+    }
+  };
+  useEffect3(() => {
+    mountedRef.current = true;
+    void fetchRows();
+    const timer = setInterval(() => {
+      void fetchRows();
+    }, POLL_MS3);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(timer);
+    };
+  }, [externalId]);
+  const groups = useMemo2(() => rows ? groupRowsByWeek(rows) : [], [rows]);
+  const isLoading = rows === null && !error;
+  const isEmpty = rows !== null && rows.length === 0;
+  return /* @__PURE__ */ jsxs5("div", { class: "mine-list", children: [
+    /* @__PURE__ */ jsxs5("div", { class: "mine-list-header", children: [
+      /* @__PURE__ */ jsx5("h2", { children: strings["tab.changelog"] }),
+      /* @__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__ */ jsxs5("div", { class: "mine-empty", children: [
+      /* @__PURE__ */ jsx5("strong", { children: strings["changelog.empty.title"] }),
+      /* @__PURE__ */ jsx5("p", { children: strings["changelog.empty.body"] })
+    ] }),
+    groups.length > 0 && /* @__PURE__ */ jsx5("div", { class: "changelog-groups", children: groups.map((g) => /* @__PURE__ */ jsxs5("section", { class: "changelog-group", children: [
+      /* @__PURE__ */ jsxs5("header", { class: "changelog-group-header", children: [
+        /* @__PURE__ */ jsx5("span", { class: "changelog-group-marker", "aria-hidden": "true", children: "\u25CF" }),
+        /* @__PURE__ */ jsx5("span", { class: "changelog-group-label", children: strings["changelog.week_of"].replace("{date}", g.label) }),
+        /* @__PURE__ */ jsx5("span", { class: "changelog-group-rule", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx5("span", { class: "changelog-group-count", children: strings[g.rows.length === 1 ? "changelog.resolved_one" : "changelog.resolved_many"].replace("{count}", String(g.rows.length)) })
+      ] }),
+      /* @__PURE__ */ jsx5("ul", { class: "mine-rows", children: g.rows.map((row) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(ReportRow, { row, strings, onClick: () => onSelect(row) }) })) })
+    ] }, g.weekKey)) })
+  ] });
+}
+
+// src/widget/Fab.tsx
+import { jsx as jsx6 } from "preact/jsx-runtime";
+function ChatBubbleIcon() {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx6(
+        "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",
+          fill: "currentColor"
         }
       )
     }
   );
 }
 function Fab({ label, onClick }) {
-  return /* @__PURE__ */ jsx3("button", { type: "button", class: "fab", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsx3(ChatBubbleIcon, {}) });
+  return /* @__PURE__ */ jsx6("button", { type: "button", class: "fab", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsx6(ChatBubbleIcon, {}) });
 }
 
 // src/widget/Form.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "preact/hooks";
 
 // src/widget/Annotator.tsx
-import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState2 } from "preact/hooks";
-import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { useEffect as useEffect4, useLayoutEffect, useRef as useRef3, useState as useState4 } from "preact/hooks";
+import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
 var COLORS = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#ffffff"];
 var HIGHLIGHT_ALPHA = 0.35;
 function drawShape(ctx, shape, sourceImage) {
@@ -1063,44 +1928,44 @@ function drawBlur(ctx, shape, sourceImage) {
   ctx.imageSmoothingEnabled = true;
 }
 var Icon = {
-  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" }) }),
-  highlight: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx4("path", { d: "M3 13l3-3L11 5l-2-2-5 5-3 3v2h2zM10 4l2 2", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsx4("path", { d: "M2 14h12", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })
+  rect: /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("rect", { x: "2", y: "3", width: "12", height: "10", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }) }),
+  arrow: /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "M2 8h11M9 4l4 4-4 4", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  pencil: /* @__PURE__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "M3 3h10M8 3v10M5 13h6", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }),
+  highlight: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx7("path", { d: "M3 13l3-3L11 5l-2-2-5 5-3 3v2h2zM10 4l2 2", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+    /* @__PURE__ */ jsx7("path", { d: "M2 14h12", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })
   ] }),
-  blur: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx4("rect", { x: "2", y: "2", width: "4", height: "4", fill: "currentColor", opacity: "0.85" }),
-    /* @__PURE__ */ jsx4("rect", { x: "7", y: "2", width: "3", height: "3", fill: "currentColor", opacity: "0.55" }),
-    /* @__PURE__ */ jsx4("rect", { x: "11", y: "2", width: "3", height: "4", fill: "currentColor", opacity: "0.4" }),
-    /* @__PURE__ */ jsx4("rect", { x: "2", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.6" }),
-    /* @__PURE__ */ jsx4("rect", { x: "6", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.85" }),
-    /* @__PURE__ */ jsx4("rect", { x: "10", y: "7", width: "4", height: "3", fill: "currentColor", opacity: "0.5" }),
-    /* @__PURE__ */ jsx4("rect", { x: "2", y: "11", width: "4", height: "3", fill: "currentColor", opacity: "0.4" }),
-    /* @__PURE__ */ jsx4("rect", { x: "7", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.65" }),
-    /* @__PURE__ */ jsx4("rect", { x: "11", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.85" })
+  blur: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx7("rect", { x: "2", y: "2", width: "4", height: "4", fill: "currentColor", opacity: "0.85" }),
+    /* @__PURE__ */ jsx7("rect", { x: "7", y: "2", width: "3", height: "3", fill: "currentColor", opacity: "0.55" }),
+    /* @__PURE__ */ jsx7("rect", { x: "11", y: "2", width: "3", height: "4", fill: "currentColor", opacity: "0.4" }),
+    /* @__PURE__ */ jsx7("rect", { x: "2", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.6" }),
+    /* @__PURE__ */ jsx7("rect", { x: "6", y: "7", width: "3", height: "3", fill: "currentColor", opacity: "0.85" }),
+    /* @__PURE__ */ jsx7("rect", { x: "10", y: "7", width: "4", height: "3", fill: "currentColor", opacity: "0.5" }),
+    /* @__PURE__ */ jsx7("rect", { x: "2", y: "11", width: "4", height: "3", fill: "currentColor", opacity: "0.4" }),
+    /* @__PURE__ */ jsx7("rect", { x: "7", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.65" }),
+    /* @__PURE__ */ jsx7("rect", { x: "11", y: "11", width: "3", height: "3", fill: "currentColor", opacity: "0.85" })
   ] }),
-  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" }) }),
-  redo: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M12 7l-3-3M12 7l-3 3M12 7H6a3 3 0 0 0 0 6h2", 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" }) })
+  undo: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("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" }) }),
+  redo: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "M12 7l-3-3M12 7l-3 3M12 7H6a3 3 0 0 0 0 6h2", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }),
+  trash: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("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__ */ jsx7("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("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 = 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 [past, setPast] = useState2([]);
-  const [future, setFuture] = useState2([]);
-  const isDrawingRef = useRef2(false);
-  const [draftShape, setDraftShape] = useState2(null);
-  const [imageLoaded, setImageLoaded] = useState2(false);
-  const [saving, setSaving] = useState2(false);
-  const scaleRef = useRef2(1);
+  const canvasRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const imageRef = useRef3(null);
+  const [tool, setTool] = useState4("rectangle");
+  const [color, setColor] = useState4(COLORS[0]);
+  const [shapes, setShapes] = useState4([]);
+  const [past, setPast] = useState4([]);
+  const [future, setFuture] = useState4([]);
+  const isDrawingRef = useRef3(false);
+  const [draftShape, setDraftShape] = useState4(null);
+  const [imageLoaded, setImageLoaded] = useState4(false);
+  const [saving, setSaving] = useState4(false);
+  const scaleRef = useRef3(1);
   function addShape(shape) {
     setShapes((s) => {
       setPast((p) => [...p, s]);
@@ -1147,7 +2012,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onCancel]);
-  useEffect2(() => {
+  useEffect4(() => {
     const onKey = (e) => {
       const mod = e.metaKey || e.ctrlKey;
       if (!mod) return;
@@ -1166,7 +2031,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [past, future, shapes]);
-  useEffect2(() => {
+  useEffect4(() => {
     const url = URL.createObjectURL(imageBlob);
     const img = new Image();
     img.onload = () => {
@@ -1176,7 +2041,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     img.src = url;
     return () => URL.revokeObjectURL(url);
   }, [imageBlob]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!imageLoaded || !canvasRef.current || !imageRef.current || !containerRef.current) {
       return;
     }
@@ -1193,7 +2058,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     canvas.style.height = `${img.height * fitScale}px`;
     redraw();
   }, [imageLoaded]);
-  useEffect2(() => {
+  useEffect4(() => {
     redraw();
   }, [shapes, draftShape]);
   function redraw() {
@@ -1319,7 +2184,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
     { id: "highlight", icon: Icon.highlight, label: strings["annotator.tool.highlight"] },
     { id: "blur", icon: Icon.blur, label: strings["annotator.tool.blur"] }
   ];
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       class: "annotator-backdrop",
@@ -1327,10 +2192,10 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
       onClick: (e) => {
         if (e.target === e.currentTarget) onCancel();
       },
-      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(
+      children: /* @__PURE__ */ jsxs6("div", { class: "annotator", role: "dialog", "aria-modal": "true", "aria-label": strings["annotator.title"], children: [
+        /* @__PURE__ */ jsxs6("div", { class: "annotator-header", children: [
+          /* @__PURE__ */ jsx7("span", { children: strings["annotator.title"] }),
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1341,8 +2206,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { class: "annotator-toolbar", children: [
-          /* @__PURE__ */ jsx4("div", { class: "annotator-tools", children: tools.map((t) => /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs6("div", { class: "annotator-toolbar", children: [
+          /* @__PURE__ */ jsx7("div", { class: "annotator-tools", children: tools.map((t) => /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1355,9 +2220,9 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             },
             t.id
           )) }),
-          /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
-          /* @__PURE__ */ jsxs3("div", { class: "annotator-colors", children: [
-            COLORS.map((c) => /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx7("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsxs6("div", { class: "annotator-colors", children: [
+            COLORS.map((c) => /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1369,7 +2234,7 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               },
               c
             )),
-            /* @__PURE__ */ jsx4("label", { class: "annotator-color annotator-color-picker", title: strings["annotator.color_picker"], children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx7("label", { class: "annotator-color annotator-color-picker", title: strings["annotator.color_picker"], children: /* @__PURE__ */ jsx7(
               "input",
               {
                 type: "color",
@@ -1379,8 +2244,8 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx4("span", { class: "annotator-sep" }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx7("span", { class: "annotator-sep" }),
+          /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -1390,11 +2255,11 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               title: strings["annotator.undo"],
               children: [
                 Icon.undo,
-                /* @__PURE__ */ jsx4("span", { children: strings["annotator.undo"] })
+                /* @__PURE__ */ jsx7("span", { children: strings["annotator.undo"] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -1404,11 +2269,11 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               title: strings["annotator.redo"],
               children: [
                 Icon.redo,
-                /* @__PURE__ */ jsx4("span", { children: strings["annotator.redo"] })
+                /* @__PURE__ */ jsx7("span", { children: strings["annotator.redo"] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs6(
             "button",
             {
               type: "button",
@@ -1417,18 +2282,18 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
               disabled: shapes.length === 0,
               children: [
                 Icon.trash,
-                /* @__PURE__ */ jsx4("span", { children: strings["annotator.clear"] })
+                /* @__PURE__ */ jsx7("span", { children: strings["annotator.clear"] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx4("span", { class: "annotator-spacer" }),
-          /* @__PURE__ */ jsxs3("span", { class: "annotator-count", children: [
+          /* @__PURE__ */ jsx7("span", { class: "annotator-spacer" }),
+          /* @__PURE__ */ jsxs6("span", { class: "annotator-count", children: [
             shapes.length,
             " ",
             strings["annotator.count_suffix"]
           ] })
         ] }),
-        /* @__PURE__ */ jsx4("div", { ref: containerRef, class: "annotator-canvas-wrap", children: !imageLoaded ? /* @__PURE__ */ jsx4("span", { class: "annotator-loading", children: strings["annotator.loading"] }) : /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx7("div", { ref: containerRef, class: "annotator-canvas-wrap", children: !imageLoaded ? /* @__PURE__ */ jsx7("span", { class: "annotator-loading", children: strings["annotator.loading"] }) : /* @__PURE__ */ jsx7(
           "canvas",
           {
             ref: canvasRef,
@@ -1439,9 +2304,9 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
             class: "annotator-canvas"
           }
         ) }),
-        /* @__PURE__ */ jsxs3("div", { class: "annotator-footer", children: [
-          /* @__PURE__ */ jsx4("button", { type: "button", class: "btn", onClick: onCancel, children: strings["form.cancel"] }),
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs6("div", { class: "annotator-footer", children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", class: "btn", onClick: onCancel, children: strings["form.cancel"] }),
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1457,55 +2322,32 @@ function Annotator({ imageBlob, strings, onSave, onCancel }) {
   );
 }
 
-// src/widget/screenshot-utils.ts
-var ALLOWED_IMAGE_TYPES = [
-  "image/png",
-  "image/jpeg",
-  "image/webp"
-];
-var MAX_SCREENSHOT_BYTES = 10 * 1024 * 1024;
-function validateScreenshotFile(file) {
-  if (!ALLOWED_IMAGE_TYPES.includes(
-    file.type
-  )) {
-    return { kind: "type" };
-  }
-  if (file.size > MAX_SCREENSHOT_BYTES) {
-    return { kind: "size", maxMb: MAX_SCREENSHOT_BYTES / (1024 * 1024) };
-  }
-  return null;
-}
-function truncateUrl(url, maxLength = 80) {
-  if (url.length <= maxLength) return url;
-  const keepStart = Math.floor((maxLength - 1) / 2);
-  const keepEnd = maxLength - 1 - keepStart;
-  return `${url.slice(0, keepStart)}\u2026${url.slice(url.length - keepEnd)}`;
-}
-
 // src/widget/Form.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
-var TYPES = ["bug", "feature", "question", "praise", "typo"];
-var SEVERITIES = ["blocker", "high", "medium", "low"];
+import { jsx as jsx8, jsxs as jsxs7 } from "preact/jsx-runtime";
+var TYPES2 = ["bug", "feature", "question", "praise", "typo"];
+var SEVERITIES2 = ["blocker", "high", "medium", "low"];
 function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
-  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 [description, setDescription] = useState5("");
+  const [feedbackType, setFeedbackType] = useState5("bug");
+  const [severity, setSeverity] = useState5("medium");
+  const [localError, setLocalError] = useState5("");
+  const [screenshotBlob, setScreenshotBlob] = useState5(null);
+  const [screenshotPreview, setScreenshotPreview] = useState5(null);
+  const [screenshotMethod, setScreenshotMethod] = useState5("manual");
+  const [isDragOver, setIsDragOver] = useState5(false);
+  const [annotatorOpen, setAnnotatorOpen] = useState5(false);
+  const [capturing, setCapturing] = useState5(false);
+  const fileInputRef = useRef4(null);
+  const dropZoneRef = useRef4(null);
   const submitting = status === "submitting";
   const submitLabel = submitting ? strings["form.submitting"] : strings["form.submit"];
   const pageUrl = typeof window !== "undefined" ? window.location.href : "";
-  useEffect3(() => {
+  useEffect5(() => {
     return () => {
       if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     };
   }, [screenshotPreview]);
-  const acceptFile = (file) => {
+  const acceptFile = (file, method = "manual") => {
     setLocalError("");
     if (file instanceof File) {
       const err = validateScreenshotFile(file);
@@ -1519,14 +2361,41 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     setScreenshotBlob(file);
     setScreenshotPreview(URL.createObjectURL(file));
+    setScreenshotMethod(method);
   };
   const clearScreenshot = () => {
     if (screenshotPreview) URL.revokeObjectURL(screenshotPreview);
     setScreenshotPreview(null);
     setScreenshotBlob(null);
+    setScreenshotMethod("manual");
     setLocalError("");
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
+  const handleCapturePage = async () => {
+    if (capturing) return;
+    setLocalError("");
+    setCapturing(true);
+    try {
+      const blob = await captureWithDisplayMedia();
+      if (!blob) {
+        if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
+          setLocalError(strings["form.screenshot.capture_error"]);
+        }
+        return;
+      }
+      if (blob.size > 10 * 1024 * 1024) {
+        setLocalError(
+          strings["form.screenshot.error_size"].replace("{max}", "10")
+        );
+        return;
+      }
+      acceptFile(blob, "display_media");
+    } catch {
+      setLocalError(strings["form.screenshot.capture_error"]);
+    } finally {
+      setCapturing(false);
+    }
+  };
   const handleFileInputChange = (e) => {
     const file = e.target.files?.[0];
     if (file) acceptFile(file);
@@ -1548,7 +2417,7 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
     const file = e.dataTransfer?.files?.[0];
     if (file) acceptFile(file);
   };
-  useEffect3(() => {
+  useEffect5(() => {
     const zone = dropZoneRef.current;
     if (!zone) return;
     const onPaste = (e) => {
@@ -1586,14 +2455,17 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
       feedback_type: feedbackType,
       severity
     };
-    if (screenshotBlob) values.screenshot = screenshotBlob;
+    if (screenshotBlob) {
+      values.screenshot = screenshotBlob;
+      values.capture_method = screenshotMethod;
+    }
     onSubmit(values);
   };
-  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(
+  return /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx8("h2", { children: strings["form.title"] }),
+    /* @__PURE__ */ jsxs7("div", { class: "field", children: [
+      /* @__PURE__ */ jsx8("label", { for: "mfb-desc", children: strings["form.description.label"] }),
+      /* @__PURE__ */ jsx8(
         "textarea",
         {
           id: "mfb-desc",
@@ -1603,35 +2475,35 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
         }
       )
     ] }),
-    /* @__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(
+    /* @__PURE__ */ jsxs7("div", { class: "row", children: [
+      /* @__PURE__ */ jsxs7("div", { class: "field", children: [
+        /* @__PURE__ */ jsx8("label", { for: "mfb-type", children: strings["form.type.label"] }),
+        /* @__PURE__ */ jsx8(
           "select",
           {
             id: "mfb-type",
             value: feedbackType,
             onChange: (e) => setFeedbackType(e.target.value),
-            children: TYPES.map((t) => /* @__PURE__ */ jsx5("option", { value: t, children: strings[`type.${t}`] }))
+            children: TYPES2.map((t) => /* @__PURE__ */ jsx8("option", { value: t, children: strings[`type.${t}`] }))
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs4("div", { class: "field", children: [
-        /* @__PURE__ */ jsx5("label", { for: "mfb-sev", children: strings["form.severity.label"] }),
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs7("div", { class: "field", children: [
+        /* @__PURE__ */ jsx8("label", { for: "mfb-sev", children: strings["form.severity.label"] }),
+        /* @__PURE__ */ jsx8(
           "select",
           {
             id: "mfb-sev",
             value: severity,
             onChange: (e) => setSeverity(e.target.value),
-            children: SEVERITIES.map((s) => /* @__PURE__ */ jsx5("option", { value: s, children: strings[`severity.${s}`] }))
+            children: SEVERITIES2.map((s) => /* @__PURE__ */ jsx8("option", { value: s, children: strings[`severity.${s}`] }))
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { class: "field", children: [
-      /* @__PURE__ */ jsx5("label", { children: strings["form.screenshot.label"] }),
-      /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs7("div", { class: "field", children: [
+      /* @__PURE__ */ jsx8("label", { children: strings["form.screenshot.label"] }),
+      /* @__PURE__ */ jsx8(
         "input",
         {
           ref: fileInputRef,
@@ -1643,30 +2515,30 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           tabIndex: -1
         }
       ),
-      screenshotPreview ? /* @__PURE__ */ jsxs4("div", { class: "screenshot-preview", children: [
-        /* @__PURE__ */ jsx5("img", { src: screenshotPreview, alt: "" }),
-        /* @__PURE__ */ jsxs4("div", { class: "screenshot-preview-actions", children: [
-          /* @__PURE__ */ jsxs4(
+      screenshotPreview ? /* @__PURE__ */ jsxs7("div", { class: "screenshot-preview", children: [
+        /* @__PURE__ */ jsx8("img", { src: screenshotPreview, alt: "" }),
+        /* @__PURE__ */ jsxs7("div", { class: "screenshot-preview-actions", children: [
+          /* @__PURE__ */ jsxs7(
             "button",
             {
               type: "button",
               class: "btn btn--primary screenshot-annotate",
               onClick: () => setAnnotatorOpen(true),
               children: [
-                /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx5("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-                  /* @__PURE__ */ jsx5("path", { d: "M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+                /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx8("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                  /* @__PURE__ */ jsx8("path", { d: "M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
                 ] }),
                 strings["form.screenshot.annotate"]
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4("button", { type: "button", class: "btn", onClick: clearScreenshot, children: [
-            /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14z" }) }),
+          /* @__PURE__ */ jsxs7("button", { type: "button", class: "btn", onClick: clearScreenshot, children: [
+            /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14z" }) }),
             strings["form.screenshot.remove"]
           ] })
         ] })
-      ] }) : /* @__PURE__ */ jsxs4(
+      ] }) : /* @__PURE__ */ jsxs7(
         "div",
         {
           ref: dropZoneRef,
@@ -1685,33 +2557,69 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
           onDragLeave: handleDragLeave,
           onDrop: handleDrop,
           children: [
-            /* @__PURE__ */ jsxs4("svg", { class: "screenshot-icon", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-              /* @__PURE__ */ jsx5("polyline", { points: "17 8 12 3 7 8" }),
-              /* @__PURE__ */ jsx5("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+            /* @__PURE__ */ jsxs7("svg", { class: "screenshot-icon", width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx8("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx8("polyline", { points: "17 8 12 3 7 8" }),
+              /* @__PURE__ */ jsx8("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
             ] }),
-            /* @__PURE__ */ jsxs4("div", { class: "screenshot-cta", children: [
-              /* @__PURE__ */ jsx5("strong", { children: strings["form.screenshot.cta_click"] }),
+            /* @__PURE__ */ jsxs7("div", { class: "screenshot-cta", children: [
+              /* @__PURE__ */ jsx8("strong", { children: strings["form.screenshot.cta_click"] }),
               ", ",
               strings["form.screenshot.cta_rest"]
             ] }),
-            /* @__PURE__ */ jsx5("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
+            /* @__PURE__ */ jsx8("div", { class: "screenshot-formats", children: strings["form.screenshot.formats"] })
           ]
         }
-      )
+      ),
+      !screenshotPreview && /* @__PURE__ */ jsxs7("div", { class: "screenshot-alt", children: [
+        /* @__PURE__ */ jsx8("span", { class: "screenshot-or", children: strings["form.screenshot.or"] }),
+        /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            class: "btn btn--ghost screenshot-capture-page",
+            onClick: handleCapturePage,
+            disabled: capturing || submitting,
+            "aria-label": strings["form.screenshot.capture_page"],
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx8("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ jsx8("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+                    /* @__PURE__ */ jsx8("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+                  ]
+                }
+              ),
+              capturing ? strings["form.submitting"] : strings["form.screenshot.capture_page"]
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8("span", { class: "screenshot-capture-hint", children: strings["form.screenshot.capture_page_hint"] })
+      ] })
     ] }),
-    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) })
+    pageUrl && /* @__PURE__ */ jsxs7("div", { class: "page-context", title: pageUrl, children: [
+      /* @__PURE__ */ jsx8("span", { class: "page-context-label", children: strings["form.context.label"] }),
+      /* @__PURE__ */ jsx8("span", { class: "page-context-url", children: truncateUrl(pageUrl, 90) })
     ] }),
-    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 })
+    localError && /* @__PURE__ */ jsx8("div", { class: "error", children: localError }),
+    status === "error" && errorMessage && /* @__PURE__ */ jsx8("div", { class: "error", children: errorMessage }),
+    status === "success" && /* @__PURE__ */ jsx8("div", { class: "success", children: strings["form.success"] }),
+    /* @__PURE__ */ jsxs7("div", { class: "actions", children: [
+      /* @__PURE__ */ jsx8("button", { type: "button", class: "btn", onClick: onCancel, disabled: submitting, children: strings["form.cancel"] }),
+      /* @__PURE__ */ jsx8("button", { type: "submit", class: "btn btn--primary", disabled: submitting, children: submitLabel })
     ] }),
-    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx5(
+    annotatorOpen && screenshotBlob && /* @__PURE__ */ jsx8(
       Annotator,
       {
         imageBlob: screenshotBlob,
@@ -1724,10 +2632,10 @@ function Form({ strings, onSubmit, onCancel, status, errorMessage }) {
 }
 
 // src/widget/MineList.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "preact/hooks";
+import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "preact/hooks";
 
 // src/widget/KpiStrip.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "preact/jsx-runtime";
 function computeKpiCounts(rows) {
   const counts = {
     new: 0,
@@ -1794,468 +2702,151 @@ function KpiStrip({ rows, filter, onFilter, strings }) {
       value: resolutionRate === null ? "\u2014" : `${resolutionRate}%`
     }
   ];
-  return /* @__PURE__ */ jsx6("div", { class: "kpi-strip", role: "toolbar", children: cells.map((c) => {
+  return /* @__PURE__ */ jsx9("div", { class: "kpi-strip", role: "toolbar", children: cells.map((c) => {
     const active = filter === c.key;
     const toggleTo = active ? "all" : c.key;
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs8(
       "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 jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
-var POLL_MS2 = 3e4;
-function MineList({ api, externalId, strings, onSelect }) {
-  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);
-    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);
-    }
-  };
-  useEffect4(() => {
-    mountedRef.current = true;
-    void fetchRows();
-    const timer = setInterval(() => {
-      void fetchRows();
-    }, POLL_MS2);
-    return () => {
-      mountedRef.current = false;
-      clearInterval(timer);
-    };
-  }, [externalId]);
-  const isEmpty = rows !== null && rows.length === 0;
-  const isLoading = rows === null && !error;
-  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",
-          class: "btn",
-          onClick: () => {
-            void fetchRows();
-          },
-          disabled: refreshing,
-          children: refreshing ? strings["mine.loading"] : strings["mine.refresh"]
-        }
-      )
-    ] }),
-    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"] })
-    ] }),
-    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 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 = useRef5(null);
-  const previouslyFocused = useRef5(null);
-  useEffect5(() => {
-    previouslyFocused.current = document.activeElement;
-    const onKey = (e) => {
-      if (e.key !== "Escape") return;
-      const root = modalRef.current?.getRootNode();
-      if (root instanceof ShadowRoot && root.querySelector(".annotator-backdrop")) {
-        return;
-      }
-      e.stopPropagation();
-      onDismiss();
-    };
-    window.addEventListener("keydown", onKey);
-    const first = modalRef.current?.querySelector(
-      "textarea, input, select, button"
-    );
-    first?.focus();
-    return () => {
-      window.removeEventListener("keydown", onKey);
-      const prev = previouslyFocused.current;
-      if (prev && typeof prev.focus === "function") prev.focus();
-    };
-  }, [onDismiss]);
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      class: "backdrop",
-      role: "presentation",
-      onClick: (e) => {
-        if (e.target === e.currentTarget) onDismiss();
-      },
-      children: /* @__PURE__ */ jsxs7("div", { ref: modalRef, class: "modal", role: "dialog", "aria-modal": "true", children: [
-        /* @__PURE__ */ jsx8(
-          "button",
-          {
-            type: "button",
-            class: "modal-close",
-            "aria-label": closeLabel,
-            onClick: onDismiss,
-            children: "\xD7"
-          }
-        ),
-        children
-      ] })
-    }
-  );
-}
-
-// src/widget/ReportDetailView.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "preact/hooks";
-
-// src/widget/CommentBubble.tsx
-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";
-  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__ */ 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) {
-  try {
-    return new Date(iso).toLocaleString(void 0, {
-      dateStyle: "short",
-      timeStyle: "short"
-    });
-  } catch {
-    return iso;
-  }
-}
-
-// src/widget/ReportDetailView.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs9 } from "preact/jsx-runtime";
-var POLL_MS3 = 3e4;
-function ReportDetailView({
-  api,
-  externalId,
-  reportId,
-  strings,
-  onBack
-}) {
-  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);
-      if (!mountedRef.current) return;
-      setDetail(next);
-      setError(null);
-    } catch (err) {
-      if (!mountedRef.current) return;
-      setError(err instanceof Error ? err.message : "load_failed");
-    }
-  };
-  useEffect6(() => {
-    mountedRef.current = true;
-    void fetchDetail();
-    const timer = setInterval(() => {
-      void fetchDetail();
-    }, POLL_MS3);
-    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);
+        children: [
+          /* @__PURE__ */ jsx9("span", { class: "kpi-value", children: c.value }),
+          /* @__PURE__ */ jsx9("span", { class: "kpi-label", children: c.label })
+        ]
+      }
+    );
+  }) });
+}
+
+// src/widget/MineList.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "preact/jsx-runtime";
+var POLL_MS4 = 3e4;
+function MineList({ api, externalId, strings, onSelect }) {
+  const [rows, setRows] = useState6(null);
+  const [error, setError] = useState6(null);
+  const [refreshing, setRefreshing] = useState6(false);
+  const [filter, setFilter] = useState6("all");
+  const mountedRef = useRef5(true);
+  const fetchRows = async () => {
+    setRefreshing(true);
+    setError(null);
     try {
-      const next = await api.closeAsResolved(reportId, externalId);
+      const next = await api.listMine(externalId);
       if (!mountedRef.current) return;
-      setDetail(next);
+      setRows(next);
     } catch (err) {
       if (!mountedRef.current) return;
-      setError(err instanceof Error ? err.message : "close_failed");
+      setError(err instanceof Error ? err.message : strings["mine.error"]);
     } finally {
-      if (mountedRef.current) setClosing(false);
+      if (mountedRef.current) setRefreshing(false);
     }
   };
-  if (!detail && !error) {
-    return /* @__PURE__ */ jsx10("div", { class: "mine-loading", children: strings["mine.loading"] });
-  }
-  if (!detail) {
-    return /* @__PURE__ */ jsx10("div", { class: "error", role: "alert", children: error });
-  }
-  const showCloseCta = detail.status === "awaiting_validation";
-  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__ */ jsx10("span", { class: `pill pill-status pill-status--${detail.status}`, children: strings[`status.${detail.status}`] ?? detail.status })
-    ] }),
-    /* @__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",
+  useEffect6(() => {
+    mountedRef.current = true;
+    void fetchRows();
+    const timer = setInterval(() => {
+      void fetchRows();
+    }, POLL_MS4);
+    return () => {
+      mountedRef.current = false;
+      clearInterval(timer);
+    };
+  }, [externalId]);
+  const isEmpty = rows !== null && rows.length === 0;
+  const isLoading = rows === null && !error;
+  const visibleRows = rows ? rowsMatchingFilter(rows, filter) : null;
+  const visibleEmpty = !!rows && rows.length > 0 && (visibleRows?.length ?? 0) === 0;
+  return /* @__PURE__ */ jsxs9("div", { class: "mine-list", children: [
+    /* @__PURE__ */ jsxs9("div", { class: "mine-list-header", children: [
+      /* @__PURE__ */ jsx10("h2", { children: strings["tab.mine"] }),
+      /* @__PURE__ */ jsx10(
+        "button",
         {
-          class: "report-detail-screenshot",
-          href: detail.screenshot_url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: /* @__PURE__ */ jsx10("img", { src: detail.screenshot_url, alt: "", loading: "lazy" })
+          type: "button",
+          class: "btn",
+          onClick: () => {
+            void fetchRows();
+          },
+          disabled: refreshing,
+          children: refreshing ? strings["mine.loading"] : strings["mine.refresh"]
         }
-      ),
-      /* @__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,
-            placeholder: strings["detail.compose_placeholder"],
-            onInput: (e) => setComposeBody(e.target.value),
-            disabled: sending
-          }
-        ),
-        /* @__PURE__ */ jsxs9("div", { class: "report-compose-actions", children: [
-          showCloseCta && /* @__PURE__ */ jsx10(
-            "button",
-            {
-              type: "button",
-              class: "btn",
-              onClick: handleClose,
-              disabled: closing,
-              children: closing ? strings["detail.close_busy"] : strings["detail.close_cta"]
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            "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__ */ jsx10("div", { class: "error", children: error })
-    ] })
-  ] });
-}
-function appendComment(current, next) {
-  if (current.some((c) => c.id === next.id)) return current;
-  return [...current, next];
-}
-function ContextBlock({ detail, strings }) {
-  const captureKey = `detail.context.capture.${detail.capture_method}`;
-  const captureLabel = strings[captureKey] ?? detail.capture_method;
-  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__ */ 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) })
+    rows && rows.length > 0 && /* @__PURE__ */ jsx10(KpiStrip, { rows, filter, onFilter: setFilter, strings }),
+    isLoading && /* @__PURE__ */ jsx10("div", { class: "mine-loading", children: strings["mine.loading"] }),
+    error && /* @__PURE__ */ jsx10("div", { class: "error", children: error }),
+    isEmpty && /* @__PURE__ */ jsxs9("div", { class: "mine-empty", children: [
+      /* @__PURE__ */ jsx10("strong", { children: strings["mine.empty.title"] }),
+      /* @__PURE__ */ jsx10("p", { children: strings["mine.empty.body"] })
     ] }),
-    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",
+    visibleEmpty && /* @__PURE__ */ jsx10("div", { class: "mine-empty", children: /* @__PURE__ */ jsx10("p", { children: strings["mine.filter.empty"] }) }),
+    visibleRows && visibleRows.length > 0 && /* @__PURE__ */ jsx10("ul", { class: "mine-rows", children: visibleRows.map((row) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(ReportRow, { row, strings, onClick: () => onSelect(row) }) })) })
+  ] });
+}
+
+// src/widget/Modal.tsx
+import { useEffect as useEffect7, useRef as useRef6 } from "preact/hooks";
+import { jsx as jsx11, jsxs as jsxs10 } from "preact/jsx-runtime";
+function Modal({ onDismiss, children, closeLabel = "Close", expanded = false }) {
+  const modalRef = useRef6(null);
+  const previouslyFocused = useRef6(null);
+  useEffect7(() => {
+    previouslyFocused.current = document.activeElement;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      const root = modalRef.current?.getRootNode();
+      if (root instanceof ShadowRoot && root.querySelector(".annotator-backdrop")) {
+        return;
+      }
+      e.stopPropagation();
+      onDismiss();
+    };
+    window.addEventListener("keydown", onKey);
+    const first = modalRef.current?.querySelector(
+      "textarea, input, select, button"
+    );
+    first?.focus();
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      const prev = previouslyFocused.current;
+      if (prev && typeof prev.focus === "function") prev.focus();
+    };
+  }, [onDismiss]);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      class: `backdrop ${expanded ? "is-expanded" : ""}`,
+      role: "presentation",
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onDismiss();
+      },
+      children: /* @__PURE__ */ jsxs10(
+        "div",
         {
-          class: "report-detail-context-url",
-          href: detail.page_url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          children: truncateUrl(detail.page_url, 64)
+          ref: modalRef,
+          class: `modal ${expanded ? "is-expanded" : ""}`,
+          role: "dialog",
+          "aria-modal": "true",
+          children: [
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                class: "modal-close",
+                "aria-label": closeLabel,
+                onClick: onDismiss,
+                children: "\xD7"
+              }
+            ),
+            children
+          ]
         }
       )
-    ] })
-  ] });
-}
-function formatSubmittedAt(iso) {
-  try {
-    return new Date(iso).toLocaleString(void 0, {
-      dateStyle: "medium",
-      timeStyle: "short"
-    });
-  } catch {
-    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
@@ -2561,6 +3152,19 @@ var WIDGET_STYLES = `
   border-color: color-mix(in srgb, var(--mfb-accent) 88%, black);
 }
 
+/* Subdued button \u2014 borrows accent text but transparent background. Used
+ * for the "Capture this page" alt-action that sits below the dropzone,
+ * where a full --primary would compete with the form's main submit. */
+.btn--ghost {
+  background: transparent;
+  color: var(--mfb-accent);
+  border-color: color-mix(in srgb, var(--mfb-accent) 40%, transparent);
+}
+.btn--ghost:hover {
+  background: color-mix(in srgb, var(--mfb-accent) 8%, transparent);
+  border-color: var(--mfb-accent);
+}
+
 .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
 
 .error { color: #dc2626; font-size: 13px; }
@@ -2624,6 +3228,40 @@ var WIDGET_STYLES = `
 .screenshot-cta strong { color: var(--mfb-accent); font-weight: 600; }
 .screenshot-formats { font-size: var(--mfb-text-xs); color: var(--mfb-text-muted); }
 
+/* "or \u2014 Capture this page" row sits below the dropzone. The thin "or"
+ * separator borrows the pattern from auth forms so the second option
+ * reads as an alternative, not a follow-up step. v0.12. */
+.screenshot-alt {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.screenshot-or {
+  position: relative;
+  font-size: var(--mfb-text-xs);
+  color: var(--mfb-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0 4px;
+}
+.screenshot-capture-page {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.screenshot-capture-page:disabled {
+  opacity: 0.55;
+  cursor: progress;
+}
+.screenshot-capture-hint {
+  font-size: var(--mfb-text-xs);
+  color: var(--mfb-text-muted);
+  flex: 1 1 100%;
+  margin-top: 4px;
+}
+
 .screenshot-preview {
   position: relative;
   border: 1px solid var(--mfb-border);
@@ -2890,7 +3528,17 @@ var WIDGET_STYLES = `
 }
 .tab-button[aria-selected="true"] { font-weight: 600; }
 
-.mine-list { display: flex; flex-direction: column; gap: var(--mfb-space-3); }
+.mine-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mfb-space-3);
+  /* Matches .board-view's entrance so switching tabs feels like a real
+   * page transition rather than a flicker. */
+  animation: mfb-board-in 280ms ease-out 40ms both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .mine-list { animation: none; }
+}
 .mine-list-header {
   display: flex;
   align-items: center;
@@ -2930,9 +3578,19 @@ var WIDGET_STYLES = `
   flex-direction: column;
   gap: 4px;
   width: 100%;
-  transition: border-color 120ms ease, background 120ms ease;
+  transition:
+    border-color 140ms ease,
+    background 140ms ease,
+    transform 100ms ease,
+    box-shadow 140ms ease;
+}
+.mine-row:hover {
+  border-color: var(--mfb-border-strong);
+  background: var(--mfb-bg);
+  transform: translateY(-1px);
+  box-shadow: var(--mfb-shadow);
 }
-.mine-row:hover { border-color: var(--mfb-text-muted); }
+.mine-row:active { transform: scale(0.997); }
 .mine-row:focus-visible {
   outline: 2px solid var(--mfb-accent);
   outline-offset: 2px;
@@ -3300,7 +3958,7 @@ var WIDGET_STYLES = `
   background: var(--mfb-bg);
   border: 1px solid var(--mfb-border);
   border-radius: var(--mfb-radius);
-  padding: 8px 6px;
+  padding: 10px 10px 10px 14px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -3308,9 +3966,36 @@ var WIDGET_STYLES = `
   gap: 2px;
   font-family: inherit;
   color: inherit;
-  transition: background 120ms, border-color 120ms;
+  position: relative;
+  overflow: hidden;
+  transition:
+    background 140ms ease,
+    border-color 140ms ease,
+    transform 100ms ease,
+    box-shadow 140ms ease;
+}
+.kpi-cell::before {
+  /* Vertical tone accent \u2014 matches the Board KPI cards' visual rhythm so
+   * the two surfaces feel like they belong to the same product. v0.12
+   * polish pass. */
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--mfb-border);
+  transition: background 140ms ease;
+}
+.kpi-cell--new::before { background: #3b82f6; }
+.kpi-cell--in_progress::before { background: #f59e0b; }
+.kpi-cell--awaiting_validation::before { background: #a855f7; }
+.kpi-cell--resolved::before { background: #10b981; }
+.kpi-cell:hover {
+  background: var(--mfb-surface);
+  transform: translateY(-1px);
+  box-shadow: var(--mfb-shadow);
 }
-.kpi-cell:hover { background: var(--mfb-surface); }
 .kpi-cell.is-active {
   border-color: var(--mfb-accent);
   background: rgba(59, 130, 246, 0.08);
@@ -3338,6 +4023,10 @@ var WIDGET_STYLES = `
   display: flex;
   flex-direction: column;
   gap: 12px;
+  animation: mfb-board-in 280ms ease-out 40ms both;
+}
+@media (prefers-reduced-motion: reduce) {
+  .changelog-groups { animation: none; }
 }
 .changelog-group {
   display: flex;
@@ -3369,10 +4058,437 @@ var WIDGET_STYLES = `
   font-variant-numeric: tabular-nums;
   font-weight: 600;
 }
+
+/* ---- v0.12: Board tab + expanded modal ("transport" feel) ------------ */
+
+/* When the Board tab is active, the modal grows toward near-fullscreen
+ * on desktop and full-screen on mobile. The CSS transition gives the
+ * sense of clicking through to a real page rather than switching tabs.
+ * Width/height/max-* are animated together; padding too, since the
+ * board's denser layout needs less of the modal's default padding. */
+.modal.is-expanded {
+  width: min(1280px, calc(100vw - var(--mfb-space-5)));
+  max-height: calc(100vh - var(--mfb-space-5));
+  height: calc(100vh - var(--mfb-space-5));
+  padding: var(--mfb-space-5);
+  transition:
+    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 320ms cubic-bezier(0.22, 1, 0.36, 1),
+    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
+    padding 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal.is-expanded { transition: none; }
+}
+.backdrop.is-expanded { /* hook for any backdrop-level overrides */ }
+
+@media (max-width: 640px) {
+  .modal.is-expanded {
+    width: 100vw;
+    height: calc(100vh - var(--mfb-space-5));
+    border-radius: var(--mfb-radius-lg) var(--mfb-radius-lg) 0 0;
+  }
+}
+
+/* Decorative purple accent on the Board tab button so users discover
+ * it's a different surface \u2014 subtle, not loud. */
+.tab-button--board.is-active {
+  color: #6b21a8;
+  box-shadow: inset 0 -2px 0 0 #a855f7;
+}
+.tab-button--board:not(.is-active):hover {
+  color: #6b21a8;
+}
+
+/* ---- Board layout ---- */
+
+.board-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mfb-space-4);
+  flex: 1 1 auto;
+  min-height: 0; /* allow inner panes to scroll */
+  animation: mfb-board-in 280ms ease-out 40ms both;
+}
+@keyframes mfb-board-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .board-view { animation: none; }
+}
+
+.board-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mfb-space-4);
+}
+.board-header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.board-header-emoji {
+  font-size: 26px;
+  line-height: 1;
+}
+.board-header-h {
+  margin: 0;
+  font-size: var(--mfb-text-2xl);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.board-header-sub {
+  margin: 2px 0 0 0;
+  color: var(--mfb-text-muted);
+  font-size: var(--mfb-text-sm);
+}
+
+/* KPI strip \u2014 4 cards, equal width, subtle tone-tints by bucket. */
+.board-kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+.board-kpi-card {
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  padding: 14px 16px;
+  background: var(--mfb-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: transform 160ms ease, box-shadow 160ms ease;
+}
+.board-kpi-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: var(--mfb-border);
+  transition: background 160ms ease;
+}
+.board-kpi-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--mfb-shadow);
+}
+.board-kpi-card.tone-new::after { background: #3b82f6; }
+.board-kpi-card.tone-progress::after { background: #f59e0b; }
+.board-kpi-card.tone-validation::after { background: #a855f7; }
+.board-kpi-card.tone-rate::after { background: #10b981; }
+.board-kpi-value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--mfb-text);
+  font-variant-numeric: tabular-nums;
+}
+.board-kpi-label {
+  font-size: var(--mfb-text-xs);
+  color: var(--mfb-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+.board-kpi-strip.is-loading .board-kpi-value {
+  opacity: 0.35;
+}
+@media (max-width: 720px) {
+  .board-kpi-strip { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Filter row */
+.board-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.board-filter-select,
+.board-filter-search {
+  padding: 6px 10px;
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-bg);
+  color: var(--mfb-text);
+  font: inherit;
+  font-size: var(--mfb-text-sm);
+  height: 32px;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+.board-filter-select:focus-visible,
+.board-filter-search:focus-visible {
+  outline: none;
+  border-color: var(--mfb-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfb-accent) 18%, transparent);
+}
+.board-filter-search { min-width: 180px; flex: 1 1 220px; }
+.board-filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--mfb-text-sm);
+  color: var(--mfb-text);
+  cursor: pointer;
+  user-select: none;
+}
+.board-filter-toggle input { margin: 0; }
+.board-filter-clear {
+  background: transparent;
+  border: 0;
+  color: var(--mfb-text-muted);
+  font: inherit;
+  font-size: var(--mfb-text-sm);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: var(--mfb-radius);
+  transition: background 120ms ease, color 120ms ease;
+}
+.board-filter-clear:hover {
+  color: var(--mfb-text);
+  background: var(--mfb-surface);
+}
+
+/* Master/detail layout \u2014 two-column at >=900px, stacked below. */
+.board-body {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) 1fr;
+  gap: var(--mfb-space-4);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+@media (max-width: 900px) {
+  .board-body { grid-template-columns: 1fr; }
+  .board-detail-wrap:not(.has-selection) { display: none; }
+}
+
+.board-list-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  overflow: hidden;
+}
+.board-list-count {
+  font-size: var(--mfb-text-xs);
+  color: var(--mfb-text-muted);
+  padding: 0 4px;
+}
+.board-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+.board-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  text-align: left;
+  padding: 12px 14px;
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-bg);
+  border: 1px solid var(--mfb-border);
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  /* Stagger reveal on first paint. */
+  animation: mfb-row-in 280ms ease-out both;
+  transition: border-color 140ms ease, background 140ms ease, transform 80ms ease;
+}
+.board-row:hover {
+  border-color: var(--mfb-border-strong);
+  background: var(--mfb-surface);
+}
+.board-row:active { transform: scale(0.997); }
+.board-row.is-selected {
+  border-color: var(--mfb-accent);
+  background: color-mix(in srgb, var(--mfb-accent) 6%, var(--mfb-bg));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mfb-accent) 18%, transparent);
+}
+@keyframes mfb-row-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .board-row { animation: none; }
+}
+/* Stagger first 6 rows so the list reveals top-down. */
+.board-row:nth-child(1) { animation-delay: 0ms; }
+.board-row:nth-child(2) { animation-delay: 40ms; }
+.board-row:nth-child(3) { animation-delay: 80ms; }
+.board-row:nth-child(4) { animation-delay: 120ms; }
+.board-row:nth-child(5) { animation-delay: 160ms; }
+.board-row:nth-child(6) { animation-delay: 200ms; }
+
+.board-row-badges {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.board-row-description {
+  font-size: var(--mfb-text-sm);
+  color: var(--mfb-text);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.board-row-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--mfb-text-xs);
+  color: var(--mfb-text-muted);
+  flex-wrap: wrap;
+}
+.board-row-author { font-weight: 500; color: var(--mfb-text); }
+.board-row-comments {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-variant-numeric: tabular-nums;
+}
+.board-row-time { margin-left: auto; font-variant-numeric: tabular-nums; }
+
+/* Status / severity badges shared with the detail panel. The tones
+ * borrow PNR's badge palette \u2014 calm pastels that don't fight content. */
+.board-row-badges .badge {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #374151;
+  text-transform: lowercase;
+}
+.badge.status-new { background: #dbeafe; color: #1e40af; }
+.badge.status-in_progress { background: #fef3c7; color: #92400e; }
+.badge.status-awaiting_validation { background: #ede9fe; color: #6b21a8; }
+.badge.status-closed { background: #d1fae5; color: #065f46; }
+.badge.status-rejected { background: #fee2e2; color: #991b1b; }
+.badge.status-duplicate { background: #f3f4f6; color: #4b5563; }
+.badge.status-wontfix { background: #f3f4f6; color: #4b5563; }
+.badge.severity-blocker { background: #fee2e2; color: #991b1b; }
+.badge.severity-high { background: #fee2e2; color: #b91c1c; }
+.badge.severity-medium { background: #fef3c7; color: #92400e; }
+.badge.severity-low { background: #e0f2fe; color: #075985; }
+
+/* Detail pane (within Board). Inherits from .report-detail.variant-board */
+.board-detail-wrap {
+  border: 1px solid var(--mfb-border);
+  border-radius: var(--mfb-radius);
+  background: var(--mfb-bg);
+  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.board-detail-empty {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--mfb-text-muted);
+  padding: var(--mfb-space-5);
+  text-align: center;
+  font-size: var(--mfb-text-sm);
+}
+.board-detail-empty svg { opacity: 0.6; }
+
+.report-detail.variant-board { padding: 16px 18px; }
+.report-detail-header--board {
+  align-items: center;
+}
+.report-detail-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 28px;
+  padding: 0 10px;
+}
+
+/* Empty + loading + error states */
+.board-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-align: center;
+  padding: var(--mfb-space-5);
+  color: var(--mfb-text-muted);
+  flex: 1 1 auto;
+}
+.board-empty h3 {
+  margin: 0;
+  font-size: var(--mfb-text-base);
+  color: var(--mfb-text);
+}
+.board-empty p {
+  margin: 0;
+  font-size: var(--mfb-text-sm);
+}
+.board-error {
+  padding: 12px 14px;
+  border-radius: var(--mfb-radius);
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: var(--mfb-text-sm);
+}
+
+/* Skeleton rows pulse subtly so the user knows something's coming. */
+.board-list-skeleton .skeleton-row {
+  cursor: default;
+  pointer-events: none;
+}
+.skeleton-line {
+  height: 12px;
+  background: linear-gradient(
+    90deg,
+    var(--mfb-surface) 0%,
+    color-mix(in srgb, var(--mfb-surface) 60%, var(--mfb-border)) 50%,
+    var(--mfb-surface) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: 4px;
+  animation: mfb-skeleton 1400ms ease-in-out infinite;
+}
+.skeleton-badges { width: 60%; height: 14px; }
+.skeleton-text { width: 90%; }
+.skeleton-text.short { width: 60%; }
+@keyframes mfb-skeleton {
+  from { background-position: 100% 0; }
+  to   { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-line { animation: none; }
+}
 `;
 
 // src/widget/mount.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "preact/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "preact/jsx-runtime";
 function mountWidget(options) {
   const shadow = options.host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
@@ -3419,22 +4535,23 @@ 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__ */ jsxs10(Fragment2, { children: [
-      fabVisible && /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      fabVisible && /* @__PURE__ */ jsx12(
         Fab,
         {
           label: options.strings["fab.label"],
           onClick: () => rerender({ ...currentState, open: true })
         }
       ),
-      state.open && /* @__PURE__ */ jsxs10(
+      state.open && /* @__PURE__ */ jsxs11(
         Modal,
         {
           onDismiss: () => rerender(clearSelected({ ...currentState, open: false, status: "idle" })),
           closeLabel: options.strings["form.close"],
+          expanded: state.tab === "board",
           children: [
-            showMineTab && /* @__PURE__ */ jsxs10("div", { class: "tab-strip", role: "tablist", children: [
-              /* @__PURE__ */ jsx11(
+            showMineTab && /* @__PURE__ */ jsxs11("div", { class: "tab-strip", role: "tablist", children: [
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   type: "button",
@@ -3445,7 +4562,7 @@ function mountWidget(options) {
                   children: options.strings["tab.send"]
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   type: "button",
@@ -3456,7 +4573,7 @@ function mountWidget(options) {
                   children: options.strings["tab.mine"]
                 }
               ),
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx12(
                 "button",
                 {
                   type: "button",
@@ -3466,9 +4583,20 @@ function mountWidget(options) {
                   onClick: () => rerender(clearSelected({ ...currentState, tab: "changelog" })),
                   children: options.strings["tab.changelog"]
                 }
+              ),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": state.tab === "board",
+                  class: `tab-button tab-button--board ${state.tab === "board" ? "is-active" : ""}`,
+                  onClick: () => rerender(clearSelected({ ...currentState, tab: "board" })),
+                  children: options.strings["tab.board"]
+                }
               )
             ] }),
-            state.tab === "send" && /* @__PURE__ */ jsx11(
+            state.tab === "send" && /* @__PURE__ */ jsx12(
               Form,
               {
                 strings: options.strings,
@@ -3478,7 +4606,7 @@ function mountWidget(options) {
                 ...state.error !== void 0 && { errorMessage: state.error }
               }
             ),
-            state.tab === "mine" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx11(
+            state.tab === "mine" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx12(
               MineList,
               {
                 api: options.api,
@@ -3487,7 +4615,7 @@ function mountWidget(options) {
                 onSelect: (row) => rerender({ ...currentState, selectedReportId: row.id })
               }
             ),
-            (state.tab === "mine" || state.tab === "changelog") && options.api && externalId && state.selectedReportId && /* @__PURE__ */ jsx11(
+            (state.tab === "mine" || state.tab === "changelog") && options.api && externalId && state.selectedReportId && /* @__PURE__ */ jsx12(
               ReportDetailView,
               {
                 api: options.api,
@@ -3497,7 +4625,7 @@ function mountWidget(options) {
                 onBack: () => rerender(clearSelected({ ...currentState }))
               }
             ),
-            state.tab === "changelog" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx11(
+            state.tab === "changelog" && options.api && externalId && !state.selectedReportId && /* @__PURE__ */ jsx12(
               ChangelogList,
               {
                 api: options.api,
@@ -3505,6 +4633,16 @@ function mountWidget(options) {
                 strings: options.strings,
                 onSelect: (row) => rerender({ ...currentState, selectedReportId: row.id })
               }
+            ),
+            state.tab === "board" && options.api && externalId && // BoardView owns its own master/detail navigation — no
+            // selectedReportId routing through the modal-level state.
+            /* @__PURE__ */ jsx12(
+              BoardView,
+              {
+                api: options.api,
+                externalId,
+                strings: options.strings
+              }
             )
           ]
         }
@@ -3558,15 +4696,13 @@ function createFeedback(config) {
     document.body.appendChild(host);
   }
   async function buildAndSubmit(values) {
-    const manualScreenshot = values.screenshot;
-    const screenshot = values.synthetic ? void 0 : manualScreenshot ?? await takeScreenshot(document.body, {
-      mask: [".mhosaic-feedback", "[data-mfb-mask]"]
-    });
+    const manualScreenshot = values.synthetic ? void 0 : values.screenshot;
     const technical_context = capture.snapshot();
     if (user) technical_context.user = user;
     if (metadata && Object.keys(metadata).length > 0) {
       technical_context.metadata = { ...metadata };
     }
+    const captureMethod = manualScreenshot ? values.capture_method ?? "manual" : "none";
     const payload = {
       description: values.description,
       feedback_type: values.feedback_type ?? "bug",
@@ -3574,13 +4710,13 @@ function createFeedback(config) {
       env,
       page_url: window.location.href,
       user_agent: navigator.userAgent,
-      capture_method: screenshot ? manualScreenshot ? "manual" : "html2canvas" : "none",
+      capture_method: captureMethod,
       technical_context
     };
-    if ("0.11.0") {
-      payload.widget_version = "0.11.0";
+    if ("0.12.0") {
+      payload.widget_version = "0.12.0";
     }
-    if (screenshot) payload.screenshot = screenshot;
+    if (manualScreenshot) payload.screenshot = manualScreenshot;
     if (values.synthetic) payload.synthetic = true;
     if (user?.id !== void 0 && user.id !== null && user.id !== "") {
       payload.user = {
@@ -3664,4 +4800,4 @@ function createFeedback(config) {
 export {
   createFeedback
 };
-//# sourceMappingURL=chunk-AO3BXEG5.mjs.map
+//# sourceMappingURL=chunk-XSYC5TDL.mjs.map