anhedral 0.4.1 → 0.4.2

package/dist/templates/extension.js

@@ -40,12 +40,14 @@ export async function scaffoldExtension(root, options) {
         writeAuthContext(dir);
     if (options.apps.api)
         writeApiClient(dir);
+    if (options.apps.api && options.features.database)
+        writeItemList(dir, options.features.auth);
     if (options.features.billing)
         writeEntitlementHook(dir);
     writeBackground(dir, options.features.auth);
     writeSidepanelEntry(dir, options.features.auth);
     writeSidepanelHtml(dir, displayName);
-    writeSidepanelApp(dir, options.features.auth, options.features.billing);
+    writeSidepanelApp(dir, options.features.auth, options.features.billing, options.apps.api && options.features.database);
     writeStyles(dir);
     anhedralPrint.done('Extension source files written');
 }
@@ -427,7 +429,7 @@ function AuthProviderInner({ children }: { children: React.ReactNode }) {
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const backgroundError = useBackgroundAuthError();
-  if (!CLERK_PUBLISHABLE_KEY) {
+  if (!CLERK_PUBLISHABLE_KEY || CLERK_PUBLISHABLE_KEY.includes('***')) {
     return <ConfigurationError message="Set VITE_CLERK_PUBLISHABLE_KEY before building the extension." />;
   }
   const apiError = apiConfigurationError();
@@ -485,6 +487,104 @@ export function createApiClient(getToken?: () => Promise<string | null>) {
 }
 `);
 }
+function writeItemList(dir, hasAuth) {
+    const apiImport = hasAuth
+        ? "import { useAuth } from '../contexts/auth-context';\n"
+        : "import { createApiClient } from '../lib/api';\n";
+    const apiState = hasAuth
+        ? '  const { api, userId } = useAuth();\n  const identity = userId;\n'
+        : "  const api = React.useMemo(() => createApiClient(), []);\n  const identity = 'public';\n";
+    writeFile(path.join(dir, 'src/components/item-list.tsx'), `import { createItem, listItems, type Item } from '@shared/api-client';
+${apiImport}import * as React from 'react';
+import { Button } from './ui/button';
+
+export function ItemList() {
+${apiState}  const [items, setItems] = React.useState<Item[]>([]);
+  const [loadedIdentity, setLoadedIdentity] = React.useState<string | null>(null);
+  const [name, setName] = React.useState('');
+  const [status, setStatus] = React.useState<'loading' | 'ready' | 'saving'>('loading');
+  const [error, setError] = React.useState<string | null>(null);
+  const identityRef = React.useRef(identity);
+  const visibleItems = loadedIdentity === identity ? items : [];
+  const visibleError = loadedIdentity === identity ? error : null;
+  const isLoading = status === 'loading' || loadedIdentity !== identity;
+
+  React.useEffect(() => {
+    identityRef.current = identity;
+    if (!identity) return;
+    let active = true;
+    setLoadedIdentity(identity);
+    setItems([]);
+    setName('');
+    setError(null);
+    setStatus('loading');
+    void listItems(api).then((nextItems) => {
+      if (active) setItems(nextItems);
+    }).catch((cause: unknown) => {
+      if (active) setError(cause instanceof Error ? cause.message : 'Unable to load items');
+    }).finally(() => {
+      if (active) setStatus('ready');
+    });
+    return () => { active = false; };
+  }, [api, identity]);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextName = name.trim();
+    if (!identity || !nextName || status !== 'ready' || loadedIdentity !== identity) return;
+    const submittedIdentity = identity;
+    setStatus('saving');
+    try {
+      const created = await createItem(api, { name: nextName });
+      if (identityRef.current !== submittedIdentity) return;
+      setItems((current) => [created, ...current]);
+      setName('');
+      setError(null);
+    } catch (cause) {
+      if (identityRef.current === submittedIdentity) {
+        setError(cause instanceof Error ? cause.message : 'Unable to create item');
+      }
+    } finally {
+      if (identityRef.current === submittedIdentity) setStatus('ready');
+    }
+  }
+
+  return (
+    <section aria-labelledby="starter-feature-title" style={{ display: 'grid', gap: 10, marginTop: 20 }}>
+      <h3 id="starter-feature-title" style={{ margin: 0 }}>Working starter feature</h3>
+      <form onSubmit={(event) => void submit(event)} style={{ display: 'grid', gap: 8 }}>
+        <label htmlFor="item-name">Item name</label>
+        <input
+          id="item-name"
+          maxLength={120}
+          onChange={(event) => setName(event.target.value)}
+          placeholder="Your first item"
+          style={{ minHeight: 36, border: '1px solid hsl(var(--input))', borderRadius: 6, padding: '0 10px' }}
+          value={name}
+        />
+        <Button disabled={status !== 'ready' || loadedIdentity !== identity || !name.trim()} type="submit">
+          {status === 'saving' ? 'Adding…' : 'Add item'}
+        </Button>
+      </form>
+      {visibleError ? (
+        <p aria-live="assertive" role="alert" style={{ color: 'hsl(var(--destructive))' }}>
+          {visibleError}. Check DATABASE_URL, run pnpm db:migrate, and make sure the API is running.
+        </p>
+      ) : null}
+      {isLoading ? <p role="status">Loading items…</p> : null}
+      {!isLoading && visibleItems.length === 0 && !visibleError
+        ? <p>Your database is connected. Add the first item.</p>
+        : null}
+      {visibleItems.length > 0 ? (
+        <ul style={{ margin: 0, paddingLeft: 20 }}>
+          {visibleItems.map((item) => <li key={item.id}>{item.name}</li>)}
+        </ul>
+      ) : null}
+    </section>
+  );
+}
+`);
+}
 function writeEntitlementHook(dir) {
     writeFile(path.join(dir, 'src/hooks/use-entitlement.ts'), `import { subscribeToSubscriptionChanges } from '@shared/realtime';
 import * as React from 'react';
@@ -492,36 +592,58 @@ import { useAuth } from '../contexts/auth-context';
 
 export function useEntitlement() {
   const { api, isSignedIn, userId } = useAuth();
+  const identity = isSignedIn ? userId : null;
   const [entitlement, setEntitlement] = React.useState<Awaited<ReturnType<typeof api.getEntitlement>> | null>(null);
+  const [loadedIdentity, setLoadedIdentity] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const revision = React.useRef(0);
+  const identityRef = React.useRef(identity);
   const refresh = React.useCallback(async () => {
-    if (!isSignedIn) return;
+    if (!identity) return;
     try {
       const next = await api.getEntitlement();
+      if (identityRef.current !== identity) return;
       revision.current = Math.max(revision.current, next.revision);
       setEntitlement(next);
+      setLoadedIdentity(identity);
       setError(null);
     } catch (cause) {
+      if (identityRef.current !== identity) return;
+      setLoadedIdentity(identity);
       setError(cause instanceof Error ? cause.message : 'Unable to load subscription');
     }
-  }, [api, isSignedIn]);
-  React.useEffect(() => { void refresh(); }, [refresh]);
+  }, [api, identity]);
+  React.useEffect(() => {
+    identityRef.current = identity;
+    revision.current = 0;
+    setEntitlement(null);
+    setLoadedIdentity(null);
+    setError(null);
+    void refresh();
+  }, [identity, refresh]);
   React.useEffect(() => {
     const onVisibility = () => { if (document.visibilityState === 'visible') void refresh(); };
     document.addEventListener('visibilitychange', onVisibility);
     return () => document.removeEventListener('visibilitychange', onVisibility);
   }, [refresh]);
   React.useEffect(() => {
-    if (!userId || !isSignedIn) return;
+    if (!identity) return;
     return subscribeToSubscriptionChanges({
-      userId,
+      userId: identity,
       getTokenRequest: () => api.getRealtimeToken(),
       onChange: (nextRevision) => { if (nextRevision > revision.current) void refresh(); },
-      onError: (cause) => setError(cause.message),
+      onError: (cause) => {
+        if (identityRef.current === identity) {
+          setLoadedIdentity(identity);
+          setError(cause.message);
+        }
+      },
     });
-  }, [api, isSignedIn, refresh, userId]);
-  return { entitlement, error };
+  }, [api, identity, refresh]);
+  return {
+    entitlement: loadedIdentity === identity ? entitlement : null,
+    error: loadedIdentity === identity ? error : null,
+  };
 }
 `);
 }
@@ -532,7 +654,7 @@ function writeBackground(dir, hasAuth) {
     const clerkInitialization = hasAuth
         ? `  const backgroundAuthErrorKey = 'anhedralClerkBackgroundError';
   const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY?.trim();
-  if (!publishableKey) {
+  if (!publishableKey || publishableKey.includes('***')) {
     void chrome.storage.local.set({
       [backgroundAuthErrorKey]: 'Set VITE_CLERK_PUBLISHABLE_KEY before building the extension.',
     });
@@ -604,7 +726,7 @@ function writeSidepanelHtml(dir, displayName) {
 </html>
 `);
 }
-function writeSidepanelApp(dir, hasAuth, hasBilling) {
+function writeSidepanelApp(dir, hasAuth, hasBilling, hasItems) {
     const authImports = hasAuth
         ? "import { useAuth } from '../../contexts/auth-context';\nimport { SignIn } from '@clerk/chrome-extension';\n"
         : '';
@@ -636,8 +758,10 @@ function writeSidepanelApp(dir, hasAuth, hasBilling) {
       {entitlementError ? <p role="alert" style={{ color: 'hsl(var(--destructive))' }}>{entitlementError}</p> : null}
 `
         : '';
+    const itemListImport = hasItems ? "import { ItemList } from '../../components/item-list';\n" : '';
+    const itemList = hasItems ? '      <ItemList />\n' : '';
     writeFile(path.join(dir, 'src/entrypoints/sidepanel/app.tsx'), `import * as React from 'react';
-${authImports}${entitlementImport}import { Button } from '../../components/ui/button';
+${authImports}${entitlementImport}${itemListImport}import { Button } from '../../components/ui/button';
 
 type PageSnapshot = {
   title: string;
@@ -680,7 +804,7 @@ ${authGuards}
         </div>
       ) : null}
       {pageError ? <p role="alert" aria-live="assertive" style={{ color: 'hsl(var(--destructive))' }}>{pageError}</p> : null}
-${entitlementStatus}${signOutButton}    </div>
+${itemList}${entitlementStatus}${signOutButton}    </div>
   );
 }
 `);

package/dist/templates/first-run.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectOptions } from '../project.js';
+export declare function generatedFirstRunScript(options: ProjectOptions): string;

package/dist/templates/first-run.js

@@ -0,0 +1,167 @@
+function environmentFiles(options) {
+    return [
+        options.apps.api ? {
+            example: 'apps/api/.env.example',
+            target: 'apps/api/.env',
+            optional: options.features.storage ? ['CLOUDFLARE_API_TOKEN'] : [],
+        } : null,
+        options.features.database ? {
+            example: 'packages/db/.env.example',
+            target: 'packages/db/.env',
+            optional: [],
+        } : null,
+        options.apps.web ? {
+            example: 'apps/web/.env.example',
+            target: 'apps/web/.env.local',
+            optional: [],
+        } : null,
+        options.apps.mobile ? {
+            example: 'apps/mobile/.env.example',
+            target: 'apps/mobile/.env',
+            optional: [],
+        } : null,
+        options.apps.desktop ? {
+            example: 'apps/desktop/.env.example',
+            target: 'apps/desktop/.env',
+            optional: [],
+        } : null,
+        options.features.electronUpdater ? {
+            example: 'apps/desktop/electron-builder.env.example',
+            target: 'apps/desktop/electron-builder.env',
+            optional: [],
+        } : null,
+        options.apps.extension ? {
+            example: 'apps/extension/.env.example',
+            target: 'apps/extension/.env',
+            optional: [
+                ...(options.features.auth ? ['VITE_CLERK_SYNC_HOST'] : []),
+                'VITE_CRX_PUBLIC_KEY',
+            ],
+        } : null,
+    ].filter((entry) => entry !== null);
+}
+function nextCommands(options) {
+    return [
+        'pnpm ready',
+        options.features.database ? 'pnpm db:generate' : null,
+        options.features.database ? 'git add packages/db/migrations' : null,
+        'pnpm verify',
+        options.features.database ? 'pnpm db:migrate' : null,
+        'pnpm dev',
+    ].filter((entry) => entry !== null);
+}
+export function generatedFirstRunScript(options) {
+    return `import { copyFileSync, existsSync, readFileSync } from 'node:fs';
+
+const environmentFiles = ${JSON.stringify(environmentFiles(options), null, 2)};
+const args = new Set(process.argv.slice(2));
+const supportedArgs = new Set(['--check', '--json']);
+const unknownArgs = [...args].filter((arg) => !supportedArgs.has(arg));
+if (unknownArgs.length > 0) {
+  console.error(\`Unknown first-run option: \${unknownArgs[0]}. Use --check and/or --json.\`);
+  process.exit(2);
+}
+
+const checkOnly = args.has('--check');
+const json = args.has('--json');
+const created = [];
+const kept = [];
+const missing = [];
+const unresolved = [];
+
+function unquote(value) {
+  const trimmed = value.trim();
+  if (trimmed.length >= 2) {
+    const first = trimmed[0];
+    const last = trimmed[trimmed.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return trimmed.slice(1, -1).trim();
+    }
+  }
+  return trimmed;
+}
+
+function isPlaceholder(value) {
+  const normalized = unquote(value).toLowerCase();
+  return normalized.includes('***')
+    || normalized.includes('your_')
+    || normalized.includes('your-')
+    || normalized.includes('example.com')
+    || /^(?:change|replace)(?:[-_ ]?me)?(?:[-_ ].*)?$/.test(normalized)
+    || /^(?:placeholder|your value|your-value|your_value)$/.test(normalized);
+}
+
+function environmentValues(source) {
+  const values = new Map();
+  for (const line of source.split(/\\r?\\n/)) {
+    const match = /^(?:export\\s+)?([A-Z][A-Z0-9_]*)=(.*)$/.exec(line.trim());
+    if (match) values.set(match[1], unquote(match[2]));
+  }
+  return values;
+}
+
+for (const { example, target, optional } of environmentFiles) {
+  if (!existsSync(target)) {
+    if (checkOnly) {
+      missing.push(target);
+      continue;
+    }
+    copyFileSync(example, target);
+    created.push(target);
+  } else {
+    kept.push(target);
+  }
+  const optionalNames = new Set(optional);
+  const expected = environmentValues(readFileSync(example, 'utf8'));
+  const actual = environmentValues(readFileSync(target, 'utf8'));
+  for (const name of expected.keys()) {
+    if (!optionalNames.has(name)) {
+      const value = actual.get(name);
+      if (value === undefined || !value || isPlaceholder(value)) {
+        unresolved.push(\`\${target}: \${name}\`);
+      }
+    }
+  }
+}
+
+const blockers = [
+  ...missing.map((target) => \`\${target}: file is missing\`),
+  ...unresolved,
+];
+const result = {
+  operation: checkOnly ? 'ready' : 'first-run',
+  ok: blockers.length === 0,
+  created,
+  kept,
+  missing,
+  unresolved,
+  nextCommands: ${JSON.stringify(nextCommands(options))},
+};
+
+if (json) {
+  console.log(JSON.stringify(result, null, 2));
+} else {
+  for (const target of created) console.log(\`created \${target}\`);
+  for (const target of kept) console.log(\`kept    \${target}\`);
+
+  if (blockers.length > 0) {
+    console.log('\\nConfiguration is not ready:');
+    for (const item of blockers) console.log(\`  - \${item}\`);
+    console.log(checkOnly
+      ? '\\nRun pnpm first-run to create missing files, configure the listed values, then run pnpm ready again.'
+      : '\\nConfigure the listed values, then run pnpm ready.');
+  } else {
+    console.log('\\nConfiguration is ready.');
+    ${options.features.database
+        ? "console.log('Before verification, review the SQL created by pnpm db:generate before staging it.');"
+        : ''}
+    console.log('\\nNext:');
+    for (const command of result.nextCommands.filter((command) => command !== 'pnpm ready')) {
+      console.log(\`  \${command}\`);
+    }
+  }
+}
+
+if (checkOnly && blockers.length > 0) process.exitCode = 1;
+`;
+}

package/dist/templates/mobile.d.ts

@@ -1,2 +1,2 @@
-import type { ProjectOptions } from '../scaffold.js';
+import type { ProjectOptions } from '../project.js';
 export declare function scaffoldMobile(root: string, options: ProjectOptions): Promise<void>;

package/dist/templates/mobile.js

@@ -2,7 +2,7 @@ import path from 'node:path';
 import { anhedralPrint } from '../print.js';
 import { appendGitignore, writeFile } from '../util.js';
 import { childPackageName, jsString } from '../render.js';
-import { FRONTEND_ADDON_DEPENDENCIES, MOBILE_APP_DEPENDENCIES, MOBILE_NATIVEWIND_DEPENDENCIES, MOBILE_UNIWIND_DEPENDENCIES, TOOLCHAIN_DEPENDENCIES, } from '../dependencies.js';
+import { CLERK_SOLANA_PEER_DEPENDENCIES, FRONTEND_ADDON_DEPENDENCIES, MOBILE_APP_DEPENDENCIES, MOBILE_NATIVEWIND_DEPENDENCIES, MOBILE_UNIWIND_DEPENDENCIES, TOOLCHAIN_DEPENDENCIES, } from '../dependencies.js';
 function selectedDependencies(options) {
     const dependencies = { ...(MOBILE_APP_DEPENDENCIES.dependencies ?? {}) };
     Object.assign(dependencies, (options.nativeStyling ?? 'nativewind') === 'uniwind'
@@ -13,11 +13,10 @@ function selectedDependencies(options) {
     if (!options.features.billing)
         delete dependencies['@shared/realtime'];
     if (options.features.auth) {
-        for (const name of [
-            '@clerk/expo',
-            'expo-secure-store',
-        ])
+        Object.assign(dependencies, CLERK_SOLANA_PEER_DEPENDENCIES);
+        for (const name of ['@clerk/expo', 'expo-secure-store']) {
             dependencies[name] = FRONTEND_ADDON_DEPENDENCIES[name];
+        }
     }
     if (options.features.nativeSubscriptions) {
         dependencies['react-native-purchases'] = FRONTEND_ADDON_DEPENDENCIES['react-native-purchases'];
@@ -314,7 +313,7 @@ import { ${options.features.auth ? 'syncRevenueCatUser, type SubscriptionState'
 ` : '';
     const layoutBody = options.features.auth
         ? `  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
-  if (!publishableKey) {
+  if (!publishableKey || publishableKey.includes('***')) {
     return (
       <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', padding: 32 }}>
         <View style={{ gap: 8 }}>
@@ -349,6 +348,7 @@ ${layoutBody}
             : null,
         options.features.auth ? "import { AccountControls } from '../components/account-controls';" : null,
         options.features.billing ? "import { useEntitlement } from '../hooks/use-entitlement';" : null,
+        options.apps.api && options.features.database ? "import { ItemList } from '../components/item-list';" : null,
     ].filter((value) => value !== null).join('\n');
     const reactNativeImports = options.features.nativeSubscriptions
         ? 'Button, ScrollView, StyleSheet, Text, View'
@@ -390,6 +390,7 @@ ${layoutBody}
         ? '        <SubscriptionControls />\n'
         : '';
     const accountControls = options.features.auth ? '        <AccountControls />\n' : '';
+    const itemList = options.apps.api && options.features.database ? '        <ItemList />\n' : '';
     writeFile(path.join(dir, 'app/index.tsx'), `import { StatusBar } from 'expo-status-bar';
 import { ${reactNativeImports} } from 'react-native';
 ${homeImports}
@@ -404,7 +405,7 @@ ${subscriptionComponent}export default function HomeScreen() {
         <Text accessibilityRole="header" style={styles.title}>{${nameLiteral}}</Text>
         <Text selectable style={styles.subtitle}>Deterministic Expo application generated by Anhedral.</Text>
         {enabledModules.map((moduleName) => <Text selectable key={moduleName} style={styles.module}>• {moduleName}</Text>)}
-${accountControls}${nativeSubscriptionAction}      </View>
+${accountControls}${itemList}${nativeSubscriptionAction}      </View>
     </ScrollView>
   );
 }
@@ -421,6 +422,117 @@ const styles = StyleSheet.create({
   error: { color: '#b91c1c', fontSize: 14 },
 });
 `);
+    if (options.apps.api && options.features.database) {
+        const authImport = options.features.auth ? "import { useAuth } from '@clerk/expo';\n" : '';
+        const authState = options.features.auth ? '  const { isLoaded, isSignedIn, userId } = useAuth();\n' : '';
+        const identityState = options.features.auth
+            ? '  const identity = isLoaded && isSignedIn ? userId ?? null : null;\n'
+            : "  const identity = 'public';\n";
+        const authGuard = options.features.auth
+            ? `  if (!isLoaded || (isSignedIn && !userId)) return <Text selectable style={styles.status}>Loading account…</Text>;
+  if (!isSignedIn) return <Text selectable style={styles.status}>Sign in to use the working starter feature.</Text>;
+
+`
+            : '';
+        writeFile(path.join(dir, 'components/item-list.tsx'), `import { createItem, listItems, type Item } from '@shared/api-client';
+${authImport}import * as React from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useApiClient } from '../hooks/use-api-client';
+
+export function ItemList() {
+${authState}${identityState}  const api = useApiClient();
+  const [items, setItems] = React.useState<Item[]>([]);
+  const [loadedIdentity, setLoadedIdentity] = React.useState<string | null>(null);
+  const [name, setName] = React.useState('');
+  const [status, setStatus] = React.useState<'loading' | 'ready' | 'saving'>('loading');
+  const [error, setError] = React.useState<string | null>(null);
+  const identityRef = React.useRef(identity);
+  const visibleItems = loadedIdentity === identity ? items : [];
+  const visibleError = loadedIdentity === identity ? error : null;
+  const isLoading = status === 'loading' || loadedIdentity !== identity;
+
+  React.useEffect(() => {
+    identityRef.current = identity;
+    if (!identity) return;
+    let active = true;
+    setLoadedIdentity(identity);
+    setItems([]);
+    setName('');
+    setError(null);
+    setStatus('loading');
+    void listItems(api).then((nextItems) => {
+      if (active) setItems(nextItems);
+    }).catch((cause: unknown) => {
+      if (active) setError(cause instanceof Error ? cause.message : 'Unable to load items');
+    }).finally(() => {
+      if (active) setStatus('ready');
+    });
+    return () => { active = false; };
+  }, [api, identity]);
+
+  const submit = async () => {
+    const nextName = name.trim();
+    if (!identity || !nextName || status !== 'ready' || loadedIdentity !== identity) return;
+    const submittedIdentity = identity;
+    setStatus('saving');
+    try {
+      const created = await createItem(api, { name: nextName });
+      if (identityRef.current !== submittedIdentity) return;
+      setItems((current) => [created, ...current]);
+      setName('');
+      setError(null);
+    } catch (cause) {
+      if (identityRef.current === submittedIdentity) {
+        setError(cause instanceof Error ? cause.message : 'Unable to create item');
+      }
+    } finally {
+      if (identityRef.current === submittedIdentity) setStatus('ready');
+    }
+  };
+
+${authGuard}  return (
+    <View accessibilityLabel="Working starter feature" style={styles.card}>
+      <Text accessibilityRole="header" style={styles.heading}>Working starter feature</Text>
+      <View style={styles.form}>
+        <TextInput
+          accessibilityLabel="Item name"
+          maxLength={120}
+          onChangeText={setName}
+          placeholder="Your first item"
+          style={styles.input}
+          value={name}
+        />
+        <Button
+          disabled={status !== 'ready' || loadedIdentity !== identity || !name.trim()}
+          onPress={() => void submit()}
+          title={status === 'saving' ? 'Adding…' : 'Add item'}
+        />
+      </View>
+      {visibleError ? (
+        <Text accessibilityLiveRegion="assertive" selectable style={styles.error}>
+          {visibleError}. Check DATABASE_URL, run pnpm db:migrate, and make sure the API is running.
+        </Text>
+      ) : null}
+      {isLoading ? <Text selectable style={styles.status}>Loading items…</Text> : null}
+      {!isLoading && visibleItems.length === 0 && !visibleError
+        ? <Text selectable style={styles.status}>Your database is connected. Add the first item.</Text>
+        : null}
+      {visibleItems.map((item) => <Text key={item.id} selectable style={styles.item}>• {item.name}</Text>)}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { gap: 10, marginTop: 12, padding: 16, borderRadius: 12, backgroundColor: '#ffffff' },
+  heading: { color: '#0f172a', fontSize: 18, fontWeight: '700' },
+  form: { gap: 8 },
+  input: { minHeight: 44, borderWidth: 1, borderColor: '#cbd5e1', borderRadius: 8, paddingHorizontal: 12, color: '#0f172a' },
+  item: { color: '#1e293b', fontSize: 15 },
+  status: { color: '#475569', fontSize: 14 },
+  error: { color: '#b91c1c', fontSize: 14 },
+});
+`);
+    }
     if (options.features.auth) {
         writeFile(path.join(dir, 'components/account-controls.tsx'), `import { Show, useClerk, useUser } from '@clerk/expo';
 import { useState } from 'react';
@@ -491,8 +603,8 @@ export function createApiClient(getToken?: () => Promise<string | null>) {
 }
 `);
     }
-    if (options.apps.api && options.features.auth) {
-        writeFile(path.join(dir, 'hooks/use-api-client.ts'), `import { useAuth } from '@clerk/expo';
+    if (options.apps.api) {
+        writeFile(path.join(dir, 'hooks/use-api-client.ts'), options.features.auth ? `import { useAuth } from '@clerk/expo';
 import { useMemo } from 'react';
 import { createApiClient } from '../lib/api';
 
@@ -500,6 +612,12 @@ export function useApiClient() {
   const { getToken } = useAuth();
   return useMemo(() => createApiClient(() => getToken()), [getToken]);
 }
+` : `import { useMemo } from 'react';
+import { createApiClient } from '../lib/api';
+
+export function useApiClient() {
+  return useMemo(() => createApiClient(), []);
+}
 `);
     }
     if (options.features.billing) {
@@ -513,22 +631,36 @@ ${options.features.nativeSubscriptions ? "import { subscribeToRevenueCatUpdates
 export function useEntitlement() {
   const api = useApiClient();
   const { isLoaded, isSignedIn, userId } = useAuth();
+  const identity = isLoaded && isSignedIn ? userId : null;
   const [entitlement, setEntitlement] = React.useState<Awaited<ReturnType<typeof api.getEntitlement>> | null>(null);
+  const [loadedIdentity, setLoadedIdentity] = React.useState<string | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const revision = React.useRef(0);
+  const identityRef = React.useRef(identity);
   const refresh = React.useCallback(async (reconcile = false) => {
-    if (!isLoaded || !isSignedIn) return;
+    if (!identity) return;
     try {
       const next = reconcile ? await api.refreshEntitlement() : await api.getEntitlement();
+      if (identityRef.current !== identity) return;
       revision.current = Math.max(revision.current, next.revision);
       setEntitlement(next);
+      setLoadedIdentity(identity);
       setError(null);
     } catch (cause) {
+      if (identityRef.current !== identity) return;
+      setLoadedIdentity(identity);
       setError(cause instanceof Error ? cause.message : 'Unable to load subscription');
     }
-  }, [api, isLoaded, isSignedIn]);
+  }, [api, identity]);
 
-  React.useEffect(() => { void refresh(); }, [refresh]);
+  React.useEffect(() => {
+    identityRef.current = identity;
+    revision.current = 0;
+    setEntitlement(null);
+    setLoadedIdentity(null);
+    setError(null);
+    void refresh();
+  }, [identity, refresh]);
   ${options.features.nativeSubscriptions ? 'React.useEffect(() => subscribeToRevenueCatUpdates(() => { void refresh(true); }), [refresh]);' : ''}
   React.useEffect(() => {
     const subscription = AppState.addEventListener('change', (state) => {
@@ -537,17 +669,26 @@ export function useEntitlement() {
     return () => subscription.remove();
   }, [refresh]);
   React.useEffect(() => {
-    if (!userId || !isSignedIn) return;
+    if (!identity) return;
     return subscribeToSubscriptionChanges({
-      userId,
+      userId: identity,
       getTokenRequest: () => api.getRealtimeToken(),
       onChange: (nextRevision) => {
         if (nextRevision > revision.current) void refresh();
       },
-      onError: (cause) => setError(cause.message),
+      onError: (cause) => {
+        if (identityRef.current === identity) {
+          setLoadedIdentity(identity);
+          setError(cause.message);
+        }
+      },
     });
-  }, [api, isSignedIn, refresh, userId]);
-  return { entitlement, error, refresh };
+  }, [api, identity, refresh]);
+  return {
+    entitlement: loadedIdentity === identity ? entitlement : null,
+    error: loadedIdentity === identity ? error : null,
+    refresh,
+  };
 }
 `);
     }