feat: record details screen

doc/roadmap.txt

···
 
 Phase 3: Record Inspector
 - [x] com.atproto.repo.getRecord: fetch single record
-- [ ] RecordDetailPage: JSON tree viewer with collapsible nodes
-      - [ ] Syntax highlighting for JSON
-      - [ ] Copy buttons at every level (URI, CID, path values)
-      - [ ] Metadata header: AT URI, CID, indexedAt
-      - [ ] Inline blob display (images/videos)
-      - [ ] Export actions: JSON file, share sheet
+- [x] RecordDetailPage: JSON tree viewer with collapsible nodes
+      - [x] Syntax highlighting for JSON
+      - [x] Copy buttons at every level (URI, CID, path values)
+      - [x] Metadata header: AT URI, CID, indexedAt
+      - [x] Inline blob display (images/videos)
+      - [x] Export actions: JSON file, share sheet
 
 Tests:
 - [x] Widget test: debug overlay hidden in release mode
···
 - [x] User-facing DevTools (production) for repository inspection
 - [x] Collections browser with search and pinning
 - [x] Records list with rich previews and pagination
-- [ ] Record inspector with JSON tree and metadata
-- [ ] UI is transparent, "power-user" focused
+- [x] Record inspector with JSON tree and metadata
+- [x] UI is transparent, "power-user" focused
 
 ================================================================================
 O. Hardening (mobile)                                                   *bsky-O*

lib/src/app/router.dart

···
 import 'package:lazurite/src/features/composer/presentation/screens/composer_screen.dart';
 import 'package:lazurite/src/features/composer/presentation/screens/draft_list_screen.dart';
 import 'package:lazurite/src/features/composer/presentation/widgets/draft_recovery_listener.dart';
+import 'package:lazurite/src/features/developer_tools/presentation/screens/collections_page.dart';
 import 'package:lazurite/src/features/developer_tools/presentation/screens/dev_tools_home_page.dart';
+import 'package:lazurite/src/features/developer_tools/presentation/screens/record_detail_page.dart';
+import 'package:lazurite/src/features/developer_tools/presentation/screens/records_page.dart';
 import 'package:lazurite/src/features/dms/presentation/conversation_detail_screen.dart';
 import 'package:lazurite/src/features/dms/presentation/conversation_list_screen.dart';
 import 'package:lazurite/src/features/feeds/presentation/screens/feed_discovery_screen.dart';
···
 
 /// Global navigator key for the root navigator.
 final rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
+
+/// Helper to get DID from auth state for DevTools routes.
+String _getDidFromAuth(Ref ref) {
+  final authState = ref.read(authProvider);
+  if (authState is AuthStateAuthenticated) {
+    return authState.session.did;
+  }
+  return '';
+}
 
 /// Creates and configures the app router.
 ///
···
         path: AppRoutes.devtools,
         name: AppRouteNames.devToolsHome,
         builder: (context, state) => const DevToolsHomePage(),
