Polish Swift app validation and visual catalog

.github/workflows/swift-visual.yml

@@ -0,0 +1,120 @@
+name: Swift Visual Screenshots
+
+on:
+  schedule:
+    - cron: "21 10 * * *"
+  workflow_dispatch:
+    inputs:
+      platform:
+        description: "Which visual suite to run"
+        required: true
+        default: both
+        type: choice
+        options:
+          - both
+          - ios
+          - ipad
+          - macos
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+
+env:
+  SCREENSHOT_ARTIFACT_DIR: artifacts/swift-visual-screenshots
+
+jobs:
+  visual-gate:
+    name: Check visual test prerequisites
+    runs-on: ubuntu-latest
+    outputs:
+      ready: ${{ steps.check.outputs.ready }}
+    steps:
+      - id: check
+        name: Verify E2E credentials are available
+        env:
+          E2E_TEST_EMAIL: ${{ secrets.E2E_TEST_EMAIL }}
+          E2E_TEST_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
+        run: |
+          if [ -n "$E2E_TEST_EMAIL" ] && [ -n "$E2E_TEST_PASSWORD" ]; then
+            echo "ready=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "ready=false" >> "$GITHUB_OUTPUT"
+            echo "::notice::Swift visual screenshots skipped because E2E_TEST_EMAIL/E2E_TEST_PASSWORD are not configured."
+          fi
+
+  swift-visual:
+    name: Swift visual suite
+    needs: visual-gate
+    if: needs.visual-gate.outputs.ready == 'true'
+    runs-on: macos-15
+    timeout-minutes: 90
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Select Xcode
+        run: |
+          sudo xcode-select -switch /Applications/Xcode.app
+          xcodebuild -version
+          xcrun --show-sdk-version
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install xcodegen
+        run: brew install xcodegen
+
+      - name: Install dependencies
+        env:
+          PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN: ${{ secrets.PACKRAT_NATIVEWIND_UI_GITHUB_TOKEN }}
+        run: bun install --frozen-lockfile
+
+      - name: Generate Xcode project
+        run: bun swift
+
+      - name: Boot iOS simulator
+        if: ${{ (github.event.inputs.platform || 'both') != 'macos' }}
+        run: |
+          DEVICE_ID=$(xcrun simctl create Swift-Visual "iPhone 17" \
+            "$(xcrun simctl list runtimes -j | jq -r '.runtimes[] | select(.identifier | contains("iOS-")) | .identifier' | sort -V | tail -1)")
+          xcrun simctl boot "$DEVICE_ID"
+          xcrun simctl bootstatus "$DEVICE_ID"
+
+      - name: Boot iPad simulator
+        if: ${{ (github.event.inputs.platform || 'both') == 'ipad' || (github.event.inputs.platform || 'both') == 'both' }}
+        run: |
+          DEVICE_ID=$(xcrun simctl list devices available -j \
+            | jq -r '[.devices[][] | select(.isAvailable == true and (.name | contains("iPad")))] | .[0].udid')
+          xcrun simctl boot "$DEVICE_ID" || true
+          xcrun simctl bootstatus "$DEVICE_ID"
+
+      - name: Check macOS Automation Mode
+        if: ${{ (github.event.inputs.platform || 'both') == 'macos' || (github.event.inputs.platform || 'both') == 'both' }}
+        run: automationmodetool help
+
+      - name: Capture Swift visual screenshots
+        env:
+          E2E_EMAIL: ${{ secrets.E2E_TEST_EMAIL }}
+          E2E_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
+          E2E_TEST_EMAIL: ${{ secrets.E2E_TEST_EMAIL }}
+          E2E_TEST_PASSWORD: ${{ secrets.E2E_TEST_PASSWORD }}
+          PACKRAT_VISUAL_XCODEBUILD_TIMEOUT_MS: "3600000"
+        run: |
+          PLATFORM="${{ github.event.inputs.platform || 'both' }}"
+          bun swift:screenshots --platform "$PLATFORM" --out "$SCREENSHOT_ARTIFACT_DIR"
+
+      - name: Upload contact sheets
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: swift-visual-screenshots
+          path: |
+            ${{ env.SCREENSHOT_ARTIFACT_DIR }}
+            apps/swift/TestResults/visual-*.xcresult
+          if-no-files-found: ignore
+          retention-days: 14

