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

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/components/navigation/app-layout-drawer.tsx

@@ -6,9 +6,6 @@ import {
   type CSSProperties,
   type ComponentPropsWithoutRef,
   type ComponentRef,
-  type KeyboardEvent,
-  type PointerEvent,
-  type RefObject,
   createContext,
   forwardRef,
   useCallback,
@@ -18,8 +15,8 @@ import {
   useState,
 } from 'react';
 
+import { useResizablePanelSize } from '../../hooks/ui/use-resizable-panel-size';
 import { cn } from '../../utils/cn';
-import { clamp } from '../../utils/common';
 import {
   DrawerBody,
   DrawerDescription,
@@ -29,6 +26,7 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from '../ui/drawer';
+import { PanelResizeHandle } from '../ui/panel-resize-handle';
 import {
   type AppLayoutDrawerHandle,
   useAppLayoutDrawerContainer,
@@ -216,25 +214,8 @@ const HORIZONTAL_SIDES: ReadonlySet<DrawerSide> = new Set(['left', 'right']);
  */
 const PERSIST_CLOSED_HOLD = 'data-[state=closed]:fill-mode-forwards';
 
-interface UseContainedResizableSizeArgs {
-  enabled: boolean;
-  isHorizontal: boolean;
-  minSize: number;
-  maxSize: number;
-  defaultSize: number;
-  storageKey?: string;
-  container: HTMLElement | null;
-}
-
-function useContainedResizableSize({
-  enabled,
-  isHorizontal,
-  minSize,
-  maxSize,
-  defaultSize,
-  storageKey,
-  container,
-}: UseContainedResizableSizeArgs) {
+/** Room the portal container gives the panel along its resize axis, in px. */
+function useContainerExtent(enabled: boolean, isHorizontal: boolean, container: HTMLElement | null): number {
   const [available, setAvailable] = useState(0);
 
   useEffect(() => {
@@ -248,216 +229,7 @@ function useContainedResizableSize({
     return () => ro.disconnect();
   }, [enabled, container, isHorizontal]);
 
-  const clampToContainer = useCallback(
-    (value: number) => {
-      // Reserve 40px (the `system-m` outside-edge padding from the wrapper
-      // plus a matching gap on the inside edge) so the panel sits symmetrically
-      // inside the container. This also keeps the resize grip on-screen at
-      // maximum extent.
-      const effectiveMax = available > 0 ? Math.min(maxSize, available - 40) : maxSize;
-      return clamp(value, minSize, Math.max(minSize, effectiveMax));
-    },
-    [available, minSize, maxSize],
-  );
-
-  const readInitial = useCallback(() => {
-    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] = useState<number>(readInitial);
-
-  // Re-clamp the stored size whenever the container resizes so a previously
-  // saved size never overflows after the user shrinks the viewport.
-  //
-  // Clamped where it is READ rather than written back into state from an
-  // effect: `available` is already state (the ResizeObserver above owns it), so
-  // the container shrinking re-renders regardless — and deriving here means the
-  // panel is never painted overflowing its container for the frame between the
-  // resize and the corrective commit. Keeping the raw value also means widening
-  // the viewport again restores the size the user actually chose, instead of
-  // leaving it permanently trimmed to the narrowest width ever seen.
-  const size = enabled ? clampToContainer(rawSize) : rawSize;
-
-  const setSize = useCallback((next: number) => setSizeRaw(clampToContainer(next)), [clampToContainer]);
-
-  useEffect(() => {
-    if (!enabled || !storageKey || typeof window === 'undefined') return;
-    try {
-      window.localStorage.setItem(storageKey, String(Math.round(size)));
-    } catch {
-      // ignore quota / disabled-storage
-    }
-  }, [enabled, size, storageKey]);
-
-  return { size, setSize, clampSize: clampToContainer };
-}
-
-/** Ends a drawer resize drag: commits the size it reached and restores the
- *  page's cursor and text selection. No-op when no drag is in progress. */
-function finishDrag(
-  startRef: RefObject<{ x: number; y: number; size: number } | null>,
-  dragSizeRef: RefObject<number | null>,
-  commit: (size: number) => void,
-): void {
-  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 = '';
-}
-
-interface AppLayoutDrawerResizeHandleProps {
-  side: DrawerSide;
-  size: number;
-  minSize: number;
-  maxSize: number;
-  onSize: (next: number) => void;
-  /** Clamp a candidate size to the min/max and the container. */
-  clampSize: (next: number) => number;
-  /** The panel the size applies to — written directly while dragging. */
-  panelRef: RefObject<HTMLDivElement | null>;
-  ariaLabel?: string;
-}
-
-function AppLayoutDrawerResizeHandle({
-  side,
-  size,
-  minSize,
-  maxSize,
-  onSize,
-  clampSize,
-  panelRef,
-  ariaLabel,
-}: AppLayoutDrawerResizeHandleProps) {
-  const isHorizontal = HORIZONTAL_SIDES.has(side);
-  const startRef = useRef<{ x: number; y: number; size: number } | null>(null);
-  // Size reached by the drag in progress, committed to React state on release.
-  const dragSizeRef = useRef<number | null>(null);
-  const onSizeRef = useRef(onSize);
-  useEffect(() => {
-    onSizeRef.current = onSize;
-  }, [onSize]);
-  // The handle can unmount mid-drag (a persist-mode drawer closing), and then
-  // no pointer event ends the drag: end it here, or the panel keeps a width
-  // React state never received and the page keeps the resize cursor.
-  useEffect(() => () => finishDrag(startRef, dragSizeRef, onSizeRef.current), []);
-
-  const direction = side === 'right' || side === 'bottom' ? -1 : 1;
-
-  const handlePointerDown = (e: PointerEvent<HTMLDivElement>) => {
-    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';
-  };
-
-  // The drag writes the panel's size straight to the DOM and commits it to
-  // state once, on release. Committing every pointermove re-rendered the
-  // drawer per event — ~16% of a drag's CPU in WebKit on top of the reflow the
-  // resize itself costs. ResizeObserver consumers inside the panel still see
-  // every change. A re-render of the drawer mid-drag (e.g. a streamed chunk)
-  // does not undo the write: React diffs against its previous render, where
-  // the size is unchanged, so it leaves the style alone.
-  const handlePointerMove = (e: PointerEvent<HTMLDivElement>) => {
-    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: PointerEvent<HTMLDivElement>) => {
-    if (!startRef.current) return;
-    finishDrag(startRef, dragSizeRef, onSize);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-      // ignore — pointer may already be released
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    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 (
-    <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,
-      )}
-    >
-      <div aria-hidden className={cn('rounded-full bg-ods-border', gripClass)} />
-    </div>
-  );
+  return available;
 }
 
 export interface AppLayoutDrawerContentProps
@@ -628,14 +400,18 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
     }, [mobileBreakpoint]);
 
     const panelRef = useRef<HTMLDivElement>(null);
-    const { size, setSize, clampSize } = useContainedResizableSize({
+    // Reserve 40px (the `system-m` outside-edge padding from the wrapper plus a
+    // matching gap on the inside edge) so the panel sits symmetrically inside
+    // the container and the resize grip stays on screen at maximum extent.
+    const available = useContainerExtent(resizable, isHorizontal, portalContainer);
+    const { size, setSize, clampSize } = useResizablePanelSize({
       enabled: resizable,
-      isHorizontal,
       minSize,
       maxSize,
       defaultSize: initialSize,
+      available,
+      reserve: 40,
       storageKey,
-      container: portalContainer,
     });
 
     const applyInlineSize = resizable && !isMobile;
@@ -707,7 +483,8 @@ const AppLayoutDrawerContent = forwardRef<ComponentRef<typeof DialogPrimitive.Co
               at the container edge. In persist mode it's also non-interactive
               while closed, so drop it entirely until the panel reopens. */}
           {applyInlineSize && (!persist || open) ? (
-            <AppLayoutDrawerResizeHandle
+            <PanelResizeHandle
+              variant="inLayout"
               side={resolvedSide}
               size={size}
               minSize={minSize}