Mobile: bottom tab bar (Cards · Collectibles · Agents · Settings)

Restructure the app into an Expo Router (tabs) group with a bottom navbar:
- 🎒 Cards (bag-personal) = the gallery (moved from app/index.tsx).
- 💰 Collectibles (sack) + 🤖 Agents (robot) = new empty-state screens.
- ⚙️ Settings (cog) = demo settings (app info + Clear all cards).
Root stack hides the (tabs) header; removed the Phase-1 (tabs)/cards.tsx and
pointed the dormant (auth)/login redirect at "/". localCardsStore gains clear().

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/(auth)/login.tsx

@@ -37,7 +37,7 @@ export default function LoginScreen() {
       } else {
         await login(email, password);
       }
-      router.replace("/(tabs)/cards");
+      router.replace("/");
     } catch {
       setError(mode === "login" ? "Invalid email or password" : "Could not create account");
     } finally {

cardclaws-mobile/app/(tabs)/_layout.tsx

@@ -1,18 +1,39 @@
+// Bottom tab bar for the standalone app:
+//   backpack → your cards (gallery)
+//   money bag → collectible cards
+//   robot → work-agent cards
+//   cog → settings
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 
+type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
+
+function tabIcon(name: IconName) {
+  return ({ color, size }: { color: string; size: number }) => (
+    <MaterialCommunityIcons name={name} size={size} color={color} />
+  );
+}
+
 export default function TabsLayout() {
   return (
     <Tabs
       screenOptions={{
-        headerStyle: { backgroundColor: "#0a0a0c" },
+        headerShown: false,
-        headerTintColor: "#f5f5f7",
-        tabBarStyle: { backgroundColor: "#0a0a0c", borderTopColor: "#1a1a1f" },
         tabBarActiveTintColor: "#ff3b30",
         tabBarInactiveTintColor: "#6b6b70",
+        tabBarStyle: {
+          backgroundColor: "#0e0e12",
+          borderTopColor: "#1c1c22",
+        },
       }}
     >
-      <Tabs.Screen name="cards" options={{ title: "Cards" }} />
+      <Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />
-      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+      <Tabs.Screen
+        name="collectibles"
+        options={{ title: "Collectibles", tabBarIcon: tabIcon("sack") }}
+      />
+      <Tabs.Screen name="agents" options={{ title: "Agents", tabBarIcon: tabIcon("robot") }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings", tabBarIcon: tabIcon("cog") }} />
     </Tabs>
   );
 }

cardclaws-mobile/app/(tabs)/agents.tsx

@@ -0,0 +1,27 @@
+// Work-agent cards — AI agents attached to your cards. None yet; this is their
+// home.
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function Agents() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.root, { paddingTop: insets.top }]}>
+      <View style={styles.center}>
+        <MaterialCommunityIcons name="robot" size={48} color="#3a3a44" />
+        <Text style={styles.title}>No agent cards yet</Text>
+        <Text style={styles.hint}>
+          Cards backed by an AI work agent will appear here.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 32, gap: 10 },
+  title: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  hint: { color: "#6b6b70", fontSize: 14, textAlign: "center", lineHeight: 20 },
+});

cardclaws-mobile/app/(tabs)/cards.tsx