.gitignore

@@ -4,6 +4,7 @@ node_modules
 # output
 out
 dist
+artifacts/
 *.tgz
 
 # code coverage
@@ -21,6 +22,7 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 .env.test.local
 .env.production.local
 .env.local
+.env*.bak.*
 .envrc
 
 # caches
@@ -41,6 +43,8 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 .claude/worktrees/
 .claude/scheduled_tasks.lock
 .dev.vars
+.dev.vars.e2e
+.dev.vars*.bak.*
 
 # Generated OG images (produced at build time by scripts/generate-og-images.ts)
 apps/landing/public/og-image.png
@@ -58,7 +62,7 @@ apps/guides/public/og/
 apps/swift/xcconfig/*.local.xcconfig
 apps/swift/PackRat.xcodeproj/
 apps/swift/*.xcworkspace/xcuserdata/
-apps/swift/DerivedData/
+apps/swift/DerivedData*/
 apps/swift/.build/
 apps/swift/.swiftpm/
 apps/swift/Package.resolved

.maestro/flows/catalog/catalog-browse-flow.yaml

@@ -20,10 +20,10 @@ appId: ${APP_ID}
         text: "All"
     commands:
       - assertVisible:
-          text: ".*items.*"
+          id: "catalog:item-.*"
       - scrollUntilVisible:
           element:
-            text: "Showing.*items"
+            id: "catalog:item-.*"
           direction: DOWN
           timeout: 10000
           speed: 20

.maestro/flows/catalog/catalog-search-flow.yaml

@@ -33,7 +33,7 @@ appId: ${APP_ID}
       - assertVisible:
           text: "All"
       - assertVisible:
-          text: ".*items.*"
+          id: "catalog:item-.*"
       - tapOn:
           text: "Clothing"
       - waitForAnimationToEnd
@@ -43,4 +43,4 @@ appId: ${APP_ID}
           text: "All"
       - waitForAnimationToEnd
       - assertVisible:
-          text: ".*items.*"
+          id: "catalog:item-.*"

apps/expo/lib/utils/__tests__/getRelativeTime.test.ts

@@ -117,6 +117,18 @@ describe('getRelativeTime', () => {
     expect(t).toHaveBeenCalledWith('common.timeAgo.justNow');
   });
 
