Phase 1 Foundations: onboarding profile, nav padding, backpack views, AI persona

- profileStore (MMKV) + pure profileLogic (types, options, isProfileComplete,
  buildPersona). Rich first-run onboarding (app/onboarding.tsx): name/role,
  industry, vibes (multi), goal, brand colors, social links, inspirations.
- First-launch gate in (tabs)/_layout via <Redirect> guarded by a hydration
  flag; onboarding registered in the root stack.
- Bottom tab bar made taller with safe-area bottom padding.
- Backpack (Cards tab): Grid / Showcase view toggle + add-new entry.
- Business cards skip data entry: demo.tsx prefills name/title/links from the
  profile (creative tools lead).
- Persona → AI: SceneBrief/refine_prompt gain an optional persona (role/vibe/
  colors/goal); mobile generators pass buildPersona(profile). FakeAiClient
  echoes the role. genwizard gains MultiChips.
- Tests: mobile 28 (new profileLogic), backend 121 (new refine_includes_persona).

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

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

@@ -4,7 +4,10 @@
 //   robot → work-agent cards
 //   cog → settings
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { Tabs } from "expo-router";
+import { Redirect, Tabs } from "expo-router";
+import { StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useProfileStore } from "../../src/stores/profileStore";
 
 type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
 
@@ -15,6 +18,15 @@ function tabIcon(name: IconName) {
 }
 
 export default function TabsLayout() {
+  const insets = useSafeAreaInsets();
+  const hydrated = useProfileStore((s) => s.hydrated);
+  const onboarded = useProfileStore((s) => s.onboarded);
+
+  // Wait for MMKV to rehydrate before deciding, then send first-run users to
+  // onboarding (avoids a flash of the tabs).
+  if (!hydrated) return null;
+  if (!onboarded) return <Redirect href="/onboarding" />;
+
   return (
     <Tabs
       screenOptions={{
@@ -23,8 +35,14 @@ export default function TabsLayout() {
         tabBarInactiveTintColor: "#6b6b70",
         tabBarStyle: {
           backgroundColor: "#0e0e12",
+          borderTopWidth: StyleSheet.hairlineWidth,
           borderTopColor: "#1c1c22",
+          height: 64 + insets.bottom,
+          paddingTop: 10,
+          paddingBottom: Math.max(insets.bottom, 14),
         },
+        tabBarLabelStyle: { fontSize: 11, fontWeight: "600", marginBottom: 2 },
+        tabBarItemStyle: { paddingVertical: 4 },
       }}
     >
       <Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />

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

@@ -1,14 +1,16 @@
-// Gallery of cards saved on this device (standalone demo). Clean, chrome-free:
-// just the cards, auto-arranging by count, plus a New-card button.
+// Cards (Backpack): your collection of business cards, with switchable views
+// (Grid / Showcase) and an always-present "New card" entry.
 
 import { useRouter } from "expo-router";
+import { useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { CardThumb } from "../../src/components/CardThumb";
 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.
+type ViewMode = "grid" | "showcase";
+
+/// Shrink grid tiles as the collection grows.
 function columnsFor(count: number): number {
   if (count <= 4) return 2;
   if (count <= 9) return 3;
@@ -19,52 +21,100 @@ export default function Gallery() {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const cards = useLocalCardsStore((s) => s.cards);
-  const columns = columnsFor(cards.length);
+  const [view, setView] = useState<ViewMode>("grid");
+  const columns = view === "showcase" ? 1 : columnsFor(cards.length);
 
   return (
     <View style={styles.root}>
+      <View style={[styles.topBar, { paddingTop: insets.top + 10 }]}>
+        <Segmented value={view} onChange={setView} />
+      </View>
+
       <FlatList
         data={cards}
         keyExtractor={(c) => c.id}
-        // numColumns can't change on the fly without remounting the list.
-        key={`cols-${columns}`}
+        key={`${view}-${columns}`}
         numColumns={columns}
-        columnWrapperStyle={cards.length > 0 ? styles.column : undefined}
-        contentContainerStyle={[styles.list, { paddingTop: insets.top + 12 }]}
+        columnWrapperStyle={columns > 1 ? styles.column : undefined}
+        contentContainerStyle={styles.list}
         ListEmptyComponent={
           <View style={styles.empty}>
             <Text style={styles.emptyTitle}>No cards yet</Text>
             <Text style={styles.emptyHint}>Tap “New card” to create your first.</Text>
           </View>
         }
-        renderItem={({ item }: { item: LocalCard }) => (
-          <Pressable style={styles.tile} onPress={() => router.push(`/demo?cardId=${item.id}`)}>
-            <CardThumb item={item} style={styles.tileImage} />
-            <View style={[styles.tileLabel, columns >= 3 && styles.tileLabelCompact]}>
-              <Text style={[styles.tileName, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
-                {item.name}
-              </Text>
-              {!!item.title && columns < 4 && (
-                <Text style={[styles.tileTitle, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
-                  {item.title}
+        ListFooterComponent={
+          view === "showcase" && cards.length > 0 ? (
+            <Pressable style={styles.addTile} onPress={() => router.push("/demo")}>
+              <Text style={styles.addTileText}>+ New card</Text>
+            </Pressable>
+          ) : null
+        }
+        renderItem={({ item }: { item: LocalCard }) =>
+          view === "showcase" ? (
+            <Pressable style={styles.showTile} onPress={() => router.push(`/demo?cardId=${item.id}`)}>
+              <CardThumb item={item} style={styles.showThumb} />
+              <View style={styles.showOverlay}>
+                <Text style={styles.showName} numberOfLines={1}>
+                  {item.name}
                 </Text>
-              )}
-            </View>
-          </Pressable>
-        )}
+                {!!item.title && (
+                  <Text style={styles.showTitle} numberOfLines={1}>
+                    {item.title}
+                  </Text>
+                )}
+              </View>
+            </Pressable>
+          ) : (
+            <Pressable style={styles.tile} onPress={() => router.push(`/demo?cardId=${item.id}`)}>
+              <CardThumb item={item} style={styles.tileImage} />
+              <View style={[styles.tileLabel, columns >= 3 && styles.tileLabelCompact]}>
+                <Text style={[styles.tileName, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                  {item.name}
+                </Text>
+                {!!item.title && columns < 4 && (
+                  <Text style={[styles.tileTitle, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                    {item.title}
+                  </Text>
+                )}
+              </View>
+            </Pressable>
+          )
+        }
       />
 
-      <Pressable style={[styles.fab, { bottom: 24 }]} onPress={() => router.push("/demo")}>
+      <Pressable style={[styles.fab, { bottom: insets.bottom + 80 }]} onPress={() => router.push("/demo")}>
         <Text style={styles.fabText}>+ New card</Text>
       </Pressable>
     </View>
   );
 }
 
+function Segmented({ value, onChange }: { value: ViewMode; onChange: (v: ViewMode) => void }) {
+  return (
+    <View style={styles.segment}>
+      {(["grid", "showcase"] as const).map((v) => (
+        <Pressable key={v} onPress={() => onChange(v)} style={[styles.segBtn, value === v && styles.segOn]}>
+          <Text style={[styles.segText, value === v && styles.segTextOn]}>
+            {v === "grid" ? "Grid" : "Showcase"}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: "#0a0a0c" },
-  list: { paddingHorizontal: 16, paddingBottom: 96, flexGrow: 1 },
+  topBar: { paddingHorizontal: 16, paddingBottom: 10 },
+  segment: { flexDirection: "row", backgroundColor: "#15151a", borderRadius: 12, padding: 4, gap: 4 },
+  segBtn: { flex: 1, paddingVertical: 9, borderRadius: 9, alignItems: "center" },
+  segOn: { backgroundColor: "#ff3b30" },
+  segText: { color: "#9a9aa0", fontWeight: "600", fontSize: 14 },
+  segTextOn: { color: "#fff" },
+  list: { paddingHorizontal: 16, paddingBottom: 120, flexGrow: 1 },
   column: { gap: 12 },
+  // Grid
   tile: { flex: 1, marginBottom: 12, borderRadius: 18, overflow: "hidden", backgroundColor: "#15151a" },
   tileImage: { width: "100%", aspectRatio: 2 / 3, overflow: "hidden" },
   tileLabel: { padding: 12 },
@@ -72,6 +122,28 @@ const styles = StyleSheet.create({
   tileName: { color: "#f5f5f7", fontSize: 16, fontWeight: "700" },
   tileNameCompact: { fontSize: 12 },
   tileTitle: { color: "#9a9aa0", fontSize: 13, marginTop: 2 },
+  // Showcase
+  showTile: { marginBottom: 16, borderRadius: 22, overflow: "hidden", backgroundColor: "#15151a" },
+  showThumb: { width: "100%", aspectRatio: 3 / 4, overflow: "hidden" },
+  showOverlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 18,
+    backgroundColor: "rgba(10,10,12,0.72)",
+  },
+  showName: { color: "#fff", fontSize: 22, fontWeight: "800" },
+  showTitle: { color: "#cfcfd4", fontSize: 14, marginTop: 2 },
+  addTile: {
+    borderWidth: 1,
+    borderColor: "#2a2a30",
+    borderStyle: "dashed",
+    borderRadius: 22,
+    paddingVertical: 28,
+    alignItems: "center",
+  },
+  addTileText: { color: "#f5f5f7", fontWeight: "700", fontSize: 16 },
   empty: { flex: 1, alignItems: "center", justifyContent: "center", paddingTop: 120, gap: 6 },
   emptyTitle: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
   emptyHint: { color: "#6b6b70" },