@@ -1,100 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
-import { createCard, listCards } from "../../src/api/cards";
-import { useAuthStore } from "../../src/stores/authStore";
-import { CardDefinition, DEFAULT_SETTINGS, emptySide } from "../../src/types/card";
-
-function defaultCard(handle: string, ownerId: string): CardDefinition {
-  return {
-    id: "",
-    ownerId,
-    handle,
-    version: 1,
-    face: emptySide("#1b1b2f"),
-    back: emptySide("#1b1b2f"),
-    palette: {
-      colors: [
-        { name: "Ocean", hex: "#1b1b2f", role: "background" },
-        { name: "Snow", hex: "#f5f5f7", role: "text" },
-        { name: "Claw", hex: "#ff3b30", role: "accent" },
-      ],
-    },
-    settings: DEFAULT_SETTINGS,
-  };
-}
-
-export default function CardsScreen() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const user = useAuthStore((s) => s.user);
-
-  const { data: cards = [], isLoading } = useQuery({
-    queryKey: ["cards"],
-    queryFn: listCards,
-  });
-
-  const create = useMutation({
-    mutationFn: () => {
-      const suffix = Math.floor(Math.random() * 1e4).toString(36);
-      const handle = `${(user?.handle ?? "card").slice(0, 22)}-${suffix}`;
-      return createCard(handle, defaultCard(handle, user?.id ?? ""));
-    },
-    onSuccess: (card) => {
-      queryClient.invalidateQueries({ queryKey: ["cards"] });
-      router.push(`/builder/${card.id}`);
-    },
-  });
-
-  return (
-    <View style={styles.root}>
-      <FlatList
-        data={cards}
-        keyExtractor={(c) => c.id}
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          isLoading ? null : <Text style={styles.empty}>No cards yet. Create your first.</Text>
-        }
-        renderItem={({ item }) => (
-          <Pressable style={styles.card} onPress={() => router.push(`/card/${item.id}/view`)}>
-            <Text style={styles.handle}>@{item.handle}</Text>
-            <Text style={styles.status}>{item.status}</Text>
-            <Pressable onPress={() => router.push(`/builder/${item.id}`)} hitSlop={8}>
-              <Text style={styles.edit}>Edit</Text>
-            </Pressable>
-          </Pressable>
-        )}
-      />
-      <Pressable style={styles.fab} onPress={() => create.mutate()} disabled={create.isPending}>
-        <Text style={styles.fabText}>+ New card</Text>
-      </Pressable>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: "#0a0a0c" },
-  list: { padding: 16, gap: 12 },
-  empty: { color: "#6b6b70", textAlign: "center", marginTop: 64 },
-  card: {
-    backgroundColor: "#15151a",
-    borderRadius: 16,
-    padding: 18,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  handle: { color: "#f5f5f7", fontSize: 18, fontWeight: "700", flex: 1 },
-  status: { color: "#9a9aa0", textTransform: "uppercase", fontSize: 12 },
-  edit: { color: "#ff3b30", fontWeight: "600" },
-  fab: {
-    position: "absolute",
-    bottom: 24,
-    alignSelf: "center",
-    backgroundColor: "#ff3b30",
-    borderRadius: 28,
-    paddingHorizontal: 28,
-    paddingVertical: 16,
-  },
-  fabText: { color: "#fff", fontWeight: "700", fontSize: 16 },
-});

cardclaws-mobile/app/(tabs)/collectibles.tsx

@@ -0,0 +1,27 @@
+// Collectible cards — cards you've collected from people you meet (a deck you
+// build up). No collectibles yet; this is the home for them.
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function Collectibles() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.root, { paddingTop: insets.top }]}>
+      <View style={styles.center}>
+        <MaterialCommunityIcons name="sack" size={48} color="#3a3a44" />
+        <Text style={styles.title}>No collectibles yet</Text>
+        <Text style={styles.hint}>
+          Cards you collect from people you meet will live here — build your deck.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 32, gap: 10 },
+  title: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  hint: { color: "#6b6b70", fontSize: 14, textAlign: "center", lineHeight: 20 },
+});

cardclaws-mobile/app/(tabs)/index.tsx

@@ -1,11 +1,11 @@
 // Gallery of cards saved on this device (standalone demo). Clean, chrome-free:
 // just the cards, auto-arranging by count, plus a New-card button.
 
