anton-bakker-feedback 0.1.0 → 0.2.0

package/dist/react/admin/index.js

@@ -0,0 +1,1313 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect } from "react";
+const DEFAULT_FILTERS = {
+  status: "",
+  type: "",
+  environment: ""
+};
+function useFeedbackFilters() {
+  const [filters, setFiltersState] = useState(DEFAULT_FILTERS);
+  const setFilters = useCallback((next) => {
+    setFiltersState(next);
+  }, []);
+  const clearFilters = useCallback(() => {
+    setFiltersState(DEFAULT_FILTERS);
+  }, []);
+  const applyFilters = useCallback(
+    (items) => {
+      return items.filter((item) => {
+        if (filters.status !== "" && item.status !== filters.status) {
+          return false;
+        }
+        if (filters.type !== "" && item.type !== filters.type) {
+          return false;
+        }
+        if (filters.environment !== "" && item.environment !== filters.environment) {
+          return false;
+        }
+        return true;
+      });
+    },
+    [filters]
+  );
+  return { filters, setFilters, clearFilters, applyFilters };
+}
+const DEFAULT_SORT = {
+  field: "priority",
+  direction: "desc"
+};
+function compareStrings(a, b, direction) {
+  const strA = a ?? "";
+  const strB = b ?? "";
+  const cmp = strA.localeCompare(strB);
+  return direction === "asc" ? cmp : -cmp;
+}
+function compareNumbers(a, b, direction) {
+  const numA = a ?? 0;
+  const numB = b ?? 0;
+  const cmp = numA - numB;
+  return direction === "asc" ? cmp : -cmp;
+}
+function compareDates(a, b, direction) {
+  const timeA = a ? new Date(a).getTime() : 0;
+  const timeB = b ? new Date(b).getTime() : 0;
+  const cmp = timeA - timeB;
+  return direction === "asc" ? cmp : -cmp;
+}
+function sortFeedbackItems(items, sort) {
+  const { field, direction } = sort;
+  return [...items].sort((a, b) => {
+    switch (field) {
+      case "priority":
+        return compareNumbers(a.priority, b.priority, direction);
+      case "submittedAt":
+        return compareDates(a.submittedAt, b.submittedAt, direction);
+      case "status":
+        return compareStrings(a.status, b.status, direction);
+      case "type":
+        return compareStrings(a.type, b.type, direction);
+      case "reporterCount":
+        return compareNumbers(a.reporterCount, b.reporterCount, direction);
+      default:
+        return 0;
+    }
+  });
+}
+function useFeedbackSort() {
+  const [sort, setSortState] = useState(DEFAULT_SORT);
+  const setSortField = useCallback((field) => {
+    setSortState((prev) => {
+      if (prev.field === field) {
+        return { field, direction: prev.direction === "asc" ? "desc" : "asc" };
+      }
+      return { field, direction: "desc" };
+    });
+  }, []);
+  const setSort = useCallback((next) => {
+    setSortState(next);
+  }, []);
+  const applySort = useCallback(
+    (items) => sortFeedbackItems(items, sort),
+    [sort]
+  );
+  return { sort, setSortField, setSort, applySort };
+}
+const STATUS_LABELS$1 = {
+  open: "Open",
+  approved: "Approved",
+  deferred: "Deferred",
+  resolved: "Resolved",
+  wontfix: "Won't fix"
+};
+function StatusBadge({ status, className }) {
+  return /* @__PURE__ */ jsx("span", { className, "data-status": status, children: STATUS_LABELS$1[status] ?? status });
+}
+const TYPE_LABELS$1 = {
+  bug: "Bug",
+  feature: "Feature",
+  ux: "UX issue",
+  other: "Other"
+};
+function TypeBadge({ type, className }) {
+  return /* @__PURE__ */ jsx("span", { className, "data-type": type, children: TYPE_LABELS$1[type] ?? type });
+}
+const STATUS_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "open", label: "Open" },
+  { value: "approved", label: "Approved" },
+  { value: "deferred", label: "Deferred" },
+  { value: "resolved", label: "Resolved" },
+  { value: "wontfix", label: "Won't fix" }
+];
+const TYPE_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "bug", label: "Bug" },
+  { value: "feature", label: "Feature" },
+  { value: "ux", label: "UX issue" },
+  { value: "other", label: "Other" }
+];
+const ENVIRONMENT_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "development", label: "Development" },
+  { value: "staging", label: "Staging" },
+  { value: "production", label: "Production" }
+];
+function FilterControls({ filters, onChange, className }) {
+  const statusId = "feedback-admin-filter-status";
+  const typeId = "feedback-admin-filter-type";
+  const environmentId = "feedback-admin-filter-environment";
+  const handleStatusChange = (e) => {
+    onChange({ ...filters, status: e.target.value });
+  };
+  const handleTypeChange = (e) => {
+    onChange({ ...filters, type: e.target.value });
+  };
+  const handleEnvironmentChange = (e) => {
+    onChange({ ...filters, environment: e.target.value });
+  };
+  return /* @__PURE__ */ jsxs("div", { className, role: "search", "aria-label": "Filter feedback items", children: [
+    /* @__PURE__ */ jsxs("div", { className: "feedback-admin-filter__group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: statusId, children: "Status" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: statusId,
+          value: filters.status,
+          onChange: handleStatusChange,
+          "aria-label": "Filter by status",
+          "aria-describedby": `${statusId}-desc`,
+          children: STATUS_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: `${statusId}-desc`, className: "feedback-admin-sr-only", children: "Filter feedback items by lifecycle status" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "feedback-admin-filter__group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: typeId, children: "Type" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: typeId,
+          value: filters.type,
+          onChange: handleTypeChange,
+          "aria-label": "Filter by type",
+          "aria-describedby": `${typeId}-desc`,
+          children: TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: `${typeId}-desc`, className: "feedback-admin-sr-only", children: "Filter feedback items by type" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "feedback-admin-filter__group", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: environmentId, children: "Environment" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: environmentId,
+          value: filters.environment,
+          onChange: handleEnvironmentChange,
+          "aria-label": "Filter by environment",
+          "aria-describedby": `${environmentId}-desc`,
+          children: ENVIRONMENT_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: `${environmentId}-desc`, className: "feedback-admin-sr-only", children: "Filter feedback items by environment" })
+    ] })
+  ] });
+}
+function formatDate(iso) {
+  try {
+    return new Date(iso).toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  } catch {
+    return iso;
+  }
+}
+function SortIndicator({
+  active,
+  direction,
+  className
+}) {
+  if (!active) {
+    return /* @__PURE__ */ jsx("span", { className, "aria-hidden": "true", children: " ↕" });
+  }
+  return /* @__PURE__ */ jsx("span", { className, "aria-hidden": "true", children: direction === "asc" ? " ↑" : " ↓" });
+}
+function FeedbackListPage({
+  items,
+  loading = false,
+  onNavigate,
+  className,
+  tableClassName,
+  filterClassName,
+  emptyStateMessage = "No feedback items found."
+}) {
+  const { filters, setFilters, clearFilters, applyFilters } = useFeedbackFilters();
+  const { sort, setSortField, applySort } = useFeedbackSort();
+  const visibleItems = applySort(applyFilters(items));
+  function thProps(field) {
+    return {
+      scope: "col",
+      className: `feedback-admin-list__th feedback-admin-list__th--sortable${sort.field === field ? " feedback-admin-list__th--sorted" : ""}`,
+      onClick: () => setSortField(field),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setSortField(field);
+        }
+      },
+      tabIndex: 0,
+      role: "columnheader",
+      "aria-sort": sort.field === field ? sort.direction === "asc" ? "ascending" : "descending" : "none"
+    };
+  }
+  const renderBody = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: 7,
+          className: "feedback-admin-list__loading",
+          "aria-live": "polite",
+          "aria-busy": "true",
+          children: "Loading…"
+        }
+      ) });
+    }
+    if (visibleItems.length === 0) {
+      return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, className: "feedback-admin-list__empty", "aria-live": "polite", children: emptyStateMessage }) });
+    }
+    return visibleItems.map((item) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        className: "feedback-admin-list__row feedback-admin-list__row--clickable",
+        onClick: () => onNavigate(`/feedback/${item.id}`),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onNavigate(`/feedback/${item.id}`);
+          }
+        },
+        tabIndex: 0,
+        role: "button",
+        "aria-label": `View feedback item ${item.id}`,
+        children: [
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--title", children: item.content }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--type", children: /* @__PURE__ */ jsx(
+            TypeBadge,
+            {
+              type: item.type,
+              className: `feedback-admin-badge feedback-admin-badge--type feedback-admin-badge--${item.type}`
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--status", children: /* @__PURE__ */ jsx(
+            StatusBadge,
+            {
+              status: item.status,
+              className: `feedback-admin-badge feedback-admin-badge--status feedback-admin-badge--${item.status}`
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--priority", children: item.priority }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--reporters", children: item.reporterCount.toLocaleString() }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--environment", children: item.environment ?? "—" }),
+          /* @__PURE__ */ jsx("td", { className: "feedback-admin-list__td feedback-admin-list__td--date", children: formatDate(item.submittedAt) })
+        ]
+      },
+      item.id
+    ));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `feedback-admin-list${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `feedback-admin-list__filters${filterClassName ? ` ${filterClassName}` : ""}`, children: [
+      /* @__PURE__ */ jsx(
+        FilterControls,
+        {
+          filters,
+          onChange: setFilters,
+          className: "feedback-admin-filter-controls"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-admin-list__clear-btn",
+          onClick: clearFilters,
+          "aria-label": "Clear all filters",
+          children: "Clear filters"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `feedback-admin-list__table-wrapper${tableClassName ? ` ${tableClassName}` : ""}`, children: /* @__PURE__ */ jsxs("table", { className: "feedback-admin-list__table", role: "grid", "aria-label": "Feedback items", children: [
+      /* @__PURE__ */ jsx("thead", { className: "feedback-admin-list__thead", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: "feedback-admin-list__th",
+            children: "Title"
+          }
+        ),
+        /* @__PURE__ */ jsxs("th", { ...thProps("type"), children: [
+          "Type",
+          /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              active: sort.field === "type",
+              direction: sort.direction,
+              className: "feedback-admin-list__sort-icon"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("th", { ...thProps("status"), children: [
+          "Status",
+          /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              active: sort.field === "status",
+              direction: sort.direction,
+              className: "feedback-admin-list__sort-icon"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("th", { ...thProps("priority"), children: [
+          "Priority",
+          /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              active: sort.field === "priority",
+              direction: sort.direction,
+              className: "feedback-admin-list__sort-icon"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("th", { ...thProps("reporterCount"), children: [
+          "Reporters",
+          /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              active: sort.field === "reporterCount",
+              direction: sort.direction,
+              className: "feedback-admin-list__sort-icon"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "th",
+          {
+            scope: "col",
+            className: "feedback-admin-list__th",
+            children: "Environment"
+          }
+        ),
+        /* @__PURE__ */ jsxs("th", { ...thProps("submittedAt"), children: [
+          "Date",
+          /* @__PURE__ */ jsx(
+            SortIndicator,
+            {
+              active: sort.field === "submittedAt",
+              direction: sort.direction,
+              className: "feedback-admin-list__sort-icon"
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "feedback-admin-list__tbody", children: renderBody() })
+    ] }) })
+  ] });
+}
+function DialogueHistory({
+  dialogue,
+  className
+}) {
+  if (!dialogue || dialogue.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, "data-testid": "dialogue-history-empty", children: /* @__PURE__ */ jsx("p", { className: "feedback-admin-dialogue__empty", children: "No dialogue recorded." }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": "dialogue-history", children: /* @__PURE__ */ jsx("ol", { className: "feedback-admin-dialogue__list", "aria-label": "Dialogue history", children: dialogue.map((entry, index) => {
+    if (!entry || typeof entry !== "object") {
+      return null;
+    }
+    const role = entry.role === "assistant" ? "assistant" : "user";
+    const content = typeof entry.content === "string" ? entry.content : "";
+    const timestamp = typeof entry.timestamp === "string" ? entry.timestamp : "";
+    let displayTime = "";
+    if (timestamp) {
+      try {
+        displayTime = new Date(timestamp).toLocaleString();
+      } catch {
+        displayTime = timestamp;
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "feedback-admin-dialogue__turn",
+        "data-role": role,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "feedback-admin-dialogue__turn-header", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "feedback-admin-dialogue__turn-role",
+                "aria-label": `${role} message`,
+                children: role === "user" ? "User" : "Assistant"
+              }
+            ),
+            displayTime && /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "feedback-admin-dialogue__turn-time",
+                dateTime: timestamp,
+                children: displayTime
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "feedback-admin-dialogue__turn-content", children: content.split("\n").map((line, lineIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            line,
+            lineIndex < content.split("\n").length - 1 && /* @__PURE__ */ jsx("br", {})
+          ] }, lineIndex)) })
+        ]
+      },
+      `dialogue-${index}`
+    );
+  }) }) });
+}
+function ScreenshotViewer({
+  screenshotS3Key,
+  generateScreenshotUrl,
+  alt = "Feedback screenshot",
+  className
+}) {
+  const [imageUrl, setImageUrl] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!screenshotS3Key) {
+      setImageUrl(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    if (!generateScreenshotUrl) {
+      setImageUrl(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    generateScreenshotUrl(screenshotS3Key).then((url) => {
+      setImageUrl(url);
+      setLoading(false);
+    }).catch(() => {
+      setImageUrl(null);
+      setLoading(false);
+      setError("Failed to load screenshot.");
+    });
+  }, [screenshotS3Key, generateScreenshotUrl]);
+  return /* @__PURE__ */ jsxs("div", { className, "data-testid": "screenshot-viewer", children: [
+    loading && /* @__PURE__ */ jsx("p", { className: "feedback-admin-screenshot__loading", children: "Loading screenshot…" }),
+    !loading && imageUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt,
+        className: "feedback-admin-screenshot__image"
+      }
+    ),
+    !loading && !imageUrl && screenshotS3Key && !generateScreenshotUrl && /* @__PURE__ */ jsx("p", { className: "feedback-admin-screenshot__configure", children: "Configure generateScreenshotUrl to display screenshot." }),
+    !loading && !imageUrl && screenshotS3Key && generateScreenshotUrl && error && /* @__PURE__ */ jsx("p", { className: "feedback-admin-screenshot__error", children: error }),
+    !loading && !screenshotS3Key && /* @__PURE__ */ jsx("p", { className: "feedback-admin-screenshot__missing", children: "No screenshot captured." })
+  ] });
+}
+function BrowserContext({
+  context,
+  className
+}) {
+  if (!context) {
+    return /* @__PURE__ */ jsx("div", { className, "data-testid": "browser-context-empty", children: /* @__PURE__ */ jsx("p", { className: "feedback-admin-context__empty", children: "No browser context available." }) });
+  }
+  const { url, pageTitle, userAgent, viewport, locale, timezone } = context;
+  return /* @__PURE__ */ jsx("div", { className, "data-testid": "browser-context", children: /* @__PURE__ */ jsxs("dl", { className: "feedback-admin-context__list", children: [
+    url && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "URL" }),
+      /* @__PURE__ */ jsx("dd", { className: "feedback-admin-context__value feedback-admin-context__value--url", children: url })
+    ] }),
+    pageTitle && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "Page title" }),
+      /* @__PURE__ */ jsx("dd", { className: "feedback-admin-context__value", children: pageTitle })
+    ] }),
+    userAgent && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "User agent" }),
+      /* @__PURE__ */ jsx("dd", { className: "feedback-admin-context__value feedback-admin-context__value--user-agent", children: userAgent })
+    ] }),
+    viewport && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "Viewport" }),
+      /* @__PURE__ */ jsxs("dd", { className: "feedback-admin-context__value", children: [
+        viewport.width,
+        " × ",
+        viewport.height
+      ] })
+    ] }),
+    locale && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "Locale" }),
+      /* @__PURE__ */ jsx("dd", { className: "feedback-admin-context__value", children: locale })
+    ] }),
+    timezone && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("dt", { className: "feedback-admin-context__term", children: "Timezone" }),
+      /* @__PURE__ */ jsx("dd", { className: "feedback-admin-context__value", children: timezone })
+    ] })
+  ] }) });
+}
+const ALLOWED_TRANSITIONS$1 = {
+  open: ["approved", "deferred", "wontfix"],
+  approved: ["resolved", "deferred", "wontfix"],
+  deferred: ["open", "approved", "wontfix"],
+  resolved: ["open"],
+  wontfix: ["open"]
+};
+const STATUS_TRANSITION_LABELS = {
+  open: "Reopen",
+  approved: "Approve",
+  deferred: "Defer",
+  resolved: "Resolve",
+  wontfix: "Won't fix"
+};
+function QuickActions({
+  item,
+  updateItem,
+  onNavigate,
+  className
+}) {
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const allowedTargets = ALLOWED_TRANSITIONS$1[item.status] ?? [];
+  const handleStatusTransition = async (targetStatus) => {
+    setSaving(true);
+    setError(null);
+    try {
+      await updateItem(item.id, { status: targetStatus });
+    } catch {
+      setError("Failed to update status. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleEdit = () => {
+    onNavigate(`/feedback/${item.id}/edit`);
+  };
+  const handleBackToList = () => {
+    onNavigate("/feedback");
+  };
+  return /* @__PURE__ */ jsxs("div", { className, "data-testid": "quick-actions", children: [
+    /* @__PURE__ */ jsx("div", { className: "feedback-admin-actions__status-group", role: "group", "aria-label": "Status actions", children: allowedTargets.map((targetStatus) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "feedback-admin-actions__status-btn",
+        "data-target-status": targetStatus,
+        onClick: () => void handleStatusTransition(targetStatus),
+        disabled: saving,
+        "aria-disabled": saving,
+        children: STATUS_TRANSITION_LABELS[targetStatus]
+      },
+      targetStatus
+    )) }),
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "feedback-admin-actions__error",
+        role: "alert",
+        "data-testid": "quick-actions-error",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "feedback-admin-actions__nav-group", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-admin-actions__edit-btn",
+          onClick: handleEdit,
+          disabled: saving,
+          "aria-disabled": saving,
+          "data-testid": "quick-actions-edit",
+          children: "Edit"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "feedback-admin-actions__back-btn",
+          onClick: handleBackToList,
+          disabled: saving,
+          "aria-disabled": saving,
+          "data-testid": "quick-actions-back",
+          children: "Back to list"
+        }
+      )
+    ] })
+  ] });
+}
+function FeedbackDetailPage({
+  feedbackId,
+  fetchItem,
+  onNavigate,
+  currentUser,
+  className,
+  generateScreenshotUrl
+}) {
+  const [item, setItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchItem(feedbackId).then((fetched) => {
+      if (!cancelled) {
+        setItem(fetched);
+        setLoading(false);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setError("Failed to load feedback item.");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [feedbackId, fetchItem]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        "data-testid": "feedback-detail-loading",
+        "aria-busy": "true",
+        "aria-label": "Loading feedback item",
+        children: /* @__PURE__ */ jsx("p", { className: "feedback-admin-detail__loading", children: "Loading…" })
+      }
+    );
+  }
+  if (error || !item) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        "data-testid": "feedback-detail-error",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "feedback-admin-detail__error", children: error ?? "Feedback item not found." }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedback-admin-detail__back-btn",
+              onClick: () => onNavigate("/feedback"),
+              "data-testid": "feedback-detail-back-error",
+              children: "Back to list"
+            }
+          )
+        ]
+      }
+    );
+  }
+  const handleUpdateItem = async (id, patch) => {
+    setItem((prev) => prev ? { ...prev, ...patch } : prev);
+    try {
+      const updated = await fetchItem(id);
+      setItem(updated);
+    } catch {
+    }
+  };
+  const formatDate2 = (isoString) => {
+    try {
+      return new Date(isoString).toLocaleString();
+    } catch {
+      return isoString;
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className,
+      "data-testid": "feedback-detail",
+      "data-feedback-id": item.id,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "feedback-admin-detail__header", children: [
+          /* @__PURE__ */ jsx("h1", { className: "feedback-admin-detail__title", children: item.content.length > 120 ? `${item.content.slice(0, 120)}…` : item.content }),
+          /* @__PURE__ */ jsxs("div", { className: "feedback-admin-detail__badges", children: [
+            /* @__PURE__ */ jsx(
+              TypeBadge,
+              {
+                type: item.type,
+                className: "feedback-admin-detail__type-badge"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              StatusBadge,
+              {
+                status: item.status,
+                className: "feedback-admin-detail__status-badge"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "feedback-admin-detail__priority",
+                "data-priority": item.priority,
+                "aria-label": `Priority: ${item.priority}`,
+                children: [
+                  "Priority: ",
+                  item.priority
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "section",
+          {
+            className: "feedback-admin-detail__metadata",
+            "aria-label": "Metadata",
+            children: /* @__PURE__ */ jsxs("dl", { className: "feedback-admin-detail__metadata-grid", children: [
+              item.environment && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Environment" }),
+                /* @__PURE__ */ jsx("dd", { "data-testid": "detail-environment", children: item.environment })
+              ] }),
+              /* @__PURE__ */ jsx("dt", { children: "Submitted" }),
+              /* @__PURE__ */ jsx("dd", { "data-testid": "detail-submitted-at", children: formatDate2(item.submittedAt) }),
+              /* @__PURE__ */ jsx("dt", { children: "Reporters" }),
+              /* @__PURE__ */ jsx("dd", { "data-testid": "detail-reporter-count", children: item.reporterCount }),
+              item.assignedTo && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Assigned to" }),
+                /* @__PURE__ */ jsx("dd", { "data-testid": "detail-assigned-to", children: item.assignedTo })
+              ] }),
+              item.version && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Version" }),
+                /* @__PURE__ */ jsx("dd", { "data-testid": "detail-version", children: item.version })
+              ] }),
+              item.tags && item.tags.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("dt", { children: "Tags" }),
+                /* @__PURE__ */ jsx("dd", { "data-testid": "detail-tags", children: item.tags.join(", ") })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "feedback-admin-detail__description",
+            "aria-label": "Description",
+            children: [
+              /* @__PURE__ */ jsx("h2", { className: "feedback-admin-detail__section-heading", children: "Description" }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "feedback-admin-detail__content",
+                  "data-testid": "detail-content",
+                  children: item.content
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "feedback-admin-detail__dialogue",
+            "aria-label": "Dialogue history",
+            children: [
+              /* @__PURE__ */ jsx("h2", { className: "feedback-admin-detail__section-heading", children: "Dialogue history" }),
+              /* @__PURE__ */ jsx(
+                DialogueHistory,
+                {
+                  dialogue: item.dialogueHistory,
+                  className: "feedback-admin-detail__dialogue-history"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "feedback-admin-detail__screenshot",
+            "aria-label": "Screenshot",
+            children: [
+              /* @__PURE__ */ jsx("h2", { className: "feedback-admin-detail__section-heading", children: "Screenshot" }),
+              /* @__PURE__ */ jsx(
+                ScreenshotViewer,
+                {
+                  ...item.screenshotS3Key !== void 0 ? { screenshotS3Key: item.screenshotS3Key } : {},
+                  ...generateScreenshotUrl !== void 0 ? { generateScreenshotUrl } : {},
+                  alt: `Screenshot for feedback ${item.id}`,
+                  className: "feedback-admin-detail__screenshot-viewer"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "feedback-admin-detail__context",
+            "aria-label": "Browser context",
+            children: [
+              /* @__PURE__ */ jsx("h2", { className: "feedback-admin-detail__section-heading", children: "Browser context" }),
+              /* @__PURE__ */ jsx(
+                BrowserContext,
+                {
+                  context: item.context,
+                  className: "feedback-admin-detail__browser-context"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          QuickActions,
+          {
+            item,
+            updateItem: handleUpdateItem,
+            onNavigate,
+            ...currentUser !== void 0 ? { currentUser } : {},
+            className: "feedback-admin-detail__quick-actions"
+          }
+        )
+      ]
+    }
+  );
+}
+const ALLOWED_TRANSITIONS = {
+  open: ["approved", "deferred", "wontfix"],
+  approved: ["open", "resolved", "deferred"],
+  deferred: ["open", "approved", "wontfix"],
+  resolved: ["open", "approved"],
+  wontfix: ["open", "deferred"]
+};
+function useStatusTransition(currentStatus) {
+  const allowedTargets = ALLOWED_TRANSITIONS[currentStatus] ?? [];
+  return { allowedTargets };
+}
+const STATUS_LABELS = {
+  open: "Open",
+  approved: "Approved",
+  deferred: "Deferred",
+  resolved: "Resolved",
+  wontfix: "Won't fix"
+};
+const TYPE_LABELS = {
+  bug: "Bug",
+  feature: "Feature",
+  ux: "UX issue",
+  other: "Other"
+};
+const SCOPE_LABELS = {
+  isolated: "Isolated",
+  "cross-cutting": "Cross-cutting",
+  systemic: "Systemic"
+};
+const SIZE_LABELS = {
+  trivial: "Trivial",
+  small: "Small",
+  medium: "Medium",
+  large: "Large"
+};
+const ALL_TYPES = ["bug", "feature", "ux", "other"];
+const ALL_SCOPES = ["isolated", "cross-cutting", "systemic"];
+const ALL_SIZES = ["trivial", "small", "medium", "large"];
+function StatusSelect({
+  currentStatus,
+  allowedTargets,
+  value,
+  onChange,
+  className
+}) {
+  const id = "feedback-admin-status-select";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Status" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value,
+        "aria-label": "Status",
+        onChange: (e) => onChange(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: currentStatus, children: STATUS_LABELS[currentStatus] }),
+          allowedTargets.map((target) => /* @__PURE__ */ jsx("option", { value: target, children: STATUS_LABELS[target] }, target))
+        ]
+      }
+    )
+  ] });
+}
+function TypeSelect({
+  value,
+  onChange,
+  className
+}) {
+  const id = "feedback-admin-type-select";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Type" }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        value,
+        "aria-label": "Type",
+        onChange: (e) => onChange(e.target.value),
+        children: ALL_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: TYPE_LABELS[type] }, type))
+      }
+    )
+  ] });
+}
+function ScopeSelect({
+  value,
+  onChange,
+  className
+}) {
+  const id = "feedback-admin-scope-select";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Scope" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value: value ?? "",
+        "aria-label": "Scope",
+        onChange: (e) => {
+          const v = e.target.value;
+          onChange(v === "" ? void 0 : v);
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "— not set —" }),
+          ALL_SCOPES.map((scope) => /* @__PURE__ */ jsx("option", { value: scope, children: SCOPE_LABELS[scope] }, scope))
+        ]
+      }
+    )
+  ] });
+}
+function SizeSelect({
+  value,
+  onChange,
+  className
+}) {
+  const id = "feedback-admin-size-select";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Size" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value: value ?? "",
+        "aria-label": "Size",
+        onChange: (e) => {
+          const v = e.target.value;
+          onChange(v === "" ? void 0 : v);
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "— not set —" }),
+          ALL_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: SIZE_LABELS[size] }, size))
+        ]
+      }
+    )
+  ] });
+}
+function AssigneeInput({
+  value,
+  onChange,
+  currentUser,
+  className
+}) {
+  const id = "feedback-admin-assignee-input";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Assigned to" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        value: value ?? "",
+        "aria-label": "Assigned to",
+        onChange: (e) => {
+          const v = e.target.value;
+          onChange(v === "" ? void 0 : v);
+        }
+      }
+    ),
+    currentUser !== void 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(currentUser.userId),
+        children: "Assign to me"
+      }
+    )
+  ] });
+}
+function TagsInput({
+  value,
+  onChange,
+  className
+}) {
+  const id = "feedback-admin-tags-input";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Tags" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        value: value.join(", "),
+        "aria-label": "Tags",
+        placeholder: "Comma-separated",
+        onChange: (e) => {
+          const parsed = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
+          onChange(parsed);
+        }
+      }
+    )
+  ] });
+}
+function CorrectionNote({
+  value,
+  onChange,
+  required,
+  className
+}) {
+  const id = "feedback-admin-correction-note";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      "Correction note",
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        value,
+        required,
+        "aria-required": required,
+        "aria-label": "Correction note",
+        placeholder: "Describe why the classification is changing…",
+        onChange: (e) => onChange(e.target.value)
+      }
+    )
+  ] });
+}
+const EditableFields = {
+  StatusSelect,
+  TypeSelect,
+  ScopeSelect,
+  SizeSelect,
+  AssigneeInput,
+  TagsInput,
+  CorrectionNote
+};
+function FeedbackUpdatePage({
+  feedbackId,
+  fetchItem,
+  updateItem,
+  onNavigate,
+  currentUser,
+  className
+}) {
+  const [item, setItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [status, setStatus] = useState("open");
+  const [type, setType] = useState("bug");
+  const [scope, setScope] = useState(void 0);
+  const [size, setSize] = useState(void 0);
+  const [assignedTo, setAssignedTo] = useState(void 0);
+  const [tags, setTags] = useState([]);
+  const [correctionNote, setCorrectionNote] = useState("");
+  const [saving, setSaving] = useState(false);
+  const { allowedTargets } = useStatusTransition(status);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetchItem(feedbackId).then((loadedItem) => {
+      if (cancelled) return;
+      setItem(loadedItem);
+      setStatus(loadedItem.status);
+      setType(loadedItem.type);
+      setScope(loadedItem.scope);
+      setSize(loadedItem.size);
+      setAssignedTo(loadedItem.assignedTo);
+      setTags(loadedItem.tags ?? []);
+      setCorrectionNote("");
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [feedbackId, fetchItem]);
+  const classificationChanged = item !== null && (type !== item.type || scope !== item.scope || size !== item.size);
+  const saveDisabled = saving || item === null || classificationChanged && correctionNote.trim() === "";
+  function handleCancel() {
+    onNavigate(`/feedback/${feedbackId}`);
+  }
+  async function handleSave() {
+    if (item === null || saveDisabled) return;
+    setSaving(true);
+    try {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const patch = {
+        lastModifiedAt: now
+      };
+      if (status !== item.status) {
+        patch.status = status;
+        if (status === "resolved") {
+          patch.resolvedAt = now;
+          patch.resolvedBy = currentUser?.userId ?? "unknown";
+        }
+      }
+      if (type !== item.type) patch.type = type;
+      if (scope !== item.scope) {
+        if (scope !== void 0) {
+          patch.scope = scope;
+        } else {
+          patch.scope = void 0;
+        }
+      }
+      if (size !== item.size) {
+        if (size !== void 0) {
+          patch.size = size;
+        } else {
+          patch.size = void 0;
+        }
+      }
+      if (assignedTo !== item.assignedTo) {
+        if (assignedTo !== void 0) {
+          patch.assignedTo = assignedTo;
+        } else {
+          patch.assignedTo = void 0;
+        }
+      }
+      if (JSON.stringify(tags) !== JSON.stringify(item.tags)) {
+        patch.tags = tags;
+      }
+      if (classificationChanged) {
+        const changedFields = [];
+        const before = {};
+        const after = {};
+        if (type !== item.type) {
+          changedFields.push("type");
+          before.type = item.type;
+          after.type = type;
+        }
+        if (scope !== item.scope) {
+          changedFields.push("scope");
+          before.scope = item.scope;
+          after.scope = scope;
+        }
+        if (size !== item.size) {
+          changedFields.push("size");
+          before.size = item.size;
+          after.size = size;
+        }
+        const correctionEntry = {
+          field: changedFields.join(", "),
+          before,
+          after,
+          correctedBy: currentUser?.userId ?? "unknown",
+          correctedAt: now,
+          reason: correctionNote
+        };
+        patch.corrections = [...item.corrections ?? [], correctionEntry];
+      }
+      await updateItem(feedbackId, patch);
+      onNavigate(`/feedback/${feedbackId}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("article", { "data-page": "feedback-update", className, children: /* @__PURE__ */ jsx("p", { "data-loading": "true", children: "Loading…" }) });
+  }
+  if (item === null) {
+    return /* @__PURE__ */ jsx("article", { "data-page": "feedback-update", className, children: /* @__PURE__ */ jsx("p", { children: "Feedback item not found." }) });
+  }
+  return /* @__PURE__ */ jsxs("article", { "data-page": "feedback-update", className, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsxs("h1", { children: [
+        item.id,
+        " — Edit"
+      ] }),
+      /* @__PURE__ */ jsxs("nav", { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onNavigate(`/feedback/${feedbackId}`), children: "← Back to detail" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCancel, children: "Cancel" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "data-section": "read-only-context", "aria-label": "Read-only context", children: [
+      /* @__PURE__ */ jsx(StatusBadge, { status: item.status }),
+      /* @__PURE__ */ jsx(TypeBadge, { type: item.type }),
+      /* @__PURE__ */ jsx("div", { "data-field": "content", children: /* @__PURE__ */ jsx("p", { children: item.content }) }),
+      /* @__PURE__ */ jsxs("div", { "data-field": "metadata", children: [
+        /* @__PURE__ */ jsx("span", { "data-field": "submittedAt", children: item.submittedAt }),
+        item.environment && /* @__PURE__ */ jsx("span", { "data-field": "environment", children: item.environment }),
+        /* @__PURE__ */ jsx("span", { "data-field": "reporterCount", children: item.reporterCount })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { "data-section": "edit-form", children: [
+      /* @__PURE__ */ jsx(
+        EditableFields.StatusSelect,
+        {
+          currentStatus: item.status,
+          allowedTargets,
+          value: status,
+          onChange: setStatus
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableFields.TypeSelect,
+        {
+          value: type,
+          onChange: setType
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableFields.ScopeSelect,
+        {
+          value: scope,
+          onChange: setScope
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableFields.SizeSelect,
+        {
+          value: size,
+          onChange: setSize
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableFields.AssigneeInput,
+        {
+          value: assignedTo,
+          onChange: setAssignedTo,
+          ...currentUser !== void 0 ? { currentUser } : {}
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableFields.TagsInput,
+        {
+          value: tags,
+          onChange: setTags
+        }
+      ),
+      classificationChanged && /* @__PURE__ */ jsx(
+        EditableFields.CorrectionNote,
+        {
+          value: correctionNote,
+          onChange: setCorrectionNote,
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("footer", { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: saveDisabled,
+          "aria-disabled": saveDisabled,
+          onClick: () => {
+            void handleSave();
+          },
+          children: saving ? "Saving…" : "Save changes"
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCancel, disabled: saving, children: "Cancel" })
+    ] })
+  ] });
+}
+export {
+  FeedbackDetailPage,
+  FeedbackListPage,
+  FeedbackUpdatePage
+};
+//# sourceMappingURL=index.js.map