anton-bakker-feedback 0.2.0 → 0.3.0

package/dist/react/admin/index.js

@@ -1,1313 +1,406 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useState, useCallback, useEffect } from "react";
-const DEFAULT_FILTERS = {
-  status: "",
-  type: "",
-  environment: ""
+import * as React from "react";
+import { ListPage, Badge, DetailPage, Button, DetailSection, DetailRow, UpdatePage, EnumField, TextField, TextareaField, SaveFooter } from "anton-bakker-tailwind-components";
+const STATUS_VARIANT = {
+  open: "warning",
+  approved: "default",
+  deferred: "secondary",
+  resolved: "success",
+  wontfix: "destructive"
 };
-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"
+const TYPE_VARIANT = {
+  bug: "destructive",
+  feature: "default",
+  ux: "warning",
+  other: "secondary"
 };
-function compareStrings(a, b, direction) {
-  const strA = a ?? "";
-  const strB = b ?? "";
-  const cmp = strA.localeCompare(strB);
-  return direction === "asc" ? cmp : -cmp;
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANT[status] ?? "secondary", children: status });
 }
-function compareNumbers(a, b, direction) {
-  const numA = a ?? 0;
-  const numB = b ?? 0;
-  const cmp = numA - numB;
-  return direction === "asc" ? cmp : -cmp;
+function TypeBadge({ type }) {
+  return /* @__PURE__ */ jsx(Badge, { variant: TYPE_VARIANT[type] ?? "secondary", children: type });
 }
-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;
+const FeedbackListPage = React.forwardRef(
+  ({ items, loading = false, onNavigate, className, emptyStateMessage, currentUser, ...rest }, ref) => {
+    const [search, setSearch] = React.useState("");
+    const [statusFilter, setStatusFilter] = React.useState("");
+    const [typeFilter, setTypeFilter] = React.useState("");
+    const filteredItems = React.useMemo(() => {
+      let result = items;
+      if (statusFilter) result = result.filter((i) => i.status === statusFilter);
+      if (typeFilter) result = result.filter((i) => i.type === typeFilter);
+      if (search) {
+        const q = search.toLowerCase();
+        result = result.filter((i) => i.content?.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
+      }
+      return result;
+    }, [items, statusFilter, typeFilter, search]);
+    const columns = React.useMemo(() => [
+      { header: "Content", accessor: (row) => row.content?.slice(0, 60) || row.id, sortable: true },
+      { header: "Type", accessor: (row) => /* @__PURE__ */ jsx(TypeBadge, { type: row.type }), sortable: true },
+      { header: "Status", accessor: (row) => /* @__PURE__ */ jsx(StatusBadge, { status: row.status }), sortable: true },
+      { header: "Priority", accessor: "priority", sortable: true },
+      { header: "Reporters", accessor: "reporterCount", sortable: true },
+      {
+        header: "Date",
+        accessor: (row) => row.submittedAt ? new Date(row.submittedAt).toLocaleDateString() : "—",
+        sortable: true
+      }
+    ], []);
+    const filterBar = statusFilter || typeFilter ? {
+      filters: [
+        ...statusFilter ? [{ field: "status", label: `Status: ${statusFilter}`, value: statusFilter }] : [],
+        ...typeFilter ? [{ field: "type", label: `Type: ${typeFilter}`, value: typeFilter }] : []
+      ],
+      onFilterRemove: (field) => {
+        if (field === "status") setStatusFilter("");
+        if (field === "type") setTypeFilter("");
+      },
+      onFiltersClear: () => {
+        setStatusFilter("");
+        setTypeFilter("");
+      }
+    } : void 0;
+    const headerActions = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: statusFilter,
+          onChange: (e) => setStatusFilter(e.target.value),
+          className: "h-8 rounded-md border border-border bg-transparent px-2 text-sm",
+          "aria-label": "Filter by status",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All statuses" }),
+            /* @__PURE__ */ jsx("option", { value: "open", children: "Open" }),
+            /* @__PURE__ */ jsx("option", { value: "approved", children: "Approved" }),
+            /* @__PURE__ */ jsx("option", { value: "deferred", children: "Deferred" }),
+            /* @__PURE__ */ jsx("option", { value: "resolved", children: "Resolved" }),
+            /* @__PURE__ */ jsx("option", { value: "wontfix", children: "Won't fix" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: typeFilter,
+          onChange: (e) => setTypeFilter(e.target.value),
+          className: "h-8 rounded-md border border-border bg-transparent px-2 text-sm",
+          "aria-label": "Filter by type",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All types" }),
+            /* @__PURE__ */ jsx("option", { value: "bug", children: "Bug" }),
+            /* @__PURE__ */ jsx("option", { value: "feature", children: "Feature" }),
+            /* @__PURE__ */ jsx("option", { value: "ux", children: "UX" }),
+            /* @__PURE__ */ jsx("option", { value: "other", children: "Other" })
+          ]
+        }
+      )
+    ] });
+    const listProps = {
+      title: "Feedback",
+      columns,
+      items: filteredItems,
+      loading,
+      onRowClick: (row) => onNavigate(`/feedback/${row.id}`),
+      search,
+      onSearchChange: setSearch,
+      searchPlaceholder: "Search feedback...",
+      headerActions,
+      testId: "feedback-list-page",
+      ...filterBar ? { filterBar } : {},
+      ...emptyStateMessage ? { emptyState: emptyStateMessage } : {},
+      ...className ? { className } : {}
+    };
+    return /* @__PURE__ */ jsx(ListPage, { ref, ...listProps });
+  }
+);
+FeedbackListPage.displayName = "FeedbackListPage";
+const FeedbackDetailPage = React.forwardRef(
+  ({ feedbackId, fetchItem, onNavigate, currentUser, className }, ref) => {
+    const [item, setItem] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+      let cancelled = false;
+      setLoading(true);
+      setError(null);
+      fetchItem(feedbackId).then((data) => {
+        if (!cancelled) setItem(data);
+      }).catch((err) => {
+        if (!cancelled) setError(err?.message ?? "Failed to load item");
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [feedbackId, fetchItem]);
+    if (error) {
+      return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(DetailPage, { title: "Feedback", headerActions: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onNavigate("/feedback"), children: "Back to list" }), children: /* @__PURE__ */ jsx("div", { className: "p-6 text-destructive", children: error }) }) });
     }
