@flamingo-stack/openframe-frontend-core 0.0.700 → 0.0.701-snapshot.20261005171139

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>
+  );
+}

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

@@ -5,7 +5,8 @@ import { cn } from '../../../utils/cn';
 import { DraggerIcon, RecordingIcon } from '../../icons-v2-generated';
 import { OpenFrameLogo } from '../../icons/openframe-logo';
 import { SquareAvatar } from '../../ui/square-avatar';
-import type { RemoteSessionDragHandlers } from './types';
+import { RemoteSessionViewers } from './remote-session-viewers';
+import type { RemoteSessionDragHandlers, RemoteSessionViewer } from './types';
 
 /**
  * The remote session surfaces are fixed-size desktop windows (440 / 600 px
@@ -90,15 +91,43 @@ export function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }: Remot
 }
 
 /** The green SESSION RECORDING tag. */
-export function RemoteSessionRecordingTag() {
+export function RemoteSessionRecordingTag({ className }: { className?: string }) {
   return (
-    <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)]">
+    <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,
+      )}
+    >
       <RecordingIcon size={16} color="currentColor" className="text-ods-success" />
       <span className="text-ods-success text-h5">Session Recording</span>
     </div>
   );
 }
 
+/**
+ * The row under the block's header: the SESSION RECORDING tag and, while
+ * colleagues watch, who is in the session. With viewers the tag stretches to
+ * the left and the viewers sit on the right.
+ */
+export function RemoteSessionStatusRow({
+  showRecordingTag,
+  viewers,
+}: {
+  showRecordingTag: boolean;
+  viewers?: RemoteSessionViewer[];
+}) {
+  const hasViewers = !!viewers && viewers.length > 0;
+  if (!showRecordingTag && !hasViewers) return null;
+  if (!hasViewers) return <RemoteSessionRecordingTag />;
+  return (
+    <div className="flex w-full items-center gap-[var(--spacing-system-m)]">
+      {showRecordingTag && <RemoteSessionRecordingTag className="flex-1 justify-center self-auto" />}
+      <RemoteSessionViewers viewers={viewers} className="ml-auto" />
+    </div>
+  );
+}
+
 /** Grab cursor on the surfaces the window is moved by. */
 export const REMOTE_SESSION_DRAG_HANDLE_CLASS = 'cursor-grab active:cursor-grabbing';
 

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { AlertTriangleIcon, LockIcon } from '../../icons-v2-generated';
+import { Tag } from '../../ui/tag';
+import type { RemoteSessionStatus } from './types';
+
+/** The pulsing dot of the LIVE tag; still when the user asks for reduced motion. */
+function LiveDot() {
+  return <span aria-hidden className="size-2 animate-live-pulse rounded-full bg-current motion-reduce:animate-none" />;
+}
+
+const STATUS_TAG: Record<RemoteSessionStatus, { label: string; variant: 'critical' | 'warning' | 'error' }> = {
+  live: { label: 'Live', variant: 'critical' },
+  processing: { label: 'Processing', variant: 'warning' },
+  failed: { label: 'Failed', variant: 'error' },
+};
+
+export interface RemoteSessionStatusTagProps {
+  status: RemoteSessionStatus;
+  className?: string;
+}
+
+/** LIVE / PROCESSING / FAILED beside a session's date in the session list and on its page. */
+export function RemoteSessionStatusTag({ status, className }: RemoteSessionStatusTagProps) {
+  const { label, variant } = STATUS_TAG[status];
+  return (
+    <Tag
+      label={label}
+      variant={variant}
+      icon={status === 'live' ? <LiveDot /> : undefined}
+      className={cn('pointer-events-none shrink-0', className)}
+    />
+  );
+}
+
+export type RemoteSessionExpiryProps = { className?: string } & (
+  | { state: 'kept'; keptBy: string; reason: string }
+  | { state: 'scheduled'; date: string; remaining?: string | null }
+  | { state: 'expired' }
+  | { state: 'none' }
+);
+
+/** The EXPIRES cell of a recording: its expiry date, the Keep holding it, or that it has expired. */
+export function RemoteSessionExpiry(props: RemoteSessionExpiryProps) {
+  const { className } = props;
+  if (props.state === 'none') {
+    return <p className={cn('text-ods-text-primary text-h4', className)}>-</p>;
+  }
+  if (props.state === 'expired') {
+    return <p className={cn('text-ods-text-secondary text-h4', className)}>Expired</p>;
+  }
+  if (props.state === 'kept') {
+    return (
+      <div className={cn('flex min-w-0 flex-col', className)}>
+        <p className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h4">
+          <LockIcon size={24} color="currentColor" className="shrink-0" />
+          Kept
+        </p>
+        <p className="truncate text-ods-text-secondary text-h6">
+          Kept by {props.keptBy} · {props.reason}
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className={cn('flex min-w-0 flex-col', className)}>
+      <p className="text-ods-text-primary text-h4">{props.date}</p>
+      {props.remaining && <p className="truncate text-ods-text-secondary text-h6">{props.remaining}</p>}
+    </div>
+  );
+}
+
+export interface RemoteSessionStorageAlertProps {
+  /** `device` on the device page (new sessions there aren't recorded); `session` on a running session. */
+  scope: 'device' | 'session';
+  /** The plan's recording storage, e.g. "100 GB"; named on the device page. */
+  capacity?: string | null;
+  className?: string;
+}
+
+/** The banner shown while the tenant's recording storage is full. */
+export function RemoteSessionStorageAlert({ scope, capacity, className }: RemoteSessionStorageAlertProps) {
+  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 (
+    <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,
+      )}
+    >
+      <AlertTriangleIcon size={24} color="currentColor" className="shrink-0" />
+      <p className="min-w-0 flex-1 text-h3">{message}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { Chevron02DownIcon, Chevron02UpIcon } from '../../icons-v2-generated';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown-menu';
+import { SquareAvatar } from '../../ui/square-avatar';
+import type { RemoteSessionViewer } from './types';
+
+function viewerLabel(viewer: RemoteSessionViewer): string {
+  if (viewer.isHost) return `${viewer.name} (host)`;
+  if (viewer.isYou) return `${viewer.name} (you)`;
+  return viewer.name;
+}
+
+/** The host first, everyone else in the order the backend reports them. */
+function hostFirst(viewers: RemoteSessionViewer[]): RemoteSessionViewer[] {
+  return [...viewers.filter(viewer => viewer.isHost), ...viewers.filter(viewer => !viewer.isHost)];
+}
+
+export interface RemoteSessionViewersProps {
+  /** Everyone in the session, the host included. */
+  viewers: RemoteSessionViewer[];
+  /** Faces shown before the rest collapse into "+N". */
+  max?: number;
+  className?: string;
+}
+
+/**
+ * Who is in a live session: an avatar stack (the host ringed in the accent
+ * colour) that opens the full list. Shown to the host, to the watchers and to
+ * the end user.
+ */
+export function RemoteSessionViewers({ viewers, max = 4, className }: RemoteSessionViewersProps) {
+  const [open, setOpen] = useState(false);
+  if (viewers.length === 0) return null;
+
+  const ordered = hostFirst(viewers);
+  const faces = ordered.slice(0, max);
+  const overflow = ordered.length - faces.length;
+  const Chevron = open ? Chevron02UpIcon : Chevron02DownIcon;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <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,
+        )}
+      >
+        <span className="flex items-center">
+          {faces.map((viewer, index) => (
+            <SquareAvatar
+              key={viewer.id}
+              variant="round"
+              sizePx={32}
+              src={viewer.avatarUrl ?? undefined}
+              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 }}
+            />
+          ))}
+          {overflow > 0 && (
+            <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">
+              +{overflow}
+            </span>
+          )}
+        </span>
+        <span className="flex size-8 items-center justify-center rounded-md text-ods-text-primary">
+          <Chevron size={16} color="currentColor" />
+        </span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[280px] p-0">
+        {ordered.map(viewer => (
+          <DropdownMenuItem
+            key={viewer.id}
+            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',
+            )}
+          >
+            <SquareAvatar
+              variant="round"
+              sizePx={24}
+              src={viewer.avatarUrl ?? undefined}
+              alt=""
+              fallback={viewer.name}
+              className="shrink-0"
+            />
+            <span className="min-w-0 flex-1 truncate">{viewerLabel(viewer)}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -31,6 +31,32 @@ export interface RemoteSessionChatMessage {
 /** The terminal dialogs of a session: the end confirm and the two "it is over" notices. */
 export type RemoteSessionDialogVariant = 'end-confirm' | 'session-ended' | 'connection-lost';
 
+/** Someone in a live session: the technician running it (the host) or a colleague watching. */
+export interface RemoteSessionViewer {
+  id: string;
+  name: string;
+  avatarUrl?: string | null;
+  /** The technician running the session; listed first and ringed in the accent colour. */
+  isHost?: boolean;
+  /** The signed-in user, labelled "(you)" in the list. */
+  isYou?: boolean;
+}
+
+/** Where a remote session's recording is in its lifecycle, as the session list tags it. */
+export type RemoteSessionStatus = 'live' | 'processing' | 'failed';
+
+/** Why a recording is kept past its expiry date. */
+export type RemoteSessionKeepReason = 'CLIENT_DISPUTE' | 'INTERNAL_REVIEW' | 'LEGAL_OR_COMPLIANCE' | 'OTHER';
+
+/** A moment of the session, placed on the recording by its offset from the start. */
+export interface RemoteSessionEvent {
+  id: string;
+  /** Milliseconds from the start of the recording. */
+  offsetMs: number;
+  title: string;
+  detail?: string | null;
+}
+
 /**
  * Pointer handlers a host attaches to the surfaces the user moves the window
  * by (the desktop chat starts a native window drag from them).

package/src/types/announcement.ts

@@ -18,7 +18,7 @@ export interface Announcement {
   is_active: boolean;
   /** A one-line form of the title for tight spots (a hero's news pill). */
   short_title?: string | null;
-  /** Paths the bar is NOT shown on (exact match, e.g. `/`): the page shows the news itself. */
+  /** Path patterns the bar is NOT shown on (regular expressions matched against the whole path): the page shows the news itself. */
   excluded_paths?: string[] | null;
   // CTA (Call-To-Action) fields
   cta_enabled?: boolean;
@@ -248,11 +248,6 @@ export interface AnnouncementBarProps {
    * currentPlatform()).
    */
   initialAnnouncement?: Announcement | null;
-  /**
-   * The path the bar is rendered on. When the announcement lists it in
-   * `excluded_paths`, the bar stays collapsed. Omitted: never excluded.
-   */
-  pathname?: string | null;
   /**
    * Render-only mode for the admin live preview: no fetch/revalidation, inert
    * dismiss button, and no storage side effects (never writes dismissal

package/tailwind.config.ts

@@ -413,6 +413,11 @@ const config: Config = {
           '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: {
         'accordion-down': 'accordion-down 0.2s ease-out',
@@ -420,6 +425,7 @@ const config: Config = {
         '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',
+        'live-pulse': 'live-pulse 1.6s ease-in-out infinite',
       },
     },
   },