feat: server-authoritative commerce presentation and moderation (w4b)

apps/mobile/src/app/(app)/(tabs)/(3_profile)/code-reviewer/[scope]/[platform]/(edit)/style.tsx

@@ -1,26 +1,29 @@
 import { useLocalSearchParams } from 'expo-router';
 
 import { OptionList } from '@/components/code-reviewer/option-list';
-import { REVIEW_STYLES, type ReviewerPlatform } from '@/lib/code-reviewer-config';
+import { type ReviewerPlatform } from '@/lib/code-reviewer-config';
+import { PUBLIC_REVIEW_STYLES } from '@kilocode/app-shared/code-review';
 import { useReviewConfig, useSaveReviewConfig } from '@/lib/hooks/use-code-reviewer';
 
 const DESCRIPTIONS = {
   strict: 'Flag everything, hold a high bar',
   balanced: 'Meaningful findings without noise',
   lenient: 'Only serious problems',
-  roast: 'Brutally honest, entertainingly so',
 } as const;
 
 export default function ReviewStyleRoute() {
   const { scope, platform } = useLocalSearchParams<{ scope: string; platform: ReviewerPlatform }>();
   const { data } = useReviewConfig(scope, platform);
   const save = useSaveReviewConfig(scope, platform);
 
+  // A legacy 'roast' config has no matching public option; treat it as unselected.
+  const selected = data?.reviewStyle === 'roast' ? undefined : data?.reviewStyle;
+
   return (
     <OptionList
       title="Review style"
-      options={REVIEW_STYLES}
-      selected={data?.reviewStyle}
+      options={PUBLIC_REVIEW_STYLES}
+      selected={selected}
       descriptions={DESCRIPTIONS}
       disabled={data == null}
       // eslint-disable-next-line typescript-eslint/promise-function-async -- conflicting require-await rule

apps/mobile/src/app/(app)/_layout.tsx

@@ -11,7 +11,6 @@ import { attemptLogoutReconciliation } from '@/lib/auth/logout-reconciliation';
 import { useFormSheetDetents } from '@/lib/form-sheet';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import { useCurrentUserId } from '@/lib/hooks/use-current-user-id';
-import { StoreKiloPassPurchaseProvider } from '@/lib/kilo-pass/use-store-kilo-pass-purchase';
 import { CachePersistenceMount } from '@/lib/persist/cache-persistence-mount';
 
 /**
@@ -57,108 +56,106 @@ export default function AppLayout() {
       <SharePayloadNavigator />
       <KiloChatProvider>
         <KiloChatPresenceMount>
-          <StoreKiloPassPurchaseProvider>
-            <Stack
-              screenOptions={{
-                contentStyle: { backgroundColor: colors.background },
+          <Stack
+            screenOptions={{
+              contentStyle: { backgroundColor: colors.background },
+              headerShown: false,
+              headerStyle: { backgroundColor: colors.background },
+              headerTintColor: colors.foreground,
+            }}
+          >
+            <Stack.Screen name="(tabs)" />
+            <Stack.Screen name="pr-review/index" options={{ headerShown: false }} />
+            <Stack.Screen
+              name="pr-review/[owner]/[repo]/[number]"
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen name="agent-chat/new" options={{ headerShown: false }} />
+            <Stack.Screen name="agent-chat/[session-id]" />
+            <Stack.Screen
+              name="agent-chat/model-picker"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5, fullSheetDetent],
+                sheetGrabberVisible: true,
                 headerShown: false,
-                headerStyle: { backgroundColor: colors.background },
-                headerTintColor: colors.foreground,
               }}
-            >
-              <Stack.Screen name="(tabs)" />
-              <Stack.Screen name="pr-review/index" options={{ headerShown: false }} />
-              <Stack.Screen
-                name="pr-review/[owner]/[repo]/[number]"
-                options={{ headerShown: false }}
-              />
-              <Stack.Screen name="agent-chat/new" options={{ headerShown: false }} />
-              <Stack.Screen name="agent-chat/[session-id]" />
-              <Stack.Screen
-                name="agent-chat/model-picker"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5, fullSheetDetent],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="agent-chat/repo-picker"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5, fullSheetDetent],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="agent-chat/mode-picker"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="agent-chat/instance-picker"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5, fullSheetDetent],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="agent-chat/continue-picker"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5, fullSheetDetent],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="share-gate"
-                options={{
-                  presentation: 'formSheet',
-                  sheetAllowedDetents: [0.5, fullSheetDetent],
-                  sheetGrabberVisible: true,
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="kilo-pass"
-                options={{
-                  presentation: 'modal',
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="onboarding"
-                options={{
-                  presentation: 'modal',
-                  headerShown: false,
-                  gestureEnabled: false,
-                }}
-              />
-              <Stack.Screen
-                name="consent"
-                options={{
-                  presentation: 'modal',
-                  headerShown: false,
-                  gestureEnabled: false,
-                }}
-              />
-              <Stack.Screen
-                name="consent-details"
-                options={{
-                  headerShown: false,
-                }}
-              />
-            </Stack>
-          </StoreKiloPassPurchaseProvider>
+            />
+            <Stack.Screen
+              name="agent-chat/repo-picker"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5, fullSheetDetent],
+                sheetGrabberVisible: true,
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="agent-chat/mode-picker"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5],
+                sheetGrabberVisible: true,
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="agent-chat/instance-picker"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5, fullSheetDetent],
+                sheetGrabberVisible: true,
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="agent-chat/continue-picker"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5, fullSheetDetent],
+                sheetGrabberVisible: true,
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="share-gate"
+              options={{
+                presentation: 'formSheet',
+                sheetAllowedDetents: [0.5, fullSheetDetent],
+                sheetGrabberVisible: true,
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="kilo-pass"
+              options={{
+                presentation: 'modal',
+                headerShown: false,
+              }}
+            />
+            <Stack.Screen
+              name="onboarding"
+              options={{
+                presentation: 'modal',
+                headerShown: false,
+                gestureEnabled: false,
+              }}
+            />
+            <Stack.Screen
+              name="consent"
+              options={{
+                presentation: 'modal',
+                headerShown: false,
+                gestureEnabled: false,
+              }}
+            />
+            <Stack.Screen
+              name="consent-details"
+              options={{
+                headerShown: false,
+              }}
+            />
+          </Stack>
         </KiloChatPresenceMount>
       </KiloChatProvider>
     </UserWebConnectionProvider>

apps/mobile/src/components/agents/message-details-sheet.tsx

@@ -1,15 +1,25 @@
 import { type StoredMessage } from '@kilocode/cloud-agent-sdk';
-import { useMemo } from 'react';
-import { Modal, Pressable, ScrollView, View } from 'react-native';
+import { useMutation } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { Alert, Modal, Pressable, ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { announcingToast } from '@/lib/a11y/announcing-toast';
+import { useTRPC } from '@/lib/trpc';
 import { SheetHeader } from '@/components/sheet-header';
 import { Text } from '@/components/ui/text';
 import { type SessionModelOption } from '@/lib/hooks/use-session-model-options';
 
 import { formatExactTokens } from './context-usage-display';
 import { handleMessageDetailsCopy } from './message-details-copy';
 import { getMessageDetailsContent } from './message-details-content';
+import {
+  buildReportAiResponseErrorToast,
+  buildReportAiResponseInput,
+  classifyReportAiResponseFailure,
+  reportAiResponseSubmittedToast,
+  shouldShowReportAiResponse,
+} from './report-ai-response';
 
 type MessageDetailsSheetProps = {
   visible: boolean;
@@ -25,15 +35,61 @@ export function MessageDetailsSheet({
   onClose,
 }: Readonly<MessageDetailsSheetProps>) {
   const insets = useSafeAreaInsets();
+  const trpc = useTRPC();
+  const [reportedMessageId, setReportedMessageId] = useState<string | null>(null);
   const content = useMemo(
     () => (message ? getMessageDetailsContent(message, modelOptions) : null),
     [message, modelOptions]
   );
 
+  const reportMutation = useMutation(
+    trpc.moderation.reportContent.mutationOptions({
+      onSuccess: (result, input) => {
+        setReportedMessageId(input.targetId);
+        announcingToast.success(reportAiResponseSubmittedToast(result.receiptId));
+      },
+      onError: (error, input) => {
+        const failure = classifyReportAiResponseFailure(error);
+        const errorToast = buildReportAiResponseErrorToast(failure, () => {
+          reportMutation.mutate(input);
+        });
+        announcingToast.error(
+          errorToast.message,
+          errorToast.action ? { action: errorToast.action } : undefined
+        );
+      },
+    })
+  );
+
+  const showReport =
+    message !== null &&
+    shouldShowReportAiResponse(message) &&
+    message.info.id !== reportedMessageId;
+
   const handleCopy = () => {
     handleMessageDetailsCopy(content?.copyableText);
   };
 
+  const handleReport = () => {
+    if (!message) {
+      return;
+    }
+    const input = buildReportAiResponseInput(message);
+    if (!input) {
+      return;
+    }
+    Alert.alert('Report AI response', 'Report this response for review?', [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Report',
+        style: 'destructive',
+        onPress: () => {
+          reportMutation.mutate(input);
+        },
+      },
+    ]);
+  };
+
   return (
     <Modal
       visible={visible}
@@ -60,6 +116,20 @@ export function MessageDetailsSheet({
               </Pressable>
             ) : null}
 
+            {showReport ? (
+              <Pressable
+                onPress={handleReport}
+                accessibilityRole="button"
+                accessibilityLabel="Report AI response"
+                className="mb-6 rounded-md border border-border px-4 py-3 active:opacity-70"
+                testID="message-details-report"
+              >
+                <Text className="text-center text-base font-medium text-foreground">
+                  Report AI response
+                </Text>
+              </Pressable>
+            ) : null}
+
             <View className="gap-4">
               <Row label="Role">
                 <Text className="text-base font-medium text-foreground">{content.roleLabel}</Text>