-  });
-}
-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" };
+    const headerActions = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onNavigate("/feedback"), children: "Back to list" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => onNavigate(`/feedback/${feedbackId}/edit`), children: "Edit" })
+    ] });
+    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(
+      DetailPage,
+      {
+        title: item?.content?.slice(0, 50) || `Feedback ${feedbackId.slice(0, 12)}…`,
+        headerActions,
+        loading,
+        testId: "feedback-detail-page",
+        children: item && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(DetailSection, { title: "Overview", children: [
+            /* @__PURE__ */ jsx(DetailRow, { label: "Status", children: /* @__PURE__ */ jsx(StatusBadge, { status: item.status }) }),
+            /* @__PURE__ */ jsx(DetailRow, { label: "Type", children: /* @__PURE__ */ jsx(TypeBadge, { type: item.type }) }),
+            /* @__PURE__ */ jsx(DetailRow, { label: "Priority", children: item.priority }),
+            /* @__PURE__ */ jsx(DetailRow, { label: "Environment", children: item.environment || "—" }),
+            /* @__PURE__ */ jsx(DetailRow, { label: "Submitted", children: item.submittedAt ? new Date(item.submittedAt).toLocaleString() : "—" }),
+            /* @__PURE__ */ jsx(DetailRow, { label: "Reporters", children: item.reporterCount ?? 1 }),
+            item.assignedTo && /* @__PURE__ */ jsx(DetailRow, { label: "Assigned to", children: item.assignedTo }),
+            item.scope && /* @__PURE__ */ jsx(DetailRow, { label: "Scope", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item.scope }) }),
+            item.size && /* @__PURE__ */ jsx(DetailRow, { label: "Size", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item.size }) })
+          ] }),
+          /* @__PURE__ */ jsx(DetailSection, { title: "Content", children: /* @__PURE__ */ jsx(DetailRow, { label: "Description", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: item.content }) }) }),
+          item.dialogueHistory && item.dialogueHistory.length > 0 && /* @__PURE__ */ jsx(DetailSection, { title: "Dialogue History", collapsible: true, defaultOpen: false, children: item.dialogueHistory.map((entry, i) => /* @__PURE__ */ jsxs(DetailRow, { label: entry.role === "user" ? "User" : "Assistant", children: [
+            /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: entry.content }),
+            entry.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: new Date(entry.timestamp).toLocaleString() })
+          ] }, i)) }),
+          item.context && /* @__PURE__ */ jsxs(DetailSection, { title: "Browser Context", collapsible: true, defaultOpen: false, children: [
+            item.context.url && /* @__PURE__ */ jsx(DetailRow, { label: "URL", children: item.context.url }),
+            item.context.userAgent && /* @__PURE__ */ jsx(DetailRow, { label: "User Agent", children: item.context.userAgent }),
+            item.context.viewport && /* @__PURE__ */ jsx(DetailRow, { label: "Viewport", children: `${item.context.viewport.width}×${item.context.viewport.height}` })
+          ] }),
+          item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx(DetailSection, { title: "Tags", children: /* @__PURE__ */ jsx(DetailRow, { label: "Tags", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: item.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: tag }, tag)) }) }) })
+        ] })
       }
