birdclaw 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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
+
+- Refresh dependency backstop updates for `@steipete/sweet-cookie`, `@types/node`, the adopted TypeScript native-preview toolchain, and the pnpm 10 package-manager pin.
+- Remove the separate public read-only web profile; deployments can expose the full private app behind an external authentication boundary.
+- Show recent web timestamps as live relative time, then switch to calendar dates with exact local time on hover.
+
+### Fixed
+
+- Open long-running AI streams immediately, keep the Today digest within proxy limits by using the locally synchronized archive, and show actionable retry errors when a connection is interrupted.
+- Reuse freshly generated Today reports across reloads while background sync updates the archive, and hydrate locally stored cited tweets so source hovercards remain available outside the selected time window.
+
 ## 0.8.0 - 2026-06-10
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "birdclaw",
-	"version": "0.8.0",
+	"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",
@@ -52,12 +52,9 @@
 		"docs:site": "node scripts/build-docs-site.mjs"
 	},
 	"dependencies": {
-		"@steipete/sweet-cookie": "^0.3.0",
+		"@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",
@@ -83,11 +80,11 @@
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
 		"@types/geojson": "^7946.0.16",
-		"@types/node": "^25.9.2",
+		"@types/node": "^25.9.3",
 		"@types/react": "^19.2.17",
 		"@types/react-dom": "^19.2.3",
 		"@types/supercluster": "^7.1.3",
-		"@typescript/native-preview": "7.0.0-dev.20260609.1",
+		"@typescript/native-preview": "7.0.0-dev.20260611.2",
 		"@vitest/coverage-v8": "^4.1.8",
 		"jsdom": "^29.1.1",
 		"oxfmt": "^0.54.0",
@@ -98,5 +95,5 @@
 	"engines": {
 		"node": ">=25.8.1 <27"
 	},
-	"packageManager": "pnpm@10.31.0"
+	"packageManager": "pnpm@10.34.3"
 }

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

@@ -1,5 +1,4 @@
 import { MessageCircle } from "lucide-react";
