birdclaw 0.8.1 → 0.8.3

package/src/components/TweetRichText.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import {
 	collectTweetSegmentsForText,
 	enrichFallbackUrlEntities,
+	isTweetArticleUrlEntity,
 	normalizeTweetUrlEntityRangeForText,
 } from "#/lib/tweet-render";
 import type { TweetEntities } from "#/lib/types";
@@ -19,6 +20,14 @@ function rangeKey(range: { start: number; end: number }) {
 	return `${range.start}:${range.end}`;
 }
 
+function isShortUrl(value: string) {
+	try {
+		return new URL(value).hostname.replace(/^www\./, "") === "t.co";
+	} catch {
+		return false;
+	}
+}
+
 export function TweetRichText({
 	text,
 	entities,
@@ -37,6 +46,25 @@ export function TweetRichText({
 	const richEntities = enrichFallbackUrlEntities(text, entities);
 	const segments = collectTweetSegmentsForText(text, richEntities);
 	const hiddenRawRangeKeys = new Set(hiddenUrlRanges.map(rangeKey));
+	const article = entities.article;
+	if (article) {
+		const urlEntries = richEntities.urls ?? [];
+		const articleUrlEntries = urlEntries.filter((entry) =>
+			isTweetArticleUrlEntity(entry, article),
+		);
+		const onlyUrlEntry = urlEntries[0];
+		if (
+			articleUrlEntries.length === 0 &&
+			urlEntries.length === 1 &&
+			onlyUrlEntry &&
+			(isShortUrl(onlyUrlEntry.url) || isShortUrl(onlyUrlEntry.expandedUrl))
+		) {
+			articleUrlEntries.push(onlyUrlEntry);
+		}
+		for (const entry of articleUrlEntries) {
+			hiddenRawRangeKeys.add(rangeKey(entry));
+		}
+	}
 	const hiddenRangeKeys = new Set(hiddenRawRangeKeys);
 	for (const entry of richEntities.urls ?? []) {
 		if (!hiddenRawRangeKeys.has(rangeKey(entry))) continue;
@@ -46,10 +74,13 @@ export function TweetRichText({
 	}
 	const Wrapper = as;
 	let cursor = 0;
+	const hideArticleTitle =
+		entities.article && text.trim() === entities.article.title.trim();
+	const visibleSegments = hideArticleTitle ? [] : segments;
 
 	return (
 		<Wrapper className={className === "body-copy" ? bodyCopyClass : className}>
-			{segments.map((segment, index) => {
+			{visibleSegments.map((segment, index) => {
 				if (
 					segment.start < cursor ||
 					segment.end <= segment.start ||
@@ -122,7 +153,7 @@ export function TweetRichText({
 					</Fragment>
 				);
 			})}
-			{text.slice(cursor)}
+			{hideArticleTitle ? null : text.slice(cursor)}
 		</Wrapper>
 	);
 }

package/src/components/links-controller.ts

@@ -0,0 +1,162 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { formatCompactNumber } from "#/lib/present";
+import { queryKeys } from "#/lib/query-client";
+import type {
+	LinkInsightKind,
+	LinkInsightRange,
+	LinkInsightSort,
+	LinkInsightSource,
+} from "#/lib/types";
+import {
+	LINK_INSIGHTS_CACHE_MAX_AGE_MS,
+	PROFILE_HYDRATION_DELAY_MS,
+	collectProfilesForHydration,
+	fetchLinkInsights,
+	hydratingLinkProfileHandles,
+	linkInsightQueryKey,
+} from "./links-model";
+
+export function useLinksController() {
+	const queryClient = useQueryClient();
+	const [kind, setKind] = useState<LinkInsightKind>("links");
+	const [range, setRange] = useState<LinkInsightRange>("week");
+	const [source, setSource] = useState<LinkInsightSource>("all");
+	const [sort, setSort] = useState<LinkInsightSort>("rank");
+	const [search, setSearch] = useState("");
+	const insightsQuery = useQuery({
+		queryKey: linkInsightQueryKey(kind, range, sort, source),
+		queryFn: ({ signal }) =>
+			fetchLinkInsights(kind, range, sort, source, signal),
+		staleTime: LINK_INSIGHTS_CACHE_MAX_AGE_MS,
+	});
+	const data = insightsQuery.data ?? null;
+
+	useEffect(() => {
+		if (!data) return;
+		const prefetchKind = kind === "links" ? "videos" : "links";
+		const timer = window.setTimeout(() => {
+			void queryClient.prefetchQuery({
+				queryKey: linkInsightQueryKey(prefetchKind, range, sort, source),
+				queryFn: ({ signal }) =>
+					fetchLinkInsights(prefetchKind, range, sort, source, signal),
+				staleTime: LINK_INSIGHTS_CACHE_MAX_AGE_MS,
+			});
+		}, 250);
+		return () => window.clearTimeout(timer);
+	}, [data, kind, queryClient, range, sort, source]);
+
+	useEffect(() => {
+		const handles = collectProfilesForHydration(data).filter((handle) => {
+			const normalized = handle.toLowerCase();
+			return (
+				queryClient.getQueryData([
+					...queryKeys.profileHydration,
+					normalized,
+				]) !== true && !hydratingLinkProfileHandles.has(normalized)
+			);
+		});
+		if (handles.length === 0) return;
+
+		const controller = new AbortController();
+		const url = new URL("/api/profile-hydrate", window.location.origin);
+		url.searchParams.set("handles", handles.join(","));
+		for (const handle of handles) {
+			hydratingLinkProfileHandles.add(handle.toLowerCase());
+		}
+		const finishHydration = (succeeded: boolean) => {
+			for (const handle of handles) {
+				const normalized = handle.toLowerCase();
+				hydratingLinkProfileHandles.delete(normalized);
+				if (succeeded) {
+					queryClient.setQueryData(
+						[...queryKeys.profileHydration, normalized],
+						true,
+					);
+				}
+			}
+		};
+
+		let idleId: number | null = null;
+		const runHydration = () => {
+			fetch(url, { signal: controller.signal })
+				.then((response) => response.json())
+				.then((response: { hydratedProfiles?: number }) => {
+					finishHydration(true);
+					if ((response.hydratedProfiles ?? 0) > 0) {
+						void queryClient.invalidateQueries({
+							queryKey: queryKeys.linkInsights,
+						});
+					}
+				})
+				.catch((error: unknown) => {
+					finishHydration(false);
+					if (error instanceof DOMException && error.name === "AbortError") {
+						return;
+					}
+					console.warn("Profile hydration failed", error);
+				});
+		};
+		const timer = window.setTimeout(() => {
+			if ("requestIdleCallback" in window) {
+				idleId = window.requestIdleCallback(runHydration, { timeout: 2500 });
+			} else {
+				runHydration();
+			}
+		}, PROFILE_HYDRATION_DELAY_MS);
+
+		return () => {
+			controller.abort();
+			finishHydration(false);
+			window.clearTimeout(timer);
+			if (idleId !== null && "cancelIdleCallback" in window) {
+				window.cancelIdleCallback(idleId);
+			}
+		};
+	}, [data, queryClient]);
+
+	const items = useMemo(() => {
+		const query = search.trim().toLowerCase();
+		return (data?.items ?? []).filter((item) => {
+			if (!query) return true;
+			return [
+				item.title,
+				item.description,
+				item.displayUrl,
+				item.host,
+				item.topSharer?.handle,
+				...item.mentions.map((mention) => mention.commentText),
+			]
+				.filter(Boolean)
+				.some((value) => String(value).toLowerCase().includes(query));
+		});
+	}, [data?.items, search]);
+
+	const subtitle = useMemo(() => {
+		if (!data) return "Loading link memory...";
+		const label = kind === "videos" ? "video URLs" : "URLs";
+		return `${formatCompactNumber(data.stats.occurrences)} ${label} across ${formatCompactNumber(data.stats.groups)} groups`;
+	}, [data, kind]);
+
+	return {
+		kind,
+		setKind,
+		range,
+		setRange,
+		source,
+		setSource,
+		sort,
+		setSort,
+		search,
+		setSearch,
+		items,
+		subtitle,
+		loading: insightsQuery.isPending,
+		error: insightsQuery.error
+			? insightsQuery.error instanceof Error
+				? insightsQuery.error.message
+				: "Link insights unavailable"
+			: null,
+		retry: insightsQuery.refetch,
+	};
+}

package/src/components/links-model.ts

@@ -0,0 +1,198 @@
+import { queryKeys } from "#/lib/query-client";
+import type {
+	LinkInsightItem,
+	LinkInsightKind,
+	LinkInsightMention,
+	LinkInsightRange,
+	LinkInsightResponse,
+	LinkInsightSort,
+	LinkInsightSource,
+	ProfileRecord,
+	TweetMediaItem,
+} from "#/lib/types";
+
+export const INITIAL_VISIBLE_COMMENTS = 3;
+export const MORE_COMMENTS_BATCH = 6;
+export const LINK_INSIGHTS_LIMIT = 30;
+export const LINK_INSIGHTS_COMMENTS_LIMIT = 30;
+export const PROFILE_HYDRATION_LIMIT = 30;
+export const PROFILE_HYDRATION_DELAY_MS = 1200;
+export const LINK_INSIGHTS_CACHE_MAX_AGE_MS = 5 * 60_000;
+export const hydratingLinkProfileHandles = new Set<string>();
+
+export const ranges: Array<{ value: LinkInsightRange; label: string }> = [
+	{ value: "today", label: "Today" },
+	{ value: "week", label: "Week" },
+	{ value: "month", label: "Month" },
+	{ value: "year", label: "Year" },
+	{ value: "all", label: "All" },
+];
+
+export function itemTitle(item: LinkInsightItem) {
+	return item.title?.trim() || item.displayUrl;
+}
+
+export function itemSubtitle(item: LinkInsightItem) {
+	const description = item.description?.trim();
+	if (description) {
+		return description;
+	}
+	return item.displayUrl.split("?")[0] || item.displayUrl;
+}
+
+export function linkInsightQueryKey(
+	kind: LinkInsightKind,
+	range: LinkInsightRange,
+	sort: LinkInsightSort,
+	source: LinkInsightSource,
+) {
+	return [...queryKeys.linkInsights, { kind, range, sort, source }] as const;
+}
+
+export function linkInsightsUrl(
+	kind: LinkInsightKind,
+	range: LinkInsightRange,
+	sort: LinkInsightSort,
+	source: LinkInsightSource,
+) {
+	const url = new URL("/api/link-insights", window.location.origin);
+	url.searchParams.set("kind", kind);
+	url.searchParams.set("range", range);
+	url.searchParams.set("sort", sort);
+	url.searchParams.set("source", source);
+	url.searchParams.set("limit", String(LINK_INSIGHTS_LIMIT));
+	url.searchParams.set("commentsLimit", String(LINK_INSIGHTS_COMMENTS_LIMIT));
+	return url;
+}
+
+export async function fetchLinkInsights(
+	kind: LinkInsightKind,
+	range: LinkInsightRange,
+	sort: LinkInsightSort,
+	source: LinkInsightSource,
+	signal?: AbortSignal,
+) {
+	const response = await fetch(linkInsightsUrl(kind, range, sort, source), {
+		signal,
+	});
+	const data = (await response.json()) as LinkInsightResponse;
+	if (!response.ok) {
+		throw new Error("Link insights unavailable");
+	}
+	return data;
+}
+
+export function mentionHref(
+	mention: LinkInsightMention,
+	item: LinkInsightItem,
+) {
+	return mention.sourceUrl || mention.contentTweetUrl || item.url;
+}
+
+export function mentionCopy(mention: LinkInsightMention) {
+	return (
+		mention.commentText ||
+		mention.sharedContentText ||
+		mention.rawText ||
+		"Shared without comment"
+	);
+}
+
+export function isSameProfile(
+	left: ProfileRecord | null | undefined,
+	right: ProfileRecord | null | undefined,
+) {
+	return Boolean(left && right && left.id === right.id);
+}
+
+export function mediaImage(media: TweetMediaItem[]) {
+	return media.find((item) => item.thumbnailUrl || item.url) ?? null;
+}
+
+export function youtubeVideoId(rawUrl: string) {
+	try {
+		const url = new URL(rawUrl);
+		const host = url.hostname.toLowerCase().replace(/^www\./, "");
+		if (host === "youtu.be") {
+			return url.pathname.split("/").filter(Boolean)[0] ?? null;
+		}
+		if (!host.endsWith("youtube.com")) {
+			return null;
+		}
+		if (url.pathname === "/watch") {
+			return url.searchParams.get("v");
+		}
+		const parts = url.pathname.split("/").filter(Boolean);
+		if (parts[0] === "embed" || parts[0] === "shorts" || parts[0] === "live") {
+			return parts[1] ?? null;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+
+export function youtubeThumbnailUrl(rawUrl: string) {
+	const id = youtubeVideoId(rawUrl);
+	if (!id || !/^[\w-]{6,}$/.test(id)) {
+		return null;
+	}
+	return `https://i.ytimg.com/vi/${encodeURIComponent(id)}/hqdefault.jpg`;
+}
+
+export function commentCount(item: LinkInsightItem) {
+	return (
+		item.commentCount ??
+		item.mentions.filter((mention) => mention.hasComment).length
+	);
+}
+
+export function pureShareCount(item: LinkInsightItem) {
+	return (
+		item.pureShareCount ??
+		item.mentions.filter(
+			(mention) => mention.isPureShare || !mention.hasComment,
+		).length
+	);
+}
+
+export function isArchivePlaceholderProfile(profile: ProfileRecord) {
+	return (
+		/^id\d+$/i.test(profile.handle) &&
+		profile.displayName === profile.handle &&
+		profile.id === `profile_user_${profile.handle.slice(2)}`
+	);
+}
+
+export function profileNeedsHydration(
+	profile: ProfileRecord | null | undefined,
+) {
+	if (!profile?.handle || isArchivePlaceholderProfile(profile)) {
+		return false;
+	}
+	return !profile.avatarUrl || profile.followersCount === 0;
+}
+
+export function collectProfilesForHydration(data: LinkInsightResponse | null) {
+	const handles = new Set<string>();
+	for (const item of data?.items ?? []) {
+		for (const profile of [
+			item.topSharer,
+			...item.sharers,
+			...item.mentions.flatMap((mention) => [
+				mention.sharedBy,
+				mention.contentAuthor,
+				mention.participant,
+			]),
+		]) {
+			if (!profile || !profileNeedsHydration(profile)) {
+				continue;
+			}
+			handles.add(profile.handle.replace(/^@/, ""));
+			if (handles.size >= PROFILE_HYDRATION_LIMIT) {
+				return [...handles];
+			}
+		}
+	}
+	return [...handles];
+}

package/src/components/network-map-controller.ts

@@ -0,0 +1,84 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { useSelectedAccountId } from "./account-selection";
+import {
+	MAP_TYPES,
+	WORLD_VIEWPORT,
+	boundsContainFeature,
+	featureMatchesSearch,
+	fetchMap,
+	type MapViewport,
+} from "./network-map-model";
+import { fetchQueryEnvelope } from "#/lib/api-client";
+import type { NetworkMapKind } from "#/lib/network-map";
+import { queryKeys } from "#/lib/query-client";
+
+export function useNetworkMapController() {
+	const queryClient = useQueryClient();
+	const [type, setType] = useState<NetworkMapKind>("all");
+	const [viewport, setViewport] = useState<MapViewport>(WORLD_VIEWPORT);
+	const [visibleSearch, setVisibleSearch] = useState("");
+	const statusQuery = useQuery({
+		queryKey: queryKeys.status,
+		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
+	});
+	const selectedAccountId = useSelectedAccountId(statusQuery.data?.accounts);
+	const mapQueryKey = [
+		...queryKeys.networkMap,
+		{ type, selectedAccountId: selectedAccountId ?? null },
+	] as const;
+	const mapQuery = useQuery({
+		queryKey: mapQueryKey,
+		queryFn: ({ signal }) => fetchMap(type, false, selectedAccountId, signal),
+		staleTime: 5 * 60_000,
+	});
+	const refreshMutation = useMutation({
+		mutationFn: () => fetchMap(type, true, selectedAccountId),
+		onSuccess: (nextData) => {
+			queryClient.setQueryData(mapQueryKey, nextData);
+		},
+	});
+	const data = mapQuery.data ?? null;
+	const loading = mapQuery.isPending || refreshMutation.isPending;
+	const queryError = refreshMutation.error ?? mapQuery.error;
+
+	const visibleFeatures = useMemo(
+		() =>
+			(data?.features ?? [])
+				.slice()
+				.filter((feature) => boundsContainFeature(viewport.bounds, feature))
+				.sort(
+					(a, b) =>
+						b.properties.followersCount - a.properties.followersCount ||
+						a.properties.handle.localeCompare(b.properties.handle),
+				),
+		[data, viewport],
+	);
+	const filteredVisibleFeatures = useMemo(
+		() =>
+			visibleFeatures
+				.filter((feature) => featureMatchesSearch(feature, visibleSearch))
+				.slice(0, 160),
+		[visibleFeatures, visibleSearch],
+	);
+
+	return {
+		type,
+		setType,
+		viewport,
+		setViewport,
+		visibleSearch,
+		setVisibleSearch,
+		data,
+		loading,
+		error: queryError
+			? queryError instanceof Error
+				? queryError.message
+				: "Map unavailable"
+			: null,
+		refresh: refreshMutation.mutate,
+		visibleFeatures,
+		filteredVisibleFeatures,
+		mapTypes: MAP_TYPES,
+	};
+}