-      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"
+    ) });
+  }
+);
+FeedbackDetailPage.displayName = "FeedbackDetailPage";
+const ALLOWED_TRANSITIONS = {
+  open: ["approved", "deferred", "wontfix"],
+  approved: ["open", "resolved", "deferred"],
+  deferred: ["open", "approved", "wontfix"],
+  resolved: ["open", "approved"],
+  wontfix: ["open", "deferred"]
 };
-function TypeBadge({ type, className }) {
-  return /* @__PURE__ */ jsx("span", { className, "data-type": type, children: TYPE_LABELS$1[type] ?? type });
+function useStatusTransition(currentStatus) {
+  const allowedTargets = ALLOWED_TRANSITIONS[currentStatus] ?? [];
+  return { allowedTargets };
 }
 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" }
+  { 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: "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" }
+const SCOPE_OPTIONS = [
+  { value: "", label: "— not set —" },
+  { value: "component", label: "Component" },
+  { value: "page", label: "Page" },
+  { value: "workflow", label: "Workflow" }
 ];
-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…"
+const SIZE_OPTIONS = [
+  { value: "", label: "— not set —" },
+  { value: "trivial", label: "Trivial" },
+  { value: "small", label: "Small" },
+  { value: "medium", label: "Medium" },
+  { value: "large", label: "Large" }
+];
+const FeedbackUpdatePage = React.forwardRef(
+  ({ feedbackId, fetchItem, updateItem, onNavigate, currentUser, className }, ref) => {
+    const [item, setItem] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    const [saving, setSaving] = React.useState(false);
+    const [status, setStatus] = React.useState("open");
+    const [type, setType] = React.useState("bug");
+    const [scope, setScope] = React.useState("");
+    const [size, setSize] = React.useState("");
+    const [assignedTo, setAssignedTo] = React.useState("");
+    const [tags, setTags] = React.useState("");
+    const [correctionNote, setCorrectionNote] = React.useState("");
+    React.useEffect(() => {
+      let cancelled = false;
+      setLoading(true);
+      fetchItem(feedbackId).then((data) => {
+        if (cancelled) return;
+        setItem(data);
+        setStatus(data.status);
+        setType(data.type);
+        setScope(data.scope ?? "");
+        setSize(data.size ?? "");
+        setAssignedTo(data.assignedTo ?? "");
+        setTags(data.tags?.join(", ") ?? "");
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [feedbackId, fetchItem]);
+    const { allowedTargets } = useStatusTransition(status);
+    const statusOptions = STATUS_OPTIONS.filter(
+      (opt) => opt.value === status || allowedTargets.includes(opt.value)
+    );
+    const classificationChanged = item && (type !== item.type || scope !== (item.scope ?? "") || size !== (item.size ?? ""));
+    const isDirty = item && (status !== item.status || type !== item.type || scope !== (item.scope ?? "") || size !== (item.size ?? "") || assignedTo !== (item.assignedTo ?? "") || tags !== (item.tags?.join(", ") ?? ""));
+    const handleSave = async () => {
+      if (!item) return;
+      setSaving(true);
+      try {
+        const patch = { lastModifiedAt: (/* @__PURE__ */ new Date()).toISOString() };
+        if (status !== item.status) patch.status = status;
+        if (type !== item.type) patch.type = type;
+        if (scope !== (item.scope ?? "")) patch.scope = scope || void 0;
+        if (size !== (item.size ?? "")) patch.size = size || void 0;
+        if (assignedTo !== (item.assignedTo ?? "")) patch.assignedTo = assignedTo || void 0;
+        const newTags = tags.split(",").map((t) => t.trim()).filter(Boolean);
+        if (JSON.stringify(newTags) !== JSON.stringify(item.tags ?? [])) patch.tags = newTags;
+        if (status === "resolved" && item.status !== "resolved") {
+          patch.resolvedAt = (/* @__PURE__ */ new Date()).toISOString();
+          patch.resolvedBy = currentUser?.userId ?? "unknown";
         }
-      ) });
-    }
-    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,
+        if (classificationChanged && correctionNote) {
+          patch.corrections = [
+            ...item.corrections ?? [],
             {
-              status: item.status,
-              className: `feedback-admin-badge feedback-admin-badge--status feedback-admin-badge--${item.status}`
+              field: [type !== item.type && "type", scope !== (item.scope ?? "") && "scope", size !== (item.size ?? "") && "size"].filter(Boolean).join(", "),
+              before: { type: item.type, scope: item.scope, size: item.size },
+              after: { type, scope: scope || void 0, size: size || void 0 },
+              correctedBy: currentUser?.userId ?? "unknown",
+              correctedAt: (/* @__PURE__ */ new Date()).toISOString(),
+              reason: correctionNote
             }
-          ) }),
-          /* @__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",
+        await updateItem(feedbackId, patch);
+        onNavigate(`/feedback/${feedbackId}`);
+      } finally {
+        setSaving(false);
+      }
+    };
+    const headerActions = /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onNavigate(`/feedback/${feedbackId}`), children: "Cancel" });
+    return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(
+      UpdatePage,
+      {
+        title: `Edit: ${item?.content?.slice(0, 40) || feedbackId.slice(0, 12)}…`,
+        headerActions,
+        dataLoading: loading,
+        actions: /* @__PURE__ */ jsxs(SaveFooter, { dirty: !!isDirty, saving, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onNavigate(`/feedback/${feedbackId}`), children: "Cancel" }),
           /* @__PURE__ */ jsx(
-            SortIndicator,
+            Button,
             {
-              active: sort.field === "reporterCount",
-              direction: sort.direction,
-              className: "feedback-admin-list__sort-icon"
+              onClick: handleSave,
+              disabled: saving || !isDirty || !!classificationChanged && !correctionNote,
+              children: saving ? "Saving…" : "Save changes"
             }
           )
         ] }),