-import { formatShortTimestamp } from "#/lib/present";
 import type { EmbeddedTweet } from "#/lib/types";
 import {
 	cx,
@@ -11,6 +10,8 @@ import {
 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";
 
@@ -101,9 +102,10 @@ export function ConversationThread({
 										</span>
 									</ProfilePreview>
 									<span className="text-[var(--ink-soft)]">·</span>
-									<span className={feedRowTimestampClass}>
-										{formatShortTimestamp(tweet.createdAt)}
-									</span>
+									<SmartTimestamp
+										className={feedRowTimestampClass}
+										value={tweet.createdAt}
+									/>
 									{isAnchor ? (
 										<span className="ml-auto rounded-full bg-[var(--accent)] px-2 py-0.5 text-[11px] font-bold text-white">
 											selected
@@ -116,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/DmWorkspace.tsx

@@ -1,5 +1,5 @@
 import { CheckCircle2, Circle } from "lucide-react";
-import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import { formatCompactNumber } from "#/lib/present";
 import type { DmConversationItem, DmMessageItem } from "#/lib/types";
 import {
 	composerBarClass,
@@ -39,6 +39,7 @@ import {
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
 import { BirdclawEmpty } from "./BrandMark";
+import { SmartTimestamp } from "./SmartTimestamp";
 
 function MessageBubble({ message }: { message: DmMessageItem }) {
 	const outbound = message.direction === "outbound";
@@ -57,7 +58,7 @@ function MessageBubble({ message }: { message: DmMessageItem }) {
 			<div className={dmMessageMetaClass}>
 				<span>{message.sender.displayName}</span>
 				<span>·</span>
-				<span>{formatShortTimestamp(message.createdAt)}</span>
+				<SmartTimestamp value={message.createdAt} />
 			</div>
 		</div>
 	);
@@ -81,9 +82,13 @@ export function DmWorkspace({
 	onReplySend: (conversationId: string) => void;
 }) {
 	const participant = selectedConversation?.participant ?? null;
-	const subtitle = selectedConversation
-		? `${selectedConversation.isMessageRequest ? "Message request" : selectedConversation.needsReply ? "Reply open" : "We replied"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
-		: "No conversation selected";
+	const selectedStatus = selectedConversation
+		? selectedConversation.isMessageRequest
+			? "Message request"
+			: selectedConversation.needsReply
+				? "Reply open"
+				: "We replied"
+		: null;
 
 	return (
 		<section aria-label="DM workspace" className={dmShellClass}>
@@ -119,9 +124,10 @@ export function DmWorkspace({
 											@{conversation.participant.handle}
 										</span>
 									</div>
-									<span className={dmListTimestampClass}>
-										{formatShortTimestamp(conversation.lastMessageAt)}
-									</span>
+									<SmartTimestamp
+										className={dmListTimestampClass}
+										value={conversation.lastMessageAt}
+									/>
 								</div>
 								<p className={dmListPreviewClass}>
 									{conversation.lastMessagePreview}
@@ -176,7 +182,18 @@ export function DmWorkspace({
 									<div className={dmThreadNameClass}>
 										{selectedConversation.participant.displayName}
 									</div>
-									<div className={dmThreadSubtitleClass}>{subtitle}</div>
+									<div className={dmThreadSubtitleClass}>
+										{selectedStatus && selectedConversation ? (
+											<>
+												{selectedStatus} · last message{" "}
+												<SmartTimestamp
+													value={selectedConversation.lastMessageAt}
+												/>
+											</>
+										) : (
+											"No conversation selected"
+										)}
+									</div>
 								</div>
 							</div>
 							<button

package/src/components/EmbeddedTweetCard.tsx

@@ -1,4 +1,3 @@
-import { formatShortTimestamp } from "#/lib/present";
 import type { EmbeddedTweet } from "#/lib/types";
 import {
 	embeddedCardBodyClass,
@@ -10,6 +9,8 @@ import {
 	feedRowTimestampClass,
 } from "#/lib/ui";
 import { ProfilePreview } from "./ProfilePreview";
+import { SmartTimestamp } from "./SmartTimestamp";
+import { TweetArticleCard } from "./TweetArticleCard";
 import { TweetMediaGrid } from "./TweetMediaGrid";
 import { TweetRichText } from "./TweetRichText";
 
@@ -35,9 +36,10 @@ export function EmbeddedTweetCard({
 					</span>
 				</ProfilePreview>
 				<span className="text-[var(--ink-soft)]">·</span>
-				<span className={feedRowTimestampClass}>
-					{formatShortTimestamp(item.createdAt)}
-				</span>
+				<SmartTimestamp
+					className={feedRowTimestampClass}
+					value={item.createdAt}
+				/>
 			</header>
 			<TweetRichText
 				className={embeddedCardCopyClass}
@@ -45,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/InboxCard.tsx

@@ -5,7 +5,7 @@ import {
 	ExternalLink,
 	MessageCircle,
 } from "lucide-react";
-import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import { formatCompactNumber } from "#/lib/present";
 import type { InboxItem } from "#/lib/types";
 import {
 	composerBarClass,
@@ -30,6 +30,7 @@ import {
 	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
+import { SmartTimestamp } from "./SmartTimestamp";
 
 export function InboxCard({
 	item,
@@ -65,9 +66,10 @@ export function InboxCard({
 						</span>
 					</span>
 					<span className={feedRowDotClass}>·</span>
-					<span className={feedRowTimestampClass}>
-						{formatShortTimestamp(item.createdAt)}
-					</span>
+					<SmartTimestamp
+						className={feedRowTimestampClass}
+						value={item.createdAt}
+					/>
 					<span className="ml-auto flex items-center gap-1.5">
 						<span className={cx(pillClass, pillSoftClass)}>
 							{item.entityKind}