@flamingo-stack/openframe-frontend-core 0.0.515 → 0.0.517-1651.4264.1

package/src/components/features/floating-walkthrough-video.tsx

@@ -698,7 +698,22 @@ export function FloatingWalkthroughVideo({
         // receives pointer events — the media layer is pointer-events-none, so
         // a group inside it can never match :hover.
         'group/card pointer-events-auto relative overflow-hidden rounded-lg border border-ods-border bg-ods-card shadow-2xl',
-        'aspect-video w-60 sm:w-80 transition-opacity duration-200',
+        // MOBILE = PiP dimensions, not a shrunken desktop card. This is an
+        // UNINVITED overlay on the smallest screens, so it is sized against
+        // the corner-PiP conventions, NOT against system PiP (which is
+        // user-invoked content and is allowed ~60% of the shortest edge):
+        //   - AOSP's legacy corner spec asks for 23% of screen width, then
+        //     clamps up to `default_minimal_size_pip_resizable_task` (108dp in
+        //     BOTH dimensions) — at 16:9 that floor IS 192x108, and on any
+        //     modern phone the clamp is what actually applies. Hence the cap.
+        //   - 192x108 lands at ~6% of a 390x844 screen, inside the "small
+        //     player" band (<=20% of screen) rather than the "large" one.
+        // 52vw keeps it proportional on narrow devices (320px -> 166x93) and
+        // the 192px cap takes over from ~369px up, i.e. on most phones.
+        // Do NOT go below ~150px: the corner chrome (32px transport pair +
+        // 32px dismiss + the title pill) stops fitting, and the card's own
+        // controls — not the poster — are what set the real floor here.
+        'aspect-video w-[min(52vw,192px)] sm:w-80 transition-opacity duration-200',
         footerHidden ? 'opacity-0 pointer-events-none' : 'opacity-100',
         className,
       )}
