sync: reland mobile iOS branding + native stack onto main (#4025, #4037)

apps/mobile/src/Stack.tsx

@@ -15,6 +15,7 @@ import { DynamicColorIOS, Platform, Pressable, ScrollView, StyleSheet } from "re
 import { useResolveClassNames } from "uniwind";
 
 import { AppText as Text } from "./components/AppText";
+import { renderCompactBrandTitle } from "./components/CompactBrandTitle";
 import { ArchivedThreadsRouteScreen } from "./features/archive/ArchivedThreadsRouteScreen";
 import { useAgentNotificationNavigation } from "./features/agent-awareness/notificationNavigation";
 import { ClerkSettingsSheetDetentProvider } from "./features/cloud/ClerkSettingsSheetDetent";
@@ -383,7 +384,8 @@ export const RootStack = createNativeStackNavigator({
         ...GLASS_HEADER_OPTIONS,
         contentStyle: { backgroundColor: "transparent" },
         headerBackVisible: false,
-        title: "Threads",
+        headerTitle: renderCompactBrandTitle,
+        title: "T3 Code",
       },
     }),
     Thread: createNativeStackScreen({

apps/mobile/src/components/CompactBrandTitle.tsx

@@ -0,0 +1,60 @@
+import { View } from "react-native";
+
+import { AppText as Text } from "./AppText";
+import { T3Wordmark } from "./T3Wordmark";
+import { useThemeColor } from "../lib/useThemeColor";
+
+/**
+ * Compact brand lockup sized for native navigation bars.
+ */
+export function CompactBrandTitle() {
+  const iconColor = useThemeColor("--color-icon");
+  const mutedColor = useThemeColor("--color-foreground-muted");
+  const subtleColor = useThemeColor("--color-subtle");
+
+  return (
+    <View
+      aria-level={1}
+      accessibilityLabel="T3 Code"
+      accessible
+      role="heading"
+      style={{ alignItems: "center", flexDirection: "row", gap: 6 }}
+    >
+      <T3Wordmark color={iconColor} height={11} />
+      <Text
+        style={{
+          color: mutedColor,
+          fontFamily: "DMSans-Medium",
+          fontSize: 14,
+          letterSpacing: -0.35,
+        }}
+      >
+        Code
+      </Text>
+      <View
+        style={{
+          backgroundColor: subtleColor,
+          borderRadius: 999,
+          paddingHorizontal: 6,
+          paddingVertical: 2,
+        }}
+      >
+        <Text
+          style={{
+            color: mutedColor,
+            fontFamily: "DMSans-Bold",
+            fontSize: 9,
+            letterSpacing: 0.9,
+            textTransform: "uppercase",
+          }}
+        >
+          Alpha
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export function renderCompactBrandTitle() {
+  return <CompactBrandTitle />;
+}

apps/mobile/src/features/home/HomeRouteScreen.tsx

@@ -4,6 +4,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useMemo, useState } from "react";
 
 import { NativeHeaderToolbar, NativeStackScreenOptions } from "../../native/StackHeader";
+import { renderCompactBrandTitle } from "../../components/CompactBrandTitle";
 import { useProjects, useThreadShells } from "../../state/entities";
 import { usePendingNewTasks } from "../../state/use-pending-new-tasks";
 import { useWorkspaceState } from "../../state/workspace";
@@ -86,7 +87,9 @@ export function HomeRouteScreen() {
     >
       <>
         {/* Restore the compact title in case the split branch blanked it. */}
-        <NativeStackScreenOptions options={{ title: "Threads", headerTitle: "Threads" }} />
+        <NativeStackScreenOptions
+          options={{ title: "T3 Code", headerTitle: renderCompactBrandTitle }}
+        />
         <HomeHeader
           environments={environments}
           searchQuery={searchQuery}

apps/mobile/src/features/threads/sidebar-navigation-shell.tsx

@@ -11,6 +11,7 @@ import {
 import type { ReactNode } from "react";
 import { Platform, useColorScheme } from "react-native";
 
+import { renderCompactBrandTitle } from "../../components/CompactBrandTitle";
 import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
 
 const SCROLL_EDGE_EFFECTS = nativeHeaderScrollEdgeEffects(Platform.OS, Platform.Version);
@@ -34,10 +35,11 @@ const SIDEBAR_SCREEN_OPTIONS: SidebarScreenOptions = {
   headerShadowVisible: false,
   headerShown: true,
   headerStyle: { backgroundColor: "transparent" },
+  headerTitle: renderCompactBrandTitle,
   headerTitleStyle: { fontSize: 18, fontWeight: "800" },
   headerTransparent: true,
   scrollEdgeEffects: SCROLL_EDGE_EFFECTS,
-  title: "Threads",
+  title: "T3 Code",
   unstable_navigationItemStyle: "editor",
 };
 

apps/mobile/src/native/StackHeader.tsx

@@ -11,6 +11,7 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   type ReactElement,
   type ReactNode,
 } from "react";
@@ -61,20 +62,116 @@ function normalizeScreenOptions(
   return normalized as NativeStackNavigationOptions;
 }
 
+function optionsSignature(value: unknown, seen = new WeakSet<object>()): string {
+  if (value === null) return "null";
+  switch (typeof value) {
+    case "boolean":
+    case "number":
+    case "string":
+      return JSON.stringify(value);
+    case "undefined":
+      return "undefined";
+    case "function":
+      // Header factories are frequently recreated inline. Their source is
+      // stable across equivalent renders, while a reference comparison would
+      // make navigation.setOptions re-enter the navigator indefinitely.
+      return `function:${Function.prototype.toString.call(value)}`;
+    case "symbol":
+      return `symbol:${String(value)}`;
+    case "bigint":
+      return `bigint:${String(value)}`;
+    case "object": {
+      const object = value as object;
+      if (seen.has(object)) return "[circular]";
+      seen.add(object);
+      if (Array.isArray(value)) {
+        return `[${value.map((entry) => optionsSignature(entry, seen)).join(",")}]`;
+      }
+      // React refs carry mutable native instances that must not make static
+      // screen options appear different after every render.
+      if ("current" in object) return "[ref]";
+      return `{${Object.keys(value as Record<string, unknown>)
+        .sort()
+        .map(
+          (key) =>
+            `${JSON.stringify(key)}:${optionsSignature((value as Record<string, unknown>)[key], seen)}`,
+        )
+        .join(",")}}`;
+    }
+  }
+  return String(value);
+}
+
+function stabilizeOptionFunctions(
+  value: unknown,
+  path: string,
+  latestFunctions: Map<string, (...args: unknown[]) => unknown>,
+  wrappers: Map<string, (...args: unknown[]) => unknown>,
+  seen = new WeakSet<object>(),
+): unknown {
+  if (typeof value === "function") {
+    latestFunctions.set(path, value as (...args: unknown[]) => unknown);
+    let wrapper = wrappers.get(path);
+    if (!wrapper) {
+      wrapper = (...args: unknown[]) => {
+        return latestFunctions.get(path)?.(...args);
+      };
+      wrappers.set(path, wrapper);
+    }
+    return wrapper;
+  }
+  if (Array.isArray(value)) {
+    if (seen.has(value)) return value;
+    seen.add(value);
+    return value.map((entry, index) =>
+      stabilizeOptionFunctions(entry, `${path}[${index}]`, latestFunctions, wrappers, seen),
+    );
+  }
+  if (value !== null && typeof value === "object") {
+    if (seen.has(value) || "current" in value) return value;
+    seen.add(value);
+    return Object.fromEntries(
+      Object.entries(value as Record<string, unknown>).map(([key, entry]) => [
+        key,
+        stabilizeOptionFunctions(entry, `${path}.${key}`, latestFunctions, wrappers, seen),
+      ]),
+    );
+  }
+  return value;
+}
+
 export function NativeStackScreenOptions(props: {
   readonly options?: AppNativeStackNavigationOptions;
   readonly listeners?: Record<string, (event: never) => void>;
   readonly name?: string;
 }) {
   const navigation = useNativeStackNavigation();
+  const lastAppliedOptionsSignatureRef = useRef<string | undefined>(undefined);
+  const latestOptionFunctionsRef = useRef(new Map<string, (...args: unknown[]) => unknown>());
+  const optionFunctionWrappersRef = useRef(new Map<string, (...args: unknown[]) => unknown>());
   const normalizedOptions = useMemo(() => normalizeScreenOptions(props.options), [props.options]);
+  const stableOptions = normalizedOptions
+    ? (stabilizeOptionFunctions(
+        normalizedOptions,
+        "options",
+        latestOptionFunctionsRef.current,
+        optionFunctionWrappersRef.current,
+      ) as NativeStackNavigationOptions)
+    : undefined;
 
   useLayoutEffect(() => {
-    if (!navigation || !normalizedOptions) {
+    if (!navigation || !stableOptions) {
+      return;
+    }
+    const signature = optionsSignature(stableOptions);
+    // Avoid re-entering navigation state when semantically equal options are
+    // reapplied every layout (common when callers pass unstable object literals).
+    if (lastAppliedOptionsSignatureRef.current === signature) {
       return;
     }
-    navigation.setOptions(normalizedOptions);
-  }, [navigation, normalizedOptions]);
+    lastAppliedOptionsSignatureRef.current = signature;
+    navigation.setOptions(stableOptions);
+  }, [navigation, stableOptions]);
 
   useEffect(() => {
     if (!navigation || !props.listeners) {

patches/@react-navigation%2Fnative-stack@7.17.6.patch

@@ -1,3 +1,5 @@
+diff --git a/lib/module/views/useHeaderConfigProps.js b/lib/module/views/useHeaderConfigProps.js
+index 0b75c70b4e0d233ee3b5faaf9cfbc40d4f8ed494..eb174e3fde91a7783f132b3fb16b01175ec19220 100644
 --- a/lib/module/views/useHeaderConfigProps.js
 +++ b/lib/module/views/useHeaderConfigProps.js
 @@ -19,6 +19,12 @@