feat: add external link embedding to composer

doc/roadmap.txt

···
       - [x] Calculate byte offsets (UTF-8 encoding)
       - [x] Build facet array
       - [x] Handle unicode and emoji correctly
-- [ ] Integrate facet parsing:
-      - [ ] Parse text on publish
-      - [ ] Store facets in facetsJson
-      - [ ] Include facets in post record
-      - [ ] Visual styling for mentions
-      - [ ] Visual styling for links
-- [ ] Link card preview:
-      - [ ] Detect URLs in text
-      - [ ] Fetch link metadata (unfurling)
-      - [ ] Display link card preview
-      - [ ] Include external embed
+- [x] Integrate facet parsing:
+      - [x] Parse text on publish
+      - [x] Store facets in facetsJson
+      - [x] Include facets in post record
+      - [x] Visual styling for mentions
+      - [x] Visual styling for links
+- [x] Link card preview:
+      - [x] Detect URLs in text
+      - [x] Fetch link metadata (unfurling)
+      - [x] Display link card preview
+      - [x] Include external embed
 
 Phase 6 - Global FAB and Polish (HIGH):
 - [ ] Create global FAB widget:
···
       - [ ] Smooth show/hide animation
       - [ ] Tap navigates to /compose
       - [ ] Create new draft automatically
-- [ ] Performance optimization:
-      - [ ] Image thumbnail caching
-      - [ ] Smooth, animated modal transitions
+      - [ ] Performance optimization:
+            - [ ] Image thumbnail caching
+            - [ ] Smooth, animated modal transitions
 
 Tests:
 - [ ] Unit tests:

lib/src/features/composer/application/composer_providers.dart

···
+import 'package:dio/dio.dart';
 import 'package:lazurite/src/app/providers.dart';
 import 'package:lazurite/src/core/utils/logger_provider.dart';
 import 'package:lazurite/src/features/auth/application/auth_providers.dart';
 import 'package:lazurite/src/features/composer/domain/draft.dart' as composer;
+import 'package:lazurite/src/features/composer/domain/facet_parser.dart';
 import 'package:lazurite/src/features/composer/infrastructure/draft_repository.dart';
+import 'package:lazurite/src/features/composer/infrastructure/link_metadata_service.dart';
 import 'package:lazurite/src/infrastructure/network/providers.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'composer_providers.g.dart';
 
 @riverpod
+FacetParser facetParser(Ref ref) {
+  final api = ref.watch(xrpcClientProvider);
+  final logger = ref.watch(loggerProvider('FacetParser'));
+  return FacetParser(api: api, logger: logger);
+}
+
+@riverpod
+LinkMetadataService linkMetadataService(Ref ref) {
+  final logger = ref.watch(loggerProvider('LinkMetadataService'));
+  return LinkMetadataService(dio: Dio(), logger: logger);
+}
+
+@riverpod
 DraftRepository draftRepository(Ref ref) {
   final db = ref.watch(appDatabaseProvider);
   final api = ref.watch(xrpcClientProvider);
   final sessionStorage = ref.watch(sessionStorageProvider);
   final logger = ref.watch(loggerProvider('DraftRepository'));
+  final facetParser = ref.watch(facetParserProvider);
 
   return DraftRepository(
     dao: db.draftsDao,
     api: api,
     sessionStorage: sessionStorage,
     logger: logger,
+    facetParser: facetParser,
   );
 }
 

lib/src/features/composer/application/composer_providers.g.dart

···
 // GENERATED CODE - DO NOT MODIFY BY HAND
 // ignore_for_file: type=lint, type=warning
 
+@ProviderFor(facetParser)
+final facetParserProvider = FacetParserProvider._();
+
+final class FacetParserProvider extends $FunctionalProvider<FacetParser, FacetParser, FacetParser>
+    with $Provider<FacetParser> {
+  FacetParserProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'facetParserProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$facetParserHash();
+
+  @$internal
+  @override
+  $ProviderElement<FacetParser> $createElement($ProviderPointer pointer) =>
+      $ProviderElement(pointer);
+
+  @override
+  FacetParser create(Ref ref) {
+    return facetParser(ref);
+  }
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(FacetParser value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<FacetParser>(value),
+    );
+  }
+}
+
+String _$facetParserHash() => r'3df8a0ee99ce1cb7149075e5f25aa4535ad7d2bf';
+
+@ProviderFor(linkMetadataService)
+final linkMetadataServiceProvider = LinkMetadataServiceProvider._();
+
+final class LinkMetadataServiceProvider
+    extends $FunctionalProvider<LinkMetadataService, LinkMetadataService, LinkMetadataService>
+    with $Provider<LinkMetadataService> {
+  LinkMetadataServiceProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'linkMetadataServiceProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$linkMetadataServiceHash();
+
+  @$internal
+  @override
+  $ProviderElement<LinkMetadataService> $createElement($ProviderPointer pointer) =>
+      $ProviderElement(pointer);
+
+  @override
+  LinkMetadataService create(Ref ref) {
+    return linkMetadataService(ref);
+  }
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(LinkMetadataService value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<LinkMetadataService>(value),
+    );
+  }
+}
+
+String _$linkMetadataServiceHash() => r'f6d106408351a8efbea835eb1b18b52d0b5ef8e2';
+
 @ProviderFor(draftRepository)
 final draftRepositoryProvider = DraftRepositoryProvider._();
 
···
   }
 }
 
-String _$draftRepositoryHash() => r'cf8a45807ae0504c8969416ed0ab88bdc3dfb537';
+String _$draftRepositoryHash() => r'69131f522db3287a9da5df8a3cfc99ef66993e54';
 
 @ProviderFor(drafts)
 final draftsProvider = DraftsProvider._();

lib/src/features/composer/domain/draft.dart

···
     this.quoteUri,
     this.quoteCid,
     this.facetsJson,
+    this.externalUri,
+    this.externalTitle,
+    this.externalDescription,
+    this.externalThumbBlobJson,
     this.errorMessage,
   });
 
···
   final String? quoteUri;
   final String? quoteCid;
   final String? facetsJson;
+  final String? externalUri;
+  final String? externalTitle;
+  final String? externalDescription;
+  final String? externalThumbBlobJson;
   final DraftStatus status;
   final String? errorMessage;
   final DateTime createdAt;

lib/src/features/composer/domain/link_metadata.dart

···
+/// Metadata extracted from a URL for link card previews.
+///
+/// Contains Open Graph tags and fallback data from HTML head tags.
+class LinkMetadata {
+  LinkMetadata({required this.url, this.title, this.description, this.imageUrl, this.siteName});
+
+  /// The original URL that was fetched.
+  final String url;
+
+  /// Page title from og:title or <title> tag.
+  final String? title;
+
+  /// Page description from og:description or meta description.
+  final String? description;
+
+  /// Preview image URL from og:image.
+  final String? imageUrl;
+
+  /// Site name from og:site_name.
+  final String? siteName;
+
+  /// Whether this metadata has any useful information.
+  bool get hasContent => title != null || description != null || imageUrl != null;
+
+  Map<String, dynamic> toJson() {
+    return {
+      'url': url,
+      if (title != null) 'title': title,
+      if (description != null) 'description': description,
+      if (imageUrl != null) 'imageUrl': imageUrl,
+      if (siteName != null) 'siteName': siteName,
+    };
+  }
+}

lib/src/features/composer/infrastructure/draft_repository.dart

···
 import 'package:lazurite/src/core/utils/image_compressor.dart';
 import 'package:lazurite/src/core/utils/logger.dart';
 import 'package:lazurite/src/features/composer/domain/draft.dart' as composer;
+import 'package:lazurite/src/features/composer/domain/facet_parser.dart';
 import 'package:lazurite/src/infrastructure/auth/session_storage.dart';
 import 'package:lazurite/src/infrastructure/db/app_database.dart';
 import 'package:lazurite/src/infrastructure/db/daos/drafts_dao.dart';
