refactor(mobile): adopt shared presentation semantics

Generated-By: PostHog Code
Task-Id: c1bbe3cf-742b-4b24-bf96-d11a18b4cf22

Author: richardsolomou

apps/mobile/README.md

@@ -32,7 +32,7 @@ pnpm --filter @posthog/mobile start
 
 ### Feature Folders
 
-Code is organized by feature in `src/features/`. Each feature is self-contained with its own components, hooks, stores, and API logic.
+Code is organized by feature in `src/features/`. Features own native components, one-source hooks, and view state. They do not own copies of cloud contracts, transport, orchestration, or presentation rules.
 
 ```
 src/features/
@@ -46,18 +46,31 @@ src/features/
 │   ├── hooks/
 │   ├── stores/
 │   └── types.ts
-├── conversations/  # PostHog AI conversation list & management
-│   ├── api.ts
+├── inbox/          # Native inbox rendering and query hooks
 │   ├── components/
 │   ├── hooks/
 │   └── stores/
-└── tasks/          # Task management
-    ├── api.ts
+└── tasks/          # Native cloud-task rendering and host adapters
     ├── components/
     ├── hooks/
+    ├── services/
     └── stores/
 ```
 
+### Portability boundary
+
+Mobile and desktop use the same cloud-task architecture. New work must preserve these ownership rules:
+
+- `@posthog/shared` owns runtime contracts and Zod schemas.
+- `@posthog/api-client` owns authenticated PostHog HTTPS transport and its request/response types.
+- `@posthog/core` owns cloud-task orchestration and headless presentation decisions, including sessions, queues, permissions, models, repositories, inbox rules, and automation semantics.
+- `apps/mobile` owns Expo lifecycle, React Native rendering, gestures, sheets, notifications, audio, secure storage, and small persisted view-state stores.
+- `@posthog/ui` owns the DOM/Quill renderer and web view state.
+
+Do not add a mobile API facade, duplicate a shared type, or re-export a core helper through a mobile file. Import the owning package directly. If desktop and mobile need different visuals, add a headless descriptor or decision function to core and keep two thin renderers.
+
+Intentional host differences are limited to platform capabilities and view state. Mobile may persist native navigation state, cached picker snapshots, optimistic attachment echoes, and notification preferences; it must not implement retries, reconnection, transport parsing, task lifecycle, or cross-store decisions in those stores.
+
 ### File-Based Routing
 
 Routes for the screens are defined by the file structure in `src/app/` using expo-router. 

apps/mobile/src/app/(tabs)/inbox.tsx

@@ -1,3 +1,4 @@
+import { buildInboxViewedProperties } from "@posthog/core/inbox/engagement";
 import { INBOX_PIPELINE_STATUSES } from "@posthog/core/inbox/reportFiltering";
 import type { SignalReport } from "@posthog/shared/domain-types";
 import { useFocusEffect, useRouter } from "expo-router";
@@ -24,7 +25,6 @@ import {
 } from "@/features/inbox/stores/dismissedReportsStore";
 import { useInboxFilterStore } from "@/features/inbox/stores/inboxFilterStore";
 import { useInboxStore } from "@/features/inbox/stores/inboxStore";
-import { buildInboxViewedProperties } from "@/features/inbox/utils";
 import { useIntegrations } from "@/features/tasks/hooks/useIntegrations";
 import { ANALYTICS_EVENTS, useAnalytics } from "@/lib/analytics";
 
@@ -67,12 +67,16 @@ export default function InboxScreen() {
     viewedFiredForFocusRef.current = focusVersion;
     analytics.track(
       ANALYTICS_EVENTS.INBOX_VIEWED,
-      buildInboxViewedProperties(reports, totalCount, {
-        sourceProductFilter,
-        statusFilter,
-        suggestedReviewerFilter,
-        priorityFilter,
-        defaultStatusFilter: INBOX_PIPELINE_STATUSES,
+      buildInboxViewedProperties({
+        visibleReports: reports,
+        totalCount,
+        filters: {
+          sourceProductFilter,
+          statusFilter,
+          suggestedReviewerFilter,
+          priorityFilter,
+          defaultStatusFilter: INBOX_PIPELINE_STATUSES,
+        },
       }),
     );
   }, [

apps/mobile/src/app/automation/[id].tsx

@@ -1,5 +1,6 @@
 import { Text } from "@components/text";
 import { TaskAutomationValidationError } from "@posthog/api-client/posthog-client";
+import { parseSkillTemplateId } from "@posthog/core/automations/automationTemplatePresentation";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
 import {
@@ -20,7 +21,6 @@ import {
   useUpdateTaskAutomation,
 } from "@/features/tasks/hooks/useAutomations";
 import { useTask } from "@/features/tasks/hooks/useTasks";
-import { parseSkillTemplateId } from "@/features/tasks/skills/skillTemplateIds";
 import { useThemeColors } from "@/lib/theme";
 
 export default function AutomationDetailScreen() {

apps/mobile/src/app/automation/create.tsx

@@ -1,4 +1,5 @@
 import { TaskAutomationValidationError } from "@posthog/api-client/posthog-client";
+import { formatSkillTemplateId } from "@posthog/core/automations/automationTemplatePresentation";
 import { getCalendars } from "expo-localization";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { useMemo, useRef, useState } from "react";
@@ -14,7 +15,6 @@ import { Text } from "@/components/text";
 import { AutomationForm } from "@/features/tasks/components/AutomationForm";
 import { useCreateTaskAutomation } from "@/features/tasks/hooks/useAutomations";
 import { useSkillStoreSkill } from "@/features/tasks/skills/hooks";
-import { formatSkillTemplateId } from "@/features/tasks/skills/skillTemplateIds";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { useThemeColors } from "@/lib/theme";
 

apps/mobile/src/app/mcp-servers/add-custom.tsx

@@ -1,4 +1,5 @@
 import { Text } from "@components/text";
+import type { McpAuthType } from "@posthog/api-client/types";
 import { router } from "expo-router";
 import { Lock } from "phosphor-react-native";
 import { useState } from "react";
@@ -14,7 +15,6 @@ import {
 import { FloatingMcpHeader } from "@/features/mcp/components/FloatingMcpHeader";
 import { useMcpInstallations } from "@/features/mcp/hooks";
 import { installCustomWithOAuth } from "@/features/mcp/oauth";
-import type { McpAuthType } from "@/features/mcp/types";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";

apps/mobile/src/app/mcp-servers/index.tsx

@@ -1,4 +1,8 @@
 import { Text } from "@components/text";
+import type {
+  McpRecommendedServer,
+  McpServerInstallation,
+} from "@posthog/api-client/types";
 import { useRouter } from "expo-router";
 import { MagnifyingGlass, Plus, PuzzlePiece } from "phosphor-react-native";
 import { useMemo, useState } from "react";
@@ -17,10 +21,6 @@ import {
   recommendedToRowProps,
 } from "@/features/mcp/components/McpServerRow";
 import { useMcpInstallations, useMcpMarketplace } from "@/features/mcp/hooks";
-import type {
-  McpRecommendedServer,
-  McpServerInstallation,
-} from "@/features/mcp/types";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { useThemeColors } from "@/lib/theme";
 

apps/mobile/src/app/mcp-servers/installation/[id].tsx

@@ -1,4 +1,6 @@
 import { Text } from "@components/text";
+import type { McpApprovalState } from "@posthog/api-client/types";
+import { isStdioMcpServer } from "@posthog/core/mcp-servers/presentation";
 import { router, useLocalSearchParams } from "expo-router";
 import {
   ArrowsClockwise,
@@ -28,8 +30,6 @@ import {
 } from "@/features/mcp/hooks";
 import { reauthorizeInstallation } from "@/features/mcp/oauth";
 import { getMcpConnectionManager } from "@/features/mcp/service";
-import type { McpApprovalState } from "@/features/mcp/types";
-import { isStdioServer } from "@/features/mcp/types";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { useThemeColors } from "@/lib/theme";
@@ -75,7 +75,7 @@ export default function McpInstallationDetailScreen() {
     );
   }
 
-  const stdio = isStdioServer(installation);
+  const stdio = isStdioMcpServer(installation);
 
   const handleEnabledChange = (enabled: boolean) => {
     updateMutation.mutate({

apps/mobile/src/app/mcp-servers/template/[id].tsx

@@ -1,4 +1,5 @@
 import { Text } from "@components/text";
+import { isStdioMcpServer } from "@posthog/core/mcp-servers/presentation";
 import { router, useLocalSearchParams } from "expo-router";
 import { Lock, Warning } from "phosphor-react-native";
 import { useMemo, useState } from "react";
@@ -17,7 +18,6 @@ import {
   useMcpMarketplace,
 } from "@/features/mcp/hooks";
 import { installTemplateWithOAuth } from "@/features/mcp/oauth";
-import { isStdioServer } from "@/features/mcp/types";
 import { useScreenInsets } from "@/hooks/useScreenInsets";
 import { logger } from "@/lib/logger";
 import { openExternalUrl } from "@/lib/openExternalUrl";
@@ -71,7 +71,7 @@ export default function McpTemplateDetailScreen() {
     );
   }
 
-  const stdio = isStdioServer(template);
+  const stdio = isStdioMcpServer(template);
 
   const handleInstall = async () => {
     if (!template) return;

apps/mobile/src/features/chat/components/AgentMessage.tsx

@@ -1,10 +1,10 @@
+import { pickThinkingActivity } from "@posthog/core/sessions/thinkingActivities";
 import { Brain } from "phosphor-react-native";
 import { useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import { formatRelativeTime } from "@/lib/format";
 import { useThemeColors } from "@/lib/theme";
 import { usePeriodicRerender } from "../hooks/usePeriodicRerender";
-import { getRandomThinkingMessage } from "../utils/thinkingMessages";
 import { CopyButton } from "./CopyButton";
 import { MarkdownText } from "./MarkdownText";
 import { ToolMessage } from "./ToolMessage";
@@ -110,7 +110,7 @@ export function AgentMessage({
       {isLoading && !content && !thinkingText && (
         <View className="max-w-[95%] px-4 py-1">
           <Text className="font-mono text-[13px] text-gray-9 italic">
-            {getRandomThinkingMessage()}
+            {pickThinkingActivity(Math.random())}...
           </Text>
         </View>
       )}

apps/mobile/src/features/chat/components/ToolMessage.tsx

@@ -1,3 +1,9 @@
+import {
+  formatPosthogExecBody,
+  getPostHogExecDisplay,
+  isPostHogExecTool,
+} from "@posthog/core/sessions/posthogExecDisplay";
+import { parseMcpToolName } from "@posthog/shared";
 import { useRouter } from "expo-router";
 import {
   ArrowsClockwise,
@@ -22,13 +28,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native";
-import {
-  formatPosthogExecBody,
-  getPostHogExecDisplay,
-  isPostHogExecTool,
-} from "@/features/chat/utils/posthogExecDisplay";
 import { McpAppHost } from "@/features/mcp/components/McpAppHost";
-import { isMcpToolName } from "@/features/mcp/utils/mcpToolName";
 import {
   getColorForClass,
   highlightCode,
@@ -942,7 +942,8 @@ export function ToolMessage({
   // MCP App tools render via the WebView host — skip PostHog exec (which has
   // its own renderer above) and only kick in once the tool finished or while
   // it's running so we don't show empty WebView shells for pending tools.
-  const isMcpAppTool = !isPostHogExec && isMcpToolName(effectiveToolName);
+  const isMcpAppTool =
+    !isPostHogExec && parseMcpToolName(effectiveToolName) !== undefined;
 
   if (isMcpAppTool && !isPending) {
     return (