+        routes: [
+          GoRoute(
+            path: AppRoutes.devtoolsCollections,
+            name: AppRouteNames.devToolsCollections,
+            pageBuilder: (context, state) => LazuritePageTransitions.build(
+              child: const CollectionsPage(),
+              type: LazuriteTransitionType.sharedAxisHorizontal,
+              state: state,
+              controller: animationController,
+            ),
+            routes: [
+              GoRoute(
+                path: AppRoutes.devtoolsRecords,
+                name: AppRouteNames.devToolsRecords,
+                pageBuilder: (context, state) => LazuritePageTransitions.build(
+                  child: RecordsPage(
+                    did: _getDidFromAuth(ref),
+                    collection: Uri.decodeComponent(state.pathParameters['collection']!),
+                  ),
+                  type: LazuriteTransitionType.sharedAxisHorizontal,
+                  state: state,
+                  controller: animationController,
+                ),
+                routes: [
+                  GoRoute(
+                    path: AppRoutes.devtoolsRecord,
+                    name: AppRouteNames.devToolsRecord,
+                    pageBuilder: (context, state) => LazuritePageTransitions.build(
+                      child: RecordDetailPage(
+                        collection: Uri.decodeComponent(state.pathParameters['collection']!),
+                        rkey: Uri.decodeComponent(state.pathParameters['rkey']!),
+                      ),
+                      type: LazuriteTransitionType.sharedAxisHorizontal,
+                      state: state,
+                      controller: animationController,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
       ),
     ],
   );

lib/src/app/routes.dart

···
   static const String feeds = '/feeds';
   static const String discoverFeeds = 'discover';
   static const String devtools = '/devtools';
+  static const String devtoolsCollections = 'collections';
+  static const String devtoolsRecords = ':collection';
+  static const String devtoolsRecord = ':rkey';
 }
 
 /// Route names for named navigation.
···
   static const String feeds = 'feeds';
   static const String discoverFeeds = 'discoverFeeds';
   static const String devToolsHome = 'devToolsHome';
+  static const String devToolsCollections = 'devToolsCollections';
+  static const String devToolsRecords = 'devToolsRecords';
+  static const String devToolsRecord = 'devToolsRecord';
 }

lib/src/features/developer_tools/application/devtools_providers.dart

···
   return db.devToolsDao.watchPins().map((pins) => pins.map((p) => p.uri).toList());
 }
 
+/// Provides a single record by collection and rkey for the current user.
+///
+/// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+/// [rkey] is the record key.
+/// Returns null if not authenticated or record not found.
+@riverpod
+Future<RepoRecord?> recordDetail(Ref ref, String collection, String rkey) async {
+  final authState = ref.watch(authProvider);
+  if (authState is! AuthStateAuthenticated) {
+    return null;
+  }
+
+  final repo = ref.watch(devtoolsRepositoryProvider);
+  return repo.getRecord(repo: authState.session.did, collection: collection, rkey: rkey);
+}
+
 /// State class for managing paginated records.
 class RecordsState {
   const RecordsState({

lib/src/features/developer_tools/application/devtools_providers.g.dart

···
 
 String _$pinnedUrisHash() => r'dbe9bd345d2600ce0cd40c65deceba8141a827c6';
 
+/// Provides a single record by collection and rkey for the current user.
+///
+/// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+/// [rkey] is the record key.
+/// Returns null if not authenticated or record not found.
+
+@ProviderFor(recordDetail)
+final recordDetailProvider = RecordDetailFamily._();
+
+/// Provides a single record by collection and rkey for the current user.
+///
+/// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+/// [rkey] is the record key.
+/// Returns null if not authenticated or record not found.
+
+final class RecordDetailProvider
+    extends $FunctionalProvider<AsyncValue<RepoRecord?>, RepoRecord?, FutureOr<RepoRecord?>>
+    with $FutureModifier<RepoRecord?>, $FutureProvider<RepoRecord?> {
+  /// Provides a single record by collection and rkey for the current user.
+  ///
+  /// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+  /// [rkey] is the record key.
+  /// Returns null if not authenticated or record not found.
+  RecordDetailProvider._({
+    required RecordDetailFamily super.from,
+    required (String, String) super.argument,
+  }) : super(
+         retry: null,
+         name: r'recordDetailProvider',
+         isAutoDispose: true,
+         dependencies: null,
+         $allTransitiveDependencies: null,
+       );
+
+  @override
+  String debugGetCreateSourceHash() => _$recordDetailHash();
+
+  @override
+  String toString() {
+    return r'recordDetailProvider'
+        ''
+        '$argument';
+  }
+
+  @$internal
+  @override
+  $FutureProviderElement<RepoRecord?> $createElement($ProviderPointer pointer) =>
+      $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<RepoRecord?> create(Ref ref) {
+    final argument = this.argument as (String, String);
+    return recordDetail(ref, argument.$1, argument.$2);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is RecordDetailProvider && other.argument == argument;
+  }
+
+  @override
+  int get hashCode {
+    return argument.hashCode;
+  }
+}
+
+String _$recordDetailHash() => r'34d48a10bfaae231d25dcc6a1d6d175b007cb906';
+
+/// Provides a single record by collection and rkey for the current user.
+///
+/// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+/// [rkey] is the record key.
+/// Returns null if not authenticated or record not found.
+
+final class RecordDetailFamily extends $Family
+    with $FunctionalFamilyOverride<FutureOr<RepoRecord?>, (String, String)> {
+  RecordDetailFamily._()
+    : super(
+        retry: null,
+        name: r'recordDetailProvider',
+        dependencies: null,
+        $allTransitiveDependencies: null,
+        isAutoDispose: true,
+      );
+
+  /// Provides a single record by collection and rkey for the current user.
+  ///
+  /// [collection] is the NSID of the collection (e.g., "app.bsky.feed.post").
+  /// [rkey] is the record key.
+  /// Returns null if not authenticated or record not found.
+
+  RecordDetailProvider call(String collection, String rkey) =>
+      RecordDetailProvider._(argument: (collection, rkey), from: this);
+
+  @override
+  String toString() => r'recordDetailProvider';
+}
+
 /// Provides paginated records for a specific collection.
 ///
 /// Manages infinite scroll with cursor-based pagination.
···
   }
 }
 
-String _$recordsHash() => r'394b8e4921fa44831bf2ada0705c265b008fe3c1';
+String _$recordsHash() => r'276711cc187ecfe00faa0c8340ab6394d498beef';
 
 /// Provides paginated records for a specific collection.
 ///

lib/src/features/developer_tools/presentation/screens/collections_page.dart

···
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:lazurite/src/app/providers.dart';
+import 'package:lazurite/src/app/routes.dart';
 import 'package:lazurite/src/features/developer_tools/application/devtools_providers.dart';
 import 'package:lazurite/src/features/developer_tools/domain/repo_collection.dart';
 
···
         ],
       ),
       onTap: () {
-        // TODO: Navigate to RecordsPage
-        ScaffoldMessenger.of(
-          context,
-        ).showSnackBar(SnackBar(content: Text('Opening ${collection.nsid}...')));
+        context.goNamed(
+          AppRouteNames.devToolsRecords,
+          pathParameters: {'collection': Uri.encodeComponent(collection.nsid)},
+        );
       },
     );
   }

