Add ChargeCatch demo app for offline session reconciliation to mock CMS

.github/workflows/ci.yml

@@ -49,7 +49,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        app: [tictactogether, stocksync, orderup, cowrite, outagenet, yardgate, eventfloor, agrimesh]
+        app: [tictactogether, stocksync, orderup, cowrite, outagenet, yardgate, eventfloor, agrimesh, chargecatch]
     steps:
       - uses: actions/checkout@v7
       - uses: pnpm/action-setup@v6
@@ -91,6 +91,8 @@ jobs:
             scheme: EventFloor
           - app: agrimesh
             scheme: AgriMesh
+          - app: chargecatch
+            scheme: ChargeCatch
     steps:
       - uses: actions/checkout@v7
       - uses: pnpm/action-setup@v6

README.md

@@ -21,6 +21,7 @@ accounts or server, and shows a different way to keep shared state in sync.
 | YardGate | [`apps/yardgate`](./apps/yardgate) | Logistics yard check-in: MeshServices discover + invoke, gate officer approve/deny, optional relay hop. |
 | Event Floor | [`apps/eventfloor`](./apps/eventfloor) | Live events: Flow A staff MLS dispatch + Flow B gate admission ledger and mock platform sync (`scanId` dedupe). |
 | AgriMesh | [`apps/agrimesh`](./apps/agrimesh) | Agriculture: field readings store-and-forward over multi-hop Bluetooth mesh, office-edge ledger, mock farm sync (`readingId` dedupe). |
+| ChargeCatch | [`apps/chargecatch`](./apps/chargecatch) | EV charge site: local session ledger on charge points, site hub over Bluetooth mesh, mock CMS reconciliation when head office link returns (`sessionId` dedupe). |
 
 Each app's README explains how to run it, how its sync works and what its tests cover.
 
@@ -97,7 +98,7 @@ pnpm --filter @offline-app-examples/stocksync ios -- --device
 pnpm --filter @offline-app-examples/stocksync android
 ```
 
-Replace `stocksync` with `tictactogether`, `orderup`, `cowrite`, `outagenet`, `yardgate`, `eventfloor`, or `agrimesh` for the other apps.
+Replace `stocksync` with `tictactogether`, `orderup`, `cowrite`, `outagenet`, `yardgate`, `eventfloor`, `agrimesh`, or `chargecatch` for the other apps.
 
 For iOS you can also open the app's `ios/*.xcworkspace` in Xcode, choose your team
 under Signing & Capabilities, and run on each phone. Debug builds load JavaScript

apps/chargecatch/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

apps/chargecatch/.gitignore

@@ -0,0 +1,16 @@
+node_modules/
+.expo/
+dist/
+build/
+ios/Pods/
+ios/build/
+android/app/build/
+android/build/
+android/.gradle/
+**/.cxx/
+android/local.properties
+*.jsbundle
+.DS_Store
+.env*
+!.env.example
+ios/.xcode.env.local

apps/chargecatch/.prettierrc.json

@@ -0,0 +1 @@
+{"singleQuote":true,"trailingComma":"all","bracketSpacing":true}

apps/chargecatch/App.tsx

