birdclaw 0.8.1 → 0.8.3

package/src/components/ProfileAnalysisClient.ts

@@ -0,0 +1,191 @@
+import type {
+	ProfileAnalysisContext,
+	ProfileAnalysisRunResult,
+} from "#/lib/profile-analysis";
+import type { ProfileRecord } from "#/lib/types";
+
+export interface ProfileAnalysisRequestOptions {
+	refresh: boolean;
+	maxTweets: number;
+	maxPages: number;
+	maxConversations: number;
+	maxConversationPages: number;
+}
+
+export const DEFAULT_PROFILE_ANALYSIS_LIMITS = {
+	maxTweets: 10000,
+	maxPages: 100,
+	maxConversations: 80,
+	maxConversationPages: 3,
+} as const;
+
+const PROFILE_HYDRATION_LIMIT = 50;
+const PROFILE_MENTION_RE = /(^|[^\w@./])@([A-Za-z0-9_]{1,15})\b/g;
+
+export function normalizeProfileHandle(value: string) {
+	return value.trim().replace(/^@/, "").toLowerCase();
+}
+
+export function handlesFromText(value: string) {
+	return Array.from(value.matchAll(PROFILE_MENTION_RE)).map(
+		(match) => match[2],
+	);
+}
+
+export function knownProfileHandles(context: ProfileAnalysisContext) {
+	const handles = new Set<string>();
+	handles.add(normalizeProfileHandle(context.profile.handle));
+	for (const profile of context.profiles ?? []) {
+		handles.add(normalizeProfileHandle(profile.handle));
+	}
+	for (const tweet of context.conversations) {
+		handles.add(normalizeProfileHandle(tweet.author));
+	}
+	return handles;
+}
+
+export function collectProfileAnalysisHydrationHandles({
+	context,
+	analysis,
+	markdown,
+}: {
+	context: ProfileAnalysisContext;
+	analysis?: ProfileAnalysisRunResult["analysis"];
+	markdown?: string;
+}) {
+	const handles = new Set<string>();
+	const known = knownProfileHandles(context);
+	const add = (value: string | undefined) => {
+		if (!value) return;
+		const handle = normalizeProfileHandle(value);
+		if (!/^[a-z0-9_]{1,15}$/.test(handle) || known.has(handle)) return;
+		handles.add(handle);
+	};
+
+	for (const handle of analysis?.sourceHandles ?? []) add(handle);
+	for (const theme of analysis?.themes ?? []) {
+		for (const handle of theme.handles) add(handle);
+	}
+	if (markdown) {
+		for (const handle of handlesFromText(markdown)) add(handle);
+	}
+	for (const handle of handlesFromText(context.profile.bio)) add(handle);
+	for (const tweet of context.tweets) {
+		for (const handle of handlesFromText(tweet.text)) add(handle);
+	}
+	for (const tweet of context.conversations) {
+		for (const handle of handlesFromText(tweet.text)) add(handle);
+		for (const handle of handlesFromText(tweet.bio)) add(handle);
+	}
+
+	return [...handles].slice(0, PROFILE_HYDRATION_LIMIT);
+}
+
+export function applyHydratedProfilesToProfileAnalysisContext(
+	context: ProfileAnalysisContext,
+	profiles: ProfileRecord[],
+) {
+	const existing = new Map<string, ProfileRecord>();
+	for (const profile of context.profiles ?? []) {
+		existing.set(normalizeProfileHandle(profile.handle), profile);
+	}
+	for (const profile of profiles) {
+		existing.set(normalizeProfileHandle(profile.handle), profile);
+	}
+	return {
+		...context,
+		profiles: [...existing.values()],
+	};
+}
+
+export async function hydrateProfileAnalysisContext({
+	context,
+	analysis,
+	markdown,
+	requestedHandles,
+}: {
+	context: ProfileAnalysisContext;
+	analysis?: ProfileAnalysisRunResult["analysis"];
+	markdown?: string;
+	requestedHandles?: Set<string>;
+}) {
+	const handles = collectProfileAnalysisHydrationHandles({
+		context,
+		analysis,
+		markdown,
+	}).filter((handle) => !requestedHandles?.has(handle));
+	if (handles.length === 0) return context;
+	for (const handle of handles) {
+		requestedHandles?.add(handle);
+	}
+	const url = new URL("/api/profile-hydrate", window.location.origin);
+	url.searchParams.set("handles", handles.join(","));
+	const response = await fetch(url);
+	if (!response.ok) return context;
+	const payload = (await response.json()) as {
+		results?: Array<{ status?: string; profile?: ProfileRecord }>;
+	};
+	const profiles = (payload.results ?? [])
+		.filter((item) => item.status === "hit" && item.profile)
+		.map((item) => item.profile as ProfileRecord);
+	return profiles.length > 0
+		? applyHydratedProfilesToProfileAnalysisContext(context, profiles)
+		: context;
+}
+
+export function profileAnalysisUrl(
+	handle: string,
+	options: ProfileAnalysisRequestOptions,
+) {
+	const params = new URLSearchParams();
+	params.set("handle", handle);
+	params.set("maxTweets", String(options.maxTweets));
+	params.set("maxPages", String(options.maxPages));
+	params.set("maxConversations", String(options.maxConversations));
+	params.set("maxConversationPages", String(options.maxConversationPages));
+	if (options.refresh) {
+		params.set("refresh", "true");
+	}
+	return `/api/profile-analysis?${params.toString()}`;
+}
+
+export async function profileAnalysisRequestError(response: Response) {
+	const status = `${String(response.status)}${response.statusText ? ` ${response.statusText}` : ""}`;
+	let detail = "";
+	try {
+		const contentType = response.headers.get("content-type") ?? "";
+		if (contentType.includes("application/json")) {
+			const payload = (await response.json()) as {
+				error?: unknown;
+				message?: unknown;
+			};
+			if (typeof payload.message === "string") detail = payload.message;
+			else if (typeof payload.error === "string") detail = payload.error;
+		} else {
+			detail = (await response.text()).trim();
+		}
+	} catch {
+		detail = "";
+	}
+	return new Error(
+		detail
+			? `Profile analysis failed (${status}): ${detail}`
+			: `Profile analysis failed (${status})`,
+	);
+}
+
+export function formatProfileAnalysisCounts(
+	context: ProfileAnalysisContext | null,
+) {
+	if (!context) return "xurl profile backfill with cached AI analysis.";
+	return [
+		context.fetchCached ? "cached backfill" : "fresh xurl backfill",
+		`${String(context.counts.tweets)} tweets`,
+		`${String(context.counts.conversationTweets)} conversation tweets`,
+		`${String(context.counts.conversationsScanned)} conversations`,
+	].join(" · ");
+}
+
+export function cleanProfileHandle(value: string) {
+	return value.trim().replace(/^@/, "");
+}

