build: 55712324-398e-4334-a254-fc30c84b2e47

2026-05-22 11:33:04 +00:00
commit 1ae99a0d6c
80 changed files with 6034 additions and 0 deletions
@@ -0,0 +1 @@
+nodeLinker: node-modules
@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
@@ -0,0 +1,54 @@
+apply plugin: 'com.android.application'
+
+android {
+    namespace = "io.ionic.starter"
+    compileSdk = rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.ionic.starter"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation|density"
+            android:name=".MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>
@@ -0,0 +1,5 @@
+package io.ionic.starter;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}
@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">app</string>
+    <string name="title_activity_main">app</string>
+    <string name="package_name">io.ionic.starter</string>
+    <string name="custom_url_scheme">io.ionic.starter</string>
+</resources>
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>
@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}
@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath 'com.google.gms:google-services:4.4.4'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
@@ -0,0 +1,22 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 24
+    compileSdkVersion = 36
+    targetSdkVersion = 36
+    androidxActivityVersion = '1.11.0'
+    androidxAppCompatVersion = '1.7.1'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.17.0'
+    androidxFragmentVersion = '1.8.9'
+    coreSplashScreenVersion = '1.2.0'
+    androidxWebkitVersion = '1.14.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.3.0'
+    androidxEspressoCoreVersion = '3.7.0'
+    cordovaAndroidVersion = '14.0.1'
+}
@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: 'app',
+  webDir: 'dist',
+};
+
+export default config;
@@ -0,0 +1,52 @@
+workflows:
+  android-debug:
+    name: Android – Debug APK
+    max_build_duration: 45
+    instance_type: mac_mini_m2
+    environment:
+      node: 22
+      java: 21
+    cache:
+      cache_paths:
+        - $HOME/.gradle/caches
+        - $HOME/.gradle/wrapper
+    scripts:
+      - name: Install dependencies
+        script: npm install
+      - name: Build web assets
+        script: npm run build
+      - name: Capacitor sync
+        script: npx cap sync android
+      - name: Build debug APK
+        script: |
+          cd android
+          ./gradlew assembleDebug --no-daemon
+    artifacts:
+      - android/app/build/outputs/apk/debug/app-debug.apk
+
+  ios-debug:
+    name: iOS – Debug IPA
+    max_build_duration: 60
+    instance_type: mac_mini_m2
+    environment:
+      node: 20
+      xcode: latest
+    cache:
+      cache_paths:
+        - $HOME/Library/Caches/CocoaPods
+    scripts:
+      - name: Install dependencies
+        script: npm install
+      - name: Build web assets
+        script: npm run build
+      - name: Capacitor sync
+        script: npx cap sync ios
+      - name: Install CocoaPods
+        script: cd ios/App && pod install
+      - name: Build IPA
+        script: |
+          xcode-project build-ipa \
+            --workspace ios/App/App.xcworkspace \
+            --scheme App
+    artifacts:
+      - build/ios/ipa/*.ipa
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
+
+    <base href="/" />
+
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+{
+  "name": "app",
+  "integrations": {},
+  "type": "react-vite"
+}
@@ -0,0 +1,45 @@
+{
+  "name": "app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@capacitor/android": "8.3.4",
+    "@capacitor/app": "8.1.0",
+    "@capacitor/core": "8.3.4",
+    "@capacitor/haptics": "8.0.2",
+    "@capacitor/ios": "8.3.4",
+    "@capacitor/keyboard": "8.0.3",
+    "@capacitor/status-bar": "8.0.2",
+    "@ionic/react": "^8.5.0",
+    "@ionic/react-router": "^8.8.7",
+    "@supabase/supabase-js": "^2.106.1",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "ionicons": "^7.4.0",
+    "katex": "^0.16.47",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-katex": "^3.1.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "8.3.4",
+    "@types/katex": "^0.16.8",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "@types/react-katex": "^3",
+    "@vitejs/plugin-react": "^4.0.1",
+    "terser": "^5.4.0",
+    "typescript": "~5.9.0",
+    "vite": "^5.0.0"
+  },
+  "description": "An Ionic project"
+}
@@ -0,0 +1,15 @@
+{
+  "short_name": "Ionic App",
+  "name": "My Ionic App",
+  "icons": [
+    {
+      "src": "assets/icon/favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff"
+}
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+
+import '@ionic/react/css/core.css';
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+import './theme/variables.css';
+
+import Home from './pages/Home';
+import Account from './pages/Account';
+import Auth from './pages/Auth';
+import Stats from './pages/Stats';
+
+// Cast components to avoid React 18 / React Router v5 JSX element type conflicts
+const RouteAny = Route as any;
+const RedirectAny = Redirect as any;
+const IonReactRouterAny = IonReactRouter as any;
+const IonRouterOutletAny = IonRouterOutlet as any;
+const IonAppAny = IonApp as any;
+
+const App = (): any => (
+  <IonAppAny>
+    <IonReactRouterAny basename={import.meta.env.BASE_URL}>
+      <IonRouterOutletAny>
+        <RouteAny exact path="/auth" component={Auth} />
+        <RouteAny exact path="/home" component={Home} />
+        <RouteAny exact path="/stats" component={Stats} />
+        <RouteAny exact path="/account" component={Account} />
+        <RouteAny exact path="/" render={() => <RedirectAny to="/home" />} />
+      </IonRouterOutletAny>
+    </IonReactRouterAny>
+  </IonAppAny>
+);
+
+export default App;
@@ -0,0 +1,77 @@
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+interface CustomProgressBarProps {
+  value: number; // 0 to 1
+  label?: string;
+  statusText?: string;
+  color?: string; // Hex, rgb, or css variable
+  showPercent?: boolean;
+  style?: React.CSSProperties;
+}
+
+export const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
+  value,
+  label,
+  statusText,
+  color = 'var(--ion-color-primary)',
+  showPercent = true,
+  style,
+}) => {
+  const percentage = Math.round(Math.min(Math.max(value, 0), 1) * 100);
+
+  return (
+    <div style={{ width: '100%', ...style }}>
+      {/* Label and Status */}
+      {(label || statusText || showPercent) && (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            fontSize: '0.8rem',
+            marginBottom: '6px',
+            fontWeight: '600',
+          }}
+        >
+          <span style={{ color: 'var(--ion-color-medium)' }}>
+            {label}{' '}
+            {statusText && (
+              <span style={{ fontWeight: 'normal', opacity: 0.85 }}>
+                • {statusText}
+              </span>
+            )}
+          </span>
+          {showPercent && (
+            <span
+              style={{
+                color: color,
+                fontVariantNumeric: 'tabular-nums',
+                fontFamily: 'ui-monospace, monospace',
+                fontWeight: '700',
+              }}
+            >
+              {percentage}%
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Progress Track */}
+      <IonProgressBar
+        value={value}
+        style={
+          {
+            height: '6px',
+            '--background': 'rgba(148, 163, 184, 0.1)',
+            '--progress-background': color,
+            borderRadius: '10px',
+            transition: 'value 0.3s ease',
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+};
+
+export default CustomProgressBar;
@@ -0,0 +1,30 @@
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { sparklesOutline } from 'ionicons/icons';
+
+interface EmptyStateProps {
+  title: string;
+  message: string;
+  actionLabel: string;
+  onAction: () => void;
+}
+
+const EmptyState: React.FC<EmptyStateProps> = ({
+  title,
+  message,
+  actionLabel,
+  onAction,
+}) => {
+  return (
+    <div className="empty-state-card">
+      <div className="empty-state-icon">
+        <IonIcon icon={sparklesOutline} />
+      </div>
+      <h2>{title}</h2>
+      <p>{message}</p>
+      <IonButton onClick={onAction}>{actionLabel}</IonButton>
+    </div>
+  );
+};
+
+export default EmptyState;
@@ -0,0 +1,71 @@
+import React from 'react';
+import { IonButton, IonIcon, IonSpinner } from '@ionic/react';
+import { checkmarkCircle, flameOutline, trashOutline } from 'ionicons/icons';
+import type { Tables } from '../database.types';
+
+interface HabitCardProps {
+  habit: Tables<'habits'>;
+  completedToday: boolean;
+  currentStreak: number;
+  completionRate: number;
+  onToggle: () => void;
+  onDelete: () => void;
+  busy: boolean;
+}
+
+const HabitCard: React.FC<HabitCardProps> = ({
+  habit,
+  completedToday,
+  currentStreak,
+  completionRate,
+  onToggle,
+  onDelete,
+  busy,
+}) => {
+  return (
+    <div className="habit-card">
+      <div className="habit-card-main">
+        <div className="habit-color-pill" style={{ background: habit.color }} />
+        <div className="habit-copy">
+          <h3>{habit.name}</h3>
+          <p>
+            {habit.target_description ||
+              'Show up today and keep the chain alive.'}
+          </p>
+          <div className="habit-metrics-row">
+            <span>
+              <IonIcon icon={flameOutline} /> {currentStreak} day streak
+            </span>
+            <span>{completionRate}% this week</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="habit-actions">
+        <IonButton
+          fill={completedToday ? 'solid' : 'outline'}
+          color="success"
+          onClick={onToggle}
+          disabled={busy}
+        >
+          {busy ? (
+            <IonSpinner name="crescent" />
+          ) : (
+            <IonIcon icon={checkmarkCircle} slot="start" />
+          )}
+          {completedToday ? 'Done today' : 'Mark done'}
+        </IonButton>
+        <IonButton
+          fill="clear"
+          color="medium"
+          onClick={onDelete}
+          disabled={busy}
+        >
+          <IonIcon icon={trashOutline} />
+        </IonButton>
+      </div>
+    </div>
+  );
+};
+
+export default HabitCard;
@@ -0,0 +1,135 @@
+import React, { useMemo, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonModal,
+  IonTextarea,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+
+interface HabitFormModalProps {
+  isOpen: boolean;
+  onDismiss: () => void;
+  onSubmit: (values: {
+    name: string;
+    targetDescription: string;
+    color: string;
+  }) => Promise<void>;
+}
+
+const COLORS = [
+  '#7c3aed',
+  '#0f766e',
+  '#ea580c',
+  '#dc2626',
+  '#2563eb',
+  '#059669',
+];
+
+const HabitFormModal: React.FC<HabitFormModalProps> = ({
+  isOpen,
+  onDismiss,
+  onSubmit,
+}) => {
+  const [name, setName] = useState('');
+  const [targetDescription, setTargetDescription] = useState('');
+  const [color, setColor] = useState(COLORS[0]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const canSubmit = useMemo(
+    () => name.trim().length > 0 && name.trim().length <= 80,
+    [name]
+  );
+
+  const handleSubmit = async () => {
+    setError('');
+    setSaving(true);
+    try {
+      await onSubmit({
+        name: name.trim(),
+        targetDescription: targetDescription.trim(),
+        color,
+      });
+      setName('');
+      setTargetDescription('');
+      setColor(COLORS[0]);
+      onDismiss();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to save habit.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <IonModal isOpen={isOpen} onDidDismiss={onDismiss}>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>New Habit</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={onDismiss}>Close</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <div className="habit-form-grid">
+          <IonItem lines="none" className="auth-input-item">
+            <IonInput
+              label="Habit name"
+              labelPlacement="stacked"
+              value={name}
+              maxlength={80}
+              placeholder="Drink water"
+              onIonInput={(e) => setName(e.detail.value ?? '')}
+            />
+          </IonItem>
+
+          <IonItem lines="none" className="auth-input-item">
+            <IonTextarea
+              label="Target or note"
+              labelPlacement="stacked"
+              value={targetDescription}
+              placeholder="8 glasses, 20 minutes, 30 pushups..."
+              autoGrow
+              onIonInput={(e) => setTargetDescription(e.detail.value ?? '')}
+            />
+          </IonItem>
+
+          <div>
+            <IonLabel className="color-label">Color</IonLabel>
+            <div className="habit-color-row">
+              {COLORS.map((swatch) => (
+                <button
+                  key={swatch}
+                  type="button"
+                  className={`habit-color-dot ${color === swatch ? 'selected' : ''}`}
+                  style={{ background: swatch }}
+                  onClick={() => setColor(swatch)}
+                />
+              ))}
+            </div>
+          </div>
+
+          {error ? <p className="auth-feedback error-text">{error}</p> : null}
+
+          <IonButton
+            expand="block"
+            onClick={handleSubmit}
+            disabled={!canSubmit || saving}
+          >
+            {saving ? 'Saving…' : 'Create Habit'}
+          </IonButton>
+        </div>
+      </IonContent>
+    </IonModal>
+  );
+};
+
+export default HabitFormModal;
@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonBackButton,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import { setStatusBarStyle, Style } from '../utils/statusBar';
+
+interface PageHeaderProps {
+  title: string;
+  showBackButton?: boolean;
+  defaultBackHref?: string;
+  endActions?: React.ReactNode;
+  style?: React.CSSProperties;
+  toolbarStyle?: React.CSSProperties;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  showBackButton = false,
+  defaultBackHref = '/home',
+  endActions,
+  style,
+  toolbarStyle,
+}) => {
+  // Use Ionic lifecycle hook to set status bar style automatically for pages using PageHeader
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark); // Dark text/icons for light-colored headers
+  });
+
+  return (
+    <IonHeader className="ion-no-border" style={style}>
+      <IonToolbar
+        style={
+          {
+            '--background': '#ffffff',
+            '--color': 'var(--ion-color-dark)',
+            '--border-width': '0 0 1px 0',
+            '--border-color': 'rgba(0, 0, 0, 0.05)',
+            ...toolbarStyle,
+          } as React.CSSProperties
+        }
+      >
+        {showBackButton && (
+          <IonButtons slot="start">
+            <IonBackButton defaultHref={defaultBackHref} />
+          </IonButtons>
+        )}
+
+        <IonTitle
+          style={{
+            fontWeight: '800',
+            fontSize: '1.1rem',
+            letterSpacing: '-0.3px',
+          }}
+        >
+          {title}
+        </IonTitle>
+
+        {endActions && <IonButtons slot="end">{endActions}</IonButtons>}
+      </IonToolbar>
+    </IonHeader>
+  );
+};
+
+export default PageHeader;
@@ -0,0 +1,80 @@
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+
+interface RevisionInstrumentCardProps {
+  title: string;
+  subtitle?: string;
+  icon: string;
+  iconColor: string;
+  iconBgColor: string;
+  onClick: () => void;
+  style?: React.CSSProperties;
+}
+
+export const RevisionInstrumentCard: React.FC<RevisionInstrumentCardProps> = ({
+  title,
+  subtitle,
+  icon,
+  iconColor,
+  iconBgColor,
+  onClick,
+  style,
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: '#ffffff',
+        border: 'none',
+        borderRadius: '14px',
+        padding: '14px 10px',
+        textAlign: 'center',
+        cursor: 'pointer',
+        boxShadow: 'none',
+        transition: 'transform 0.15s ease',
+        ...style,
+      }}
+      className="ion-activatable"
+    >
+      <div
+        style={{
+          width: '36px',
+          height: '36px',
+          borderRadius: '10px',
+          background: iconBgColor,
+          color: iconColor,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto 8px auto',
+        }}
+      >
+        <IonIcon icon={icon} style={{ fontSize: '18px' }} />
+      </div>
+      <span
+        style={{
+          fontSize: '0.8rem',
+          fontWeight: '700',
+          color: 'var(--ion-color-dark)',
+          display: 'block',
+        }}
+      >
+        {title}
+      </span>
+      {subtitle && (
+        <span
+          style={{
+            fontSize: '0.65rem',
+            color: 'var(--ion-color-medium)',
+            display: 'block',
+            marginTop: '2px',
+          }}
+        >
+          {subtitle}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default RevisionInstrumentCard;
@@ -0,0 +1,47 @@
+import React from 'react';
+import { IonProgressBar } from '@ionic/react';
+
+interface StatsHabitCardProps {
+  name: string;
+  color: string;
+  completedCount: number;
+  totalDays: number;
+  streak: number;
+}
+
+const StatsHabitCard: React.FC<StatsHabitCardProps> = ({
+  name,
+  color,
+  completedCount,
+  totalDays,
+  streak,
+}) => {
+  const ratio = totalDays > 0 ? completedCount / totalDays : 0;
+  const percentage = Math.round(ratio * 100);
+
+  return (
+    <div className="stats-card">
+      <div className="stats-card-header">
+        <div>
+          <h3>{name}</h3>
+          <p>
+            {completedCount} of {totalDays} days completed
+          </p>
+        </div>
+        <div className="stats-streak-badge" style={{ color }}>
+          {streak}🔥
+        </div>
+      </div>
+      <IonProgressBar
+        value={ratio}
+        style={{ '--progress-background': color } as React.CSSProperties}
+      />
+      <div className="stats-card-footer">
+        <span>{percentage}% consistency</span>
+        <span>Current streak {streak}</span>
+      </div>
+    </div>
+  );
+};
+
+export default StatsHabitCard;
@@ -0,0 +1,270 @@
+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+
+export type Database = {
+  // Allows to automatically instantiate createClient with right options
+  // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
+  __InternalSupabase: {
+    PostgrestVersion: "14.5"
+  }
+  public: {
+    Tables: {
+      habit_completions: {
+        Row: {
+          completed_on: string
+          created_at: string
+          habit_id: string
+          id: string
+          user_id: string
+        }
+        Insert: {
+          completed_on: string
+          created_at?: string
+          habit_id: string
+          id?: string
+          user_id: string
+        }
+        Update: {
+          completed_on?: string
+          created_at?: string
+          habit_id?: string
+          id?: string
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "habit_completions_habit_id_fkey"
+            columns: ["habit_id"]
+            isOneToOne: false
+            referencedRelation: "habits"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
+      habits: {
+        Row: {
+          color: string
+          created_at: string
+          id: string
+          name: string
+          target_description: string | null
+          user_id: string
+        }
+        Insert: {
+          color?: string
+          created_at?: string
+          id?: string
+          name: string
+          target_description?: string | null
+          user_id: string
+        }
+        Update: {
+          color?: string
+          created_at?: string
+          id?: string
+          name?: string
+          target_description?: string | null
+          user_id?: string
+        }
+        Relationships: []
+      }
+      notes: {
+        Row: {
+          content: string
+          created_at: string
+          id: string
+          is_favorite: boolean
+          title: string
+          user_id: string
+        }
+        Insert: {
+          content: string
+          created_at?: string
+          id?: string
+          is_favorite?: boolean
+          title: string
+          user_id?: string
+        }
+        Update: {
+          content?: string
+          created_at?: string
+          id?: string
+          is_favorite?: boolean
+          title?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+      todos: {
+        Row: {
+          created_at: string
+          description: string | null
+          due_date: string | null
+          id: string
+          is_completed: boolean
+          title: string
+          user_id: string
+        }
+        Insert: {
+          created_at?: string
+          description?: string | null
+          due_date?: string | null
+          id?: string
+          is_completed?: boolean
+          title: string
+          user_id?: string
+        }
+        Update: {
+          created_at?: string
+          description?: string | null
+          due_date?: string | null
+          id?: string
+          is_completed?: boolean
+          title?: string
+          user_id?: string
+        }
+        Relationships: []
+      }
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
+
+type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
+
+export type Tables<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])
+    ? (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema["Enums"]
+    | { schema: keyof DatabaseWithoutInternals },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = DefaultSchemaEnumNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
+    ? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
+    : never
+
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema["CompositeTypes"]
+    | { schema: keyof DatabaseWithoutInternals },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
+    ? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
+    : never
+
+export const Constants = {
+  public: {
+    Enums: {},
+  },
+} as const
@@ -0,0 +1,108 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { setupIonicReact } from '@ionic/react';
+import { Capacitor } from '@capacitor/core';
+import App from './App';
+
+// ── Ionic initialisation ──────────────────────────────────────────────────────
+// ?mode=md|ios overrides (used by AppSuite preview); otherwise follow the platform.
+const _urlMode = new URLSearchParams(window.location.search).get('mode');
+const _platform = Capacitor.getPlatform(); // 'ios' | 'android' | 'web'
+setupIonicReact({
+  mode: (_urlMode === 'md' ? 'md' : _urlMode === 'ios' ? 'ios' : _platform === 'android' ? 'md' : 'ios'),
+});
+
+// Derive the studio parent origin dynamically so this works in both dev
+// (parent at localhost:3000) and production (parent at appcakes.qqura.com).
+const studioOrigin = (() => {
+  try {
+    if (document.referrer) return new URL(document.referrer).origin;
+  } catch {}
+  return 'http://localhost:3000';
+})();
+
+// ── Safe area bridge ──────────────────────────────────────────────────────────
+// Priority: URL params (first load) → sessionStorage (HMR full-reloads) → postMessage.
+// Capacitor sets env() natively in compiled apps; these paths cover the browser preview.
+function _applyInsets(sat: string | null, sab: string | null) {
+  if (sat) { document.documentElement.style.setProperty('--ion-safe-area-top', `${sat}px`); sessionStorage.setItem('__apsuite_sat', sat); }
+  if (sab) { document.documentElement.style.setProperty('--ion-safe-area-bottom', `${sab}px`); sessionStorage.setItem('__apsuite_sab', sab); }
+}
+
+const _sp = new URLSearchParams(window.location.search);
+_applyInsets(
+  _sp.get('sat') ?? sessionStorage.getItem('__apsuite_sat'),
+  _sp.get('sab') ?? sessionStorage.getItem('__apsuite_sab'),
+);
+
+window.addEventListener('message', (e) => {
+  if (e.data?.type !== '__apsuite_insets') return;
+  const { sat, sab } = e.data as { sat?: number; sab?: number };
+  _applyInsets(sat != null ? String(sat) : null, sab != null ? String(sab) : null);
+});
+
+// Re-apply after React Fast Refresh so insets survive soft HMR cycles.
+if (import.meta.hot) {
+  import.meta.hot.on('vite:beforeUpdate', () => {
+    const c = (window as any).Ionic?.config;
+    if (c) c.animated = false;
+  });
+  import.meta.hot.on('vite:afterUpdate', () => {
+    _applyInsets(sessionStorage.getItem('__apsuite_sat'), sessionStorage.getItem('__apsuite_sab'));
+    const c = (window as any).Ionic?.config;
+    if (c) c.animated = true;
+  });
+}
+
+// ── Session bridge ────────────────────────────────────────────────────────────
+// Post auth session to the AppSuite parent frame so the AI can test auth-protected
+// Edge Functions. Uses import.meta.glob so Vite never errors if supabase.ts is absent.
+(async () => {
+  const mods = import.meta.glob('./supabase.ts', { eager: false });
+  if ('./supabase.ts' in mods) {
+    try {
+      const { supabase } = await mods['./supabase.ts']() as { supabase: any };
+      supabase.auth.onAuthStateChange((_event: unknown, session: any) => {
+        window.parent.postMessage(
+          {
+            type: '__apsuite_session',
+            access_token: session?.access_token ?? null,
+            email: session?.user?.email ?? null,
+          },
+          studioOrigin,
+        );
+      });
+    } catch {
+      // supabase client failed to initialise — session bridge unavailable
+    }
+  }
+})();
+
+// ── Runtime error reporting ───────────────────────────────────────────────────
+// Forward uncaught errors to the AppSuite dev server so the AI can read them.
+function reportError(message: string, stack?: string) {
+  fetch(`${studioOrigin}/api/agent/runtime-error`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message, stack }),
+  }).catch(() => {});
+}
+
+window.onerror = (_msg, _src, _line, _col, err) => {
+  reportError(String(_msg), err?.stack);
+  return false;
+};
+
+window.addEventListener('unhandledrejection', (e) => {
+  const err = e.reason as Error | undefined;
+  reportError(err?.message ?? String(e.reason), err?.stack);
+});
+
+// ── App bootstrap ─────────────────────────────────────────────────────────────
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { Redirect, useHistory } from 'react-router-dom';
+import { supabase } from '../supabase';
+import {
+  Style,
+  setStatusBarBackground,
+  setStatusBarStyle,
+} from '../utils/statusBar';
+import { useIonViewWillEnter } from '@ionic/react';
+
+const Account: React.FC = () => {
+  const history = useHistory();
+  const [sessionChecked, setSessionChecked] = useState(false);
+  const [email, setEmail] = useState<string | null>(null);
+
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark);
+    setStatusBarBackground('#ffffff');
+  });
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => {
+      setEmail(data.session?.user.email ?? null);
+      setSessionChecked(true);
+    });
+  }, []);
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+    history.replace('/auth');
+  };
+
+  if (sessionChecked && !email) {
+    return <Redirect to="/auth" />;
+  }
+
+  return (
+    <IonPage>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Account</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className="dashboard-shell ion-padding">
+          <section className="hero-card compact">
+            <span className="eyebrow">Signed in as</span>
+            <h1>{email ?? 'Loading...'}</h1>
+            <p>
+              Your habits sync to your account so your streak history stays
+              safe.
+            </p>
+          </section>
+
+          <div className="stats-card">
+            <IonItem lines="none">
+              <IonLabel>
+                <h2>Email</h2>
+                <p>{email ?? '—'}</p>
+              </IonLabel>
+            </IonItem>
+            <IonButton expand="block" routerLink="/home">
+              Back to Habits
+            </IonButton>
+            <IonButton
+              expand="block"
+              fill="outline"
+              color="danger"
+              onClick={handleSignOut}
+            >
+              Sign Out
+            </IonButton>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Account;
@@ -0,0 +1,215 @@
+import React, { useMemo, useState } from 'react';
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonContent,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonSegment,
+  IonSegmentButton,
+  IonText,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import { Redirect, useHistory } from 'react-router-dom';
+import {
+  Style,
+  setStatusBarBackground,
+  setStatusBarStyle,
+} from '../utils/statusBar';
+import { supabase } from '../supabase';
+
+const Auth: React.FC = () => {
+  const history = useHistory();
+  const [mode, setMode] = useState<'login' | 'signup'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [info, setInfo] = useState('');
+  const [verificationMessage, setVerificationMessage] = useState('');
+  const [sessionChecked, setSessionChecked] = useState(false);
+  const [hasSession, setHasSession] = useState(false);
+
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark);
+    setStatusBarBackground('#f6f7fb');
+  });
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    supabase.auth.getSession().then(({ data }) => {
+      if (!mounted) return;
+      setHasSession(Boolean(data.session));
+      setSessionChecked(true);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (!mounted) return;
+      setHasSession(Boolean(session));
+      setSessionChecked(true);
+    });
+
+    return () => {
+      mounted = false;
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const formValid = useMemo(() => {
+    return email.trim().length > 3 && password.length >= 6;
+  }, [email, password]);
+
+  const handleSubmit = async () => {
+    setError('');
+    setInfo('');
+    setVerificationMessage('');
+    setLoading(true);
+
+    try {
+      if (mode === 'login') {
+        const { error: signInError } = await supabase.auth.signInWithPassword({
+          email: email.trim(),
+          password,
+        });
+
+        if (signInError) {
+          setError(signInError.message);
+          return;
+        }
+
+        history.replace('/home');
+        return;
+      }
+
+      const { data, error: signUpError } = await supabase.auth.signUp({
+        email: email.trim(),
+        password,
+      });
+
+      if (signUpError) {
+        setError(signUpError.message);
+        return;
+      }
+
+      if (data.session) {
+        history.replace('/home');
+        return;
+      }
+
+      setVerificationMessage(
+        'Account created! Check your email for a verification link.'
+      );
+      setInfo('Once verified, come back and sign in.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (sessionChecked && hasSession) {
+    return <Redirect to="/home" />;
+  }
+
+  return (
+    <IonPage>
+      <IonContent fullscreen style={{ '--background': '#f6f7fb' }}>
+        <div className="auth-shell">
+          <div className="auth-hero">
+            <span className="eyebrow">Protect your streaks</span>
+            <h1>Build habits that actually stick.</h1>
+            <p>
+              Track daily wins, recover faster from misses, and see which habits
+              are getting real momentum.
+            </p>
+          </div>
+
+          <IonCard className="auth-card">
+            <IonCardContent>
+              <IonSegment
+                value={mode}
+                onIonChange={(e) =>
+                  setMode(e.detail.value as 'login' | 'signup')
+                }
+              >
+                <IonSegmentButton value="login">
+                  <IonLabel>Login</IonLabel>
+                </IonSegmentButton>
+                <IonSegmentButton value="signup">
+                  <IonLabel>Sign Up</IonLabel>
+                </IonSegmentButton>
+              </IonSegment>
+
+              {verificationMessage ? (
+                <div className="auth-message-block">
+                  <h2>Check your inbox</h2>
+                  <p>{verificationMessage}</p>
+                  <IonText color="medium">
+                    <p>{info}</p>
+                  </IonText>
+                  <IonButton fill="clear" onClick={() => setMode('login')}>
+                    Back to Login
+                  </IonButton>
+                </div>
+              ) : (
+                <div className="auth-form">
+                  <IonItem lines="none" className="auth-input-item">
+                    <IonInput
+                      type="email"
+                      label="Email"
+                      labelPlacement="stacked"
+                      value={email}
+                      placeholder="you@example.com"
+                      onIonInput={(e) => setEmail(e.detail.value ?? '')}
+                    />
+                  </IonItem>
+
+                  <IonItem lines="none" className="auth-input-item">
+                    <IonInput
+                      type="password"
+                      label="Password"
+                      labelPlacement="stacked"
+                      value={password}
+                      placeholder="At least 6 characters"
+                      onIonInput={(e) => setPassword(e.detail.value ?? '')}
+                    />
+                  </IonItem>
+
+                  {error ? (
+                    <IonText color="danger">
+                      <p className="auth-feedback">{error}</p>
+                    </IonText>
+                  ) : null}
+
+                  {info ? (
+                    <IonText color="medium">
+                      <p className="auth-feedback">{info}</p>
+                    </IonText>
+                  ) : null}
+
+                  <IonButton
+                    expand="block"
+                    disabled={!formValid || loading}
+                    onClick={handleSubmit}
+                  >
+                    {loading
+                      ? 'Please wait…'
+                      : mode === 'login'
+                        ? 'Log In'
+                        : 'Create Account'}
+                  </IonButton>
+                </div>
+              )}
+            </IonCardContent>
+          </IonCard>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Auth;
@@ -0,0 +1,315 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRefresher,
+  IonRefresherContent,
+  IonSkeletonText,
+  IonTitle,
+  IonToolbar,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import {
+  addOutline,
+  analyticsOutline,
+  personCircleOutline,
+} from 'ionicons/icons';
+import { Redirect, useHistory } from 'react-router-dom';
+import type { Tables } from '../database.types';
+import { supabase } from '../supabase';
+import EmptyState from '../components/EmptyState';
+import HabitCard from '../components/HabitCard';
+import HabitFormModal from '../components/HabitFormModal';
+import {
+  Style,
+  setStatusBarBackground,
+  setStatusBarStyle,
+} from '../utils/statusBar';
+
+interface HabitWithMeta extends Tables<'habits'> {
+  completions: Tables<'habit_completions'>[];
+}
+
+const formatDate = (date: Date) => date.toISOString().slice(0, 10);
+
+const calculateCurrentStreak = (dates: string[]) => {
+  const unique = Array.from(new Set(dates)).sort((a, b) => b.localeCompare(a));
+  let streak = 0;
+  let cursor = new Date();
+
+  if (!unique.includes(formatDate(cursor))) {
+    cursor.setDate(cursor.getDate() - 1);
+  }
+
+  while (unique.includes(formatDate(cursor))) {
+    streak += 1;
+    cursor.setDate(cursor.getDate() - 1);
+  }
+
+  return streak;
+};
+
+const Home: React.FC = () => {
+  const history = useHistory();
+  const [sessionChecked, setSessionChecked] = useState(false);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [habits, setHabits] = useState<HabitWithMeta[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [busyHabitId, setBusyHabitId] = useState<string | null>(null);
+
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark);
+    setStatusBarBackground('#ffffff');
+  });
+
+  const loadDashboard = useCallback(async () => {
+    setError('');
+
+    const {
+      data: { session },
+      error: sessionError,
+    } = await supabase.auth.getSession();
+
+    if (sessionError) {
+      setError(sessionError.message);
+      setSessionChecked(true);
+      setLoading(false);
+      return;
+    }
+
+    if (!session?.user) {
+      setUserId(null);
+      setSessionChecked(true);
+      setLoading(false);
+      return;
+    }
+
+    setUserId(session.user.id);
+    setSessionChecked(true);
+
+    const { data, error: habitsError } = await supabase
+      .from('habits')
+      .select('*, completions:habit_completions(*)')
+      .order('created_at', { ascending: true });
+
+    if (habitsError) {
+      setError(habitsError.message);
+      setLoading(false);
+      return;
+    }
+
+    setHabits((data ?? []) as HabitWithMeta[]);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadDashboard();
+  }, [loadDashboard]);
+
+  const today = formatDate(new Date());
+
+  const habitStats = useMemo(() => {
+    const last7Days = Array.from({ length: 7 }, (_, index) => {
+      const date = new Date();
+      date.setDate(date.getDate() - index);
+      return formatDate(date);
+    });
+
+    return habits.reduce<
+      Record<string, { streak: number; weekRate: number; doneToday: boolean }>
+    >((acc, habit) => {
+      const completionDates = habit.completions.map(
+        (entry) => entry.completed_on
+      );
+      const completedInWeek = completionDates.filter((date) =>
+        last7Days.includes(date)
+      ).length;
+
+      acc[habit.id] = {
+        streak: calculateCurrentStreak(completionDates),
+        weekRate: Math.round((completedInWeek / last7Days.length) * 100),
+        doneToday: completionDates.includes(today),
+      };
+
+      return acc;
+    }, {});
+  }, [habits, today]);
+
+  const totalCompletedToday = habits.filter(
+    (habit) => habitStats[habit.id]?.doneToday
+  ).length;
+  const longestStreak = habits.reduce(
+    (max, habit) => Math.max(max, habitStats[habit.id]?.streak ?? 0),
+    0
+  );
+
+  const createHabit = async (values: {
+    name: string;
+    targetDescription: string;
+    color: string;
+  }) => {
+    if (!userId) throw new Error('You need to be logged in.');
+
+    const { error: insertError } = await supabase.from('habits').insert({
+      user_id: userId,
+      name: values.name,
+      target_description: values.targetDescription || null,
+      color: values.color,
+    });
+
+    if (insertError) throw insertError;
+    await loadDashboard();
+  };
+
+  const toggleHabit = async (habit: HabitWithMeta) => {
+    if (!userId) return;
+    setBusyHabitId(habit.id);
+
+    const existing = habit.completions.find(
+      (entry) => entry.completed_on === today
+    );
+
+    if (existing) {
+      const { error: deleteError } = await supabase
+        .from('habit_completions')
+        .delete()
+        .eq('id', existing.id);
+      if (deleteError) setError(deleteError.message);
+    } else {
+      const { error: insertError } = await supabase
+        .from('habit_completions')
+        .insert({
+          habit_id: habit.id,
+          user_id: userId,
+          completed_on: today,
+        });
+      if (insertError) setError(insertError.message);
+    }
+
+    await loadDashboard();
+    setBusyHabitId(null);
+  };
+
+  const deleteHabit = async (habitId: string) => {
+    setBusyHabitId(habitId);
+    const { error: deleteError } = await supabase
+      .from('habits')
+      .delete()
+      .eq('id', habitId);
+    if (deleteError) {
+      setError(deleteError.message);
+    }
+    await loadDashboard();
+    setBusyHabitId(null);
+  };
+
+  if (sessionChecked && !userId) {
+    return <Redirect to="/auth" />;
+  }
+
+  return (
+    <IonPage>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Habits</IonTitle>
+          <IonButtons slot="end">
+            <IonButton onClick={() => history.push('/stats')}>
+              <IonIcon icon={analyticsOutline} />
+            </IonButton>
+            <IonButton onClick={() => history.push('/account')}>
+              <IonIcon icon={personCircleOutline} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen>
+        <IonRefresher
+          slot="fixed"
+          onIonRefresh={async (e) => {
+            await loadDashboard();
+            e.detail.complete();
+          }}
+        >
+          <IonRefresherContent />
+        </IonRefresher>
+
+        <div className="dashboard-shell ion-padding">
+          <section className="hero-card">
+            <span className="eyebrow">Today&apos;s momentum</span>
+            <h1>
+              {totalCompletedToday}/{habits.length || 0} habits done today
+            </h1>
+            <p>
+              Longest active streak: {longestStreak} days. The goal is simple:
+              don&apos;t break the chain.
+            </p>
+            <IonButton onClick={() => setShowCreateModal(true)}>
+              <IonIcon icon={addOutline} slot="start" />
+              New Habit
+            </IonButton>
+          </section>
+
+          {loading ? (
+            <div className="stack-list">
+              <IonSkeletonText
+                animated
+                style={{ width: '100%', height: '110px', borderRadius: '22px' }}
+              />
+              <IonSkeletonText
+                animated
+                style={{ width: '100%', height: '110px', borderRadius: '22px' }}
+              />
+              <IonSkeletonText
+                animated
+                style={{ width: '100%', height: '110px', borderRadius: '22px' }}
+              />
+            </div>
+          ) : error ? (
+            <div className="inline-message error-card">
+              <h3>Couldn&apos;t load your habits</h3>
+              <p>{error}</p>
+              <IonButton onClick={loadDashboard}>Try Again</IonButton>
+            </div>
+          ) : habits.length === 0 ? (
+            <EmptyState
+              title="No habits yet"
+              message="Create your first habit and start protecting a streak from today."
+              actionLabel="Create First Habit"
+              onAction={() => setShowCreateModal(true)}
+            />
+          ) : (
+            <div className="stack-list">
+              {habits.map((habit) => (
+                <HabitCard
+                  key={habit.id}
+                  habit={habit}
+                  completedToday={habitStats[habit.id]?.doneToday ?? false}
+                  currentStreak={habitStats[habit.id]?.streak ?? 0}
+                  completionRate={habitStats[habit.id]?.weekRate ?? 0}
+                  onToggle={() => toggleHabit(habit)}
+                  onDelete={() => deleteHabit(habit.id)}
+                  busy={busyHabitId === habit.id}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        <HabitFormModal
+          isOpen={showCreateModal}
+          onDismiss={() => setShowCreateModal(false)}
+          onSubmit={createHabit}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;
@@ -0,0 +1,179 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonSegment,
+  IonSegmentButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { IonBackButton } from '@ionic/react';
+import { calendarOutline } from 'ionicons/icons';
+import { Redirect } from 'react-router-dom';
+import type { Tables } from '../database.types';
+import StatsHabitCard from '../components/StatsHabitCard';
+import { supabase } from '../supabase';
+import {
+  Style,
+  setStatusBarBackground,
+  setStatusBarStyle,
+} from '../utils/statusBar';
+import { useIonViewWillEnter } from '@ionic/react';
+
+interface HabitWithMeta extends Tables<'habits'> {
+  completions: Tables<'habit_completions'>[];
+}
+
+const formatDate = (date: Date) => date.toISOString().slice(0, 10);
+
+const calculateCurrentStreak = (dates: string[]) => {
+  const unique = Array.from(new Set(dates)).sort((a, b) => b.localeCompare(a));
+  let streak = 0;
+  let cursor = new Date();
+
+  if (!unique.includes(formatDate(cursor))) {
+    cursor.setDate(cursor.getDate() - 1);
+  }
+
+  while (unique.includes(formatDate(cursor))) {
+    streak += 1;
+    cursor.setDate(cursor.getDate() - 1);
+  }
+
+  return streak;
+};
+
+const Stats: React.FC = () => {
+  const [period, setPeriod] = useState<'7' | '30'>('7');
+  const [sessionChecked, setSessionChecked] = useState(false);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [habits, setHabits] = useState<HabitWithMeta[]>([]);
+
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark);
+    setStatusBarBackground('#ffffff');
+  });
+
+  useEffect(() => {
+    const load = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+
+      if (!session?.user) {
+        setSessionChecked(true);
+        setUserId(null);
+        return;
+      }
+
+      setUserId(session.user.id);
+      setSessionChecked(true);
+
+      const { data } = await supabase
+        .from('habits')
+        .select('*, completions:habit_completions(*)')
+        .order('created_at', { ascending: true });
+
+      setHabits((data ?? []) as HabitWithMeta[]);
+    };
+
+    load();
+  }, []);
+
+  const days = Number(period);
+  const visibleDates = useMemo(() => {
+    return Array.from({ length: days }, (_, index) => {
+      const date = new Date();
+      date.setDate(date.getDate() - index);
+      return formatDate(date);
+    });
+  }, [days]);
+
+  const summary = useMemo(() => {
+    return habits.map((habit) => {
+      const completionDates = habit.completions.map(
+        (entry) => entry.completed_on
+      );
+      const completedCount = completionDates.filter((date) =>
+        visibleDates.includes(date)
+      ).length;
+      return {
+        id: habit.id,
+        name: habit.name,
+        color: habit.color,
+        completedCount,
+        streak: calculateCurrentStreak(completionDates),
+      };
+    });
+  }, [habits, visibleDates]);
+
+  if (sessionChecked && !userId) {
+    return <Redirect to="/auth" />;
+  }
+
+  return (
+    <IonPage>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/home" />
+          </IonButtons>
+          <IonTitle>Stats</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <div className="dashboard-shell ion-padding">
+          <section className="hero-card compact">
+            <span className="eyebrow">Consistency view</span>
+            <h1>See which habits you&apos;re actually keeping.</h1>
+            <p>
+              Flip between the last week and month to spot patterns before a
+              streak disappears.
+            </p>
+          </section>
+
+          <div className="stats-filter-row">
+            <IonIcon icon={calendarOutline} />
+            <IonSegment
+              value={period}
+              onIonChange={(e) => setPeriod(e.detail.value as '7' | '30')}
+            >
+              <IonSegmentButton value="7">Last 7 days</IonSegmentButton>
+              <IonSegmentButton value="30">Last 30 days</IonSegmentButton>
+            </IonSegment>
+          </div>
+
+          {summary.length === 0 ? (
+            <div className="inline-message">
+              <h3>No stats yet</h3>
+              <p>
+                Create a habit and start checking it off daily to unlock
+                consistency insights.
+              </p>
+              <IonButton routerLink="/home">Go to dashboard</IonButton>
+            </div>
+          ) : (
+            <div className="stack-list">
+              {summary.map((habit) => (
+                <StatsHabitCard
+                  key={habit.id}
+                  name={habit.name}
+                  color={habit.color}
+                  completedCount={habit.completedCount}
+                  totalDays={days}
+                  streak={habit.streak}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Stats;
@@ -0,0 +1,7 @@
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from './database.types';
+
+export const supabase = createClient<Database>(
+  'https://zillycfjfbzofltgyjwy.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InppbGx5Y2ZqZmJ6b2ZsdGd5and5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzkxMjYzODQsImV4cCI6MjA5NDcwMjM4NH0.BB4ccBEQI2krc7SseC73234Nfya-92VGcTELNQdzt50',
+);
@@ -0,0 +1,305 @@
+:root {
+  --ion-color-primary: #6d28d9;
+  --ion-color-primary-rgb: 109, 40, 217;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #5b21b6;
+  --ion-color-primary-tint: #7c3aed;
+
+  --ion-color-secondary: #0f766e;
+  --ion-color-secondary-rgb: 15, 118, 110;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #115e59;
+  --ion-color-secondary-tint: #14b8a6;
+
+  --ion-color-tertiary: #ea580c;
+  --ion-color-tertiary-rgb: 234, 88, 12;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #c2410c;
+  --ion-color-tertiary-tint: #f97316;
+
+  --ion-color-success: #16a34a;
+  --ion-color-success-rgb: 22, 163, 74;
+  --ion-color-success-contrast: #ffffff;
+  --ion-color-success-contrast-rgb: 255, 255, 255;
+  --ion-color-success-shade: #15803d;
+  --ion-color-success-tint: #22c55e;
+
+  --ion-color-warning: #f59e0b;
+  --ion-color-warning-rgb: 245, 158, 11;
+  --ion-color-warning-contrast: #1f2937;
+  --ion-color-warning-contrast-rgb: 31, 41, 55;
+  --ion-color-warning-shade: #d97706;
+  --ion-color-warning-tint: #fbbf24;
+
+  --ion-color-danger: #dc2626;
+  --ion-color-danger-rgb: 220, 38, 38;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #b91c1c;
+  --ion-color-danger-tint: #ef4444;
+
+  --ion-color-dark: #111827;
+  --ion-color-dark-rgb: 17, 24, 39;
+  --ion-color-dark-contrast: #ffffff;
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-shade: #030712;
+  --ion-color-dark-tint: #374151;
+
+  --ion-color-medium: #6b7280;
+  --ion-color-medium-rgb: 107, 114, 128;
+  --ion-color-medium-contrast: #ffffff;
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
+  --ion-color-medium-shade: #4b5563;
+  --ion-color-medium-tint: #9ca3af;
+
+  --ion-color-light: #f3f4f6;
+  --ion-color-light-rgb: 243, 244, 246;
+  --ion-color-light-contrast: #111827;
+  --ion-color-light-contrast-rgb: 17, 24, 39;
+  --ion-color-light-shade: #e5e7eb;
+  --ion-color-light-tint: #f9fafb;
+
+  --ion-background-color: #f6f7fb;
+  --ion-text-color: #111827;
+  --ion-border-color: #e5e7eb;
+}
+
+body {
+  background: var(--ion-background-color);
+}
+
+ion-toolbar {
+  --background: #ffffff;
+  --color: var(--ion-color-dark);
+}
+
+.mono-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.dashboard-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.hero-card,
+.habit-card,
+.stats-card,
+.empty-state-card,
+.inline-message,
+.auth-card {
+  background: #ffffff;
+  border: 1px solid #ebeef4;
+  border-radius: 24px;
+  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
+}
+
+.hero-card {
+  padding: 24px;
+}
+
+.hero-card.compact {
+  padding: 20px;
+}
+
+.eyebrow {
+  display: inline-block;
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ion-color-primary);
+  margin-bottom: 8px;
+}
+
+.hero-card h1,
+.auth-hero h1,
+.empty-state-card h2 {
+  margin: 0;
+  font-size: 1.9rem;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  color: var(--ion-color-dark);
+}
+
+.hero-card p,
+.auth-hero p,
+.inline-message p,
+.empty-state-card p,
+.stats-card p,
+.habit-copy p {
+  color: var(--ion-color-medium);
+  line-height: 1.5;
+}
+
+.stack-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.habit-card {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.habit-card-main {
+  display: flex;
+  gap: 14px;
+}
+
+.habit-color-pill {
+  width: 10px;
+  border-radius: 999px;
+  min-height: 100%;
+}
+
+.habit-copy {
+  flex: 1;
+}
+
+.habit-copy h3,
+.stats-card h3 {
+  margin: 0 0 6px;
+  font-size: 1.08rem;
+  font-weight: 700;
+  color: var(--ion-color-dark);
+}
+
+.habit-metrics-row,
+.stats-card-footer,
+.stats-card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.habit-metrics-row span,
+.stats-card-footer span,
+.stats-card-header p {
+  font-size: 0.85rem;
+  color: var(--ion-color-medium);
+}
+
+.habit-metrics-row ion-icon {
+  vertical-align: middle;
+}
+
+.habit-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.empty-state-card,
+.inline-message {
+  padding: 28px 22px;
+  text-align: center;
+}
+
+.empty-state-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 14px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(109, 40, 217, 0.1);
+  color: var(--ion-color-primary);
+  font-size: 30px;
+}
+
+.auth-shell {
+  min-height: 100%;
+  padding: 32px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+}
+
+.auth-hero {
+  padding: 0 4px;
+}
+
+.auth-card {
+  margin: 0;
+}
+
+.auth-card ion-card-content {
+  padding: 20px;
+}
+
+.auth-form,
+.auth-message-block,
+.habit-form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.auth-input-item {
+  --background: #f8fafc;
+  --border-radius: 18px;
+}
+
+.auth-feedback {
+  margin: 0;
+  font-size: 0.88rem;
+}
+
+.error-text {
+  color: var(--ion-color-danger);
+}
+
+.color-label {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.habit-color-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.habit-color-dot {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: 3px solid transparent;
+}
+
+.habit-color-dot.selected {
+  border-color: #111827;
+}
+
+.stats-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stats-card {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.stats-streak-badge {
+  font-size: 1.1rem;
+  font-weight: 700;
+}
@@ -0,0 +1,23 @@
+import { StatusBar, Style } from '@capacitor/status-bar';
+export { Style };
+
+const _origin = (() => {
+  try { if (document.referrer) return new URL(document.referrer).origin; } catch {}
+  return window.location.origin;
+})();
+
+/** Set status bar icon/text colour. Use instead of StatusBar.setStyle directly. */
+export async function setStatusBarStyle(style: Style): Promise<void> {
+  try { await StatusBar.setStyle({ style }); } catch {}
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: '__apsuite_statusbar', style }, _origin);
+  }
+}
+
+/** Set status bar background colour (Android). Use instead of StatusBar.setBackgroundColor directly. */
+export async function setStatusBarBackground(color: string): Promise<void> {
+  try { await (StatusBar as any).setBackgroundColor({ color }); } catch {}
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: '__apsuite_statusbar_bg', color }, _origin);
+  }
+}
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,27 @@
+import { defineConfig, type Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const injectRouterBasename: Plugin = {
+  name: 'inject-router-basename',
+  enforce: 'pre',
+  transform(code, id) {
+    if (!/\.[jt]sx$/.test(id)) return;
+    return code.replace(
+      /<IonReactRouter(?![^>]*basename)([^>]*)>/g,
+      '<IonReactRouter$1 basename={import.meta.env.BASE_URL}>',
+    );
+  },
+};
+
+export default defineConfig({
+  plugins: [injectRouterBasename, react()],
+  server: {
+    host: '0.0.0.0',
+    port: 8100,
+    allowedHosts: true,
+    hmr: {
+      clientPort: process.env.HMR_CLIENT_PORT ? parseInt(process.env.HMR_CLIENT_PORT) : undefined,
+    },
+  },
+  css: { devSourcemap: false },
+});