@flamingo-stack/openframe-frontend-core 0.0.691 → 0.0.692

package/dist/{chunk-KMW2PXBU.js → chunk-CKO6NKNE.js}

@@ -164,12 +164,15 @@ import {
   ArrowRightUpIcon,
   BellOffIcon,
   BoxArchiveIcon,
+  ChatsIcon,
   CheckCircleIcon,
   CheckIcon,
   Chevron02DownIcon,
   Chevron02LeftIcon,
   Chevron02RightIcon,
   Chevron02UpIcon,
+  Chevrons03LeftIcon,
+  Chevrons03RightIcon,
   ClockHistoryIcon,
   ClockIcon,
   CmmcLogoIcon,
@@ -181,6 +184,7 @@ import {
   DraggerIcon,
   Ellipsis01Icon,
   EuLogoIcon,
+  ExternalLinkIcon,
   EyeIcon as EyeIcon2,
   EyeOffIcon,
   FigmaIcon,
@@ -199,8 +203,10 @@ import {
   IsoLogoIcon,
   LinkedinIcon,
   LinuxLogoIcon,
+  MessageOffIcon,
   MessagesIcon,
   MicrosoftLogoIcon,
+  MonitorOffIcon,
   NistLogoIcon,
   PauseIcon,
   PenEditIcon,
@@ -211,6 +217,7 @@ import {
   PowershellLogoIcon,
   PythonLogoIcon,
   QuestionCircleIcon,
+  RecordingIcon,
   Refresh02VrIcon,
   Send03Icon,
   ShieldCheckIcon,
@@ -6436,7 +6443,7 @@ function getDomain(urlStr) {
 function domainToTitle(domain) {
   return domain.split(".")[0].replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
-var ExternalLinkIcon = ({ size = 16 }) => /* @__PURE__ */ jsx60(
+var ExternalLinkIcon2 = ({ size = 16 }) => /* @__PURE__ */ jsx60(
   "svg",
   {
     width: size,
@@ -6618,7 +6625,7 @@ var OGLinkPreview = ({
         className: "inline-flex items-center gap-2 text-ods-accent transition-colors hover:text-ods-accent-hover",
         children: [
           /* @__PURE__ */ jsx60("span", { className: "underline", children: url }),
-          /* @__PURE__ */ jsx60(ExternalLinkIcon, { size: 14 })
+          /* @__PURE__ */ jsx60(ExternalLinkIcon2, { size: 14 })
         ]
       }
     ) });
@@ -6681,7 +6688,7 @@ var OGLinkPreview = ({
               /* @__PURE__ */ jsx60("h3", { className: "truncate font-semibold text-ods-text-primary transition-colors text-h6 group-hover:text-ods-accent", children: title }),
               description && /* @__PURE__ */ jsx60("p", { className: "truncate text-ods-text-secondary text-h6", children: description })
             ] }),
-            /* @__PURE__ */ jsx60(ExternalLinkIcon, { size: 14 })
+            /* @__PURE__ */ jsx60(ExternalLinkIcon2, { size: 14 })
           ]
         }
       ) });
@@ -6739,7 +6746,7 @@ var OGLinkPreview = ({
             /* @__PURE__ */ jsx60("h3", { className: "truncate font-semibold text-ods-text-primary transition-colors text-h6 group-hover:text-ods-accent", children: title }),
             description && /* @__PURE__ */ jsx60("p", { className: "truncate text-ods-text-secondary text-h6", children: description })
           ] }),
-          /* @__PURE__ */ jsx60(ExternalLinkIcon, {})
+          /* @__PURE__ */ jsx60(ExternalLinkIcon2, {})
         ]
       }
     ) });
@@ -7111,7 +7118,7 @@ var MediaCarousel = memo2(function MediaCarouselImpl({
 // src/components/embeds/reddit-embed-client.tsx
 import { jsx as jsx62, jsxs as jsxs46 } from "react/jsx-runtime";
 var MessageCircleIcon2 = () => /* @__PURE__ */ jsx62("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx62("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" }) });
-var ExternalLinkIcon2 = () => /* @__PURE__ */ jsxs46("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+var ExternalLinkIcon3 = () => /* @__PURE__ */ jsxs46("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
   /* @__PURE__ */ jsx62("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
   /* @__PURE__ */ jsx62("polyline", { points: "15,3 21,3 21,9" }),
   /* @__PURE__ */ jsx62("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
@@ -7447,7 +7454,7 @@ function RedditEmbedClient({ url, maxWidth = 700 }) {
         rel: "noopener noreferrer",
         className: "inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80",
         children: [
-          /* @__PURE__ */ jsx62(ExternalLinkIcon2, {}),
+          /* @__PURE__ */ jsx62(ExternalLinkIcon3, {}),
           /* @__PURE__ */ jsx62("span", { children: "View on Reddit" })
         ]
       }
@@ -7459,7 +7466,7 @@ function RedditEmbedClient({ url, maxWidth = 700 }) {
 import { useState as useState24, useEffect as useEffect13, useRef as useRef13 } from "react";
 import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 var MessageCircleIcon3 = () => /* @__PURE__ */ jsx63("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx63("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" }) });
-var ExternalLinkIcon3 = () => /* @__PURE__ */ jsxs47("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
+var ExternalLinkIcon4 = () => /* @__PURE__ */ jsxs47("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
   /* @__PURE__ */ jsx63("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
   /* @__PURE__ */ jsx63("polyline", { points: "15,3 21,3 21,9" }),
   /* @__PURE__ */ jsx63("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
@@ -7565,7 +7572,7 @@ function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }) {
     url: link.href,
     text: link.textContent || link.href
   })).filter((link) => !link.url.includes("twitter.com") && !link.url.includes("x.com"));
-  const formatTime2 = () => {
+  const formatTime3 = () => {
     return "on X";
   };
   const truncateText = (text, maxLength = 600) => {
@@ -7602,7 +7609,7 @@ function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }) {
           /* @__PURE__ */ jsx63(UserIcon3, {}),
           /* @__PURE__ */ jsx63("span", { children: tweetData.author_name }),
           /* @__PURE__ */ jsx63(ClockIcon3, {}),
-          /* @__PURE__ */ jsx63("span", { children: formatTime2() })
+          /* @__PURE__ */ jsx63("span", { children: formatTime3() })
         ] })
       ] })
     ] }) }) }),
@@ -7623,7 +7630,7 @@ function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }) {
           rel: "noopener noreferrer",
           className: "inline-flex items-center space-x-2 text-[#1DA1F2] transition-colors text-h6 hover:text-ods-accent",
           children: [
-            /* @__PURE__ */ jsx63(ExternalLinkIcon3, {}),
+            /* @__PURE__ */ jsx63(ExternalLinkIcon4, {}),
             /* @__PURE__ */ jsx63("span", { className: "underline", children: link.text })
           ]
         },
@@ -7652,7 +7659,7 @@ function TwitterEmbedClient({ url, tweetId, maxWidth = 700 }) {
         rel: "noopener noreferrer",
         className: "inline-flex items-center space-x-2 text-ods-accent transition-colors text-h6 hover:opacity-80",
         children: [
-          /* @__PURE__ */ jsx63(ExternalLinkIcon3, {}),
+          /* @__PURE__ */ jsx63(ExternalLinkIcon4, {}),
           /* @__PURE__ */ jsx63("span", { children: "View on X" })
         ]
       }
@@ -29506,11 +29513,526 @@ function TimeTrackerHeaderButton({ className, disabled }) {
   ] });
 }
 
