birdclaw 0.4.0 → 0.5.0

package/src/components/InboxCard.tsx

@@ -1,29 +1,27 @@
 import { Link } from "@tanstack/react-router";
+import { ExternalLink, MessageCircle } from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { InboxItem } from "#/lib/types";
 import {
-	actionButtonClass,
-	actionRowClass,
-	bodyCopyClass,
-	cardFooterClass,
-	cardHeaderClass,
 	composerBarClass,
 	composerInputClass,
 	composerShellClass,
-	contentCardClass,
 	cx,
-	eyebrowClass,
-	identityBlockClass,
-	identityRowClass,
+	feedRowBodyClass,
+	feedRowClass,
+	feedRowDotClass,
+	feedRowHandleClass,
+	feedRowHeaderClass,
+	feedRowNameClass,
+	feedRowTextClass,
+	feedRowTimestampClass,
 	inboxAnalysisClass,
-	inboxTitleClass,
-	metaStackClass,
-	metricRowClass,
 	mutedDotClass,
-	navLinkClass,
 	pillAlertClass,
 	pillClass,
 	pillSoftClass,
+	primaryButtonClass,
+	secondaryButtonClass,
 	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
@@ -44,93 +42,97 @@ export function InboxCard({
 	onReplySend: () => void;
 }) {
 	return (
-		<article className={cx(contentCardClass, "inbox-card")}>
-			<div className={cardHeaderClass}>
-				<div className={identityBlockClass}>
-					<AvatarChip
-						avatarUrl={item.participant.avatarUrl}
-						hue={item.participant.avatarHue}
-						name={item.participant.displayName}
-						profileId={item.participant.id}
-					/>
-					<div>
-						<div className={identityRowClass}>
-							<strong>{item.participant.displayName}</strong>
-							<span>@{item.participant.handle}</span>
-							<span className={mutedDotClass} />
-							<span>
-								{formatCompactNumber(item.participant.followersCount)} followers
-							</span>
-						</div>
-					</div>
-				</div>
-				<div className={metaStackClass}>
-					<span className={cx(pillClass, pillSoftClass)}>
-						{item.entityKind}
-					</span>
-					<span className={cx(pillClass, pillAlertClass)}>
-						score {item.score}
+		<article className={cx(feedRowClass, "items-start")}>
+			<AvatarChip
+				avatarUrl={item.participant.avatarUrl}
+				hue={item.participant.avatarHue}
+				name={item.participant.displayName}
+				profileId={item.participant.id}
+			/>
+			<div className={feedRowBodyClass}>
+				<header className={feedRowHeaderClass}>
+					<span className="flex min-w-0 items-center gap-1.5">
+						<span className={feedRowNameClass}>
+							{item.participant.displayName}
+						</span>
+						<span className={feedRowHandleClass}>
+							@{item.participant.handle}
+						</span>
 					</span>
-					<span className={timestampClass}>
+					<span className={feedRowDotClass}>·</span>
+					<span className={feedRowTimestampClass}>
 						{formatShortTimestamp(item.createdAt)}
 					</span>
+					<span className="ml-auto flex items-center gap-1.5">
+						<span className={cx(pillClass, pillSoftClass)}>
+							{item.entityKind}
+						</span>
+						<span className={cx(pillClass, pillAlertClass)}>
+							score {item.score}
+						</span>
+					</span>
+				</header>
+				<h3 className="text-[15px] font-bold text-[var(--ink)]">
+					{item.title}
+				</h3>
+				<p className={feedRowTextClass}>{item.text}</p>
+				<div className={inboxAnalysisClass}>
+					<strong className="text-[var(--ink)]">{item.summary}</strong>
+					<p>{item.reasoning}</p>
 				</div>
-			</div>
-			<p className={eyebrowClass}>ai triage</p>
-			<h3 className={inboxTitleClass}>{item.title}</h3>
-			<p className={bodyCopyClass}>{item.text}</p>
-			<div className={inboxAnalysisClass}>
-				<strong>{item.summary}</strong>
-				<p>{item.reasoning}</p>
-			</div>
-			<div className={cardFooterClass}>
-				<div className={metricRowClass}>
-					<span>{item.source}</span>
-					<span>influence {item.influenceScore}</span>
-					<span>{item.needsReply ? "needs reply" : "resolved"}</span>
-				</div>
-				<div className={actionRowClass}>
-					<button
-						className={navLinkClass}
-						onClick={onReplyToggle}
-						type="button"
-					>
-						{isReplying ? "Close reply" : "Reply"}
-					</button>
-					<Link
-						className={actionButtonClass}
-						to={item.entityKind === "dm" ? "/dms" : "/mentions"}
-					>
-						Open
-					</Link>
-				</div>
-			</div>
-			{isReplying ? (
-				<div className={composerShellClass}>
-					<textarea
-						className={composerInputClass}
-						onChange={(event) => onReplyChange(event.target.value)}
-						placeholder={
-							item.entityKind === "dm"
-								? `Reply to @${item.participant.handle}`
-								: `Reply to mention from @${item.participant.handle}`
-						}
-						rows={4}
-						value={replyDraft}
-					/>
-					<div className={composerBarClass}>
-						<span className={timestampClass}>Send from inbox</span>
+				<div className="mt-2 flex items-center justify-between gap-3 text-[13px] text-[var(--ink-soft)]">
+					<div className="flex flex-wrap items-center gap-2">
+						<span>{item.source}</span>
+						<span className={mutedDotClass} />
+						<span>influence {formatCompactNumber(item.influenceScore)}</span>
+						<span className={mutedDotClass} />
+						<span>{item.needsReply ? "needs reply" : "resolved"}</span>
+					</div>
+					<div className="flex items-center gap-2">
 						<button
-							className={actionButtonClass}
-							disabled={!replyDraft.trim()}
-							onClick={onReplySend}
+							className={secondaryButtonClass}
+							onClick={onReplyToggle}
 							type="button"
 						>
-							Send
+							<MessageCircle className="size-4" strokeWidth={2} />
+							{isReplying ? "Close reply" : "Reply"}
 						</button>
+						<Link
+							className={cx(secondaryButtonClass, "gap-1.5")}
+							to={item.entityKind === "dm" ? "/dms" : "/mentions"}
+						>
+							<ExternalLink className="size-4" strokeWidth={2} />
+							Open
+						</Link>
 					</div>
 				</div>
-			) : null}
+				{isReplying ? (
+					<div className={composerShellClass}>
+						<textarea
+							className={composerInputClass}
+							onChange={(event) => onReplyChange(event.target.value)}
+							placeholder={
+								item.entityKind === "dm"
+									? `Reply to @${item.participant.handle}`
+									: `Reply to mention from @${item.participant.handle}`
+							}
+							rows={4}
+							value={replyDraft}
+						/>
+						<div className={composerBarClass}>
+							<span className={timestampClass}>Send from inbox</span>
+							<button
+								className={primaryButtonClass}
+								disabled={!replyDraft.trim()}
+								onClick={onReplySend}
+								type="button"
+							>
+								Send
+							</button>
+						</div>
+					</div>
+				) : null}
+			</div>
 		</article>
 	);
 }

package/src/components/LinkPreviewCard.tsx

@@ -0,0 +1,270 @@
+import { ExternalLink, Image as ImageIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { LinkPreviewMetadata } from "#/lib/link-preview-metadata";
+import type { TweetUrlEntity } from "#/lib/types";
+import {
+	cx,
+	linkPreviewCardClass,
+	linkPreviewDescClass,
+	linkPreviewHostClass,
+	linkPreviewTitleClass,
+} from "#/lib/ui";
+
+type LinkPreviewState = Pick<
+	TweetUrlEntity,
+	| "expandedUrl"
+	| "displayUrl"
+	| "title"
+	| "description"
+	| "imageUrl"
+	| "siteName"
+>;
+
+const previewCache = new Map<string, Promise<LinkPreviewMetadata | null>>();
+const IMAGE_EXTENSION_PATTERN = /\.(?:avif|gif|jpe?g|png|webp)(?:[?#].*)?$/i;
+const MAX_CONCURRENT_PREVIEW_FETCHES = 2;
+let activePreviewFetches = 0;
+const queuedPreviewFetches: Array<() => void> = [];
+
+function needsHydration(preview: LinkPreviewState) {
+	const targetUrl = preview.expandedUrl || "";
+	if (
+		preview.imageUrl &&
+		preview.siteName &&
+		preview.title &&
+		isDirectImageUrl(targetUrl)
+	) {
+		return false;
+	}
+	return (
+		!preview.imageUrl ||
+		!preview.title ||
+		!preview.description ||
+		preview.title === preview.displayUrl ||
+		preview.description === preview.displayUrl
+	);
+}
+
+function runQueuedPreviewFetches() {
+	while (
+		activePreviewFetches < MAX_CONCURRENT_PREVIEW_FETCHES &&
+		queuedPreviewFetches.length > 0
+	) {
+		const next = queuedPreviewFetches.shift();
+		next?.();
+	}
+}
+
+function schedulePreviewFetch(task: () => Promise<LinkPreviewMetadata | null>) {
+	return new Promise<LinkPreviewMetadata | null>((resolve) => {
+		queuedPreviewFetches.push(() => {
+			activePreviewFetches += 1;
+			task()
+				.then(resolve)
+				.catch(() => resolve(null))
+				.finally(() => {
+					activePreviewFetches = Math.max(0, activePreviewFetches - 1);
+					runQueuedPreviewFetches();
+				});
+		});
+		runQueuedPreviewFetches();
+	});
+}
+
+function fetchPreview(entry: TweetUrlEntity) {
+	const targetUrl = entry.expandedUrl || entry.url;
+	if (!targetUrl) return Promise.resolve(null);
+	const key = `${entry.url} ${targetUrl}`;
+	const cached = previewCache.get(key);
+	if (cached) return cached;
+
+	const params = new URLSearchParams({ url: targetUrl });
+	if (entry.url && entry.url !== targetUrl) {
+		params.set("shortUrl", entry.url);
+	}
+	const promise = schedulePreviewFetch(() =>
+		fetch(`/api/link-preview?${params.toString()}`)
+			.then(async (response) => {
+				if (!response.ok) return null;
+				const data = (await response.json()) as {
+					ok?: boolean;
+					preview?: LinkPreviewMetadata;
+				};
+				return data.ok ? (data.preview ?? null) : null;
+			})
+			.catch(() => null),
+	);
+	previewCache.set(key, promise);
+	return promise;
+}
+
+function displayHost(url: string, fallback: string) {
+	try {
+		return new URL(url).hostname.replace(/^www\./, "");
+	} catch {
+		return fallback;
+	}
+}
+
+function isDirectImageUrl(url: string) {
+	try {
+		const parsed = new URL(url);
+		if (IMAGE_EXTENSION_PATTERN.test(parsed.pathname)) return true;
+		return (
+			parsed.hostname === "pbs.twimg.com" &&
+			(parsed.pathname.startsWith("/media/") ||
+				parsed.pathname.startsWith("/amplify_video_thumb/"))
+		);
+	} catch {
+		return IMAGE_EXTENSION_PATTERN.test(url);
+	}
+}
+
+export function LinkPreviewCard({
+	entry,
+	index,
+}: {
+	entry: TweetUrlEntity;
+	index: number;
+}) {
+	const targetUrl = entry.expandedUrl || entry.url;
+	const displayUrl = entry.displayUrl || displayHost(targetUrl, targetUrl);
+	const directImageUrl = isDirectImageUrl(targetUrl) ? targetUrl : null;
+	const initialPreview = useMemo<LinkPreviewState>(
+		() => ({
+			expandedUrl: targetUrl,
+			displayUrl,
+			title:
+				entry.title ??
+				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+			description:
+				entry.description ?? (directImageUrl ? displayUrl : undefined),
+			imageUrl: entry.imageUrl ?? directImageUrl,
+			siteName:
+				entry.siteName ??
+				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+		}),
+		[
+			directImageUrl,
+			displayUrl,
+			entry.description,
+			entry.imageUrl,
+			entry.siteName,
+			entry.title,
+			targetUrl,
+		],
+	);
+	const [preview, setPreview] = useState(initialPreview);
+	const [imageFailed, setImageFailed] = useState(false);
+	const [hydratedKey, setHydratedKey] = useState("");
+	const [canHydrate, setCanHydrate] = useState(false);
+	const cardRef = useRef<HTMLAnchorElement | null>(null);
+	const cacheKey = `${entry.url} ${targetUrl}`;
+
+	useEffect(() => {
+		setPreview(initialPreview);
+		setImageFailed(false);
+		setHydratedKey("");
+		setCanHydrate(false);
+	}, [initialPreview]);
+
+	useEffect(() => {
+		if (!targetUrl) return;
+		if (!needsHydration(preview)) return;
+		const node = cardRef.current;
+		if (!node || typeof IntersectionObserver === "undefined") {
+			setCanHydrate(true);
+			return;
+		}
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries.some((entry) => entry.isIntersecting)) {
+					setCanHydrate(true);
+					observer.disconnect();
+				}
+			},
+			{ rootMargin: "320px 0px" },
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [preview, targetUrl]);
+
+	useEffect(() => {
+		if (!targetUrl || !canHydrate) return;
+		if (!needsHydration(preview)) return;
+		if (hydratedKey === cacheKey) return;
+		let cancelled = false;
+		const timer = window.setTimeout(() => {
+			setHydratedKey(cacheKey);
+			void fetchPreview(entry).then((metadata) => {
+				if (cancelled || !metadata) return;
+				setPreview((current) => ({
+					expandedUrl: metadata.url || current.expandedUrl,
+					displayUrl: current.displayUrl,
+					title: metadata.title ?? current.title,
+					description: metadata.description ?? current.description,
+					imageUrl: metadata.imageUrl ?? current.imageUrl,
+					siteName: metadata.siteName ?? current.siteName,
+				}));
+			});
+		}, 100);
+		return () => {
+			cancelled = true;
+			window.clearTimeout(timer);
+		};
+	}, [cacheKey, canHydrate, entry, hydratedKey, preview, targetUrl]);
+
+	const title = preview.title || entry.displayUrl;
+	const description =
+		preview.description && preview.description !== title
+			? preview.description
+			: preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
+	const host =
+		preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
+	const showImage = Boolean(preview.imageUrl && !imageFailed);
+
+	return (
+		<a
+			key={`${entry.expandedUrl}-${String(index)}`}
+			className={linkPreviewCardClass}
+			data-perf="link-preview-card"
+			href={preview.expandedUrl}
+			ref={cardRef}
+			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">
+					<span className={linkPreviewHostClass}>{host}</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}>{title}</span>
+				<span className={linkPreviewDescClass}>{description}</span>
+				<span className={cx(linkPreviewHostClass, "text-[12px]")}>
+					{entry.displayUrl}
+				</span>
+			</div>
+			<div className="flex aspect-[1.45] w-40 shrink-0 items-center justify-center overflow-hidden border-l border-[var(--line)] bg-[var(--bg-soft)] max-[720px]:w-28">
+				{showImage ? (
+					<img
+						alt={title}
+						className="size-full object-cover transition-transform duration-200 group-hover/link-preview:scale-[1.03]"
+						loading="lazy"
+						onError={() => setImageFailed(true)}
+						src={preview.imageUrl ?? ""}
+					/>
+				) : (
+					<ImageIcon
+						aria-hidden="true"
+						className="size-8 text-[var(--ink-soft)]"
+						strokeWidth={1.7}
+					/>
+				)}
+			</div>
+		</a>
+	);
+}

package/src/components/ProfilePreview.tsx

@@ -9,6 +9,7 @@ import {
 	profilePreviewHandleClass,
 	profilePreviewHeaderClass,
 	profilePreviewMetaClass,
+	profilePreviewNameClass,
 	profilePreviewTriggerClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
@@ -40,12 +41,16 @@ export function ProfilePreview({
 						name={profile.displayName}
 						profileId={profile.id}
 					/>
-					<span>
-						<strong>{profile.displayName}</strong>
+					<span className="flex min-w-0 flex-col">
+						<span className={profilePreviewNameClass}>
+							{profile.displayName}
+						</span>
 						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
 					</span>
 				</span>
-				<span className={profilePreviewBioClass}>{profile.bio}</span>
+				{profile.bio ? (
+					<span className={profilePreviewBioClass}>{profile.bio}</span>
+				) : null}
 				<span className={profilePreviewMetaClass}>
 					{formatCompactNumber(profile.followersCount)} followers
 				</span>

package/src/components/SavedTimelineView.tsx

@@ -1,18 +1,17 @@
+import { Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { TimelineCard } from "#/components/TimelineCard";
 import type { QueryEnvelope, QueryResponse, TimelineItem } from "#/lib/types";
 import {
-	cx,
-	eyebrowClass,
-	feedPageClass,
-	heroControlsClass,
-	heroCopyClass,
-	heroShellClass,
-	heroTitleClass,
-	pageWrapClass,
-	textFieldClass,
-	textFieldWideClass,
-	timelineLaneClass,
+	emptyStateClass,
+	feedClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
 } from "#/lib/ui";
 
 interface SavedTimelineViewProps {
@@ -23,9 +22,13 @@ interface SavedTimelineViewProps {
 	searchPlaceholder: string;
 }
 
+const TITLES: Record<SavedTimelineViewProps["filter"], string> = {
+	liked: "Likes",
+	bookmarked: "Bookmarks",
+};
+
 export function SavedTimelineView({
 	filter,
-	eyebrow,
 	title,
 	loadingLabel,
 	searchPlaceholder,
@@ -57,9 +60,11 @@ export function SavedTimelineView({
 
 	const subtitle = useMemo(() => {
 		if (!meta) {
-			return items.length > 0 ? `${items.length} visible` : loadingLabel;
+			return items.length > 0
+				? `${String(items.length)} visible`
+				: loadingLabel;
 		}
-		return `${items.length} visible · ${meta.transport.statusText}`;
+		return `${String(items.length)} visible · ${meta.transport.statusText}`;
 	}, [items.length, loadingLabel, meta]);
 
 	async function replyToTweet(tweetId: string) {
@@ -81,35 +86,40 @@ export function SavedTimelineView({
 	}
 
 	return (
-		<main className={pageWrapClass}>
-			<div className={feedPageClass}>
-				<section className={heroShellClass}>
-					<div>
-						<p className={eyebrowClass}>{eyebrow}</p>
-						<h2 className={heroTitleClass}>{title}</h2>
-						<p className={heroCopyClass}>{subtitle}</p>
+		<>
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="flex min-w-0 flex-col">
+						<h1 className={pageTitleClass}>{TITLES[filter]}</h1>
+						<p className={pageSubtitleClass}>{title}</p>
+						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
-					<div className={heroControlsClass}>
+				</div>
+				<div className="px-4 pb-3">
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
 						<input
-							className={cx(textFieldClass, textFieldWideClass)}
+							className={searchFieldInputClass}
 							onChange={(event) => setSearch(event.target.value)}
 							placeholder={searchPlaceholder}
 							value={search}
 						/>
-					</div>
-				</section>
-
-				<section className={timelineLaneClass}>
-					{items.map((item) => (
-						<TimelineCard
-							key={item.id}
-							item={item}
-							onReply={replyToTweet}
-							showReplyControls={false}
-						/>
-					))}
-				</section>
-			</div>
-		</main>
+					</label>
+				</div>
+			</header>
+			<section className={feedClass}>
+				{items.length === 0 ? (
+					<div className={emptyStateClass}>Nothing saved here yet.</div>
+				) : null}
+				{items.map((item) => (
+					<TimelineCard
+						key={item.id}
+						item={item}
+						onReply={replyToTweet}
+						showReplyControls={false}
+					/>
+				))}
+			</section>
+		</>
 	);
 }