-import { Stack, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { CardThumb } from "../src/components/CardThumb";
+import { CardThumb } from "../../src/components/CardThumb";
-import { LocalCard, useLocalCardsStore } from "../src/stores/localCardsStore";
+import { LocalCard, useLocalCardsStore } from "../../src/stores/localCardsStore";
 
 /// Shrink tiles as the gallery grows: 2 columns → 4 fit a screen, 3 columns →
 /// ~8 fit, 4 columns beyond that.
@@ -23,8 +23,6 @@ export default function Gallery() {
 
   return (
     <View style={styles.root}>
-      <Stack.Screen options={{ headerShown: false }} />
-
       <FlatList
         data={cards}
         keyExtractor={(c) => c.id}
@@ -56,7 +54,7 @@ export default function Gallery() {
         )}
       />
 
-      <Pressable style={styles.fab} onPress={() => router.push("/demo")}>
+      <Pressable style={[styles.fab, { bottom: 24 }]} onPress={() => router.push("/demo")}>
         <Text style={styles.fabText}>+ New card</Text>
       </Pressable>
     </View>
@@ -65,7 +63,7 @@ export default function Gallery() {
 
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: "#0a0a0c" },
-  list: { paddingHorizontal: 16, paddingBottom: 110, flexGrow: 1 },
+  list: { paddingHorizontal: 16, paddingBottom: 96, flexGrow: 1 },
   column: { gap: 12 },
   tile: { flex: 1, marginBottom: 12, borderRadius: 18, overflow: "hidden", backgroundColor: "#15151a" },
   tileImage: { width: "100%", aspectRatio: 2 / 3, overflow: "hidden" },
@@ -79,7 +77,6 @@ const styles = StyleSheet.create({
   emptyHint: { color: "#6b6b70" },
   fab: {
     position: "absolute",
-    bottom: 28,
     alignSelf: "center",
     backgroundColor: "#ff3b30",
     borderRadius: 28,

cardclaws-mobile/app/(tabs)/settings.tsx

@@ -1,55 +1,75 @@
-import { useRouter } from "expo-router";
+// Settings (standalone demo): app info + manage local data.
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
-import { logout } from "../../src/api/auth";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAuthStore } from "../../src/stores/authStore";
+import { useLocalCardsStore } from "../../src/stores/localCardsStore";
 
 export default function SettingsScreen() {
-  const router = useRouter();
+  const insets = useSafeAreaInsets();
-  const user = useAuthStore((s) => s.user);
+  const count = useLocalCardsStore((s) => s.cards.length);
+  const clear = useLocalCardsStore((s) => s.clear);
 
-  const onLogout = async () => {
+  const confirmClear = () => {
-    await logout();
+    Alert.alert(
-    router.replace("/(auth)/login");
+      "Clear all cards?",
+      `This removes all ${count} card(s) on this device. This can't be undone.`,
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Clear", style: "destructive", onPress: () => clear() },
+      ],
+    );
   };
 
   return (
-    <View style={styles.root}>
+    <View style={[styles.root, { paddingTop: insets.top + 16 }]}>
-      <View style={styles.row}>
+      <Text style={styles.h1}>Settings</Text>
-        <Text style={styles.label}>Signed in as</Text>
+
-        <Text style={styles.value}>{user?.email ?? "—"}</Text>
+      <View style={styles.card}>
+        <Row label="App" value="CardClaws" />
+        <Row label="Mode" value="Standalone demo" />
+        <Row label="Version" value="0.1.0" />
+        <Row label="Cards on device" value={String(count)} />
       </View>
-      <View style={styles.row}>
+
-        <Text style={styles.label}>Handle</Text>
+      <Pressable
-        <Text style={styles.value}>@{user?.handle ?? "—"}</Text>
+        style={[styles.danger, count === 0 && styles.disabled]}
-      </View>
+        disabled={count === 0}
-      <View style={styles.row}>
+        onPress={confirmClear}
-        <Text style={styles.label}>Plan</Text>
+      >
-        <Text style={styles.value}>{user?.tier ?? "free"}</Text>
+        <Text style={styles.dangerText}>Clear all cards</Text>
-      </View>
-      <Pressable style={styles.logout} onPress={onLogout}>
-        <Text style={styles.logoutText}>Sign out</Text>
       </Pressable>
     </View>
   );
 }
 
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.label}>{label}</Text>
+      <Text style={styles.value}>{value}</Text>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: "#0a0a0c", padding: 16, gap: 4 },
+  root: { flex: 1, backgroundColor: "#0a0a0c", paddingHorizontal: 20, gap: 16 },
+  h1: { color: "#f5f5f7", fontSize: 28, fontWeight: "800" },
+  card: { backgroundColor: "#15151a", borderRadius: 16, paddingHorizontal: 16 },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingVertical: 16,
+    paddingVertical: 14,
-    borderBottomColor: "#1a1a1f",
+    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: 1,
+    borderBottomColor: "#22222a",
   },
   label: { color: "#9a9aa0", fontSize: 15 },
   value: { color: "#f5f5f7", fontSize: 15, fontWeight: "600" },
-  logout: {
+  danger: {
-    marginTop: 32,
+    borderWidth: 1,
-    backgroundColor: "#15151a",
+    borderColor: "#ff453a",
     borderRadius: 14,
-    paddingVertical: 16,
+    paddingVertical: 15,
     alignItems: "center",
   },
-  logoutText: { color: "#ff453a", fontWeight: "700", fontSize: 16 },
+  disabled: { opacity: 0.4 },
+  dangerText: { color: "#ff453a", fontWeight: "700", fontSize: 16 },
 });

cardclaws-mobile/app/_layout.tsx

@@ -16,7 +16,10 @@ export default function RootLayout() {
             headerTintColor: "#f5f5f7",
             contentStyle: { backgroundColor: "#0a0a0c" },
           }}
-        />
+        >
+          {/* The tab bar owns its own chrome; no stack header above it. */}
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        </Stack>
       </QueryClientProvider>
     </GestureHandlerRootView>
   );

cardclaws-mobile/src/stores/localCardsStore.ts

@@ -38,6 +38,7 @@ interface LocalCardsState {
   cards: LocalCard[];
   upsert: (card: LocalCard) => void;
   remove: (id: string) => void;
+  clear: () => void;
   getById: (id: string) => LocalCard | undefined;
 }
 
@@ -52,6 +53,7 @@ export const useLocalCardsStore = create<LocalCardsState>()(
           ),
         })),
       remove: (id) => set((s) => ({ cards: s.cards.filter((c) => c.id !== id) })),
+      clear: () => set({ cards: [] }),
       getById: (id) => get().cards.find((c) => c.id === id),
     }),
     {