+// src/components/features/remote-session/remote-session-parts.tsx
+import { useEffect as useEffect41, useState as useState74 } from "react";
+import { jsx as jsx260, jsxs as jsxs207 } from "react/jsx-runtime";
+var DESKTOP_SCALE = {
+  "--spacing-system-xs": "0.5rem",
+  "--spacing-system-s": "0.75rem",
+  "--spacing-system-m": "1rem",
+  "--spacing-system-l": "1.5rem",
+  "--spacing-system-xl": "2.5rem",
+  "--font-size-h1-title": "3.5rem",
+  "--font-size-h2-sub-title": "2rem",
+  "--font-size-h3-body": "1.125rem",
+  "--font-size-h4-body": "1.125rem",
+  "--font-size-h5-caption": "0.875rem",
+  "--font-size-h6-caption": "0.875rem",
+  "--font-line-space-h1-main-title": "4rem",
+  "--font-line-space-h2-sub-title": "2.5rem",
+  "--font-line-space-h3-body": "1.5rem",
+  "--font-line-space-h4-body": "1.5rem",
+  "--font-line-space-h5-caption": "1.25rem",
+  "--font-line-space-h6-caption": "1.25rem"
+};
+function RemoteSessionScope({ children, className }) {
+  return /* @__PURE__ */ jsx260("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
+}
+function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx260(
+      SquareAvatar,
+      {
+        variant: "square",
+        fit: "contain",
+        sizePx,
+        src: logoUrl,
+        alt: name,
+        fallback: name,
+        className: cn("shrink-0 rounded-md border border-ods-border bg-ods-card", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx260(
+    "div",
+    {
+      role: "img",
+      "aria-label": name,
+      style: { width: sizePx, height: sizePx },
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card",
+        className
+      ),
+      children: /* @__PURE__ */ jsx260(OpenFrameLogo, { className: "size-1/2" })
+    }
+  );
+}
+function RemoteSessionRecordingTag() {
+  return /* @__PURE__ */ jsxs207("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsx260(RecordingIcon, { size: 16, color: "currentColor", className: "text-ods-success" }),
+    /* @__PURE__ */ jsx260("span", { className: "text-ods-success text-h5", children: "Session Recording" })
+  ] });
+}
+var REMOTE_SESSION_DRAG_HANDLE_CLASS = "cursor-grab active:cursor-grabbing";
+function RemoteSessionDragger({ dragHandlers }) {
+  return /* @__PURE__ */ jsx260(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] text-ods-text-secondary",
+        dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+      ),
+      ...dragHandlers,
+      children: /* @__PURE__ */ jsx260(DraggerIcon, { size: 24, color: "currentColor" })
+    }
+  );
+}
+function formatRemoteSessionElapsed(elapsedMs) {
+  const total = Math.max(0, Math.floor(elapsedMs / 1e3));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+function useRemoteSessionTimer(startedAt) {
+  const [nowMs, setNowMs] = useState74(() => Date.now());
+  useEffect41(() => {
+    const timer = setInterval(() => setNowMs(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return formatRemoteSessionElapsed(nowMs - Date.parse(startedAt));
+}
+
+// src/components/features/remote-session/remote-access-request-card.tsx
+import { jsx as jsx261, jsxs as jsxs208 } from "react/jsx-runtime";
+function displaySiteUrl(url) {
+  return url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}
+function RemoteAccessRequestCard({
+  party,
+  showRecordingNotice = false,
+  deciding = null,
+  error,
+  onDecide,
+  onOpenSite
+}) {
+  const { organizationName } = party;
+  const siteUrl = party.organizationSiteUrl ?? void 0;
+  const openableSite = siteUrl?.startsWith("https://") ? siteUrl : void 0;
+  return /* @__PURE__ */ jsxs208("div", { className: "flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]", children: [
+    /* @__PURE__ */ jsx261("h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
+    /* @__PURE__ */ jsxs208("div", { className: "flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx261(RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
+      /* @__PURE__ */ jsxs208("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx261("p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
+        siteUrl && /* @__PURE__ */ jsx261("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: displaySiteUrl(siteUrl) })
+      ] }),
+      openableSite && onOpenSite && /* @__PURE__ */ jsx261(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx261(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
+    ] }),
+    /* @__PURE__ */ jsxs208("p", { className: "w-full text-ods-text-primary text-h4", children: [
+      "A technician from ",
+      /* @__PURE__ */ jsx261("span", { className: "text-ods-accent", children: organizationName }),
+      " will be able to view your screen and control your mouse and keyboard during this session."
+    ] }),
+    /* @__PURE__ */ jsxs208("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      showRecordingNotice && /* @__PURE__ */ jsxs208("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-s)]", children: [
+        /* @__PURE__ */ jsx261(InfoCircleIcon, { size: 24, color: "currentColor", className: "shrink-0 text-ods-accent" }),
+        /* @__PURE__ */ jsx261("p", { className: "min-w-0 flex-1 text-ods-text-primary text-h6", children: "This session will be recorded and available upon request." })
+      ] }),
+      error ? /* @__PURE__ */ jsx261("p", { className: "w-full text-ods-text-primary text-h6", children: error }) : /* @__PURE__ */ jsx261("p", { className: "w-full text-ods-text-secondary text-h6", children: "You can end the session at any time." })
+    ] }),
+    /* @__PURE__ */ jsxs208("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+      /* @__PURE__ */ jsx261(
+        Button,
+        {
+          variant: "outline",
+          fullWidth: true,
+          loading: deciding === "DENIED",
+          disabled: deciding !== null,
+          onClick: () => onDecide("DENIED"),
+          children: "Decline"
+        }
+      ),
+      /* @__PURE__ */ jsx261(
+        Button,
+        {
+          variant: "accent",
+          fullWidth: true,
+          loading: deciding === "APPROVED",
+          disabled: deciding !== null,
+          onClick: () => onDecide("APPROVED"),
+          children: "Allow Access"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-block.tsx
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx262, jsxs as jsxs209 } from "react/jsx-runtime";
+var RemoteSessionBlockFrame = forwardRef31(
+  ({ children, expanded = false, onHide, className }, ref) => {
+    return /* @__PURE__ */ jsxs209(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-[440px] shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg",
+          expanded && "h-[680px]",
+          className
+        ),
+        children: [
+          children,
+          /* @__PURE__ */ jsxs209(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 w-full shrink-0 items-center gap-[var(--spacing-system-xs)] border-t border-ods-border bg-ods-card px-[var(--spacing-system-m)]",
+              onClick: onHide,
+              children: [
+                /* @__PURE__ */ jsx262(Chevrons03RightIcon, { size: 24 }),
+                /* @__PURE__ */ jsx262("span", { className: "min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4", children: "Hide this Block" }),
+                /* @__PURE__ */ jsx262(OpenFrameLogo, { className: "size-6 shrink-0" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RemoteSessionBlockFrame.displayName = "RemoteSessionBlockFrame";
+function RemoteSessionEndButton({ onEndSession }) {
+  return /* @__PURE__ */ jsx262(
+    Button,
+    {
+      variant: "outline",
+      fullWidth: true,
+      leftIcon: /* @__PURE__ */ jsx262(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
+      onClick: onEndSession,
+      children: "End Session"
+    }
+  );
+}
+function RemoteSessionSummary({
+  party,
+  elapsed,
+  showRecordingTag = false,
+  onOpenChat,
+  onEndSession,
+  dragHandlers
+}) {
+  const technician = party.technicianName;
+  return /* @__PURE__ */ jsxs209("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx262(RemoteSessionDragger, { dragHandlers }),
+    /* @__PURE__ */ jsxs209(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center gap-[var(--spacing-system-xs)] pr-[var(--spacing-system-mf)]",
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+        ),
+        ...dragHandlers,
+        children: [
+          technician ? /* @__PURE__ */ jsx262(
+            SquareAvatar,
+            {
+              variant: "round",
+              sizePx: 48,
+              src: party.technicianAvatarUrl ?? void 0,
+              fallback: technician
+            }
+          ) : /* @__PURE__ */ jsx262(RemoteSessionOrgLogo, { name: party.organizationName, logoUrl: party.organizationLogoUrl, sizePx: 48 }),
+          /* @__PURE__ */ jsxs209("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs209("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+              technician ? `${technician} connected` : "IT support team is connected",
+              " ",
+              /* @__PURE__ */ jsxs209("span", { className: "text-ods-text-secondary", children: [
+                "(",
+                elapsed,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx262("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: party.organizationName })
+          ] })
+        ]
+      }
+    ),
+    showRecordingTag && /* @__PURE__ */ jsx262(RemoteSessionRecordingTag, {}),
+    /* @__PURE__ */ jsxs209("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx262(
+        Button,
+        {
+          variant: "outline",
+          fullWidth: true,
+          leftIcon: /* @__PURE__ */ jsx262(ChatsIcon, { size: 24, color: "currentColor" }),
+          onClick: onOpenChat,
+          children: "Open Chat"
+        }
+      ),
+      /* @__PURE__ */ jsx262(RemoteSessionEndButton, { onEndSession })
+    ] })
+  ] });
+}
+var RemoteSessionMinimizedChip = forwardRef31(
+  ({ party, onExpand, dragHandlers }, ref) => {
+    const technician = party.technicianName;
+    return /* @__PURE__ */ jsxs209(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Show session block",
+        className: cn(
+          "flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border",
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+        ),
+        onClick: onExpand,
+        ...dragHandlers,
+        children: [
+          technician ? /* @__PURE__ */ jsx262(
+            SquareAvatar,
+            {
+              sizePx: 48,
+              src: party.technicianAvatarUrl ?? void 0,
+              fallback: technician,
+              className: "rounded-none"
+            }
+          ) : /* @__PURE__ */ jsx262(
+            RemoteSessionOrgLogo,
+            {
+              name: party.organizationName,
+              logoUrl: party.organizationLogoUrl,
+              sizePx: 48,
+              className: "rounded-none border-0"
+            }
+          ),
+          /* @__PURE__ */ jsx262("span", { className: "flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx262(Chevrons03LeftIcon, { size: 24 }) })
+        ]
+      }
+    );
+  }
+);
+RemoteSessionMinimizedChip.displayName = "RemoteSessionMinimizedChip";
+
+// src/components/features/remote-session/remote-session-chat-panel.tsx
+import { useEffect as useEffect42, useRef as useRef39 } from "react";
+import { jsx as jsx263, jsxs as jsxs210 } from "react/jsx-runtime";
+function formatTime2(at) {
+  return at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+function RemoteSessionChatPanel({
+  party,
+  elapsed,
+  messages,
+  showRecordingTag = false,
+  draft,
+  onDraftChange,
+  onSend,
+  ready = true,
+  error,
+  onCloseChat,
+  onEndSession,
+  dragHandlers
+}) {
+  const listRef = useRef39(null);
+  useEffect42(() => {
+    const list = listRef.current;
+    if (list) list.scrollTop = list.scrollHeight;
+  }, [messages]);
+  const handleSend = () => {
+    const text = draft.trim();
+    if (!text) return;
+    onSend(text);
+    onDraftChange("");
+  };
+  return /* @__PURE__ */ jsxs210("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs210("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx263(RemoteSessionDragger, { dragHandlers }),
+      /* @__PURE__ */ jsxs210(
+        "div",
+        {
+          className: cn(
+            "flex w-full flex-col pr-[var(--spacing-system-mf)]",
+            dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+          ),
+          ...dragHandlers,
+          children: [
+            /* @__PURE__ */ jsxs210("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+              "Your IT support team is connected ",
+              /* @__PURE__ */ jsxs210("span", { className: "text-ods-text-secondary", children: [
+                "(",
+                elapsed,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx263("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: "You can end this session at any time" })
+          ]
+        }
+      ),
+      showRecordingTag && /* @__PURE__ */ jsx263(RemoteSessionRecordingTag, {}),
+      /* @__PURE__ */ jsxs210("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+        /* @__PURE__ */ jsx263(
+          Button,
+          {
+            variant: "outline",
+            fullWidth: true,
+            leftIcon: /* @__PURE__ */ jsx263(MessageOffIcon, { size: 24, color: "currentColor" }),
+            onClick: onCloseChat,
+            children: "Close Chat"
+          }
+        ),
+        /* @__PURE__ */ jsx263(RemoteSessionEndButton, { onEndSession })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx263(
+      "div",
+      {
+        ref: listRef,
+        className: "flex min-h-0 flex-1 flex-col overflow-y-auto bg-ods-card p-[var(--spacing-system-m)]",
+        children: /* @__PURE__ */ jsx263("div", { className: "mt-auto flex flex-col gap-[var(--spacing-system-s)]", children: messages.map(
+          (message) => message.author === "system" ? /* @__PURE__ */ jsx263("p", { className: "w-full text-center text-ods-text-secondary text-h6", children: message.text }, message.id) : /* @__PURE__ */ jsx263(RemoteSessionChatMessageRow, { message, party }, message.id)
+        ) })
+      }
+    ),
+    error && /* @__PURE__ */ jsx263("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
+    /* @__PURE__ */ jsxs210(
+      "form",
+      {
+        className: "flex items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]",
+        onSubmit: (event) => {
+          event.preventDefault();
+          handleSend();
+        },
+        children: [
+          /* @__PURE__ */ jsx263(
+            "input",
+            {
+              value: draft,
+              onChange: (event) => onDraftChange(event.target.value),
+              disabled: !ready,
+              placeholder: ready ? "Enter your Message..." : "Loading chat...",
+              "aria-label": "Message",
+              className: "h-12 min-w-0 flex-1 rounded-md border border-ods-border bg-ods-bg px-[var(--spacing-system-s)] text-ods-text-primary outline-none text-h6 placeholder:text-ods-text-secondary"
+            }
+          ),
+          /* @__PURE__ */ jsx263(
+            "button",
+            {
+              type: "submit",
+              "aria-label": "Send message",
+              disabled: !ready,
+              className: "flex size-12 shrink-0 items-center justify-center",
+              children: /* @__PURE__ */ jsx263(Send03Icon, { size: 24, color: "currentColor", className: "text-ods-text-primary" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function RemoteSessionChatMessageRow({
+  message,
+  party
+}) {
+  const isTechnician = message.author === "technician";
+  const technician = message.name ?? party.technicianName ?? "Technician";
+  return /* @__PURE__ */ jsxs210("div", { className: "flex w-full flex-col", children: [
+    /* @__PURE__ */ jsxs210("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
+      isTechnician && /* @__PURE__ */ jsx263(
+        SquareAvatar,
+        {
+          variant: "round",
+          sizePx: 16,
+          src: party.technicianAvatarUrl ?? void 0,
+          fallback: technician
+        }
+      ),
+      /* @__PURE__ */ jsx263(
+        "span",
+        {
+          className: cn(
+            "min-w-0 flex-1 truncate text-code",
+            isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
+          ),
+          children: isTechnician ? technician : "User"
+        }
+      ),
+      /* @__PURE__ */ jsx263("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime2(message.at) })
+    ] }),
+    /* @__PURE__ */ jsx263("p", { className: "w-full break-words text-ods-text-primary text-h6", children: message.text })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-dialog.tsx
+import { jsx as jsx264, jsxs as jsxs211 } from "react/jsx-runtime";
+var NOTICE_COPY = {
+  "session-ended": { title: "Remote session ended", suffix: "has disconnected from your device." },
+  "connection-lost": { title: "Connection lost", suffix: "lost the connection to your device." }
+};
+function RemoteSessionDialog({
+  variant,
+  organizationName,
+  ending = false,
+  onEndSession,
+  onClose
+}) {
+  if (variant === "end-confirm") {
+    return /* @__PURE__ */ jsxs211(DialogCard, { children: [
+      /* @__PURE__ */ jsxs211("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx264("h1", { className: "w-full text-ods-text-primary text-h2", children: "End remote session?" }),
+        /* @__PURE__ */ jsx264("p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
+      ] }),
+      /* @__PURE__ */ jsxs211("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+        /* @__PURE__ */ jsx264(Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx264(Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
+      ] })
+    ] });
+  }
+  const copy = NOTICE_COPY[variant];
+  return /* @__PURE__ */ jsxs211(DialogCard, { children: [
+    /* @__PURE__ */ jsxs211("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsx264("h1", { className: "w-full text-ods-text-primary text-h2", children: copy.title }),
+      /* @__PURE__ */ jsxs211("p", { className: "w-full text-ods-text-primary text-h4", children: [
+        /* @__PURE__ */ jsx264("span", { className: "text-ods-accent", children: organizationName }),
+        " ",
+        copy.suffix
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx264("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsx264(Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
+  ] });
+}
+function DialogCard({ children }) {
+  return /* @__PURE__ */ jsx264("div", { className: "flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]", children });
+}
+
+// src/components/features/remote-session/remote-session-overlay.tsx
+import { jsx as jsx265, jsxs as jsxs212 } from "react/jsx-runtime";
+function RemoteSessionBorder({ className }) {
+  return /* @__PURE__ */ jsx265("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
+}
+function RemoteSessionPill({ onEndSession }) {
+  return /* @__PURE__ */ jsxs212(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-[var(--spacing-system-xsf)] rounded-b-md bg-ods-warning px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-ods-text-on-accent",
+      onClick: onEndSession,
+      children: [
+        /* @__PURE__ */ jsx265(MonitorOffIcon, { size: 24, color: "currentColor" }),
+        /* @__PURE__ */ jsx265("span", { className: "whitespace-nowrap text-h3", children: "End Session" })
+      ]
+    }
+  );
+}
+
 // src/components/features/board/board.tsx
 import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled";
-import { Fragment as Fragment46, useCallback as useCallback28, useEffect as useEffect44, useMemo as useMemo23, useRef as useRef43, useState as useState78 } from "react";
+import { Fragment as Fragment46, useCallback as useCallback28, useEffect as useEffect46, useMemo as useMemo23, useRef as useRef44, useState as useState79 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/auto-scroll-ancestors.ts
@@ -29623,10 +30145,10 @@ function aimToChange(columns, ticketId, aim) {
 // src/components/features/board/board-column.tsx
 import { attachClosestEdge as attachClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { memo as memo6, useCallback as useCallback26, useEffect as useEffect42, useRef as useRef41, useState as useState76 } from "react";
+import { memo as memo6, useCallback as useCallback26, useEffect as useEffect44, useRef as useRef42, useState as useState77 } from "react";
 
 // src/components/features/board/board-column-header.tsx
-import { jsx as jsx260, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs213 } from "react/jsx-runtime";
 function BoardColumnHeader({
   column,
   collapsed = false,
@@ -29639,8 +30161,8 @@ function BoardColumnHeader({
   const useStatusVariant = resolveTicketStatus(tagStatus) !== null;
   const actionClass = "h-8 w-8 p-0 md:h-8 md:w-8";
   if (collapsed) {
-    return /* @__PURE__ */ jsxs207("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
-      onToggleCollapse && /* @__PURE__ */ jsx260(
+    return /* @__PURE__ */ jsxs213("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
+      onToggleCollapse && /* @__PURE__ */ jsx266(
         Button,
         {
           variant: "transparent",
@@ -29648,10 +30170,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onToggleCollapse,
           "aria-label": "Expand column",
-          children: /* @__PURE__ */ jsx260(Arrow02RightIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx266(Arrow02RightIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      /* @__PURE__ */ jsx260(
+      /* @__PURE__ */ jsx266(
         TicketStatusTag,
         {
           status: tagStatus,
@@ -29660,17 +30182,17 @@ function BoardColumnHeader({
           className: "h-auto [writing-mode:vertical-rl]"
         }
       ),
-      /* @__PURE__ */ jsx260("span", { className: "text-h5", style: { color: column.color }, children: count })
+      /* @__PURE__ */ jsx266("span", { className: "text-h5", style: { color: column.color }, children: count })
     ] });
   }
-  return /* @__PURE__ */ jsxs207("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
-    /* @__PURE__ */ jsxs207("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
-      /* @__PURE__ */ jsx260(TicketStatusTag, { status: tagStatus, label: column.label, color: useStatusVariant ? void 0 : column.color }),
-      /* @__PURE__ */ jsx260("span", { className: "text-h5", style: useStatusVariant ? void 0 : { color: column.color }, children: count })
+  return /* @__PURE__ */ jsxs213("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsxs213("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+      /* @__PURE__ */ jsx266(TicketStatusTag, { status: tagStatus, label: column.label, color: useStatusVariant ? void 0 : column.color }),
+      /* @__PURE__ */ jsx266("span", { className: "text-h5", style: useStatusVariant ? void 0 : { color: column.color }, children: count })
     ] }),
-    /* @__PURE__ */ jsxs207("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
-      column.tooltip && /* @__PURE__ */ jsx260(TouchFriendlyTooltip, { content: column.tooltip, side: "bottom", children: /* @__PURE__ */ jsx260(Button, { variant: "transparent", size: "icon", className: actionClass, "aria-label": column.tooltip, children: /* @__PURE__ */ jsx260(InfoCircleIcon, { className: "h-6 w-6 text-ods-text-secondary" }) }) }),
-      onToggleCollapse && /* @__PURE__ */ jsx260(
+    /* @__PURE__ */ jsxs213("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
+      column.tooltip && /* @__PURE__ */ jsx266(TouchFriendlyTooltip, { content: column.tooltip, side: "bottom", children: /* @__PURE__ */ jsx266(Button, { variant: "transparent", size: "icon", className: actionClass, "aria-label": column.tooltip, children: /* @__PURE__ */ jsx266(InfoCircleIcon, { className: "h-6 w-6 text-ods-text-secondary" }) }) }),
+      onToggleCollapse && /* @__PURE__ */ jsx266(
         Button,
         {
           variant: "transparent",
@@ -29678,10 +30200,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onToggleCollapse,
           "aria-label": "Collapse column",
-          children: /* @__PURE__ */ jsx260(Arrow02LeftIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx266(Arrow02LeftIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      onArchive && /* @__PURE__ */ jsx260(
+      onArchive && /* @__PURE__ */ jsx266(
         Button,
         {
           variant: "transparent",
@@ -29689,10 +30211,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onArchive,
           "aria-label": "Archive resolved tickets",
-          children: /* @__PURE__ */ jsx260(BoxArchiveIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx266(BoxArchiveIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      onAddTicket && /* @__PURE__ */ jsx260(
+      onAddTicket && /* @__PURE__ */ jsx266(
         Button,
         {
           variant: "transparent",
@@ -29700,7 +30222,7 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onAddTicket,
           "aria-label": "Add ticket",
-          children: /* @__PURE__ */ jsx260(PlusIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx266(PlusIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       )
     ] })
@@ -29735,7 +30257,7 @@ function isSameAim(a, b) {
 }
 
 // src/components/features/board/use-lane-scroll-anchor.ts
-import { useRef as useRef39 } from "react";
+import { useRef as useRef40 } from "react";
 var TICKET_ID_ATTRIBUTE = "data-ticket-id";
 function cardPositions(root) {
   return Array.from(root.querySelectorAll(`[${TICKET_ID_ATTRIBUTE}]`)).map((element) => ({
@@ -29744,7 +30266,7 @@ function cardPositions(root) {
   }));
 }
 function useLaneScrollAnchor(scrollRef, tickets) {
-  const positionsRef = useRef39([]);
+  const positionsRef = useRef40([]);
   useIsomorphicLayoutEffect(() => {
     const root = scrollRef.current;
     if (!root) return;
@@ -29796,10 +30318,10 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import {
   memo as memo5,
   useCallback as useCallback25,
-  useEffect as useEffect41,
+  useEffect as useEffect43,
   useMemo as useMemo22,
-  useRef as useRef40,
-  useState as useState75
+  useRef as useRef41,
+  useState as useState76
 } from "react";
 
 // src/utils/drag-effect.ts
@@ -29813,14 +30335,14 @@ function holdMoveDragEffect(element) {
 }
 
 // src/components/features/board/board-ticket-approval.tsx
-import { useState as useState74 } from "react";
-import { jsx as jsx261, jsxs as jsxs208 } from "react/jsx-runtime";
+import { useState as useState75 } from "react";
+import { jsx as jsx267, jsxs as jsxs214 } from "react/jsx-runtime";
 function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
-  const [expanded, setExpanded] = useState74(false);
+  const [expanded, setExpanded] = useState75(false);
   const { innerRef, containerStyle } = useCollapsible({ expanded });
   const isAdmin = pendingApproval.approvalType === "ADMIN";
-  return /* @__PURE__ */ jsxs208("div", { className: "pointer-events-auto flex flex-col", children: [
-    /* @__PURE__ */ jsxs208(
+  return /* @__PURE__ */ jsxs214("div", { className: "pointer-events-auto flex flex-col", children: [
+    /* @__PURE__ */ jsxs214(
       "button",
       {
         type: "button",
@@ -29828,7 +30350,7 @@ function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
         "aria-expanded": expanded,
         className: "flex w-full cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-h6",
         children: [
-          /* @__PURE__ */ jsxs208(
+          /* @__PURE__ */ jsxs214(
             "span",
             {
               className: cn(
@@ -29836,16 +30358,16 @@ function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
                 isAdmin ? "text-ods-open-yellow" : "text-ods-text-secondary"
               ),
               children: [
-                isAdmin ? /* @__PURE__ */ jsx261(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx261(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
-                /* @__PURE__ */ jsx261("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
+                isAdmin ? /* @__PURE__ */ jsx267(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx267(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
+                /* @__PURE__ */ jsx267("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
               ]
             }
           ),
-          expanded ? /* @__PURE__ */ jsx261(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx261(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
+          expanded ? /* @__PURE__ */ jsx267(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx267(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx261("div", { style: containerStyle, children: /* @__PURE__ */ jsx261("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx261(
+    /* @__PURE__ */ jsx267("div", { style: containerStyle, children: /* @__PURE__ */ jsx267("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx267(
       ApprovalBatchMessage,
       {
         className: "mb-0",
@@ -29898,7 +30420,7 @@ function hasMoveSettled(columns, move) {
 }
 
 // src/components/features/board/ticket-card.tsx
-import { Fragment as Fragment44, jsx as jsx262, jsxs as jsxs209 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx268, jsxs as jsxs215 } from "react/jsx-runtime";
 var PRIORITY_COLOR_CLASS = {
   low: "text-ods-text-secondary",
   medium: "text-ods-info",
@@ -29930,24 +30452,24 @@ function TicketCardBody({
   const showDeviceRow = !!(ticket.deviceHostnames?.length || ticket.organizationName);
   const deviceText = [ticket.deviceHostnames?.join(", "), ticket.organizationName].filter(Boolean).join(", ");
   const hasRightSection = !!(ticket.priority || ticket.assignees?.length || renderAssignSlot);
-  const rightSection = hasRightSection ? /* @__PURE__ */ jsxs209("div", { className: "pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
-    ticket.priority && /* @__PURE__ */ jsx262(
+  const rightSection = hasRightSection ? /* @__PURE__ */ jsxs215("div", { className: "pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+    ticket.priority && /* @__PURE__ */ jsx268(
       Flag02Icon,
       {
         className: cn("size-4", PRIORITY_COLOR_CLASS[ticket.priority]),
         "aria-label": `Priority: ${ticket.priority}`
       }
     ),
-    renderAssignSlot ? renderAssignSlot(ticket) : ticket.assignees?.length ? /* @__PURE__ */ jsxs209("div", { className: "flex -space-x-2", children: [
+    renderAssignSlot ? renderAssignSlot(ticket) : ticket.assignees?.length ? /* @__PURE__ */ jsxs215("div", { className: "flex -space-x-2", children: [
       ticket.assignees.slice(0, MAX_VISIBLE_ASSIGNEES).map(
-        (a) => a.deleted ? /* @__PURE__ */ jsx262(
+        (a) => a.deleted ? /* @__PURE__ */ jsx268(
           DeletedUserAvatar,
           {
             size: "sm",
             accessibleLabel: `Deleted user: ${a.name ?? a.initials ?? a.id}`
           },
           a.id
-        ) : /* @__PURE__ */ jsx262(
+        ) : /* @__PURE__ */ jsx268(
           SquareAvatar,
           {
             src: a.avatarUrl,
@@ -29959,7 +30481,7 @@ function TicketCardBody({
           a.id
         )
       ),
-      ticket.assignees.length > MAX_VISIBLE_ASSIGNEES && /* @__PURE__ */ jsxs209("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-ods-border bg-ods-bg text-ods-text-secondary text-h6", children: [
+      ticket.assignees.length > MAX_VISIBLE_ASSIGNEES && /* @__PURE__ */ jsxs215("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-ods-border bg-ods-bg text-ods-text-secondary text-h6", children: [
         "+",
         ticket.assignees.length - MAX_VISIBLE_ASSIGNEES
       ] })
@@ -29969,7 +30491,7 @@ function TicketCardBody({
   const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null;
   const metaLabel = [ticket.ticketNumber || null, timestampLabel].filter(Boolean).join(" \u2022 ");
   const metaClass = "truncate text-ods-text-secondary text-h6";
-  const meta = href ? /* @__PURE__ */ jsx262(
+  const meta = href ? /* @__PURE__ */ jsx268(
     next_link_default,
     {
       href,
@@ -29980,28 +30502,28 @@ function TicketCardBody({
       className: cn("pointer-events-auto block", metaClass),
       children: metaLabel
     }
-  ) : /* @__PURE__ */ jsx262("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
-  return /* @__PURE__ */ jsxs209(Fragment44, { children: [
-    /* @__PURE__ */ jsxs209("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
-      /* @__PURE__ */ jsxs209("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
-        /* @__PURE__ */ jsx262("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
-        showDeviceRow && /* @__PURE__ */ jsxs209("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-secondary text-h6", children: [
-          /* @__PURE__ */ jsx262(LaptopIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx262("span", { className: "truncate", title: deviceText, children: deviceText })
+  ) : /* @__PURE__ */ jsx268("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
+  return /* @__PURE__ */ jsxs215(Fragment44, { children: [
+    /* @__PURE__ */ jsxs215("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+      /* @__PURE__ */ jsxs215("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
+        /* @__PURE__ */ jsx268("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
+        showDeviceRow && /* @__PURE__ */ jsxs215("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx268(LaptopIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx268("span", { className: "truncate", title: deviceText, children: deviceText })
         ] })
       ] }),
       rightSection
     ] }),
-    ticket.tags?.length ? /* @__PURE__ */ jsx262(TicketTagRow, { tags: ticket.tags }) : null,
-    metaLabel && (tooltipLabel ? /* @__PURE__ */ jsx262(TooltipProvider, { children: /* @__PURE__ */ jsxs209(Tooltip, { children: [
-      /* @__PURE__ */ jsx262(TooltipTrigger, { asChild: true, children: meta }),
-      /* @__PURE__ */ jsx262(TooltipContent, { children: tooltipLabel })
+    ticket.tags?.length ? /* @__PURE__ */ jsx268(TicketTagRow, { tags: ticket.tags }) : null,
+    metaLabel && (tooltipLabel ? /* @__PURE__ */ jsx268(TooltipProvider, { children: /* @__PURE__ */ jsxs215(Tooltip, { children: [
+      /* @__PURE__ */ jsx268(TooltipTrigger, { asChild: true, children: meta }),
+      /* @__PURE__ */ jsx268(TooltipContent, { children: tooltipLabel })
     ] }) }) : meta),
-    ticket.escalatedByUser && /* @__PURE__ */ jsxs209("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6", children: [
-      /* @__PURE__ */ jsx262(UserCheckIcon, { className: "size-4 shrink-0" }),
-      /* @__PURE__ */ jsx262("span", { className: "truncate", children: "Escalated by User" })
+    ticket.escalatedByUser && /* @__PURE__ */ jsxs215("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6", children: [
+      /* @__PURE__ */ jsx268(UserCheckIcon, { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx268("span", { className: "truncate", children: "Escalated by User" })
     ] }),
-    ticket.activity && /* @__PURE__ */ jsxs209(
+    ticket.activity && /* @__PURE__ */ jsxs215(
       "div",
       {
         className: cn(
@@ -30009,32 +30531,32 @@ function TicketCardBody({
           ticket.activity.kind === "stale" ? "text-ods-open-yellow" : "text-ods-text-secondary"
         ),
         children: [
-          ticket.activity.kind === "stale" ? /* @__PURE__ */ jsx262(ClockIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx262(DotsLoaderIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx262("span", { className: "truncate", children: ticket.activity.label ?? ACTIVITY_DEFAULT_LABEL[ticket.activity.kind] })
+          ticket.activity.kind === "stale" ? /* @__PURE__ */ jsx268(ClockIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx268(DotsLoaderIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx268("span", { className: "truncate", children: ticket.activity.label ?? ACTIVITY_DEFAULT_LABEL[ticket.activity.kind] })
         ]
       }
     ),
-    showNewMessage && /* @__PURE__ */ jsx262(
+    showNewMessage && /* @__PURE__ */ jsx268(
       Tag,
       {
         label: "New Message",
-        icon: /* @__PURE__ */ jsx262(MessagesIcon, { size: 16, color: newMessageTextColor }),
+        icon: /* @__PURE__ */ jsx268(MessagesIcon, { size: 16, color: newMessageTextColor }),
         className: "w-fit shrink-0",
         style: { backgroundColor: columnColor, color: newMessageTextColor }
       }
     ),
-    ticket.pendingApproval && /* @__PURE__ */ jsx262(BoardTicketApproval, { pendingApproval: ticket.pendingApproval, onApprove, onReject })
+    ticket.pendingApproval && /* @__PURE__ */ jsx268(BoardTicketApproval, { pendingApproval: ticket.pendingApproval, onApprove, onReject })
   ] });
 }
 function TicketCardView({ className, style, ...bodyProps }) {
   const { ticket, columnColor } = bodyProps;
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
-  return /* @__PURE__ */ jsx262(
+  return /* @__PURE__ */ jsx268(
     "div",
     {
       className: cn(TICKET_CARD_SHELL, className),
       style: showNewMessage ? { borderColor: columnColor, ...style } : style,
-      children: /* @__PURE__ */ jsx262("div", { className: "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx262(TicketCardBody, { ...bodyProps }) })
+      children: /* @__PURE__ */ jsx268("div", { className: "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx268(TicketCardBody, { ...bodyProps }) })
     }
   );
 }
@@ -30050,12 +30572,12 @@ var TicketCard = memo5(function TicketCardImpl({
   onApprove,
   onReject
 }) {
-  const ref = useRef40(null);
-  const ticketRef = useRef40(ticket);
-  useEffect41(() => {
+  const ref = useRef41(null);
+  const ticketRef = useRef41(ticket);
+  useEffect43(() => {
     ticketRef.current = ticket;
   });
-  const [isDragging, setIsDragging] = useState75(false);
+  const [isDragging, setIsDragging] = useState76(false);
   const isLanding = useIsLanding(ticket.id);
   const aim = useDropAim();
   const closestEdge = aim && aim.columnId === columnId && aim.ticketId === ticket.id ? aim.edge : null;
@@ -30067,7 +30589,7 @@ var TicketCard = memo5(function TicketCardImpl({
     lift(ticket.id);
   };
   const keyShortcuts = dragDisabled || !lift ? void 0 : "Space";
-  useEffect41(() => {
+  useEffect43(() => {
     const element = ref.current;
     if (!element || dragDisabled) return void 0;
     const identity = { type: "ticket", ticketId: ticket.id, columnId };
@@ -30149,7 +30671,7 @@ var TicketCard = memo5(function TicketCardImpl({
     [isDragging]
   );
   const body = useMemo22(
-    () => /* @__PURE__ */ jsx262(
+    () => /* @__PURE__ */ jsx268(
       TicketCardBody,
       {
         ticket,
@@ -30178,7 +30700,7 @@ var TicketCard = memo5(function TicketCardImpl({
   } else if (isLanding) {
     style.visibility = "hidden";
   }
-  const insertionLine = closestEdge ? /* @__PURE__ */ jsx262(
+  const insertionLine = closestEdge ? /* @__PURE__ */ jsx268(
     "span",
     {
       "aria-hidden": true,
@@ -30197,9 +30719,9 @@ var TicketCard = memo5(function TicketCardImpl({
     }
   ) : null;
   if (href) {
-    return /* @__PURE__ */ jsxs209("div", { ...outerProps, children: [
+    return /* @__PURE__ */ jsxs215("div", { ...outerProps, children: [
       insertionLine,
-      /* @__PURE__ */ jsx262(
+      /* @__PURE__ */ jsx268(
         next_link_default,
         {
           href,
@@ -30212,12 +30734,12 @@ var TicketCard = memo5(function TicketCardImpl({
           className: "absolute inset-0 z-0 rounded-md focus-visible:outline-none"
         }
       ),
-      /* @__PURE__ */ jsx262("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+      /* @__PURE__ */ jsx268("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
     ] });
   }
-  return /* @__PURE__ */ jsxs209("div", { ...outerProps, children: [
+  return /* @__PURE__ */ jsxs215("div", { ...outerProps, children: [
     insertionLine,
-    /* @__PURE__ */ jsx262(
+    /* @__PURE__ */ jsx268(
       "button",
       {
         type: "button",
@@ -30228,23 +30750,23 @@ var TicketCard = memo5(function TicketCardImpl({
         className: "absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
       }
     ),
-    /* @__PURE__ */ jsx262("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+    /* @__PURE__ */ jsx268("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
   ] });
 });
 function TicketTagRow({ tags }) {
   const visible = tags.slice(0, MAX_VISIBLE_TAGS);
   const hidden = tags.length - visible.length;
-  return /* @__PURE__ */ jsxs209("div", { className: "flex h-8 flex-wrap items-start gap-[var(--spacing-system-xxs)] overflow-clip", children: [
-    visible.map((tag) => /* @__PURE__ */ jsx262(Tag, { variant: "outline", label: tag }, tag)),
-    hidden > 0 && /* @__PURE__ */ jsx262(Tag, { variant: "outline", label: `+${hidden}` })
+  return /* @__PURE__ */ jsxs215("div", { className: "flex h-8 flex-wrap items-start gap-[var(--spacing-system-xxs)] overflow-clip", children: [
+    visible.map((tag) => /* @__PURE__ */ jsx268(Tag, { variant: "outline", label: tag }, tag)),
+    hidden > 0 && /* @__PURE__ */ jsx268(Tag, { variant: "outline", label: `+${hidden}` })
   ] });
 }
 
 // src/components/features/board/ticket-card-skeleton.tsx
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx263, jsxs as jsxs210 } from "react/jsx-runtime";
-var TicketCardSkeleton = forwardRef31(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs210(
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx269, jsxs as jsxs216 } from "react/jsx-runtime";
+var TicketCardSkeleton = forwardRef32(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs216(
     "div",
     {
       ref,
@@ -30254,22 +30776,22 @@ var TicketCardSkeleton = forwardRef31(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs210("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
-          /* @__PURE__ */ jsxs210("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx263("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx263(Skeleton, { className: "h-4 w-3/4" }) }),
-            /* @__PURE__ */ jsxs210("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
-              /* @__PURE__ */ jsx263(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
-              /* @__PURE__ */ jsx263(Skeleton, { className: "h-3 w-1/2" })
+        /* @__PURE__ */ jsxs216("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+          /* @__PURE__ */ jsxs216("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx269("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx269(Skeleton, { className: "h-4 w-3/4" }) }),
+            /* @__PURE__ */ jsxs216("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
+              /* @__PURE__ */ jsx269(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
+              /* @__PURE__ */ jsx269(Skeleton, { className: "h-3 w-1/2" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs210("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
-            /* @__PURE__ */ jsx263(Skeleton, { className: "size-4 rounded-sm" }),
-            /* @__PURE__ */ jsx263(Skeleton, { className: "size-8 rounded-full" })
+          /* @__PURE__ */ jsxs216("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+            /* @__PURE__ */ jsx269(Skeleton, { className: "size-4 rounded-sm" }),
+            /* @__PURE__ */ jsx269(Skeleton, { className: "size-8 rounded-full" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs210("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ jsx263(Skeleton, { className: "h-8 w-16 rounded-md" }),
-          /* @__PURE__ */ jsx263(Skeleton, { className: "h-8 w-12 rounded-md" })
+        /* @__PURE__ */ jsxs216("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx269(Skeleton, { className: "h-8 w-16 rounded-md" }),
+          /* @__PURE__ */ jsx269(Skeleton, { className: "h-8 w-12 rounded-md" })
         ] })
       ]
     }
@@ -30278,7 +30800,7 @@ var TicketCardSkeleton = forwardRef31(
 TicketCardSkeleton.displayName = "TicketCardSkeleton";
 
 // src/components/features/board/board-column.tsx
-import { Fragment as Fragment45, jsx as jsx264, jsxs as jsxs211 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx270, jsxs as jsxs217 } from "react/jsx-runtime";
 var BoardColumn = memo6(function BoardColumnImpl({
   column,
   collapsed = false,
@@ -30296,9 +30818,9 @@ var BoardColumn = memo6(function BoardColumnImpl({
   touchMode = false,
   className
 }) {
-  const laneRef = useRef41(null);
-  const [isOver, setIsOver] = useState76(false);
-  useEffect42(() => {
+  const laneRef = useRef42(null);
+  const [isOver, setIsOver] = useState77(false);
+  useEffect44(() => {
     const element = laneRef.current;
     if (!element || collapsed || touchMode || column.dropDisabled) return void 0;
     return dropTargetForElements2({
@@ -30330,7 +30852,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
     });
   }, [column.id, column.dropDisabled, column.allowedFromColumns, collapsed, touchMode]);
   const handleToggleCollapse = useCallback26(() => onToggleCollapse?.(column.id), [onToggleCollapse, column.id]);
-  return /* @__PURE__ */ jsxs211(
+  return /* @__PURE__ */ jsxs217(
     "div",
     {
       ref: laneRef,
@@ -30346,7 +30868,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
       ),
       style: column.system ? void 0 : { backgroundColor: tintOnDark(column.color) },
       children: [
-        /* @__PURE__ */ jsx264(
+        /* @__PURE__ */ jsx270(
           BoardColumnHeader,
           {
             column,
@@ -30356,9 +30878,9 @@ var BoardColumn = memo6(function BoardColumnImpl({
             onArchive: !collapsed && column.archivable && onArchive ? () => onArchive(column.id) : void 0
           }
         ),
-        !collapsed && /* @__PURE__ */ jsxs211(Fragment45, { children: [
-          /* @__PURE__ */ jsx264("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
-          /* @__PURE__ */ jsx264(
+        !collapsed && /* @__PURE__ */ jsxs217(Fragment45, { children: [
+          /* @__PURE__ */ jsx270("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
+          /* @__PURE__ */ jsx270(
             ColumnBody,
             {
               column,
@@ -30386,21 +30908,21 @@ function ColumnBody({
   loadMoreRootMargin,
   touchMode
 }) {
-  const scrollRef = useRef41(null);
-  const sentinelRef = useRef41(null);
+  const scrollRef = useRef42(null);
+  const sentinelRef = useRef42(null);
   useLaneScrollAnchor(scrollRef, column.tickets);
-  useEffect42(() => {
+  useEffect44(() => {
     const element = scrollRef.current;
     if (!element || touchMode) return void 0;
     return autoScrollColumn(element);
   }, [touchMode]);
-  const loadMoreRef = useRef41(onLoadMore);
-  const columnIdRef = useRef41(column.id);
-  useEffect42(() => {
+  const loadMoreRef = useRef42(onLoadMore);
+  const columnIdRef = useRef42(column.id);
+  useEffect44(() => {
     loadMoreRef.current = onLoadMore;
     columnIdRef.current = column.id;
   });
-  useEffect42(() => {
+  useEffect44(() => {
     if (!column.hasMore || column.isLoadingMore) return void 0;
     const sentinel = sentinelRef.current;
     const root = scrollRef.current;
@@ -30421,13 +30943,13 @@ function ColumnBody({
     // wholesale. The browser's own anchoring is unusable here — it silently
     // skips transformed elements, so it works between drags and does nothing
     // during one — and leaving both on double-corrects every insertion.
-    /* @__PURE__ */ jsxs211(
+    /* @__PURE__ */ jsxs217(
       "div",
       {
         ref: scrollRef,
         className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto py-[5px] [overflow-anchor:none]",
         children: [
-          column.isLoading ? /* @__PURE__ */ jsx264(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx264(EmptyState2, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx264(
+          column.isLoading ? /* @__PURE__ */ jsx270(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx270(EmptyState2, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx270(
             TicketCard,
             {
               ticket: t,
@@ -30443,26 +30965,26 @@ function ColumnBody({
             },
             t.id
           )),
-          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx264(TicketCardSkeleton, {}),
-          column.hasMore && /* @__PURE__ */ jsx264("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
+          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx270(TicketCardSkeleton, {}),
+          column.hasMore && /* @__PURE__ */ jsx270("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
         ]
       }
     )
   );
 }
 function SkeletonStack({ count = 4 }) {
-  return /* @__PURE__ */ jsx264(Fragment45, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx264(TicketCardSkeleton, {}, `skeleton-${i}`)) });
+  return /* @__PURE__ */ jsx270(Fragment45, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx270(TicketCardSkeleton, {}, `skeleton-${i}`)) });
 }
 function EmptyState2({ columnId, touchMode }) {
   const aim = useDropAim();
   if (aim && aim.columnId === columnId) {
-    return /* @__PURE__ */ jsx264("div", { "aria-hidden": true, ...{ [DROP_LINE_ATTRIBUTE]: "" }, className: "h-0.5 shrink-0 rounded-full bg-ods-accent" });
+    return /* @__PURE__ */ jsx270("div", { "aria-hidden": true, ...{ [DROP_LINE_ATTRIBUTE]: "" }, className: "h-0.5 shrink-0 rounded-full bg-ods-accent" });
   }
-  return /* @__PURE__ */ jsxs211("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-lf)] p-[var(--spacing-system-lf)] text-center text-ods-text-secondary", children: [
-    /* @__PURE__ */ jsx264(TagIcon, { className: "h-6 w-6 shrink-0" }),
-    /* @__PURE__ */ jsxs211("div", { className: "flex w-full flex-col", children: [
-      /* @__PURE__ */ jsx264("p", { className: "text-h4", children: "No tickets here" }),
-      /* @__PURE__ */ jsx264("p", { className: "text-h6", children: touchMode ? "Change a ticket's status to move it to this column" : "Drag a ticket here or change its status to move it to this column" })
+  return /* @__PURE__ */ jsxs217("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-lf)] p-[var(--spacing-system-lf)] text-center text-ods-text-secondary", children: [
+    /* @__PURE__ */ jsx270(TagIcon, { className: "h-6 w-6 shrink-0" }),
+    /* @__PURE__ */ jsxs217("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsx270("p", { className: "text-h4", children: "No tickets here" }),
+      /* @__PURE__ */ jsx270("p", { className: "text-h6", children: touchMode ? "Change a ticket's status to move it to this column" : "Drag a ticket here or change its status to move it to this column" })
     ] })
   ] });
 }
@@ -30476,14 +30998,14 @@ function resolveBoardDrop(columns, { source, target }) {
 }
 
 // src/components/features/board/use-board-collapse.ts
-import { useCallback as useCallback27, useEffect as useEffect43, useRef as useRef42, useState as useState77 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect45, useRef as useRef43, useState as useState78 } from "react";
 function useBoardCollapse(storageKey) {
   const [persisted, setPersisted] = useLocalStorage(storageKey ?? "__board_collapse_unused__", {});
-  const [memory, setMemory] = useState77({});
+  const [memory, setMemory] = useState78({});
   const collapsed = storageKey ? persisted : memory;
   const setMap = storageKey ? setPersisted : setMemory;
-  const setMapRef = useRef42(setMap);
-  useEffect43(() => {
+  const setMapRef = useRef43(setMap);
+  useEffect45(() => {
     setMapRef.current = setMap;
   });
   const toggle = useCallback27((columnId) => {
@@ -30496,7 +31018,7 @@ function useBoardCollapse(storageKey) {
 }
 
 // src/components/features/board/touch-board.tsx
-import { jsx as jsx265 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
 function TouchBoard({
   columns,
   onLoadMore,
@@ -30511,11 +31033,11 @@ function TouchBoard({
   className
 }) {
   const { collapsed, toggle } = useBoardCollapse(collapseStorageKey);
-  return /* @__PURE__ */ jsx265("div", { className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx271("div", { className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx271(
     "div",
     {
       className: "flex min-h-0 flex-1 snap-x snap-mandatory gap-[var(--spacing-system-mf)] overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-      children: columns.map((column) => /* @__PURE__ */ jsx265(
+      children: columns.map((column) => /* @__PURE__ */ jsx271(
         BoardColumn,
         {
           column,
@@ -30542,7 +31064,7 @@ function TouchBoard({
 }
 
 // src/components/features/board/board.tsx
-import { jsx as jsx266, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs218 } from "react/jsx-runtime";
 var PENDING_MOVE_TIMEOUT_MS = 2e3;
 var DROP_MS = 160;
 var DROP_EASING = "cubic-bezier(0.2, 0, 0, 1)";
@@ -30551,9 +31073,9 @@ var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 function Board(props) {
   const dragAndDropEnabled = useMediaQuery(DRAG_AND_DROP_MEDIA_QUERY);
   if (dragAndDropEnabled === void 0) {
-    return /* @__PURE__ */ jsx266("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
+    return /* @__PURE__ */ jsx272("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
   }
-  return dragAndDropEnabled ? /* @__PURE__ */ jsx266(DragBoard, { ...props }) : /* @__PURE__ */ jsx266(TouchBoard, { ...props });
+  return dragAndDropEnabled ? /* @__PURE__ */ jsx272(DragBoard, { ...props }) : /* @__PURE__ */ jsx272(TouchBoard, { ...props });
 }
 function DragBoard({
   columns,
@@ -30583,10 +31105,10 @@ function DragBoard({
     onThumbPointerUp,
     onThumbPointerCancel
   } = useHorizontalScrollbar();
-  const columnsRef = useRef43(columns);
-  const onChangeRef = useRef43(onChange);
-  const boardRef = useRef43(null);
-  const scrollerRef = useRef43(null);
+  const columnsRef = useRef44(columns);
+  const onChangeRef = useRef44(onChange);
+  const boardRef = useRef44(null);
+  const scrollerRef = useRef44(null);
   const setScroller = useCallback28(
     (node) => {
       scrollerRef.current = node;
@@ -30594,22 +31116,22 @@ function DragBoard({
     },
     [scrollRef]
   );
-  const [aim, setAim] = useState78(null);
-  const [lifted, setLifted] = useState78(null);
-  const [announcement, setAnnouncement] = useState78("");
-  const dragGeometry = useRef43(null);
-  const [landingPreview, setLandingPreview] = useState78(null);
-  const previewRef = useRef43(null);
-  const [reportedMove, setPendingMove] = useState78(null);
+  const [aim, setAim] = useState79(null);
+  const [lifted, setLifted] = useState79(null);
+  const [announcement, setAnnouncement] = useState79("");
+  const dragGeometry = useRef44(null);
+  const [landingPreview, setLandingPreview] = useState79(null);
+  const previewRef = useRef44(null);
+  const [reportedMove, setPendingMove] = useState79(null);
   const pendingMove = reportedMove && !hasMoveSettled(columns, reportedMove) ? reportedMove : null;
   const view = useMemo23(() => pendingMove ? applyPendingMove(columns, pendingMove) : columns, [columns, pendingMove]);
-  useEffect44(() => {
+  useEffect46(() => {
     columnsRef.current = view;
     onChangeRef.current = onChange;
   });
-  const [landing, setLanding] = useState78(null);
-  const landingTimer = useRef43(null);
-  const pointRef = useRef43({ x: 0, y: 0 });
+  const [landing, setLanding] = useState79(null);
+  const landingTimer = useRef44(null);
+  const pointRef = useRef44({ x: 0, y: 0 });
   const laneLabel = useCallback28((columnId) => view.find((c) => c.id === columnId)?.label ?? columnId, [view]);
   const acceptsLifted = useCallback28(
     (fromColumnId) => (column) => {
@@ -30660,7 +31182,7 @@ function DragBoard({
     },
     [lifted, view, acceptsLifted, laneLabel]
   );
-  useEffect44(() => {
+  useEffect46(() => {
     if (!lifted) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -30678,7 +31200,7 @@ function DragBoard({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [lifted, drop, walk]);
-  useEffect44(() => {
+  useEffect46(() => {
     if (!lifted) return;
     boardRef.current?.querySelector(`[${DROP_LINE_ATTRIBUTE}]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
   }, [lifted]);
@@ -30689,12 +31211,12 @@ function DragBoard({
     const anchor = aimToChange(view, lifted.ticketId, lifted.aim) ? aimAnchor(view, lifted.ticketId, lifted.aim) : { ticketId: null, edge: null };
     return { columnId: lifted.aim.columnId, ...anchor, ticket };
   }, [lifted, view]);
-  useEffect44(() => {
+  useEffect46(() => {
     if (!pendingMove) return void 0;
     const timer = setTimeout(() => setPendingMove(null), PENDING_MOVE_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [pendingMove]);
-  useEffect44(() => {
+  useEffect46(() => {
     const scroller = scrollerRef.current;
     const readAim = (source, target) => {
       const ticket = source.data.ticket;
@@ -30806,7 +31328,7 @@ function DragBoard({
     };
   }, [landing, landingPreview]);
   const preview = landingPreview && createPortal(
-    /* @__PURE__ */ jsx266(
+    /* @__PURE__ */ jsx272(
       "div",
       {
         ref: previewRef,
@@ -30819,7 +31341,7 @@ function DragBoard({
           // translate in pointer coordinates and nothing else.
           margin: `${-landingPreview.grabY}px 0 0 ${-landingPreview.grabX}px`
         },
-        children: /* @__PURE__ */ jsx266(
+        children: /* @__PURE__ */ jsx272(
           TicketCardView,
           {
             ticket: landingPreview.ticket,
@@ -30832,10 +31354,10 @@ function DragBoard({
     ),
     document.body
   );
-  return /* @__PURE__ */ jsx266(LandingCardContext.Provider, { value: landing, children: /* @__PURE__ */ jsx266(DropAimContext.Provider, { value: aim ?? keyboardAim, children: /* @__PURE__ */ jsxs212(BoardLiftContext.Provider, { value: lift, children: [
+  return /* @__PURE__ */ jsx272(LandingCardContext.Provider, { value: landing, children: /* @__PURE__ */ jsx272(DropAimContext.Provider, { value: aim ?? keyboardAim, children: /* @__PURE__ */ jsxs218(BoardLiftContext.Provider, { value: lift, children: [
     preview,
-    /* @__PURE__ */ jsxs212("div", { ref: boardRef, className: cn("flex h-full flex-col", className), children: [
-      /* @__PURE__ */ jsx266(
+    /* @__PURE__ */ jsxs218("div", { ref: boardRef, className: cn("flex h-full flex-col", className), children: [
+      /* @__PURE__ */ jsx272(
         "div",
         {
           ref: setScroller,
@@ -30847,9 +31369,9 @@ function DragBoard({
             const joinLeft = !!(column.system && prev?.system);
             const joinRight = !!(column.system && next?.system);
             const showGap = i > 0 && !joinLeft;
-            return /* @__PURE__ */ jsxs212(Fragment46, { children: [
-              showGap && /* @__PURE__ */ jsx266("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
-              /* @__PURE__ */ jsx266(
+            return /* @__PURE__ */ jsxs218(Fragment46, { children: [
+              showGap && /* @__PURE__ */ jsx272("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
+              /* @__PURE__ */ jsx272(
                 BoardColumn,
                 {
                   column,
@@ -30871,15 +31393,15 @@ function DragBoard({
           })
         }
       ),
-      /* @__PURE__ */ jsx266("p", { "aria-live": "polite", className: "sr-only", children: announcement }),
-      thumbRatio > 0 && /* @__PURE__ */ jsx266(
+      /* @__PURE__ */ jsx272("p", { "aria-live": "polite", className: "sr-only", children: announcement }),
+      thumbRatio > 0 && /* @__PURE__ */ jsx272(
         "div",
         {
           ref: trackRef,
           onClick: onTrackClick,
           onWheel: onTrackWheel,
           className: "relative mt-[var(--spacing-system-mf)] h-2 shrink-0 cursor-pointer rounded-full bg-ods-border",
-          children: /* @__PURE__ */ jsx266(
+          children: /* @__PURE__ */ jsx272(
             "div",
             {
               ref: thumbRef,
@@ -30994,13 +31516,13 @@ import {
   createContext as createContext13,
   useCallback as useCallback29,
   useContext as useContext13,
-  useEffect as useEffect45,
+  useEffect as useEffect47,
   useId as useId5,
   useMemo as useMemo24,
-  useRef as useRef44,
-  useState as useState79
+  useRef as useRef45,
+  useState as useState80
 } from "react";
-import { jsx as jsx267, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs219 } from "react/jsx-runtime";
 var SORTABLE_ITEM_ATTRIBUTE = "data-sortable-item";
 var SHIFT_MS = 200;
 var DROP_MS2 = 150;
@@ -31012,19 +31534,19 @@ function useSortableListContext() {
   return context;
 }
 function SortableList({ onReorder, getItemLabel, disabled = false, className, children }) {
-  const listRef = useRef44(null);
+  const listRef = useRef45(null);
   const dragAndDropEnabled = useDragAndDropEnabled();
   const dragType = useId5();
-  const [announcement, setAnnouncement] = useState79("");
-  const onReorderRef = useRef44(onReorder);
-  const getItemLabelRef = useRef44(getItemLabel);
-  useEffect45(() => {
+  const [announcement, setAnnouncement] = useState80("");
+  const onReorderRef = useRef45(onReorder);
+  const getItemLabelRef = useRef45(getItemLabel);
+  useEffect47(() => {
     onReorderRef.current = onReorder;
     getItemLabelRef.current = getItemLabel;
   });
-  const flipFrom = useRef44(null);
-  const [flipTick, setFlipTick] = useState79(0);
-  const flipTimer = useRef44(null);
+  const flipFrom = useRef45(null);
+  const [flipTick, setFlipTick] = useState80(0);
+  const flipTimer = useRef45(null);
   const readItems = useCallback29(
     () => [...listRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTRIBUTE}]`) ?? []],
     []
@@ -31038,7 +31560,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
     },
     [readItems]
   );
-  useEffect45(() => {
+  useEffect47(() => {
     const list = listRef.current;
     if (!list || disabled || !dragAndDropEnabled) return void 0;
     let drag = null;
@@ -31129,7 +31651,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
       for (const item of moving) item.style.transition = "";
     }, DROP_MS2);
   }, [flipTick, readItems]);
-  useEffect45(
+  useEffect47(
     () => () => {
       if (flipTimer.current) clearTimeout(flipTimer.current);
     },
@@ -31139,19 +31661,19 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
     () => ({ dragType, disabled, dragAndDropEnabled, reorder, readItems }),
     [dragType, disabled, dragAndDropEnabled, reorder, readItems]
   );
-  return /* @__PURE__ */ jsx267(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs213("div", { ref: listRef, className, children: [
+  return /* @__PURE__ */ jsx273(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs219("div", { ref: listRef, className, children: [
     children,
-    /* @__PURE__ */ jsx267("p", { "aria-live": "polite", className: "sr-only", children: announcement })
+    /* @__PURE__ */ jsx273("p", { "aria-live": "polite", className: "sr-only", children: announcement })
   ] }) });
 }
 
 // src/components/features/sortable-list/sortable-move-buttons.tsx
-import { useRef as useRef45 } from "react";
-import { jsx as jsx268, jsxs as jsxs214 } from "react/jsx-runtime";
+import { useRef as useRef46 } from "react";
+import { jsx as jsx274, jsxs as jsxs220 } from "react/jsx-runtime";
 function SortableMoveButtons({ index, count, label, className }) {
   const { disabled, reorder } = useSortableListContext();
-  const upRef = useRef45(null);
-  const downRef = useRef45(null);
+  const upRef = useRef46(null);
+  const downRef = useRef46(null);
   const move = (step) => {
     const to = index + step;
     if (to < 0 || to >= count) return;
@@ -31162,8 +31684,8 @@ function SortableMoveButtons({ index, count, label, className }) {
     });
   };
   const subject = label ?? "item";
-  return /* @__PURE__ */ jsxs214("div", { className: cn("inline-flex shrink-0", className), children: [
-    /* @__PURE__ */ jsx268(
+  return /* @__PURE__ */ jsxs220("div", { className: cn("inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx274(
       Button,
       {
         ref: upRef,
@@ -31174,10 +31696,10 @@ function SortableMoveButtons({ index, count, label, className }) {
         disabled: disabled || index <= 0,
         onClick: () => move(-1),
         className: "rounded-r-none border-r-0",
-        children: /* @__PURE__ */ jsx268(Arrow01UpIcon, {})
+        children: /* @__PURE__ */ jsx274(Arrow01UpIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx268(
+    /* @__PURE__ */ jsx274(
       Button,
       {
         ref: downRef,
@@ -31188,7 +31710,7 @@ function SortableMoveButtons({ index, count, label, className }) {
         disabled: disabled || index >= count - 1,
         onClick: () => move(1),
         className: "rounded-l-none",
-        children: /* @__PURE__ */ jsx268(Arrow01DownIcon, {})
+        children: /* @__PURE__ */ jsx274(Arrow01DownIcon, {})
       }
     )
   ] });
@@ -31198,18 +31720,18 @@ function SortableMoveButtons({ index, count, label, className }) {
 import { combine as combine5 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable as draggable2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import { useCallback as useCallback30, useEffect as useEffect46, useState as useState80 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect48, useState as useState81 } from "react";
 function useSortableItem() {
   const { dragType, disabled, dragAndDropEnabled, reorder, readItems } = useSortableListContext();
   const inert = disabled || !dragAndDropEnabled;
-  const [item, setItem] = useState80(null);
-  const [handle, setHandle] = useState80(null);
-  const [isDragging, setIsDragging] = useState80(false);
+  const [item, setItem] = useState81(null);
+  const [handle, setHandle] = useState81(null);
+  const [isDragging, setIsDragging] = useState81(false);
   const itemRef = useCallback30((node) => {
     node?.setAttribute(SORTABLE_ITEM_ATTRIBUTE, "");
     setItem(node);
   }, []);
-  useEffect46(() => {
+  useEffect48(() => {
     if (!item || !handle || inert) return void 0;
     return combine5(
       // The drag has to start as a "move", or its first frame is drawn with the
@@ -31244,7 +31766,7 @@ function useSortableItem() {
 }
 
 // src/components/features/ticket-status-config-list/ticket-status-config-list.tsx
-import { jsx as jsx269 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
 function TicketStatusConfigList({
   items,
   onReorder,
@@ -31252,13 +31774,13 @@ function TicketStatusConfigList({
   getItemLabel,
   className
 }) {
-  return /* @__PURE__ */ jsx269(
+  return /* @__PURE__ */ jsx275(
     SortableList,
     {
       onReorder,
       getItemLabel,
       className: cn("flex w-full flex-col gap-[var(--spacing-system-xs)]", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsx269(SortableRow, { index, count: items.length, label: getItemLabel?.(index), children: (args) => renderRow(item, args) }, item.id))
+      children: items.map((item, index) => /* @__PURE__ */ jsx275(SortableRow, { index, count: items.length, label: getItemLabel?.(index), children: (args) => renderRow(item, args) }, item.id))
     }
   );
 }
@@ -31269,7 +31791,7 @@ function SortableRow({
   children
 }) {
   const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
-  return /* @__PURE__ */ jsx269(
+  return /* @__PURE__ */ jsx275(
     "div",
     {
       ref: itemRef,
@@ -31277,7 +31799,7 @@ function SortableRow({
       children: children({
         dragHandleProps,
         isDragging,
-        moveButtons: dragAndDropEnabled ? null : /* @__PURE__ */ jsx269(SortableMoveButtons, { index, count, label })
+        moveButtons: dragAndDropEnabled ? null : /* @__PURE__ */ jsx275(SortableMoveButtons, { index, count, label })
       })
     }
   );
@@ -31847,6 +32369,22 @@ export {
   UnreadCountBadge,
   HeaderButton,
   TimeTrackerHeaderButton,
+  RemoteSessionScope,
+  RemoteSessionOrgLogo,
+  RemoteSessionRecordingTag,
+  REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  RemoteSessionDragger,
+  formatRemoteSessionElapsed,
+  useRemoteSessionTimer,
+  RemoteAccessRequestCard,
+  RemoteSessionBlockFrame,
+  RemoteSessionEndButton,
+  RemoteSessionSummary,
+  RemoteSessionMinimizedChip,
+  RemoteSessionChatPanel,
+  RemoteSessionDialog,
+  RemoteSessionBorder,
+  RemoteSessionPill,
   BoardColumnHeader,
   tintOnDark,
   BoardTicketApproval,
@@ -31932,4 +32470,4 @@ export {
   LazyMount,
   IconTile
 };
-//# sourceMappingURL=chunk-KMW2PXBU.js.map
+//# sourceMappingURL=chunk-CKO6NKNE.js.map