21961208242

Committed 12 Feb 2026 07:29PM UTC coverage: 51.569% (-13.4%) from 64.947%

Build # 21961208242

Build Type

push

github

Committed by

web-flow

Commit Message

feat: complete Expo → Capacitor/Vite migration (#130)

## Summary

Full framework migration from Expo/React Native to Vite + Capacitor + React Router:

- **Framework**: Expo SDK 52 → Vite 6 + Capacitor 7
- **Routing**: expo-router → react-router-dom v7
- **Styling**: NativeWind → Tailwind CSS v4
- **Testing**: Jest → Vitest + @testing-library/react
- **Components**: React Native primitives → HTML/JSX (View→div, Text→span, etc.)
- **Build**: Metro bundler → Vite with HMR

### Key changes
- Removed all React Native and Expo dependencies
- Migrated 50+ components from RN to web HTML/JSX
- Rewrote 70 test files (844 tests passing)
- Replaced deploy-gh-pages.yml: Astro docs → Vite static site deployment
- Added android-release.yml: per-architecture debug APKs on GitHub releases
- Added ABI splits to build.gradle (armeabi-v7a, arm64-v8a, x86_64, universal)
- Fixed all biome lint, TypeScript, and E2E test issues
- Deleted dead `app/` directory (old Expo Router screens)

### CI Status
All critical checks passing: Lint & Type Check, Run Tests (844 passing), Build Web, Build Web + Capacitor Sync, E2E Tests (Web), Security Scan, CodeQL, Validate PR.

Run Details

1329 of 2944 branches covered (45.14%)

Branch coverage included in aggregate %.

138 of 866 new or added lines in 82 files covered. (15.94%)

120 existing lines in 23 files now uncovered.

2188 of 3876 relevant lines covered (56.45%)

9.8 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/onboarding/DeviceCodeDisplay.tsx

/**
 * DeviceCodeDisplay
 *
 * Shows the device code for GitHub Device Flow authentication,
 * with a button to open GitHub.
 */

import { LinkIcon } from '@/components/icons';
import { VStack } from '@/components/layout';
import { Text } from '@/components/ui';
import { organicBorderRadius } from '@/lib/organic-styles';

interface DeviceCodeDisplayProps {
  userCode: string | null;
  isAuthenticating: boolean;
  onStartDeviceFlow: () => void;
  onOpenGitHub: () => void;
  onCheckAuth: () => void;
}

export function DeviceCodeDisplay({
  userCode,
  isAuthenticating,
  onStartDeviceFlow,
  onOpenGitHub,
  onCheckAuth,
}: Readonly<DeviceCodeDisplayProps>) {
  if (!userCode) {
    return (
      <VStack spacing="lg">
        <div className="bg-surface p-6" style={organicBorderRadius.card}>
          <div className="items-center mb-4">
            <LinkIcon size={40} color="teal" turbulence={0.25} />
          </div>
          <Text weight="semibold" className="text-white text-center mb-2">
            Secure Device Flow
          </Text>
          <Text size="sm" className="text-neutral-400 text-center">
            We use GitHub's Device Flow authentication - your credentials are never shared with us.
          </Text>
        </div>

        <button
          type="button"
          onClick={onStartDeviceFlow}
          disabled={isAuthenticating}
          className={`bg-neutral-800 py-4 ${isAuthenticating ? 'opacity-70' : 'active:bg-neutral-700'}`}
          style={organicBorderRadius.cta}
        >
          {isAuthenticating ? (
            <div className="w-6 h-6 border-2 border-coral-500 border-t-transparent rounded-full animate-spin" />
          ) : (
            <Text weight="semibold" className="text-white text-center">
              Start GitHub Authentication
            </Text>
          )}
        </button>
      </VStack>
    );
  }

  return (
    <VStack spacing="lg">
      <div className="bg-surface p-6" style={organicBorderRadius.card}>
        <Text size="sm" className="text-neutral-400 text-center mb-2">
          Enter this code on GitHub:
        </Text>
        <Text
          variant="display"
          size="3xl"
          weight="bold"
          className="text-coral-500 text-center tracking-wider"
        >
          {userCode}
        </Text>
      </div>

      <button
        type="button"
        onClick={onOpenGitHub}
        className="bg-neutral-800 py-4 active:bg-neutral-700"
        style={organicBorderRadius.cta}
      >
        <Text weight="semibold" className="text-white text-center">
          Open GitHub →
        </Text>
      </button>

      <button
        type="button"
        onClick={onCheckAuth}
        disabled={isAuthenticating}
        className={`bg-teal-600 py-4 ${isAuthenticating ? 'opacity-70' : 'active:bg-teal-700'}`}
        style={organicBorderRadius.cta}
      >
        {isAuthenticating ? (
          <div className="w-6 h-6 border-2 border-coral-500 border-t-transparent rounded-full animate-spin" />
        ) : (
          <Text weight="semibold" className="text-white text-center">
            I've Entered the Code
          </Text>
        )}
      </button>
    </VStack>
  );
}

1	/**
2	* DeviceCodeDisplay
3	*
4	* Shows the device code for GitHub Device Flow authentication,
5	* with a button to open GitHub.
6	*/
7
8	import { LinkIcon } from '@/components/icons';
9	import { VStack } from '@/components/layout';
10	import { Text } from '@/components/ui';
11	import { organicBorderRadius } from '@/lib/organic-styles';
12
13	interface DeviceCodeDisplayProps {
14	userCode: string \| null;
15	isAuthenticating: boolean;
16	onStartDeviceFlow: () => void;
17	onOpenGitHub: () => void;
18	onCheckAuth: () => void;
19	}
20
21	export function DeviceCodeDisplay({
22	userCode,
23	isAuthenticating,
24	onStartDeviceFlow,
25	onOpenGitHub,
26	onCheckAuth,
27	}: Readonly<DeviceCodeDisplayProps>) {
UNCOV 28	if (!userCode) {	×
UNCOV 29	return (	×
30	<VStack spacing="lg">
31	<div className="bg-surface p-6" style={organicBorderRadius.card}>
32	<div className="items-center mb-4">
33	<LinkIcon size={40} color="teal" turbulence={0.25} />
34	</div>
35	<Text weight="semibold" className="text-white text-center mb-2">
36	Secure Device Flow
37	</Text>
38	<Text size="sm" className="text-neutral-400 text-center">
39	We use GitHub's Device Flow authentication - your credentials are never shared with us.
40	</Text>
41	</div>
42
43	<button
44	type="button"
45	onClick={onStartDeviceFlow}
46	disabled={isAuthenticating}
47	className={`bg-neutral-800 py-4 ${isAuthenticating ? 'opacity-70' : 'active:bg-neutral-700'}`}	×
48	style={organicBorderRadius.cta}
49	>
50	{isAuthenticating ? (	×
51	<div className="w-6 h-6 border-2 border-coral-500 border-t-transparent rounded-full animate-spin" />
52	) : (
53	<Text weight="semibold" className="text-white text-center">
54	Start GitHub Authentication
55	</Text>
56	)}
57	</button>
58	</VStack>
59	);
60	}
61
62	return (	×
63	<VStack spacing="lg">
64	<div className="bg-surface p-6" style={organicBorderRadius.card}>
65	<Text size="sm" className="text-neutral-400 text-center mb-2">
66	Enter this code on GitHub:
67	</Text>
68	<Text
69	variant="display"
70	size="3xl"
71	weight="bold"
72	className="text-coral-500 text-center tracking-wider"
73	>
74	{userCode}
75	</Text>
76	</div>
77
78	<button
79	type="button"
80	onClick={onOpenGitHub}
81	className="bg-neutral-800 py-4 active:bg-neutral-700"
82	style={organicBorderRadius.cta}
83	>
84	<Text weight="semibold" className="text-white text-center">
85	Open GitHub →
86	</Text>
87	</button>
88
89	<button
90	type="button"
91	onClick={onCheckAuth}
92	disabled={isAuthenticating}
93	className={`bg-teal-600 py-4 ${isAuthenticating ? 'opacity-70' : 'active:bg-teal-700'}`}	×
94	style={organicBorderRadius.cta}
95	>
96	{isAuthenticating ? (	×
97	<div className="w-6 h-6 border-2 border-coral-500 border-t-transparent rounded-full animate-spin" />
98	) : (
99	<Text weight="semibold" className="text-white text-center">
100	I've Entered the Code
101	</Text>
102	)}
103	</button>
104	</VStack>
105	);
106	}

agentic-dev-library / thumbcode / 21961208242

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous