@nivaro/react 0.3.41 → 0.3.42

package/dist/shared/components/panels/CommentPanel.js

@@ -1,31 +1,32 @@
-import { jsxs as s, jsx as e, Fragment as ne } from "react/jsx-runtime";
-import { useQueryClient as fe, useQuery as U, useMutation as O } from "@tanstack/react-query";
-import { MessageSquare as Se, ChevronDown as $e, ClipboardPlus as Ee, Pencil as qe, Trash2 as De, Check as Pe, X as Re, SmilePlus as ge } from "lucide-react";
-import { useState as v, useRef as Z, useEffect as V, useMemo as G } from "react";
-import { createPortal as Te } from "react-dom";
-import { toast as R } from "sonner";
-import { useNivaroClient as oe, useItemEditAuth as Fe, useDrilldown as Me } from "../../context.js";
-import { useDebounced as Ie } from "../../hooks/useDebounced.js";
-import { get as W, post as Q, patch as je, del as Oe } from "../../lib/commands.js";
-import { usePresenceOnlinePoll as Le } from "../../lib/presence-live.js";
-import { useRecordSignalPeers as Ae, useRecordSignalSender as Ke, signalSentence as Be } from "../../lib/presence-signals.js";
-import { invalidateRecordTasks as Qe } from "../../lib/record-tasks.js";
-import { formatRelative as le } from "../../lib/utils.js";
-import { AgentBadge as ze } from "../AgentBadge.js";
+import { jsxs as s, jsx as e, Fragment as V } from "react/jsx-runtime";
+import { useQueryClient as fe, useQuery as U, useMutation as L } from "@tanstack/react-query";
+import { MessageSquare as $e, ChevronDown as Ee, ClipboardPlus as qe, Pencil as De, Trash2 as Pe, Check as Te, X as Fe, SmilePlus as ge } from "lucide-react";
+import { useState as N, useRef as Y, useEffect as Z, useMemo as X } from "react";
+import { createPortal as Re } from "react-dom";
+import { toast as F } from "sonner";
+import { useNivaroClient as oe, useItemEditAuth as Me, useDrilldown as Ie } from "../../context.js";
+import { useDebounced as je } from "../../hooks/useDebounced.js";
+import { get as W, post as B, patch as Oe, del as Le } from "../../lib/commands.js";
+import { usePresenceOnlinePoll as Ae } from "../../lib/presence-live.js";
+import { useRecordSignalPeers as Ke, useRecordSignalSender as Be, signalSentence as Qe } from "../../lib/presence-signals.js";
+import { invalidateRecordTasks as ze } from "../../lib/record-tasks.js";
+import { formatRelative as le, titleCase as Ue } from "../../lib/utils.js";
+import { AgentBadge as We } from "../AgentBadge.js";
 import { AutolinkedText as se } from "../AutolinkedText.js";
-import { InboundRequestPopover as Ue } from "../integrations/InboundRequest.js";
-import { UserAvatar as We } from "../UserAvatar.js";
-import { Avatar as He, AvatarFallback as Xe } from "../ui/avatar.js";
+import { InboundRequestPopover as Ge } from "../integrations/InboundRequest.js";
+import { useFieldComments as He } from "../item-edit/field-comments-context.js";
+import { UserAvatar as Xe } from "../UserAvatar.js";
+import { Avatar as Je, AvatarFallback as Ve } from "../ui/avatar.js";
 import { Button as J } from "../ui/button.js";
 import { Separator as xe } from "../ui/separator.js";
-import { Textarea as Ge } from "../ui/textarea.js";
-import { RecordEventPathSheet as Je } from "./IntegrationActivitySection.js";
+import { Textarea as Ze } from "../ui/textarea.js";
+import { RecordEventPathSheet as Ye } from "./IntegrationActivitySection.js";
 const ye = ["👍", "✅", "👀", "🎉", "❤️", "😂"];
