@agent-native/core 0.92.12 → 0.94.0

package/corpus/templates/design/app/components/design/multi-screen/frame-geometry.ts

@@ -5,6 +5,7 @@ import type { FrameGeometry, FrameGeometryById, Point } from "./types";
 const SCREEN_WIDTH = 320;
 const SCREEN_GAP = 56;
 const FRAME_LABEL_HEIGHT = 28;
+const BREAKPOINT_FRAME_GAP = 24;
 
 export interface BoundsRect {
   left: number;
@@ -18,6 +19,236 @@ export interface ScreenViewportSize {
   height: number;
 }
 
+type ResponsiveLayoutScreen = {
+  id?: string;
+  metadata?: ScreenViewportSize;
+  breakpointWidths?: readonly number[];
+  layoutGroupId?: string;
+};
+
+export function getResponsiveScreenGroupSize(
+  screen: ResponsiveLayoutScreen,
+  primaryGeometry?: Partial<FrameGeometry>,
+): {
+  width: number;
+  height: number;
+} {
+  const baseWidth = Math.max(1, primaryGeometry?.width ?? SCREEN_WIDTH);
+  const baseHeight = Math.max(
+    1,
+    primaryGeometry?.height ??
+      getOverviewFrameHeight(baseWidth, screen.metadata),
+  );
+  const sourceWidth = Math.max(1, screen.metadata?.width ?? 1280);
+  const sourceHeight = Math.max(1, screen.metadata?.height ?? 2560);
+  const scale = baseWidth / sourceWidth;
+  const breakpoints = (screen.breakpointWidths ?? []).filter(
+    (width) => Number.isFinite(width) && width > 0,
+  );
+  return {
+    width:
+      baseWidth +
+      breakpoints.reduce(
+        (total, width) => total + BREAKPOINT_FRAME_GAP + width * scale,
+        0,
+      ),
+    height: Math.max(
+      baseHeight,
+      ...breakpoints.map(
+        (width) => width * (sourceHeight / sourceWidth) * scale,
+      ),
+    ),
+  };
+}
+
+/**
+ * Bounds used by viewport culling for a screen and every responsive preview
+ * painted to its right. Culling only the persisted primary frame can evict a
+ * breakpoint that is still visibly on-screen after the user pans right.
+ *
+ * Rotated groups pivot around the primary frame, not around the wider row.
+ * Return an unrotated AABB so the generic culler cannot rotate around the
+ * wrong center and underestimate the painted region.
+ */
+export function getResponsiveScreenCullGeometry(
+  screen: ResponsiveLayoutScreen,
+  primaryGeometry: FrameGeometry,
+): FrameGeometry {
+  const size = getResponsiveScreenGroupSize(screen, primaryGeometry);
+  const rotation = primaryGeometry.rotation ?? 0;
+  if (!rotation) {
+    return {
+      ...primaryGeometry,
+      width: size.width,
+      height: size.height,
+      rotation: undefined,
+    };
+  }
+
+  const radians = (rotation * Math.PI) / 180;
+  const cosine = Math.cos(radians);
+  const sine = Math.sin(radians);
+  const pivot = {
+    x: primaryGeometry.x + primaryGeometry.width / 2,
+    y: primaryGeometry.y + primaryGeometry.height / 2,
+  };
+  const corners = [
+    { x: primaryGeometry.x, y: primaryGeometry.y },
+    { x: primaryGeometry.x + size.width, y: primaryGeometry.y },
+    { x: primaryGeometry.x, y: primaryGeometry.y + size.height },
+    {
+      x: primaryGeometry.x + size.width,
+      y: primaryGeometry.y + size.height,
+    },
+  ].map((point) => {
+    const dx = point.x - pivot.x;
+    const dy = point.y - pivot.y;
+    return {
+      x: pivot.x + dx * cosine - dy * sine,
+      y: pivot.y + dx * sine + dy * cosine,
+    };
+  });
+  const xs = corners.map((point) => point.x);
+  const ys = corners.map((point) => point.y);
+  const left = Math.min(...xs);
+  const right = Math.max(...xs);
+  const top = Math.min(...ys);
+  const bottom = Math.max(...ys);
+  return {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top,
+    rotation: undefined,
+    z: primaryGeometry.z,
+  };
+}
+
+/** Legacy three-column lineup with each cell reserving its complete responsive
+ * row. This prevents one generated variation's breakpoint frames from
+ * painting over the next variation while preserving the familiar grid. */
+export function getResponsiveInitialFrameGeometry(
+  index: number,
+  screens: readonly ResponsiveLayoutScreen[],
+  primaryGeometryById: Record<string, Partial<FrameGeometry> | undefined> = {},
+): FrameGeometry {
+  const columnCount = Math.min(3, Math.max(1, screens.length));
+  const column = index % columnCount;
+  const row = Math.floor(index / columnCount);
+  const primaryGeometryFor = (screen: ResponsiveLayoutScreen) =>
+    screen.id ? primaryGeometryById[screen.id] : undefined;
+  const sizes = screens.map((screen) =>
+    getResponsiveScreenGroupSize(screen, primaryGeometryFor(screen)),
+  );
+  const columnWidths = Array.from({ length: columnCount }, (_, columnIndex) =>
+    Math.max(
+      0,
+      ...sizes
+        .filter((_, screenIndex) => screenIndex % columnCount === columnIndex)
+        .map((size) => size.width),
+    ),
+  );
+  const rowCount = Math.ceil(screens.length / columnCount);
+  const rowHeights = Array.from({ length: rowCount }, (_, rowIndex) =>
+    Math.max(
+      0,
+      ...sizes
+        .slice(rowIndex * columnCount, (rowIndex + 1) * columnCount)
+        .map((size) => size.height),
+    ),
+  );
+  const own = screens[index];
+  const ownGeometry = own ? primaryGeometryFor(own) : undefined;
+  const ownWidth = Math.max(1, ownGeometry?.width ?? SCREEN_WIDTH);
+  const ownHeight = Math.max(
+    1,
+    ownGeometry?.height ?? getOverviewFrameHeight(ownWidth, own?.metadata),
+  );
+  return {
+    x: columnWidths
+      .slice(0, column)
+      .reduce((total, width) => total + width + SCREEN_GAP, 0),
+    y: rowHeights
+      .slice(0, row)
+      .reduce(
+        (total, height) => total + height + FRAME_LABEL_HEIGHT + SCREEN_GAP,
+        0,
+      ),
+    width: ownWidth,
+    height: ownHeight,
+  };
+}
+
+const GENERATED_VARIANT_GAP = 96;
+
+/** The present-design-variants action's historical three-column placement.
+ * Matching this exactly distinguishes untouched generated lineups from a
+ * designer's intentional custom arrangement. */
+function getGeneratedVariantInitialFrameGeometry(
+  index: number,
+  screens: readonly ResponsiveLayoutScreen[],
+): FrameGeometry {
+  const columnCount = Math.min(3, Math.max(1, screens.length));
+  const column = index % columnCount;
+  const row = Math.floor(index / columnCount);
+  const sizes = screens.map((screen) => ({
+    width: Math.max(1, screen.metadata?.width ?? 1280),
+    height: Math.max(1, screen.metadata?.height ?? 900),
+  }));
+  const rowStart = row * columnCount;
+  const own = sizes[index]!;
+  return {
+    x: sizes
+      .slice(rowStart, rowStart + column)
+      .reduce((total, size) => total + size.width + GENERATED_VARIANT_GAP, 0),
+    y: Array.from({ length: row }, (_, rowIndex) =>
+      Math.max(
+        0,
+        ...sizes
+          .slice(rowIndex * columnCount, (rowIndex + 1) * columnCount)
+          .map((size) => size.height),
+      ),
+    ).reduce((total, height) => total + height + GENERATED_VARIANT_GAP, 0),
+    width: own.width,
+    height: own.height,
+  };
+}
+
+function getResponsiveVariantGroupOriginY(
+  groupId: string,
+  screens: readonly (ResponsiveLayoutScreen & { id: string })[],
+  primaryGeometryById: Record<string, Partial<FrameGeometry> | undefined>,
+): number {
+  const groupIds = Array.from(
+    new Set(
+      screens
+        .map((screen) => screen.layoutGroupId)
+        .filter((id): id is string => Boolean(id)),
+    ),
+  );
+  let originY = 0;
+  for (const candidateGroupId of groupIds) {
+    if (candidateGroupId === groupId) return originY;
+    const groupScreens = screens.filter(
+      (screen) => screen.layoutGroupId === candidateGroupId,
+    );
+    const groupBottom = groupScreens.reduce((bottom, screen, index) => {
+      const frame = getResponsiveInitialFrameGeometry(
+        index,
+        groupScreens,
+        primaryGeometryById,
+      );
+      const groupSize = getResponsiveScreenGroupSize(
+        screen,
+        primaryGeometryById[screen.id],
+      );
+      return Math.max(bottom, frame.y + groupSize.height);
+    }, 0);
+    originY += groupBottom + FRAME_LABEL_HEIGHT + GENERATED_VARIANT_GAP;
+  }
+  return originY;
+}
+
 /** Canonical bottom-to-top screen stack. Persisted frame `z` wins; screens
  * without one retain their source order, which is also the canvas DOM paint
  * order. This is shared by the overview canvas and Layers projection so the
@@ -131,7 +362,12 @@ export function sameFrameGeometry(a: FrameGeometry, b: FrameGeometry): boolean {
 }
 
 export function resolveFrameGeometrySync(args: {
-  screens: ReadonlyArray<{ id: string; metadata?: ScreenViewportSize }>;
+  screens: ReadonlyArray<{
+    id: string;
+    metadata?: ScreenViewportSize;
+    breakpointWidths?: readonly number[];
+    layoutGroupId?: string;
+  }>;
   currentGeometryById: FrameGeometryById;
   persistedGeometryById:
     | Record<string, Partial<FrameGeometry> | undefined>
@@ -149,15 +385,126 @@ export function resolveFrameGeometrySync(args: {
   const next: FrameGeometryById = {};
   let changed = shouldNotifyParent;
 
+  const baseGeometryById = Object.fromEntries(
+    screens.map((screen) => [
+      screen.id,
+      persistedGeometryById?.[screen.id] ?? currentGeometryById[screen.id],
+    ]),
+  );
+
   screens.forEach((screen, index) => {
     const existing = currentGeometryById[screen.id];
     const persisted = persistedGeometryById?.[screen.id];
+    const legacyInitial = getInitialFrameGeometry(index, screen.metadata);
+    const layoutGroupScreens = screen.layoutGroupId
+      ? screens.filter(
+          (candidate) => candidate.layoutGroupId === screen.layoutGroupId,
+        )
+      : null;
+    const layoutGroupIndex = layoutGroupScreens?.findIndex(
+      (candidate) => candidate.id === screen.id,
+    );
+    const generatedGroupUntouched = Boolean(
+      layoutGroupScreens?.every((candidate, candidateIndex) => {
+        const baseline = getGeneratedVariantInitialFrameGeometry(
+          candidateIndex,
+          layoutGroupScreens,
+        );
+        const candidateGeometry =
+          persistedGeometryById?.[candidate.id] ??
+          currentGeometryById[candidate.id];
+        return (
+          candidateGeometry?.x === baseline.x &&
+          candidateGeometry?.y === baseline.y
+        );
+      }),
+    );
+    const variantGroupOriginY = screen.layoutGroupId
+      ? getResponsiveVariantGroupOriginY(
+          screen.layoutGroupId,
+          screens,
+          baseGeometryById,
+        )
+      : 0;
+    const responsiveInitial =
+      layoutGroupScreens &&
+      layoutGroupIndex !== undefined &&
+      layoutGroupIndex >= 0
+        ? {
+            ...getResponsiveInitialFrameGeometry(
+              layoutGroupIndex,
+              layoutGroupScreens,
+              baseGeometryById,
+            ),
+            y:
+              getResponsiveInitialFrameGeometry(
+                layoutGroupIndex,
+                layoutGroupScreens,
+                baseGeometryById,
+              ).y + variantGroupOriginY,
+          }
+        : getResponsiveInitialFrameGeometry(index, screens, baseGeometryById);
+    const generatedVariantInitial =
+      layoutGroupScreens &&
+      layoutGroupIndex !== undefined &&
+      layoutGroupIndex >= 0
+        ? getGeneratedVariantInitialFrameGeometry(
+            layoutGroupIndex,
+            layoutGroupScreens,
+          )
+        : null;
+    const persistedUsesGeneratedVariantLineup =
+      Boolean(screen.breakpointWidths?.length) &&
+      generatedGroupUntouched &&
+      generatedVariantInitial !== null &&
+      persisted?.x === generatedVariantInitial.x &&
+      persisted?.y === generatedVariantInitial.y &&
+      (responsiveInitial.x !== generatedVariantInitial.x ||
+        responsiveInitial.y !== generatedVariantInitial.y);
+    const existingUsesGeneratedVariantLineup =
+      !persisted &&
+      Boolean(screen.breakpointWidths?.length) &&
+      generatedGroupUntouched &&
+      generatedVariantInitial !== null &&
+      existing?.x === generatedVariantInitial.x &&
+      existing?.y === generatedVariantInitial.y &&
+      (responsiveInitial.x !== generatedVariantInitial.x ||
+        responsiveInitial.y !== generatedVariantInitial.y);
+    const persistedUsesLegacyLineup =
+      Boolean(screen.breakpointWidths?.length) &&
+      (responsiveInitial.x !== legacyInitial.x ||
+        responsiveInitial.y !== legacyInitial.y) &&
+      persisted?.x === legacyInitial.x &&
+      persisted?.y === legacyInitial.y;
+    const existingUsesLegacyLineup =
+      !persisted &&
+      Boolean(screen.breakpointWidths?.length) &&
+      (responsiveInitial.x !== legacyInitial.x ||
+        responsiveInitial.y !== legacyInitial.y) &&
+      existing?.x === legacyInitial.x &&
+      existing?.y === legacyInitial.y;
     const resolved = {
-      ...getInitialFrameGeometry(index, screen.metadata),
+      ...responsiveInitial,
       ...persisted,
+      ...(persistedUsesLegacyLineup || persistedUsesGeneratedVariantLineup
+        ? { x: responsiveInitial.x, y: responsiveInitial.y }
+        : null),
     } as FrameGeometry;
-    next[screen.id] = persisted ? resolved : (existing ?? resolved);
+    next[screen.id] = persisted
+      ? resolved
+      : existingUsesLegacyLineup || existingUsesGeneratedVariantLineup
+        ? { ...existing, x: responsiveInitial.x, y: responsiveInitial.y }
+        : (existing ?? resolved);
     if (!existing) changed = true;
+    if (
+      persistedUsesLegacyLineup ||
+      existingUsesLegacyLineup ||
+      persistedUsesGeneratedVariantLineup ||
+      existingUsesGeneratedVariantLineup
+    ) {
+      changed = true;
+      shouldNotifyParent = true;
+    }
     if (persisted && !sameFrameGeometry(existing ?? resolved, resolved)) {
       changed = true;
       shouldNotifyParent = true;

package/corpus/templates/design/app/components/design/multi-screen/overview-layout.ts

@@ -26,6 +26,19 @@ export interface LineupRecenterDuplicateArm {
   addedCount: number;
 }
 
+/** An explicit bounds-fit command owns the next camera commit. The automatic
+ * screen-count lineup recenter must stand down until that nonce is handled or
+ * it can briefly paint the all-screens camera before the requested target fit. */
+export function shouldDeferLineupRecenterToCameraCommand(args: {
+  cameraCommandNonce?: number;
+  lastHandledCameraCommandNonce: number | null;
+}): boolean {
+  return (
+    args.cameraCommandNonce !== undefined &&
+    args.cameraCommandNonce !== args.lastHandledCameraCommandNonce
+  );
+}
+
 export function shouldSuppressLineupRecenter(args: {
   armed: LineupRecenterDuplicateArm | null;
   nowMs: number;

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -34,6 +34,8 @@ export interface ScreenFile {
   url?: string;
   previewUrl?: string;
   bridgeUrl?: string;
+  /** Stable persisted connection scope for URL-backed local/Fusion screens. */
+  connectionId?: string;
   /** Read-only localhost preview credential. Never a filesystem token. */
   previewToken?: string;
   /**
@@ -44,6 +46,9 @@ export interface ScreenFile {
   breakpointWidths?: number[];
   /** Id of the currently active breakpoint frame for this screen. */
   activeBreakpointWidth?: number;
+  /** Generated variation-set membership. Used only to preserve/reflow the
+   * action-authored lineup when responsive preview rows are introduced. */
+  layoutGroupId?: string;
 }
 
 export type ScreenSourceType = "localhost" | "fusion" | "inline";
@@ -180,6 +185,22 @@ export interface MultiScreenCanvasProps {
     metadata: ResolvedScreenMetadata,
     geometry: FrameGeometry,
   ) => ReactNode;
+  /**
+   * Renders the fully editable runtime for one responsive sub-frame. Keeping
+   * this separate from `renderScreenContent` prevents a breakpoint preview
+   * from falling back to the lightweight, pointer-inert thumbnail iframe.
+   */
+  renderBreakpointContent?: (
+    screen: ScreenFile,
+    metadata: ResolvedScreenMetadata,
+    frame: {
+      widthPx: number;
+      viewportHeight: number;
+      displayWidth: number;
+      displayHeight: number;
+      active: boolean;
+    },
+  ) => ReactNode;
   onScreenSelectionChange?: (ids: string[]) => void;
   selectAllRequest?: number;
   clearSelectionRequest?: number;
@@ -217,7 +238,7 @@ export interface MultiScreenCanvasProps {
   ) => void;
   /**
    * STEVE TEST BATCH 3 item 8b — "full view" entry for one breakpoint frame
-   * in overview (double-click or its own full-view button): enter
+   * in overview (double-click or its own Interact button): enter
    * single-screen mode for the owning screen with this breakpoint width as
    * the active edit/viewport scope. Falls back to plain `onEdit` when unset
    * so existing callers keep working unchanged.

package/corpus/templates/design/app/components/design/types.ts

@@ -19,6 +19,10 @@ export interface RuntimeStructureMoveRequest {
   placement: "before" | "after" | "inside";
 }
 
+export interface RuntimeVerificationRequest {
+  requestId: number;
+}
+
 export interface ElementInfo {
   tagName: string;
   componentName?: string;

package/corpus/templates/design/app/components/design-system/ProductionDesignSystemShowcase.tsx

@@ -0,0 +1,208 @@
+import { useT } from "@agent-native/core/client";
+import {
+  IconExternalLink,
+  IconPlus,
+  IconRosetteDiscountCheck,
+} from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+import {
+  PRODUCTION_DESIGN_SYSTEM_TEMPLATES,
+  type DesignSystemTemplateId,
+  type ProductionDesignSystemTemplate,
+} from "../../../shared/design-system-templates";
+
+const descriptionKeys: Record<DesignSystemTemplateId, string> = {
+  "material-3": "designSystems.showcase.descriptions.material3",
+  "carbon-white": "designSystems.showcase.descriptions.carbon",
+  "primer-light": "designSystems.showcase.descriptions.primer",
+};
+
+export function ProductionDesignSystemShowcase({
+  pendingTemplateId,
+  onAdd,
+}: {
+  pendingTemplateId: DesignSystemTemplateId | null;
+  onAdd: (templateId: DesignSystemTemplateId) => void;
+}) {
+  const t = useT();
+
+  return (
+    <section aria-labelledby="production-design-systems-heading">
+      <div className="mb-4 flex max-w-2xl items-start gap-3">
+        <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40">
+          <IconRosetteDiscountCheck className="size-4 text-muted-foreground" />
+        </div>
+        <div>
+          <h2
+            id="production-design-systems-heading"
+            className="text-base font-semibold text-foreground"
+          >
+            {t("designSystems.showcase.title")}
+          </h2>
+          <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+            {t("designSystems.showcase.description")}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {PRODUCTION_DESIGN_SYSTEM_TEMPLATES.map((template) => {
+          const isPending = pendingTemplateId === template.id;
+          return (
+            <article
+              key={template.id}
+              className="overflow-hidden rounded-xl border border-border bg-card"
+            >
+              <ProductionSystemPreview template={template} />
+              <div className="p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+                    {template.organization}
+                  </span>
+                  <span className="truncate rounded-full border border-border bg-muted/40 px-2 py-0.5 font-mono !text-[10px] text-muted-foreground">
+                    {template.version}
+                  </span>
+                </div>
+                <h3 className="mt-3 text-sm font-semibold text-foreground">
+                  {template.title}
+                </h3>
+                <p className="mt-1 min-h-16 text-xs leading-relaxed text-muted-foreground">
+                  {t(descriptionKeys[template.id])}
+                </p>
+                <div className="mt-4 flex items-center gap-2">
+                  <Button
+                    type="button"
+                    size="sm"
+                    className="flex-1 cursor-pointer"
+                    disabled={pendingTemplateId !== null}
+                    onClick={() => onAdd(template.id)}
+                  >
+                    {isPending ? (
+                      <Spinner className="size-3.5" />
+                    ) : (
+                      <IconPlus className="size-3.5" />
+                    )}
+                    {isPending
+                      ? t("designSystems.showcase.adding")
+                      : t("designSystems.showcase.useTemplate")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="size-8"
+                    asChild
+                  >
+                    <a
+                      href={template.sourceUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={t("designSystems.showcase.openSource", {
+                        title: template.sourceLabel,
+                      })}
+                    >
+                      <IconExternalLink className="size-3.5" />
+                    </a>
+                  </Button>
+                </div>
+                <p className="mt-3 text-[10px] text-muted-foreground/70">
+                  {t("designSystems.showcase.license", {
+                    license: template.license,
+                  })}
+                </p>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function ProductionSystemPreview({
+  template,
+}: {
+  template: ProductionDesignSystemTemplate;
+}) {
+  if (template.id === "material-3") {
+    return (
+      <div
+        aria-hidden="true"
+        className="aspect-[16/9] border-b border-border p-4"
+        style={{ backgroundColor: template.data.colors.background }}
+      >
+        <div className="flex h-full flex-col rounded-[12px] bg-[#F3EDF7] p-3">
+          <div className="h-2 w-16 rounded-full bg-[#49454F]/35" />
+          <div className="mt-3 grid flex-1 grid-cols-[1fr_44px] gap-2">
+            <div className="rounded-[12px] bg-[#EADDFF] p-2">
+              <div className="h-2 w-3/4 rounded-full bg-[#21005D]/65" />
+              <div className="mt-2 h-2 w-1/2 rounded-full bg-[#21005D]/25" />
+            </div>
+            <div className="rounded-[16px] bg-[#7D5260]" />
+          </div>
+          <div className="mt-2 ms-auto h-6 w-20 rounded-full bg-[#6750A4]" />
+        </div>
+      </div>
+    );
+  }
+
+  if (template.id === "carbon-white") {
+    return (
+      <div
+        aria-hidden="true"
+        className="aspect-[16/9] border-b border-border bg-white"
+      >
+        <div className="flex h-8 items-center bg-[#161616] px-3">
+          <div className="h-2 w-14 bg-white/80" />
+          <div className="ms-auto h-2 w-8 bg-white/35" />
+        </div>
+        <div className="grid h-[calc(100%-2rem)] grid-cols-[32%_1fr]">
+          <div className="bg-[#F4F4F4] p-3">
+            <div className="h-2 w-full bg-[#525252]/35" />
+            <div className="mt-2 h-2 w-3/4 bg-[#525252]/20" />
+            <div className="mt-4 h-6 w-full bg-[#0F62FE]" />
+          </div>
+          <div className="p-3">
+            <div className="grid grid-cols-3 gap-px bg-[#E0E0E0]">
+              <div className="h-10 bg-white" />
+              <div className="h-10 bg-white" />
+              <div className="h-10 bg-white" />
+            </div>
+            <div className="mt-3 h-2 w-4/5 bg-[#161616]/70" />
+            <div className="mt-2 h-2 w-3/5 bg-[#525252]/30" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      aria-hidden="true"
+      className="aspect-[16/9] border-b border-border bg-white p-3"
+    >
+      <div className="flex h-full flex-col overflow-hidden rounded-md border border-[#D1D9E0]">
+        <div className="flex h-8 items-center border-b border-[#D1D9E0] bg-[#F6F8FA] px-2">
+          <div className="size-3 rounded-full bg-[#1F2328]" />
+          <div className="ms-2 h-2 w-16 rounded-full bg-[#1F2328]/55" />
+          <div className="ms-auto h-4 w-10 rounded-md border border-[#D1D9E0] bg-white" />
+        </div>
+        <div className="flex flex-1 flex-col justify-center gap-2 px-3">
+          <div className="flex items-center gap-2">
+            <div className="size-2 rounded-full bg-[#1A7F37]" />
+            <div className="h-2 w-3/5 rounded-full bg-[#1F2328]/70" />
+            <div className="ms-auto h-4 w-12 rounded-full bg-[#DDF4FF]" />
+          </div>
+          <div className="h-px bg-[#D8DEE4]" />
+          <div className="flex items-center gap-2">
+            <div className="size-2 rounded-full bg-[#0969DA]" />
+            <div className="h-2 w-2/5 rounded-full bg-[#59636E]/45" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}