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

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-N7HMUQRV.js";
+} from "./chunk-G55W76S6.js";
 import {
   AppHeader,
   AppLayout,
@@ -29,14 +29,14 @@ import {
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-PNWIVND4.js";
+} from "./chunk-PJP5SMOU.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-DJLZXJYB.js";
-import "./chunk-S4ADN25W.js";
+} from "./chunk-2NE3DNXY.js";
+import "./chunk-GZYLZ4MB.js";
 import {
   AIEnrichButton,
   AIEnrichSection,
@@ -233,6 +233,7 @@ import {
   InputTrigger,
   InviteLinkInvalidModal,
   JsonDetailList,
+  KeepRecordingModal,
   KnowledgeBaseLinksManager,
   LabeledDivider,
   LazyMount,
@@ -334,6 +335,7 @@ import {
   QueryReportTableRow,
   QueryReportTableSkeleton,
   REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  REMOTE_SESSION_KEEP_REASON_LABELS,
   ROADMAP_STATUS_OPTIONS,
   ROW_HEIGHT_DESKTOP,
   ROW_HEIGHT_MOBILE,
@@ -342,6 +344,7 @@ import {
   RadioGroupBlock,
   RadioGroupItem,
   ReleaseChangelogSection,
+  ReleaseKeepingModal,
   RemoteAccessRequestCard,
   RemoteSessionBlockFrame,
   RemoteSessionBorder,
@@ -349,12 +352,18 @@ import {
   RemoteSessionDialog,
   RemoteSessionDragger,
   RemoteSessionEndButton,
+  RemoteSessionEventList,
+  RemoteSessionExpiry,
   RemoteSessionMinimizedChip,
   RemoteSessionOrgLogo,
   RemoteSessionPill,
   RemoteSessionRecordingTag,
   RemoteSessionScope,
+  RemoteSessionStatusTag,
+  RemoteSessionStorageAlert,
   RemoteSessionSummary,
+  RemoteSessionTimelineMarkers,
+  RemoteSessionViewers,
   ReopenTicketModal,
   ReopenTicketRequestModal,
   RichMarkdownRenderer,
@@ -528,6 +537,7 @@ import {
   formatDocName,
   formatPhoneE164,
   formatRemoteSessionElapsed,
+  formatRemoteSessionOffset,
   formatTestRunDuration,
   generateBiteId,
   getApprovalMeta,
@@ -655,7 +665,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-B7M6QEEM.js";
+} from "./chunk-ENGBNKUJ.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
 import {
@@ -1190,7 +1200,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "./chunk-6JPQDYYY.js";
+} from "./chunk-QGTDWFT6.js";
 import {
   HEADING_EMOJI_RE,
   HUB_HEADER_OFFSET_PX,
@@ -2390,6 +2400,7 @@ export {
   InviteLinkInvalidModal,
   JsonDetailList,
   JumpInIcon,
+  KeepRecordingModal,
   KnowledgeBaseLinksManager,
   LOG_SEVERITY_COLORS,
   LOG_SEVERITY_LABELS,
@@ -2620,6 +2631,7 @@ export {
   RATIO_GRID_CLASS,
   RATIO_TO_CSS_ASPECT,
   REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  REMOTE_SESSION_KEEP_REASON_LABELS,
   RESCUE_FORMS,
   RESYNC_AFTER_HIDDEN_MS,
   ROADMAP_STATUS_OPTIONS,
@@ -2634,6 +2646,7 @@ export {
   ReclaimProfitsIcon,
   RedditIcon,
   ReleaseChangelogSection,
+  ReleaseKeepingModal,
   RemoteAccessRequestCard,
   RemoteControlIcon,
   RemoteSessionBlockFrame,
@@ -2642,12 +2655,18 @@ export {
   RemoteSessionDialog,
   RemoteSessionDragger,
   RemoteSessionEndButton,
+  RemoteSessionEventList,
+  RemoteSessionExpiry,
   RemoteSessionMinimizedChip,
   RemoteSessionOrgLogo,
   RemoteSessionPill,
   RemoteSessionRecordingTag,
   RemoteSessionScope,
+  RemoteSessionStatusTag,
+  RemoteSessionStorageAlert,
   RemoteSessionSummary,
+  RemoteSessionTimelineMarkers,
+  RemoteSessionViewers,
   RenameChatModal,
   ReopenTicketModal,
   ReopenTicketRequestModal,
@@ -3105,6 +3124,7 @@ export {
   formatRelativeTime,
   formatReleaseDate,
   formatRemoteSessionElapsed,
+  formatRemoteSessionOffset,
   formatSingularLookupInvocation,
   formatTestRunDuration,
   formatTicketFullTimestamp,

package/dist/tailwind.config.cjs

@@ -486,6 +486,11 @@ var config = {
         "dot-pulse": {
           "0%, 80%, 100%": { transform: "scale(1)", opacity: "0.7" },
           "40%": { transform: "scale(1.5)", opacity: "1" }
+        },
+        // The dot on a LIVE tag: opacity only, so it reads as "on air" without moving.
+        "live-pulse": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.25" }
         }
       },
       animation: {
@@ -493,7 +498,8 @@ var config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.3s ease-out",
         "cursor-blink": "cursor-blink 1s steps(1) infinite",
-        "dot-pulse": "dot-pulse 1.4s ease-in-out infinite"
+        "dot-pulse": "dot-pulse 1.4s ease-in-out infinite",
+        "live-pulse": "live-pulse 1.6s ease-in-out infinite"
       }
     }
   },

package/dist/tailwind.config.js

@@ -479,6 +479,11 @@ var config = {
         "dot-pulse": {
           "0%, 80%, 100%": { transform: "scale(1)", opacity: "0.7" },
           "40%": { transform: "scale(1.5)", opacity: "1" }
+        },
+        // The dot on a LIVE tag: opacity only, so it reads as "on air" without moving.
+        "live-pulse": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.25" }
         }
       },
       animation: {
@@ -486,7 +491,8 @@ var config = {
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.3s ease-out",
         "cursor-blink": "cursor-blink 1s steps(1) infinite",
-        "dot-pulse": "dot-pulse 1.4s ease-in-out infinite"
+        "dot-pulse": "dot-pulse 1.4s ease-in-out infinite",
+        "live-pulse": "live-pulse 1.6s ease-in-out infinite"
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.701",
+  "version": "0.0.702-snapshot.20261005191338",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/embeddable-chat.tsx

@@ -126,13 +126,13 @@ const HISTORY_RAIL_WIDTH = 320;
 const CHAT_BLOCK_MIN_WIDTH = 400;
 const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH;
 
-// Desktop drawer opens at this fraction of the viewport width (clamped to the
-// Drawer's own min/max). The user can still resize (persisted per DRAWER_WIDTH_KEY).
+// Desktop drawer is this fraction of the viewport width (clamped to the
+// Drawer's own min/max) until the user resizes it. Only the size they choose is
+// stored (see DRAWER_WIDTH_KEY); the default tracks the window, so changing
+// this policy needs no new key.
 const DRAWER_DEFAULT_WIDTH_RATIO = 0.5;
-// Bump the suffix whenever the default policy changes so previously-persisted
-// widths (e.g. the old fixed 750px / earlier 30% default) reset on next open.
 const DRAWER_WIDTH_KEY = 'mingo-chat-width-v4';
-const DRAWER_DEFAULT_WIDTH_PX = 750; // SSR fallback before the viewport is known
+const DRAWER_DEFAULT_WIDTH_PX = 750; // before the viewport is known (server render)
 /**
  * A panel that owns a dialog list opens WIDE ENOUGH TO SPLIT, so the "Current
  * Chats" rail sits beside the conversation instead of replacing it.
@@ -144,12 +144,14 @@ const DRAWER_DEFAULT_WIDTH_PX = 750; // SSR fallback before the viewport is know
  * viewport, so a genuinely small screen keeps the stacked view.
  */
 const SPLIT_DEFAULT_WIDTH_ALLOWANCE = 16;
-function drawerDefaultWidth(withHistoryRail: boolean): number {
-  if (typeof window === 'undefined') return DRAWER_DEFAULT_WIDTH_PX;
-  const ratioWidth = Math.round(window.innerWidth * DRAWER_DEFAULT_WIDTH_RATIO);
+function drawerDefaultWidth(viewportWidth: number, withHistoryRail: boolean): number {
+  if (viewportWidth <= 0) return DRAWER_DEFAULT_WIDTH_PX;
+  const ratioWidth = Math.round(viewportWidth * DRAWER_DEFAULT_WIDTH_RATIO);
   if (!withHistoryRail) return ratioWidth;
   return Math.max(ratioWidth, SPLIT_MIN_WIDTH + SPLIT_DEFAULT_WIDTH_ALLOWANCE);
 }
+const drawerDefaultWidthWithRail = (viewportWidth: number) => drawerDefaultWidth(viewportWidth, true);
+const drawerDefaultWidthWithoutRail = (viewportWidth: number) => drawerDefaultWidth(viewportWidth, false);
 
 // =============================================================================
 // Types
@@ -2810,7 +2812,7 @@ function EmbeddableChatInner({
           resizable
           minSize={480}
           maxSize={1600}
-          defaultSize={drawerDefaultWidth(historyListMode)}
+          defaultSize={historyListMode ? drawerDefaultWidthWithRail : drawerDefaultWidthWithoutRail}
           storageKey={DRAWER_WIDTH_KEY}
           resizeAriaLabel="Resize chat panel"
           overlayClassName="mingo-chat-overlay"

package/src/components/features/remote-session/index.ts

@@ -16,6 +16,30 @@ export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
 export { RemoteSessionDialog } from './remote-session-dialog';
 export type { RemoteSessionDialogProps } from './remote-session-dialog';
 export { RemoteSessionBorder, RemoteSessionPill } from './remote-session-overlay';
+export {
+  REMOTE_SESSION_KEEP_REASON_LABELS,
+  KeepRecordingModal,
+  ReleaseKeepingModal,
+} from './remote-session-keep-modals';
+export type {
+  KeepRecordingModalProps,
+  KeepRecordingSelection,
+  ReleaseKeepingModalProps,
+} from './remote-session-keep-modals';
+export {
+  RemoteSessionEventList,
+  RemoteSessionTimelineMarkers,
+  formatRemoteSessionOffset,
+} from './remote-session-events';
+export type { RemoteSessionEventListProps, RemoteSessionTimelineMarkersProps } from './remote-session-events';
+export { RemoteSessionExpiry, RemoteSessionStatusTag, RemoteSessionStorageAlert } from './remote-session-status';
+export type {
+  RemoteSessionExpiryProps,
+  RemoteSessionStatusTagProps,
+  RemoteSessionStorageAlertProps,
+} from './remote-session-status';
+export { RemoteSessionViewers } from './remote-session-viewers';
+export type { RemoteSessionViewersProps } from './remote-session-viewers';
 export {
   REMOTE_SESSION_DRAG_HANDLE_CLASS,
   RemoteSessionDragger,
@@ -32,5 +56,9 @@ export type {
   RemoteSessionChatMessage,
   RemoteSessionDialogVariant,
   RemoteSessionDragHandlers,
+  RemoteSessionEvent,
+  RemoteSessionKeepReason,
   RemoteSessionParty,
+  RemoteSessionStatus,
+  RemoteSessionViewer,
 } from './types';

package/src/components/features/remote-session/remote-session-block.tsx

@@ -10,9 +10,9 @@ import {
   REMOTE_SESSION_DRAG_HANDLE_CLASS,
   RemoteSessionDragger,
   RemoteSessionOrgLogo,
-  RemoteSessionRecordingTag,
+  RemoteSessionStatusRow,
 } from './remote-session-parts';
-import type { RemoteSessionDragHandlers, RemoteSessionParty } from './types';
+import type { RemoteSessionDragHandlers, RemoteSessionParty, RemoteSessionViewer } from './types';
 
 export interface RemoteSessionBlockFrameProps {
   /** The summary or the chat panel. */
@@ -74,6 +74,8 @@ export interface RemoteSessionSummaryProps {
   /** Elapsed session time, e.g. from `useRemoteSessionTimer`. */
   elapsed: string;
   showRecordingTag?: boolean;
+  /** Everyone in the session while colleagues watch it, the host included; hidden when empty. */
+  viewers?: RemoteSessionViewer[];
   onOpenChat: () => void;
   onEndSession: () => void;
   /** Makes the header row and the dragger move the window. */
@@ -85,6 +87,7 @@ export function RemoteSessionSummary({
   party,
   elapsed,
   showRecordingTag = false,
+  viewers,
   onOpenChat,
   onEndSession,
   dragHandlers,
@@ -118,7 +121,7 @@ export function RemoteSessionSummary({
           <p className="w-full truncate text-ods-text-secondary text-h4">{party.organizationName}</p>
         </div>
       </div>
-      {showRecordingTag && <RemoteSessionRecordingTag />}
+      <RemoteSessionStatusRow showRecordingTag={showRecordingTag} viewers={viewers} />
       <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
         <Button
           variant="outline"

package/src/components/features/remote-session/remote-session-chat-panel.tsx

@@ -6,12 +6,13 @@ import { MessageOffIcon, Send03Icon } from '../../icons-v2-generated';
 import { Button } from '../../ui/button/button';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { RemoteSessionEndButton } from './remote-session-block';
-import {
-  REMOTE_SESSION_DRAG_HANDLE_CLASS,
-  RemoteSessionDragger,
-  RemoteSessionRecordingTag,
-} from './remote-session-parts';
-import type { RemoteSessionChatMessage, RemoteSessionDragHandlers, RemoteSessionParty } from './types';
+import { REMOTE_SESSION_DRAG_HANDLE_CLASS, RemoteSessionDragger, RemoteSessionStatusRow } from './remote-session-parts';
+import type {
+  RemoteSessionChatMessage,
+  RemoteSessionDragHandlers,
+  RemoteSessionParty,
+  RemoteSessionViewer,
+} from './types';
 
 export interface RemoteSessionChatPanelProps {
   party: RemoteSessionParty;
@@ -19,6 +20,8 @@ export interface RemoteSessionChatPanelProps {
   elapsed: string;
   messages: RemoteSessionChatMessage[];
   showRecordingTag?: boolean;
+  /** Everyone in the session while colleagues watch it, the host included; hidden when empty. */
+  viewers?: RemoteSessionViewer[];
   /** The composer's text; owned by the host so it survives hiding the block. */
   draft: string;
   onDraftChange: (draft: string) => void;
@@ -43,6 +46,7 @@ export function RemoteSessionChatPanel({
   elapsed,
   messages,
   showRecordingTag = false,
+  viewers,
   draft,
   onDraftChange,
   onSend,
@@ -83,7 +87,7 @@ export function RemoteSessionChatPanel({
           </p>
           <p className="w-full truncate text-ods-text-secondary text-h4">You can end this session at any time</p>
         </div>
-        {showRecordingTag && <RemoteSessionRecordingTag />}
+        <RemoteSessionStatusRow showRecordingTag={showRecordingTag} viewers={viewers} />
         <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
           <Button
             variant="outline"

package/src/components/features/remote-session/remote-session-events.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import type { RemoteSessionEvent } from './types';
+
+/** `mm:ss` from the start of a recording; `h:mm:ss` from the first hour on. */
+export function formatRemoteSessionOffset(offsetMs: number): string {
+  const total = Math.max(0, Math.floor(offsetMs / 1000));
+  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}`;
+}
+
+export interface RemoteSessionEventListProps {
+  events: RemoteSessionEvent[];
+  /** The event the playhead is on; highlighted. */
+  activeEventId?: string | null;
+  /** Seek the player to the event. */
+  onSelect?: (event: RemoteSessionEvent) => void;
+  className?: string;
+}
+
+/** SESSION EVENTS under the recording player: each event with its time, newest last. */
+export function RemoteSessionEventList({ events, activeEventId, onSelect, className }: RemoteSessionEventListProps) {
+  return (
+    <section className={cn('flex w-full flex-col gap-[var(--spacing-system-xxs)]', className)}>
+      <h2 className="text-ods-text-secondary text-h5">Session Events</h2>
+      <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)]">
+        {events.map(event => (
+          <li key={event.id}>
+            <button
+              type="button"
+              aria-current={event.id === activeEventId || undefined}
+              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',
+              )}
+            >
+              <span className="w-[84px] shrink-0 text-ods-text-secondary text-h4">
+                {formatRemoteSessionOffset(event.offsetMs)}
+              </span>
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="text-ods-text-primary text-h4">{event.title}</span>
+                {event.detail && <span className="text-ods-text-secondary text-h6">{event.detail}</span>}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+export interface RemoteSessionTimelineMarkersProps {
+  events: RemoteSessionEvent[];
+  /** Length of the recording; events past it are pinned to the end. */
+  durationMs: number;
+  /** Seek the player to the event. */
+  onSelect?: (event: RemoteSessionEvent) => void;
+  className?: string;
+}
+
+/** The event marks above the player's track, one per event, at its share of the recording. */
+export function RemoteSessionTimelineMarkers({
+  events,
+  durationMs,
+  onSelect,
+  className,
+}: RemoteSessionTimelineMarkersProps) {
+  if (durationMs <= 0) return null;
+  return (
+    <div className={cn('relative h-4 w-full', className)}>
+      {events.map(event => {
+        const share = Math.min(1, Math.max(0, event.offsetMs / durationMs));
+        const label = `${event.title} at ${formatRemoteSessionOffset(event.offsetMs)}`;
+        return (
+          <button
+            key={event.id}
+            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"
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/features/remote-session/remote-session-keep-modals.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { type ReactNode, useState } from 'react';
+import { HourglassIcon, InfoCircleIcon } from '../../icons-v2-generated';
+import { Button } from '../../ui/button/button';
+import { Input } from '../../ui/input';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from '../../ui/modal-v2';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+import type { RemoteSessionKeepReason } from './types';
+
+/** How each Keep reason reads in the dialog, the session list and the release notice. */
+export const REMOTE_SESSION_KEEP_REASON_LABELS: Record<RemoteSessionKeepReason, string> = {
+  CLIENT_DISPUTE: 'Client dispute',
+  INTERNAL_REVIEW: 'Internal review',
+  LEGAL_OR_COMPLIANCE: 'Legal or compliance request',
+  OTHER: 'Other',
+};
+
+const KEEP_REASONS = Object.keys(REMOTE_SESSION_KEEP_REASON_LABELS) as RemoteSessionKeepReason[];
+
+const DESCRIPTION_MAX_LENGTH = 500;
+
+/** A notice inside the Keep dialogs: an icon, a bold line and the explanation under it. */
+function KeepNotice({ icon, title, children }: { icon: ReactNode; title: string; children: ReactNode }) {
+  return (
+    <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)]">
+      <span className="flex shrink-0 text-ods-text-secondary">{icon}</span>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="text-ods-text-primary text-h3">{title}</p>
+        <p className="text-ods-text-secondary text-h4">{children}</p>
+      </div>
+    </div>
+  );
+}
+
+export interface KeepRecordingSelection {
+  reason: RemoteSessionKeepReason;
+  /** Trimmed; set for `OTHER` only. */
+  description: string | null;
+}
+
+export interface KeepRecordingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** What kept recordings take of the tenant's allowance, e.g. "612 MB of 50 GB". */
+  keptUsage: string;
+  /** The Keep is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: (selection: KeepRecordingSelection) => void;
+}
+
+/** Keep this recording: exempts it from automatic deletion until someone releases it. */
+export function KeepRecordingModal({
+  isOpen,
+  onClose,
+  keptUsage,
+  isPending = false,
+  onConfirm,
+}: KeepRecordingModalProps) {
+  const [reason, setReason] = useState<RemoteSessionKeepReason | ''>('');
+  const [description, setDescription] = useState('');
+
+  // Every opening starts blank. Reset while rendering, not from an effect: the
+  // modal stays mounted when it closes, so an effect would paint the opening
+  // frame with the previous answer still filled in.
+  const [seededOpen, setSeededOpen] = useState(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 (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Keep this recording</ModalV2Title>
+      </ModalV2Header>
+
+      <KeepNotice
+        icon={<InfoCircleIcon size={24} color="currentColor" />}
+        title="This recording won't be deleted automatically"
+      >
+        It stays until you stop keeping it. Kept recordings use {keptUsage}.
+      </KeepNotice>
+
+      <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
+        <Select
+          value={reason}
+          onValueChange={value => setReason(value as RemoteSessionKeepReason)}
+          disabled={isPending}
+        >
+          <SelectTrigger label="Reason" labelVariant="large">
+            <SelectValue placeholder="Select Reason" />
+          </SelectTrigger>
+          <SelectContent>
+            {KEEP_REASONS.map(value => (
+              <SelectItem key={value} value={value}>
+                {REMOTE_SESSION_KEEP_REASON_LABELS[value]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {reason === 'OTHER' && (
+          <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}
+          />
+        )}
+      </div>
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button
+          type="button"
+          variant="accent"
+          onClick={handleKeep}
+          loading={isPending}
+          disabled={!canKeep}
+          className="flex-1"
+        >
+          Keep
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}
+
+export interface ReleaseKeepingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Who placed the Keep. */
+  keptBy: string;
+  /** When the Keep was placed, formatted, e.g. "27 Jul 2026". */
+  keptOn: string;
+  /** The reason as it reads in the sentence, e.g. "Client dispute". */
+  reason: string;
+  /** The ticket or reference the Keep was placed for. */
+  ticket?: string | null;
+  /** When the recording will be deleted once released, formatted. */
+  expiresOn: string;
+  /** The original expiry date when it has already passed, so the release adds the grace period. */
+  dueOn?: string | null;
+  /** The release is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: () => void;
+}
+
+/** Release Keeping: hands the recording back to the normal expiry, nothing is deleted on the spot. */
+export function ReleaseKeepingModal({
+  isOpen,
+  onClose,
+  keptBy,
+  keptOn,
+  reason,
+  ticket,
+  expiresOn,
+  dueOn,
+  isPending = false,
+  onConfirm,
+}: ReleaseKeepingModalProps) {
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Release Keeping</ModalV2Title>
+      </ModalV2Header>
+
+      <div className="flex w-full flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h4">
+        <p>
+          Kept by {keptBy} on {keptOn} for {reason}.
+        </p>
+        {ticket && <p>Ticket: {ticket}</p>}
+      </div>
+
+      <KeepNotice icon={<HourglassIcon size={24} color="currentColor" />} title={`It will expire on ${expiresOn}`}>
+        {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.'}
+      </KeepNotice>
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button type="button" variant="accent" onClick={onConfirm} loading={isPending} className="flex-1">
+          Release Keeping
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}