@@ -0,0 +1,154 @@
+import '@offline-app-examples/ui/global.css';
+import { Button, Text } from '@offline-app-examples/ui';
+import React, { useState } from 'react';
+import { Pressable, StatusBar, TextInput, View } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { CHARGER_IDS, DEMO_SITE, type ChargerId } from './src/domain/cards';
+import { ChargeFlow, type ChargeRole } from './src/flows/ChargeFlow';
+import { ChargeHero } from './src/ui/illustrations';
+
+type Setup = { role: ChargeRole; displayName: string; chargerId: ChargerId };
+
+export default function App() {
+  const [setup, setSetup] = useState<Setup | null>(null);
+
+  if (setup) {
+    return (
+      <SafeAreaProvider>
+        <StatusBar barStyle="dark-content" />
+        <ChargeFlow
+          role={setup.role}
+          displayName={setup.displayName}
+          chargerId={setup.chargerId}
+          onLeave={() => setSetup(null)}
+        />
+      </SafeAreaProvider>
+    );
+  }
+
+  return (
+    <SafeAreaProvider>
+      <StatusBar barStyle="dark-content" />
+      <HomeLobby onStart={setSetup} />
+    </SafeAreaProvider>
+  );
+}
+
+function HomeLobby({ onStart }: { onStart: (setup: Setup) => void }) {
+  const [role, setRole] = useState<ChargeRole>('hub');
+  const [name, setName] = useState('North site hub');
+  const [chargerId, setChargerId] = useState<ChargerId>('CP-A');
+
+  const defaults: Record<ChargeRole, string> = {
+    hub: 'North site hub',
+    charger: 'Charge point A',
+    tech: 'Field tech',
+  };
+
+  return (
+    <SafeAreaView className="bg-background flex-1" edges={['top', 'left', 'right']}>
+      <View className="flex-1 px-6 pt-4">
+        <Text className="font-serif text-4xl">ChargeCatch</Text>
+        <Text className="text-muted-foreground mt-2 text-base leading-6">
+          {DEMO_SITE.name} — charge sessions stay on devices when head office is offline, hop to the
+          site hub over Bluetooth mesh, then reconcile to a mock CMS when connectivity returns (SDK
+          0.28).
+        </Text>
+        <View className="my-6 items-center">
+          <ChargeHero size={160} />
+        </View>
+        <RolePick
+          options={[
+            {
+              id: 'hub',
+              title: 'Site hub',
+              hint: 'Ledger for all charge points; upload to mock CMS',
+            },
+            {
+              id: 'charger',
+              title: 'Charge point',
+              hint: 'Run sessions; queue locally on comms fault',
+            },
+            {
+              id: 'tech',
+              title: 'Field tech',
+              hint: 'Clear charger comms faults after repair',
+            },
+          ]}
+          selected={role}
+          onSelect={(id) => {
+            const r = id as ChargeRole;
+            setRole(r);
+            setName(defaults[r]);
+          }}
+        />
+        {role === 'charger' ? (
+          <>
+            <Text className="text-muted-foreground mb-2 text-xs font-bold uppercase tracking-widest">
+              Charger id
+            </Text>
+            <View className="mb-4 flex-row gap-2">
+              {CHARGER_IDS.map((id) => (
+                <Pressable
+                  key={id}
+                  onPress={() => {
+                    setChargerId(id);
+                    setName(id === 'CP-A' ? 'Charge point A' : 'Charge point B');
+                  }}
+                  className={`flex-1 rounded-lg border-2 px-3 py-2 ${chargerId === id ? 'border-foreground bg-muted' : 'border-muted'}`}
+                >
+                  <Text className="text-center font-serif text-lg">{id}</Text>
+                </Pressable>
+              ))}
+            </View>
+          </>
+        ) : null}
+        <Text className="text-muted-foreground mb-2 text-xs font-bold uppercase tracking-widest">
+          Device label
+        </Text>
+        <TextInput
+          className="border-foreground text-foreground mb-4 rounded-lg border-2 px-3 py-3"
+          value={name}
+          onChangeText={setName}
+          placeholder={defaults[role]}
+        />
+        <Button
+          onPress={() =>
+            onStart({
+              role,
+              displayName: name.trim() || defaults[role],
+              chargerId: role === 'charger' ? chargerId : 'CP-A',
+            })
+          }
+        >
+          <Text>Start</Text>
+        </Button>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function RolePick({
+  options,
+  selected,
+  onSelect,
+}: {
+  options: { id: string; title: string; hint: string }[];
+  selected: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <View className="my-4 gap-2">
+      {options.map((o) => (
+        <Pressable
+          key={o.id}
+          onPress={() => onSelect(o.id)}
+          className={`rounded-xl border-2 px-4 py-3 ${selected === o.id ? 'border-foreground bg-muted' : 'border-muted'}`}
+        >
+          <Text className="font-serif text-xl">{o.title}</Text>
+          <Text className="text-muted-foreground text-sm">{o.hint}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}

apps/chargecatch/Gemfile

@@ -0,0 +1,17 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '~> 1.16.0'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '>= 1.25.0', '< 1.28.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+gem 'nkf'