`;
+ });
+
+ // Unicode emoji (keep as-is, they render natively)
+
+ // Masked/Markdown links [text](url) or [text](url "title") - process before bare URL detection
+ parsed = parsed.replace(
+ /\[([^\]]+)\]\((https?:\/\/[^\s)"]+)(?:\s+"([^"]+)")?\)/g,
+ (_, text, url, title) => {
+ const titleAttr = title ? ` title="${title}"` : '';
+ return `${text}`;
+ }
+ );
+
+ // Links (URLs) - use negative lookbehind to skip URLs in HTML attributes (src=", href=")
+ // Match URLs that are NOT preceded by =" or ='
+ parsed = parsed.replace(
+ /(?"']+)/g,
+ '$1'
+ );
+
+ // Newlines
+ parsed = parsed.replace(/\n/g, ''); + + // Unescape Discord markdown escape sequences (\_ \* \~ \` \| \\) + // Must be done after all markdown processing + parsed = parsed.replace(/\\([_*~`|\\])/g, '$1'); + + return parsed; +} + +/** + * Extract URLs from text + */ +function extractUrls(text) { + if (!text) return []; + const urlRegex = /(https?:\/\/[^\s<]+)/g; + const matches = text.match(urlRegex); + return matches || []; +} + +// ============================================================================ +// Link Preview Component +// ============================================================================ + +const LinkPreview = memo(function LinkPreview({ url, cachedPreview, onPreviewLoad }) { + const [preview, setPreview] = useState(cachedPreview || null); + const [loading, setLoading] = useState(!cachedPreview); + const [error, setError] = useState(false); + const [imageError, setImageError] = useState(false); + + useEffect(() => { + if (cachedPreview) { + setPreview(cachedPreview); + setLoading(false); + return; + } + + // For direct media URLs, only allow trusted domains + if (IMAGE_EXTENSIONS.test(url)) { + if (isTrustedDomain(url)) { + const previewData = { url, type: 'image', image: url, trusted: true }; + setPreview(previewData); + setLoading(false); + onPreviewLoad?.(url, previewData); + } else { + // Fetch through server to get metadata without exposing user IP + fetchPreviewFromServer(); + } + return; + } + if (VIDEO_EXTENSIONS.test(url)) { + if (isTrustedDomain(url)) { + const previewData = { url, type: 'video', video: url, trusted: true }; + setPreview(previewData); + setLoading(false); + onPreviewLoad?.(url, previewData); + } else { + // Don't show untrusted video embeds - too risky + setError(true); + setLoading(false); + } + return; + } + + // Check for YouTube - trusted domain, can embed directly + const ytId = getYouTubeId(url); + if (ytId) { + const previewData = { + url, + type: 'youtube', + videoId: ytId, + title: 'YouTube Video', + siteName: 'YouTube', + themeColor: '#FF0000', + trusted: true, + }; + setPreview(previewData); + setLoading(false); + onPreviewLoad?.(url, previewData); + return; + } + + // All other URLs: fetch preview from server + fetchPreviewFromServer(); + + async function fetchPreviewFromServer() { + try { + const response = await authFetch(`/api/link-preview?url=${encodeURIComponent(url)}`); + if (!response.ok) throw new Error('Failed to fetch'); + const data = await response.json(); + if (data.error) throw new Error(data.error); + setPreview(data); + onPreviewLoad?.(url, data); + } catch (err) { + console.warn('Failed to fetch link preview:', url, err); + setError(true); + } finally { + setLoading(false); + } + } + }, [url, cachedPreview, onPreviewLoad]); + + if (loading) { + return ( +
+
+ );
+ }
+
+ if (error || !preview) {
+ return null; // Don't show anything for failed previews
+ }
+
+ // YouTube embed - trusted, use iframe
+ if (preview.type === 'youtube' && preview.videoId) {
+ return (
+
+
+ );
+ }
+
+ // Direct video - only show if trusted
+ if (preview.type === 'video' || preview.video) {
+ const videoUrl = preview.video || url;
+ if (!isTrustedDomain(videoUrl)) {
+ return null; // Don't embed untrusted videos
+ }
+ return (
+
+
+ YouTube
+ {preview.title && (
+
+ {preview.title}
+
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ // Direct image - server already returns safe (proxied) URLs
+ if (preview.type === 'image') {
+ const imageUrl = preview.image || url;
+ return (
+
+ 
e.target.style.display = 'none'}
+ />
+
+ );
+ }
+
+ // Standard link preview - server already returns safe (proxied) image URLs
+ const hasLargeImage = preview.image && !preview.thumbnail;
+
+ return (
+
+ 
setImageError(true)}
+ />
+ )}
+
+ );
+});
+
+// ============================================================================
+// Attachment Component
+// ============================================================================
+
+const Attachment = memo(function Attachment({ attachment }) {
+ const { filename, url, size, content_type, width, height } = attachment;
+ const openImageModal = useContext(ImageModalContext);
+
+ const isImage = content_type?.startsWith('image/') || IMAGE_EXTENSIONS.test(filename || url);
+ const isVideo = content_type?.startsWith('video/') || VIDEO_EXTENSIONS.test(filename || url);
+ const isAudio = content_type?.startsWith('audio/') || AUDIO_EXTENSIONS.test(filename || url);
+
+ if (isImage) {
+ return (
+
+ setImageError(true)}
+ />
+ )}
+
+ {preview.image && hasLargeImage && !imageError && (
+
+ {preview.siteName && (
+
+ {preview.image && !hasLargeImage && !imageError && (
+ {preview.siteName}
+ )}
+ {preview.title && (
+
+ {preview.title}
+
+ )}
+ {preview.description && (
+
+ {preview.description.length > 300
+ ? preview.description.slice(0, 300) + '...'
+ : preview.description}
+
+ )}
+
+ 
openImageModal?.({ url, alt: filename || 'Image' })}
+ style={{
+ cursor: 'pointer',
+ ...(width && height ? {
+ maxWidth: Math.min(width, 400),
+ aspectRatio: `${width} / ${height}`
+ } : {})
+ }}
+ />
+
+ );
+ }
+
+ if (isVideo) {
+ return (
+
+
+
+ );
+ }
+
+ if (isAudio) {
+ return (
+
+
+ );
+ }
+
+ // Generic file
+ return (
+
+
+
+
+
+
+ {filename || 'Audio file'}
+
+ {size &&
+ {formatFileSize(size)}
}
+
+
+
+ );
+});
+
+// ============================================================================
+// Message Component
+// ============================================================================
+
+const DiscordMessage = memo(function DiscordMessage({
+ message,
+ isFirstInGroup,
+ showTimestamp,
+ previewCache,
+ onPreviewLoad,
+ channelMap,
+ usersMap,
+ members,
+ onChannelSelect,
+ channelName,
+ onReactionClick,
+ onContextMenu
+}) {
+ const {
+ id,
+ author,
+ content,
+ timestamp,
+ attachments = [],
+ embeds = [],
+ stickers = [],
+ reactions = [],
+ referenced_message,
+ type
+ } = message;
+
+ // Check if this is an archived message from #dds-archive
+ const isArchiveChannel = channelName === 'dds-archive';
+ const archivedMessage = useMemo(() => {
+ if (!isArchiveChannel) return null;
+ return parseArchivedMessage(content);
+ }, [isArchiveChannel, content]);
+
+ // Use original data if this is a parsed archive message
+ // Try to resolve the archived username to a real user
+ const displayAuthor = useMemo(() => {
+ if (!archivedMessage) return author;
+ return resolveArchivedUser(archivedMessage.originalAuthor, usersMap, members);
+ }, [archivedMessage, author, usersMap, members]);
+ const displayContent = archivedMessage ? archivedMessage.originalContent : content;
+ const displayTimestamp = archivedMessage ? (archivedMessage.originalTimestamp || timestamp) : timestamp;
+
+ // Extract URLs from content for link previews
+ const urls = useMemo(() => extractUrls(displayContent), [displayContent]);
+
+ // Filter URLs that don't already have embeds
+ const urlsToPreview = useMemo(() => {
+ const embedUrls = new Set(embeds?.map(e => e.url).filter(Boolean));
+ return urls.filter(url => !embedUrls.has(url));
+ }, [urls, embeds]);
+
+ const parsedContent = useMemo(() => parseDiscordMarkdown(displayContent, { channelMap, usersMap }), [displayContent, channelMap, usersMap]);
+
+ // Handle channel link clicks
+ const handleContentClick = useCallback((e) => {
+ const channelLink = e.target.closest('.discord-channel-link');
+ if (channelLink) {
+ e.preventDefault();
+ const channelId = channelLink.dataset.channelId;
+ if (channelId && onChannelSelect) {
+ const channel = channelMap?.get(channelId);
+ if (channel) {
+ onChannelSelect(channel);
+ }
+ }
+ }
+ }, [channelMap, onChannelSelect]);
+
+ // For archived messages, use the resolved user's avatar if available
+ // Avatar might be a full URL or just a hash - handle both cases
+ const avatarUrl = useMemo(() => {
+ const avatarSource = displayAuthor?.avatar || displayAuthor?.avatarUrl;
+ if (!avatarSource) return null;
+ if (avatarSource.startsWith('http')) return avatarSource;
+ return `https://cdn.discordapp.com/avatars/${displayAuthor.id}/${avatarSource}.png?size=80`;
+ }, [displayAuthor]);
+
+ const getInitial = (name) => (name || 'U')[0].toUpperCase();
+
+ // System messages (join, boost, etc.)
+ if (type && type !== 0 && type !== 19) {
+ return (
+
+
+ {filename || 'File'}
+
+ {size &&
+ {formatFileSize(size)}
}
+
+
+ );
+ }
+
+ return (
+ <>
+ {/* Reply context */}
+ {referenced_message && (
+
+
+
+
+
+ {displayAuthor?.displayName || displayAuthor?.username || 'Unknown'}
+
+ {' '}
+
+
+ {formatTimestamp(displayTimestamp)}
+
+ 
'
+ }
+ alt=""
+ className="discord-reply-avatar"
+ />
+
+ {referenced_message.author?.displayName || referenced_message.author?.username || 'Unknown'}
+
+
+ {referenced_message.content?.slice(0, 100) || 'Click to see attachment'}
+ {referenced_message.content?.length > 100 ? '...' : ''}
+
+
+ )}
+
+ onContextMenu?.(e, id, content)}
+ >
+ {isFirstInGroup ? (
+
+
+ );
+});
+
+// ============================================================================
+// Main DiscordLogs Component
+// ============================================================================
+
+export default function DiscordLogs() {
+ const messagesContainerRef = useRef(null);
+ const pendingTargetMessageRef = useRef(null); // For deep-linking - used in fetch, cleared after scroll
+ const scrollToBottomRef = useRef(false); // Flag to trigger scroll to bottom after initial load
+ const [channels, setChannels] = useState([]);
+ const [channelsByGuild, setChannelsByGuild] = useState({});
+ const [guilds, setGuilds] = useState([]);
+ const [selectedGuild, setSelectedGuild] = useState(null);
+ const [selectedChannel, setSelectedChannel] = useState(null);
+ const [messages, setMessages] = useState([]);
+ const [usersMap, setUsersMap] = useState({}); // Map of user ID -> { displayName, username, color }
+ const [members, setMembers] = useState(null); // { groups: [...], roles: [...] }
+ const [loadingMembers, setLoadingMembers] = useState(false);
+ const [memberListExpanded, setMemberListExpanded] = useState(false); // Default to collapsed
+ const [linkCopied, setLinkCopied] = useState(false);
+ const [loading, setLoading] = useState(true);
+ const [loadingMessages, setLoadingMessages] = useState(false);
+ const [loadingMore, setLoadingMore] = useState(false);
+ const [hasMoreMessages, setHasMoreMessages] = useState(true);
+ const [error, setError] = useState(null);
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState(null); // Server-side search results
+ const [searchLoading, setSearchLoading] = useState(false);
+ const [previewCache, setPreviewCache] = useState({});
+ const [imageModal, setImageModal] = useState(null); // { url, alt }
+ const [reactionPopup, setReactionPopup] = useState(null); // { x, y, emoji, users, loading }
+ const [contextMenu, setContextMenu] = useState(null); // { x, y, messageId, content }
+ const [channelContextMenu, setChannelContextMenu] = useState(null); // { x, y, channel }
+ const [topicExpanded, setTopicExpanded] = useState(false); // Show full channel topic
+
+ // Debounced server-side search
+ useEffect(() => {
+ if (!searchQuery.trim() || searchQuery.length < 2 || !selectedChannel) {
+ setSearchResults(null);
+ return;
+ }
+
+ const timeoutId = setTimeout(async () => {
+ setSearchLoading(true);
+ try {
+ const response = await authFetch(
+ `/api/discord/search?channelId=${selectedChannel.id}&q=${encodeURIComponent(searchQuery)}&limit=50`
+ );
+ if (response.ok) {
+ const data = await response.json();
+ // Normalize the search results
+ const normalizedMessages = (data.messages || []).map(msg => ({
+ ...msg,
+ referenced_message: msg.referencedMessage || msg.referenced_message,
+ attachments: (msg.attachments || []).map(att => ({
+ ...att,
+ content_type: att.contentType || att.content_type,
+ })),
+ }));
+ setSearchResults(normalizedMessages);
+ }
+ } catch (err) {
+ console.error('Search failed:', err);
+ } finally {
+ setSearchLoading(false);
+ }
+ }, 300); // 300ms debounce
+
+ return () => clearTimeout(timeoutId);
+ }, [searchQuery, selectedChannel]);
+
+ // Open image modal
+ const openImageModal = useCallback((imageData) => {
+ setImageModal(imageData);
+ }, []);
+
+ // Close image modal
+ const closeImageModal = useCallback(() => {
+ setImageModal(null);
+ }, []);
+
+ // Handle reaction click - fetch users who reacted
+ const handleReactionClick = useCallback(async (e, messageId, reaction) => {
+ const rect = e.target.getBoundingClientRect();
+ const x = rect.left + rect.width / 2;
+ const y = rect.top;
+
+ // Show loading state
+ setReactionPopup({
+ x,
+ y,
+ emoji: reaction.emoji,
+ users: [],
+ loading: true,
+ });
+
+ try {
+ const params = new URLSearchParams({
+ messageId,
+ emojiName: reaction.emoji.name,
+ });
+ if (reaction.emoji.id) {
+ params.append('emojiId', reaction.emoji.id);
+ }
+
+ const response = await authFetch(`/api/discord/reaction-users?${params}`);
+ if (!response.ok) throw new Error('Failed to fetch');
+ const users = await response.json();
+
+ setReactionPopup(prev => prev ? {
+ ...prev,
+ users,
+ loading: false,
+ } : null);
+ } catch (err) {
+ console.error('Failed to fetch reaction users:', err);
+ setReactionPopup(null);
+ }
+ }, []);
+
+ // Close reaction popup
+ const closeReactionPopup = useCallback(() => {
+ setReactionPopup(null);
+ }, []);
+
+ // Handle message context menu (right-click)
+ const handleMessageContextMenu = useCallback((e, messageId, content) => {
+ e.preventDefault();
+ setContextMenu({
+ x: e.clientX,
+ y: e.clientY,
+ messageId,
+ content,
+ });
+ }, []);
+
+ // Copy message link to clipboard
+ const copyMessageLink = useCallback(() => {
+ if (!contextMenu || !selectedGuild || !selectedChannel) return;
+ const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${selectedChannel.id}/${contextMenu.messageId}`;
+ navigator.clipboard.writeText(url);
+ setContextMenu(null);
+ }, [contextMenu, selectedGuild, selectedChannel]);
+
+ // Copy message content to clipboard
+ const copyMessageContent = useCallback(() => {
+ if (!contextMenu?.content) return;
+ navigator.clipboard.writeText(contextMenu.content);
+ setContextMenu(null);
+ }, [contextMenu]);
+
+ // Copy message ID to clipboard
+ const copyMessageId = useCallback(() => {
+ if (!contextMenu?.messageId) return;
+ navigator.clipboard.writeText(contextMenu.messageId);
+ setContextMenu(null);
+ }, [contextMenu]);
+
+ // Handle channel context menu (right-click)
+ const handleChannelContextMenu = useCallback((e, channel) => {
+ e.preventDefault();
+ setChannelContextMenu({
+ x: e.clientX,
+ y: e.clientY,
+ channel,
+ });
+ }, []);
+
+ // Copy channel link to clipboard
+ const copyChannelLink = useCallback(() => {
+ if (!channelContextMenu?.channel || !selectedGuild) return;
+ const url = `${window.location.origin}${window.location.pathname}#${selectedGuild.id}/${channelContextMenu.channel.id}`;
+ navigator.clipboard.writeText(url);
+ setChannelContextMenu(null);
+ }, [channelContextMenu, selectedGuild]);
+
+ // Copy channel ID to clipboard
+ const copyChannelId = useCallback(() => {
+ if (!channelContextMenu?.channel) return;
+ navigator.clipboard.writeText(channelContextMenu.channel.id);
+ setChannelContextMenu(null);
+ }, [channelContextMenu]);
+
+ // Copy channel name to clipboard
+ const copyChannelName = useCallback(() => {
+ if (!channelContextMenu?.channel) return;
+ navigator.clipboard.writeText(channelContextMenu.channel.name);
+ setChannelContextMenu(null);
+ }, [channelContextMenu]);
+
+ // Handle escape key to close modal
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.key === 'Escape') {
+ if (imageModal) closeImageModal();
+ if (reactionPopup) closeReactionPopup();
+ if (contextMenu) setContextMenu(null);
+ if (channelContextMenu) setChannelContextMenu(null);
+ }
+ };
+ const handleClickOutside = (e) => {
+ if (reactionPopup && !e.target.closest('.discord-reaction-popup')) {
+ closeReactionPopup();
+ }
+ if (contextMenu && !e.target.closest('.discord-context-menu')) {
+ setContextMenu(null);
+ }
+ if (channelContextMenu && !e.target.closest('.discord-context-menu')) {
+ setChannelContextMenu(null);
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ window.addEventListener('click', handleClickOutside);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ window.removeEventListener('click', handleClickOutside);
+ };
+ }, [imageModal, reactionPopup, contextMenu, closeImageModal, closeReactionPopup]);
+
+ // Update URL hash when guild/channel changes
+ useEffect(() => {
+ if (selectedGuild && selectedChannel) {
+ const newHash = `#${selectedGuild.id}/${selectedChannel.id}`;
+ if (window.location.hash !== newHash) {
+ window.history.replaceState(null, '', newHash);
+ }
+ }
+ }, [selectedGuild, selectedChannel]);
+
+ // Copy shareable link to clipboard
+ const copyShareLink = useCallback((messageId = null) => {
+ let url = window.location.origin + window.location.pathname;
+ if (selectedGuild && selectedChannel) {
+ url += `#${selectedGuild.id}/${selectedChannel.id}`;
+ if (messageId) {
+ url += `/${messageId}`;
+ }
+ }
+ navigator.clipboard.writeText(url).then(() => {
+ setLinkCopied(true);
+ setTimeout(() => setLinkCopied(false), 2000);
+ });
+ }, [selectedGuild, selectedChannel]);
+
+ // Create channel lookup map for mentions
+ const channelMap = useMemo(() => {
+ const map = new Map();
+ channels.forEach(channel => {
+ map.set(channel.id, {
+ id: channel.id,
+ name: channel.name,
+ guildId: channel.guildId,
+ guildName: channel.guildName,
+ guildIcon: channel.guildIcon,
+ });
+ });
+ return map;
+ }, [channels]);
+
+ // Handle channel selection from mentions
+ const handleChannelSelect = useCallback((channel) => {
+ // Find the full channel object with guild info
+ const guildId = channel.guildId || channelMap.get(channel.id)?.guildId;
+ if (guildId) {
+ const guild = guilds.find(g => g.id === guildId);
+ if (guild) {
+ setSelectedGuild(guild);
+ }
+ const channelList = channelsByGuild[guildId];
+ const fullChannel = channelList?.find(c => c.id === channel.id);
+ if (fullChannel) {
+ setSelectedChannel(fullChannel);
+ }
+ }
+ }, [guilds, channelsByGuild, channelMap]);
+
+ // Load channels from API
+ useEffect(() => {
+ async function fetchChannels() {
+ try {
+ const response = await authFetch('/api/discord/channels');
+ if (!response.ok) throw new Error('Failed to fetch channels');
+ const data = await response.json();
+
+ // Separate categories (type 4) from text channels (type 0)
+ const categories = {};
+ const textChannels = [];
+
+ data.forEach(channel => {
+ if (channel.type === 4) {
+ categories[channel.id] = {
+ id: channel.id,
+ name: channel.name,
+ position: channel.position,
+ guildId: channel.guildId,
+ };
+ } else {
+ textChannels.push(channel);
+ }
+ });
+
+ // Group channels by guild
+ const byGuild = {};
+ const guildMap = {};
+
+ textChannels.forEach(channel => {
+ const guildId = channel.guildId || 'unknown';
+ if (!byGuild[guildId]) {
+ byGuild[guildId] = [];
+ guildMap[guildId] = {
+ id: guildId,
+ name: channel.guildName || 'Discord Archive',
+ icon: channel.guildIcon || null,
+ };
+ }
+ const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
+ const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;
+
+ byGuild[guildId].push({
+ id: channel.id,
+ name: channel.name,
+ type: channel.type,
+ position: channel.position,
+ topic: channel.topic,
+ parentId: channel.parentId,
+ categoryName,
+ categoryPosition,
+ guild: guildMap[guildId],
+ messageCount: channel.messageCount || 0,
+ });
+ });
+
+ // Sort guilds - put "no place like ::1" first
+ const guildList = Object.values(guildMap).sort((a, b) => {
+ if (a.name === 'no place like ::1') return -1;
+ if (b.name === 'no place like ::1') return 1;
+ return a.name.localeCompare(b.name);
+ });
+
+ // Sort channels within each guild by category position, then channel position
+ Object.keys(byGuild).forEach(guildId => {
+ byGuild[guildId].sort((a, b) => {
+ // First sort by category position (no category = -1, comes first)
+ if (a.categoryPosition !== b.categoryPosition) {
+ return a.categoryPosition - b.categoryPosition;
+ }
+ // Then by channel position within category
+ return (a.position || 0) - (b.position || 0);
+ });
+ });
+
+ setGuilds(guildList);
+ setChannelsByGuild(byGuild);
+ setChannels(data);
+
+ // Check URL hash for deep linking
+ const hash = window.location.hash.slice(1); // Remove #
+ const [hashGuildId, hashChannelId, hashMessageId] = hash.split('/');
+
+ let initialGuild = null;
+ let initialChannel = null;
+
+ // Set target message ID for scrolling after messages load
+ if (hashMessageId) {
+ pendingTargetMessageRef.current = hashMessageId;
+ }
+
+ // Try to find guild/channel from hash
+ if (hashGuildId && guildMap[hashGuildId]) {
+ initialGuild = guildMap[hashGuildId];
+ if (hashChannelId && byGuild[hashGuildId]) {
+ initialChannel = byGuild[hashGuildId].find(c => c.id === hashChannelId && c.messageCount > 0);
+ }
+ }
+
+ // Fall back to first guild/channel if hash doesn't match
+ if (!initialGuild && guildList.length > 0) {
+ initialGuild = guildList[0];
+ }
+ if (!initialChannel && initialGuild && byGuild[initialGuild.id]?.length > 0) {
+ // Pick first channel with messages
+ initialChannel = byGuild[initialGuild.id].find(c => c.type !== 4 && c.messageCount > 0);
+ }
+
+ if (initialGuild) {
+ setSelectedGuild(initialGuild);
+ }
+ if (initialChannel) {
+ setSelectedChannel(initialChannel);
+ }
+ } catch (err) {
+ console.error('Failed to fetch channels:', err);
+ setError('Failed to load channels');
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ // Wait for auth to be ready before fetching
+ fetchChannels();
+ }, []);
+
+ // Load members when guild or channel changes
+ useEffect(() => {
+ if (!selectedGuild) return;
+
+ async function fetchMembers() {
+ setLoadingMembers(true);
+ try {
+ // Include channelId to filter members by channel visibility
+ let url = `/api/discord/members?guildId=${selectedGuild.id}`;
+ if (selectedChannel?.id) {
+ url += `&channelId=${selectedChannel.id}`;
+ }
+ const response = await authFetch(url);
+ if (!response.ok) throw new Error('Failed to fetch members');
+ const data = await response.json();
+ setMembers(data);
+ } catch (err) {
+ console.error('Failed to fetch members:', err);
+ setMembers(null);
+ } finally {
+ setLoadingMembers(false);
+ }
+ }
+
+ fetchMembers();
+ }, [selectedGuild, selectedChannel]);
+
+ // Load messages from API when channel changes
+ useEffect(() => {
+ if (!selectedChannel) return;
+
+ // Reset topic expanded state when channel changes
+ setTopicExpanded(false);
+
+ // Set loading immediately to prevent flash of "no messages" state
+ setLoadingMessages(true);
+
+ async function fetchMessages() {
+ setMessages([]);
+ setUsersMap({});
+ setHasMoreMessages(true);
+
+ // Capture target message ID from ref (for deep-linking)
+ const targetMessageId = pendingTargetMessageRef.current;
+
+ try {
+ // If we have a target message ID, use 'around' to fetch messages centered on it
+ let url = `/api/discord/messages?channelId=${selectedChannel.id}&limit=50`;
+ if (targetMessageId) {
+ url += `&around=${targetMessageId}`;
+ }
+
+ const response = await authFetch(url);
+ if (!response.ok) throw new Error('Failed to fetch messages');
+ const data = await response.json();
+
+ // Handle new response format { messages, users }
+ const messagesData = data.messages || data;
+ const usersData = data.users || {};
+
+ // Normalize field names from API to component expectations
+ const normalizedMessages = messagesData.map(msg => ({
+ ...msg,
+ referenced_message: msg.referencedMessage || msg.referenced_message,
+ attachments: (msg.attachments || []).map(att => ({
+ ...att,
+ content_type: att.contentType || att.content_type,
+ })),
+ }));
+
+ // When using 'around', messages come back in ASC order already
+ // When using default (no around), they come DESC so reverse them
+ const orderedMessages = targetMessageId
+ ? normalizedMessages
+ : normalizedMessages.reverse();
+
+ setMessages(orderedMessages);
+ setUsersMap(usersData);
+ setHasMoreMessages(messagesData.length === 50);
+
+ // Set flag to scroll after render (handled by useLayoutEffect)
+ if (targetMessageId) {
+ // Keep the target in pendingTargetMessageRef for useLayoutEffect
+ } else {
+ scrollToBottomRef.current = true;
+ }
+ } catch (err) {
+ console.error('Failed to fetch messages:', err);
+ setMessages([]);
+ } finally {
+ setLoadingMessages(false);
+ }
+ }
+
+ fetchMessages();
+ // Only re-fetch when channel ID changes
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectedChannel?.id]);
+
+ // Handle scroll positioning after messages are rendered
+ useLayoutEffect(() => {
+ if (messages.length === 0) return;
+
+ const container = messagesContainerRef.current;
+ if (!container) return;
+
+ // Handle target message (deep-linking)
+ const targetMessageId = pendingTargetMessageRef.current;
+ if (targetMessageId) {
+ // Use requestAnimationFrame to ensure DOM is fully painted
+ requestAnimationFrame(() => {
+ const targetElement = document.getElementById(`message-${targetMessageId}`);
+ if (targetElement) {
+ targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ // Highlight the message with pulse + fade animation
+ targetElement.classList.add('discord-message-highlight');
+ setTimeout(() => {
+ targetElement.classList.remove('discord-message-highlight');
+ }, 5000); // 3 pulses (1.5s) + 3s fade
+ }
+ pendingTargetMessageRef.current = null;
+ });
+ return;
+ }
+
+ // Handle scroll to bottom on initial channel load
+ if (scrollToBottomRef.current) {
+ scrollToBottomRef.current = false;
+ container.scrollTop = container.scrollHeight;
+ }
+ }, [messages]);
+
+ // Load more messages (pagination)
+ const loadMoreMessages = useCallback(async () => {
+ if (loadingMore || !hasMoreMessages || messages.length === 0) return;
+
+ setLoadingMore(true);
+ try {
+ // Get the oldest message ID for pagination (messages are in ASC order, so first = oldest)
+ const oldestMessage = messages[0];
+ const response = await authFetch(
+ `/api/discord/messages?channelId=${selectedChannel.id}&limit=50&before=${oldestMessage.id}`
+ );
+ if (!response.ok) throw new Error('Failed to fetch more messages');
+ const data = await response.json();
+
+ // Handle new response format { messages, users }
+ const messagesData = data.messages || data;
+ const usersData = data.users || {};
+
+ const normalizedMessages = messagesData.map(msg => ({
+ ...msg,
+ referenced_message: msg.referencedMessage || msg.referenced_message,
+ attachments: (msg.attachments || []).map(att => ({
+ ...att,
+ content_type: att.contentType || att.content_type,
+ })),
+ }));
+
+ // Prepend older messages (reversed to maintain ASC order)
+ setMessages(prev => [...normalizedMessages.reverse(), ...prev]);
+ // Merge new users into existing usersMap
+ setUsersMap(prev => ({ ...prev, ...usersData }));
+ setHasMoreMessages(messagesData.length === 50);
+ } catch (err) {
+ console.error('Failed to load more messages:', err);
+ } finally {
+ setLoadingMore(false);
+ }
+ }, [loadingMore, hasMoreMessages, messages, selectedChannel]);
+
+ // Infinite scroll: load more when scrolling near the top
+ useEffect(() => {
+ const container = messagesContainerRef.current;
+ if (!container) return;
+
+ const handleScroll = () => {
+ // Don't load more when viewing search results
+ if (searchQuery.trim().length >= 2 && searchResults !== null) return;
+
+ // Load more when within 200px of the top
+ if (container.scrollTop < 200 && hasMoreMessages && !loadingMore) {
+ // Save scroll position before loading
+ const scrollHeightBefore = container.scrollHeight;
+ loadMoreMessages().then(() => {
+ // Restore scroll position after new messages are prepended
+ requestAnimationFrame(() => {
+ const scrollHeightAfter = container.scrollHeight;
+ container.scrollTop = scrollHeightAfter - scrollHeightBefore;
+ });
+ });
+ }
+ };
+
+ container.addEventListener('scroll', handleScroll);
+ return () => container.removeEventListener('scroll', handleScroll);
+ }, [hasMoreMessages, loadingMore, loadMoreMessages, searchQuery, searchResults]);
+
+ // Poll for new messages every 5 seconds
+ useEffect(() => {
+ if (!selectedChannel || loadingMessages || messages.length === 0) return;
+ // Don't poll when viewing search results - it would add messages that aren't in search
+ if (searchQuery.trim().length >= 2 && searchResults !== null) return;
+
+ const pollInterval = setInterval(async () => {
+ try {
+ // Get the newest message ID (messages are in ASC order, so last = newest)
+ const newestMessage = messages[messages.length - 1];
+ const response = await authFetch(
+ `/api/discord/messages?channelId=${selectedChannel.id}&limit=50&after=${newestMessage.id}`
+ );
+ if (!response.ok) return;
+ const data = await response.json();
+
+ const messagesData = data.messages || data;
+ const usersData = data.users || {};
+
+ if (messagesData.length === 0) return;
+
+ const normalizedMessages = messagesData.map(msg => ({
+ ...msg,
+ referenced_message: msg.referencedMessage || msg.referenced_message,
+ attachments: (msg.attachments || []).map(att => ({
+ ...att,
+ content_type: att.contentType || att.content_type,
+ })),
+ }));
+
+ // Check if user is scrolled near bottom before adding new messages
+ const container = messagesContainerRef.current;
+ const isNearBottom = container &&
+ (container.scrollHeight - container.scrollTop - container.clientHeight < 100);
+
+ // Append new messages (already in ASC order from API)
+ setMessages(prev => [...prev, ...normalizedMessages]);
+ setUsersMap(prev => ({ ...prev, ...usersData }));
+
+ // Auto-scroll to bottom if user was already near bottom
+ if (isNearBottom && container) {
+ setTimeout(() => {
+ container.scrollTop = container.scrollHeight;
+ }, 50);
+ }
+ } catch (err) {
+ console.error('Polling failed:', err);
+ }
+ }, 5000);
+
+ return () => clearInterval(pollInterval);
+ }, [selectedChannel, loadingMessages, messages, searchQuery, searchResults]);
+
+ // Poll for channel/guild updates every 5 seconds
+ useEffect(() => {
+ if (loading) return; // Don't poll during initial load
+
+ const pollInterval = setInterval(async () => {
+ try {
+ const response = await authFetch('/api/discord/channels');
+ if (!response.ok) return;
+ const data = await response.json();
+
+ // Separate categories from text channels
+ const categories = {};
+ const textChannels = [];
+
+ data.forEach(channel => {
+ if (channel.type === 4) {
+ categories[channel.id] = {
+ id: channel.id,
+ name: channel.name,
+ position: channel.position,
+ guildId: channel.guildId,
+ };
+ } else {
+ textChannels.push(channel);
+ }
+ });
+
+ // Rebuild guild/channel maps
+ const byGuild = {};
+ const guildMap = {};
+
+ textChannels.forEach(channel => {
+ const guildId = channel.guildId || 'unknown';
+ if (!byGuild[guildId]) {
+ byGuild[guildId] = [];
+ guildMap[guildId] = {
+ id: guildId,
+ name: channel.guildName || 'Discord Archive',
+ icon: channel.guildIcon || null,
+ };
+ }
+ const categoryName = channel.parentId ? categories[channel.parentId]?.name : null;
+ const categoryPosition = channel.parentId ? categories[channel.parentId]?.position : -1;
+
+ byGuild[guildId].push({
+ id: channel.id,
+ name: channel.name,
+ type: channel.type,
+ position: channel.position,
+ topic: channel.topic,
+ parentId: channel.parentId,
+ categoryName,
+ categoryPosition,
+ guild: guildMap[guildId],
+ messageCount: channel.messageCount || 0,
+ });
+ });
+
+ // Sort guilds
+ const guildList = Object.values(guildMap).sort((a, b) => {
+ if (a.name === 'no place like ::1') return -1;
+ if (b.name === 'no place like ::1') return 1;
+ return a.name.localeCompare(b.name);
+ });
+
+ // Sort channels within each guild
+ Object.keys(byGuild).forEach(guildId => {
+ byGuild[guildId].sort((a, b) => {
+ if (a.categoryPosition !== b.categoryPosition) {
+ return a.categoryPosition - b.categoryPosition;
+ }
+ return (a.position || 0) - (b.position || 0);
+ });
+ });
+
+ setGuilds(guildList);
+ setChannelsByGuild(byGuild);
+ setChannels(data);
+ // Note: We don't update selectedChannel here to avoid triggering message reload
+ // The channel list will show updated message counts from channelsByGuild
+ } catch (err) {
+ console.error('Channel polling failed:', err);
+ }
+ }, 5000);
+
+ return () => clearInterval(pollInterval);
+ }, [loading]);
+
+ // Poll for member updates every 5 seconds
+ useEffect(() => {
+ if (!selectedGuild) return;
+
+ const pollInterval = setInterval(async () => {
+ try {
+ // Include channelId to filter members by channel visibility
+ let url = `/api/discord/members?guildId=${selectedGuild.id}`;
+ if (selectedChannel?.id) {
+ url += `&channelId=${selectedChannel.id}`;
+ }
+ const response = await authFetch(url);
+ if (!response.ok) return;
+ const data = await response.json();
+ setMembers(data);
+ } catch (err) {
+ console.error('Member polling failed:', err);
+ }
+ }, 5000);
+
+ return () => clearInterval(pollInterval);
+ }, [selectedGuild?.id, selectedChannel?.id]);
+
+ // Handle preview cache updates
+ const handlePreviewLoad = useCallback((url, preview) => {
+ setPreviewCache(prev => ({ ...prev, [url]: preview }));
+ }, []);
+
+ // Filter messages by search - use server results if available, otherwise filter locally
+ const filteredMessages = useMemo(() => {
+ // If we have server-side search results, use those
+ if (searchQuery.trim().length >= 2 && searchResults !== null) {
+ return searchResults;
+ }
+
+ // No search query - return all messages
+ if (!searchQuery.trim()) return messages;
+
+ // Local filtering for short queries or while waiting for server results
+ const query = searchQuery.toLowerCase();
+ return messages.filter(msg => {
+ // Check message content
+ if (msg.content?.toLowerCase().includes(query)) return true;
+
+ // Check author username/displayName
+ if (msg.author?.username?.toLowerCase().includes(query)) return true;
+ if (msg.author?.displayName?.toLowerCase().includes(query)) return true;
+
+ // Check embed content
+ if (msg.embeds?.length > 0) {
+ for (const embed of msg.embeds) {
+ if (embed.title?.toLowerCase().includes(query)) return true;
+ if (embed.description?.toLowerCase().includes(query)) return true;
+ if (embed.author?.name?.toLowerCase().includes(query)) return true;
+ if (embed.footer?.text?.toLowerCase().includes(query)) return true;
+ // Check embed fields
+ if (embed.fields?.length > 0) {
+ for (const field of embed.fields) {
+ if (field.name?.toLowerCase().includes(query)) return true;
+ if (field.value?.toLowerCase().includes(query)) return true;
+ }
+ }
+ }
+ }
+
+ return false;
+ });
+ }, [messages, searchQuery, searchResults]);
+
+ // Check if current channel is dds-archive
+ const isArchiveChannel = selectedChannel?.name === 'dds-archive';
+
+ // Group messages by author and time window (5 minutes)
+ // Messages are in ASC order (oldest first, newest at bottom), so we group accordingly
+ // For archive channel, parse messages to get real author/timestamp for grouping
+ const groupedMessages = useMemo(() => {
+ const groups = [];
+ let currentGroup = null;
+ let lastDate = null;
+
+ filteredMessages.forEach((message) => {
+ // For archive channel, parse to get real author and timestamp
+ let effectiveAuthor = message.author;
+ let effectiveTimestamp = message.timestamp;
+
+ if (isArchiveChannel) {
+ const parsed = parseArchivedMessage(message.content);
+ if (parsed) {
+ // Use resolved user for proper grouping by real user ID
+ const resolvedUser = resolveArchivedUser(parsed.originalAuthor, usersMap, members);
+ effectiveAuthor = resolvedUser;
+ effectiveTimestamp = parsed.originalTimestamp;
+ }
+ }
+
+ const messageDate = new Date(effectiveTimestamp).toDateString();
+
+ // Check if we need a date divider (date changed from previous message)
+ if (messageDate !== lastDate) {
+ if (currentGroup) groups.push(currentGroup);
+ groups.push({ type: 'divider', date: effectiveTimestamp });
+ currentGroup = null;
+ lastDate = messageDate;
+ }
+
+ // For ASC order: check time diff from the LAST message in current group
+ // (which is the most recent since we're iterating oldest to newest)
+ const shouldStartNewGroup = !currentGroup ||
+ currentGroup.effectiveAuthor?.id !== effectiveAuthor?.id ||
+ Math.abs(new Date(currentGroup.messages[currentGroup.messages.length - 1].effectiveTimestamp) - new Date(effectiveTimestamp)) > 5 * 60 * 1000;
+
+ if (shouldStartNewGroup) {
+ if (currentGroup) groups.push(currentGroup);
+ currentGroup = {
+ type: 'messages',
+ author: effectiveAuthor,
+ effectiveAuthor,
+ messages: [{ ...message, effectiveTimestamp }],
+ };
+ } else {
+ currentGroup.messages.push({ ...message, effectiveTimestamp });
+ }
+ });
+
+ if (currentGroup) groups.push(currentGroup);
+ return groups;
+ }, [filteredMessages, isArchiveChannel, usersMap, members]);
+
+ if (loading) {
+ return (
+
+ {avatarUrl ? (
+ 
+ ) : (
+
+ ) : (
+
+ {getInitial(displayAuthor?.username)}
+
+ )}
+
+
+ {formatTimestamp(displayTimestamp, 'time')}
+
+
+ )}
+
+
+ {isFirstInGroup && (
+
+
+ {/* Tags appear BEFORE the name */}
+ {displayAuthor?.isServerForwarded && (
+ SERVER
+ )}
+ {(displayAuthor?.bot || displayAuthor?.isWebhook) && !displayAuthor?.isServerForwarded && (
+ APP
+ )}
+ {archivedMessage && (
+
+ ARCHIVED
+
+ )}
+
+ {displayAuthor?.displayName || displayAuthor?.username || 'Unknown User'}
+
+ {formatTimestamp(displayTimestamp)}
+
+ )}
+
+ {displayContent && (
+
+ )}
+
+ {/* Attachments */}
+ {attachments?.length > 0 && (
+
+ {attachments.map((att, idx) => (
+
+ )}
+
+ {/* Stickers */}
+ {stickers?.length > 0 && (
+
+ {stickers.map((sticker) => (
+
+ )}
+
+ {/* Original embeds from Discord */}
+ {embeds?.map((embed, idx) => (
+
+ {sticker.formatType === 3 ? (
+ // Lottie stickers - show placeholder or name
+ 
+ )}
+
+ ))}
+
+ {sticker.name}
+
+ ) : (
+
+ 
+ )}
+ {embed.video?.url && (
+
+ )}
+ {embed.footer && (
+
+ ))}
+
+ {/* Link previews for URLs in content */}
+ {urlsToPreview.map((url) => (
+
+ 
e.target.style.display = 'none'}
+ />
+ )}
+
+ {embed.image?.url && (
+
+ {embed.author && (
+
+ {embed.thumbnail?.url && embed.thumbnail.url.trim() && (
+
+ {embed.author.icon_url && (
+ 
+ )}
+ {embed.author.name}
+
+ )}
+ {embed.title && (
+ embed.url ? (
+
+ {embed.title}
+
+ ) : (
+ {embed.title}
+ )
+ )}
+ {embed.description && (
+
+ )}
+ {/* Embed fields */}
+ {embed.fields?.length > 0 && (
+
+ {embed.fields.map((field, fieldIdx) => (
+
+ )}
+
+ {field.name && (
+
+ ))}
+ {field.name}
+ )}
+ {field.value && (
+
+ )}
+
+ )}
+ {embed.video?.url && (
+
+ )}
+ {embed.footer && (
+
+ {embed.footer.icon_url && (
+ 
+ )}
+ {embed.footer.text}
+ {embed.timestamp && (
+ <>
+ •
+ {formatTimestamp(embed.timestamp, 'short')}
+
+ )}
+
+ )}
+
+ {reactions.map((reaction, idx) => (
+
+ ))}
+
+ )}
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ Error
+{error}
+
+ {/* Header */}
+ {selectedChannel && (
+
+
+ {/* Image Modal */}
+ {imageModal && (
+
+ {selectedChannel.guild?.icon && (
+ 
+ )}
+
+ )}
+
+ {/* Main layout: sidebar + content */}
+
+
+ + {selectedChannel.guild?.name || 'Discord Archive'} +
+
+
+ {selectedChannel.name}
+ {selectedChannel.topic && (
+ <>
+ |
+ setTopicExpanded(!topicExpanded)}
+ title={topicExpanded ? 'Click to collapse' : 'Click to expand'}
+ dangerouslySetInnerHTML={{
+ __html: parseDiscordMarkdown(selectedChannel.topic, { channelMap, usersMap })
+ }}
+ />
+
+ )}
+
+
+
+ {selectedChannel.messageCount?.toLocaleString() || messages.length} messages
+
+
+
+
+
+ {/* Sidebar with Guild and Channel selector */}
+
+
+ {/* Guild tabs */}
+ {guilds.length > 1 && (
+
+
+ {/* Content area: search + messages */}
+
+ {guilds.map((guild) => (
+
+ ))}
+
+ )}
+
+ {/* Channel list for selected guild */}
+ {selectedGuild && channelsByGuild[selectedGuild.id]?.length > 0 && (
+
+
+ {showCategoryHeader && channel.categoryName && (
+
+ );
+ });
+ })()}
+
+ )}
+
+ {selectedGuild.name}
+
+ {(() => {
+ let lastCategory = null;
+ // Filter out channels with no messages (no access)
+ const accessibleChannels = channelsByGuild[selectedGuild.id].filter(c => c.messageCount > 0);
+ return accessibleChannels.map((channel) => {
+ const showCategoryHeader = channel.categoryName !== lastCategory;
+ lastCategory = channel.categoryName;
+ return (
+
+
+ {channel.categoryName}
+
+ )}
+
+
+ {/* Search bar */}
+
+
+ {/* Member list panel */}
+ {memberListExpanded && (
+
+ setSearchQuery(e.target.value)}
+ />
+ {searchLoading && (
+
+
+ {/* Search info banner */}
+ {searchQuery.trim().length >= 2 && searchResults !== null && (
+
+
+ )}
+
+ Found {searchResults.length} result{searchResults.length !== 1 ? 's' : ''} across all messages
+
+
+ )}
+
+ {/* Messages */}
+ {loadingMessages ? (
+
+
+ ) : filteredMessages.length === 0 ? (
+
+
+
+ ) : (
+ No messages found
++ {searchQuery ? 'No messages match your search. Try different keywords.' : 'This channel has no archived messages'} +
+
+ {/* Loading indicator at top when fetching older messages */}
+ {loadingMore && (
+
+ )}
+
+
+ )}
+ {groupedMessages.map((group, groupIdx) => {
+ if (group.type === 'divider') {
+ return (
+
+ {formatDateDivider(group.date)}
+
+ );
+ }
+
+ return (
+
+ {group.messages.map((message, msgIdx) => (
+
+ );
+ })}
+
+ {loadingMembers ? (
+
+ )}
+
+
+ ) : members?.groups?.length > 0 ? (
+ <>
+ {members.groups.map((group) => (
+
+
+ ))}
+
+ ) : (
+
+ {group.role.name} — {group.members.length}
+
+ {group.members.map((member) => (
+
+ {member.avatar ? (
+ 
+ ) : (
+
+ ))}
+
+ {(member.displayName || member.username || 'U')[0].toUpperCase()}
+
+ )}
+
+ {member.displayName || member.username}
+
+ {member.isBot && APP}
+ No members found
+ )}
+
+
+ )}
+
+ {/* Reaction Users Popup */}
+ {reactionPopup && (
+ e.stopPropagation()}>
+
+ 
+
+ Open original
+
+
+ e.stopPropagation()}
+ >
+
+ )}
+
+ {/* Message Context Menu */}
+ {contextMenu && (
+
+ {reactionPopup.emoji.id ? (
+ 
+ ) : (
+ {reactionPopup.emoji.name}
+ )}
+ {reactionPopup.users?.length || 0}
+
+
+ ) : (
+ {reactionPopup.emoji.name}
+ )}
+ {reactionPopup.users?.length || 0}
+
+ {reactionPopup.loading ? (
+
+
+
+ ) : reactionPopup.users?.length > 0 ? (
+ reactionPopup.users.map((user) => (
+
+ 
+ {user.displayName}
+
+ ))
+ ) : (
+ No users found
+ )}
+ e.stopPropagation()}
+ >
+
+
+
+
+ )}
+
+ {/* Channel Context Menu */}
+ {channelContextMenu && (
+ e.stopPropagation()}
+ >
+
+
+
+
+ )}
+
+
- {whitelabel ? ]+property=["']og:title["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:title["']/i);
+
+ meta.description = getMetaContent(/]+property=["']og:description["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:description["']/i);
+
+ meta.image = getMetaContent(/]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:image["']/i);
+
+ meta.siteName = getMetaContent(/]+property=["']og:site_name["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:site_name["']/i);
+
+ meta.type = getMetaContent(/]+property=["']og:type["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:type["']/i);
+
+ meta.video = getMetaContent(/]+property=["']og:video(?::url)?["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+property=["']og:video(?::url)?["']/i);
+
+ // Twitter cards fallback
+ if (!meta.title) {
+ meta.title = getMetaContent(/]+name=["']twitter:title["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+name=["']twitter:title["']/i);
+ }
+ if (!meta.description) {
+ meta.description = getMetaContent(/]+name=["']twitter:description["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+name=["']twitter:description["']/i);
+ }
+ if (!meta.image) {
+ meta.image = getMetaContent(/]+name=["']twitter:image["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+name=["']twitter:image["']/i);
+ }
+
+ // Theme color
+ meta.themeColor = getMetaContent(/]+name=["']theme-color["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+name=["']theme-color["']/i);
+
+ // Fallback to standard meta tags and title
+ if (!meta.title) {
+ const titleMatch = html.match(/]*>([^<]+)<\/title>/i);
+ meta.title = titleMatch ? decodeHTMLEntities(titleMatch[1]) : null;
+ }
+ if (!meta.description) {
+ meta.description = getMetaContent(/]+name=["']description["'][^>]+content=["']([^"']+)["']/i)
+ || getMetaContent(/]+content=["']([^"']+)["'][^>]+name=["']description["']/i);
+ }
+
+ // Resolve relative image URLs
+ if (meta.image && !meta.image.startsWith('http')) {
+ try {
+ const baseUrl = new URL(url);
+ meta.image = new URL(meta.image, baseUrl.origin).href;
+ } catch {
+ meta.image = null;
+ }
+ }
+
+ // Get site name from domain if not found
+ if (!meta.siteName) {
+ try {
+ const parsed = new URL(url);
+ meta.siteName = parsed.hostname.replace(/^www\./, '');
+ } catch {
+ // ignore
+ }
+ }
+
+ return meta;
+}
+
+/**
+ * Decode HTML entities
+ */
+function decodeHTMLEntities(text) {
+ if (!text) return text;
+ return text
+ .replace(/&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, "'")
+ .replace(/'/g, "'")
+ .replace(///g, '/')
+ .replace(/&#(\d+);/g, (_, num) => String.fromCharCode(parseInt(num, 10)))
+ .replace(/&#x([a-fA-F0-9]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+}
+
+export async function GET({ request }) {
+ // Rate limit check
+ const rateCheck = checkRateLimit(request, {
+ limit: 10,
+ windowMs: 1000,
+ burstLimit: 50,
+ burstWindowMs: 10_000,
+ });
+
+ let cookieId = getCookieId(request);
+ const hadCookie = !!cookieId;
+ if (!cookieId) {
+ cookieId = generateNonce();
+ }
+
+ if (!rateCheck.allowed) {
+ const errorMsg = rateCheck.isFlooding
+ ? { error: 'Too many requests - please slow down' }
+ : { error: 'Rate limit exceeded' };
+ const response = new Response(JSON.stringify(errorMsg), {
+ status: 429,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Retry-After': '1',
+ },
+ });
+ if (!hadCookie) {
+ response.headers.set('Set-Cookie', createNonceCookie(cookieId));
+ }
+ return response;
+ }
+
+ recordRequest(request, 1000);
+
+ const url = new URL(request.url);
+ const targetUrl = url.searchParams.get('url');
+
+ if (!targetUrl) {
+ return new Response(JSON.stringify({ error: 'Missing url parameter' }), {
+ status: 400,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+
+ // Validate URL format
+ let parsedUrl;
+ try {
+ parsedUrl = new URL(targetUrl);
+ if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+ throw new Error('Invalid protocol');
+ }
+ } catch {
+ return new Response(JSON.stringify({ error: 'Invalid URL' }), {
+ status: 400,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+
+ // Check if it's a trusted domain (client can fetch directly)
+ const trusted = isTrustedDomain(targetUrl);
+
+ try {
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 8000);
+
+ const response = await fetch(targetUrl, {
+ method: 'GET',
+ headers: {
+ 'User-Agent': 'Mozilla/5.0 (compatible; DiscordBot/2.0; +https://discordapp.com)',
+ 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
+ 'Accept-Language': 'en-US,en;q=0.5',
+ },
+ signal: controller.signal,
+ redirect: 'follow',
+ });
+
+ clearTimeout(timeout);
+
+ if (!response.ok) {
+ return new Response(JSON.stringify({
+ error: 'Failed to fetch URL',
+ status: response.status
+ }), {
+ status: 502,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+
+ const contentType = response.headers.get('content-type') || '';
+
+ // Handle image URLs directly - return safe (possibly proxied) URL
+ if (contentType.startsWith('image/')) {
+ const safeImageUrl = await getSafeImageUrl(targetUrl);
+ const result = {
+ url: targetUrl,
+ type: 'image',
+ image: safeImageUrl,
+ trusted,
+ };
+ const resp = new Response(JSON.stringify(result), {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Cache-Control': 'public, max-age=3600',
+ },
+ });
+ if (!hadCookie) {
+ resp.headers.set('Set-Cookie', createNonceCookie(cookieId));
+ }
+ return resp;
+ }
+
+ // Handle video URLs directly (no proxy for video - too large)
+ if (contentType.startsWith('video/')) {
+ // Only allow trusted video sources
+ if (!trusted) {
+ return new Response(JSON.stringify({
+ error: 'Untrusted video source',
+ }), {
+ status: 403,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+ const result = {
+ url: targetUrl,
+ type: 'video',
+ video: targetUrl,
+ trusted,
+ };
+ const resp = new Response(JSON.stringify(result), {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Cache-Control': 'public, max-age=3600',
+ },
+ });
+ if (!hadCookie) {
+ resp.headers.set('Set-Cookie', createNonceCookie(cookieId));
+ }
+ return resp;
+ }
+
+ // Only parse HTML
+ if (!contentType.includes('text/html') && !contentType.includes('application/xhtml')) {
+ return new Response(JSON.stringify({
+ error: 'URL is not an HTML page',
+ contentType
+ }), {
+ status: 400,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+
+ // Read only the first 50KB to get meta tags (they're usually in )
+ const reader = response.body.getReader();
+ let html = '';
+ let bytesRead = 0;
+ const maxBytes = 50 * 1024;
+
+ while (bytesRead < maxBytes) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ html += new TextDecoder().decode(value);
+ bytesRead += value.length;
+ // Stop early if we've passed
+ if (html.includes('')) break;
+ }
+ reader.cancel();
+
+ const meta = parseMetaTags(html, targetUrl);
+ meta.trusted = trusted;
+
+ // Convert image URL to safe URL (proxy if untrusted)
+ if (meta.image) {
+ meta.image = await getSafeImageUrl(meta.image);
+ }
+
+ const resp = new Response(JSON.stringify(meta), {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Cache-Control': 'public, max-age=3600',
+ },
+ });
+ if (!hadCookie) {
+ resp.headers.set('Set-Cookie', createNonceCookie(cookieId));
+ }
+ return resp;
+
+ } catch (err) {
+ console.error('[link-preview] Error fetching URL:', err.message);
+ return new Response(JSON.stringify({
+ error: 'Failed to fetch preview',
+ message: err.message
+ }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ });
+ }
+}
diff --git a/src/pages/discord-logs.astro b/src/pages/discord-logs.astro
new file mode 100644
index 0000000..72adbc0
--- /dev/null
+++ b/src/pages/discord-logs.astro
@@ -0,0 +1,32 @@
+---
+import Base from "../layouts/Base.astro";
+import Root from "../components/AppLayout.jsx";
+import "@styles/DiscordLogs.css";
+import { requireAuthHook } from "@/hooks/requireAuthHook";
+
+const user = await requireAuthHook(Astro);
+
+if (!user) {
+ return Astro.redirect('/login');
+}
+---
+
+
+
+
+
+
diff --git a/src/utils/apiAuth.js b/src/utils/apiAuth.js
new file mode 100644
index 0000000..aea0a27
--- /dev/null
+++ b/src/utils/apiAuth.js
@@ -0,0 +1,117 @@
+/**
+ * API route authentication helper
+ * Validates user session for protected API endpoints
+ */
+import { API_URL } from '@/config';
+
+/**
+ * Check if the request has a valid authentication session
+ * @param {Request} request - The incoming request
+ * @returns {Promise<{user: object|null, error: Response|null, setCookieHeader: string|null}>}
+ */
+export async function requireApiAuth(request) {
+ try {
+ const cookieHeader = request.headers.get('cookie') ?? '';
+
+ if (!cookieHeader) {
+ return {
+ user: null,
+ error: new Response(JSON.stringify({ error: 'Authentication required' }), {
+ status: 401,
+ headers: { 'Content-Type': 'application/json' },
+ }),
+ setCookieHeader: null,
+ };
+ }
+
+ // Try to get user identity
+ let res = await fetch(`${API_URL}/auth/id`, {
+ headers: { Cookie: cookieHeader },
+ credentials: 'include',
+ });
+
+ let newSetCookieHeader = null;
+
+ // If unauthorized, try to refresh the token
+ if (res.status === 401) {
+ const refreshRes = await fetch(`${API_URL}/auth/refresh`, {
+ method: 'POST',
+ headers: { Cookie: cookieHeader },
+ credentials: 'include',
+ });
+
+ if (!refreshRes.ok) {
+ return {
+ user: null,
+ error: new Response(JSON.stringify({ error: 'Session expired' }), {
+ status: 401,
+ headers: { 'Content-Type': 'application/json' },
+ }),
+ setCookieHeader: null,
+ };
+ }
+
+ // Capture the Set-Cookie header from the refresh response to forward to client
+ newSetCookieHeader = refreshRes.headers.get('set-cookie');
+
+ let newCookieHeader = cookieHeader;
+
+ if (newSetCookieHeader) {
+ const cookiesArray = newSetCookieHeader.split(/,(?=\s*\w+=)/);
+ newCookieHeader = cookiesArray.map(c => c.split(';')[0]).join('; ');
+ } else {
+ return {
+ user: null,
+ error: new Response(JSON.stringify({ error: 'Session refresh failed' }), {
+ status: 401,
+ headers: { 'Content-Type': 'application/json' },
+ }),
+ setCookieHeader: null,
+ };
+ }
+
+ res = await fetch(`${API_URL}/auth/id`, {
+ headers: { Cookie: newCookieHeader },
+ credentials: 'include',
+ });
+ }
+
+ if (!res.ok) {
+ return {
+ user: null,
+ error: new Response(JSON.stringify({ error: 'Authentication failed' }), {
+ status: 401,
+ headers: { 'Content-Type': 'application/json' },
+ }),
+ setCookieHeader: null,
+ };
+ }
+
+ const user = await res.json();
+ return { user, error: null, setCookieHeader: newSetCookieHeader };
+ } catch (err) {
+ console.error('API auth error:', err);
+ return {
+ user: null,
+ error: new Response(JSON.stringify({ error: 'Authentication error' }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ }),
+ setCookieHeader: null,
+ };
+ }
+}
+
+/**
+ * Helper to create a response with optional Set-Cookie header forwarding
+ * @param {any} data - Response data
+ * @param {number} status - HTTP status code
+ * @param {string|null} setCookieHeader - Set-Cookie header from auth refresh
+ */
+export function createApiResponse(data, status = 200, setCookieHeader = null) {
+ const headers = { 'Content-Type': 'application/json' };
+ if (setCookieHeader) {
+ headers['Set-Cookie'] = setCookieHeader;
+ }
+ return new Response(JSON.stringify(data), { status, headers });
+}
diff --git a/src/utils/authFetch.js b/src/utils/authFetch.js
index 26540aa..36363bc 100644
--- a/src/utils/authFetch.js
+++ b/src/utils/authFetch.js
@@ -1,5 +1,7 @@
import { API_URL } from "@/config";
+// Track in-flight refresh to avoid duplicate requests
+let refreshPromise = null;
// Auth fetch wrapper
export const authFetch = async (url, options = {}, retry = true) => {
@@ -9,12 +11,19 @@ export const authFetch = async (url, options = {}, retry = true) => {
});
if (res.status === 401 && retry) {
- // attempt refresh
+ // attempt refresh (non-blocking if already in progress)
try {
- const refreshRes = await fetch(`${API_URL}/auth/refresh`, {
- method: "POST",
- credentials: "include",
- });
+ // Reuse existing refresh promise if one is in flight
+ if (!refreshPromise) {
+ refreshPromise = fetch(`${API_URL}/auth/refresh`, {
+ method: "POST",
+ credentials: "include",
+ }).finally(() => {
+ refreshPromise = null;
+ });
+ }
+
+ const refreshRes = await refreshPromise;
if (!refreshRes.ok) throw new Error("Refresh failed");
@@ -51,6 +60,56 @@ export async function refreshAccessToken(cookieHeader) {
}
}
+/**
+ * Ensure authentication is valid before making API requests.
+ * Makes a lightweight auth check against our own API and refreshes if needed.
+ * Returns true if auth is valid, false if user needs to log in.
+ */
+export async function ensureAuth() {
+ try {
+ // Try a lightweight request to our own API that requires auth
+ // Using HEAD or a simple endpoint to minimize overhead
+ const res = await fetch('/api/discord/channels', {
+ method: 'GET',
+ credentials: 'include',
+ });
+
+ if (res.ok) {
+ return true;
+ }
+
+ if (res.status === 401) {
+ // Try to refresh the token via our external auth API
+ if (!refreshPromise) {
+ refreshPromise = fetch(`${API_URL}/auth/refresh`, {
+ method: 'POST',
+ credentials: 'include',
+ }).finally(() => {
+ refreshPromise = null;
+ });
+ }
+
+ const refreshRes = await refreshPromise;
+ if (refreshRes.ok) {
+ // Retry the auth check after refresh
+ const retryRes = await fetch('/api/discord/channels', {
+ method: 'GET',
+ credentials: 'include',
+ });
+ return retryRes.ok;
+ }
+ return false;
+ }
+
+ // Other errors (500, etc.) - assume auth is OK but server issue
+ return true;
+ } catch (err) {
+ console.error('Auth check failed:', err);
+ // Network error - don't redirect, let the actual API calls handle it
+ return true;
+ }
+}
+
export function handleLogout() {
document.cookie.split(";").forEach((cookie) => {
const name = cookie.split("=")[0].trim();
diff --git a/src/utils/db.js b/src/utils/db.js
new file mode 100644
index 0000000..8cb491a
--- /dev/null
+++ b/src/utils/db.js
@@ -0,0 +1,18 @@
+/**
+ * PostgreSQL database connection for Discord logs
+ */
+import postgres from 'postgres';
+
+// Database connection configuration
+const sql = postgres({
+ host: import.meta.env.DISCORD_DB_HOST || 'localhost',
+ port: parseInt(import.meta.env.DISCORD_DB_PORT || '5432', 10),
+ database: import.meta.env.DISCORD_DB_NAME || 'discord',
+ username: import.meta.env.DISCORD_DB_USER || 'discord',
+ password: import.meta.env.DISCORD_DB_PASSWORD || '',
+ max: 10, // Max connections in pool
+ idle_timeout: 20,
+ connect_timeout: 10,
+});
+
+export default sql;
+
+