@@ -754,7 +769,9 @@ export function FloatingWalkthroughVideo({
           isClone={false}
           badge="play"
           fit="cover"
-          posterSizes="320px"
+          // Mirrors the card's own responsive width above — a flat 320px hint
+          // made every phone fetch a poster ~1.7x wider than the box.
+          posterSizes="(max-width: 639px) 192px, 320px"
           preload="none"
           hideMutedBadge
           onMutedFallbackChange={onCardFallbackChange}
@@ -804,7 +821,19 @@ export function FloatingWalkthroughVideo({
           unmounts and the same click lands on the hit layer and opens the
           theater. `size="icon-glyph"` keeps the glyph at its own 56px instead
           of the DS default `[&_svg]:h-5`; `variant="glyph"` means no button
-          surface paints behind a glyph that already carries its own scrim. */}
+          surface paints behind a glyph that already carries its own scrim.
+
+          BELOW `sm` IT IS NOT RENDERED — see the corner mute button's
+          mirrored `sm:hidden` below; the two form ONE breakpoint switch and
+          must always be edited together. At the mobile PiP height (~108px)
+          the 56px glyph physically cannot clear both the 32px transport band
+          and the title pill: the three need ~124px of vertical stack, which
+          16:9 does not give back until the card is ~224px wide — i.e. barely
+          smaller than the oversized card this sizing exists to fix. Nothing
+          is lost, because the ONLY state that shows this glyph is resume mode
+          (`cardMode !== 'poster'`), and resume mode always mounts the corner
+          transport pair, which offers the same play AND unmute actions at
+          32px — above the 24px WCAG 2.5.8 (AA) target floor. */}
       {showBigUnmute && (
         <Button
           variant="glyph"
@@ -813,7 +842,7 @@ export function FloatingWalkthroughVideo({
           title={controlIsPlay ? 'Play' : 'Unmute'}
           onPointerDown={e => e.stopPropagation()}
           onClick={onUnmuteOrPlay}
-          className="absolute inset-0 z-30 m-auto"
+          className="absolute inset-0 z-30 m-auto hidden sm:inline-flex"
         >
           {controlIsPlay ? <VideoPlayBadge /> : <VideoUnmuteGlyph />}
         </Button>
@@ -827,7 +856,14 @@ export function FloatingWalkthroughVideo({
       {showPlaybackControls && (
         <div className="absolute left-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] z-30 flex items-center gap-[var(--spacing-system-xxs)]">
           {/* Hidden while the big centre glyph owns unmuting, so the two are
-              never on screen with the same label and different behaviour. */}
+              never on screen with the same label and different behaviour —
+              but ONLY from `sm` up, because below `sm` that glyph is not
+              rendered at all (see its comment above). `sm:hidden`, not
+              `hidden`: a plain `hidden` here would combine with the glyph's
+              own `hidden sm:inline-flex` to leave the mobile card with NO
+              unmute affordance whatsoever — precisely the self-hiding dead
+              end called out in the state-model note at the top of this file.
+              These two classNames are ONE switch; never change one alone. */}
           <Button
             variant="overlay"
             size="icon-sm"
@@ -835,7 +871,7 @@ export function FloatingWalkthroughVideo({
             title={cardMuted ? 'Unmute' : 'Mute'}
             onPointerDown={e => e.stopPropagation()}
             onClick={onToggleMute}
-            className={cn(showBigUnmute && !controlIsPlay && 'hidden')}
+            className={cn(showBigUnmute && !controlIsPlay && 'sm:hidden')}
           >
             {cardMuted ? <VolumeXmarkIcon /> : <VolumeUpIcon />}
           </Button>

package/src/components/ui/test-run.tsx

@@ -2,7 +2,8 @@
 
 import type { ColumnDef, Row } from '@tanstack/react-table'
 import * as React from 'react'
-import { SearchIcon } from '../icons-v2-generated'
+import { Copy02Icon, SearchIcon } from '../icons-v2-generated'
+import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard'
 import { cn } from '../../utils/cn'
 import { formatTime } from '../../utils/format-date'
 import { DataTable } from './data-table'
@@ -10,6 +11,7 @@ import { useDataTable } from './data-table/use-data-table'
 import { NoData } from './no-data'
 import type { QueryResultRow } from './query-report-table'
 import { ScrollShadow } from './scroll-fade'
+import { Tag } from './tag'
 
 /*
  * Live test-run building blocks: the UI (timing stats, one-row skeleton,
@@ -129,15 +131,37 @@ export interface TestRunResultsProps {
   className?: string
 }
 
+/** Red error banner with a copy-to-clipboard action, per the test-run design. */
+export function TestRunErrorBanner({ error, className }: { error: string; className?: string }) {
+  const { copy } = useCopyToClipboard({ successDescription: 'Error message copied to clipboard' })
+  return (
+    <div
+      role="alert"
+      className={cn(
+        'flex items-center justify-between gap-[var(--spacing-system-s)]',
+        'rounded-[6px] border border-ods-error bg-ods-error-secondary',
+        'px-[var(--spacing-system-mf)] py-[var(--spacing-system-s)]',
+        className,
+      )}
+    >
+      <p className="text-h4 text-ods-error min-w-0 break-words">{error}</p>
+      <button
+        type="button"
+        aria-label="Copy error message"
+        onClick={() => copy(error)}
+        className="shrink-0 text-ods-error hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus rounded-sm"
+      >
+        <Copy02Icon className="size-5" />
+      </button>
+    </div>
+  )
+}
+
 /** Error line + empty state + result table for a finished/running test run. */
 export function TestRunResults({ isActive, displayRows, firstError, className }: TestRunResultsProps) {
   return (
     <div className={cn('flex flex-col gap-[var(--spacing-system-xsf)]', className)}>
-      {firstError && (
-        <p role="alert" className="text-h6 text-ods-error">
-          {firstError}
-        </p>
-      )}
+      {firstError && <TestRunErrorBanner error={firstError} />}
       {!isActive && displayRows.length === 0 ? (
         // With zero rows the error line alone explains the outcome; a
         // "No results returned" empty state next to it would mislead.
@@ -164,6 +188,30 @@ export function TimingStat({ value, label, className }: { value: string; label:
   )
 }
 
+/** Overall run outcome shown in a test-run controls row. */
+export type TestRunStatus = 'idle' | 'running' | 'success' | 'error'
+
+const TEST_RUN_STATUS_TAGS: Record<Exclude<TestRunStatus, 'idle'>, { label: string; variant: 'warning' | 'success' | 'error' }> = {
+  running: { label: 'IN PROCESS', variant: 'warning' },
+  success: { label: 'SUCCESS', variant: 'success' },
+  error: { label: 'ERROR', variant: 'error' },
+}
+
+/** Status stat cell: "-" before the first run, then a colored state tag. */
+export function TestRunStatusStat({ status, className }: { status: TestRunStatus; className?: string }) {
+  const tag = status === 'idle' ? null : TEST_RUN_STATUS_TAGS[status]
+  return (
+    <div className={cn('flex flex-col justify-center items-start min-w-0 gap-[var(--spacing-system-xxs)]', className)}>
+      {tag ? (
+        <Tag label={tag.label} variant={tag.variant} className="pointer-events-none" />
+      ) : (
+        <span className="text-h4 text-ods-text-secondary truncate">-</span>
+      )}
+      <span className="text-h6 text-ods-text-secondary truncate">Status</span>
+    </div>
+  )
+}
+
 /**
  * The transport-side contract `useTestRunState` observes. Matches the shape
  * of a live-campaign hook (e.g. Fleet live queries in OpenFrame) without
@@ -248,6 +296,10 @@ export function useTestRunState(campaign: TestRunCampaignState) {
 
   const firstError = isFinished && campaign.errors.length > 0 ? campaign.errors[0].error : null
 
+  // Overall run outcome for the Status stat: '-' until a run starts, then
+  // IN PROCESS while active, and SUCCESS/ERROR once the campaign finishes.
+  const status: TestRunStatus = isActive ? 'running' : hasRun && isFinished ? (firstError ? 'error' : 'success') : 'idle'
+
   // Started/Duration show zeros until the current run's timing is real:
   // hasRun=false after a reset, and campaignStatus resets while the next
   // run is being created, so stale values never linger on screen.
@@ -271,6 +323,7 @@ export function useTestRunState(campaign: TestRunCampaignState) {
     isActive,
     isFinished,
     showResults,
+    status,
     firstError,
     startedLabel,
     durationLabel,

package/src/stories/TestRun.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { TestResultsSkeleton, TestRunResults, TimingStat } from '../components/ui/test-run';
+import { TestResultsSkeleton, TestRunResults, TestRunStatusStat, TimingStat } from '../components/ui/test-run';
 
 const meta = {
   title: 'UI/TestRun',
@@ -85,7 +85,7 @@ export const EmptyResult: Story = {
   ),
 };
 
-/** Finished with an error: the alert line replaces the empty state. */
+/** Finished with an error: red banner with a copy action replaces the empty state. */
 export const WithError: Story = {
   args: {
     isActive: false,
@@ -111,8 +111,26 @@ export const TimingAndSkeleton: Story = {
       <div className="flex items-center gap-[var(--spacing-system-m)]">
         <TimingStat value="02:15 PM" label="Started" className="flex-1" />
         <TimingStat value="00:00:05" label="Duration" className="flex-1" />
+        <TestRunStatusStat status="running" className="flex-1" />
       </div>
       <TestResultsSkeleton />
     </div>
   ),
 };
+
+/** The four Status stat states: "-" before a run, then a colored tag. */
+export const StatusStates: Story = {
+  args: {
+    isActive: false,
+    displayRows: [],
+    firstError: null,
+  },
+  render: () => (
+    <div className="flex max-w-[720px] items-center gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-mf)]">
+      <TestRunStatusStat status="idle" />
+      <TestRunStatusStat status="running" />
+      <TestRunStatusStat status="success" />
+      <TestRunStatusStat status="error" />
+    </div>
+  ),
+};