+  it('returns "Just now" for null timestamps without translation', () => {
+    expect(getRelativeTime({ dateValue: null })).toBe('Just now');
+  });
+
+  it('calls translate with singular unit counts', () => {
+    vi.setSystemTime(new Date('2024-01-01T12:01:00Z'));
+    const t = vi.fn((key: string, opts?: Record<string, unknown>) => `${key}:${opts?.count}`);
+    const result = getRelativeTime({ dateValue: '2024-01-01T12:00:00Z', t: t as never });
+    expect(t).toHaveBeenCalledWith('common.timeAgo.minutes', { count: 1 });
+    expect(result).toBe('common.timeAgo.minutes:1');
+  });
+
   it('accepts a Date object input', () => {
     vi.setSystemTime(new Date('2024-01-01T12:05:00Z'));
     const result = getRelativeTime({ dateValue: new Date('2024-01-01T12:00:00Z') });

apps/expo/package.json

@@ -30,6 +30,7 @@
     "format": "biome format --write",
     "ios": "APP_VARIANT=development expo run:ios",
     "lint": "biome check --write",
+    "screenshots:web": "bun run playwright/capture-web-screenshots.ts",
     "start": "APP_VARIANT=development EXPO_UNSTABLE_WEB_MODAL=1 expo start",
     "submit:android": "eas submit --platform android",
     "submit:ios": "eas submit --platform ios",

apps/expo/playwright/capture-web-screenshots.ts

@@ -0,0 +1,118 @@
+#!/usr/bin/env bun
+import { spawnSync } from 'node:child_process';
+import { mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { basename, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { chromium } from '@playwright/test';
+
+const REPO_ROOT = resolve(import.meta.dir, '../../..');
+const EXPO_DIR = resolve(REPO_ROOT, 'apps/expo');
+const OUT_DIR = resolve(REPO_ROOT, 'artifacts/screenshots');
+const WEB_DIR = resolve(OUT_DIR, 'web-playwright');
+const CONTACT_SHEET_HTML = resolve(OUT_DIR, 'web-contact-sheet.html');
+const CONTACT_SHEET_PNG = resolve(OUT_DIR, 'web-contact-sheet.png');
+
+rmSync(WEB_DIR, { recursive: true, force: true });
+mkdirSync(WEB_DIR, { recursive: true });
+
+const result = spawnSync(
+  'bunx',
+  [
+    'playwright',
+    'test',
+    '--config',
+    'playwright/playwright.visual.config.ts',
+    '--grep',
+    'Web visual screenshot matrix',
+  ],
+  {
+    cwd: EXPO_DIR,
+    env: {
+      ...process.env,
+      PACKRAT_VISUAL_SCREENSHOTS: '1',
+    },
+    stdio: 'inherit',
+  },
+);
+
+await renderContactSheet();
+
+if (result.status !== 0) {
+  process.exit(result.status ?? 1);
+}
+
+async function renderContactSheet() {
+  const screenshots = readdirSync(WEB_DIR)
+    .filter((file) => file.endsWith('.png'))
+    .sort()
+    .map((file) => resolve(WEB_DIR, file));
+  if (screenshots.length === 0) return;
+
+  const cards = screenshots
+    .map((file) => {
+      const src = pathToFileURL(file).href;
+      const label = stripSortPrefix(basename(file, '.png'))
+        .replaceAll('-', ' ')
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+      return `<figure><img src="${src}" /><figcaption>${escapeHtml(label)}</figcaption></figure>`;
+    })
+    .join('\n');
+
+  const html = `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<style>
+body { margin: 0; padding: 28px; background: #f5f5f7; color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
+h1 { margin: 0 0 22px; font-size: 22px; }
+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
+figure { margin: 0; padding: 10px; background: white; border: 1px solid #e5e5ea; border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
+img { display: block; width: 100%; border: 1px solid #eee; border-radius: 6px; }
+figcaption { padding-top: 8px; color: #6e6e73; font-size: 12px; }
+</style>
+</head>
+<body>
+<h1>PackRat Web Screens</h1>
+<main class="grid">${cards}</main>
+</body>
+</html>`;
+
+  writeFileSync(CONTACT_SHEET_HTML, html);
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({
+    viewport: { width: 1800, height: estimateHeight(screenshots) },
+  });
+  await page.goto(pathToFileURL(CONTACT_SHEET_HTML).href);
+  await page.screenshot({ path: CONTACT_SHEET_PNG, fullPage: true });
+  await browser.close();
+
+  const bytes = readFileSync(CONTACT_SHEET_PNG).byteLength;
+  console.log(`✓ Wrote ${CONTACT_SHEET_PNG} (${Math.round(bytes / 1024)} KB)`);
+}
+
+function estimateHeight(screenshots: string[]): number {
+  return Math.max(1200, Math.ceil(screenshots.length / 3) * 700 + 120);
+}
+
+function escapeHtml(value: string): string {
+  return Array.from(value, (char) => {
+    if (char === '&') return '&amp;';
+    if (char === '<') return '&lt;';
+    if (char === '>') return '&gt;';
+    if (char === '"') return '&quot;';
+    if (char === "'") return '&#39;';
+    return char;
+  }).join('');
+}
+
+function stripSortPrefix(value: string): string {
+  let index = 0;
+  while (index < value.length) {
+    const code = value.charCodeAt(index);
+    if (code < 48 || code > 57) break;
+    index += 1;
+  }
+  return value.charAt(index) === '-' ? value.slice(index + 1) : value;
+}

apps/expo/playwright/playwright.visual.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:8081';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  workers: 1,
+  reporter: [['list']],
+  use: {
+    baseURL: BASE_URL,
+    headless: true,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});