@flamingo-stack/openframe-frontend-core 0.0.701 → 0.0.702-snapshot.20261005191338

package/dist/{chunk-B7M6QEEM.js → chunk-ENGBNKUJ.js}

@@ -60,6 +60,7 @@ import {
   ModalTwoColumn,
   NO_BROKEN_LINKS,
   OVERLAY_BACKDROP_CLASS,
+  PanelResizeHandle,
   ScrollFadeOverlay,
   ScrollShadow,
   SimpleMarkdownRenderer,
@@ -94,12 +95,12 @@ import {
   useCaptions,
   useCollapsible,
   useIsHydrated,
+  useResizablePanelSize,
   useScrollFade
-} from "./chunk-6JPQDYYY.js";
+} from "./chunk-QGTDWFT6.js";
 import {
   NEAR_VIEWPORT_ROOT_MARGIN,
   ToolIcon,
-  clamp,
   createHeadingIdDeduper,
   scanHeadings,
   slugifyHeadingBase,
@@ -194,6 +195,7 @@ import {
   FlaskVialIcon,
   GoogleLogoIcon,
   HhsLogoIcon,
+  HourglassIcon,
   ImageOffIcon,
   ImagePlusIcon,
   InfoCircleIcon,
@@ -201,6 +203,7 @@ import {
   IsoLogoIcon,
   LinkedinIcon,
   LinuxLogoIcon,
+  LockIcon,
   MessageOffIcon,
   MessagesIcon,
   MicrosoftLogoIcon,
@@ -28821,15 +28824,7 @@ var appLayoutDrawerPanelVariants = cva7(
 );
 var HORIZONTAL_SIDES = /* @__PURE__ */ new Set(["left", "right"]);
 var PERSIST_CLOSED_HOLD = "data-[state=closed]:fill-mode-forwards";
-function useContainedResizableSize({
-  enabled,
-  isHorizontal,
-  minSize,
-  maxSize,
-  defaultSize,
-  storageKey,
-  container
-}) {
+function useContainerExtent(enabled, isHorizontal, container) {
   const [available, setAvailable] = useState69(0);
   useEffect39(() => {
     if (!enabled || !container) return void 0;
@@ -28841,147 +28836,7 @@ function useContainedResizableSize({
     ro.observe(container);
     return () => ro.disconnect();
   }, [enabled, container, isHorizontal]);
-  const clampToContainer = useCallback24(
-    (value) => {
-      const effectiveMax = available > 0 ? Math.min(maxSize, available - 40) : maxSize;
-      return clamp(value, minSize, Math.max(minSize, effectiveMax));
-    },
-    [available, minSize, maxSize]
-  );
-  const readInitial = useCallback24(() => {
-    if (!enabled) return defaultSize;
-    if (typeof window === "undefined") return defaultSize;
-    if (!storageKey) return defaultSize;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      if (!raw) return defaultSize;
-      const parsed = parseFloat(raw);
-      if (!Number.isFinite(parsed)) return defaultSize;
-      return parsed;
-    } catch {
-      return defaultSize;
-    }
-  }, [enabled, storageKey, defaultSize]);
-  const [rawSize, setSizeRaw] = useState69(readInitial);
-  const size = enabled ? clampToContainer(rawSize) : rawSize;
-  const setSize = useCallback24((next) => setSizeRaw(clampToContainer(next)), [clampToContainer]);
-  useEffect39(() => {
-    if (!enabled || !storageKey || typeof window === "undefined") return;
-    try {
-      window.localStorage.setItem(storageKey, String(Math.round(size)));
-    } catch {
-    }
-  }, [enabled, size, storageKey]);
-  return { size, setSize, clampSize: clampToContainer };
-}
-function finishDrag(startRef, dragSizeRef, commit) {
-  if (!startRef.current) return;
-  startRef.current = null;
-  if (dragSizeRef.current !== null) commit(dragSizeRef.current);
-  dragSizeRef.current = null;
-  document.body.style.cursor = "";
-  document.body.style.userSelect = "";
-}
-function AppLayoutDrawerResizeHandle({
-  side,
-  size,
-  minSize,
-  maxSize,
-  onSize,
-  clampSize,
-  panelRef,
-  ariaLabel
-}) {
-  const isHorizontal = HORIZONTAL_SIDES.has(side);
-  const startRef = useRef37(null);
-  const dragSizeRef = useRef37(null);
-  const onSizeRef = useRef37(onSize);
-  useEffect39(() => {
-    onSizeRef.current = onSize;
-  }, [onSize]);
-  useEffect39(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
-  const direction = side === "right" || side === "bottom" ? -1 : 1;
-  const handlePointerDown = (e) => {
-    if (e.button !== 0 && e.pointerType === "mouse") return;
-    e.preventDefault();
-    startRef.current = { x: e.clientX, y: e.clientY, size };
-    e.currentTarget.setPointerCapture(e.pointerId);
-    document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-    document.body.style.userSelect = "none";
-  };
-  const handlePointerMove = (e) => {
-    const start = startRef.current;
-    const panel = panelRef.current;
-    if (!start || !panel) return;
-    const delta = isHorizontal ? e.clientX - start.x : e.clientY - start.y;
-    const next = clampSize(start.size + delta * direction);
-    dragSizeRef.current = next;
-    panel.style[isHorizontal ? "width" : "height"] = `${next}px`;
-    e.currentTarget.setAttribute("aria-valuenow", String(Math.round(next)));
-  };
-  const endDrag = (e) => {
-    if (!startRef.current) return;
-    finishDrag(startRef, dragSizeRef, onSize);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-  };
-  const handleKeyDown = (e) => {
-    const step = e.shiftKey ? 40 : 16;
-    if (isHorizontal) {
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onSize(size + step * (side === "right" ? 1 : -1));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onSize(size + step * (side === "right" ? -1 : 1));
-      }
-    } else {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        onSize(size + step * (side === "bottom" ? 1 : -1));
-      } else if (e.key === "ArrowDown") {
-        e.preventDefault();
-        onSize(size + step * (side === "bottom" ? -1 : 1));
-      }
-    }
-    if (e.key === "Home") {
-      e.preventDefault();
-      onSize(minSize);
-    } else if (e.key === "End") {
-      e.preventDefault();
-      onSize(maxSize);
-    }
-  };
-  const trackPosition = side === "right" ? "right-full top-4 bottom-4 w-6 items-center justify-end pr-1" : side === "left" ? "left-full top-4 bottom-4 w-6 items-center justify-start pl-1" : side === "bottom" ? "bottom-full left-4 right-4 h-6 justify-center items-end pb-1" : "top-full left-4 right-4 h-6 justify-center items-start pt-1";
-  const cursorClass = isHorizontal ? "cursor-col-resize" : "cursor-row-resize";
-  const gripClass = isHorizontal ? "h-10 w-1" : "w-10 h-1";
-  return /* @__PURE__ */ jsx258(
-    "div",
-    {
-      role: "separator",
-      tabIndex: 0,
-      "aria-orientation": isHorizontal ? "vertical" : "horizontal",
-      "aria-valuenow": Math.round(size),
-      "aria-valuemin": minSize,
-      "aria-valuemax": maxSize,
-      "aria-label": ariaLabel ?? (isHorizontal ? "Resize panel width" : "Resize panel height"),
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-      onLostPointerCapture: endDrag,
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "group absolute z-20 flex touch-none select-none",
-        "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0",
-        trackPosition,
-        cursorClass
-      ),
-      children: /* @__PURE__ */ jsx258("div", { "aria-hidden": true, className: cn("rounded-full bg-ods-border", gripClass) })
-    }
-  );
+  return available;
 }
 var AppLayoutDrawerContent = forwardRef30(
   ({
@@ -29076,14 +28931,15 @@ var AppLayoutDrawerContent = forwardRef30(
       return () => mq.removeEventListener("change", update);
     }, [mobileBreakpoint]);
     const panelRef = useRef37(null);
-    const { size, setSize, clampSize } = useContainedResizableSize({
+    const available = useContainerExtent(resizable, isHorizontal, portalContainer);
+    const { size, setSize, clampSize } = useResizablePanelSize({
       enabled: resizable,
-      isHorizontal,
       minSize,
       maxSize,
       defaultSize: initialSize,
-      storageKey,
-      container: portalContainer
+      available,
+      reserve: 40,
+      storageKey
     });
     const applyInlineSize = resizable && !isMobile;
     const sizeStyle = applyInlineSize ? isHorizontal ? { width: size } : { height: size } : {};
@@ -29137,8 +28993,9 @@ var AppLayoutDrawerContent = forwardRef30(
           ...props,
           children: [
             applyInlineSize && (!persist || open) ? /* @__PURE__ */ jsx258(
-              AppLayoutDrawerResizeHandle,
+              PanelResizeHandle,
               {
+                variant: "inLayout",
                 side: resolvedSide,
                 size,
                 minSize,
@@ -30417,8 +30274,93 @@ function TimeTrackerHeaderButton({ className, disabled }) {
 }
 
 // src/components/features/remote-session/remote-session-parts.tsx
-import { useEffect as useEffect45, useState as useState77 } from "react";
+import { useEffect as useEffect45, useState as useState78 } from "react";
+
+// src/components/features/remote-session/remote-session-viewers.tsx
+import { useState as useState77 } from "react";
 import { jsx as jsx268, jsxs as jsxs211 } from "react/jsx-runtime";
+function viewerLabel(viewer) {
+  if (viewer.isHost) return `${viewer.name} (host)`;
+  if (viewer.isYou) return `${viewer.name} (you)`;
+  return viewer.name;
+}
+function hostFirst(viewers) {
+  return [...viewers.filter((viewer) => viewer.isHost), ...viewers.filter((viewer) => !viewer.isHost)];
+}
+function RemoteSessionViewers({ viewers, max = 4, className }) {
+  const [open, setOpen] = useState77(false);
+  if (viewers.length === 0) return null;
+  const ordered = hostFirst(viewers);
+  const faces = ordered.slice(0, max);
+  const overflow2 = ordered.length - faces.length;
+  const Chevron = open ? Chevron02UpIcon : Chevron02DownIcon;
+  return /* @__PURE__ */ jsxs211(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs211(
+      DropdownMenuTrigger,
+      {
+        "aria-label": `In this session: ${ordered.map(viewerLabel).join(", ")}`,
+        className: cn(
+          "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] rounded-md outline-none",
+          "focus-visible:ring-2 focus-visible:ring-ods-focus",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs211("span", { className: "flex items-center", children: [
+            faces.map((viewer, index) => /* @__PURE__ */ jsx268(
+              SquareAvatar,
+              {
+                variant: "round",
+                sizePx: 32,
+                src: viewer.avatarUrl ?? void 0,
+                alt: viewer.name,
+                fallback: viewer.name,
+                className: cn(
+                  "relative bg-ods-bg",
+                  viewer.isHost ? "ring-2 ring-ods-accent" : "ring-1 ring-ods-border",
+                  index > 0 && "-ml-2"
+                ),
+                style: { zIndex: faces.length - index + 1 }
+              },
+              viewer.id
+            )),
+            overflow2 > 0 && /* @__PURE__ */ jsxs211("span", { className: "relative -ml-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-ods-bg text-ods-text-secondary ring-1 ring-ods-border text-h6", children: [
+              "+",
+              overflow2
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx268("span", { className: "flex size-8 items-center justify-center rounded-md text-ods-text-primary", children: /* @__PURE__ */ jsx268(Chevron, { size: 16, color: "currentColor" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx268(DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ jsxs211(
+      DropdownMenuItem,
+      {
+        className: cn(
+          "gap-[var(--spacing-system-xsf)] rounded-none border-b border-ods-border bg-ods-bg last:border-b-0",
+          "py-[var(--spacing-system-s)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xs)] text-h4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx268(
+            SquareAvatar,
+            {
+              variant: "round",
+              sizePx: 24,
+              src: viewer.avatarUrl ?? void 0,
+              alt: "",
+              fallback: viewer.name,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsx268("span", { className: "min-w-0 flex-1 truncate", children: viewerLabel(viewer) })
+        ]
+      },
+      viewer.id
+    )) })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-parts.tsx
+import { jsx as jsx269, jsxs as jsxs212 } from "react/jsx-runtime";
 var DESKTOP_SCALE = {
   "--spacing-system-xs": "0.5rem",
   "--spacing-system-s": "0.75rem",
@@ -30439,11 +30381,11 @@ var DESKTOP_SCALE = {
   "--font-line-space-h6-caption": "1.25rem"
 };
 function RemoteSessionScope({ children, className }) {
-  return /* @__PURE__ */ jsx268("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
+  return /* @__PURE__ */ jsx269("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
 }
 function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
   if (logoUrl) {
-    return /* @__PURE__ */ jsx268(
+    return /* @__PURE__ */ jsx269(
       SquareAvatar,
       {
         variant: "square",
@@ -30456,7 +30398,7 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx268(
+  return /* @__PURE__ */ jsx269(
     "div",
     {
       role: "img",
@@ -30466,19 +30408,40 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
         "flex shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card",
         className
       ),
-      children: /* @__PURE__ */ jsx268(OpenFrameLogo, { className: "size-1/2" })
+      children: /* @__PURE__ */ jsx269(OpenFrameLogo, { className: "size-1/2" })
+    }
+  );
+}
+function RemoteSessionRecordingTag({ className }) {
+  return /* @__PURE__ */ jsxs212(
+    "div",
+    {
+      className: cn(
+        "flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx269(RecordingIcon, { size: 16, color: "currentColor", className: "text-ods-success" }),
+        /* @__PURE__ */ jsx269("span", { className: "text-ods-success text-h5", children: "Session Recording" })
+      ]
     }
   );
 }
-function RemoteSessionRecordingTag() {
-  return /* @__PURE__ */ jsxs211("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__ */ jsx268(RecordingIcon, { size: 16, color: "currentColor", className: "text-ods-success" }),
-    /* @__PURE__ */ jsx268("span", { className: "text-ods-success text-h5", children: "Session Recording" })
+function RemoteSessionStatusRow({
+  showRecordingTag,
+  viewers
+}) {
+  const hasViewers = !!viewers && viewers.length > 0;
+  if (!showRecordingTag && !hasViewers) return null;
+  if (!hasViewers) return /* @__PURE__ */ jsx269(RemoteSessionRecordingTag, {});
+  return /* @__PURE__ */ jsxs212("div", { className: "flex w-full items-center gap-[var(--spacing-system-m)]", children: [
+    showRecordingTag && /* @__PURE__ */ jsx269(RemoteSessionRecordingTag, { className: "flex-1 justify-center self-auto" }),
+    /* @__PURE__ */ jsx269(RemoteSessionViewers, { viewers, className: "ml-auto" })
   ] });
 }
 var REMOTE_SESSION_DRAG_HANDLE_CLASS = "cursor-grab active:cursor-grabbing";
 function RemoteSessionDragger({ dragHandlers }) {
-  return /* @__PURE__ */ jsx268(
+  return /* @__PURE__ */ jsx269(
     "span",
     {
       "aria-hidden": true,
@@ -30487,7 +30450,7 @@ function RemoteSessionDragger({ dragHandlers }) {
         dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
       ),
       ...dragHandlers,
-      children: /* @__PURE__ */ jsx268(DraggerIcon, { size: 24, color: "currentColor" })
+      children: /* @__PURE__ */ jsx269(DraggerIcon, { size: 24, color: "currentColor" })
     }
   );
 }
@@ -30499,7 +30462,7 @@ function formatRemoteSessionElapsed(elapsedMs) {
   return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
 }
 function useRemoteSessionTimer(startedAt) {
-  const [nowMs, setNowMs] = useState77(() => Date.now());
+  const [nowMs, setNowMs] = useState78(() => Date.now());
   useEffect45(() => {
     const timer = setInterval(() => setNowMs(Date.now()), 1e3);
     return () => clearInterval(timer);
@@ -30508,7 +30471,7 @@ function useRemoteSessionTimer(startedAt) {
 }
 
 // src/components/features/remote-session/remote-access-request-card.tsx
-import { jsx as jsx269, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs213 } from "react/jsx-runtime";
 function displaySiteUrl(url) {
   return url.replace(/^https?:\/\//, "").replace(/\/$/, "");
 }
@@ -30523,30 +30486,30 @@ function RemoteAccessRequestCard({
   const { organizationName } = party;
   const siteUrl = party.organizationSiteUrl ?? void 0;
   const openableSite = siteUrl?.startsWith("https://") ? siteUrl : void 0;
-  return /* @__PURE__ */ jsxs212("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__ */ jsx269("h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
-    /* @__PURE__ */ jsxs212("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__ */ jsx269(RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
-      /* @__PURE__ */ jsxs212("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx269("p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
-        siteUrl && /* @__PURE__ */ jsx269("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: displaySiteUrl(siteUrl) })
+  return /* @__PURE__ */ jsxs213("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__ */ jsx270("h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
+    /* @__PURE__ */ jsxs213("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__ */ jsx270(RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
+      /* @__PURE__ */ jsxs213("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx270("p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
+        siteUrl && /* @__PURE__ */ jsx270("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: displaySiteUrl(siteUrl) })
       ] }),
-      openableSite && onOpenSite && /* @__PURE__ */ jsx269(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx269(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
+      openableSite && onOpenSite && /* @__PURE__ */ jsx270(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx270(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
     ] }),
-    /* @__PURE__ */ jsxs212("p", { className: "w-full text-ods-text-primary text-h4", children: [
+    /* @__PURE__ */ jsxs213("p", { className: "w-full text-ods-text-primary text-h4", children: [
       "A technician from ",
-      /* @__PURE__ */ jsx269("span", { className: "text-ods-accent", children: organizationName }),
+      /* @__PURE__ */ jsx270("span", { className: "text-ods-accent", children: organizationName }),
       " will be able to view your screen and control your mouse and keyboard during this session."
     ] }),
-    /* @__PURE__ */ jsxs212("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-      showRecordingNotice && /* @__PURE__ */ jsxs212("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__ */ jsx269(InfoCircleIcon, { size: 24, color: "currentColor", className: "shrink-0 text-ods-accent" }),
-        /* @__PURE__ */ jsx269("p", { className: "min-w-0 flex-1 text-ods-text-primary text-h6", children: "This session will be recorded and available upon request." })
+    /* @__PURE__ */ jsxs213("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      showRecordingNotice && /* @__PURE__ */ jsxs213("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__ */ jsx270(InfoCircleIcon, { size: 24, color: "currentColor", className: "shrink-0 text-ods-accent" }),
+        /* @__PURE__ */ jsx270("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__ */ jsx269("p", { className: "w-full text-ods-text-primary text-h6", children: error }) : /* @__PURE__ */ jsx269("p", { className: "w-full text-ods-text-secondary text-h6", children: "You can end the session at any time." })
+      error ? /* @__PURE__ */ jsx270("p", { className: "w-full text-ods-text-primary text-h6", children: error }) : /* @__PURE__ */ jsx270("p", { className: "w-full text-ods-text-secondary text-h6", children: "You can end the session at any time." })
     ] }),
-    /* @__PURE__ */ jsxs212("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
-      /* @__PURE__ */ jsx269(
+    /* @__PURE__ */ jsxs213("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+      /* @__PURE__ */ jsx270(
         Button,
         {
           variant: "outline",
@@ -30557,7 +30520,7 @@ function RemoteAccessRequestCard({
           children: "Decline"
         }
       ),
-      /* @__PURE__ */ jsx269(
+      /* @__PURE__ */ jsx270(
         Button,
         {
           variant: "accent",
@@ -30574,10 +30537,10 @@ function RemoteAccessRequestCard({
 
 // src/components/features/remote-session/remote-session-block.tsx
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx270, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx271, jsxs as jsxs214 } from "react/jsx-runtime";
 var RemoteSessionBlockFrame = forwardRef31(
   ({ children, expanded = false, onHide, className }, ref) => {
-    return /* @__PURE__ */ jsxs213(
+    return /* @__PURE__ */ jsxs214(
       "div",
       {
         ref,
@@ -30588,16 +30551,16 @@ var RemoteSessionBlockFrame = forwardRef31(
         ),
         children: [
           children,
-          /* @__PURE__ */ jsxs213(
+          /* @__PURE__ */ jsxs214(
             "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__ */ jsx270(Chevrons03RightIcon, { size: 24 }),
-                /* @__PURE__ */ jsx270("span", { className: "min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4", children: "Hide this Block" }),
-                /* @__PURE__ */ jsx270(OpenFrameLogo, { className: "size-6 shrink-0" })
+                /* @__PURE__ */ jsx271(Chevrons03RightIcon, { size: 24 }),
+                /* @__PURE__ */ jsx271("span", { className: "min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4", children: "Hide this Block" }),
+                /* @__PURE__ */ jsx271(OpenFrameLogo, { className: "size-6 shrink-0" })
               ]
             }
           )
@@ -30608,12 +30571,12 @@ var RemoteSessionBlockFrame = forwardRef31(
 );
 RemoteSessionBlockFrame.displayName = "RemoteSessionBlockFrame";
 function RemoteSessionEndButton({ onEndSession }) {
-  return /* @__PURE__ */ jsx270(
+  return /* @__PURE__ */ jsx271(
     Button,
     {
       variant: "outline",
       fullWidth: true,
-      leftIcon: /* @__PURE__ */ jsx270(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
+      leftIcon: /* @__PURE__ */ jsx271(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
       onClick: onEndSession,
       children: "End Session"
     }
@@ -30623,14 +30586,15 @@ function RemoteSessionSummary({
   party,
   elapsed,
   showRecordingTag = false,
+  viewers,
   onOpenChat,
   onEndSession,
   dragHandlers
 }) {
   const technician = party.technicianName;
-  return /* @__PURE__ */ jsxs213("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsx270(RemoteSessionDragger, { dragHandlers }),
-    /* @__PURE__ */ jsxs213(
+  return /* @__PURE__ */ jsxs214("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx271(RemoteSessionDragger, { dragHandlers }),
+    /* @__PURE__ */ jsxs214(
       "div",
       {
         className: cn(
@@ -30639,7 +30603,7 @@ function RemoteSessionSummary({
         ),
         ...dragHandlers,
         children: [
-          technician ? /* @__PURE__ */ jsx270(
+          technician ? /* @__PURE__ */ jsx271(
             SquareAvatar,
             {
               variant: "round",
@@ -30647,42 +30611,42 @@ function RemoteSessionSummary({
               src: party.technicianAvatarUrl ?? void 0,
               fallback: technician
             }
-          ) : /* @__PURE__ */ jsx270(RemoteSessionOrgLogo, { name: party.organizationName, logoUrl: party.organizationLogoUrl, sizePx: 48 }),
-          /* @__PURE__ */ jsxs213("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsxs213("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+          ) : /* @__PURE__ */ jsx271(RemoteSessionOrgLogo, { name: party.organizationName, logoUrl: party.organizationLogoUrl, sizePx: 48 }),
+          /* @__PURE__ */ jsxs214("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs214("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
               technician ? `${technician} connected` : "IT support team is connected",
               " ",
-              /* @__PURE__ */ jsxs213("span", { className: "text-ods-text-secondary", children: [
+              /* @__PURE__ */ jsxs214("span", { className: "text-ods-text-secondary", children: [
                 "(",
                 elapsed,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsx270("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: party.organizationName })
+            /* @__PURE__ */ jsx271("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: party.organizationName })
           ] })
         ]
       }
     ),
-    showRecordingTag && /* @__PURE__ */ jsx270(RemoteSessionRecordingTag, {}),
-    /* @__PURE__ */ jsxs213("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx270(
+    /* @__PURE__ */ jsx271(RemoteSessionStatusRow, { showRecordingTag, viewers }),
+    /* @__PURE__ */ jsxs214("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx271(
         Button,
         {
           variant: "outline",
           fullWidth: true,
-          leftIcon: /* @__PURE__ */ jsx270(ChatsIcon, { size: 24, color: "currentColor" }),
+          leftIcon: /* @__PURE__ */ jsx271(ChatsIcon, { size: 24, color: "currentColor" }),
           onClick: onOpenChat,
           children: "Open Chat"
         }
       ),
-      /* @__PURE__ */ jsx270(RemoteSessionEndButton, { onEndSession })
+      /* @__PURE__ */ jsx271(RemoteSessionEndButton, { onEndSession })
     ] })
   ] });
 }
 var RemoteSessionMinimizedChip = forwardRef31(
   ({ party, onExpand, dragHandlers }, ref) => {
     const technician = party.technicianName;
-    return /* @__PURE__ */ jsxs213(
+    return /* @__PURE__ */ jsxs214(
       "button",
       {
         ref,
@@ -30695,7 +30659,7 @@ var RemoteSessionMinimizedChip = forwardRef31(
         onClick: onExpand,
         ...dragHandlers,
         children: [
-          technician ? /* @__PURE__ */ jsx270(
+          technician ? /* @__PURE__ */ jsx271(
             SquareAvatar,
             {
               sizePx: 48,
@@ -30703,7 +30667,7 @@ var RemoteSessionMinimizedChip = forwardRef31(
               fallback: technician,
               className: "rounded-none"
             }
-          ) : /* @__PURE__ */ jsx270(
+          ) : /* @__PURE__ */ jsx271(
             RemoteSessionOrgLogo,
             {
               name: party.organizationName,
@@ -30712,7 +30676,7 @@ var RemoteSessionMinimizedChip = forwardRef31(
               className: "rounded-none border-0"
             }
           ),
-          /* @__PURE__ */ jsx270("span", { className: "flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx270(Chevrons03LeftIcon, { size: 24 }) })
+          /* @__PURE__ */ jsx271("span", { className: "flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx271(Chevrons03LeftIcon, { size: 24 }) })
         ]
       }
     );
@@ -30722,7 +30686,7 @@ RemoteSessionMinimizedChip.displayName = "RemoteSessionMinimizedChip";
 
 // src/components/features/remote-session/remote-session-chat-panel.tsx
 import { useEffect as useEffect46, useRef as useRef40 } from "react";
-import { jsx as jsx271, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs215 } from "react/jsx-runtime";
 function formatTime2(at) {
   return at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 }
@@ -30731,6 +30695,7 @@ function RemoteSessionChatPanel({
   elapsed,
   messages,
   showRecordingTag = false,
+  viewers,
   draft,
   onDraftChange,
   onSend,
@@ -30751,10 +30716,10 @@ function RemoteSessionChatPanel({
     onSend(text);
     onDraftChange("");
   };
-  return /* @__PURE__ */ jsxs214("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs214("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx271(RemoteSessionDragger, { dragHandlers }),
-      /* @__PURE__ */ jsxs214(
+  return /* @__PURE__ */ jsxs215("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs215("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx272(RemoteSessionDragger, { dragHandlers }),
+      /* @__PURE__ */ jsxs215(
         "div",
         {
           className: cn(
@@ -30763,45 +30728,45 @@ function RemoteSessionChatPanel({
           ),
           ...dragHandlers,
           children: [
-            /* @__PURE__ */ jsxs214("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+            /* @__PURE__ */ jsxs215("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
               "Your IT support team is connected ",
-              /* @__PURE__ */ jsxs214("span", { className: "text-ods-text-secondary", children: [
+              /* @__PURE__ */ jsxs215("span", { className: "text-ods-text-secondary", children: [
                 "(",
                 elapsed,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsx271("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: "You can end this session at any time" })
+            /* @__PURE__ */ jsx272("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: "You can end this session at any time" })
           ]
         }
       ),
-      showRecordingTag && /* @__PURE__ */ jsx271(RemoteSessionRecordingTag, {}),
-      /* @__PURE__ */ jsxs214("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
-        /* @__PURE__ */ jsx271(
+      /* @__PURE__ */ jsx272(RemoteSessionStatusRow, { showRecordingTag, viewers }),
+      /* @__PURE__ */ jsxs215("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+        /* @__PURE__ */ jsx272(
           Button,
           {
             variant: "outline",
             fullWidth: true,
-            leftIcon: /* @__PURE__ */ jsx271(MessageOffIcon, { size: 24, color: "currentColor" }),
+            leftIcon: /* @__PURE__ */ jsx272(MessageOffIcon, { size: 24, color: "currentColor" }),
             onClick: onCloseChat,
             children: "Close Chat"
           }
         ),
-        /* @__PURE__ */ jsx271(RemoteSessionEndButton, { onEndSession })
+        /* @__PURE__ */ jsx272(RemoteSessionEndButton, { onEndSession })
       ] })
     ] }),
-    /* @__PURE__ */ jsx271(
+    /* @__PURE__ */ jsx272(
       "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__ */ jsx271("div", { className: "mt-auto flex flex-col gap-[var(--spacing-system-s)]", children: messages.map(
-          (message) => message.author === "system" ? /* @__PURE__ */ jsx271("p", { className: "w-full text-center text-ods-text-secondary text-h6", children: message.text }, message.id) : /* @__PURE__ */ jsx271(RemoteSessionChatMessageRow, { message, party }, message.id)
+        children: /* @__PURE__ */ jsx272("div", { className: "mt-auto flex flex-col gap-[var(--spacing-system-s)]", children: messages.map(
+          (message) => message.author === "system" ? /* @__PURE__ */ jsx272("p", { className: "w-full text-center text-ods-text-secondary text-h6", children: message.text }, message.id) : /* @__PURE__ */ jsx272(RemoteSessionChatMessageRow, { message, party }, message.id)
         ) })
       }
     ),
-    error && /* @__PURE__ */ jsx271("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
-    /* @__PURE__ */ jsxs214(
+    error && /* @__PURE__ */ jsx272("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
+    /* @__PURE__ */ jsxs215(
       "form",
       {
         className: "flex items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]",
@@ -30810,7 +30775,7 @@ function RemoteSessionChatPanel({
           handleSend();
         },
         children: [
-          /* @__PURE__ */ jsx271(
+          /* @__PURE__ */ jsx272(
             "input",
             {
               value: draft,
@@ -30821,14 +30786,14 @@ function RemoteSessionChatPanel({
               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__ */ jsx271(
+          /* @__PURE__ */ jsx272(
             "button",
             {
               type: "submit",
               "aria-label": "Send message",
               disabled: !ready,
               className: "flex size-12 shrink-0 items-center justify-center",
-              children: /* @__PURE__ */ jsx271(Send03Icon, { size: 24, color: "currentColor", className: "text-ods-text-primary" })
+              children: /* @__PURE__ */ jsx272(Send03Icon, { size: 24, color: "currentColor", className: "text-ods-text-primary" })
             }
           )
         ]
@@ -30842,9 +30807,9 @@ function RemoteSessionChatMessageRow({
 }) {
   const isTechnician = message.author === "technician";
   const technician = message.name ?? party.technicianName ?? "Technician";
-  return /* @__PURE__ */ jsxs214("div", { className: "flex w-full flex-col", children: [
-    /* @__PURE__ */ jsxs214("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
-      isTechnician && /* @__PURE__ */ jsx271(
+  return /* @__PURE__ */ jsxs215("div", { className: "flex w-full flex-col", children: [
+    /* @__PURE__ */ jsxs215("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
+      isTechnician && /* @__PURE__ */ jsx272(
         SquareAvatar,
         {
           variant: "round",
@@ -30853,7 +30818,7 @@ function RemoteSessionChatMessageRow({
           fallback: technician
         }
       ),
-      /* @__PURE__ */ jsx271(
+      /* @__PURE__ */ jsx272(
         "span",
         {
           className: cn(
@@ -30863,14 +30828,14 @@ function RemoteSessionChatMessageRow({
           children: isTechnician ? technician : "User"
         }
       ),
-      /* @__PURE__ */ jsx271("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime2(message.at) })
+      /* @__PURE__ */ jsx272("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime2(message.at) })
     ] }),
-    /* @__PURE__ */ jsx271("p", { className: "w-full break-words text-ods-text-primary text-h6", children: message.text })
+    /* @__PURE__ */ jsx272("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 jsx272, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx273, jsxs as jsxs216 } 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." }
@@ -30883,49 +30848,315 @@ function RemoteSessionDialog({
   onClose
 }) {
   if (variant === "end-confirm") {
-    return /* @__PURE__ */ jsxs215(DialogCard, { children: [
-      /* @__PURE__ */ jsxs215("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx272("h1", { className: "w-full text-ods-text-primary text-h2", children: "End remote session?" }),
-        /* @__PURE__ */ jsx272("p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
+    return /* @__PURE__ */ jsxs216(DialogCard, { children: [
+      /* @__PURE__ */ jsxs216("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx273("h1", { className: "w-full text-ods-text-primary text-h2", children: "End remote session?" }),
+        /* @__PURE__ */ jsx273("p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
       ] }),
-      /* @__PURE__ */ jsxs215("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
-        /* @__PURE__ */ jsx272(Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx272(Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
+      /* @__PURE__ */ jsxs216("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+        /* @__PURE__ */ jsx273(Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx273(Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
       ] })
     ] });
   }
   const copy = NOTICE_COPY[variant];
-  return /* @__PURE__ */ jsxs215(DialogCard, { children: [
-    /* @__PURE__ */ jsxs215("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsx272("h1", { className: "w-full text-ods-text-primary text-h2", children: copy.title }),
-      /* @__PURE__ */ jsxs215("p", { className: "w-full text-ods-text-primary text-h4", children: [
-        /* @__PURE__ */ jsx272("span", { className: "text-ods-accent", children: organizationName }),
+  return /* @__PURE__ */ jsxs216(DialogCard, { children: [
+    /* @__PURE__ */ jsxs216("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsx273("h1", { className: "w-full text-ods-text-primary text-h2", children: copy.title }),
+      /* @__PURE__ */ jsxs216("p", { className: "w-full text-ods-text-primary text-h4", children: [
+        /* @__PURE__ */ jsx273("span", { className: "text-ods-accent", children: organizationName }),
         " ",
         copy.suffix
       ] })
     ] }),
-    /* @__PURE__ */ jsx272("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsx272(Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ jsx273("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsx273(Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
   ] });
 }
 function DialogCard({ children }) {
-  return /* @__PURE__ */ jsx272("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 });
+  return /* @__PURE__ */ jsx273("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 jsx273, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx274, jsxs as jsxs217 } from "react/jsx-runtime";
 function RemoteSessionBorder({ className }) {
-  return /* @__PURE__ */ jsx273("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
+  return /* @__PURE__ */ jsx274("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
 }
 function RemoteSessionPill({ onEndSession }) {
-  return /* @__PURE__ */ jsxs216(
+  return /* @__PURE__ */ jsxs217(
     "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__ */ jsx273(MonitorOffIcon, { size: 24, color: "currentColor" }),
-        /* @__PURE__ */ jsx273("span", { className: "whitespace-nowrap text-h3", children: "End Session" })
+        /* @__PURE__ */ jsx274(MonitorOffIcon, { size: 24, color: "currentColor" }),
+        /* @__PURE__ */ jsx274("span", { className: "whitespace-nowrap text-h3", children: "End Session" })
+      ]
+    }
+  );
+}
+
+// src/components/features/remote-session/remote-session-keep-modals.tsx
+import { useState as useState79 } from "react";
+import { jsx as jsx275, jsxs as jsxs218 } from "react/jsx-runtime";
+var REMOTE_SESSION_KEEP_REASON_LABELS = {
+  CLIENT_DISPUTE: "Client dispute",
+  INTERNAL_REVIEW: "Internal review",
+  LEGAL_OR_COMPLIANCE: "Legal or compliance request",
+  OTHER: "Other"
+};
+var KEEP_REASONS = Object.keys(REMOTE_SESSION_KEEP_REASON_LABELS);
+var DESCRIPTION_MAX_LENGTH = 500;
+function KeepNotice({ icon, title, children }) {
+  return /* @__PURE__ */ jsxs218("div", { className: "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx275("span", { className: "flex shrink-0 text-ods-text-secondary", children: icon }),
+    /* @__PURE__ */ jsxs218("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx275("p", { className: "text-ods-text-primary text-h3", children: title }),
+      /* @__PURE__ */ jsx275("p", { className: "text-ods-text-secondary text-h4", children })
+    ] })
+  ] });
+}
+function KeepRecordingModal({
+  isOpen,
+  onClose,
+  keptUsage,
+  isPending = false,
+  onConfirm
+}) {
+  const [reason, setReason] = useState79("");
+  const [description, setDescription] = useState79("");
+  const [seededOpen, setSeededOpen] = useState79(isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setReason("");
+      setDescription("");
+    }
+  }
+  const trimmed = description.trim();
+  const canKeep = reason !== "" && (reason !== "OTHER" || trimmed !== "");
+  const handleKeep = () => {
+    if (!canKeep || isPending) return;
+    onConfirm({ reason, description: reason === "OTHER" ? trimmed : null });
+  };
+  return /* @__PURE__ */ jsxs218(Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ jsx275(ModalHeader, { children: /* @__PURE__ */ jsx275(ModalTitle, { children: "Keep this recording" }) }),
+    /* @__PURE__ */ jsxs218(
+      KeepNotice,
+      {
+        icon: /* @__PURE__ */ jsx275(InfoCircleIcon, { size: 24, color: "currentColor" }),
+        title: "This recording won't be deleted automatically",
+        children: [
+          "It stays until you stop keeping it. Kept recordings use ",
+          keptUsage,
+          "."
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs218("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsxs218(
+        Select,
+        {
+          value: reason,
+          onValueChange: (value) => setReason(value),
+          disabled: isPending,
+          children: [
+            /* @__PURE__ */ jsx275(SelectTrigger, { label: "Reason", labelVariant: "large", children: /* @__PURE__ */ jsx275(SelectValue, { placeholder: "Select Reason" }) }),
+            /* @__PURE__ */ jsx275(SelectContent, { children: KEEP_REASONS.map((value) => /* @__PURE__ */ jsx275(SelectItem, { value, children: REMOTE_SESSION_KEEP_REASON_LABELS[value] }, value)) })
+          ]
+        }
+      ),
+      reason === "OTHER" && /* @__PURE__ */ jsx275(
+        Input,
+        {
+          "aria-label": "Reason description",
+          value: description,
+          onChange: (event) => setDescription(event.target.value),
+          placeholder: "Briefly describe what's going on",
+          maxLength: DESCRIPTION_MAX_LENGTH,
+          disabled: isPending
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs218(ModalFooter, { children: [
+      /* @__PURE__ */ jsx275(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx275("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx275(
+        Button,
+        {
+          type: "button",
+          variant: "accent",
+          onClick: handleKeep,
+          loading: isPending,
+          disabled: !canKeep,
+          className: "flex-1",
+          children: "Keep"
+        }
+      )
+    ] })
+  ] });
+}
+function ReleaseKeepingModal({
+  isOpen,
+  onClose,
+  keptBy,
+  keptOn,
+  reason,
+  ticket,
+  expiresOn,
+  dueOn,
+  isPending = false,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxs218(Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ jsx275(ModalHeader, { children: /* @__PURE__ */ jsx275(ModalTitle, { children: "Release Keeping" }) }),
+    /* @__PURE__ */ jsxs218("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h4", children: [
+      /* @__PURE__ */ jsxs218("p", { children: [
+        "Kept by ",
+        keptBy,
+        " on ",
+        keptOn,
+        " for ",
+        reason,
+        "."
+      ] }),
+      ticket && /* @__PURE__ */ jsxs218("p", { children: [
+        "Ticket: ",
+        ticket
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx275(KeepNotice, { icon: /* @__PURE__ */ jsx275(HourglassIcon, { size: 24, color: "currentColor" }), title: `It will expire on ${expiresOn}`, children: dueOn ? `It was due to expire on ${dueOn}. Releasing gives it 3 days' grace, and it shows amber until then. Whoever placed the Keep is reminded the day before it goes. Nothing is deleted now.` : "Nothing is deleted now." }),
+    /* @__PURE__ */ jsxs218(ModalFooter, { children: [
+      /* @__PURE__ */ jsx275(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx275("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx275(Button, { type: "button", variant: "accent", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Release Keeping" })
+    ] })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-events.tsx
+import { jsx as jsx276, jsxs as jsxs219 } from "react/jsx-runtime";
+function formatRemoteSessionOffset(offsetMs) {
+  const total = Math.max(0, Math.floor(offsetMs / 1e3));
+  const hours = Math.floor(total / 3600);
+  const minutes = String(Math.floor(total % 3600 / 60)).padStart(2, "0");
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
+}
+function RemoteSessionEventList({ events, activeEventId, onSelect, className }) {
+  return /* @__PURE__ */ jsxs219("section", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xxs)]", className), children: [
+    /* @__PURE__ */ jsx276("h2", { className: "text-ods-text-secondary text-h5", children: "Session Events" }),
+    /* @__PURE__ */ jsx276("ol", { className: "flex w-full flex-col gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]", children: events.map((event) => /* @__PURE__ */ jsx276("li", { children: /* @__PURE__ */ jsxs219(
+      "button",
+      {
+        type: "button",
+        "aria-current": event.id === activeEventId || void 0,
+        onClick: () => onSelect?.(event),
+        className: cn(
+          "flex w-full items-start gap-[var(--spacing-system-xxs)] rounded-md p-[var(--spacing-system-xxs)] text-left outline-none transition-colors",
+          "hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-ods-focus",
+          event.id === activeEventId && "bg-ods-border hover:bg-ods-border"
+        ),
+        children: [
+          /* @__PURE__ */ jsx276("span", { className: "w-[84px] shrink-0 text-ods-text-secondary text-h4", children: formatRemoteSessionOffset(event.offsetMs) }),
+          /* @__PURE__ */ jsxs219("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx276("span", { className: "text-ods-text-primary text-h4", children: event.title }),
+            event.detail && /* @__PURE__ */ jsx276("span", { className: "text-ods-text-secondary text-h6", children: event.detail })
+          ] })
+        ]
+      }
+    ) }, event.id)) })
+  ] });
+}
+function RemoteSessionTimelineMarkers({
+  events,
+  durationMs,
+  onSelect,
+  className
+}) {
+  if (durationMs <= 0) return null;
+  return /* @__PURE__ */ jsx276("div", { className: cn("relative h-4 w-full", className), children: events.map((event) => {
+    const share = Math.min(1, Math.max(0, event.offsetMs / durationMs));
+    const label = `${event.title} at ${formatRemoteSessionOffset(event.offsetMs)}`;
+    return /* @__PURE__ */ jsx276(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        onClick: () => onSelect?.(event),
+        style: { left: `${share * 100}%` },
+        className: "absolute top-0 h-4 w-1 -translate-x-1/2 rounded-md bg-ods-text-secondary outline-none transition-colors hover:bg-ods-text-primary focus-visible:ring-2 focus-visible:ring-ods-focus"
+      },
+      event.id
+    );
+  }) });
+}
+
+// src/components/features/remote-session/remote-session-status.tsx
+import { jsx as jsx277, jsxs as jsxs220 } from "react/jsx-runtime";
+function LiveDot() {
+  return /* @__PURE__ */ jsx277("span", { "aria-hidden": true, className: "size-2 animate-live-pulse rounded-full bg-current motion-reduce:animate-none" });
+}
+var STATUS_TAG = {
+  live: { label: "Live", variant: "critical" },
+  processing: { label: "Processing", variant: "warning" },
+  failed: { label: "Failed", variant: "error" }
+};
+function RemoteSessionStatusTag({ status, className }) {
+  const { label, variant } = STATUS_TAG[status];
+  return /* @__PURE__ */ jsx277(
+    Tag,
+    {
+      label,
+      variant,
+      icon: status === "live" ? /* @__PURE__ */ jsx277(LiveDot, {}) : void 0,
+      className: cn("pointer-events-none shrink-0", className)
+    }
+  );
+}
+function RemoteSessionExpiry(props) {
+  const { className } = props;
+  if (props.state === "none") {
+    return /* @__PURE__ */ jsx277("p", { className: cn("text-ods-text-primary text-h4", className), children: "-" });
+  }
+  if (props.state === "expired") {
+    return /* @__PURE__ */ jsx277("p", { className: cn("text-ods-text-secondary text-h4", className), children: "Expired" });
+  }
+  if (props.state === "kept") {
+    return /* @__PURE__ */ jsxs220("div", { className: cn("flex min-w-0 flex-col", className), children: [
+      /* @__PURE__ */ jsxs220("p", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h4", children: [
+        /* @__PURE__ */ jsx277(LockIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
+        "Kept"
+      ] }),
+      /* @__PURE__ */ jsxs220("p", { className: "truncate text-ods-text-secondary text-h6", children: [
+        "Kept by ",
+        props.keptBy,
+        " \xB7 ",
+        props.reason
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs220("div", { className: cn("flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx277("p", { className: "text-ods-text-primary text-h4", children: props.date }),
+    props.remaining && /* @__PURE__ */ jsx277("p", { className: "truncate text-ods-text-secondary text-h6", children: props.remaining })
+  ] });
+}
+function RemoteSessionStorageAlert({ scope, capacity, className }) {
+  const message = scope === "session" ? "This session isn't being recorded. Recording storage is full. New sessions aren't recorded until space is freed." : `Recording storage full. New sessions aren't recorded.${capacity ? ` All ${capacity} of recording storage is used.` : ""}`;
+  return /* @__PURE__ */ jsxs220(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md bg-ods-warning-secondary p-[var(--spacing-system-s)] text-ods-warning",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx277(AlertTriangleIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
+        /* @__PURE__ */ jsx277("p", { className: "min-w-0 flex-1 text-h3", children: message })
       ]
     }
   );
@@ -30935,7 +31166,7 @@ function RemoteSessionPill({ onEndSession }) {
 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 Fragment50, useCallback as useCallback29, useEffect as useEffect50, useMemo as useMemo25, useRef as useRef45, useState as useState82 } from "react";
+import { Fragment as Fragment50, useCallback as useCallback29, useEffect as useEffect50, useMemo as useMemo25, useRef as useRef45, useState as useState84 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/auto-scroll-ancestors.ts
@@ -31048,10 +31279,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 useCallback27, useEffect as useEffect48, useRef as useRef43, useState as useState80 } from "react";
+import { memo as memo6, useCallback as useCallback27, useEffect as useEffect48, useRef as useRef43, useState as useState82 } from "react";
 
 // src/components/features/board/board-column-header.tsx
-import { jsx as jsx274, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx278, jsxs as jsxs221 } from "react/jsx-runtime";
 function BoardColumnHeader({
   column,
   collapsed = false,
@@ -31064,8 +31295,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__ */ jsxs217("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
-      onToggleCollapse && /* @__PURE__ */ jsx274(
+    return /* @__PURE__ */ jsxs221("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
+      onToggleCollapse && /* @__PURE__ */ jsx278(
         Button,
         {
           variant: "transparent",
@@ -31073,10 +31304,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onToggleCollapse,
           "aria-label": "Expand column",
-          children: /* @__PURE__ */ jsx274(Arrow02RightIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx278(Arrow02RightIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      /* @__PURE__ */ jsx274(
+      /* @__PURE__ */ jsx278(
         TicketStatusTag,
         {
           status: tagStatus,
@@ -31085,17 +31316,17 @@ function BoardColumnHeader({
           className: "h-auto [writing-mode:vertical-rl]"
         }
       ),
-      /* @__PURE__ */ jsx274("span", { className: "text-h5", style: { color: column.color }, children: count })
+      /* @__PURE__ */ jsx278("span", { className: "text-h5", style: { color: column.color }, children: count })
     ] });
   }
-  return /* @__PURE__ */ jsxs217("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
-    /* @__PURE__ */ jsxs217("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
-      /* @__PURE__ */ jsx274(TicketStatusTag, { status: tagStatus, label: column.label, color: useStatusVariant ? void 0 : column.color }),
-      /* @__PURE__ */ jsx274("span", { className: "text-h5", style: useStatusVariant ? void 0 : { color: column.color }, children: count })
+  return /* @__PURE__ */ jsxs221("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsxs221("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+      /* @__PURE__ */ jsx278(TicketStatusTag, { status: tagStatus, label: column.label, color: useStatusVariant ? void 0 : column.color }),
+      /* @__PURE__ */ jsx278("span", { className: "text-h5", style: useStatusVariant ? void 0 : { color: column.color }, children: count })
     ] }),
-    /* @__PURE__ */ jsxs217("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
-      column.tooltip && /* @__PURE__ */ jsx274(TouchFriendlyTooltip, { content: column.tooltip, side: "bottom", children: /* @__PURE__ */ jsx274(Button, { variant: "transparent", size: "icon", className: actionClass, "aria-label": column.tooltip, children: /* @__PURE__ */ jsx274(InfoCircleIcon, { className: "h-6 w-6 text-ods-text-secondary" }) }) }),
-      onToggleCollapse && /* @__PURE__ */ jsx274(
+    /* @__PURE__ */ jsxs221("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
+      column.tooltip && /* @__PURE__ */ jsx278(TouchFriendlyTooltip, { content: column.tooltip, side: "bottom", children: /* @__PURE__ */ jsx278(Button, { variant: "transparent", size: "icon", className: actionClass, "aria-label": column.tooltip, children: /* @__PURE__ */ jsx278(InfoCircleIcon, { className: "h-6 w-6 text-ods-text-secondary" }) }) }),
+      onToggleCollapse && /* @__PURE__ */ jsx278(
         Button,
         {
           variant: "transparent",
@@ -31103,10 +31334,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onToggleCollapse,
           "aria-label": "Collapse column",
-          children: /* @__PURE__ */ jsx274(Arrow02LeftIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx278(Arrow02LeftIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      onArchive && /* @__PURE__ */ jsx274(
+      onArchive && /* @__PURE__ */ jsx278(
         Button,
         {
           variant: "transparent",
@@ -31114,10 +31345,10 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onArchive,
           "aria-label": "Archive resolved tickets",
-          children: /* @__PURE__ */ jsx274(BoxArchiveIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx278(BoxArchiveIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       ),
-      onAddTicket && /* @__PURE__ */ jsx274(
+      onAddTicket && /* @__PURE__ */ jsx278(
         Button,
         {
           variant: "transparent",
@@ -31125,7 +31356,7 @@ function BoardColumnHeader({
           className: actionClass,
           onClick: onAddTicket,
           "aria-label": "Add ticket",
-          children: /* @__PURE__ */ jsx274(PlusIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+          children: /* @__PURE__ */ jsx278(PlusIcon, { className: "h-6 w-6 text-ods-text-secondary" })
         }
       )
     ] })
@@ -31224,7 +31455,7 @@ import {
   useEffect as useEffect47,
   useMemo as useMemo24,
   useRef as useRef42,
-  useState as useState79
+  useState as useState81
 } from "react";
 
 // src/utils/drag-effect.ts
@@ -31238,14 +31469,14 @@ function holdMoveDragEffect(element) {
 }
 
 // src/components/features/board/board-ticket-approval.tsx
-import { useState as useState78 } from "react";
-import { jsx as jsx275, jsxs as jsxs218 } from "react/jsx-runtime";
+import { useState as useState80 } from "react";
+import { jsx as jsx279, jsxs as jsxs222 } from "react/jsx-runtime";
 function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
-  const [expanded, setExpanded] = useState78(false);
+  const [expanded, setExpanded] = useState80(false);
   const { innerRef, containerStyle } = useCollapsible({ expanded });
   const isAdmin = pendingApproval.approvalType === "ADMIN";
-  return /* @__PURE__ */ jsxs218("div", { className: "pointer-events-auto flex flex-col", children: [
-    /* @__PURE__ */ jsxs218(
+  return /* @__PURE__ */ jsxs222("div", { className: "pointer-events-auto flex flex-col", children: [
+    /* @__PURE__ */ jsxs222(
       "button",
       {
         type: "button",
@@ -31253,7 +31484,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__ */ jsxs218(
+          /* @__PURE__ */ jsxs222(
             "span",
             {
               className: cn(
@@ -31261,16 +31492,16 @@ function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
                 isAdmin ? "text-ods-open-yellow" : "text-ods-text-secondary"
               ),
               children: [
-                isAdmin ? /* @__PURE__ */ jsx275(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx275(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
-                /* @__PURE__ */ jsx275("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
+                isAdmin ? /* @__PURE__ */ jsx279(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx279(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
+                /* @__PURE__ */ jsx279("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
               ]
             }
           ),
-          expanded ? /* @__PURE__ */ jsx275(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx275(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
+          expanded ? /* @__PURE__ */ jsx279(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx279(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx275("div", { style: containerStyle, children: /* @__PURE__ */ jsx275("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx275(
+    /* @__PURE__ */ jsx279("div", { style: containerStyle, children: /* @__PURE__ */ jsx279("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx279(
       ApprovalBatchMessage,
       {
         className: "mb-0",
@@ -31323,7 +31554,7 @@ function hasMoveSettled(columns, move) {
 }
 
 // src/components/features/board/ticket-card.tsx
-import { Fragment as Fragment48, jsx as jsx276, jsxs as jsxs219 } from "react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx280, jsxs as jsxs223 } from "react/jsx-runtime";
 var PRIORITY_COLOR_CLASS = {
   low: "text-ods-text-secondary",
   medium: "text-ods-info",
@@ -31355,24 +31586,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__ */ jsxs219("div", { className: "pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
-    ticket.priority && /* @__PURE__ */ jsx276(
+  const rightSection = hasRightSection ? /* @__PURE__ */ jsxs223("div", { className: "pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+    ticket.priority && /* @__PURE__ */ jsx280(
       Flag02Icon,
       {
         className: cn("size-4", PRIORITY_COLOR_CLASS[ticket.priority]),
         "aria-label": `Priority: ${ticket.priority}`
       }
     ),
-    renderAssignSlot ? renderAssignSlot(ticket) : ticket.assignees?.length ? /* @__PURE__ */ jsxs219("div", { className: "flex -space-x-2", children: [
+    renderAssignSlot ? renderAssignSlot(ticket) : ticket.assignees?.length ? /* @__PURE__ */ jsxs223("div", { className: "flex -space-x-2", children: [
       ticket.assignees.slice(0, MAX_VISIBLE_ASSIGNEES).map(
-        (a) => a.deleted ? /* @__PURE__ */ jsx276(
+        (a) => a.deleted ? /* @__PURE__ */ jsx280(
           DeletedUserAvatar,
           {
             size: "sm",
             accessibleLabel: `Deleted user: ${a.name ?? a.initials ?? a.id}`
           },
           a.id
-        ) : /* @__PURE__ */ jsx276(
+        ) : /* @__PURE__ */ jsx280(
           SquareAvatar,
           {
             src: a.avatarUrl,
@@ -31384,7 +31615,7 @@ function TicketCardBody({
           a.id
         )
       ),
-      ticket.assignees.length > MAX_VISIBLE_ASSIGNEES && /* @__PURE__ */ jsxs219("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__ */ jsxs223("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
       ] })
@@ -31394,7 +31625,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__ */ jsx276(
+  const meta = href ? /* @__PURE__ */ jsx280(
     next_link_default,
     {
       href,
@@ -31405,28 +31636,28 @@ function TicketCardBody({
       className: cn("pointer-events-auto block", metaClass),
       children: metaLabel
     }
-  ) : /* @__PURE__ */ jsx276("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
-  return /* @__PURE__ */ jsxs219(Fragment48, { children: [
-    /* @__PURE__ */ jsxs219("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
-      /* @__PURE__ */ jsxs219("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
-        /* @__PURE__ */ jsx276("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
-        showDeviceRow && /* @__PURE__ */ jsxs219("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-secondary text-h6", children: [
-          /* @__PURE__ */ jsx276(LaptopIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx276("span", { className: "truncate", title: deviceText, children: deviceText })
+  ) : /* @__PURE__ */ jsx280("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
+  return /* @__PURE__ */ jsxs223(Fragment48, { children: [
+    /* @__PURE__ */ jsxs223("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+      /* @__PURE__ */ jsxs223("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
+        /* @__PURE__ */ jsx280("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
+        showDeviceRow && /* @__PURE__ */ jsxs223("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx280(LaptopIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx280("span", { className: "truncate", title: deviceText, children: deviceText })
         ] })
       ] }),
       rightSection
     ] }),
-    ticket.tags?.length ? /* @__PURE__ */ jsx276(TicketTagRow, { tags: ticket.tags }) : null,
-    metaLabel && (tooltipLabel ? /* @__PURE__ */ jsx276(TooltipProvider, { children: /* @__PURE__ */ jsxs219(Tooltip, { children: [
-      /* @__PURE__ */ jsx276(TooltipTrigger, { asChild: true, children: meta }),
-      /* @__PURE__ */ jsx276(TooltipContent, { children: tooltipLabel })
+    ticket.tags?.length ? /* @__PURE__ */ jsx280(TicketTagRow, { tags: ticket.tags }) : null,
+    metaLabel && (tooltipLabel ? /* @__PURE__ */ jsx280(TooltipProvider, { children: /* @__PURE__ */ jsxs223(Tooltip, { children: [
+      /* @__PURE__ */ jsx280(TooltipTrigger, { asChild: true, children: meta }),
+      /* @__PURE__ */ jsx280(TooltipContent, { children: tooltipLabel })
     ] }) }) : meta),
-    ticket.escalatedByUser && /* @__PURE__ */ jsxs219("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6", children: [
-      /* @__PURE__ */ jsx276(UserCheckIcon, { className: "size-4 shrink-0" }),
-      /* @__PURE__ */ jsx276("span", { className: "truncate", children: "Escalated by User" })
+    ticket.escalatedByUser && /* @__PURE__ */ jsxs223("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6", children: [
+      /* @__PURE__ */ jsx280(UserCheckIcon, { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx280("span", { className: "truncate", children: "Escalated by User" })
     ] }),
-    ticket.activity && /* @__PURE__ */ jsxs219(
+    ticket.activity && /* @__PURE__ */ jsxs223(
       "div",
       {
         className: cn(
@@ -31434,32 +31665,32 @@ function TicketCardBody({
           ticket.activity.kind === "stale" ? "text-ods-open-yellow" : "text-ods-text-secondary"
         ),
         children: [
-          ticket.activity.kind === "stale" ? /* @__PURE__ */ jsx276(ClockIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx276(DotsLoaderIcon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ jsx276("span", { className: "truncate", children: ticket.activity.label ?? ACTIVITY_DEFAULT_LABEL[ticket.activity.kind] })
+          ticket.activity.kind === "stale" ? /* @__PURE__ */ jsx280(ClockIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx280(DotsLoaderIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx280("span", { className: "truncate", children: ticket.activity.label ?? ACTIVITY_DEFAULT_LABEL[ticket.activity.kind] })
         ]
       }
     ),
-    showNewMessage && /* @__PURE__ */ jsx276(
+    showNewMessage && /* @__PURE__ */ jsx280(
       Tag,
       {
         label: "New Message",
-        icon: /* @__PURE__ */ jsx276(MessagesIcon, { size: 16, color: newMessageTextColor }),
+        icon: /* @__PURE__ */ jsx280(MessagesIcon, { size: 16, color: newMessageTextColor }),
         className: "w-fit shrink-0",
         style: { backgroundColor: columnColor, color: newMessageTextColor }
       }
     ),
-    ticket.pendingApproval && /* @__PURE__ */ jsx276(BoardTicketApproval, { pendingApproval: ticket.pendingApproval, onApprove, onReject })
+    ticket.pendingApproval && /* @__PURE__ */ jsx280(BoardTicketApproval, { pendingApproval: ticket.pendingApproval, onApprove, onReject })
   ] });
 }
 function TicketCardView({ className, style, ...bodyProps }) {
   const { ticket, columnColor } = bodyProps;
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
-  return /* @__PURE__ */ jsx276(
+  return /* @__PURE__ */ jsx280(
     "div",
     {
       className: cn(TICKET_CARD_SHELL, className),
       style: showNewMessage ? { borderColor: columnColor, ...style } : style,
-      children: /* @__PURE__ */ jsx276("div", { className: "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx276(TicketCardBody, { ...bodyProps }) })
+      children: /* @__PURE__ */ jsx280("div", { className: "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx280(TicketCardBody, { ...bodyProps }) })
     }
   );
 }
@@ -31480,7 +31711,7 @@ var TicketCard = memo5(function TicketCardImpl({
   useEffect47(() => {
     ticketRef.current = ticket;
   });
-  const [isDragging, setIsDragging] = useState79(false);
+  const [isDragging, setIsDragging] = useState81(false);
   const isLanding = useIsLanding(ticket.id);
   const aim = useDropAim();
   const closestEdge = aim && aim.columnId === columnId && aim.ticketId === ticket.id ? aim.edge : null;
@@ -31574,7 +31805,7 @@ var TicketCard = memo5(function TicketCardImpl({
     [isDragging]
   );
   const body = useMemo24(
-    () => /* @__PURE__ */ jsx276(
+    () => /* @__PURE__ */ jsx280(
       TicketCardBody,
       {
         ticket,
@@ -31603,7 +31834,7 @@ var TicketCard = memo5(function TicketCardImpl({
   } else if (isLanding) {
     style.visibility = "hidden";
   }
-  const insertionLine = closestEdge ? /* @__PURE__ */ jsx276(
+  const insertionLine = closestEdge ? /* @__PURE__ */ jsx280(
     "span",
     {
       "aria-hidden": true,
@@ -31622,9 +31853,9 @@ var TicketCard = memo5(function TicketCardImpl({
     }
   ) : null;
   if (href) {
-    return /* @__PURE__ */ jsxs219("div", { ...outerProps, children: [
+    return /* @__PURE__ */ jsxs223("div", { ...outerProps, children: [
       insertionLine,
-      /* @__PURE__ */ jsx276(
+      /* @__PURE__ */ jsx280(
         next_link_default,
         {
           href,
@@ -31637,12 +31868,12 @@ var TicketCard = memo5(function TicketCardImpl({
           className: "absolute inset-0 z-0 rounded-md focus-visible:outline-none"
         }
       ),
-      /* @__PURE__ */ jsx276("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+      /* @__PURE__ */ jsx280("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
     ] });
   }
-  return /* @__PURE__ */ jsxs219("div", { ...outerProps, children: [
+  return /* @__PURE__ */ jsxs223("div", { ...outerProps, children: [
     insertionLine,
-    /* @__PURE__ */ jsx276(
+    /* @__PURE__ */ jsx280(
       "button",
       {
         type: "button",
@@ -31653,23 +31884,23 @@ var TicketCard = memo5(function TicketCardImpl({
         className: "absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
       }
     ),
-    /* @__PURE__ */ jsx276("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+    /* @__PURE__ */ jsx280("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__ */ jsxs219("div", { className: "flex h-8 flex-wrap items-start gap-[var(--spacing-system-xxs)] overflow-clip", children: [
-    visible.map((tag) => /* @__PURE__ */ jsx276(Tag, { variant: "outline", label: tag }, tag)),
-    hidden > 0 && /* @__PURE__ */ jsx276(Tag, { variant: "outline", label: `+${hidden}` })
+  return /* @__PURE__ */ jsxs223("div", { className: "flex h-8 flex-wrap items-start gap-[var(--spacing-system-xxs)] overflow-clip", children: [
+    visible.map((tag) => /* @__PURE__ */ jsx280(Tag, { variant: "outline", label: tag }, tag)),
+    hidden > 0 && /* @__PURE__ */ jsx280(Tag, { variant: "outline", label: `+${hidden}` })
   ] });
 }
 
 // src/components/features/board/ticket-card-skeleton.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx277, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx281, jsxs as jsxs224 } from "react/jsx-runtime";
 var TicketCardSkeleton = forwardRef32(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs220(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs224(
     "div",
     {
       ref,
@@ -31679,22 +31910,22 @@ var TicketCardSkeleton = forwardRef32(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs220("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
-          /* @__PURE__ */ jsxs220("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ jsx277("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx277(Skeleton, { className: "h-4 w-3/4" }) }),
-            /* @__PURE__ */ jsxs220("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
-              /* @__PURE__ */ jsx277(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
-              /* @__PURE__ */ jsx277(Skeleton, { className: "h-3 w-1/2" })
+        /* @__PURE__ */ jsxs224("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+          /* @__PURE__ */ jsxs224("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx281("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx281(Skeleton, { className: "h-4 w-3/4" }) }),
+            /* @__PURE__ */ jsxs224("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
+              /* @__PURE__ */ jsx281(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
+              /* @__PURE__ */ jsx281(Skeleton, { className: "h-3 w-1/2" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs220("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
-            /* @__PURE__ */ jsx277(Skeleton, { className: "size-4 rounded-sm" }),
-            /* @__PURE__ */ jsx277(Skeleton, { className: "size-8 rounded-full" })
+          /* @__PURE__ */ jsxs224("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+            /* @__PURE__ */ jsx281(Skeleton, { className: "size-4 rounded-sm" }),
+            /* @__PURE__ */ jsx281(Skeleton, { className: "size-8 rounded-full" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs220("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ jsx277(Skeleton, { className: "h-8 w-16 rounded-md" }),
-          /* @__PURE__ */ jsx277(Skeleton, { className: "h-8 w-12 rounded-md" })
+        /* @__PURE__ */ jsxs224("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx281(Skeleton, { className: "h-8 w-16 rounded-md" }),
+          /* @__PURE__ */ jsx281(Skeleton, { className: "h-8 w-12 rounded-md" })
         ] })
       ]
     }
@@ -31703,7 +31934,7 @@ var TicketCardSkeleton = forwardRef32(
 TicketCardSkeleton.displayName = "TicketCardSkeleton";
 
 // src/components/features/board/board-column.tsx
-import { Fragment as Fragment49, jsx as jsx278, jsxs as jsxs221 } from "react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx282, jsxs as jsxs225 } from "react/jsx-runtime";
 var BoardColumn = memo6(function BoardColumnImpl({
   column,
   collapsed = false,
@@ -31722,7 +31953,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
   className
 }) {
   const laneRef = useRef43(null);
-  const [isOver, setIsOver] = useState80(false);
+  const [isOver, setIsOver] = useState82(false);
   useEffect48(() => {
     const element = laneRef.current;
     if (!element || collapsed || touchMode || column.dropDisabled) return void 0;
@@ -31755,7 +31986,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
     });
   }, [column.id, column.dropDisabled, column.allowedFromColumns, collapsed, touchMode]);
   const handleToggleCollapse = useCallback27(() => onToggleCollapse?.(column.id), [onToggleCollapse, column.id]);
-  return /* @__PURE__ */ jsxs221(
+  return /* @__PURE__ */ jsxs225(
     "div",
     {
       ref: laneRef,
@@ -31771,7 +32002,7 @@ var BoardColumn = memo6(function BoardColumnImpl({
       ),
       style: column.system ? void 0 : { backgroundColor: tintOnDark(column.color) },
       children: [
-        /* @__PURE__ */ jsx278(
+        /* @__PURE__ */ jsx282(
           BoardColumnHeader,
           {
             column,
@@ -31781,9 +32012,9 @@ var BoardColumn = memo6(function BoardColumnImpl({
             onArchive: !collapsed && column.archivable && onArchive ? () => onArchive(column.id) : void 0
           }
         ),
-        !collapsed && /* @__PURE__ */ jsxs221(Fragment49, { children: [
-          /* @__PURE__ */ jsx278("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
-          /* @__PURE__ */ jsx278(
+        !collapsed && /* @__PURE__ */ jsxs225(Fragment49, { children: [
+          /* @__PURE__ */ jsx282("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
+          /* @__PURE__ */ jsx282(
             ColumnBody,
             {
               column,
@@ -31846,13 +32077,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__ */ jsxs221(
+    /* @__PURE__ */ jsxs225(
       "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__ */ jsx278(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx278(EmptyState2, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx278(
+          column.isLoading ? /* @__PURE__ */ jsx282(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx282(EmptyState2, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx282(
             TicketCard,
             {
               ticket: t,
@@ -31868,26 +32099,26 @@ function ColumnBody({
             },
             t.id
           )),
-          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx278(TicketCardSkeleton, {}),
-          column.hasMore && /* @__PURE__ */ jsx278("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
+          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx282(TicketCardSkeleton, {}),
+          column.hasMore && /* @__PURE__ */ jsx282("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
         ]
       }
     )
   );
 }
 function SkeletonStack({ count = 4 }) {
-  return /* @__PURE__ */ jsx278(Fragment49, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx278(TicketCardSkeleton, {}, `skeleton-${i}`)) });
+  return /* @__PURE__ */ jsx282(Fragment49, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx282(TicketCardSkeleton, {}, `skeleton-${i}`)) });
 }
 function EmptyState2({ columnId, touchMode }) {
   const aim = useDropAim();
   if (aim && aim.columnId === columnId) {
-    return /* @__PURE__ */ jsx278("div", { "aria-hidden": true, ...{ [DROP_LINE_ATTRIBUTE]: "" }, className: "h-0.5 shrink-0 rounded-full bg-ods-accent" });
+    return /* @__PURE__ */ jsx282("div", { "aria-hidden": true, ...{ [DROP_LINE_ATTRIBUTE]: "" }, className: "h-0.5 shrink-0 rounded-full bg-ods-accent" });
   }
-  return /* @__PURE__ */ jsxs221("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__ */ jsx278(TagIcon, { className: "h-6 w-6 shrink-0" }),
-    /* @__PURE__ */ jsxs221("div", { className: "flex w-full flex-col", children: [
-      /* @__PURE__ */ jsx278("p", { className: "text-h4", children: "No tickets here" }),
-      /* @__PURE__ */ jsx278("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__ */ jsxs225("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__ */ jsx282(TagIcon, { className: "h-6 w-6 shrink-0" }),
+    /* @__PURE__ */ jsxs225("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsx282("p", { className: "text-h4", children: "No tickets here" }),
+      /* @__PURE__ */ jsx282("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" })
     ] })
   ] });
 }
@@ -31901,10 +32132,10 @@ function resolveBoardDrop(columns, { source, target }) {
 }
 
 // src/components/features/board/use-board-collapse.ts
-import { useCallback as useCallback28, useEffect as useEffect49, useRef as useRef44, useState as useState81 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect49, useRef as useRef44, useState as useState83 } from "react";
 function useBoardCollapse(storageKey) {
   const [persisted, setPersisted] = useLocalStorage(storageKey ?? "__board_collapse_unused__", {});
-  const [memory, setMemory] = useState81({});
+  const [memory, setMemory] = useState83({});
   const collapsed = storageKey ? persisted : memory;
   const setMap = storageKey ? setPersisted : setMemory;
   const setMapRef = useRef44(setMap);
@@ -31921,7 +32152,7 @@ function useBoardCollapse(storageKey) {
 }
 
 // src/components/features/board/touch-board.tsx
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { jsx as jsx283 } from "react/jsx-runtime";
 function TouchBoard({
   columns,
   onLoadMore,
@@ -31936,11 +32167,11 @@ function TouchBoard({
   className
 }) {
   const { collapsed, toggle } = useBoardCollapse(collapseStorageKey);
-  return /* @__PURE__ */ jsx279("div", { className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx279(
+  return /* @__PURE__ */ jsx283("div", { className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx283(
     "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__ */ jsx279(
+      children: columns.map((column) => /* @__PURE__ */ jsx283(
         BoardColumn,
         {
           column,
@@ -31967,7 +32198,7 @@ function TouchBoard({
 }
 
 // src/components/features/board/board.tsx
-import { jsx as jsx280, jsxs as jsxs222 } from "react/jsx-runtime";
+import { jsx as jsx284, jsxs as jsxs226 } from "react/jsx-runtime";
 var PENDING_MOVE_TIMEOUT_MS = 2e3;
 var DROP_MS = 160;
 var DROP_EASING = "cubic-bezier(0.2, 0, 0, 1)";
@@ -31976,9 +32207,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__ */ jsx280("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
+    return /* @__PURE__ */ jsx284("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
   }
-  return dragAndDropEnabled ? /* @__PURE__ */ jsx280(DragBoard, { ...props }) : /* @__PURE__ */ jsx280(TouchBoard, { ...props });
+  return dragAndDropEnabled ? /* @__PURE__ */ jsx284(DragBoard, { ...props }) : /* @__PURE__ */ jsx284(TouchBoard, { ...props });
 }
 function DragBoard({
   columns,
@@ -32019,20 +32250,20 @@ function DragBoard({
     },
     [scrollRef]
   );
-  const [aim, setAim] = useState82(null);
-  const [lifted, setLifted] = useState82(null);
-  const [announcement, setAnnouncement] = useState82("");
+  const [aim, setAim] = useState84(null);
+  const [lifted, setLifted] = useState84(null);
+  const [announcement, setAnnouncement] = useState84("");
   const dragGeometry = useRef45(null);
-  const [landingPreview, setLandingPreview] = useState82(null);
+  const [landingPreview, setLandingPreview] = useState84(null);
   const previewRef = useRef45(null);
-  const [reportedMove, setPendingMove] = useState82(null);
+  const [reportedMove, setPendingMove] = useState84(null);
   const pendingMove = reportedMove && !hasMoveSettled(columns, reportedMove) ? reportedMove : null;
   const view = useMemo25(() => pendingMove ? applyPendingMove(columns, pendingMove) : columns, [columns, pendingMove]);
   useEffect50(() => {
     columnsRef.current = view;
     onChangeRef.current = onChange;
   });
-  const [landing, setLanding] = useState82(null);
+  const [landing, setLanding] = useState84(null);
   const landingTimer = useRef45(null);
   const pointRef = useRef45({ x: 0, y: 0 });
   const laneLabel = useCallback29((columnId) => view.find((c) => c.id === columnId)?.label ?? columnId, [view]);
@@ -32231,7 +32462,7 @@ function DragBoard({
     };
   }, [landing, landingPreview]);
   const preview = landingPreview && createPortal(
-    /* @__PURE__ */ jsx280(
+    /* @__PURE__ */ jsx284(
       "div",
       {
         ref: previewRef,
@@ -32244,7 +32475,7 @@ function DragBoard({
           // translate in pointer coordinates and nothing else.
           margin: `${-landingPreview.grabY}px 0 0 ${-landingPreview.grabX}px`
         },
-        children: /* @__PURE__ */ jsx280(
+        children: /* @__PURE__ */ jsx284(
           TicketCardView,
           {
             ticket: landingPreview.ticket,
@@ -32257,10 +32488,10 @@ function DragBoard({
     ),
     document.body
   );
-  return /* @__PURE__ */ jsx280(LandingCardContext.Provider, { value: landing, children: /* @__PURE__ */ jsx280(DropAimContext.Provider, { value: aim ?? keyboardAim, children: /* @__PURE__ */ jsxs222(BoardLiftContext.Provider, { value: lift, children: [
+  return /* @__PURE__ */ jsx284(LandingCardContext.Provider, { value: landing, children: /* @__PURE__ */ jsx284(DropAimContext.Provider, { value: aim ?? keyboardAim, children: /* @__PURE__ */ jsxs226(BoardLiftContext.Provider, { value: lift, children: [
     preview,
-    /* @__PURE__ */ jsxs222("div", { ref: boardRef, className: cn("flex h-full flex-col", className), children: [
-      /* @__PURE__ */ jsx280(
+    /* @__PURE__ */ jsxs226("div", { ref: boardRef, className: cn("flex h-full flex-col", className), children: [
+      /* @__PURE__ */ jsx284(
         "div",
         {
           ref: setScroller,
@@ -32272,9 +32503,9 @@ function DragBoard({
             const joinLeft = !!(column.system && prev?.system);
             const joinRight = !!(column.system && next?.system);
             const showGap = i > 0 && !joinLeft;
-            return /* @__PURE__ */ jsxs222(Fragment50, { children: [
-              showGap && /* @__PURE__ */ jsx280("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
-              /* @__PURE__ */ jsx280(
+            return /* @__PURE__ */ jsxs226(Fragment50, { children: [
+              showGap && /* @__PURE__ */ jsx284("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
+              /* @__PURE__ */ jsx284(
                 BoardColumn,
                 {
                   column,
@@ -32296,15 +32527,15 @@ function DragBoard({
           })
         }
       ),
-      /* @__PURE__ */ jsx280("p", { "aria-live": "polite", className: "sr-only", children: announcement }),
-      thumbRatio > 0 && /* @__PURE__ */ jsx280(
+      /* @__PURE__ */ jsx284("p", { "aria-live": "polite", className: "sr-only", children: announcement }),
+      thumbRatio > 0 && /* @__PURE__ */ jsx284(
         "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__ */ jsx280(
+          children: /* @__PURE__ */ jsx284(
             "div",
             {
               ref: thumbRef,
@@ -32423,9 +32654,9 @@ import {
   useId as useId6,
   useMemo as useMemo26,
   useRef as useRef46,
-  useState as useState83
+  useState as useState85
 } from "react";
-import { jsx as jsx281, jsxs as jsxs223 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs227 } from "react/jsx-runtime";
 var SORTABLE_ITEM_ATTRIBUTE = "data-sortable-item";
 var SHIFT_MS = 200;
 var DROP_MS2 = 150;
@@ -32440,7 +32671,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
   const listRef = useRef46(null);
   const dragAndDropEnabled = useDragAndDropEnabled();
   const dragType = useId6();
-  const [announcement, setAnnouncement] = useState83("");
+  const [announcement, setAnnouncement] = useState85("");
   const onReorderRef = useRef46(onReorder);
   const getItemLabelRef = useRef46(getItemLabel);
   useEffect51(() => {
@@ -32448,7 +32679,7 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
     getItemLabelRef.current = getItemLabel;
   });
   const flipFrom = useRef46(null);
-  const [flipTick, setFlipTick] = useState83(0);
+  const [flipTick, setFlipTick] = useState85(0);
   const flipTimer = useRef46(null);
   const readItems = useCallback30(
     () => [...listRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTRIBUTE}]`) ?? []],
@@ -32564,15 +32795,15 @@ function SortableList({ onReorder, getItemLabel, disabled = false, className, ch
     () => ({ dragType, disabled, dragAndDropEnabled, reorder, readItems }),
     [dragType, disabled, dragAndDropEnabled, reorder, readItems]
   );
-  return /* @__PURE__ */ jsx281(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs223("div", { ref: listRef, className, children: [
+  return /* @__PURE__ */ jsx285(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs227("div", { ref: listRef, className, children: [
     children,
-    /* @__PURE__ */ jsx281("p", { "aria-live": "polite", className: "sr-only", children: announcement })
+    /* @__PURE__ */ jsx285("p", { "aria-live": "polite", className: "sr-only", children: announcement })
   ] }) });
 }
 
 // src/components/features/sortable-list/sortable-move-buttons.tsx
 import { useRef as useRef47 } from "react";
-import { jsx as jsx282, jsxs as jsxs224 } from "react/jsx-runtime";
+import { jsx as jsx286, jsxs as jsxs228 } from "react/jsx-runtime";
 function SortableMoveButtons({ index, count, label, className }) {
   const { disabled, reorder } = useSortableListContext();
   const upRef = useRef47(null);
@@ -32587,8 +32818,8 @@ function SortableMoveButtons({ index, count, label, className }) {
     });
   };
   const subject = label ?? "item";
-  return /* @__PURE__ */ jsxs224("div", { className: cn("inline-flex shrink-0", className), children: [
-    /* @__PURE__ */ jsx282(
+  return /* @__PURE__ */ jsxs228("div", { className: cn("inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx286(
       Button,
       {
         ref: upRef,
@@ -32599,10 +32830,10 @@ function SortableMoveButtons({ index, count, label, className }) {
         disabled: disabled || index <= 0,
         onClick: () => move(-1),
         className: "rounded-r-none border-r-0",
-        children: /* @__PURE__ */ jsx282(Arrow01UpIcon, {})
+        children: /* @__PURE__ */ jsx286(Arrow01UpIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx282(
+    /* @__PURE__ */ jsx286(
       Button,
       {
         ref: downRef,
@@ -32613,7 +32844,7 @@ function SortableMoveButtons({ index, count, label, className }) {
         disabled: disabled || index >= count - 1,
         onClick: () => move(1),
         className: "rounded-l-none",
-        children: /* @__PURE__ */ jsx282(Arrow01DownIcon, {})
+        children: /* @__PURE__ */ jsx286(Arrow01DownIcon, {})
       }
     )
   ] });
@@ -32623,13 +32854,13 @@ 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 useCallback31, useEffect as useEffect52, useState as useState84 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect52, useState as useState86 } from "react";
 function useSortableItem() {
   const { dragType, disabled, dragAndDropEnabled, reorder, readItems } = useSortableListContext();
   const inert = disabled || !dragAndDropEnabled;
-  const [item, setItem] = useState84(null);
-  const [handle, setHandle] = useState84(null);
-  const [isDragging, setIsDragging] = useState84(false);
+  const [item, setItem] = useState86(null);
+  const [handle, setHandle] = useState86(null);
+  const [isDragging, setIsDragging] = useState86(false);
   const itemRef = useCallback31((node) => {
     node?.setAttribute(SORTABLE_ITEM_ATTRIBUTE, "");
     setItem(node);
@@ -32669,7 +32900,7 @@ function useSortableItem() {
 }
 
 // src/components/features/ticket-status-config-list/ticket-status-config-list.tsx
-import { jsx as jsx283 } from "react/jsx-runtime";
+import { jsx as jsx287 } from "react/jsx-runtime";
 function TicketStatusConfigList({
   items,
   onReorder,
@@ -32677,13 +32908,13 @@ function TicketStatusConfigList({
   getItemLabel,
   className
 }) {
-  return /* @__PURE__ */ jsx283(
+  return /* @__PURE__ */ jsx287(
     SortableList,
     {
       onReorder,
       getItemLabel,
       className: cn("flex w-full flex-col gap-[var(--spacing-system-xs)]", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsx283(SortableRow, { index, count: items.length, label: getItemLabel?.(index), children: (args) => renderRow(item, args) }, item.id))
+      children: items.map((item, index) => /* @__PURE__ */ jsx287(SortableRow, { index, count: items.length, label: getItemLabel?.(index), children: (args) => renderRow(item, args) }, item.id))
     }
   );
 }
@@ -32694,7 +32925,7 @@ function SortableRow({
   children
 }) {
   const { itemRef, dragHandleProps, isDragging, dragAndDropEnabled } = useSortableItem();
-  return /* @__PURE__ */ jsx283(
+  return /* @__PURE__ */ jsx287(
     "div",
     {
       ref: itemRef,
@@ -32702,18 +32933,18 @@ function SortableRow({
       children: children({
         dragHandleProps,
         isDragging,
-        moveButtons: dragAndDropEnabled ? null : /* @__PURE__ */ jsx283(SortableMoveButtons, { index, count, label })
+        moveButtons: dragAndDropEnabled ? null : /* @__PURE__ */ jsx287(SortableMoveButtons, { index, count, label })
       })
     }
   );
 }
 
 // src/components/features/conversation-card.tsx
-import { jsx as jsx284, jsxs as jsxs225 } from "react/jsx-runtime";
+import { jsx as jsx288, jsxs as jsxs229 } from "react/jsx-runtime";
 function Who({ speaker }) {
-  return /* @__PURE__ */ jsxs225("div", { className: "flex items-baseline gap-2 text-ods-text-primary text-h4", children: [
+  return /* @__PURE__ */ jsxs229("div", { className: "flex items-baseline gap-2 text-ods-text-primary text-h4", children: [
     speaker.name,
-    speaker.meta && /* @__PURE__ */ jsx284("span", { className: "text-ods-text-secondary text-h6", children: speaker.meta })
+    speaker.meta && /* @__PURE__ */ jsx288("span", { className: "text-ods-text-secondary text-h6", children: speaker.meta })
   ] });
 }
 function ConversationCard({
@@ -32727,36 +32958,36 @@ function ConversationCard({
   footerTone = "default",
   className
 }) {
-  return /* @__PURE__ */ jsxs225(
+  return /* @__PURE__ */ jsxs229(
     "div",
     {
       className: cn("flex h-full flex-col gap-4 rounded-xl border border-ods-border bg-ods-card p-5 md:p-7", className),
       children: [
-        /* @__PURE__ */ jsxs225("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx284("span", { className: "shrink-0", children: requester.avatar }),
-          /* @__PURE__ */ jsxs225("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx284(Who, { speaker: requester }),
-            /* @__PURE__ */ jsxs225("p", { className: "m-0 mt-1 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3", title: request, children: [
+        /* @__PURE__ */ jsxs229("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx288("span", { className: "shrink-0", children: requester.avatar }),
+          /* @__PURE__ */ jsxs229("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx288(Who, { speaker: requester }),
+            /* @__PURE__ */ jsxs229("p", { className: "m-0 mt-1 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3", title: request, children: [
               "\u201C",
               request,
               "\u201D"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs225("div", { className: "flex items-start gap-3 rounded-md border border-ods-border bg-ods-bg p-3.5", children: [
-          /* @__PURE__ */ jsx284("span", { className: "shrink-0", children: responder.avatar }),
-          /* @__PURE__ */ jsxs225("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx284(Who, { speaker: responder }),
-            /* @__PURE__ */ jsxs225("div", { className: "mt-1 flex items-start gap-2 text-ods-text-secondary text-h4", children: [
-              /* @__PURE__ */ jsx284(CheckCircleIcon, { size: 16, className: "mt-1 shrink-0 text-ods-success", "aria-hidden": true }),
-              /* @__PURE__ */ jsx284("span", { className: "line-clamp-3 min-h-[3lh] min-w-0 flex-1", title: outcome, children: outcome }),
+        /* @__PURE__ */ jsxs229("div", { className: "flex items-start gap-3 rounded-md border border-ods-border bg-ods-bg p-3.5", children: [
+          /* @__PURE__ */ jsx288("span", { className: "shrink-0", children: responder.avatar }),
+          /* @__PURE__ */ jsxs229("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx288(Who, { speaker: responder }),
+            /* @__PURE__ */ jsxs229("div", { className: "mt-1 flex items-start gap-2 text-ods-text-secondary text-h4", children: [
+              /* @__PURE__ */ jsx288(CheckCircleIcon, { size: 16, className: "mt-1 shrink-0 text-ods-success", "aria-hidden": true }),
+              /* @__PURE__ */ jsx288("span", { className: "line-clamp-3 min-h-[3lh] min-w-0 flex-1", title: outcome, children: outcome }),
               outcomeAside
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs225("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-ods-border pt-3.5 text-ods-text-secondary text-h6", children: [
-          /* @__PURE__ */ jsx284("span", { children: footerLabel }),
-          /* @__PURE__ */ jsx284(
+        /* @__PURE__ */ jsxs229("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-ods-border pt-3.5 text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx288("span", { children: footerLabel }),
+          /* @__PURE__ */ jsx288(
             "span",
             {
               className: cn(
@@ -33346,6 +33577,7 @@ export {
   UnreadCountBadge,
   HeaderButton,
   TimeTrackerHeaderButton,
+  RemoteSessionViewers,
   RemoteSessionScope,
   RemoteSessionOrgLogo,
   RemoteSessionRecordingTag,
@@ -33362,6 +33594,15 @@ export {
   RemoteSessionDialog,
   RemoteSessionBorder,
   RemoteSessionPill,
+  REMOTE_SESSION_KEEP_REASON_LABELS,
+  KeepRecordingModal,
+  ReleaseKeepingModal,
+  formatRemoteSessionOffset,
+  RemoteSessionEventList,
+  RemoteSessionTimelineMarkers,
+  RemoteSessionStatusTag,
+  RemoteSessionExpiry,
+  RemoteSessionStorageAlert,
   BoardColumnHeader,
   tintOnDark,
   BoardTicketApproval,