CraigBuckmaster · CraigBuckmaster · Apr 24, 2026 · Apr 23, 2026 · Apr 23, 2026 · Apr 23, 2026
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';
diff --git a/app/__tests__/components/guidedStudyV2.test.tsx b/app/__tests__/components/guidedStudyV2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { EvidenceTrailRow, StudyModeSelector } from '@/components/guidedStudy';
+
+const trailItem = {
+ key: 'context:genesis_1_1:ctx',
+ title: 'Start with context',
+ subtitle: 'Ancient audience, genre, and setting',
+ panelType: 'ctx',
+ sectionNum: 1,
+ badge: 'Required' as const,
+};
+
+describe('guided study V2 components', () => {
+ it('renders study modes and emits selection changes', () => {
+ const onChange = jest.fn();
+ const { getByLabelText } = render(<StudyModeSelector value="deep" onChange={onChange} />);
+
+ fireEvent.press(getByLabelText('Teaching prep, 25 min'));
+
+ expect(onChange).toHaveBeenCalledWith('teaching');
+ });
+
+ it('renders an evidence trail row with its badge and opens the panel', () => {
+ const onPress = jest.fn();
+ const { getByLabelText, getByText } = render(
+ <EvidenceTrailRow item={trailItem} index={0} onPress={onPress} />,
+ );
+
+ expect(getByText('Start with context')).toBeTruthy();
+ expect(getByText('Required')).toBeTruthy();
+ fireEvent.press(getByLabelText('Open Start with context'));
+
+ expect(onPress).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/app/__tests__/services/guidedStudy.test.ts b/app/__tests__/services/guidedStudy.test.ts
@@ -80,8 +80,22 @@ const sections: Array<Section & { panels: SectionPanel[] }> = [
 
 const chapterPanels: ChapterPanel[] = [
  { id: 1, chapter_id: 'genesis_1', panel_type: 'cross', content_json: '{"refs":["John 1:1"]}' },
+ { id: 2, chapter_id: 'genesis_1', panel_type: 'debate', content_json: '{"topic":"days"}' },
 ];
 
+const bookIntro: ParsedBookIntro = {
+ era: 'Primeval',
+ purpose: 'Explain beginnings and covenant hope.',
+ at_a_glance: {
+ author: 'Moses (traditional)',
+ date: '~1446–1406 BC',
+ chapters: 50,
+ genre: 'Theological Narrative',
+ key_theme: 'Creation, fall, and covenant promise',
+ key_word: 'beginning',
+ },
+};
+
 describe('guided study services', () => {
  it('calculates stable study depth estimates from verse and panel word counts', () => {
  const estimate = getStudyDepthEstimate(verses, sections[0].panels, chapterPanels);
@@ -94,18 +108,6 @@ describe('guided study services', () => {
  });
 
  it('builds scene rows, observe prompts, recommendations, and concept chips', () => {
- const bookIntro: ParsedBookIntro = {
- era: 'Primeval',
- purpose: 'Explain beginnings and covenant hope.',
- at_a_glance: {
- author: 'Moses (traditional)',
- date: '~1446–1406 BC',
- chapters: 50,
- genre: 'Theological Narrative',
- key_theme: 'Creation, fall, and covenant promise',
- key_word: 'beginning',
- },
- };
  const plan = buildGuidedStudyPlan({
  book,
  chapter,
@@ -116,17 +118,66 @@ describe('guided study services', () => {
  });
 
  expect(plan.title).toBe('The Creation of the Heaven and the Earth');
+ expect(plan.mode).toBe('deep');
  expect(plan.sceneRows.map((row) => row.label)).toEqual([
  'Genre',
  'Moment',
  'Original audience context',
  'Purpose',
  ]);
  expect(plan.prompts).toHaveLength(2);
- expect(plan.recommendations.map((rec) => rec.panelType)).toEqual(['ctx', 'heb', 'cross']);
+ expect(plan.recommendations.map((rec) => rec.panelType)).toEqual([
+ 'ctx',
+ 'heb',
+ 'cross',
+ 'debate',
+ ]);
+ expect(plan.evidenceTrail.map((item) => item.title)).toEqual([
+ 'Start with context',
+ 'Check the language',
+ 'Compare Scripture',
+ 'If unclear, weigh debate',
+ ]);
  expect(plan.conceptChips.map((chip) => chip.label)).toContain('Theological Narrative');
  });
 
+ it('adapts recommendation depth and better questions by study mode', () => {
+ const quick = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'quick',
+ });
+ const teaching = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'teaching',
+ });
+ const devotional = buildGuidedStudyPlan({
+ book,
+ chapter,
+ sections,
+ chapterPanels,
+ verses,
+ bookIntro,
+ mode: 'devotional',
+ });
+
+ expect(quick.recommendations).toHaveLength(3);
+ expect(quick.betterQuestionPrompt).toContain('one question');
+ expect(teaching.betterQuestionPrompt).toContain('teach this passage');
+ expect(devotional.betterQuestionPrompt).toBe(
+ 'What does the chapter emphasize before you ask how it applies to me?',
+ );
+ });
+
  it('schedules one row per populated synthesis field at the first interval', () => {
  const items = buildReviewItemsFromSynthesis({
  takeaway: 'Creation is ordered by God.',

diff --git a/app/src/components/guidedStudy/EvidenceTrailRow.tsx b/app/src/components/guidedStudy/EvidenceTrailRow.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChevronRight } from 'lucide-react-native';
+import { ConfidenceBadge } from './ConfidenceBadge';
+import { fontFamily, MIN_TOUCH_TARGET, radii, spacing, useTheme } from '../../theme';
+import type { GuidedEvidenceTrailItem } from '../../services/guidedStudy';
+
+interface Props {
+ item: GuidedEvidenceTrailItem;
+ index: number;
+ onPress: () => void;
+}
+
+export function EvidenceTrailRow({ item, index, onPress }: Props) {
+ const { base } = useTheme();
+ const isFirst = index === 0;
+
+ return (
+ <TouchableOpacity
+ onPress={onPress}
+ activeOpacity={0.72}
+ style={[
+ styles.row,
+ {
+ backgroundColor: isFirst ? `${base.gold}10` : base.bgElevated,
+ borderColor: isFirst ? `${base.gold}35` : `${base.border}99`,
+ },
+ ]}
+ accessibilityRole="button"
+ accessibilityLabel={`Open ${item.title}`}
+ >
+ <View style={[styles.stripe, { backgroundColor: base.gold }]} />
+ <View style={[styles.indexPill, { borderColor: `${base.gold}45` }]}>
+ <Text style={[styles.indexText, { color: base.gold }]}>{index + 1}</Text>
+ </View>
+ <View style={styles.textWrap}>
+ <View style={styles.titleRow}>
+ <Text style={[styles.title, { color: base.text }]}>{item.title}</Text>
+ <View style={[styles.badge, { borderColor: `${base.gold}30` }]}>
+ <Text style={[styles.badgeText, { color: base.gold }]}>{item.badge}</Text>
+ </View>
+ <ConfidenceBadge level={item.confidence} />
+ </View>
+ <Text style={[styles.subtitle, { color: base.textMuted }]}>{item.subtitle}</Text>
+ </View>
+ <ChevronRight size={15} color={base.textMuted} />
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ row: {
+ minHeight: MIN_TOUCH_TARGET,
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.sm,
+ borderWidth: 1,
+ borderRadius: radii.md,
+ overflow: 'hidden',
+ paddingRight: spacing.sm,
+ },
+ stripe: {
+ width: 3,
+ alignSelf: 'stretch',
+ },
+ indexPill: {
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ borderWidth: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ indexText: {
+ fontFamily: fontFamily.uiSemiBold,
+ fontSize: 11,
+ },
+ textWrap: {
+ flex: 1,
+ paddingVertical: spacing.sm,
+ },
+ titleRow: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: spacing.xs,
+ flexWrap: 'wrap',
+ },
+ title: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 14,
+ },
+ subtitle: {
+ fontFamily: fontFamily.ui,
+ fontSize: 12,
+ marginTop: 2,
+ },
+ badge: {
+ borderWidth: 1,
+ borderRadius: radii.pill,
+ paddingHorizontal: spacing.xs,
+ paddingVertical: 2,
+ },
+ badgeText: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 10,
+ },
+});
diff --git a/app/src/components/guidedStudy/StudyModeSelector.tsx b/app/src/components/guidedStudy/StudyModeSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+ GUIDED_STUDY_MODE_OPTIONS,
+ type GuidedStudyMode,
+} from '../../services/guidedStudy';
+import { fontFamily, radii, spacing, useTheme } from '../../theme';
+
+interface Props {
+ value: GuidedStudyMode;
+ onChange: (mode: GuidedStudyMode) => void;
+}
+
+export function StudyModeSelector({ value, onChange }: Props) {
+ const { base } = useTheme();
+
+ return (
+ <View style={styles.wrap}>
+ {GUIDED_STUDY_MODE_OPTIONS.map((mode) => {
+ const active = mode.key === value;
+ return (
+ <TouchableOpacity
+ key={mode.key}
+ onPress={() => onChange(mode.key)}
+ activeOpacity={0.72}
+ style={[
+ styles.option,
+ {
+ borderColor: active ? base.gold : `${base.border}AA`,
+ backgroundColor: active ? `${base.gold}16` : base.bgSurface,
+ },
+ ]}
+ accessibilityRole="tab"
+ accessibilityState={{ selected: active }}
+ accessibilityLabel={`${mode.label}, ${mode.estimate}`}
+ >
+ <Text style={[styles.label, { color: active ? base.gold : base.text }]}>{mode.label}</Text>
+ <Text style={[styles.estimate, { color: base.textMuted }]}>{mode.estimate}</Text>
+ </TouchableOpacity>
+ );
+ })}
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ wrap: {
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ gap: spacing.xs,
+ paddingHorizontal: spacing.md,
+ marginBottom: spacing.md,
+ },
+ option: {
+ borderWidth: 1,
+ borderRadius: radii.md,
+ paddingHorizontal: spacing.sm,
+ paddingVertical: spacing.xs,
+ minWidth: '47%',
+ flexGrow: 1,
+ },
+ label: {
+ fontFamily: fontFamily.uiMedium,
+ fontSize: 12,
+ },
+ estimate: {
+ fontFamily: fontFamily.ui,
+ fontSize: 10,
+ marginTop: 2,
+ },
+});
diff --git a/app/src/components/guidedStudy/index.ts b/app/src/components/guidedStudy/index.ts
@@ -1,6 +1,8 @@
 export { ConfidenceBadge } from './ConfidenceBadge';
 export { ContextGuardBanner } from './ContextGuardBanner';
+export { EvidenceTrailRow } from './EvidenceTrailRow';
 export { HomeReviewDueCard } from './HomeReviewDueCard';
 export { PanelRecommendationRow } from './PanelRecommendationRow';
+export { StudyModeSelector } from './StudyModeSelector';
 export { StudySessionCTA } from './StudySessionCTA';
 export { StudySessionStepper } from './StudySessionStepper';