birdclaw 0.8.0 → 0.8.2

package/src/components/MarkdownViewer.tsx

@@ -1,12 +1,5 @@
-import {
-	Fragment,
-	type MouseEventHandler,
-	type ReactNode,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import { Fragment, type MouseEventHandler, type ReactNode } from "react";
+import { formatCompactNumber } from "#/lib/present";
 import type { PeriodDigestContext } from "#/lib/period-digest";
 import type { ProfileAnalysisContext } from "#/lib/profile-analysis";
 import { renderTweetPlainText } from "#/lib/tweet-render";
@@ -14,34 +7,17 @@ import type { ProfileRecord } from "#/lib/types";
 import { cx, tweetLinkClass, tweetMentionClass } from "#/lib/ui";
 import { safeHttpUrl } from "#/lib/url-safety";
 import { AvatarChip } from "./AvatarChip";
+import { useFloatingPreview } from "./FloatingPreview";
 import { ProfilePreview } from "./ProfilePreview";
+import { SmartTimestamp } from "./SmartTimestamp";
 
 type CitationTweet = PeriodDigestContext["tweets"][number];
 type CitationContext = PeriodDigestContext | ProfileAnalysisContext;
-type VerticalBounds = { top: number; bottom: number };
-
 type InlineLookup = {
 	tweetsById: Map<string, CitationTweet>;
 	profilesByHandle: Map<string, ProfileRecord>;
 };
 
-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 };
-}
-
 function normalizeTweetReference(value: string) {
 	return value
 		.trim()
@@ -134,13 +110,16 @@ function TweetSourceLink({
 	children,
 	href,
 	onClick,
+	describedBy,
 }: {
 	children: ReactNode;
 	href: string;
 	onClick?: MouseEventHandler<HTMLAnchorElement>;
+	describedBy?: string;
 }) {
 	return (
 		<a
+			aria-describedby={describedBy}
 			className="rounded-sm px-0.5 text-[var(--accent)] hover:bg-[var(--accent-soft)] hover:no-underline"
 			href={href}
 			onClick={onClick}
@@ -159,93 +138,73 @@ function TweetPreviewToken({
 	tweet: CitationTweet;
 	children: ReactNode;
 }) {
-	const [open, setOpen] = useState(false);
-	const [placeAbove, setPlaceAbove] = useState(false);
-	const shellRef = useRef<HTMLSpanElement | null>(null);
-	const cardRef = useRef<HTMLSpanElement | null>(null);
-
-	useLayoutEffect(() => {
-		if (!open) return;
-		const 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,
-				220,
-			);
-			const bounds = nearestVerticalClipBounds(shell);
-			const belowSpace = bounds.bottom - shellRect.bottom;
-			const aboveSpace = shellRect.top - bounds.top;
-			setPlaceAbove(belowSpace < cardHeight + 18 && aboveSpace >= belowSpace);
-		};
-		updatePlacement();
-		const frame = window.requestAnimationFrame(updatePlacement);
-		return () => window.cancelAnimationFrame(frame);
-	}, [open]);
-
-	function closePreview() {
-		setOpen(false);
-	}
-
-	const previewText = renderTweetPlainText(tweet.text, tweet.entities ?? {});
+	const preview = useFloatingPreview();
+
+	const article = tweet.entities?.article;
+	const renderedText = renderTweetPlainText(tweet.text, tweet.entities ?? {});
+	const previewText = article
+		? [article.title, article.previewText]
+				.filter(
+					(value, index, values): value is string =>
+						Boolean(value) && values.indexOf(value) === index,
+				)
+				.join("\n\n")
+		: renderedText;
 
 	return (
 		<span
-			ref={shellRef}
-			className="relative inline align-baseline"
-			onBlur={closePreview}
-			onFocus={() => setOpen(true)}
-			onPointerEnter={() => setOpen(true)}
-			onPointerLeave={closePreview}
+			ref={preview.referenceRef}
+			className="inline align-baseline"
+			{...preview.referenceProps}
 		>
 			<TweetSourceLink
+				describedBy={preview.open ? preview.floatingId : undefined}
 				href={getTweetUrl(tweet)}
 				onClick={(event) => {
-					closePreview();
+					preview.closePreview();
 					event.currentTarget.blur();
 				}}
 			>
 				{children}
 			</TweetSourceLink>
-			<span
-				ref={cardRef}
-				aria-hidden={!open}
-				className={cx(
-					"absolute left-1/2 z-40 w-[360px] -translate-x-1/2 rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-3 text-left text-[14px] leading-[1.4] text-[var(--ink)] shadow-[0_14px_40px_var(--shadow-strong)]",
-					placeAbove ? "bottom-[calc(100%+10px)]" : "top-[calc(100%+10px)]",
-					open ? "block" : "hidden",
-				)}
-			>
-				<span className="mb-2 flex items-center gap-2">
-					<AvatarChip
-						avatarUrl={tweet.authorProfile.avatarUrl}
-						hue={tweet.authorProfile.avatarHue}
-						name={tweet.name}
-						profileId={tweet.authorProfile.id}
-						size="small"
-					/>
-					<span className="min-w-0">
-						<span className="block truncate font-bold">{tweet.name}</span>
-						<span className="block truncate text-[12px] text-[var(--ink-soft)]">
-							@{tweet.author} · {formatShortTimestamp(tweet.createdAt)}
+			{preview.open ? (
+				<span
+					id={preview.floatingId}
+					ref={preview.floatingRef}
+					className="fixed z-40 w-[360px] overflow-y-auto rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-3 text-left text-[14px] leading-[1.4] text-[var(--ink)] shadow-[0_14px_40px_var(--shadow-strong)]"
+					role="tooltip"
+					style={preview.floatingStyle}
+					{...preview.floatingProps}
+				>
+					<span className="block" data-floating-preview-content>
+						<span className="mb-2 flex items-center gap-2">
+							<AvatarChip
+								avatarUrl={tweet.authorProfile.avatarUrl}
+								hue={tweet.authorProfile.avatarHue}
+								name={tweet.name}
+								profileId={tweet.authorProfile.id}
+								size="small"
+							/>
+							<span className="min-w-0">
+								<span className="block truncate font-bold">{tweet.name}</span>
+								<span className="block truncate text-[12px] text-[var(--ink-soft)]">
+									@{tweet.author} · <SmartTimestamp value={tweet.createdAt} />
+								</span>
+							</span>
+						</span>
+						<span className="line-clamp-6 whitespace-pre-wrap [overflow-wrap:anywhere]">
+							{previewText}
+						</span>
+						<span className="mt-2 flex gap-3 text-[12px] text-[var(--ink-soft)]">
+							<span>{tweet.source}</span>
+							{tweet.likeCount > 0 ? (
+								<span>{formatCompactNumber(tweet.likeCount)} likes</span>
+							) : null}
+							{tweet.needsReply ? <span>reply open</span> : null}
 						</span>
 					</span>
 				</span>
-				<span className="line-clamp-6 whitespace-pre-wrap [overflow-wrap:anywhere]">
-					{previewText}
-				</span>
-				<span className="mt-2 flex gap-3 text-[12px] text-[var(--ink-soft)]">
-					<span>{tweet.source}</span>
-					{tweet.likeCount > 0 ? (
-						<span>{formatCompactNumber(tweet.likeCount)} likes</span>
-					) : null}
-					{tweet.needsReply ? <span>reply open</span> : null}
-				</span>
-			</span>
+			) : null}
 		</span>
 	);
 }

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,7 @@ 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 { useFloatingPreview } from "./FloatingPreview";
 
 function ProfilePreviewBio({ profile }: { profile: ProfileRecord }) {
 	const segments = collectTweetSegmentsForText(
@@ -98,74 +74,56 @@ 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();
 
 	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/SmartTimestamp.tsx

@@ -0,0 +1,72 @@
+import { useSyncExternalStore } from "react";
+import {
+	formatExactTimestamp,
+	formatShortTimestamp,
+	formatSmartTimestamp,
+} from "#/lib/present";
+
+const CLOCK_INTERVAL_MS = 30_000;
+
+type ClockSnapshot = number | null;
+
+const listeners = new Set<() => void>();
+let currentNow = Date.now();
+let clockInterval: ReturnType<typeof setInterval> | null = null;
+
+function updateClock() {
+	currentNow = Date.now();
+	for (const listener of listeners) listener();
+}
+
+function subscribeToClock(listener: () => void) {
+	listeners.add(listener);
+
+	if (clockInterval === null) {
+		currentNow = Date.now();
+		clockInterval = setInterval(updateClock, CLOCK_INTERVAL_MS);
+	}
+
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0 && clockInterval !== null) {
+			clearInterval(clockInterval);
+			clockInterval = null;
+		}
+	};
+}
+
+function getClockSnapshot(): ClockSnapshot {
+	return currentNow;
+}
+
+function getServerClockSnapshot(): ClockSnapshot {
+	return null;
+}
+
+export function SmartTimestamp({
+	className,
+	value,
+}: {
+	className?: string;
+	value: string;
+}) {
+	const now = useSyncExternalStore(
+		subscribeToClock,
+		getClockSnapshot,
+		getServerClockSnapshot,
+	);
+	const exactTimestamp = formatExactTimestamp(value);
+
+	return (
+		<time
+			aria-label={exactTimestamp}
+			className={className}
+			dateTime={value}
+			title={exactTimestamp}
+		>
+			{now === null
+				? formatShortTimestamp(value)
+				: formatSmartTimestamp(value, now)}
+		</time>
+	);
+}

package/src/components/TimelineCard.tsx

@@ -8,8 +8,11 @@ import {
 	Repeat2,
 	UserSearch,
 } from "lucide-react";
-import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
-import { normalizeTweetUrlEntityRangeForText } from "#/lib/tweet-render";
+import { formatCompactNumber } from "#/lib/present";
+import {
+	isTweetArticleUrlEntity,
+	normalizeTweetUrlEntityRangeForText,
+} from "#/lib/tweet-render";
 import type {
 	TimelineItem,
 	TweetEntities,
@@ -41,6 +44,8 @@ import { ConversationThread } from "./ConversationThread";
 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";
 
@@ -212,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);
 	});
@@ -276,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}
@@ -312,9 +323,10 @@ export function TimelineCard({
 						</span>
 					</ProfilePreview>
 					<span className={feedRowDotClass}>·</span>
-					<span className={feedRowTimestampClass}>
-						{formatShortTimestamp(displayTweet.createdAt)}
-					</span>
+					<SmartTimestamp
+						className={feedRowTimestampClass}
+						value={displayTweet.createdAt}
+					/>
 					{canReply || hasConversation ? (
 						<span className="ml-auto inline-flex items-center gap-1">
 							{hasConversation ? (
@@ -361,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)}`}
@@ -378,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>
+	);
+}

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/useDebouncedValue.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delayMs: number) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timeout = window.setTimeout(() => setDebouncedValue(value), delayMs);
+		return () => window.clearTimeout(timeout);
+	}, [delayMs, value]);
+
+	return debouncedValue;
+}