···
     required XrpcClient api,
     required SessionStorage sessionStorage,
     required Logger logger,
+    required FacetParser facetParser,
     ImageCompressor? compressor,
   }) : _dao = dao,
        _api = api,
        _sessionStorage = sessionStorage,
        _logger = logger,
+       _facetParser = facetParser,
        _compressor = compressor ?? const ImageCompressor(),
        _uuid = const Uuid();
 
···
   final XrpcClient _api;
   final SessionStorage _sessionStorage;
   final Logger _logger;
+  final FacetParser _facetParser;
   final ImageCompressor _compressor;
   final Uuid _uuid;
   final Map<int, CancelToken> _uploadCancelTokens = {};
···
 
     try {
       final domain = _toDomain(draft);
+
+      final facetsJson = await _facetParser.parse(domain.text);
+      if (facetsJson != null && facetsJson != domain.facetsJson) {
+        await _dao.updateDraftFields(draftId, DraftsCompanion(facetsJson: Value(facetsJson)));
+      }
+
       for (final media in domain.media) {
         if (media.requiresUpload) {
           final blob = await _uploadMedia(
···
       quoteUri: record.draft.quoteUri,
       quoteCid: record.draft.quoteCid,
       facetsJson: record.draft.facetsJson,
+      externalUri: record.draft.externalUri,
+      externalTitle: record.draft.externalTitle,
+      externalDescription: record.draft.externalDescription,
+      externalThumbBlobJson: record.draft.externalThumbBlobJson,
       status: _statusFromDb(record.draft.status),
       errorMessage: record.draft.errorMessage,
       createdAt: record.draft.createdAt,
···
 
     final imagesEmbed = _buildImagesEmbed(draft.media);
     final quoteEmbed = _buildQuoteEmbed(draft);
+    final externalEmbed = _buildExternalEmbed(draft);
 
     Map<String, dynamic>? embed;
     if (imagesEmbed != null && quoteEmbed != null) {
···
         'record': quoteEmbed,
         'media': imagesEmbed,
       };
+    } else if (imagesEmbed != null && externalEmbed != null) {
+      _logger.warning('Cannot combine images and external link embed, using images only');
+      embed = imagesEmbed;
     } else if (imagesEmbed != null) {
       embed = imagesEmbed;
     } else if (quoteEmbed != null) {
       embed = quoteEmbed;
+    } else if (externalEmbed != null) {
+      embed = externalEmbed;
     }
 
     if (embed != null) {
···
       '\$type': 'app.bsky.embed.record',
       'record': {'uri': draft.quoteUri, if (draft.quoteCid != null) 'cid': draft.quoteCid},
     };
+  }
+
+  Map<String, dynamic>? _buildExternalEmbed(composer.Draft draft) {
+    if (draft.externalUri == null) {
+      return null;
+    }
+
+    final external = <String, dynamic>{
+      'uri': draft.externalUri!,
+      if (draft.externalTitle != null) 'title': draft.externalTitle!,
+      if (draft.externalDescription != null) 'description': draft.externalDescription!,
+    };
+
+    if (draft.externalThumbBlobJson != null) {
+      try {
+        final thumbBlob = jsonDecode(draft.externalThumbBlobJson!);
+        external['thumb'] = thumbBlob;
+      } catch (e) {
+        _logger.warning('Failed to decode external thumb blob for ${draft.id}: $e');
+      }
+    }
+
+    return {'\$type': 'app.bsky.embed.external', 'external': external};
   }
 }

lib/src/features/composer/infrastructure/link_metadata_service.dart

···
+import 'package:dio/dio.dart';
+import 'package:html/parser.dart' as html_parser;
+import 'package:lazurite/src/core/utils/logger.dart';
+import 'package:lazurite/src/features/composer/domain/link_metadata.dart';
+
+/// Service for fetching and parsing URL metadata for link card previews.
+///
+/// Fetches HTML content and extracts Open Graph tags and fallback metadata
+/// from standard HTML meta tags.
+class LinkMetadataService {
+  LinkMetadataService({required Dio dio, required Logger logger}) : _dio = dio, _logger = logger;
+
+  final Dio _dio;
+  final Logger _logger;
+
+  /// Fetches metadata for a given URL.
+  ///
+  /// Returns null if the URL cannot be fetched or parsed.
+  /// Caches results for performance (future enhancement).
+  Future<LinkMetadata?> fetchMetadata(String url) async {
+    try {
+      final normalizedUrl = _normalizeUrl(url);
+      if (normalizedUrl == null) {
+        _logger.warning('Invalid URL: $url');
+        return null;
+      }
+
+      final response = await _dio.get<String>(
+        normalizedUrl,
+        options: Options(
+          followRedirects: true,
+          maxRedirects: 5,
+          validateStatus: (status) => status != null && status < 400,
+          headers: {
+            'User-Agent':
+                'Mozilla/5.0 (compatible; Lazurite/1.0; +https://github.com/bluesky-social/lazurite)',
+          },
+        ),
+      );
+
+      if (response.data == null) {
+        _logger.warning('Empty response for URL: $normalizedUrl');
+        return null;
+      }
+
+      return _parseHtml(normalizedUrl, response.data!);
+    } on DioException catch (e) {
+      _logger.warning('Failed to fetch URL metadata: $url', e);
+      return null;
+    } catch (e, stack) {
+      _logger.error('Unexpected error fetching URL metadata: $url', e, stack);
+      return null;
+    }
+  }
+
+  /// Normalizes a URL by adding protocol if missing and validating format.
+  String? _normalizeUrl(String url) {
+    var normalized = url.trim();
+    if (!normalized.startsWith('http://') && !normalized.startsWith('https://')) {
+      normalized = 'https://$normalized';
+    }
+
+    try {
+      final uri = Uri.parse(normalized);
+      if (!uri.hasScheme || !uri.hasAuthority) {
+        return null;
+      }
+      return normalized;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /// Parses HTML content to extract metadata.
+  ///
+  /// Prioritizes Open Graph tags, falls back to standard HTML meta tags.
+  LinkMetadata _parseHtml(String url, String html) {
+    final document = html_parser.parse(html);
+
+    String? getMetaContent(String property, {String attribute = 'property'}) {
+      final element = document.querySelector('meta[$attribute="$property"]');
+      return element?.attributes['content'];
+    }
+
+    final ogTitle = getMetaContent('og:title');
+    final ogDescription = getMetaContent('og:description');
+    final ogImage = getMetaContent('og:image');
+    final ogSiteName = getMetaContent('og:site_name');
+
+    final title =
+        ogTitle ??
+        getMetaContent('twitter:title', attribute: 'name') ??
+        document.querySelector('title')?.text;
+
+    final description =
+        ogDescription ??
+        getMetaContent('twitter:description', attribute: 'name') ??
+        getMetaContent('description', attribute: 'name');
+
+    final imageUrl = ogImage ?? getMetaContent('twitter:image', attribute: 'name');
+
+    final siteName =
+        ogSiteName ?? getMetaContent('twitter:site', attribute: 'name') ?? Uri.parse(url).host;
+
+    return LinkMetadata(
+      url: url,
+      title: title?.trim(),
+      description: description?.trim(),
+      imageUrl: imageUrl?.trim(),
+      siteName: siteName.trim(),
+    );
+  }
+}

lib/src/features/composer/presentation/widgets/composer_text_field.dart

···
+import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flutter/material.dart';
 
-/// Multi-line text field for composing posts with character count.
+/// Multi-line text field for composing posts with character count and rich text styling.
+///
+/// Automatically styles mentions (@handle), links (URLs), and hashtags (#tag) with
+/// distinct colors as the user types.
 class ComposerTextField extends StatelessWidget {
   const ComposerTextField({
     required this.controller,
···
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          TextField(
+          ExtendedTextField(
             controller: controller,
             maxLines: null,
             minLines: 4,
···
             ),
             style: theme.textTheme.bodyLarge,
             onChanged: onChanged,
+            specialTextSpanBuilder: ComposerTextSpanBuilder(
+              mentionColor: colorScheme.primary,
+              linkColor: colorScheme.tertiary,
+              hashtagColor: colorScheme.secondary,
+            ),
           ),
           Padding(
             padding: const EdgeInsets.only(right: 8.0),
···
     );
   }
 }
+
+/// Custom text span builder that styles mentions, links, and hashtags.
+class ComposerTextSpanBuilder extends SpecialTextSpanBuilder {
+  ComposerTextSpanBuilder({
+    required this.mentionColor,
+    required this.linkColor,
+    required this.hashtagColor,
+  });
+
+  final Color mentionColor;
+  final Color linkColor;
+  final Color hashtagColor;
+
+  @override
+  SpecialText? createSpecialText(
+    String flag, {
+    TextStyle? textStyle,
+    SpecialTextGestureTapCallback? onTap,
+    int? index,
+  }) {
+    if (flag.isEmpty) {
+      return null;
+    }
+
+    if (flag == '@') {
+      return MentionText(textStyle: textStyle, color: mentionColor, onTap: onTap);
+    }
+
+    if (flag == '#') {
+      return HashtagText(textStyle: textStyle, color: hashtagColor, onTap: onTap);
+    }
+
+    if (flag == 'http://' || flag == 'https://') {
+      return LinkText(textStyle: textStyle, color: linkColor, onTap: onTap);
+    }
+
+    return null;
+  }
+}
+
+/// Styled text span for @mentions.
+class MentionText extends SpecialText {
+  MentionText({
+    required TextStyle? textStyle,
+    required this.color,
+    SpecialTextGestureTapCallback? onTap,
+  }) : super('@', RegExp(r'\s|$').pattern, textStyle, onTap: onTap);
+
+  final Color color;
+
+  @override
+  InlineSpan finishText() {
+    final text = toString();
+    return TextSpan(
+      text: text,
+      style: textStyle?.copyWith(color: color, fontWeight: FontWeight.w600),
+    );
+  }
+}
+
+/// Styled text span for #hashtags.
+class HashtagText extends SpecialText {
+  HashtagText({
+    required TextStyle? textStyle,
+    required this.color,
+    SpecialTextGestureTapCallback? onTap,
+  }) : super('#', RegExp(r'\s|$').pattern, textStyle, onTap: onTap);
+
+  final Color color;
+
+  @override
+  InlineSpan finishText() {
+    final text = toString();
+    return TextSpan(
+      text: text,
+      style: textStyle?.copyWith(color: color, fontWeight: FontWeight.w600),
+    );
+  }
+}
+
+/// Styled text span for URLs.
+class LinkText extends SpecialText {
+  LinkText({
+    required TextStyle? textStyle,
+    required this.color,
+    SpecialTextGestureTapCallback? onTap,
+  }) : super('http', RegExp(r'\s|$').pattern, textStyle, onTap: onTap);
+
+  final Color color;
+
+  @override
+  InlineSpan finishText() {
+    final text = toString();
+    return TextSpan(
+      text: text,
+      style: textStyle?.copyWith(color: color, decoration: TextDecoration.underline),
+    );
+  }
+}

lib/src/features/composer/presentation/widgets/link_card_preview.dart

···
+import 'package:flutter/material.dart';
+import 'package:lazurite/src/features/composer/domain/link_metadata.dart';
+
+/// Displays a preview card for a link with metadata.
+///
+/// Shows title, description, image, and site name extracted from URL metadata.
+class LinkCardPreview extends StatelessWidget {
+  const LinkCardPreview({required this.metadata, this.onRemove, super.key});
+
+  /// Metadata to display.
+  final LinkMetadata metadata;
+
+  /// Callback fired when user taps remove button.
+  final VoidCallback? onRemove;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Card(
+      margin: const EdgeInsets.symmetric(vertical: 8.0),
+      clipBehavior: Clip.antiAlias,
+      child: IntrinsicHeight(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            if (metadata.imageUrl != null)
+              SizedBox(
+                width: 120,
+                child: Image.network(
+                  metadata.imageUrl!,
+                  fit: BoxFit.cover,
+                  errorBuilder: (context, error, stackTrace) {
+                    return Container(
+                      color: colorScheme.surfaceContainerHighest,
+                      child: Icon(Icons.broken_image, color: colorScheme.onSurfaceVariant),
+                    );
+                  },
+                ),
+              ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(12.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (metadata.siteName != null)
+                      Text(
+                        metadata.siteName!,
+                        style: theme.textTheme.labelSmall?.copyWith(
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    if (metadata.title != null) ...[
+                      const SizedBox(height: 4),
+                      Text(
+                        metadata.title!,
+                        style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                    if (metadata.description != null) ...[
+                      const SizedBox(height: 4),
+                      Text(
+                        metadata.description!,
+                        style: theme.textTheme.bodySmall?.copyWith(
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                        maxLines: 2,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+            if (onRemove != null)
+              IconButton(
+                icon: const Icon(Icons.close),
+                onPressed: onRemove,
+                tooltip: 'Remove link preview',
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/src/infrastructure/db/app_database.g.dart

···
     type: DriftSqlType.string,
     requiredDuringInsert: false,
   );
+  static const VerificationMeta _externalUriMeta = const VerificationMeta('externalUri');
+  @override
+  late final GeneratedColumn<String> externalUri = GeneratedColumn<String>(
+    'external_uri',
+    aliasedName,
+    true,
+    type: DriftSqlType.string,
+    requiredDuringInsert: false,
+  );
+  static const VerificationMeta _externalTitleMeta = const VerificationMeta('externalTitle');
+  @override
+  late final GeneratedColumn<String> externalTitle = GeneratedColumn<String>(
+    'external_title',
+    aliasedName,
+    true,
+    type: DriftSqlType.string,
+    requiredDuringInsert: false,
+  );
+  static const VerificationMeta _externalDescriptionMeta = const VerificationMeta(
+    'externalDescription',
+  );
+  @override
+  late final GeneratedColumn<String> externalDescription = GeneratedColumn<String>(
+    'external_description',
+    aliasedName,
+    true,
+    type: DriftSqlType.string,
+    requiredDuringInsert: false,
+  );
+  static const VerificationMeta _externalThumbBlobJsonMeta = const VerificationMeta(
+    'externalThumbBlobJson',
+  );
+  @override
+  late final GeneratedColumn<String> externalThumbBlobJson = GeneratedColumn<String>(
+    'external_thumb_blob_json',
+    aliasedName,
+    true,
+    type: DriftSqlType.string,
+    requiredDuringInsert: false,
+  );
   static const VerificationMeta _statusMeta = const VerificationMeta('status');
   @override
   late final GeneratedColumn<String> status = GeneratedColumn<String>(
···
     quoteUri,
     quoteCid,
     facetsJson,
+    externalUri,
+    externalTitle,
+    externalDescription,
+    externalThumbBlobJson,
     status,
     errorMessage,
     createdAt,
···
         facetsJson.isAcceptableOrUnknown(data['facets_json']!, _facetsJsonMeta),
       );
     }
+    if (data.containsKey('external_uri')) {
+      context.handle(
+        _externalUriMeta,
+        externalUri.isAcceptableOrUnknown(data['external_uri']!, _externalUriMeta),
+      );
+    }
+    if (data.containsKey('external_title')) {
+      context.handle(
+        _externalTitleMeta,
+        externalTitle.isAcceptableOrUnknown(data['external_title']!, _externalTitleMeta),
+      );
+    }
+    if (data.containsKey('external_description')) {
+      context.handle(
+        _externalDescriptionMeta,
+        externalDescription.isAcceptableOrUnknown(
+          data['external_description']!,
+          _externalDescriptionMeta,
+        ),
+      );
+    }
+    if (data.containsKey('external_thumb_blob_json')) {
+      context.handle(
+        _externalThumbBlobJsonMeta,
+        externalThumbBlobJson.isAcceptableOrUnknown(
+          data['external_thumb_blob_json']!,
+          _externalThumbBlobJsonMeta,
+        ),
+      );
+    }
     if (data.containsKey('status')) {
       context.handle(_statusMeta, status.isAcceptableOrUnknown(data['status']!, _statusMeta));
     } else if (isInserting) {
···
         DriftSqlType.string,
         data['${effectivePrefix}facets_json'],
       ),
+      externalUri: attachedDatabase.typeMapping.read(
+        DriftSqlType.string,
+        data['${effectivePrefix}external_uri'],
+      ),
+      externalTitle: attachedDatabase.typeMapping.read(
+        DriftSqlType.string,
+        data['${effectivePrefix}external_title'],
+      ),
+      externalDescription: attachedDatabase.typeMapping.read(
+        DriftSqlType.string,
+        data['${effectivePrefix}external_description'],
+      ),
+      externalThumbBlobJson: attachedDatabase.typeMapping.read(
+        DriftSqlType.string,
+        data['${effectivePrefix}external_thumb_blob_json'],
+      ),
       status: attachedDatabase.typeMapping.read(
         DriftSqlType.string,
         data['${effectivePrefix}status'],
···
   final String? quoteUri;
   final String? quoteCid;
   final String? facetsJson;
+  final String? externalUri;
+  final String? externalTitle;
+  final String? externalDescription;
+  final String? externalThumbBlobJson;
   final String status;
   final String? errorMessage;
   final DateTime createdAt;
···
     this.quoteUri,
     this.quoteCid,
     this.facetsJson,
+    this.externalUri,
+    this.externalTitle,
+    this.externalDescription,
+    this.externalThumbBlobJson,
     required this.status,
     this.errorMessage,
     required this.createdAt,
···
     if (!nullToAbsent || facetsJson != null) {
       map['facets_json'] = Variable<String>(facetsJson);
     }
+    if (!nullToAbsent || externalUri != null) {
+      map['external_uri'] = Variable<String>(externalUri);
+    }
+    if (!nullToAbsent || externalTitle != null) {
+      map['external_title'] = Variable<String>(externalTitle);
+    }
+    if (!nullToAbsent || externalDescription != null) {
+      map['external_description'] = Variable<String>(externalDescription);
+    }
+    if (!nullToAbsent || externalThumbBlobJson != null) {
+      map['external_thumb_blob_json'] = Variable<String>(externalThumbBlobJson);
+    }
     map['status'] = Variable<String>(status);
     if (!nullToAbsent || errorMessage != null) {
       map['error_message'] = Variable<String>(errorMessage);
···
       quoteUri: quoteUri == null && nullToAbsent ? const Value.absent() : Value(quoteUri),
       quoteCid: quoteCid == null && nullToAbsent ? const Value.absent() : Value(quoteCid),
       facetsJson: facetsJson == null && nullToAbsent ? const Value.absent() : Value(facetsJson),
+      externalUri: externalUri == null && nullToAbsent ? const Value.absent() : Value(externalUri),
+      externalTitle: externalTitle == null && nullToAbsent
+          ? const Value.absent()
+          : Value(externalTitle),
+      externalDescription: externalDescription == null && nullToAbsent
+          ? const Value.absent()
+          : Value(externalDescription),
+      externalThumbBlobJson: externalThumbBlobJson == null && nullToAbsent
+          ? const Value.absent()
+          : Value(externalThumbBlobJson),
       status: Value(status),
       errorMessage: errorMessage == null && nullToAbsent
           ? const Value.absent()
···
       quoteUri: serializer.fromJson<String?>(json['quoteUri']),
       quoteCid: serializer.fromJson<String?>(json['quoteCid']),
       facetsJson: serializer.fromJson<String?>(json['facetsJson']),
+      externalUri: serializer.fromJson<String?>(json['externalUri']),
+      externalTitle: serializer.fromJson<String?>(json['externalTitle']),
+      externalDescription: serializer.fromJson<String?>(json['externalDescription']),
+      externalThumbBlobJson: serializer.fromJson<String?>(json['externalThumbBlobJson']),
       status: serializer.fromJson<String>(json['status']),
       errorMessage: serializer.fromJson<String?>(json['errorMessage']),
       createdAt: serializer.fromJson<DateTime>(json['createdAt']),
···
       'quoteUri': serializer.toJson<String?>(quoteUri),
       'quoteCid': serializer.toJson<String?>(quoteCid),
       'facetsJson': serializer.toJson<String?>(facetsJson),
+      'externalUri': serializer.toJson<String?>(externalUri),
+      'externalTitle': serializer.toJson<String?>(externalTitle),
+      'externalDescription': serializer.toJson<String?>(externalDescription),
+      'externalThumbBlobJson': serializer.toJson<String?>(externalThumbBlobJson),
       'status': serializer.toJson<String>(status),
       'errorMessage': serializer.toJson<String?>(errorMessage),
       'createdAt': serializer.toJson<DateTime>(createdAt),
···
     Value<String?> quoteUri = const Value.absent(),
     Value<String?> quoteCid = const Value.absent(),
     Value<String?> facetsJson = const Value.absent(),
+    Value<String?> externalUri = const Value.absent(),
+    Value<String?> externalTitle = const Value.absent(),
+    Value<String?> externalDescription = const Value.absent(),
+    Value<String?> externalThumbBlobJson = const Value.absent(),
     String? status,
     Value<String?> errorMessage = const Value.absent(),
     DateTime? createdAt,
···
     quoteUri: quoteUri.present ? quoteUri.value : this.quoteUri,
     quoteCid: quoteCid.present ? quoteCid.value : this.quoteCid,
     facetsJson: facetsJson.present ? facetsJson.value : this.facetsJson,
+    externalUri: externalUri.present ? externalUri.value : this.externalUri,
+    externalTitle: externalTitle.present ? externalTitle.value : this.externalTitle,
+    externalDescription: externalDescription.present
+        ? externalDescription.value
+        : this.externalDescription,
+    externalThumbBlobJson: externalThumbBlobJson.present
+        ? externalThumbBlobJson.value
+        : this.externalThumbBlobJson,
     status: status ?? this.status,
     errorMessage: errorMessage.present ? errorMessage.value : this.errorMessage,
     createdAt: createdAt ?? this.createdAt,
···
       quoteUri: data.quoteUri.present ? data.quoteUri.value : this.quoteUri,
       quoteCid: data.quoteCid.present ? data.quoteCid.value : this.quoteCid,
       facetsJson: data.facetsJson.present ? data.facetsJson.value : this.facetsJson,
+      externalUri: data.externalUri.present ? data.externalUri.value : this.externalUri,
+      externalTitle: data.externalTitle.present ? data.externalTitle.value : this.externalTitle,
+      externalDescription: data.externalDescription.present
+          ? data.externalDescription.value
+          : this.externalDescription,
+      externalThumbBlobJson: data.externalThumbBlobJson.present
+          ? data.externalThumbBlobJson.value
+          : this.externalThumbBlobJson,
       status: data.status.present ? data.status.value : this.status,
       errorMessage: data.errorMessage.present ? data.errorMessage.value : this.errorMessage,
       createdAt: data.createdAt.present ? data.createdAt.value : this.createdAt,
···
           ..write('quoteUri: $quoteUri, ')
           ..write('quoteCid: $quoteCid, ')
           ..write('facetsJson: $facetsJson, ')
+          ..write('externalUri: $externalUri, ')
+          ..write('externalTitle: $externalTitle, ')
+          ..write('externalDescription: $externalDescription, ')
+          ..write('externalThumbBlobJson: $externalThumbBlobJson, ')
           ..write('status: $status, ')
           ..write('errorMessage: $errorMessage, ')
           ..write('createdAt: $createdAt, ')
···
     quoteUri,
     quoteCid,
     facetsJson,
+    externalUri,
+    externalTitle,
+    externalDescription,
+    externalThumbBlobJson,
     status,
     errorMessage,
     createdAt,
···
           other.quoteUri == this.quoteUri &&
           other.quoteCid == this.quoteCid &&
           other.facetsJson == this.facetsJson &&
+          other.externalUri == this.externalUri &&
+          other.externalTitle == this.externalTitle &&
+          other.externalDescription == this.externalDescription &&
+          other.externalThumbBlobJson == this.externalThumbBlobJson &&
           other.status == this.status &&
           other.errorMessage == this.errorMessage &&
           other.createdAt == this.createdAt &&
···
   final Value<String?> quoteUri;
   final Value<String?> quoteCid;
   final Value<String?> facetsJson;
+  final Value<String?> externalUri;
+  final Value<String?> externalTitle;
+  final Value<String?> externalDescription;
+  final Value<String?> externalThumbBlobJson;
   final Value<String> status;
   final Value<String?> errorMessage;
   final Value<DateTime> createdAt;
···
     this.quoteUri = const Value.absent(),
     this.quoteCid = const Value.absent(),
     this.facetsJson = const Value.absent(),
+    this.externalUri = const Value.absent(),
+    this.externalTitle = const Value.absent(),
+    this.externalDescription = const Value.absent(),
+    this.externalThumbBlobJson = const Value.absent(),
     this.status = const Value.absent(),
     this.errorMessage = const Value.absent(),
     this.createdAt = const Value.absent(),
···
     this.quoteUri = const Value.absent(),
     this.quoteCid = const Value.absent(),
     this.facetsJson = const Value.absent(),
+    this.externalUri = const Value.absent(),
+    this.externalTitle = const Value.absent(),
+    this.externalDescription = const Value.absent(),
+    this.externalThumbBlobJson = const Value.absent(),
     required String status,
     this.errorMessage = const Value.absent(),
     required DateTime createdAt,
···
     Expression<String>? quoteUri,
     Expression<String>? quoteCid,
     Expression<String>? facetsJson,
+    Expression<String>? externalUri,
+    Expression<String>? externalTitle,
+    Expression<String>? externalDescription,
+    Expression<String>? externalThumbBlobJson,
     Expression<String>? status,
     Expression<String>? errorMessage,
     Expression<DateTime>? createdAt,
···
       if (quoteUri != null) 'quote_uri': quoteUri,
       if (quoteCid != null) 'quote_cid': quoteCid,
       if (facetsJson != null) 'facets_json': facetsJson,
+      if (externalUri != null) 'external_uri': externalUri,
+      if (externalTitle != null) 'external_title': externalTitle,
+      if (externalDescription != null) 'external_description': externalDescription,
+      if (externalThumbBlobJson != null) 'external_thumb_blob_json': externalThumbBlobJson,
       if (status != null) 'status': status,
       if (errorMessage != null) 'error_message': errorMessage,
       if (createdAt != null) 'created_at': createdAt,
···
     Value<String?>? quoteUri,
     Value<String?>? quoteCid,
     Value<String?>? facetsJson,
+    Value<String?>? externalUri,
+    Value<String?>? externalTitle,
+    Value<String?>? externalDescription,
+    Value<String?>? externalThumbBlobJson,
     Value<String>? status,
     Value<String?>? errorMessage,
     Value<DateTime>? createdAt,
···
       quoteUri: quoteUri ?? this.quoteUri,
       quoteCid: quoteCid ?? this.quoteCid,
       facetsJson: facetsJson ?? this.facetsJson,
+      externalUri: externalUri ?? this.externalUri,
+      externalTitle: externalTitle ?? this.externalTitle,
+      externalDescription: externalDescription ?? this.externalDescription,
+      externalThumbBlobJson: externalThumbBlobJson ?? this.externalThumbBlobJson,
       status: status ?? this.status,
       errorMessage: errorMessage ?? this.errorMessage,
       createdAt: createdAt ?? this.createdAt,
···
     if (facetsJson.present) {
       map['facets_json'] = Variable<String>(facetsJson.value);
     }
+    if (externalUri.present) {
+      map['external_uri'] = Variable<String>(externalUri.value);
+    }
+    if (externalTitle.present) {
+      map['external_title'] = Variable<String>(externalTitle.value);
+    }
+    if (externalDescription.present) {
+      map['external_description'] = Variable<String>(externalDescription.value);
+    }
+    if (externalThumbBlobJson.present) {
+      map['external_thumb_blob_json'] = Variable<String>(externalThumbBlobJson.value);
+    }
     if (status.present) {
       map['status'] = Variable<String>(status.value);
     }
···
           ..write('quoteUri: $quoteUri, ')
           ..write('quoteCid: $quoteCid, ')
           ..write('facetsJson: $facetsJson, ')
+          ..write('externalUri: $externalUri, ')
+          ..write('externalTitle: $externalTitle, ')
+          ..write('externalDescription: $externalDescription, ')
+          ..write('externalThumbBlobJson: $externalThumbBlobJson, ')
           ..write('status: $status, ')
           ..write('errorMessage: $errorMessage, ')
           ..write('createdAt: $createdAt, ')
···
       Value<String?> quoteUri,
       Value<String?> quoteCid,
       Value<String?> facetsJson,
+      Value<String?> externalUri,
+      Value<String?> externalTitle,
+      Value<String?> externalDescription,
+      Value<String?> externalThumbBlobJson,
       required String status,
       Value<String?> errorMessage,
       required DateTime createdAt,
···
       Value<String?> quoteUri,
       Value<String?> quoteCid,
       Value<String?> facetsJson,
+      Value<String?> externalUri,
+      Value<String?> externalTitle,
+      Value<String?> externalDescription,
+      Value<String?> externalThumbBlobJson,
       Value<String> status,
       Value<String?> errorMessage,
       Value<DateTime> createdAt,
···
   ColumnFilters<String> get facetsJson =>
       $composableBuilder(column: $table.facetsJson, builder: (column) => ColumnFilters(column));
 
+  ColumnFilters<String> get externalUri =>
+      $composableBuilder(column: $table.externalUri, builder: (column) => ColumnFilters(column));
+
+  ColumnFilters<String> get externalTitle =>
+      $composableBuilder(column: $table.externalTitle, builder: (column) => ColumnFilters(column));
+
+  ColumnFilters<String> get externalDescription => $composableBuilder(
+    column: $table.externalDescription,
+    builder: (column) => ColumnFilters(column),
+  );
+
+  ColumnFilters<String> get externalThumbBlobJson => $composableBuilder(
+    column: $table.externalThumbBlobJson,
+    builder: (column) => ColumnFilters(column),
+  );
+
   ColumnFilters<String> get status =>
       $composableBuilder(column: $table.status, builder: (column) => ColumnFilters(column));
 
···
   ColumnOrderings<String> get facetsJson =>
       $composableBuilder(column: $table.facetsJson, builder: (column) => ColumnOrderings(column));
 
+  ColumnOrderings<String> get externalUri =>
+      $composableBuilder(column: $table.externalUri, builder: (column) => ColumnOrderings(column));
+
+  ColumnOrderings<String> get externalTitle => $composableBuilder(
+    column: $table.externalTitle,
+    builder: (column) => ColumnOrderings(column),
+  );
+
+  ColumnOrderings<String> get externalDescription => $composableBuilder(
+    column: $table.externalDescription,
+    builder: (column) => ColumnOrderings(column),
+  );
+
+  ColumnOrderings<String> get externalThumbBlobJson => $composableBuilder(
+    column: $table.externalThumbBlobJson,
+    builder: (column) => ColumnOrderings(column),
+  );
+
   ColumnOrderings<String> get status =>
       $composableBuilder(column: $table.status, builder: (column) => ColumnOrderings(column));
 
···
   GeneratedColumn<String> get facetsJson =>
       $composableBuilder(column: $table.facetsJson, builder: (column) => column);
 
+  GeneratedColumn<String> get externalUri =>
+      $composableBuilder(column: $table.externalUri, builder: (column) => column);
+
+  GeneratedColumn<String> get externalTitle =>
+      $composableBuilder(column: $table.externalTitle, builder: (column) => column);
+
+  GeneratedColumn<String> get externalDescription =>
+      $composableBuilder(column: $table.externalDescription, builder: (column) => column);
+
+  GeneratedColumn<String> get externalThumbBlobJson =>
+      $composableBuilder(column: $table.externalThumbBlobJson, builder: (column) => column);
+
   GeneratedColumn<String> get status =>
       $composableBuilder(column: $table.status, builder: (column) => column);
 
···
                 Value<String?> quoteUri = const Value.absent(),
                 Value<String?> quoteCid = const Value.absent(),
                 Value<String?> facetsJson = const Value.absent(),
+                Value<String?> externalUri = const Value.absent(),
+                Value<String?> externalTitle = const Value.absent(),
+                Value<String?> externalDescription = const Value.absent(),
+                Value<String?> externalThumbBlobJson = const Value.absent(),
                 Value<String> status = const Value.absent(),
                 Value<String?> errorMessage = const Value.absent(),
                 Value<DateTime> createdAt = const Value.absent(),
···
                 quoteUri: quoteUri,
                 quoteCid: quoteCid,
                 facetsJson: facetsJson,
+                externalUri: externalUri,
+                externalTitle: externalTitle,
+                externalDescription: externalDescription,
+                externalThumbBlobJson: externalThumbBlobJson,
                 status: status,
                 errorMessage: errorMessage,
                 createdAt: createdAt,
···
                 Value<String?> quoteUri = const Value.absent(),
                 Value<String?> quoteCid = const Value.absent(),
                 Value<String?> facetsJson = const Value.absent(),
+                Value<String?> externalUri = const Value.absent(),
+                Value<String?> externalTitle = const Value.absent(),
+                Value<String?> externalDescription = const Value.absent(),
+                Value<String?> externalThumbBlobJson = const Value.absent(),
                 required String status,
                 Value<String?> errorMessage = const Value.absent(),
                 required DateTime createdAt,
···
                 quoteUri: quoteUri,
                 quoteCid: quoteCid,
                 facetsJson: facetsJson,
+                externalUri: externalUri,
+                externalTitle: externalTitle,
+                externalDescription: externalDescription,
+                externalThumbBlobJson: externalThumbBlobJson,
                 status: status,
                 errorMessage: errorMessage,
                 createdAt: createdAt,

lib/src/infrastructure/db/tables.dart

···
   TextColumn get quoteUri => text().nullable()();
   TextColumn get quoteCid => text().nullable()();
   TextColumn get facetsJson => text().nullable()();
+  TextColumn get externalUri => text().nullable()();
+  TextColumn get externalTitle => text().nullable()();
+  TextColumn get externalDescription => text().nullable()();
+  TextColumn get externalThumbBlobJson => text().nullable()();
   TextColumn get status => text()();
   TextColumn get errorMessage => text().nullable()();
   DateTimeColumn get createdAt => dateTime()();

pubspec.lock

···
       url: "https://pub.dev"
     source: hosted
     version: "0.3.0+2"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
   cupertino_icons:
     dependency: "direct main"
     description:
···
       url: "https://pub.dev"
     source: hosted
     version: "2.0.8"
+  extended_text_field:
+    dependency: "direct main"
+    description:
+      name: extended_text_field
+      sha256: "3996195c117c6beb734026a7bc0ba80d7e4e84e4edd4728caa544d8209ab4d7d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "16.0.2"
+  extended_text_library:
+    dependency: transitive
+    description:
+      name: extended_text_library
+      sha256: "13d99f8a10ead472d5e2cf4770d3d047203fe5054b152e9eb5dc692a71befbba"
+      url: "https://pub.dev"
+    source: hosted
+    version: "12.0.1"
   fake_async:
     dependency: "direct dev"
     description:
···
       url: "https://pub.dev"
     source: hosted
     version: "2.3.2"
+  html:
+    dependency: "direct main"
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
   http:
     dependency: transitive
     description:

pubspec.yaml

···
   collection: ^1.19.1
   characters: ^1.4.0
   shelf: ^1.4.2
+  html: ^0.15.5
 
   # Persistence
   drift: ^2.24.0
···
   image_picker: ^1.1.2
   flutter_image_compress: ^2.3.0
   equatable: ^2.0.8
+  extended_text_field: ^16.0.2
 
 dev_dependencies:
   flutter_test:

test/helpers/mocks.dart

···
 import 'package:lazurite/src/core/utils/image_compressor.dart';
 import 'package:lazurite/src/core/utils/logger.dart';
 import 'package:lazurite/src/features/auth/domain/auth_state.dart';
+import 'package:lazurite/src/features/composer/domain/facet_parser.dart';
 import 'package:lazurite/src/features/feeds/application/feed_providers.dart';
 import 'package:lazurite/src/features/feeds/infrastructure/feed_content_repository.dart';
 import 'package:lazurite/src/features/feeds/infrastructure/feed_repository.dart';
···
 class MockLogger extends Mock implements Logger {}
 
 class MockImageCompressor extends Mock implements ImageCompressor {}
+
+class MockFacetParser extends Mock implements FacetParser {}
 
 class MockXrpcClient extends Mock implements XrpcClient {}
 

test/src/features/composer/infrastructure/draft_repository_test.dart

···
   late MockXrpcClient mockApi;
   late MockSessionStorage mockSessionStorage;
   late MockLogger mockLogger;
+  late MockFacetParser mockFacetParser;
   late Directory tempDir;
 
   setUp(() {
···
     mockApi = MockXrpcClient();
     mockSessionStorage = MockSessionStorage();
     mockLogger = MockLogger();
+    mockFacetParser = MockFacetParser();
+
+    when(() => mockFacetParser.parse(any())).thenAnswer((_) async => null);
+
     repository = DraftRepository(
       dao: db.draftsDao,
       api: mockApi,
       sessionStorage: mockSessionStorage,
       logger: mockLogger,
+      facetParser: mockFacetParser,
     );
     tempDir = Directory.systemTemp.createTempSync('draft_repo_test');
   });

test/src/features/composer/infrastructure/link_metadata_service_test.dart

···
+import 'package:dio/dio.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/core/utils/logger.dart';
+import 'package:lazurite/src/features/composer/infrastructure/link_metadata_service.dart';
+import 'package:mocktail/mocktail.dart';
+
+class MockDio extends Mock implements Dio {}
+
+class MockLogger extends Mock implements Logger {}
+
+void main() {
+  group('LinkMetadataService', () {
+    late MockDio mockDio;
+    late MockLogger mockLogger;
+    late LinkMetadataService service;
+
+    setUp(() {
+      mockDio = MockDio();
+      mockLogger = MockLogger();
+      service = LinkMetadataService(dio: mockDio, logger: mockLogger);
+    });
+
+    test('parses Open Graph metadata from HTML', () async {
+      const url = 'https://example.com';
+      const html = '''
+        <html>
+          <head>
+            <meta property="og:title" content="Example Title" />
+            <meta property="og:description" content="Example Description" />
+            <meta property="og:image" content="https://example.com/image.jpg" />
+            <meta property="og:site_name" content="Example Site" />
+          </head>
+        </html>
+      ''';
+
+      when(() => mockDio.get<String>(url, options: any(named: 'options'))).thenAnswer(
+        (_) async => Response<String>(
+          data: html,
+          statusCode: 200,
+          requestOptions: RequestOptions(path: url),
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNotNull);
+      expect(metadata!.url, equals(url));
+      expect(metadata.title, equals('Example Title'));
+      expect(metadata.description, equals('Example Description'));
+      expect(metadata.imageUrl, equals('https://example.com/image.jpg'));
+      expect(metadata.siteName, equals('Example Site'));
+    });
+
+    test('falls back to standard HTML tags when Open Graph tags missing', () async {
+      const url = 'https://example.com';
+      const html = '''
+        <html>
+          <head>
+            <title>Fallback Title</title>
+            <meta name="description" content="Fallback Description" />
+          </head>
+        </html>
+      ''';
+
+      when(() => mockDio.get<String>(url, options: any(named: 'options'))).thenAnswer(
+        (_) async => Response<String>(
+          data: html,
+          statusCode: 200,
+          requestOptions: RequestOptions(path: url),
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNotNull);
+      expect(metadata!.title, equals('Fallback Title'));
+      expect(metadata.description, equals('Fallback Description'));
+    });
+
+    test('normalizes URL by adding https:// if missing', () async {
+      const url = 'example.com';
+      const normalizedUrl = 'https://example.com';
+      const html = '<html><head><title>Test</title></head></html>';
+
+      when(() => mockDio.get<String>(normalizedUrl, options: any(named: 'options'))).thenAnswer(
+        (_) async => Response<String>(
+          data: html,
+          statusCode: 200,
+          requestOptions: RequestOptions(path: normalizedUrl),
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNotNull);
+      expect(metadata!.url, equals(normalizedUrl));
+      verify(() => mockDio.get<String>(normalizedUrl, options: any(named: 'options'))).called(1);
+    });
+
+    test('returns null for invalid URLs', () async {
+      const url = ':::invalid:::';
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNull);
+      verifyNever(() => mockDio.get<String>(any(), options: any(named: 'options')));
+    });
+
+    test('returns null when network request fails', () async {
+      const url = 'https://example.com';
+
+      when(() => mockDio.get<String>(url, options: any(named: 'options'))).thenThrow(
+        DioException(
+          requestOptions: RequestOptions(path: url),
+          type: DioExceptionType.connectionTimeout,
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNull);
+      verify(() => mockLogger.warning(any(), any())).called(1);
+    });
+
+    test('returns null for empty response', () async {
+      const url = 'https://example.com';
+
+      when(() => mockDio.get<String>(url, options: any(named: 'options'))).thenAnswer(
+        (_) async => Response<String>(
+          data: null,
+          statusCode: 200,
+          requestOptions: RequestOptions(path: url),
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNull);
+    });
+
+    test('hasContent returns true when metadata has title, description, or image', () async {
+      const url = 'https://example.com';
+      const html = '<html><head><title>Test</title></head></html>';
+
+      when(() => mockDio.get<String>(url, options: any(named: 'options'))).thenAnswer(
+        (_) async => Response<String>(
+          data: html,
+          statusCode: 200,
+          requestOptions: RequestOptions(path: url),
+        ),
+      );
+
+      final metadata = await service.fetchMetadata(url);
+
+      expect(metadata, isNotNull);
+      expect(metadata!.hasContent, isTrue);
+    });
+  });
+}

test/src/features/composer/presentation/screens/composer_screen_test.dart

···
+import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
···
     await tester.pumpAndSettle();
   }
 
+  Future<void> enterText(WidgetTester tester, String text) async {
+    final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
+    textField.controller?.text = text;
+    await tester.pump();
+  }
+
   group('ComposerScreen', () {
     testWidgets('renders text field and publish button', (tester) async {
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      expect(find.byType(TextField), findsOneWidget);
+      expect(find.byType(ExtendedTextField), findsOneWidget);
       expect(find.byType(PublishButton), findsOneWidget);
     });
 
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Hello');
-      await tester.pump();
+      await enterText(tester, 'Hello');
 
       expect(find.text('295'), findsWidgets);
     });
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Hello world');
+      await enterText(tester, 'Hello world');
       await tester.pump();
 
       final publishButton = tester.widget<PublishButton>(find.byType(PublishButton));
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       expect(find.text('-5'), findsWidgets);
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       final publishButton = tester.widget<PublishButton>(find.byType(PublishButton));
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       expect(find.text('Split'), findsOneWidget);
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       await tester.tap(find.text('Split'));
       await tester.pump();
 
-      final textField = tester.widget<TextField>(find.byType(TextField));
+      final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
       expect(textField.controller?.text.length, 300);
 
       final publishButton = tester.widget<PublishButton>(find.byType(PublishButton));
···
       await navigateToCompose(tester);
 
       final text = '${'a' * 290} ${'b' * 15}';
-      await tester.enterText(find.byType(TextField), text);
+      await enterText(tester, text);
       await tester.pump();
 
       await tester.tap(find.text('Split'));
       await tester.pump();
 
-      final textField = tester.widget<TextField>(find.byType(TextField));
+      final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
       expect(textField.controller?.text, '${'a' * 290} ');
       expect(textField.controller?.text.length, 291);
     });
···
       await navigateToCompose(tester);
 
       final text = 'a' * 305;
-      await tester.enterText(find.byType(TextField), text);
+      await enterText(tester, text);
       await tester.pump();
 
       await tester.tap(find.text('Split'));
       await tester.pump();
 
-      final textField = tester.widget<TextField>(find.byType(TextField));
+      final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
       expect(textField.controller?.text, 'a' * 300);
     });
 
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       await tester.tap(find.text('Split'));
···
       await navigateToCompose(tester);
 
       final longText = 'a' * 305;
-      await tester.enterText(find.byType(TextField), longText);
+      await enterText(tester, longText);
       await tester.pump();
 
       await tester.tap(find.text('Split'));
···
       await tester.pumpWidget(buildTestWidget(existingDraft: draft));
       await navigateToCompose(tester);
 
-      final textField = tester.widget<TextField>(find.byType(TextField));
+      final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
       expect(textField.controller?.text, 'Existing draft content');
     });
 
···
       await tester.pumpWidget(buildTestWidget(notifier: mockNotifier));
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Saving on pause');
+      await enterText(tester, 'Saving on pause');
       await tester.pump();
 
       tester.binding.handleAppLifecycleStateChanged(AppLifecycleState.paused);
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Content');
+      await enterText(tester, 'Content');
       await tester.pump();
 
       await tester.tap(find.byIcon(Icons.close));
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Content');
+      await enterText(tester, 'Content');
       await tester.pump();
 
       await tester.tap(find.byIcon(Icons.close));
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Content');
+      await enterText(tester, 'Content');
       await tester.pump();
 
       await tester.tap(find.byIcon(Icons.close));
···
       await tester.pumpWidget(buildTestWidget());
       await navigateToCompose(tester);
 
-      await tester.enterText(find.byType(TextField), 'Content');
+      await enterText(tester, 'Content');
       await tester.pump();
 
       await tester.tap(find.byIcon(Icons.close));

test/src/features/composer/presentation/widgets/composer_text_field_test.dart

···
+import 'package:extended_text_field/extended_text_field.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:lazurite/src/features/composer/presentation/widgets/composer_text_field.dart';
···
       controller.dispose();
     });
 
-    testWidgets('renders text field with default hint', (tester) async {
+    testWidgets('renders extended text field with default hint', (tester) async {
       await tester.pumpApp(
         SingleChildScrollView(child: ComposerTextField(controller: controller)),
       );
-      expect(find.byType(TextField), findsOneWidget);
+      expect(find.byType(ExtendedTextField), findsOneWidget);
       expect(find.text("What's happening?"), findsOneWidget);
     });
 
···
       await tester.pumpApp(
         SingleChildScrollView(child: ComposerTextField(controller: controller)),
       );
-      await tester.enterText(find.byType(TextField), 'Hello');
+      controller.text = 'Hello';
       await tester.pump();
       expect(find.text('295'), findsOneWidget);
     });
···
           ),
         ),
       );
-      await tester.enterText(find.byType(TextField), 'Test');
+
+      final textField = tester.widget<ExtendedTextField>(find.byType(ExtendedTextField));
+      textField.onChanged?.call('Test');
       expect(changedValue, 'Test');
     });
 
···
       );
       await tester.pump();
       expect(find.text('-3'), findsOneWidget);
+    });
+
+    testWidgets('accepts text with mentions', (tester) async {
+      await tester.pumpApp(
+        SingleChildScrollView(child: ComposerTextField(controller: controller)),
+      );
+      controller.text = 'Hello @alice.bsky.social';
+      await tester.pump();
+      expect(controller.text, 'Hello @alice.bsky.social');
+    });
+
+    testWidgets('accepts text with hashtags', (tester) async {
+      await tester.pumpApp(
+        SingleChildScrollView(child: ComposerTextField(controller: controller)),
+      );
+      controller.text = 'Check out #flutter';
+      await tester.pump();
+      expect(controller.text, 'Check out #flutter');
+    });
+
+    testWidgets('accepts text with URLs', (tester) async {
+      await tester.pumpApp(
+        SingleChildScrollView(child: ComposerTextField(controller: controller)),
+      );
+      controller.text = 'Visit https://example.com';
+      await tester.pump();
+      expect(controller.text, 'Visit https://example.com');
+    });
+
+    testWidgets('accepts text with mixed special text', (tester) async {
+      await tester.pumpApp(
+        SingleChildScrollView(child: ComposerTextField(controller: controller)),
+      );
+      const mixedText = 'Hey @bob.bsky.social check #flutter at https://flutter.dev';
+      controller.text = mixedText;
+      await tester.pump();
+      expect(controller.text, mixedText);
+    });
+  });
+
+  group('ComposerTextSpanBuilder', () {
+    test('creates MentionText for @ flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('@', textStyle: const TextStyle());
+      expect(specialText, isA<MentionText>());
+    });
+
+    test('creates HashtagText for # flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('#', textStyle: const TextStyle());
+      expect(specialText, isA<HashtagText>());
+    });
+
+    test('creates LinkText for http:// flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('http://', textStyle: const TextStyle());
+      expect(specialText, isA<LinkText>());
+    });
+
+    test('creates LinkText for https:// flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('https://', textStyle: const TextStyle());
+      expect(specialText, isA<LinkText>());
+    });
+
+    test('returns null for unknown flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('unknown', textStyle: const TextStyle());
+      expect(specialText, isNull);
+    });
+
+    test('returns null for empty flag', () {
+      final builder = ComposerTextSpanBuilder(
+        mentionColor: Colors.blue,
+        linkColor: Colors.purple,
+        hashtagColor: Colors.green,
+      );
+
+      final specialText = builder.createSpecialText('', textStyle: const TextStyle());
+      expect(specialText, isNull);
+    });
+  });
+
+  group('MentionText', () {
+    test('applies correct styling to mentions', () {
+      final mention = MentionText(textStyle: const TextStyle(fontSize: 16), color: Colors.blue);
+      mention.appendContent('alice');
+
+      final span = mention.finishText() as TextSpan;
+      expect(span.style?.color, Colors.blue);
+      expect(span.style?.fontWeight, FontWeight.w600);
+    });
+  });
+
+  group('HashtagText', () {
+    test('applies correct styling to hashtags', () {
+      final hashtag = HashtagText(textStyle: const TextStyle(fontSize: 16), color: Colors.green);
+      hashtag.appendContent('flutter');
+
+      final span = hashtag.finishText() as TextSpan;
+      expect(span.style?.color, Colors.green);
+      expect(span.style?.fontWeight, FontWeight.w600);
+    });
+  });
+
+  group('LinkText', () {
+    test('applies correct styling to links with underline', () {
+      final link = LinkText(textStyle: const TextStyle(fontSize: 16), color: Colors.purple);
+      link.appendContent('s://example.com');
+
+      final span = link.finishText() as TextSpan;
+      expect(span.style?.color, Colors.purple);
+      expect(span.style?.decoration, TextDecoration.underline);
     });
   });
 }

