refactor: simplify modal mounting with lazy wrapper and add read-only git env

packages/app/src/app/index.tsx

@@ -24,8 +24,6 @@ export default function HomeScreen() {
   } = useAggregatedAgents();
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showImportModal, setShowImportModal] = useState(false);
-  const [createModalMounted, setCreateModalMounted] = useState(false);
-  const [importModalMounted, setImportModalMounted] = useState(false);
   const [pendingImportServerId, setPendingImportServerId] = useState<string | null>(null);
   const { modal, flow, action, serverId: serverIdParam } = useLocalSearchParams<{
     modal?: string;
@@ -49,13 +47,11 @@ export default function HomeScreen() {
   const hasAgents = aggregatedAgents.length > 0;
 
   const handleCreateAgent = useCallback(() => {
-    setCreateModalMounted(true);
     setShowCreateModal(true);
   }, []);
 
   const openImportModal = useCallback((serverIdOverride?: string | null) => {
     setPendingImportServerId(serverIdOverride ?? null);
-    setImportModalMounted(true);
     setShowImportModal(true);
   }, []);
 
@@ -138,19 +134,12 @@ export default function HomeScreen() {
       </ReanimatedAnimated.View>
 
       {/* Create Agent Modal */}
-      {createModalMounted ? (
-        <CreateAgentModal
-          isVisible={showCreateModal}
-          onClose={handleCloseCreateModal}
-        />
-      ) : null}
-      {importModalMounted ? (
-        <ImportAgentModal
-          isVisible={showImportModal}
-          onClose={handleCloseImportModal}
-          serverId={pendingImportServerId}
-        />
-      ) : null}
+      <CreateAgentModal isVisible={showCreateModal} onClose={handleCloseCreateModal} />
+      <ImportAgentModal
+        isVisible={showImportModal}
+        onClose={handleCloseImportModal}
+        serverId={pendingImportServerId}
+      />
     </View>
   );
 }

packages/app/src/components/create-agent-modal.tsx

@@ -82,6 +82,7 @@ interface AgentFlowModalProps {
   flow: "create" | "import";
   initialValues?: CreateAgentInitialValues;
   serverId?: string | null;
+  onAfterClose?: () => void;
 }
 
 type DictationToastConfig = {
@@ -237,6 +238,7 @@ function AgentFlowModal({
   flow,
   initialValues,
   serverId,
+  onAfterClose,
 }: AgentFlowModalProps) {
   const insets = useSafeAreaInsets();
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
@@ -1326,7 +1328,8 @@ function AgentFlowModal({
     resetFormState();
     setIsMounted(false);
     navigateToAgentIfNeeded();
-  }, [navigateToAgentIfNeeded, resetFormState]);
+    onAfterClose?.();
+  }, [navigateToAgentIfNeeded, onAfterClose, resetFormState]);
 
   const requestImportCandidates = useCallback(
     (provider?: AgentProvider) => {
@@ -2433,12 +2436,33 @@ function AgentFlowModal({
   );
 }
 
+function LazyAgentFlowModal(props: Omit<AgentFlowModalProps, "onAfterClose">) {
+  const { isVisible } = props;
+  const [shouldRender, setShouldRender] = useState(isVisible);
+
+  useEffect(() => {
+    if (isVisible) {
+      setShouldRender(true);
+    }
+  }, [isVisible]);
+
+  const handleAfterClose = useCallback(() => {
+    setShouldRender(false);
+  }, []);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return <AgentFlowModal {...props} onAfterClose={handleAfterClose} />;
+}
+
 export function CreateAgentModal(props: ModalWrapperProps) {
-  return <AgentFlowModal {...props} flow="create" />;
+  return <LazyAgentFlowModal {...props} flow="create" />;
 }
 
 export function ImportAgentModal(props: ModalWrapperProps) {
-  return <AgentFlowModal {...props} flow="import" />;
+  return <LazyAgentFlowModal {...props} flow="import" />;
 }
 
 interface ModalHeaderProps {

packages/app/src/components/global-footer.tsx

@@ -171,7 +171,9 @@ export function GlobalFooter() {
             </Pressable>
 
             <Pressable
-              onPress={() => setShowImportModal(true)}
+              onPress={() => {
+                setShowImportModal(true);
+              }}
               style={({ pressed }) => [
                 styles.footerButton,
                 pressed && styles.buttonPressed,