lib/src/features/developer_tools/presentation/screens/record_detail_page.dart

···
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_json/flutter_json.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:lazurite/src/features/developer_tools/application/devtools_providers.dart';
+import 'package:lazurite/src/features/developer_tools/domain/repo_record.dart';
+
+/// A page that displays the full details of a single ATProto record.
+///
+/// Shows metadata (AT URI, CID, indexedAt), a collapsible JSON tree viewer,
+/// and copy/export actions.
+class RecordDetailPage extends ConsumerWidget {
+  const RecordDetailPage({required this.collection, required this.rkey, super.key});
+
+  final String collection;
+  final String rkey;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+    final recordAsync = ref.watch(recordDetailProvider(collection, rkey));
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(rkey, overflow: TextOverflow.ellipsis),
+        leading: IconButton(icon: const Icon(Icons.arrow_back), onPressed: () => context.pop()),
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.share),
+            tooltip: 'Share JSON',
+            onPressed: () {
+              recordAsync.whenData((record) {
+                if (record != null) {
+                  _shareRecord(context, record);
+                }
+              });
+            },
+          ),
+        ],
+      ),
+      body: recordAsync.when(
+        data: (record) {
+          if (record == null) {
+            return Center(
+              child: Text(
+                'Record not found',
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  color: theme.colorScheme.onSurfaceVariant,
+                ),
+              ),
+            );
+          }
+          return _RecordDetailContent(record: record);
+        },
+        loading: () => const Center(child: CircularProgressIndicator()),
+        error: (error, stack) => Center(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(Icons.error_outline, size: 48, color: theme.colorScheme.error),
+                const SizedBox(height: 16),
+                Text('Failed to load record', style: theme.textTheme.titleMedium),
+                const SizedBox(height: 8),
+                Text(
+                  error.toString(),
+                  textAlign: TextAlign.center,
+                  style: theme.textTheme.bodySmall?.copyWith(
+                    color: theme.colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                const SizedBox(height: 16),
+                ElevatedButton.icon(
+                  onPressed: () => ref.invalidate(recordDetailProvider(collection, rkey)),
+                  icon: const Icon(Icons.refresh),
+                  label: const Text('Retry'),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _shareRecord(BuildContext context, RepoRecord record) {
+    final jsonString = const JsonEncoder.withIndent('  ').convert(record.toJson());
+    Clipboard.setData(ClipboardData(text: jsonString));
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(const SnackBar(content: Text('Record JSON copied to clipboard')));
+  }
+}
+
+class _RecordDetailContent extends StatelessWidget {
+  const _RecordDetailContent({required this.record});
+
+  final RepoRecord record;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _MetadataHeader(record: record),
+          const SizedBox(height: 24),
+          ..._buildBlobPreviews(context),
+          _JsonTreeSection(record: record),
+        ],
+      ),
+    );
+  }
+
+  List<Widget> _buildBlobPreviews(BuildContext context) {
+    final blobs = _findBlobs(record.value);
+    if (blobs.isEmpty) return [];
+
+    return [
+      Text('Blobs', style: Theme.of(context).textTheme.titleMedium),
+      const SizedBox(height: 8),
+      ...blobs.map((blob) => _BlobPreview(blob: blob)),
+      const SizedBox(height: 24),
+    ];
+  }
+
+  List<Map<String, dynamic>> _findBlobs(dynamic value, [List<Map<String, dynamic>>? results]) {
+    results ??= [];
+
+    if (value is Map<String, dynamic>) {
+      if (value[r'$type'] == 'blob' && value['ref'] != null) {
+        results.add(value);
+      } else {
+        for (final v in value.values) {
+          _findBlobs(v, results);
+        }
+      }
+    } else if (value is List) {
+      for (final item in value) {
+        _findBlobs(item, results);
+      }
+    }
+
+    return results;
+  }
+}
+
+class _MetadataHeader extends StatelessWidget {
+  const _MetadataHeader({required this.record});
+
+  final RepoRecord record;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text('Metadata', style: theme.textTheme.titleMedium),
+            const SizedBox(height: 16),
+            _MetadataRow(label: 'AT URI', value: record.uri, copyable: true),
+            const Divider(height: 24),
+            _MetadataRow(label: 'CID', value: record.cid, copyable: true),
+            if (record.indexedAt != null) ...[
+              const Divider(height: 24),
+              _MetadataRow(
+                label: 'Indexed At',
+                value: _formatDate(record.indexedAt!),
+                copyable: false,
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+
+  String _formatDate(DateTime date) {
+    return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')} '
+        '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}:'
+        '${date.second.toString().padLeft(2, '0')} UTC';
+  }
+}
+
+class _MetadataRow extends StatelessWidget {
+  const _MetadataRow({required this.label, required this.value, this.copyable = false});
+
+  final String label;
+  final String value;
+  final bool copyable;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                label,
+                style: theme.textTheme.labelSmall?.copyWith(
+                  color: theme.colorScheme.onSurfaceVariant,
+                ),
+              ),
+              const SizedBox(height: 4),
+              SelectableText(
+                value,
+                style: theme.textTheme.bodyMedium?.copyWith(fontFamily: 'monospace'),
+              ),
+            ],
+          ),
+        ),
+        if (copyable)
+          IconButton(
+            icon: const Icon(Icons.copy, size: 18),
+            onPressed: () {
+              Clipboard.setData(ClipboardData(text: value));
+              ScaffoldMessenger.of(
+                context,
+              ).showSnackBar(SnackBar(content: Text('$label copied to clipboard')));
+            },
+            tooltip: 'Copy $label',
+          ),
+      ],
+    );
+  }
+}
+
+class _JsonTreeSection extends StatelessWidget {
+  const _JsonTreeSection({required this.record});
+
+  final RepoRecord record;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final isDark = theme.brightness == Brightness.dark;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text('Record Value', style: theme.textTheme.titleMedium),
+            IconButton(
+              icon: const Icon(Icons.copy),
+              tooltip: 'Copy JSON',
+              onPressed: () {
+                final jsonString = const JsonEncoder.withIndent('  ').convert(record.value);
+                Clipboard.setData(ClipboardData(text: jsonString));
+                ScaffoldMessenger.of(
+                  context,
+                ).showSnackBar(const SnackBar(content: Text('JSON copied to clipboard')));
+              },
+            ),
+          ],
+        ),
+        const SizedBox(height: 8),
+        Container(
+          constraints: const BoxConstraints(maxHeight: 500),
+          decoration: BoxDecoration(
+            color: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.3),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: JsonWidget(
+            json: record.value,
+            initialExpandDepth: 2,
+            keyColor: isDark ? Colors.cyan : Colors.blue.shade800,
+            stringColor: isDark ? Colors.lightGreen : Colors.green.shade800,
+            boolColor: isDark ? Colors.purple.shade300 : Colors.purple.shade700,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _BlobPreview extends StatelessWidget {
+  const _BlobPreview({required this.blob});
+
+  final Map<String, dynamic> blob;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final mimeType = blob['mimeType'] as String? ?? 'unknown';
+    final size = blob['size'] as int? ?? 0;
+    final ref = blob['ref'] as Map<String, dynamic>?;
+    final link = ref?[r'$link'] as String?;
+
+    final isImage = mimeType.startsWith('image/');
+    final isVideo = mimeType.startsWith('video/');
+
+    return Card(
+      margin: const EdgeInsets.only(bottom: 8),
+      child: ListTile(
+        leading: Icon(
+          isImage
+              ? Icons.image
+              : isVideo
+              ? Icons.videocam
+              : Icons.attachment,
+          color: theme.colorScheme.primary,
+        ),
+        title: Text(mimeType),
+        subtitle: Text(
+          '${_formatSize(size)}${link != null ? ' • CID: ${link.substring(0, 12)}...' : ''}',
+        ),
+        trailing: link != null
+            ? IconButton(
+                icon: const Icon(Icons.copy, size: 18),
+                onPressed: () {
+                  Clipboard.setData(ClipboardData(text: link));
+                  ScaffoldMessenger.of(
+                    context,
+                  ).showSnackBar(const SnackBar(content: Text('Blob CID copied to clipboard')));
+                },
+              )
+            : null,
+      ),
+    );
+  }
+
+  String _formatSize(int bytes) {
+    if (bytes < 1024) return '$bytes B';
+    if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';
+    return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
+  }
+}

lib/src/features/developer_tools/presentation/screens/records_page.dart

···
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
+import 'package:lazurite/src/app/routes.dart';
 import 'package:lazurite/src/app/providers.dart';
 import 'package:lazurite/src/features/developer_tools/application/devtools_providers.dart';
 import 'package:lazurite/src/features/developer_tools/domain/repo_record.dart';
···
               alignment: Alignment.centerRight,
               child: TextButton.icon(
                 onPressed: () {
-                  // TODO: Navigate to record detail page
-                  ScaffoldMessenger.of(
-                    context,
-                  ).showSnackBar(const SnackBar(content: Text('Record detail coming soon...')));
+                  context.goNamed(
+                    AppRouteNames.devToolsRecord,
+                    pathParameters: {
+                      'collection': Uri.encodeComponent(record.collection),
+                      'rkey': Uri.encodeComponent(record.rkey),
+                    },
+                  );
                 },
                 icon: const Icon(Icons.visibility, size: 18),
                 label: const Text('View Details'),

pubspec.lock

···
       url: "https://pub.dev"
     source: hosted
     version: "0.1.5"
+  flutter_json:
+    dependency: "direct main"
+    description:
+      name: flutter_json
+      sha256: "2848c69365a2db142746186aba676cc9954c3f968c97d0a19d9526a496a1d43a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.6"
   flutter_lints:
     dependency: "direct dev"
     description:

pubspec.yaml

···
   flutter_svg: ^2.0.10+1
   dynamic_color: ^1.8.1
   package_info_plus: ^9.0.0
+  flutter_json: ^0.0.6
 
 dev_dependencies:
   flutter_test:

test/src/features/developer_tools/application/devtools_providers_test.dart

···
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lazurite/src/features/developer_tools/application/devtools_providers.dart';
 import 'package:lazurite/src/features/developer_tools/domain/repo_record.dart';
 import 'package:lazurite/src/features/developer_tools/infrastructure/devtools_repository.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:mocktail/mocktail.dart';
 
 class MockDevtoolsRepository extends Mock implements DevtoolsRepository {}
···
       expect(state.records, hasLength(2));
       expect(state.error, isA<Exception>());
       expect(state.isLoading, false);
+    });
+  });
+
+  group('recordDetailProvider', () {
+    late ProviderContainer container;
+    late MockDevtoolsRepository mockRepository;
+
+    setUp(() {
+      mockRepository = MockDevtoolsRepository();
+
+      container = ProviderContainer(
+        overrides: [devtoolsRepositoryProvider.overrideWithValue(mockRepository)],
+      );
+    });
+
+    tearDown(() {
+      container.dispose();
     });
   });
 }

