birdclaw 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 0.8.2 - 2026-06-15
+
+### Fixed
+
+- Wait for concurrent SQLite writers before starting write transactions and avoid unnecessary legacy backfill writes during normal startup.
+- Retain timeline and DM data across sidebar navigation, deduplicate status reads, debounce searches, skip unused Spotlight archive scans in web status, and remove TanStack debug controls.
+- Keep tweet and profile hover previews outside wrapped links, flip them to the roomier vertical side, and constrain them to the viewport.
+- Expand Twitter Articles into titled preview cards and citation popovers instead of showing bare `t.co` links.
+
 ## 0.8.1 - 2026-06-13
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "birdclaw",
-	"version": "0.8.1",
+	"version": "0.8.2",
 	"description": "Local Twitter memory in SQLite for archives, DMs, likes, bookmarks, and moderation",
 	"homepage": "https://github.com/steipete/birdclaw#readme",
 	"license": "MIT",
@@ -54,10 +54,7 @@
 	"dependencies": {
 		"@steipete/sweet-cookie": "^0.4.0",
 		"@tailwindcss/vite": "^4.3.0",
-		"@tanstack/devtools-vite": "0.7.0",
-		"@tanstack/react-devtools": "0.10.5",
 		"@tanstack/react-router": "1.170.15",
-		"@tanstack/react-router-devtools": "1.167.0",
 		"@tanstack/react-router-ssr-query": "1.167.1",
 		"@tanstack/react-start": "1.168.25",
 		"@tanstack/router-plugin": "^1.168.18",

package/scripts/browser-perf.mjs

@@ -18,6 +18,33 @@ const SCENARIOS = {
 		path: "/mentions",
 		ready: async (page) => waitForAny(page, ['[data-perf="timeline-card"]']),
 	},
+	"sidebar-roundtrip": {
+		path: "/",
+		ready: async (page) => waitForAny(page, ['[data-perf="timeline-card"]']),
+		action: async (page) => {
+			await page.getByRole("link", { name: "Mentions" }).click();
+			await page.waitForURL("**/mentions");
+			await waitForAny(page, ['[data-perf="timeline-card"]']);
+			const queryCallsBeforeReturn = await page.evaluate(
+				() =>
+					performance
+						.getEntriesByType("resource")
+						.filter((entry) => entry.name.includes("/api/query")).length,
+			);
+			await page.getByRole("link", { name: "Home" }).click();
+			await page.waitForURL((url) => url.pathname === "/");
+			await waitForAny(page, ['[data-perf="timeline-card"]']);
+			const queryCallsAfterReturn = await page.evaluate(
+				() =>
+					performance
+						.getEntriesByType("resource")
+						.filter((entry) => entry.name.includes("/api/query")).length,
+			);
+			if (queryCallsAfterReturn !== queryCallsBeforeReturn) {
+				throw new Error("Returning Home issued a new query request");
+			}
+		},
+	},
 	"mentions-search": {
 		path: "/mentions",
 		ready: async (page) => {

package/src/components/ConversationThread.tsx

@@ -11,6 +11,7 @@ import { AvatarChip } from "./AvatarChip";
 import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -117,6 +118,9 @@ export function ConversationThread({
 									text={tweet.text}
 								/>
 								<TweetMediaGrid items={tweet.media} />
+								{tweet.entities.article ? (
+									<TweetArticleCard article={tweet.entities.article} />
+								) : null}
 							</div>
 						</div>
 					);

package/src/components/EmbeddedTweetCard.tsx

@@ -10,6 +10,7 @@ import {
 } from "#/lib/ui";
 import { ProfilePreview } from "./ProfilePreview";
 import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -46,6 +47,9 @@ export function EmbeddedTweetCard({
 				text={item.text}
 			/>
 			<TweetMediaGrid items={item.media} />
+			{item.entities.article ? (
+				<TweetArticleCard article={item.entities.article} />
+			) : null}
 		</section>
 	);
 }

package/src/components/FloatingPreview.tsx

@@ -0,0 +1,382 @@
+import {
+	type CSSProperties,
+	type FocusEvent,
+	type KeyboardEvent,
+	type PointerEvent,
+	type RefObject,
+	useCallback,
+	useEffect,
+	useId,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
+
+type PreviewSide = "top" | "bottom";
+
+type Rect = {
+	top: number;
+	right: number;
+	bottom: number;
+	left: number;
+	width: number;
+	height: number;
+};
+
+type PreviewPosition = {
+	top: number;
+	left: number;
+	maxWidth: number;
+	maxHeight: number;
+	side: PreviewSide;
+	measured: boolean;
+	ready: boolean;
+};
+
+type PlacementInput = {
+	referenceRects: Rect[];
+	floatingWidth: number;
+	floatingHeight: number;
+	viewport: Rect;
+	gap?: number;
+	gutter?: number;
+};
+
+const DEFAULT_GAP = 10;
+const DEFAULT_GUTTER = 12;
+const DEFAULT_CLOSE_DELAY_MS = 120;
+
+const initialPosition: PreviewPosition = {
+	top: 0,
+	left: 0,
+	maxWidth: 0,
+	maxHeight: 0,
+	side: "bottom",
+	measured: false,
+	ready: false,
+};
+
+function edgeRect(rects: Rect[], side: PreviewSide) {
+	return rects.reduce((best, rect) => {
+		if (side === "bottom") {
+			if (rect.bottom > best.bottom) return rect;
+			if (rect.bottom === best.bottom && rect.width > best.width) return rect;
+			return best;
+		}
+		if (rect.top < best.top) return rect;
+		if (rect.top === best.top && rect.width > best.width) return rect;
+		return best;
+	});
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+	if (maximum < minimum) return minimum;
+	return Math.min(Math.max(value, minimum), maximum);
+}
+
+function calculatePreviewPosition({
+	referenceRects,
+	floatingWidth,
+	floatingHeight,
+	viewport,
+	gap = DEFAULT_GAP,
+	gutter = DEFAULT_GUTTER,
+}: PlacementInput): PreviewPosition {
+	const referenceTop = Math.min(...referenceRects.map((rect) => rect.top));
+	const referenceBottom = Math.max(
+		...referenceRects.map((rect) => rect.bottom),
+	);
+	const availableBelow = Math.max(
+		0,
+		viewport.bottom - gutter - referenceBottom - gap,
+	);
+	const availableAbove = Math.max(
+		0,
+		referenceTop - viewport.top - gutter - gap,
+	);
+	const side: PreviewSide =
+		availableBelow >= floatingHeight || availableBelow >= availableAbove
+			? "bottom"
+			: "top";
+	const availableHeight = side === "bottom" ? availableBelow : availableAbove;
+	const renderedHeight = Math.min(floatingHeight, availableHeight);
+	const anchor = edgeRect(referenceRects, side);
+	const maxWidth = Math.max(0, viewport.width - gutter * 2);
+	const renderedWidth = Math.min(floatingWidth, maxWidth);
+	const minimumLeft = viewport.left + gutter;
+	const maximumLeft = viewport.right - gutter - renderedWidth;
+	const left = clamp(
+		anchor.left + anchor.width / 2 - renderedWidth / 2,
+		minimumLeft,
+		maximumLeft,
+	);
+	const top =
+		side === "bottom"
+			? referenceBottom + gap
+			: referenceTop - gap - renderedHeight;
+
+	return {
+		top,
+		left,
+		maxWidth,
+		maxHeight: availableHeight,
+		side,
+		measured: true,
+		ready: true,
+	};
+}
+
+function viewportRect(): Rect {
+	const viewport = window.visualViewport;
+	const left = viewport?.offsetLeft ?? 0;
+	const top = viewport?.offsetTop ?? 0;
+	const width = viewport?.width ?? window.innerWidth;
+	const height = viewport?.height ?? window.innerHeight;
+	return {
+		top,
+		right: left + width,
+		bottom: top + height,
+		left,
+		width,
+		height,
+	};
+}
+
+function elementRects(element: HTMLElement): Rect[] {
+	const fragments = Array.from(element.getClientRects()).filter(
+		(rect) => rect.width > 0 || rect.height > 0,
+	);
+	return fragments.length > 0 ? fragments : [element.getBoundingClientRect()];
+}
+
+function referenceIntersectsViewport(rects: Rect[], viewport: Rect) {
+	return rects.some(
+		(rect) =>
+			rect.right >= viewport.left &&
+			rect.left <= viewport.right &&
+			rect.bottom >= viewport.top &&
+			rect.top <= viewport.bottom,
+	);
+}
+
+function samePosition(left: PreviewPosition, right: PreviewPosition) {
+	return (
+		left.top === right.top &&
+		left.left === right.left &&
+		left.maxWidth === right.maxWidth &&
+		left.maxHeight === right.maxHeight &&
+		left.side === right.side &&
+		left.measured === right.measured &&
+		left.ready === right.ready
+	);
+}
+
+function floatingStyle(position: PreviewPosition): CSSProperties {
+	return {
+		position: "fixed",
+		top: position.top,
+		left: position.left,
+		// Apply constraints during the hidden first pass so remeasurement can settle.
+		maxWidth: position.measured ? position.maxWidth : undefined,
+		maxHeight: position.measured ? position.maxHeight : undefined,
+		visibility: position.ready ? "visible" : "hidden",
+	};
+}
+
+function containsTarget(
+	target: EventTarget | null,
+	...elements: Array<HTMLElement | null>
+) {
+	return (
+		target instanceof Node &&
+		elements.some((element) => element?.contains(target))
+	);
+}
+
+export function useFloatingPreview(options: { closeDelayMs?: number } = {}): {
+	open: boolean;
+	referenceRef: RefObject<HTMLSpanElement | null>;
+	floatingRef: RefObject<HTMLSpanElement | null>;
+	floatingStyle: CSSProperties;
+	referenceProps: {
+		onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+		onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+		onFocus: (event: FocusEvent<HTMLElement>) => void;
+		onBlur: (event: FocusEvent<HTMLElement>) => void;
+		onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+	};
+	floatingProps: {
+		onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+		onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+		onFocus: (event: FocusEvent<HTMLElement>) => void;
+		onBlur: (event: FocusEvent<HTMLElement>) => void;
+		onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+	};
+	floatingId: string;
+	closePreview: () => void;
+} {
+	const closeDelayMs = options.closeDelayMs ?? DEFAULT_CLOSE_DELAY_MS;
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState(initialPosition);
+	const floatingId = useId();
+	const referenceRef = useRef<HTMLSpanElement | null>(null);
+	const floatingRef = useRef<HTMLSpanElement | null>(null);
+	const closeTimerRef = useRef<number | null>(null);
+
+	const clearCloseTimer = useCallback(() => {
+		if (closeTimerRef.current === null) return;
+		window.clearTimeout(closeTimerRef.current);
+		closeTimerRef.current = null;
+	}, []);
+
+	const openPreview = useCallback(() => {
+		clearCloseTimer();
+		if (!open) setPosition(initialPosition);
+		setOpen(true);
+	}, [clearCloseTimer, open]);
+
+	const closePreview = useCallback(() => {
+		clearCloseTimer();
+		setOpen(false);
+	}, [clearCloseTimer]);
+
+	const scheduleClose = useCallback(() => {
+		clearCloseTimer();
+		closeTimerRef.current = window.setTimeout(() => {
+			closeTimerRef.current = null;
+			const reference = referenceRef.current;
+			const floating = floatingRef.current;
+			const focusInside = containsTarget(
+				document.activeElement,
+				reference,
+				floating,
+			);
+			const pointerInside =
+				Boolean(reference?.matches(":hover")) ||
+				Boolean(floating?.matches(":hover"));
+			if (!focusInside && !pointerInside) setOpen(false);
+		}, closeDelayMs);
+	}, [clearCloseTimer, closeDelayMs]);
+
+	const handleBlur = useCallback(
+		(event: FocusEvent<HTMLElement>) => {
+			if (
+				containsTarget(
+					event.relatedTarget,
+					referenceRef.current,
+					floatingRef.current,
+				)
+			) {
+				return;
+			}
+			scheduleClose();
+		},
+		[scheduleClose],
+	);
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLElement>) => {
+			if (event.key !== "Escape") return;
+			closePreview();
+			referenceRef.current?.querySelector<HTMLElement>("a,button")?.focus();
+		},
+		[closePreview],
+	);
+
+	const updatePlacement = useCallback(() => {
+		const reference = referenceRef.current;
+		const floating = floatingRef.current;
+		if (!reference || !floating) return;
+		const viewport = viewportRect();
+		const referenceRects = elementRects(reference);
+		if (!referenceIntersectsViewport(referenceRects, viewport)) {
+			setPosition((current) =>
+				current.ready ? { ...current, ready: false } : current,
+			);
+			return;
+		}
+		const floatingRect = floating.getBoundingClientRect();
+		const content = floating.querySelector<HTMLElement>(
+			"[data-floating-preview-content]",
+		);
+		const style = window.getComputedStyle(floating);
+		const verticalChrome = [
+			style.paddingTop,
+			style.paddingBottom,
+			style.borderTopWidth,
+			style.borderBottomWidth,
+		].reduce((total, value) => total + (Number.parseFloat(value) || 0), 0);
+		// Measure the unclipped child so a previously constrained card can grow again.
+		const naturalHeight = Math.max(
+			floatingRect.height,
+			(content?.getBoundingClientRect().height ?? 0) + verticalChrome,
+		);
+		const next = calculatePreviewPosition({
+			referenceRects,
+			floatingWidth: floatingRect.width,
+			floatingHeight: naturalHeight,
+			viewport,
+		});
+		if (floatingRect.width > next.maxWidth + 0.5) next.ready = false;
+		setPosition((current) => (samePosition(current, next) ? current : next));
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!open) return;
+		updatePlacement();
+		let frame = 0;
+		const trackLayout = () => {
+			updatePlacement();
+			frame = window.requestAnimationFrame(trackLayout);
+		};
+		// Fixed positioning needs explicit tracking when surrounding content shifts.
+		frame = window.requestAnimationFrame(trackLayout);
+		const viewport = window.visualViewport;
+		window.addEventListener("resize", updatePlacement);
+		window.addEventListener("scroll", updatePlacement, true);
+		viewport?.addEventListener("resize", updatePlacement);
+		viewport?.addEventListener("scroll", updatePlacement);
+		const observer =
+			typeof ResizeObserver === "undefined"
+				? null
+				: new ResizeObserver(updatePlacement);
+		if (referenceRef.current) observer?.observe(referenceRef.current);
+		if (floatingRef.current) observer?.observe(floatingRef.current);
+
+		return () => {
+			window.cancelAnimationFrame(frame);
+			window.removeEventListener("resize", updatePlacement);
+			window.removeEventListener("scroll", updatePlacement, true);
+			viewport?.removeEventListener("resize", updatePlacement);
+			viewport?.removeEventListener("scroll", updatePlacement);
+			observer?.disconnect();
+		};
+	}, [open, updatePlacement]);
+
+	useEffect(() => () => clearCloseTimer(), [clearCloseTimer]);
+
+	const interactionProps = {
+		onPointerEnter: (_event: PointerEvent<HTMLElement>) => openPreview(),
+		onPointerLeave: (_event: PointerEvent<HTMLElement>) => scheduleClose(),
+		onFocus: (_event: FocusEvent<HTMLElement>) => openPreview(),
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+	};
+
+	return {
+		open,
+		referenceRef,
+		floatingRef,
+		floatingStyle: floatingStyle(position),
+		referenceProps: interactionProps,
+		floatingProps: interactionProps,
+		floatingId,
+		closePreview,
+	};
+}
+
+export const __test__ = {
+	calculatePreviewPosition,
+	floatingStyle,
+	referenceIntersectsViewport,
+};

package/src/components/MarkdownViewer.tsx

@@ -1,11 +1,4 @@
-import {
-	Fragment,
-	type MouseEventHandler,
-	type ReactNode,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
+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";
@@ -14,35 +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()
@@ -135,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}
@@ -160,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} · <SmartTimestamp value={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>
 	);
 }