Add Ask with streaming answers, reached from the Practice tab

Practice lists the website's practice tools; Ask opens full screen and
the rest say they are on their way. Ask sends the website's request:
plain questions stream from ai-stream through expo/fetch, and with
Citations, Web search, Pros/Cons or Argument map on the whole answer
comes from the ai function, because ai-stream refuses those options.
The model, settings and Current Debate context are picked the way the
website picks them, including pins. Finished exchanges are saved to
chats and messages, past chats reopen from the history sheet, and
leaving mid-answer cancels it without saving half a message.

Answers render through a small Markdown reader with citation chips that
open the Library source or the cited page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Programcode

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

@@ -1,5 +1,52 @@
-import { PlaceholderScreen } from '@/components/placeholder-screen';
+import { useRouter } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+import { Pressable, StyleSheet, View } from 'react-native';
 
-export default function Screen() {
-  return <PlaceholderScreen tab="practice" />;
+import { Card, IconTile } from '@/components/card';
+import { Icon } from '@/components/icon';
+import { PRACTICE_TOOLS } from '@/components/practice-tools';
+import { ScreenTitle } from '@/components/screen-title';
+import { Screen } from '@/components/screen';
+import { Text } from '@/components/text';
+import { useTheme } from '@/theme/use-theme';
+
+/** The Practice tools. Ask opens full screen; the others say they are on their way. */
+export default function PracticeScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { colors } = useTheme();
+  return (
+    <Screen>
+      <ScreenTitle title={t('mobile.tabs.practice')} />
+      <Card style={styles.list}>
+        {PRACTICE_TOOLS.map((tool, index) => (
+          <Pressable
+            key={tool.key}
+            accessibilityRole="button"
+            onPress={() => (tool.key === 'ask' ? router.push('/ask') : router.push({ pathname: '/soon/[tool]', params: { tool: tool.key } }))}
+            style={({ pressed }) => [styles.row, index > 0 && { borderTopWidth: 1, borderTopColor: colors.line }, pressed && styles.pressed]}>
+            <IconTile name={tool.icon} size={42} />
+            <View style={styles.rowText}>
+              <Text weight="semibold" style={styles.rowTitle}>
+                {t(`nav.${tool.key}`)}
+              </Text>
+              <Text tone="faint" style={styles.rowMeta} numberOfLines={1}>
+                {t(`navDesc.${tool.key}`)}
+              </Text>
+            </View>
+            <Icon name="chevronRight" color={colors.tabInactive} size={20} />
+          </Pressable>
+        ))}
+      </Card>
+    </Screen>
+  );
 }
+
+const styles = StyleSheet.create({
+  list: { padding: 0, gap: 0 },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 13, paddingVertical: 12, paddingHorizontal: 14 },
+  rowText: { flex: 1, gap: 2 },
+  rowTitle: { fontSize: 16 },
+  rowMeta: { fontSize: 14 },
+  pressed: { opacity: 0.7 },
+});

apps/mobile/src/app/(tabs)/(practice)/soon/[tool].tsx

@@ -0,0 +1,13 @@
+import { useLocalSearchParams } from 'expo-router';
+import { useTranslation } from 'react-i18next';
+
+import { PlaceholderScreen } from '@/components/placeholder-screen';
+import { PRACTICE_TOOLS } from '@/components/practice-tools';
+
+/** A Practice tool that is not in the app yet. */
+export default function PracticeToolScreen() {
+  const { t } = useTranslation();
+  const { tool } = useLocalSearchParams<{ tool: string }>();
+  const entry = PRACTICE_TOOLS.find((item) => item.key === tool);
+  return <PlaceholderScreen tab="practice" title={entry ? t(`nav.${entry.key}`) : undefined} icon={entry?.icon} />;
+}

apps/mobile/src/app/_layout.tsx

@@ -79,6 +79,8 @@ function Root() {
             <Stack.Screen name="add-link" options={sheet} />
             <Stack.Screen name="new-note" options={sheet} />
             <Stack.Screen name="source/[id]" options={sheet} />
+            {/* Full screen above the tabs, as in mock 07. */}
+            <Stack.Screen name="ask" />
           </Stack.Protected>
           <Stack.Protected guard={session === null}>
             <Stack.Screen name="sign-in" />