-function Ve(t) {
-  var d, c, b, m;
-  return [(d = t.first_name) == null ? void 0 : d[0], (c = t.last_name) == null ? void 0 : c[0]].filter(Boolean).join("").toUpperCase() || ((m = (b = t.email) == null ? void 0 : b[0]) == null ? void 0 : m.toUpperCase()) || "?";
+function et(t) {
+  var d, c, h, m;
+  return [(d = t.first_name) == null ? void 0 : d[0], (c = t.last_name) == null ? void 0 : c[0]].filter(Boolean).join("").toUpperCase() || ((m = (h = t.email) == null ? void 0 : h[0]) == null ? void 0 : m.toUpperCase()) || "?";
 }
-function Ze({ comment: t }) {
+function tt({ comment: t }) {
   const i = (t.mentions ?? []).filter(
     (d) => {
       var c;
@@ -57,115 +58,139 @@ function Ze({ comment: t }) {
     }
   );
 }
-function re(t) {
+function ae(t) {
   return [t.first_name, t.last_name].filter(Boolean).join(" ") || t.email;
 }
-function Ye(t, i) {
+function nt({
+  field: t,
+  label: i,
+  resolved: d,
+  onJump: c
+}) {
+  const h = /* @__PURE__ */ s(V, { children: [
+    "on ",
+    /* @__PURE__ */ e("span", { className: "font-medium", children: i }),
+    d && /* @__PURE__ */ e("span", { className: "text-slate-400 dark:text-slate-500", children: " · resolved" })
+  ] }), m = "inline-flex min-w-0 max-w-[220px] items-center gap-1 truncate rounded-full border border-slate-200 bg-slate-50 px-1.5 py-px text-[10.5px] text-slate-600 dark:border-border dark:bg-muted dark:text-slate-300";
+  return c ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "data-comment-field": t,
+      onClick: c,
+      "data-tip": `Go to ${i}`,
+      className: `${m} transition-colors hover:border-nvr-cyan/50 hover:text-[#0e7490] dark:hover:text-nvr-cyan`,
+      children: h
+    }
+  ) : /* @__PURE__ */ e("span", { "data-comment-field": t, className: m, children: h });
+}
+function at(t, i) {
   const c = t.slice(0, i).match(/(^|\s)@([a-zA-Z0-9._-]{2,})$/);
   return c ? { start: i - c[2].length - 1, query: c[2] } : null;
 }
 function he(t) {
   return t.email.split("@")[0];
 }
-function ae({
+function re({
   value: t,
   onChange: i,
   ...d
 }) {
-  const c = oe(), b = Z(null), [m, h] = v(null), [E, f] = v(0), k = Ie((m == null ? void 0 : m.query) ?? "", 200), { data: M = [] } = U({
-    queryKey: ["users", "mention-search", k],
+  const c = oe(), h = Y(null), [m, f] = N(null), [S, g] = N(0), v = je((m == null ? void 0 : m.query) ?? "", 200), { data: D = [] } = U({
+    queryKey: ["users", "mention-search", v],
     queryFn: () => c.request(
-      W("/users", { limit: 8, sort: "first_name", search: k })
+      W("/users", { limit: 8, sort: "first_name", search: v })
     ).then((n) => n.data),
-    enabled: !!m && k.length >= 2,
+    enabled: !!m && v.length >= 2,
     staleTime: 3e4
-  }), I = Le(15e3, !!m), { data: p } = U({
+  }), M = Ae(15e3, !!m), { data: $ } = U({
     queryKey: ["presence-online"],
     queryFn: () => c.request(
       W("/presence/online")
     ),
     enabled: !!m,
-    refetchInterval: I,
+    refetchInterval: M,
     staleTime: 5e3
-  }), g = (n) => {
-    var x;
-    const l = (x = p == null ? void 0 : p.data) == null ? void 0 : x.find((_) => String(_.user_id).toUpperCase() === n.toUpperCase());
+  }), p = (n) => {
+    var u;
+    const l = (u = $ == null ? void 0 : $.data) == null ? void 0 : u.find((k) => String(k.user_id).toUpperCase() === n.toUpperCase());
     return l ? l.is_idle || l.away ? 1 : 0 : 2;
-  }, N = [...M].sort((n, l) => g(n.id) - g(l.id)), { data: j = [] } = U({
+  }, y = [...D].sort((n, l) => p(n.id) - p(l.id)), { data: R = [] } = U({
     queryKey: ["mention-roles"],
     queryFn: () => c.request(W("/chat/roles")).then((n) => n.data).catch(() => []),
     enabled: !!m,
     staleTime: 5 * 6e4
-  }), T = m ? j.filter(
-    (n) => n.name.toLowerCase().replace(/\s+/g, "-").startsWith(k.toLowerCase())
-  ).slice(0, 3) : [], w = !!m && k.length >= 2 && "owners".startsWith(k.toLowerCase()), C = !!m && k.length >= 2 && (N.length > 0 || w || T.length > 0), o = N.length + (w ? 1 : 0) + T.length, [y, D] = v(null), z = Z(null);
-  V(() => {
-    if (!C || !b.current) {
-      D(null);
+  }), P = m ? R.filter(
+    (n) => n.name.toLowerCase().replace(/\s+/g, "-").startsWith(v.toLowerCase())
+  ).slice(0, 3) : [], w = !!m && v.length >= 2 && "owners".startsWith(v.toLowerCase()), E = !!m && v.length >= 2 && (y.length > 0 || w || P.length > 0), o = y.length + (w ? 1 : 0) + P.length, [b, I] = N(null), A = Y(null);
+  Z(() => {
+    if (!E || !h.current) {
+      I(null);
       return;
     }
-    const n = b.current.getBoundingClientRect();
-    D({ top: n.bottom + 4, left: n.left, width: Math.min(n.width, 360) });
-    const l = (_) => {
-      var S;
-      (S = z.current) != null && S.contains(_.target) || h(null);
-    }, x = () => h(null);
-    return window.addEventListener("scroll", l, !0), window.addEventListener("resize", x), () => {
-      window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", x);
+    const n = h.current.getBoundingClientRect();
+    I({ top: n.bottom + 4, left: n.left, width: Math.min(n.width, 360) });
+    const l = (k) => {
+      var _;
+      (_ = A.current) != null && _.contains(k.target) || f(null);
+    }, u = () => f(null);
+    return window.addEventListener("scroll", l, !0), window.addEventListener("resize", u), () => {
+      window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", u);
     };
-  }, [C]);
-  function L(n) {
-    const l = Ye(n.value, n.selectionStart ?? n.value.length);
-    h(l), l || f(0);
+  }, [E]);
+  function Q(n) {
+    const l = at(n.value, n.selectionStart ?? n.value.length);
+    f(l), l || g(0);
   }
   function q(n) {
-    if (!m || !b.current) return;
-    const l = b.current.selectionStart ?? t.length, x = n === "__owners__" ? "@owners " : typeof n == "object" && "role" in n ? `@${n.role.toLowerCase().replace(/\s+/g, "-")} ` : `@${he(n)} `, _ = t.slice(0, m.start) + x + t.slice(l);
-    i(_), h(null), f(0);
-    const S = m.start + x.length;
+    if (!m || !h.current) return;
+    const l = h.current.selectionStart ?? t.length, u = n === "__owners__" ? "@owners " : typeof n == "object" && "role" in n ? `@${n.role.toLowerCase().replace(/\s+/g, "-")} ` : `@${he(n)} `, k = t.slice(0, m.start) + u + t.slice(l);
+    i(k), f(null), g(0);
+    const _ = m.start + u.length;
     requestAnimationFrame(() => {
-      var F, K;
-      (F = b.current) == null || F.focus(), (K = b.current) == null || K.setSelectionRange(S, S);
+      var j, O;
+      (j = h.current) == null || j.focus(), (O = h.current) == null || O.setSelectionRange(_, _);
     });
   }
-  function A(n) {
-    if (C)
+  function z(n) {
+    if (E)
       if (n.key === "ArrowDown")
-        n.preventDefault(), f((l) => (l + 1) % o);
+        n.preventDefault(), g((l) => (l + 1) % o);
       else if (n.key === "ArrowUp")
-        n.preventDefault(), f((l) => (l - 1 + o) % o);
+        n.preventDefault(), g((l) => (l - 1 + o) % o);
       else if (n.key === "Enter" || n.key === "Tab") {
         n.preventDefault();
-        const l = Math.min(E, o - 1), x = w ? 1 : 0, _ = x + N.length;
+        const l = Math.min(S, o - 1), u = w ? 1 : 0, k = u + y.length;
         if (w && l === 0) q("__owners__");
-        else if (l >= _) {
-          const S = T[l - _];
-          S && q({ role: S.name });
-        } else q(N[l - x]);
-      } else n.key === "Escape" && (n.preventDefault(), h(null));
+        else if (l >= k) {
+          const _ = P[l - k];
+          _ && q({ role: _.name });
+        } else q(y[l - u]);
+      } else n.key === "Escape" && (n.preventDefault(), f(null));
   }
   return /* @__PURE__ */ s("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      Ge,
+      Ze,
       {
         ...d,
-        ref: b,
+        ref: h,
         value: t,
         onChange: (n) => {
-          i(n.target.value), L(n.target);
+          i(n.target.value), Q(n.target);
         },
-        onKeyDown: A,
-        onClick: (n) => L(n.currentTarget),
-        onBlur: () => setTimeout(() => h(null), 150)
+        onKeyDown: z,
+        onClick: (n) => Q(n.currentTarget),
+        onBlur: () => setTimeout(() => f(null), 150)
       }
     ),
-    C && y && Te(
+    E && b && Re(
       /* @__PURE__ */ s(
         "div",
         {
-          ref: z,
+          ref: A,
+          "data-mention-menu": "",
           className: "fixed z-[110] max-h-60 overflow-y-auto rounded-md border border-slate-200 bg-white shadow-lg dark:border-border dark:bg-popover",
-          style: { top: y.top, left: y.left, width: y.width },
+          style: { top: b.top, left: b.left, width: b.width },
           onMouseDown: (n) => n.preventDefault(),
           children: [
             w && /* @__PURE__ */ s(
@@ -175,8 +200,8 @@ function ae({
                 onMouseDown: (n) => {
                   n.preventDefault(), q("__owners__");
                 },
-                onMouseEnter: () => f(0),
-                className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${E === 0 ? "bg-nvr-cyan/10" : ""}`,
+                onMouseEnter: () => g(0),
+                className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${S === 0 ? "bg-nvr-cyan/10" : ""}`,
                 children: [
                   /* @__PURE__ */ e("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/15 text-[10px] font-semibold text-nvr-navy/80 dark:text-nvr-cyan", children: "★" }),
                   /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: [
@@ -186,32 +211,32 @@ function ae({
                 ]
               }
             ),
-            N.map((n, l) => {
-              var S, F;
-              const x = w ? l + 1 : l, _ = [n.first_name, n.last_name].filter(Boolean).join(" ") || n.email;
+            y.map((n, l) => {
+              var _, j;
+              const u = w ? l + 1 : l, k = [n.first_name, n.last_name].filter(Boolean).join(" ") || n.email;
               return /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
-                  onMouseDown: (K) => {
-                    K.preventDefault(), q(n);
+                  onMouseDown: (O) => {
+                    O.preventDefault(), q(n);
                   },
-                  onMouseEnter: () => f(x),
-                  className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${x === E ? "bg-nvr-cyan/10" : ""}`,
+                  onMouseEnter: () => g(u),
+                  className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${u === S ? "bg-nvr-cyan/10" : ""}`,
                   children: [
                     /* @__PURE__ */ s("span", { className: "relative flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/15 text-[10px] font-semibold text-nvr-navy/80 dark:text-nvr-cyan", children: [
-                      (`${((S = n.first_name) == null ? void 0 : S[0]) ?? ""}${((F = n.last_name) == null ? void 0 : F[0]) ?? ""}`.trim() || n.email[0]).toUpperCase(),
-                      g(n.id) < 2 && /* @__PURE__ */ e(
+                      (`${((_ = n.first_name) == null ? void 0 : _[0]) ?? ""}${((j = n.last_name) == null ? void 0 : j[0]) ?? ""}`.trim() || n.email[0]).toUpperCase(),
+                      p(n.id) < 2 && /* @__PURE__ */ e(
                         "span",
                         {
-                          "data-mention-presence": g(n.id) === 0 ? "online" : "idle",
-                          title: g(n.id) === 0 ? "Online" : "Idle",
-                          className: `absolute -bottom-px -right-px h-2 w-2 rounded-full ring-2 ring-white dark:ring-popover ${g(n.id) === 0 ? "bg-emerald-500" : "border border-amber-500 bg-white dark:bg-popover"}`
+                          "data-mention-presence": p(n.id) === 0 ? "online" : "idle",
+                          title: p(n.id) === 0 ? "Online" : "Idle",
+                          className: `absolute -bottom-px -right-px h-2 w-2 rounded-full ring-2 ring-white dark:ring-popover ${p(n.id) === 0 ? "bg-emerald-500" : "border border-amber-500 bg-white dark:bg-popover"}`
                         }
                       )
                     ] }),
                     /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ e("span", { className: "block truncate text-[12px] font-medium text-slate-700 dark:text-slate-200", children: _ }),
+                      /* @__PURE__ */ e("span", { className: "block truncate text-[12px] font-medium text-slate-700 dark:text-slate-200", children: k }),
                       /* @__PURE__ */ s("span", { className: "block truncate text-[11px] text-slate-400", children: [
                         n.is_out_of_office && /* @__PURE__ */ s("span", { className: "mr-1 rounded bg-amber-100 px-1 py-px text-[9.5px] font-semibold text-amber-700 dark:bg-amber-400/15 dark:text-amber-400", children: [
                           "OOO",
@@ -230,17 +255,17 @@ function ae({
                 n.id
               );
             }),
-            T.map((n, l) => {
-              const x = N.length + (w ? 1 : 0) + l;
+            P.map((n, l) => {
+              const u = y.length + (w ? 1 : 0) + l;
               return /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
-                  onMouseDown: (_) => {
-                    _.preventDefault(), q({ role: n.name });
+                  onMouseDown: (k) => {
+                    k.preventDefault(), q({ role: n.name });
                   },
-                  onMouseEnter: () => f(x),
-                  className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${x === E ? "bg-nvr-cyan/10" : ""}`,
+                  onMouseEnter: () => g(u),
+                  className: `flex w-full items-center gap-2.5 px-2.5 py-1.5 text-left transition-colors ${u === S ? "bg-nvr-cyan/10" : ""}`,
                   children: [
                     /* @__PURE__ */ e("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-violet-500/15 text-[10px] font-semibold text-violet-600 dark:text-violet-300", children: "R" }),
                     /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: [
@@ -271,62 +296,62 @@ function be(t) {
       return "system";
   }
 }
-const et = {
+const rt = {
   people: "People",
   system: "System",
   integration: "Integration"
-}, tt = "integrations:";
-function nt({
+}, st = "integrations:";
+function ot({
   note: t,
   collection: i,
   item: d
 }) {
-  var C;
-  const c = Me(), [b, m] = v(!1), h = t.source === "external" && !!t.provider && !t.provider.startsWith(tt), E = oe(), f = fe(), [k, M] = v(!1), I = O({
-    mutationFn: (o) => E.request(Q(`/comments/${t.comment_id}/reactions`, { emoji: o })),
+  var E;
+  const c = Ie(), [h, m] = N(!1), f = t.source === "external" && !!t.provider && !t.provider.startsWith(st), S = oe(), g = fe(), [v, D] = N(!1), M = L({
+    mutationFn: (o) => S.request(B(`/comments/${t.comment_id}/reactions`, { emoji: o })),
     onSuccess: () => {
-      M(!1), f.invalidateQueries({ queryKey: ["comments-related"] }), f.invalidateQueries({ queryKey: ["row-comment-counts"] });
+      D(!1), g.invalidateQueries({ queryKey: ["comments-related"] }), g.invalidateQueries({ queryKey: ["row-comment-counts"] });
     },
-    onError: () => R.error("Failed to react")
-  }), [p, g] = v(!1), N = O({
-    mutationFn: () => E.request(
-      Q(`/integration-events/${encodeURIComponent(t.provider ?? "")}/replay`, {
+    onError: () => F.error("Failed to react")
+  }), [$, p] = N(!1), y = L({
+    mutationFn: () => S.request(
+      B(`/integration-events/${encodeURIComponent(t.provider ?? "")}/replay`, {
         entry_id: t.id.replace(/^external:/, "")
       })
     ),
     onSuccess: (o) => {
-      var y;
-      g(!1), R.success("Event replayed", {
-        description: (y = o == null ? void 0 : o.data) == null ? void 0 : y.detail
-      }), f.invalidateQueries({ queryKey: ["comments-related"] });
+      var b;
+      p(!1), F.success("Event replayed", {
+        description: (b = o == null ? void 0 : o.data) == null ? void 0 : b.detail
+      }), g.invalidateQueries({ queryKey: ["comments-related"] });
     },
     onError: (o) => {
-      var D;
-      g(!1);
-      const y = (D = o == null ? void 0 : o.response) == null ? void 0 : D.error;
-      R.error(y ?? (o == null ? void 0 : o.message) ?? "Replay failed", { duration: 8e3 });
+      var I;
+      p(!1);
+      const b = (I = o == null ? void 0 : o.response) == null ? void 0 : I.error;
+      F.error(b ?? (o == null ? void 0 : o.message) ?? "Replay failed", { duration: 8e3 });
     }
-  }), j = t.link ? () => {
+  }), R = t.link ? () => {
     const o = t.link;
     if (!o) return;
-    const y = document.querySelector(`[data-o2m-row="${o.collection}:${o.item_id}"]`);
-    if (y) {
-      y.scrollIntoView({ behavior: "smooth", block: "center" }), y.classList.add("nvr-row-flash"), setTimeout(() => y.classList.remove("nvr-row-flash"), 2400);
+    const b = document.querySelector(`[data-o2m-row="${o.collection}:${o.item_id}"]`);
+    if (b) {
+      b.scrollIntoView({ behavior: "smooth", block: "center" }), b.classList.add("nvr-row-flash"), setTimeout(() => b.classList.remove("nvr-row-flash"), 2400);
       return;
     }
     c == null || c.open({ collection: o.collection, itemId: o.item_id });
-  } : null, T = t.source === "transition" ? "border-nvr-cyan/30 bg-nvr-cyan/[0.06] text-nvr-navy dark:text-nvr-cyan" : t.source === "addendum" ? "border-amber-200 bg-amber-50/60 text-amber-700 dark:border-amber-900/40 dark:bg-amber-900/10 dark:text-amber-400" : t.source === "external" || t.source === "inbound" ? "border-sky-200 bg-sky-50/70 text-sky-700 dark:border-sky-900/40 dark:bg-sky-900/10 dark:text-sky-300" : t.source === "import" ? "border-emerald-200 bg-emerald-50/70 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/10 dark:text-emerald-300" : "border-slate-200 bg-slate-50/80 text-slate-600 dark:border-border dark:bg-muted/40 dark:text-slate-300", w = t.source === "import" && ((C = t.import) != null && C.file_id) ? t.import : null;
+  } : null, P = t.source === "transition" ? "border-nvr-cyan/30 bg-nvr-cyan/[0.06] text-nvr-navy dark:text-nvr-cyan" : t.source === "addendum" ? "border-amber-200 bg-amber-50/60 text-amber-700 dark:border-amber-900/40 dark:bg-amber-900/10 dark:text-amber-400" : t.source === "external" || t.source === "inbound" ? "border-sky-200 bg-sky-50/70 text-sky-700 dark:border-sky-900/40 dark:bg-sky-900/10 dark:text-sky-300" : t.source === "import" ? "border-emerald-200 bg-emerald-50/70 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-900/10 dark:text-emerald-300" : "border-slate-200 bg-slate-50/80 text-slate-600 dark:border-border dark:bg-muted/40 dark:text-slate-300", w = t.source === "import" && ((E = t.import) != null && E.file_id) ? t.import : null;
   return /* @__PURE__ */ s("div", { className: "flex gap-3", "data-recorded-note": t.source, children: [
     /* @__PURE__ */ e("div", { className: "mt-1 h-8 w-8 shrink-0", "aria-hidden": !0 }),
     /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
-        /* @__PURE__ */ e("span", { className: `rounded border px-1.5 py-px text-[10px] font-medium ${T}`, children: t.label }),
+        /* @__PURE__ */ e("span", { className: `rounded border px-1.5 py-px text-[10px] font-medium ${P}`, children: t.label }),
         t.user_name && /* @__PURE__ */ e("span", { className: "text-[12px] font-medium text-slate-700 dark:text-slate-200", children: t.user_name }),
-        t.context && (j ? /* @__PURE__ */ e(
+        t.context && (R ? /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: j,
+            onClick: R,
             className: "truncate text-[11px] text-nvr-navy underline-offset-2 hover:underline dark:text-nvr-cyan",
             "data-line-comment-link": !0,
             children: t.context
@@ -345,7 +370,7 @@ function nt({
         ) : /* @__PURE__ */ e("span", { className: "truncate text-[11px] text-slate-400", children: t.context })),
         /* @__PURE__ */ e("span", { className: "text-[11px] text-slate-400", children: le(t.created_at) }),
         t.source === "inbound" && t.inbound && /* @__PURE__ */ e(
-          Ue,
+          Ge,
           {
             activityId: t.inbound.activity_id,
             callerName: t.label,
@@ -365,7 +390,7 @@ function nt({
           }
         ),
         t.source === "external" && t.status === "error" && /* @__PURE__ */ e("span", { className: "rounded bg-red-50 px-1 text-[10px] font-medium text-red-700 dark:bg-red-500/10 dark:text-red-400", children: "error" }),
-        h && /* @__PURE__ */ e(
+        f && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -380,13 +405,13 @@ function nt({
           "button",
           {
             type: "button",
-            onClick: () => p ? N.mutate() : g(!0),
-            onBlur: () => g(!1),
-            disabled: N.isPending,
+            onClick: () => $ ? y.mutate() : p(!0),
+            onBlur: () => p(!1),
+            disabled: y.isPending,
             "data-note-replay": t.id,
-            className: `rounded px-1.5 py-px text-[10.5px] font-medium transition-colors ${p ? "bg-sky-600 text-white" : "text-sky-700 hover:bg-sky-50 dark:text-sky-300 dark:hover:bg-sky-900/20"}`,
+            className: `rounded px-1.5 py-px text-[10.5px] font-medium transition-colors ${$ ? "bg-sky-600 text-white" : "text-sky-700 hover:bg-sky-50 dark:text-sky-300 dark:hover:bg-sky-900/20"}`,
             "data-tip": "Re-apply this event from its stored payload",
-            children: N.isPending ? "Replaying…" : p ? "Replay this event?" : "Replay"
+            children: y.isPending ? "Replaying…" : $ ? "Replay this event?" : "Replay"
           }
         )
       ] }),
@@ -396,7 +421,7 @@ function nt({
           "button",
           {
             type: "button",
-            onClick: () => I.mutate(o.emoji),
+            onClick: () => M.mutate(o.emoji),
             className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-px text-[11px] transition-colors ${o.mine ? "border-nvr-cyan/40 bg-nvr-cyan/10 text-nvr-navy dark:text-nvr-cyan" : "border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 dark:border-border dark:bg-muted dark:text-slate-300"}`,
             children: [
               o.emoji,
@@ -410,17 +435,17 @@ function nt({
             "button",
             {
               type: "button",
-              onClick: () => M((o) => !o),
+              onClick: () => D((o) => !o),
               className: "rounded p-0.5 text-slate-300 transition-colors hover:bg-slate-100 hover:text-slate-500 dark:hover:bg-muted",
               "aria-label": "Add reaction",
               children: /* @__PURE__ */ e(ge, { className: "h-3.5 w-3.5" })
             }
           ),
-          k && /* @__PURE__ */ e("span", { className: "absolute bottom-6 left-0 z-20 flex gap-0.5 rounded-full border border-slate-200 bg-white px-1.5 py-1 shadow-lg dark:border-border dark:bg-popover", children: ye.map((o) => /* @__PURE__ */ e(
+          v && /* @__PURE__ */ e("span", { className: "absolute bottom-6 left-0 z-20 flex gap-0.5 rounded-full border border-slate-200 bg-white px-1.5 py-1 shadow-lg dark:border-border dark:bg-popover", children: ye.map((o) => /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: () => I.mutate(o),
+              onClick: () => M.mutate(o),
               className: "rounded-full px-1 text-[14px] hover:bg-muted",
               children: o
             },
@@ -429,10 +454,10 @@ function nt({
         ] })
       ] })
     ] }),
-    h && t.provider && /* @__PURE__ */ e(
-      Je,
+    f && t.provider && /* @__PURE__ */ e(
+      Ye,
       {
-        target: b ? {
+        target: h ? {
           source: t.provider,
           id: t.id.replace(/^external:/, ""),
           record: { collection: i, item: d }
@@ -443,99 +468,99 @@ function nt({
     )
   ] });
 }
-function Ct({
+function Dt({
   collection: t,
   item: i,
   title: d,
   defaultExpanded: c,
-  queuedComments: b,
+  queuedComments: h,
   onQueueComment: m
 }) {
-  const h = oe(), { userId: E } = Fe(), f = fe(), [k, M] = v(!1), I = Z(!1);
-  V(() => {
-    !I.current && c !== void 0 && (I.current = !0, M(c));
+  const f = oe(), { userId: S } = Me(), g = fe(), v = He(), [D, M] = N(!1), $ = Y(!1);
+  Z(() => {
+    !$.current && c !== void 0 && ($.current = !0, M(c));
   }, [c]);
-  const [p, g] = v(""), [N, j] = v(!1), T = async () => {
+  const [p, y] = N(""), [R, P] = N(!1), w = async () => {
     var r;
-    if (!(!p.trim() || N)) {
-      j(!0);
+    if (!(!p.trim() || R)) {
+      P(!0);
       try {
-        const a = await h.request(
-          Q("/ai/cleanup", { text: p })
+        const a = await f.request(
+          B("/ai/cleanup", { text: p })
         );
-        (r = a.data) != null && r.text && g(a.data.text);
+        (r = a.data) != null && r.text && y(a.data.text);
       } catch {
       } finally {
-        j(!1);
+        P(!1);
       }
     }
-  }, w = Ae(t, i, "note"), C = Ke(t, i, "note"), o = Z(0);
-  V(() => {
+  }, E = Ke(t, i, "note"), o = Be(t, i, "note"), b = Y(0);
+  Z(() => {
     if (!p.trim()) {
-      o.current && C("stop"), o.current = 0;
+      b.current && o("stop"), b.current = 0;
       return;
     }
     const r = Date.now();
-    r - o.current < 2500 || (o.current = r, C("start"));
-  }, [p, C]), V(() => () => C("stop"), [C]);
-  const [y, D] = v(null), [z, L] = v(null), [q, A] = v(""), n = !i || i === "new", l = ["comments", t, String(i)], { data: x, isLoading: _, isError: S } = U({
-    queryKey: l,
-    queryFn: () => h.request(W("/comments", { collection: t, item: i })).then((r) => r.data),
-    enabled: !n
-  }), F = G(() => (x ?? []).filter((r) => !r.deleted), [x]), { data: K } = U({
+    r - b.current < 2500 || (b.current = r, o("start"));
+  }, [p, o]), Z(() => () => o("stop"), [o]);
+  const [I, A] = N(null), [Q, q] = N(null), [z, n] = N(""), l = !i || i === "new", u = ["comments", t, String(i)], { data: k, isLoading: _, isError: j } = U({
+    queryKey: u,
+    queryFn: () => f.request(W("/comments", { collection: t, item: i })).then((r) => r.data),
+    enabled: !l
+  }), O = X(() => (k ?? []).filter((r) => !r.deleted), [k]), { data: ve } = U({
     queryKey: ["comments-related", t, String(i)],
-    queryFn: () => h.request(W("/comments/related", { collection: t, item: i })).then((r) => r.data ?? []).catch(() => []),
-    enabled: !n,
+    queryFn: () => f.request(W("/comments/related", { collection: t, item: i })).then((r) => r.data ?? []).catch(() => []),
+    enabled: !l,
     staleTime: 3e4
-  }), ie = K ?? [], $ = G(() => {
-    const r = F.map((u) => ({ kind: "comment", at: u.created_at, comment: u })), a = ie.map((u) => ({ kind: "related", at: u.created_at, note: u }));
-    return [...r, ...a].sort((u, B) => new Date(B.at).getTime() - new Date(u.at).getTime());
-  }, [F, ie]), [H, ve] = v(() => /* @__PURE__ */ new Set()), [X, ke] = v(""), Ne = G(() => {
+  }), ie = ve ?? [], C = X(() => {
+    const r = O.map((x) => ({ kind: "comment", at: x.created_at, comment: x })), a = ie.map((x) => ({ kind: "related", at: x.created_at, note: x }));
+    return [...r, ...a].sort((x, K) => new Date(K.at).getTime() - new Date(x.at).getTime());
+  }, [O, ie]), [G, ke] = N(() => /* @__PURE__ */ new Set()), [H, Ne] = N(""), we = X(() => {
     const r = { people: 0, system: 0, integration: 0 };
-    for (const a of $) r[be(a)]++;
+    for (const a of C) r[be(a)]++;
     return r;
-  }, [$]), Y = G(() => {
-    const r = X.trim().toLowerCase();
-    return $.filter((a) => H.has(be(a)) ? !1 : r ? (a.kind === "comment" ? `${a.comment.text} ${re(a.comment.user)}` : `${a.note.text} ${a.note.user_name ?? ""} ${a.note.label} ${a.note.context ?? ""} ${a.note.provider ?? ""}`).toLowerCase().includes(r) : !0);
-  }, [$, H, X]), we = (r) => ve((a) => {
-    const u = new Set(a);
-    return u.has(r) ? u.delete(r) : u.add(r), u;
-  }), _e = H.size > 0 || X.trim() !== "", ee = O({
-    mutationFn: (r) => h.request(Q("/comments", { collection: t, item: i, text: r })),
+  }, [C]), ee = X(() => {
+    const r = H.trim().toLowerCase();
+    return C.filter((a) => G.has(be(a)) ? !1 : r ? (a.kind === "comment" ? `${a.comment.text} ${ae(a.comment.user)}` : `${a.note.text} ${a.note.user_name ?? ""} ${a.note.label} ${a.note.context ?? ""} ${a.note.provider ?? ""}`).toLowerCase().includes(r) : !0);
+  }, [C, G, H]), _e = (r) => ke((a) => {
+    const x = new Set(a);
+    return x.has(r) ? x.delete(r) : x.add(r), x;
+  }), Ce = G.size > 0 || H.trim() !== "", te = L({
+    mutationFn: (r) => f.request(B("/comments", { collection: t, item: i, text: r })),
     onSuccess: () => {
-      f.invalidateQueries({ queryKey: l }), g("");
+      g.invalidateQueries({ queryKey: u }), y("");
     },
-    onError: () => R.error("Failed to post comment")
-  }), de = O({
-    mutationFn: ({ id: r, text: a }) => h.request(je(`/comments/${r}`, { text: a })),
+    onError: () => F.error("Failed to post comment")
+  }), de = L({
+    mutationFn: ({ id: r, text: a }) => f.request(Oe(`/comments/${r}`, { text: a })),
     onSuccess: () => {
-      f.invalidateQueries({ queryKey: l }), D(null), A("");
+      g.invalidateQueries({ queryKey: u }), A(null), n("");
     },
-    onError: () => R.error("Failed to update comment")
-  }), te = O({
-    mutationFn: (r) => h.request(Oe(`/comments/${r}`)),
-    onSuccess: () => f.invalidateQueries({ queryKey: l }),
-    onError: () => R.error("Failed to delete comment")
-  }), ce = O({
-    mutationFn: ({ id: r, emoji: a }) => h.request(Q(`/comments/${r}/reactions`, { emoji: a })),
-    onSuccess: () => f.invalidateQueries({ queryKey: l }),
-    onError: () => R.error("Failed to react")
-  }), [me, ue] = v(null), Ce = O({
-    mutationFn: (r) => h.request(
-      Q("/tasks", {
+    onError: () => F.error("Failed to update comment")
+  }), ne = L({
+    mutationFn: (r) => f.request(Le(`/comments/${r}`)),
+    onSuccess: () => g.invalidateQueries({ queryKey: u }),
+    onError: () => F.error("Failed to delete comment")
+  }), ce = L({
+    mutationFn: ({ id: r, emoji: a }) => f.request(B(`/comments/${r}/reactions`, { emoji: a })),
+    onSuccess: () => g.invalidateQueries({ queryKey: u }),
+    onError: () => F.error("Failed to react")
+  }), [me, pe] = N(null), Se = L({
+    mutationFn: (r) => f.request(
+      B("/tasks", {
         collection: t,
         item: i,
         title: r.text.replace(/<[^>]*>/g, "").replace(/@\[([^\]]+)\]/g, "@$1").slice(0, 200),
-        assignee: E
+        assignee: S
       })
     ),
     onSuccess: () => {
-      Qe(f, t, i), R.success("Task created from comment — assigned to you");
+      ze(g, t, i), F.success("Task created from comment — assigned to you");
     },
-    onError: () => R.error("Could not create a task")
+    onError: () => F.error("Could not create a task")
   });
-  function pe(r) {
-    r.preventDefault(), p.trim() && (n && m ? (m(p.trim()), g("")) : ee.mutate(p.trim()));
+  function ue(r) {
+    r.preventDefault(), p.trim() && (l && m ? (m(p.trim()), y("")) : te.mutate(p.trim()));
   }
   return (
     // Addressable from elsewhere (the summary panel jumps here), which needs
@@ -544,7 +569,7 @@ function Ct({
       "div",
       {
         "data-panel": "notes",
-        "data-panel-expanded": k ? "true" : "false",
+        "data-panel-expanded": D ? "true" : "false",
         className: "overflow-hidden rounded-xl border border-slate-200 bg-white dark:bg-card dark:border-border",
         children: [
           /* @__PURE__ */ s(
@@ -556,37 +581,37 @@ function Ct({
               className: "flex w-full flex-col px-5 py-3.5 text-left transition-colors hover:bg-slate-50/50 dark:hover:bg-white/[0.02]",
               children: [
                 /* @__PURE__ */ s("span", { className: "flex w-full items-center gap-2.5", children: [
-                  /* @__PURE__ */ e(Se, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+                  /* @__PURE__ */ e($e, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
                   /* @__PURE__ */ e("span", { className: "text-[13px] font-medium text-slate-800 dark:text-slate-200", children: d || "Comments" }),
-                  ($.length > 0 || (b ?? []).length > 0) && /* @__PURE__ */ e("span", { className: "rounded-full bg-slate-100 px-1.5 py-px text-[10.5px] font-semibold tabular-nums text-slate-500 dark:bg-muted dark:text-slate-400", children: n ? (b ?? []).length : $.length }),
+                  (C.length > 0 || (h ?? []).length > 0) && /* @__PURE__ */ e("span", { className: "rounded-full bg-slate-100 px-1.5 py-px text-[10.5px] font-semibold tabular-nums text-slate-500 dark:bg-muted dark:text-slate-400", children: l ? (h ?? []).length : C.length }),
                   /* @__PURE__ */ e(
-                    $e,
+                    Ee,
                     {
-                      className: `ml-auto h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform duration-150${k ? " rotate-180" : ""}`
+                      className: `ml-auto h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform duration-150${D ? " rotate-180" : ""}`
                     }
                   )
                 ] }),
-                !k && !n && $.length > 0 && (() => {
-                  const r = $[0], a = r.kind === "comment" ? re(r.comment.user) : r.note.user_name ?? "System", u = (r.kind === "comment" ? r.comment.text : r.note.text).replace(/<[^>]*>/g, " ").replace(/@\[([^\]]+)\]/g, "@$1").replace(/\s+/g, " ").trim();
-                  return u ? /* @__PURE__ */ s("span", { className: "mt-1 w-full truncate pl-6 text-[11.5px] text-slate-400", children: [
+                !D && !l && C.length > 0 && (() => {
+                  const r = C[0], a = r.kind === "comment" ? ae(r.comment.user) : r.note.user_name ?? "System", x = (r.kind === "comment" ? r.comment.text : r.note.text).replace(/<[^>]*>/g, " ").replace(/@\[([^\]]+)\]/g, "@$1").replace(/\s+/g, " ").trim();
+                  return x ? /* @__PURE__ */ s("span", { className: "mt-1 w-full truncate pl-6 text-[11.5px] text-slate-400", children: [
                     /* @__PURE__ */ s("span", { className: "font-medium text-slate-500 dark:text-slate-400", children: [
                       a,
                       ":"
                     ] }),
                     " ",
-                    /* @__PURE__ */ e(se, { text: u, plain: !0 })
+                    /* @__PURE__ */ e(se, { text: x, plain: !0 })
                   ] }) : null;
                 })()
               ]
             }
           ),
-          k && /* @__PURE__ */ e("div", { className: "border-t border-slate-100 px-5 py-4 dark:border-border/60", children: n ? /* @__PURE__ */ s("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ s("form", { onSubmit: pe, className: "space-y-2", children: [
+          D && /* @__PURE__ */ e("div", { className: "border-t border-slate-100 px-5 py-4 dark:border-border/60", children: l ? /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ s("form", { onSubmit: ue, className: "space-y-2", children: [
               /* @__PURE__ */ e(
-                ae,
+                re,
                 {
                   value: p,
-                  onChange: g,
+                  onChange: y,
                   placeholder: "Write a comment…",
                   rows: 3,
                   className: "text-[13px]"
@@ -597,9 +622,9 @@ function Ct({
                 /* @__PURE__ */ e(J, { type: "submit", size: "sm", disabled: !p.trim(), children: "Queue" })
               ] })
             ] }),
-            (b ?? []).length > 0 && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
+            (h ?? []).length > 0 && /* @__PURE__ */ s("div", { className: "space-y-2", children: [
               /* @__PURE__ */ e(xe, {}),
-              (b ?? []).map((r, a) => /* @__PURE__ */ s(
+              (h ?? []).map((r, a) => /* @__PURE__ */ s(
                 "div",
                 {
                   className: "flex items-start gap-2.5 rounded-lg border border-dashed border-amber-200/70 bg-amber-50/40 px-3 py-2 dark:border-amber-500/20 dark:bg-amber-500/5",
@@ -611,13 +636,13 @@ function Ct({
                 a
               ))
             ] })
-          ] }) : /* @__PURE__ */ s(ne, { children: [
-            /* @__PURE__ */ s("form", { onSubmit: pe, className: "space-y-2", children: [
+          ] }) : /* @__PURE__ */ s(V, { children: [
+            /* @__PURE__ */ s("form", { onSubmit: ue, className: "space-y-2", children: [
               /* @__PURE__ */ e(
-                ae,
+                re,
                 {
                   value: p,
-                  onChange: g,
+                  onChange: y,
                   placeholder: "Write a comment…",
                   rows: 3,
                   className: "text-[13px]"
@@ -630,46 +655,46 @@ function Ct({
                     "button",
                     {
                       type: "button",
-                      disabled: !p.trim() || N,
-                      onClick: () => void T(),
+                      disabled: !p.trim() || R,
+                      onClick: () => void w(),
                       "data-tip": "✨ Fix grammar & clarity (meaning preserved)",
                       className: "rounded-md border border-slate-200 px-2 py-1 text-[11.5px] text-slate-500 hover:bg-muted disabled:opacity-50 dark:border-border",
-                      children: N ? "…" : "✨ Polish"
+                      children: R ? "…" : "✨ Polish"
                     }
                   ),
-                  /* @__PURE__ */ e(J, { type: "submit", size: "sm", disabled: !p.trim() || ee.isPending, children: ee.isPending ? "Posting…" : "Comment" })
+                  /* @__PURE__ */ e(J, { type: "submit", size: "sm", disabled: !p.trim() || te.isPending, children: te.isPending ? "Posting…" : "Comment" })
                 ] })
               ] })
             ] }),
-            w.length > 0 && /* @__PURE__ */ s(
+            E.length > 0 && /* @__PURE__ */ s(
               "p",
               {
                 className: "flex items-center gap-1.5 text-[11.5px] italic text-slate-400",
                 "data-note-typing": !0,
                 children: [
                   /* @__PURE__ */ e("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-nvr-cyan" }),
-                  Be(w, "writing a note"),
+                  Qe(E, "writing a note"),
                   "…"
                 ]
               }
             ),
             /* @__PURE__ */ e(xe, { className: "my-4" }),
-            $.length > 0 && /* @__PURE__ */ s("div", { className: "mb-3 flex flex-wrap items-center gap-1.5", "data-notes-filters": !0, children: [
+            C.length > 0 && /* @__PURE__ */ s("div", { className: "mb-3 flex flex-wrap items-center gap-1.5", "data-notes-filters": !0, children: [
               ["people", "system", "integration"].map((r) => {
-                const a = !H.has(r), u = Ne[r];
+                const a = !G.has(r), x = we[r];
                 return /* @__PURE__ */ s(
                   "button",
                   {
                     type: "button",
-                    onClick: () => we(r),
+                    onClick: () => _e(r),
                     "aria-pressed": a,
                     "data-notes-filter": r,
-                    disabled: u === 0 && a,
+                    disabled: x === 0 && a,
                     className: `inline-flex items-center gap-1 rounded-full border px-2 py-px text-[11px] font-medium transition-colors ${a ? "border-nvr-cyan/40 bg-nvr-cyan/10 text-nvr-navy dark:text-nvr-cyan" : "border-slate-200 text-slate-400 line-through decoration-slate-300 dark:border-border"} disabled:opacity-50`,
                     title: r === "people" ? "Comments and notes people wrote" : r === "system" ? "State changes, change reasons, addendums and imports" : "Events an integration recorded",
                     children: [
-                      et[r],
-                      /* @__PURE__ */ e("span", { className: "tabular-nums text-[10px] opacity-70", children: u })
+                      rt[r],
+                      /* @__PURE__ */ e("span", { className: "tabular-nums text-[10px] opacity-70", children: x })
                     ]
                   },
                   r
@@ -678,18 +703,18 @@ function Ct({
               /* @__PURE__ */ e(
                 "input",
                 {
-                  value: X,
-                  onChange: (r) => ke(r.target.value),
+                  value: H,
+                  onChange: (r) => Ne(r.target.value),
                   placeholder: "Search notes…",
                   "aria-label": "Search notes",
                   "data-notes-search": !0,
                   className: "ml-auto h-6 w-[150px] rounded-md border border-slate-200 bg-background px-2 text-[11.5px] dark:border-border"
                 }
               ),
-              _e && /* @__PURE__ */ s("span", { className: "text-[10.5px] tabular-nums text-slate-400", "data-notes-shown": !0, children: [
-                Y.length,
+              Ce && /* @__PURE__ */ s("span", { className: "text-[10.5px] tabular-nums text-slate-400", "data-notes-shown": !0, children: [
+                ee.length,
                 " of ",
-                $.length
+                C.length
               ] })
             ] }),
             _ ? /* @__PURE__ */ e("div", { className: "space-y-4", children: ["a", "b"].map((r) => /* @__PURE__ */ s("div", { className: "flex gap-3", children: [
@@ -698,36 +723,45 @@ function Ct({
                 /* @__PURE__ */ e("div", { className: "h-3 w-32 animate-pulse rounded bg-slate-100 dark:bg-[hsl(var(--nvr-skeleton))]" }),
                 /* @__PURE__ */ e("div", { className: "h-3 w-full animate-pulse rounded bg-slate-100 dark:bg-[hsl(var(--nvr-skeleton))]" })
               ] })
-            ] }, r)) }) : S ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-red-500", children: "Failed to load comments." }) : $.length === 0 ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-slate-400", children: "No notes yet." }) : Y.length === 0 ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-slate-400", children: "No notes match — clear the search or turn a filter back on." }) : /* @__PURE__ */ e("div", { className: "nvr-stagger-direct space-y-4", children: Y.map((r) => {
+            ] }, r)) }) : j ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-red-500", children: "Failed to load comments." }) : C.length === 0 ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-slate-400", children: "No notes yet." }) : ee.length === 0 ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-[12px] text-slate-400", children: "No notes match — clear the search or turn a filter back on." }) : /* @__PURE__ */ e("div", { className: "nvr-stagger-direct space-y-4", children: ee.map((r) => {
               if (r.kind === "related")
                 return /* @__PURE__ */ e("div", { className: "nvr-section-enter", children: /* @__PURE__ */ e(
-                  nt,
+                  ot,
                   {
                     note: r.note,
                     collection: t,
                     item: String(i)
                   }
                 ) }, r.note.id);
-              const a = r.comment, u = E === a.user.id, B = y === a.id;
+              const a = r.comment, x = S === a.user.id, K = I === a.id;
               return /* @__PURE__ */ s("div", { className: "nvr-section-enter group flex gap-3", children: [
                 /* @__PURE__ */ e(
-                  We,
+                  Xe,
                   {
                     userId: a.user.id,
                     className: "h-8 w-8",
-                    fallback: /* @__PURE__ */ e(He, { className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ e(Xe, { className: "bg-nvr-cyan/15 text-[11px] font-bold text-nvr-navy", children: Ve(a.user) }) })
+                    fallback: /* @__PURE__ */ e(Je, { className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ e(Ve, { className: "bg-nvr-cyan/15 text-[11px] font-bold text-nvr-navy", children: et(a.user) }) })
                   }
                 ),
                 /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ e("span", { className: "text-[13px] font-medium text-slate-800", children: re(a.user) }),
-                    /* @__PURE__ */ e(ze, { label: a.via_agent }),
+                    /* @__PURE__ */ e("span", { className: "text-[13px] font-medium text-slate-800", children: ae(a.user) }),
+                    /* @__PURE__ */ e(We, { label: a.via_agent }),
                     /* @__PURE__ */ e("span", { className: "text-[11px] text-slate-400", children: le(a.created_at) }),
                     a.updated_at && a.updated_at !== a.created_at && /* @__PURE__ */ e("span", { className: "text-[10px] text-slate-300", children: "(edited)" }),
-                    !B && /* @__PURE__ */ s(
+                    a.field && /* @__PURE__ */ e(
+                      nt,
+                      {
+                        field: a.field,
+                        label: (v == null ? void 0 : v.labelOf(a.field)) ?? Ue(a.field),
+                        resolved: !!a.resolved_at,
+                        onJump: v ? () => v.jump(a.field) : void 0
+                      }
+                    ),
+                    !K && /* @__PURE__ */ s(
                       "div",
                       {
-                        className: `ml-auto flex items-center gap-1 transition-opacity group-hover:opacity-100 focus-within:opacity-100 ${z === a.id ? "opacity-100" : "opacity-0"}`,
+                        className: `ml-auto flex items-center gap-1 transition-opacity group-hover:opacity-100 focus-within:opacity-100 ${Q === a.id ? "opacity-100" : "opacity-0"}`,
                         children: [
                           /* @__PURE__ */ e(
                             "button",
@@ -736,23 +770,23 @@ function Ct({
                               title: "Make a task from this comment",
                               "aria-label": "Make a task from this comment",
                               className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-muted",
-                              onClick: () => Ce.mutate(a),
-                              children: /* @__PURE__ */ e(Ee, { className: "h-3 w-3" })
+                              onClick: () => Se.mutate(a),
+                              children: /* @__PURE__ */ e(qe, { className: "h-3 w-3" })
                             }
                           ),
-                          u && (z === a.id ? /* @__PURE__ */ s(ne, { children: [
+                          x && (Q === a.id ? /* @__PURE__ */ s(V, { children: [
                             /* @__PURE__ */ e(
                               "button",
                               {
                                 type: "button",
                                 autoFocus: !0,
-                                disabled: te.isPending,
+                                disabled: ne.isPending,
                                 "data-comment-delete-confirm": a.id,
                                 className: "rounded bg-red-600 px-1.5 py-px text-[10.5px] font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-60",
-                                onClick: () => te.mutate(a.id, {
-                                  onSettled: () => L(null)
+                                onClick: () => ne.mutate(a.id, {
+                                  onSettled: () => q(null)
                                 }),
-                                children: te.isPending ? "Deleting…" : "Delete comment?"
+                                children: ne.isPending ? "Deleting…" : "Delete comment?"
                               }
                             ),
                             /* @__PURE__ */ e(
@@ -760,11 +794,11 @@ function Ct({
                               {
                                 type: "button",
                                 className: "rounded px-1.5 py-px text-[10.5px] font-medium text-slate-500 transition-colors hover:bg-slate-100 dark:hover:bg-muted",
-                                onClick: () => L(null),
+                                onClick: () => q(null),
                                 children: "Keep"
                               }
                             )
-                          ] }) : /* @__PURE__ */ s(ne, { children: [
+                          ] }) : /* @__PURE__ */ s(V, { children: [
                             /* @__PURE__ */ e(
                               "button",
                               {
@@ -773,9 +807,9 @@ function Ct({
                                 "aria-label": "Edit comment",
                                 className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700",
                                 onClick: () => {
-                                  D(a.id), A(a.text);
+                                  A(a.id), n(a.text);
                                 },
-                                children: /* @__PURE__ */ e(qe, { className: "h-3 w-3" })
+                                children: /* @__PURE__ */ e(De, { className: "h-3 w-3" })
                               }
                             ),
                             /* @__PURE__ */ e(
@@ -785,8 +819,8 @@ function Ct({
                                 title: "Delete comment",
                                 "aria-label": "Delete comment",
                                 className: "rounded p-1 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-500",
-                                onClick: () => L(a.id),
-                                children: /* @__PURE__ */ e(De, { className: "h-3 w-3" })
+                                onClick: () => q(a.id),
+                                children: /* @__PURE__ */ e(Pe, { className: "h-3 w-3" })
                               }
                             )
                           ] }))
@@ -794,12 +828,12 @@ function Ct({
                       }
                     )
                   ] }),
-                  B ? /* @__PURE__ */ s("div", { className: "mt-1.5 space-y-2", children: [
+                  K ? /* @__PURE__ */ s("div", { className: "mt-1.5 space-y-2", children: [
                     /* @__PURE__ */ e(
-                      ae,
+                      re,
                       {
-                        value: q,
-                        onChange: A,
+                        value: z,
+                        onChange: n,
                         rows: 3,
                         className: "text-[13px]"
                       }
@@ -810,10 +844,10 @@ function Ct({
                         {
                           size: "sm",
                           className: "h-7 gap-1.5",
-                          disabled: !q.trim() || de.isPending,
-                          onClick: () => de.mutate({ id: a.id, text: q.trim() }),
+                          disabled: !z.trim() || de.isPending,
+                          onClick: () => de.mutate({ id: a.id, text: z.trim() }),
                           children: [
-                            /* @__PURE__ */ e(Pe, { className: "h-3 w-3" }),
+                            /* @__PURE__ */ e(Te, { className: "h-3 w-3" }),
                             " Save"
                           ]
                         }
@@ -825,53 +859,53 @@ function Ct({
                           variant: "outline",
                           className: "h-7 gap-1.5",
                           onClick: () => {
-                            D(null), A("");
+                            A(null), n("");
                           },
                           children: [
-                            /* @__PURE__ */ e(Re, { className: "h-3 w-3" }),
+                            /* @__PURE__ */ e(Fe, { className: "h-3 w-3" }),
                             " Cancel"
                           ]
                         }
                       )
                     ] })
                   ] }) : /* @__PURE__ */ e("p", { className: "mt-0.5 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-600", children: /* @__PURE__ */ e(se, { text: a.text }) }),
-                  !B && /* @__PURE__ */ e(Ze, { comment: a }),
-                  !B && /* @__PURE__ */ s("div", { className: "mt-1 flex flex-wrap items-center gap-1", children: [
-                    (a.reactions ?? []).map((P) => /* @__PURE__ */ s(
+                  !K && /* @__PURE__ */ e(tt, { comment: a }),
+                  !K && /* @__PURE__ */ s("div", { className: "mt-1 flex flex-wrap items-center gap-1", children: [
+                    (a.reactions ?? []).map((T) => /* @__PURE__ */ s(
                       "button",
                       {
                         type: "button",
-                        onClick: () => ce.mutate({ id: a.id, emoji: P.emoji }),
-                        className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-px text-[11px] transition-colors ${P.mine ? "border-nvr-cyan/40 bg-nvr-cyan/10 text-nvr-navy dark:text-nvr-cyan" : "border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 dark:border-border dark:bg-muted dark:text-slate-300"}`,
+                        onClick: () => ce.mutate({ id: a.id, emoji: T.emoji }),
+                        className: `inline-flex items-center gap-1 rounded-full border px-1.5 py-px text-[11px] transition-colors ${T.mine ? "border-nvr-cyan/40 bg-nvr-cyan/10 text-nvr-navy dark:text-nvr-cyan" : "border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 dark:border-border dark:bg-muted dark:text-slate-300"}`,
                         children: [
-                          P.emoji,
-                          /* @__PURE__ */ e("span", { className: "tabular-nums text-[10px] font-semibold", children: P.count })
+                          T.emoji,
+                          /* @__PURE__ */ e("span", { className: "tabular-nums text-[10px] font-semibold", children: T.count })
                         ]
                       },
-                      P.emoji
+                      T.emoji
                     )),
                     /* @__PURE__ */ s("span", { className: "relative", children: [
                       /* @__PURE__ */ e(
                         "button",
                         {
                           type: "button",
-                          onClick: () => ue(me === a.id ? null : a.id),
+                          onClick: () => pe(me === a.id ? null : a.id),
                           className: "rounded p-0.5 text-slate-300 transition-colors hover:bg-slate-100 hover:text-slate-500 dark:hover:bg-muted",
                           "aria-label": "Add reaction",
                           children: /* @__PURE__ */ e(ge, { className: "h-3.5 w-3.5" })
                         }
                       ),
-                      me === a.id && /* @__PURE__ */ e("span", { className: "absolute bottom-6 left-0 z-20 flex gap-0.5 rounded-full border border-slate-200 bg-white px-1.5 py-1 shadow-lg dark:border-border dark:bg-popover", children: ye.map((P) => /* @__PURE__ */ e(
+                      me === a.id && /* @__PURE__ */ e("span", { className: "absolute bottom-6 left-0 z-20 flex gap-0.5 rounded-full border border-slate-200 bg-white px-1.5 py-1 shadow-lg dark:border-border dark:bg-popover", children: ye.map((T) => /* @__PURE__ */ e(
                         "button",
                         {
                           type: "button",
                           onClick: () => {
-                            ce.mutate({ id: a.id, emoji: P }), ue(null);
+                            ce.mutate({ id: a.id, emoji: T }), pe(null);
                           },
                           className: "rounded-full px-1 text-[14px] hover:bg-muted",
-                          children: P
+                          children: T
                         },
-                        P
+                        T
                       )) })
                     ] })
                   ] })
@@ -885,5 +919,6 @@ function Ct({
   );
 }
 export {
-  Ct as CommentPanel
+  Dt as CommentPanel,
+  re as MentionTextarea
 };