package/src/components/ProfileAnalysisStream.tsx

@@ -9,13 +9,22 @@ import type {
 import type { ProfileRecord } from "#/lib/types";
 import { errorCopyClass } from "#/lib/ui";
 
-export interface ProfileAnalysisRequestOptions {
-	refresh: boolean;
-	maxTweets: number;
-	maxPages: number;
-	maxConversations: number;
-	maxConversationPages: number;
-}
+import {
+	DEFAULT_PROFILE_ANALYSIS_LIMITS,
+	applyHydratedProfilesToProfileAnalysisContext,
+	cleanProfileHandle,
+	hydrateProfileAnalysisContext,
+	normalizeProfileHandle,
+	profileAnalysisRequestError,
+	profileAnalysisUrl,
+} from "#/components/ProfileAnalysisClient";
+export {
+	DEFAULT_PROFILE_ANALYSIS_LIMITS,
+	cleanProfileHandle,
+	formatProfileAnalysisCounts,
+	profileAnalysisRequestError,
+	profileAnalysisUrl,
+} from "#/components/ProfileAnalysisClient";
 
 export interface ProfileAnalysisState {
 	context: ProfileAnalysisContext | null;
@@ -27,184 +36,6 @@ export interface ProfileAnalysisState {
 	status: string;
 }
 
-export const DEFAULT_PROFILE_ANALYSIS_LIMITS = {
-	maxTweets: 10000,
-	maxPages: 100,
-	maxConversations: 80,
-	maxConversationPages: 3,
-} as const;
-
-const PROFILE_HYDRATION_LIMIT = 50;
-const PROFILE_MENTION_RE = /(^|[^\w@./])@([A-Za-z0-9_]{1,15})\b/g;
-
-function normalizeProfileHandle(value: string) {
-	return value.trim().replace(/^@/, "").toLowerCase();
-}
-
-function handlesFromText(value: string) {
-	return Array.from(value.matchAll(PROFILE_MENTION_RE)).map(
-		(match) => match[2],
-	);
-}
-
-function knownProfileHandles(context: ProfileAnalysisContext) {
-	const handles = new Set<string>();
-	handles.add(normalizeProfileHandle(context.profile.handle));
-	for (const profile of context.profiles ?? []) {
-		handles.add(normalizeProfileHandle(profile.handle));
-	}
-	for (const tweet of context.conversations) {
-		handles.add(normalizeProfileHandle(tweet.author));
-	}
-	return handles;
-}
-
-function collectProfileAnalysisHydrationHandles({
-	context,
-	analysis,
-	markdown,
-}: {
-	context: ProfileAnalysisContext;
-	analysis?: ProfileAnalysisRunResult["analysis"];
-	markdown?: string;
-}) {
-	const handles = new Set<string>();
-	const known = knownProfileHandles(context);
-	const add = (value: string | undefined) => {
-		if (!value) return;
-		const handle = normalizeProfileHandle(value);
-		if (!/^[a-z0-9_]{1,15}$/.test(handle) || known.has(handle)) return;
-		handles.add(handle);
-	};
-
-	for (const handle of analysis?.sourceHandles ?? []) add(handle);
-	for (const theme of analysis?.themes ?? []) {
-		for (const handle of theme.handles) add(handle);
-	}
-	if (markdown) {
-		for (const handle of handlesFromText(markdown)) add(handle);
-	}
-	for (const handle of handlesFromText(context.profile.bio)) add(handle);
-	for (const tweet of context.tweets) {
-		for (const handle of handlesFromText(tweet.text)) add(handle);
-	}
-	for (const tweet of context.conversations) {
-		for (const handle of handlesFromText(tweet.text)) add(handle);
-		for (const handle of handlesFromText(tweet.bio)) add(handle);
-	}
-
-	return [...handles].slice(0, PROFILE_HYDRATION_LIMIT);
-}
-
-function applyHydratedProfilesToProfileAnalysisContext(
-	context: ProfileAnalysisContext,
-	profiles: ProfileRecord[],
-) {
-	const existing = new Map<string, ProfileRecord>();
-	for (const profile of context.profiles ?? []) {
-		existing.set(normalizeProfileHandle(profile.handle), profile);
-	}
-	for (const profile of profiles) {
-		existing.set(normalizeProfileHandle(profile.handle), profile);
-	}
-	return {
-		...context,
-		profiles: [...existing.values()],
-	};
-}
-
-async function hydrateProfileAnalysisContext({
-	context,
-	analysis,
-	markdown,
-	requestedHandles,
-}: {
-	context: ProfileAnalysisContext;
-	analysis?: ProfileAnalysisRunResult["analysis"];
-	markdown?: string;
-	requestedHandles?: Set<string>;
-}) {
-	const handles = collectProfileAnalysisHydrationHandles({
-		context,
-		analysis,
-		markdown,
-	}).filter((handle) => !requestedHandles?.has(handle));
-	if (handles.length === 0) return context;
-	for (const handle of handles) {
-		requestedHandles?.add(handle);
-	}
-	const url = new URL("/api/profile-hydrate", window.location.origin);
-	url.searchParams.set("handles", handles.join(","));
-	const response = await fetch(url);
-	if (!response.ok) return context;
-	const payload = (await response.json()) as {
-		results?: Array<{ status?: string; profile?: ProfileRecord }>;
-	};
-	const profiles = (payload.results ?? [])
-		.filter((item) => item.status === "hit" && item.profile)
-		.map((item) => item.profile as ProfileRecord);
-	return profiles.length > 0
-		? applyHydratedProfilesToProfileAnalysisContext(context, profiles)
-		: context;
-}
-
-export function profileAnalysisUrl(
-	handle: string,
-	options: ProfileAnalysisRequestOptions,
-) {
-	const params = new URLSearchParams();
-	params.set("handle", handle);
-	params.set("maxTweets", String(options.maxTweets));
-	params.set("maxPages", String(options.maxPages));
-	params.set("maxConversations", String(options.maxConversations));
-	params.set("maxConversationPages", String(options.maxConversationPages));
-	if (options.refresh) {
-		params.set("refresh", "true");
-	}
-	return `/api/profile-analysis?${params.toString()}`;
-}
-
-export async function profileAnalysisRequestError(response: Response) {
-	const status = `${String(response.status)}${response.statusText ? ` ${response.statusText}` : ""}`;
-	let detail = "";
-	try {
-		const contentType = response.headers.get("content-type") ?? "";
-		if (contentType.includes("application/json")) {
-			const payload = (await response.json()) as {
-				error?: unknown;
-				message?: unknown;
-			};
-			if (typeof payload.message === "string") detail = payload.message;
-			else if (typeof payload.error === "string") detail = payload.error;
-		} else {
-			detail = (await response.text()).trim();
-		}
-	} catch {
-		detail = "";
-	}
-	return new Error(
-		detail
-			? `Profile analysis failed (${status}): ${detail}`
-			: `Profile analysis failed (${status})`,
-	);
-}
-
-export function formatProfileAnalysisCounts(
-	context: ProfileAnalysisContext | null,
-) {
-	if (!context) return "xurl profile backfill with cached AI analysis.";
-	return [
-		context.fetchCached ? "cached backfill" : "fresh xurl backfill",
-		`${String(context.counts.tweets)} tweets`,
-		`${String(context.counts.conversationTweets)} conversation tweets`,
-		`${String(context.counts.conversationsScanned)} conversations`,
-	].join(" · ");
-}
-
-export function cleanProfileHandle(value: string) {
-	return value.trim().replace(/^@/, "");
-}
-
 export function useProfileAnalysisStream(handle: string): ProfileAnalysisState {
 	const [markdown, setMarkdown] = useState("");
 	const [context, setContext] = useState<ProfileAnalysisContext | null>(null);

package/src/components/ProfilePreview.tsx

@@ -1,10 +1,4 @@
-import {
-	Fragment,
-	type ReactNode,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
+import { Fragment, type ReactNode } from "react";
 import { formatCompactNumber } from "#/lib/present";
 import {
 	collectTweetSegmentsForText,
@@ -25,25 +19,8 @@ import {
 } from "#/lib/ui";
 import { safeHttpUrl } from "#/lib/url-safety";
 import { AvatarChip } from "./AvatarChip";
-
-type VerticalBounds = { top: number; bottom: number };
-
-function nearestVerticalClipBounds(element: HTMLElement): VerticalBounds {
-	let top = 0;
-	let bottom = window.innerHeight;
-	for (
-		let current = element.parentElement;
-		current;
-		current = current.parentElement
-	) {
-		const style = window.getComputedStyle(current);
-		if (!/(auto|scroll|hidden|clip)/.test(style.overflowY)) continue;
-		const rect = current.getBoundingClientRect();
-		top = Math.max(top, rect.top);
-		bottom = Math.min(bottom, rect.bottom);
-	}
-	return { top, bottom };
-}
+import { useAvatarPreload } from "./AvatarPreload";
+import { useFloatingPreview } from "./FloatingPreview";
 
 function ProfilePreviewBio({ profile }: { profile: ProfileRecord }) {
 	const segments = collectTweetSegmentsForText(
@@ -98,74 +75,57 @@ export function ProfilePreview({
 	children: ReactNode;
 	className?: string;
 }) {
-	const [placeAbove, setPlaceAbove] = useState(false);
-	const shellRef = useRef<HTMLSpanElement | null>(null);
-	const cardRef = useRef<HTMLSpanElement | null>(null);
-
-	function updatePlacement() {
-		const shell = shellRef.current;
-		if (!shell) return;
-		const shellRect = shell.getBoundingClientRect();
-		const card = cardRef.current;
-		const cardRect = card?.getBoundingClientRect();
-		const cardHeight = Math.max(
-			card?.offsetHeight ?? 0,
-			cardRect?.height ?? 0,
-			180,
-		);
-		const bounds = nearestVerticalClipBounds(shell);
-		const belowSpace = bounds.bottom - shellRect.bottom;
-		const aboveSpace = shellRect.top - bounds.top;
-		setPlaceAbove(belowSpace < cardHeight + 18 && aboveSpace >= belowSpace);
-	}
-
-	useLayoutEffect(() => {
-		updatePlacement();
-		const frame = window.requestAnimationFrame(updatePlacement);
-		return () => window.cancelAnimationFrame(frame);
-	}, []);
+	const preview = useFloatingPreview();
+	useAvatarPreload(preview.referenceRef, profile.id, profile.avatarUrl);
 
 	return (
 		<span
-			ref={shellRef}
-			className={cx(profilePreviewClass, "group", className)}
-			onFocus={updatePlacement}
-			onPointerEnter={updatePlacement}
+			ref={preview.referenceRef}
+			className={cx(profilePreviewClass, className)}
+			{...preview.referenceProps}
 		>
 			<a
+				aria-controls={preview.open ? preview.floatingId : undefined}
+				aria-expanded={preview.open}
 				className={profilePreviewTriggerClass}
 				href={`/profiles/${encodeURIComponent(profile.handle)}`}
 			>
 				{children}
 			</a>
-			<span
-				ref={cardRef}
-				className={cx(
-					profilePreviewCardClass,
-					placeAbove
-						? "bottom-[calc(100%+8px)] -translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0"
-						: "top-[calc(100%+8px)] translate-y-1 group-hover:translate-y-0 group-focus-within:translate-y-0",
-				)}
-			>
-				<span className={profilePreviewHeaderClass}>
-					<AvatarChip
-						avatarUrl={profile.avatarUrl}
-						hue={profile.avatarHue}
-						name={profile.displayName}
-						profileId={profile.id}
-					/>
-					<span className="flex min-w-0 flex-col">
-						<span className={profilePreviewNameClass}>
-							{profile.displayName}
+			{preview.open ? (
+				<span
+					aria-label={`${profile.displayName} profile preview`}
+					id={preview.floatingId}
+					ref={preview.floatingRef}
+					className={profilePreviewCardClass}
+					role="group"
+					style={preview.floatingStyle}
+					{...preview.floatingProps}
+				>
+					<span className="grid gap-2" data-floating-preview-content>
+						<span className={profilePreviewHeaderClass}>
+							<AvatarChip
+								avatarUrl={profile.avatarUrl}
+								hue={profile.avatarHue}
+								name={profile.displayName}
+								profileId={profile.id}
+							/>
+							<span className="flex min-w-0 flex-col">
+								<span className={profilePreviewNameClass}>
+									{profile.displayName}
+								</span>
+								<span className={profilePreviewHandleClass}>
+									@{profile.handle}
+								</span>
+							</span>
+						</span>
+						{profile.bio ? <ProfilePreviewBio profile={profile} /> : null}
+						<span className={profilePreviewMetaClass}>
+							{formatCompactNumber(profile.followersCount)} followers
 						</span>
-						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
 					</span>
 				</span>
-				{profile.bio ? <ProfilePreviewBio profile={profile} /> : null}
-				<span className={profilePreviewMetaClass}>
-					{formatCompactNumber(profile.followersCount)} followers
-				</span>
-			</span>
+			) : null}
 		</span>
 	);
 }

package/src/components/TimelineCard.tsx

@@ -9,7 +9,10 @@ import {
 	UserSearch,
 } from "lucide-react";
 import { formatCompactNumber } from "#/lib/present";
-import { normalizeTweetUrlEntityRangeForText } from "#/lib/tweet-render";
+import {
+	isTweetArticleUrlEntity,
+	normalizeTweetUrlEntityRangeForText,
+} from "#/lib/tweet-render";
 import type {
 	TimelineItem,
 	TweetEntities,
@@ -42,6 +45,7 @@ import { EmbeddedTweetCard } from "./EmbeddedTweetCard";
 import { LinkPreviewCard } from "./LinkPreviewCard";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -213,6 +217,9 @@ function getVisibleUrlCards(
 ) {
 	return (entities.urls ?? []).filter((entry) => {
 		if (isUnresolvedShortUrlEntity(entry)) return false;
+		if (entities.article && isTweetArticleUrlEntity(entry, entities.article)) {
+			return false;
+		}
 		if (!quotedTweetId) return true;
 		return !entry.expandedUrl.includes(quotedTweetId);
 	});
@@ -277,7 +284,10 @@ export function TimelineCard({
 
 	return (
 		<article
-			className={cx(feedRowClass, "cursor-pointer")}
+			className={cx(
+				feedRowClass,
+				"cursor-pointer [content-visibility:auto] [contain-intrinsic-size:auto_280px]",
+			)}
 			data-perf="timeline-card"
 			onFocus={conversation.prefetch}
 			onMouseEnter={conversation.prefetch}
@@ -363,6 +373,9 @@ export function TimelineCard({
 							text={displayTweet.text}
 						/>
 						<TweetMediaGrid items={displayTweet.media} />
+						{displayTweet.entities.article ? (
+							<TweetArticleCard article={displayTweet.entities.article} />
+						) : null}
 						{visibleUrlCards.map((entry, index) => (
 							<LinkPreviewCard
 								key={`${entry.expandedUrl}-${String(index)}`}
@@ -380,6 +393,9 @@ export function TimelineCard({
 							text={item.text}
 						/>
 						<TweetMediaGrid items={item.media} />
+						{item.entities.article ? (
+							<TweetArticleCard article={item.entities.article} />
+						) : null}
 						{item.replyToTweet ? (
 							<div className={embeddedCardClass}>
 								<EmbeddedTweetCard

package/src/components/TweetArticleCard.tsx

@@ -0,0 +1,66 @@
+import { BookOpen, ExternalLink } from "lucide-react";
+import type { TweetArticle } from "#/lib/types";
+import {
+	linkPreviewCardClass,
+	linkPreviewDescClass,
+	linkPreviewHostClass,
+	linkPreviewTitleClass,
+} from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
+
+function safeArticleImageUrl(value: string | undefined) {
+	const url = safeHttpUrl(value);
+	if (!url) return null;
+	try {
+		return new URL(url).hostname === "pbs.twimg.com" ? url : null;
+	} catch {
+		return null;
+	}
+}
+
+export function TweetArticleCard({ article }: { article: TweetArticle }) {
+	const href = safeHttpUrl(article.url);
+	if (!href) return null;
+	const imageUrl = safeArticleImageUrl(article.coverImageUrl);
+
+	return (
+		<a
+			aria-label={`Read article: ${article.title}`}
+			className={linkPreviewCardClass}
+			data-perf="tweet-article-card"
+			href={href}
+			rel="noreferrer"
+			target="_blank"
+		>
+			<div className="flex min-w-0 flex-1 flex-col justify-center gap-1 px-3.5 py-3">
+				<div className="flex min-w-0 items-center gap-2">
+					<BookOpen
+						aria-hidden="true"
+						className="size-3.5 shrink-0 text-[var(--ink-soft)]"
+						strokeWidth={1.8}
+					/>
+					<span className={linkPreviewHostClass}>Article on X</span>
+					<ExternalLink
+						aria-hidden="true"
+						className="size-3.5 shrink-0 text-[var(--ink-soft)] opacity-0 transition-opacity group-hover/link-preview:opacity-100"
+						strokeWidth={1.8}
+					/>
+				</div>
+				<span className={linkPreviewTitleClass}>{article.title}</span>
+				{article.previewText ? (
+					<span className={linkPreviewDescClass}>{article.previewText}</span>
+				) : null}
+			</div>
+			{imageUrl ? (
+				<div className="flex aspect-[1.45] w-40 shrink-0 overflow-hidden border-l border-[var(--line)] bg-[var(--bg-soft)] max-[720px]:w-28">
+					<img
+						alt=""
+						className="size-full object-cover transition-transform duration-200 group-hover/link-preview:scale-[1.03]"
+						loading="lazy"
+						src={imageUrl}
+					/>
+				</div>
+			) : null}
+		</a>
+	);
+}