-        /* @__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: [
+        testId: "feedback-update-page",
+        children: item && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 bg-muted/30", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-2", children: "Original submission" }),
+            /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm", children: item.content }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 mt-3 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { children: item.submittedAt ? new Date(item.submittedAt).toLocaleString() : "" }),
+              /* @__PURE__ */ jsx("span", { children: item.environment }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                item.reporterCount ?? 1,
+                " reporter(s)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
             /* @__PURE__ */ jsx(
-              "span",
+              EnumField,
               {
-                className: "feedback-admin-dialogue__turn-role",
-                "aria-label": `${role} message`,
-                children: role === "user" ? "User" : "Assistant"
+                label: "Status",
+                options: statusOptions,
+                value: status,
+                onChange: (v) => setStatus(v)
               }
             ),
-            displayTime && /* @__PURE__ */ jsx(
-              "time",
+            /* @__PURE__ */ jsx(
+              EnumField,
               {
-                className: "feedback-admin-dialogue__turn-time",
-                dateTime: timestamp,
-                children: displayTime
+                label: "Type",
+                options: TYPE_OPTIONS,
+                value: type,
+                onChange: (v) => setType(v)
               }
-            )
-          ] }),
-          /* @__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,
+              EnumField,
               {
-                type: item.type,
-                className: "feedback-admin-detail__type-badge"
+                label: "Scope",
+                options: SCOPE_OPTIONS,
+                value: scope,
+                onChange: setScope
               }
             ),
             /* @__PURE__ */ jsx(
-              StatusBadge,
+              EnumField,
               {
-                status: item.status,
-                className: "feedback-admin-detail__status-badge"
+                label: "Size",
+                options: SIZE_OPTIONS,
+                value: size,
+                onChange: setSize
               }
             ),
-            /* @__PURE__ */ jsxs(
-              "span",
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: "Assigned to",
+                value: assignedTo,
+                onChange: (e) => setAssignedTo(e.target.value),
+                placeholder: currentUser?.name ?? currentUser?.userId ?? "",
+                ...currentUser ? { description: `You: ${currentUser.name ?? currentUser.userId}` } : {}
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextField,
               {
-                className: "feedback-admin-detail__priority",
-                "data-priority": item.priority,
-                "aria-label": `Priority: ${item.priority}`,
-                children: [
-                  "Priority: ",
-                  item.priority
-                ]
+                label: "Tags",
+                value: tags,
+                onChange: (e) => setTags(e.target.value),
+                placeholder: "Comma-separated tags",
+                description: "Separate multiple tags with commas"
               }
             )
-          ] })
-        ] }),
-        /* @__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];
+          ] }),
+          classificationChanged && /* @__PURE__ */ jsx(
+            TextareaField,
+            {
+              label: "Correction note",
+              value: correctionNote,
+              onChange: (e) => setCorrectionNote(e.target.value),
+              required: true,
+              ...!correctionNote ? { error: "Required when changing type, scope, or size" } : {},
+              placeholder: "Explain why this classification is being changed..."
+            }
+          ),
+          item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: item.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: tag }, tag)) })
+        ] })
       }
-      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" })
-    ] })
-  ] });
-}
+);
+FeedbackUpdatePage.displayName = "FeedbackUpdatePage";
 export {
   FeedbackDetailPage,
   FeedbackListPage,
-  FeedbackUpdatePage
+  FeedbackUpdatePage,
+  StatusBadge,
+  TypeBadge,
+  useStatusTransition
 };
 //# sourceMappingURL=index.js.map