birdclaw 0.4.1 → 0.5.1

package/src/components/EmbeddedTweetCard.tsx

@@ -1,12 +1,13 @@
 import { formatShortTimestamp } from "#/lib/present";
 import type { EmbeddedTweet } from "#/lib/types";
 import {
-	embeddedTweetAuthorClass,
-	embeddedTweetCardClass,
-	embeddedTweetCopyClass,
-	embeddedTweetHeaderClass,
-	embeddedTweetLabelClass,
-	timestampClass,
+	embeddedCardBodyClass,
+	embeddedCardCopyClass,
+	embeddedCardHandleClass,
+	embeddedCardHeaderClass,
+	embeddedCardLabelClass,
+	embeddedCardNameClass,
+	feedRowTimestampClass,
 } from "#/lib/ui";
 import { ProfilePreview } from "./ProfilePreview";
 import { TweetMediaGrid } from "./TweetMediaGrid";
@@ -20,21 +21,26 @@ export function EmbeddedTweetCard({
 	label: string;
 }) {
 	return (
-		<section className={embeddedTweetCardClass}>
-			<p className={embeddedTweetLabelClass}>{label}</p>
-			<header className={embeddedTweetHeaderClass}>
+		<section className={embeddedCardBodyClass}>
+			<p className={embeddedCardLabelClass}>{label}</p>
+			<header className={embeddedCardHeaderClass}>
 				<ProfilePreview profile={item.author}>
-					<span className={embeddedTweetAuthorClass}>
-						<strong>{item.author.displayName}</strong>
-						<span>@{item.author.handle}</span>
+					<span className="flex min-w-0 items-center gap-1.5">
+						<span className={embeddedCardNameClass}>
+							{item.author.displayName}
+						</span>
+						<span className={embeddedCardHandleClass}>
+							@{item.author.handle}
+						</span>
 					</span>
 				</ProfilePreview>
-				<span className={timestampClass}>
+				<span className="text-[var(--ink-soft)]">·</span>
+				<span className={feedRowTimestampClass}>
 					{formatShortTimestamp(item.createdAt)}
 				</span>
 			</header>
 			<TweetRichText
-				className={embeddedTweetCopyClass}
+				className={embeddedCardCopyClass}
 				entities={item.entities}
 				text={item.text}
 			/>

package/src/components/FeedState.tsx

@@ -0,0 +1,147 @@
+import type { ReactNode } from "react";
+import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
+
+function SkeletonBlock({
+	className,
+	muted = false,
+}: {
+	className: string;
+	muted?: boolean;
+}) {
+	return (
+		<span
+			aria-hidden="true"
+			className={`block animate-pulse rounded-full ${muted ? "bg-[color:color-mix(in_srgb,var(--ink-soft)_16%,transparent)]" : "bg-[color:color-mix(in_srgb,var(--ink-soft)_24%,transparent)]"} ${className}`}
+		/>
+	);
+}
+
+export function TweetSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => {
+				const hasMedia = index % 3 === 0;
+				const hasQuote = index % 4 === 2;
+				return (
+					<article
+						className="flex gap-3 px-4 py-3"
+						data-perf="tweet-skeleton-row"
+						key={`tweet-skeleton-${index}`}
+					>
+						<SkeletonBlock className="size-10 shrink-0 rounded-full" />
+						<div className="min-w-0 flex-1 space-y-3">
+							<div className="flex items-center gap-2">
+								<SkeletonBlock className="h-3.5 w-32" />
+								<SkeletonBlock className="h-3 w-20" muted />
+								<SkeletonBlock className="ml-auto h-5 w-16" muted />
+							</div>
+							<div className="space-y-2">
+								<SkeletonBlock className="h-3 w-full" />
+								<SkeletonBlock className="h-3 w-11/12" muted />
+								{index % 2 === 0 ? (
+									<SkeletonBlock className="h-3 w-7/12" muted />
+								) : null}
+							</div>
+							{hasMedia ? (
+								<SkeletonBlock className="h-32 w-full rounded-2xl" muted />
+							) : null}
+							{hasQuote ? (
+								<div className="space-y-2 rounded-2xl border border-[var(--line)] px-3 py-2">
+									<SkeletonBlock className="h-3 w-28" muted />
+									<SkeletonBlock className="h-3 w-full" muted />
+								</div>
+							) : null}
+							<div className="flex max-w-md items-center justify-between">
+								{["thread", "reply", "repost", "like"].map((key) => (
+									<SkeletonBlock className="h-3 w-11" key={key} muted />
+								))}
+							</div>
+						</div>
+					</article>
+				);
+			})}
+		</div>
+	);
+}
+
+export function LinkSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => (
+				<article
+					className="flex gap-3 px-4 py-3"
+					data-perf="link-skeleton-row"
+					key={`link-skeleton-${index}`}
+				>
+					<SkeletonBlock className="size-9 shrink-0 rounded-full" muted />
+					<div className="min-w-0 flex-1 space-y-3">
+						<SkeletonBlock className="h-3.5 w-8/12" />
+						<SkeletonBlock className="h-3 w-6/12" muted />
+						<div className="flex flex-wrap gap-2">
+							<SkeletonBlock className="h-3 w-20" muted />
+							<SkeletonBlock className="h-3 w-14" muted />
+							<SkeletonBlock className="h-3 w-24" muted />
+						</div>
+						{index % 2 === 0 ? (
+							<SkeletonBlock
+								className="h-20 w-72 max-w-full rounded-2xl"
+								muted
+							/>
+						) : null}
+					</div>
+				</article>
+			))}
+		</div>
+	);
+}
+
+export function FeedLoading({
+	children,
+	detail,
+	label,
+}: {
+	children?: ReactNode;
+	detail?: string;
+	label: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)]">
+			<BirdclawLoading detail={detail} label={label} />
+			{children}
+		</div>
+	);
+}
+
+export function FeedError({
+	action,
+	message,
+	title = "Could not load this view",
+}: {
+	action?: ReactNode;
+	message: string;
+	title?: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)] px-6 py-10 text-center">
+			<div className="mx-auto max-w-sm">
+				<div className="text-[14px] font-bold text-[var(--alert)]">{title}</div>
+				<p className="mt-2 text-[13px] leading-[1.45] text-[var(--ink-soft)]">
+					{message}
+				</p>
+				{action ? (
+					<div className="mt-4 flex justify-center">{action}</div>
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+export function FeedEmpty({
+	detail,
+	label,
+}: {
+	detail?: string;
+	label: string;
+}) {
+	return <BirdclawEmpty detail={detail} label={label} />;
+}

package/src/components/InboxCard.tsx

@@ -1,29 +1,32 @@
 import { Link } from "@tanstack/react-router";
+import {
+	CheckCircle2,
+	Circle,
+	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 +47,104 @@ 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}
+		<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={cx(pillClass, pillAlertClass)}>
-						score {item.score}
-					</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 className="inline-flex items-center gap-1">
+							{item.needsReply ? (
+								<Circle className="size-3" strokeWidth={2.2} />
+							) : (
+								<CheckCircle2 className="size-3.5" strokeWidth={2} />
+							)}
+							{item.needsReply ? "open" : "replied"}
+						</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>
+	);
+}