test/src/features/developer_tools/presentation/screens/record_detail_page_test.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/app/theme.dart';
+import 'package:lazurite/src/features/developer_tools/application/devtools_providers.dart';
+import 'package:lazurite/src/features/developer_tools/domain/repo_record.dart';
+import 'package:lazurite/src/features/developer_tools/presentation/screens/record_detail_page.dart';
+
+void main() {
+  group('RecordDetailPage', () {
+    const testCollection = 'app.bsky.feed.post';
+    const testRkey = 'abc123';
+    const testDid = 'did:plc:test123';
+
+    final testRecord = RepoRecord(
+      uri: 'at://$testDid/$testCollection/$testRkey',
+      cid: 'bafyreiabc123456789abcdef',
+      value: {
+        r'$type': 'app.bsky.feed.post',
+        'text': 'Hello, world! This is a test post.',
+        'createdAt': '2026-01-09T00:00:00.000Z',
+      },
+      indexedAt: DateTime.parse('2026-01-09T00:00:00.000Z'),
+    );
+
+    Widget createSubject({RepoRecord? record, bool returnNull = false}) {
+      return ProviderScope(
+        overrides: [
+          recordDetailProvider(
+            testCollection,
+            testRkey,
+          ).overrideWith((ref) async => returnNull ? null : (record ?? testRecord)),
+        ],
+        child: MaterialApp(
+          theme: AppTheme.dark,
+          home: const RecordDetailPage(collection: testCollection, rkey: testRkey),
+        ),
+      );
+    }
+
+    Future<void> pumpWithFrames(WidgetTester tester) async {
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 100));
+      await tester.pump(const Duration(milliseconds: 100));
+    }
+
+    testWidgets('renders metadata header with AT URI', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await pumpWithFrames(tester);
+
+      expect(find.text('Metadata'), findsOneWidget);
+      expect(find.text('AT URI'), findsOneWidget);
+      expect(find.textContaining('at://$testDid'), findsOneWidget);
+    });
+
+    testWidgets('renders metadata header with CID', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await pumpWithFrames(tester);
+
+      expect(find.text('CID'), findsOneWidget);
+      expect(find.textContaining('bafyreiabc123456789abcdef'), findsOneWidget);
+    });
+
+    testWidgets('renders metadata header with indexed timestamp', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await pumpWithFrames(tester);
+
+      expect(find.text('Indexed At'), findsOneWidget);
+      expect(find.textContaining('2026-01-09'), findsOneWidget);
+    });
+
+    testWidgets('renders JSON tree section', (tester) async {
+      await tester.pumpWidget(createSubject());
+      await pumpWithFrames(tester);
+
+      expect(find.text('Record Value'), findsOneWidget);
+    });
+
+    testWidgets('copies AT URI to clipboard when copy button is tapped', (tester) async {
+      final log = <MethodCall>[];
+
+      TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger.setMockMethodCallHandler(
+        SystemChannels.platform,
+        (methodCall) async {
+          log.add(methodCall);
+          return null;
+        },
+      );
+
+      await tester.pumpWidget(createSubject());
+      await pumpWithFrames(tester);
+
+      final copyButtons = find.byIcon(Icons.copy);
+      expect(copyButtons, findsAtLeastNWidgets(2));
+
+      await tester.tap(copyButtons.first);
+      await tester.pump();
+      await tester.pump(const Duration(seconds: 1));
+
+      final clipboardCalls = log.where((c) => c.method == 'Clipboard.setData');
+      expect(clipboardCalls, isNotEmpty);
+    });
+
+    testWidgets('displays Record not found for null record', (tester) async {
+      await tester.pumpWidget(createSubject(returnNull: true));
+      await pumpWithFrames(tester);
+
+      expect(find.text('Record not found'), findsOneWidget);
+    });
+
+    group('Blob detection', () {
+      testWidgets('detects and displays blob references', (tester) async {
+        final recordWithBlob = RepoRecord(
+          uri: 'at://$testDid/$testCollection/$testRkey',
+          cid: 'bafyreiabc123456789abcdef',
+          value: {
+            r'$type': 'app.bsky.feed.post',
+            'text': 'Post with image',
+            'embed': {
+              r'$type': 'blob',
+              'ref': {r'$link': 'bafyreia_blob_cid_12345678'},
+              'mimeType': 'image/jpeg',
+              'size': 102400,
+            },
+          },
+          indexedAt: DateTime.parse('2026-01-09T00:00:00.000Z'),
+        );
+
+        await tester.pumpWidget(createSubject(record: recordWithBlob));
+        await pumpWithFrames(tester);
+
+        expect(find.text('Blobs'), findsOneWidget);
+        expect(find.text('image/jpeg'), findsOneWidget);
+        expect(find.byIcon(Icons.image), findsOneWidget);
+      });
+
+      testWidgets('shows video icon for video blobs', (tester) async {
+        final recordWithVideo = RepoRecord(
+          uri: 'at://$testDid/$testCollection/$testRkey',
+          cid: 'bafyreiabc123456789abcdef',
+          value: {
+            r'$type': 'app.bsky.feed.post',
+            'text': 'Post with video',
+            'embed': {
+              r'$type': 'blob',
+              'ref': {r'$link': 'bafyreia_blob_cid_12345678'},
+              'mimeType': 'video/mp4',
+              'size': 5242880,
+            },
+          },
+          indexedAt: DateTime.parse('2026-01-09T00:00:00.000Z'),
+        );
+
+        await tester.pumpWidget(createSubject(record: recordWithVideo));
+        await pumpWithFrames(tester);
+
+        expect(find.text('Blobs'), findsOneWidget);
+        expect(find.text('video/mp4'), findsOneWidget);
+        expect(find.byIcon(Icons.videocam), findsOneWidget);
+      });
+
+      testWidgets('does not show blobs section when no blobs present', (tester) async {
+        await tester.pumpWidget(createSubject());
+        await pumpWithFrames(tester);
+
+        expect(find.text('Blobs'), findsNothing);
+      });
+    });
+  });
+}