test/src/features/composer/presentation/widgets/link_card_preview_test.dart

···
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:lazurite/src/features/composer/domain/link_metadata.dart';
+import 'package:lazurite/src/features/composer/presentation/widgets/link_card_preview.dart';
+
+void main() {
+  group('LinkCardPreview', () {
+    testWidgets('displays metadata with title, description, and site name', (tester) async {
+      final metadata = LinkMetadata(
+        url: 'https://example.com',
+        title: 'Example Title',
+        description: 'Example Description',
+        siteName: 'Example Site',
+      );
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(body: LinkCardPreview(metadata: metadata)),
+        ),
+      );
+
+      expect(find.text('Example Site'), findsOneWidget);
+      expect(find.text('Example Title'), findsOneWidget);
+      expect(find.text('Example Description'), findsOneWidget);
+    });
+
+    testWidgets('displays image when imageUrl is provided', (tester) async {
+      final metadata = LinkMetadata(
+        url: 'https://example.com',
+        title: 'Example Title',
+        imageUrl: 'https://example.com/image.jpg',
+      );
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(body: LinkCardPreview(metadata: metadata)),
+        ),
+      );
+
+      expect(find.byType(Image), findsOneWidget);
+    });
+
+    testWidgets('does not display image when imageUrl is null', (tester) async {
+      final metadata = LinkMetadata(url: 'https://example.com', title: 'Example Title');
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(body: LinkCardPreview(metadata: metadata)),
+        ),
+      );
+
+      expect(find.byType(Image), findsNothing);
+    });
+
+    testWidgets('shows remove button when onRemove callback is provided', (tester) async {
+      final metadata = LinkMetadata(url: 'https://example.com', title: 'Example Title');
+      var removeCalled = false;
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: LinkCardPreview(
+              metadata: metadata,
+              onRemove: () {
+                removeCalled = true;
+              },
+            ),
+          ),
+        ),
+      );
+
+      expect(find.byIcon(Icons.close), findsOneWidget);
+
+      await tester.tap(find.byIcon(Icons.close));
+      expect(removeCalled, isTrue);
+    });
+
+    testWidgets('does not show remove button when onRemove is null', (tester) async {
+      final metadata = LinkMetadata(url: 'https://example.com', title: 'Example Title');
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(body: LinkCardPreview(metadata: metadata)),
+        ),
+      );
+
+      expect(find.byIcon(Icons.close), findsNothing);
+    });
+
+    testWidgets('truncates long text with ellipsis', (tester) async {
+      final metadata = LinkMetadata(
+        url: 'https://example.com',
+        title: 'This is a very long title that should be truncated with an ellipsis',
+        description:
+            'This is a very long description that should also be truncated with an ellipsis when it exceeds the maximum number of lines',
+        siteName: 'Very Long Site Name That Should Be Truncated',
+      );
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(
+            body: SizedBox(width: 300, child: LinkCardPreview(metadata: metadata)),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      expect(find.byType(LinkCardPreview), findsOneWidget);
+    });
+
+    testWidgets('handles metadata with only URL', (tester) async {
+      final metadata = LinkMetadata(url: 'https://example.com');
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Scaffold(body: LinkCardPreview(metadata: metadata)),
+        ),
+      );
+
+      expect(find.byType(Card), findsOneWidget);
+    });
+  });
+}