birdclaw 0.6.0 → 0.7.0

package/src/components/ProfileAnalysisStream.tsx

@@ -0,0 +1,428 @@
+import { CheckCircle2, Loader2, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { MarkdownViewer } from "#/components/MarkdownViewer";
+import type {
+	ProfileAnalysisContext,
+	ProfileAnalysisRunResult,
+	ProfileAnalysisStreamEvent,
+} from "#/lib/profile-analysis";
+import type { ProfileRecord } from "#/lib/types";
+import { errorCopyClass } from "#/lib/ui";
+
+export interface ProfileAnalysisRequestOptions {
+	refresh: boolean;
+	maxTweets: number;
+	maxPages: number;
+	maxConversations: number;
+	maxConversationPages: number;
+}
+
+export interface ProfileAnalysisState {
+	context: ProfileAnalysisContext | null;
+	error: string | null;
+	loading: boolean;
+	markdown: string;
+	result: ProfileAnalysisRunResult | null;
+	run: (refresh?: boolean, overrideHandle?: string) => void;
+	status: string;
+}
+
+export const DEFAULT_PROFILE_ANALYSIS_LIMITS = {
+	maxTweets: 10000,
+	maxPages: 100,
+	maxConversations: 80,
+	maxConversationPages: 3,
+} as const;
+
+const PROFILE_HYDRATION_LIMIT = 50;
+const PROFILE_MENTION_RE = /(^|[^\w@./])@([A-Za-z0-9_]{1,15})\b/g;
+
+function normalizeProfileHandle(value: string) {
+	return value.trim().replace(/^@/, "").toLowerCase();
+}
+
+function handlesFromText(value: string) {
+	return Array.from(value.matchAll(PROFILE_MENTION_RE)).map(
+		(match) => match[2],
+	);
+}
+
+function knownProfileHandles(context: ProfileAnalysisContext) {
+	const handles = new Set<string>();
+	handles.add(normalizeProfileHandle(context.profile.handle));
+	for (const profile of context.profiles ?? []) {
+		handles.add(normalizeProfileHandle(profile.handle));
+	}
+	for (const tweet of context.conversations) {
+		handles.add(normalizeProfileHandle(tweet.author));
+	}
+	return handles;
+}
+
+function collectProfileAnalysisHydrationHandles({
+	context,
+	analysis,
+	markdown,
+}: {
+	context: ProfileAnalysisContext;
+	analysis?: ProfileAnalysisRunResult["analysis"];
+	markdown?: string;
+}) {
+	const handles = new Set<string>();
+	const known = knownProfileHandles(context);
+	const add = (value: string | undefined) => {
+		if (!value) return;
+		const handle = normalizeProfileHandle(value);
+		if (!/^[a-z0-9_]{1,15}$/.test(handle) || known.has(handle)) return;
+		handles.add(handle);
+	};
+
+	for (const handle of analysis?.sourceHandles ?? []) add(handle);
+	for (const theme of analysis?.themes ?? []) {
+		for (const handle of theme.handles) add(handle);
+	}
+	if (markdown) {
+		for (const handle of handlesFromText(markdown)) add(handle);
+	}
+	for (const handle of handlesFromText(context.profile.bio)) add(handle);
+	for (const tweet of context.tweets) {
+		for (const handle of handlesFromText(tweet.text)) add(handle);
+	}
+	for (const tweet of context.conversations) {
+		for (const handle of handlesFromText(tweet.text)) add(handle);
+		for (const handle of handlesFromText(tweet.bio)) add(handle);
+	}
+
+	return [...handles].slice(0, PROFILE_HYDRATION_LIMIT);
+}
+
+function applyHydratedProfilesToProfileAnalysisContext(
+	context: ProfileAnalysisContext,
+	profiles: ProfileRecord[],
+) {
+	const existing = new Map<string, ProfileRecord>();
+	for (const profile of context.profiles ?? []) {
+		existing.set(normalizeProfileHandle(profile.handle), profile);
+	}
+	for (const profile of profiles) {
+		existing.set(normalizeProfileHandle(profile.handle), profile);
+	}
+	return {
+		...context,
+		profiles: [...existing.values()],
+	};
+}
+
+async function hydrateProfileAnalysisContext({
+	context,
+	analysis,
+	markdown,
+	requestedHandles,
+}: {
+	context: ProfileAnalysisContext;
+	analysis?: ProfileAnalysisRunResult["analysis"];
+	markdown?: string;
+	requestedHandles?: Set<string>;
+}) {
+	const handles = collectProfileAnalysisHydrationHandles({
+		context,
+		analysis,
+		markdown,
+	}).filter((handle) => !requestedHandles?.has(handle));
+	if (handles.length === 0) return context;
+	for (const handle of handles) {
+		requestedHandles?.add(handle);
+	}
+	const url = new URL("/api/profile-hydrate", window.location.origin);
+	url.searchParams.set("handles", handles.join(","));
+	const response = await fetch(url);
+	if (!response.ok) return context;
+	const payload = (await response.json()) as {
+		results?: Array<{ status?: string; profile?: ProfileRecord }>;
+	};
+	const profiles = (payload.results ?? [])
+		.filter((item) => item.status === "hit" && item.profile)
+		.map((item) => item.profile as ProfileRecord);
+	return profiles.length > 0
+		? applyHydratedProfilesToProfileAnalysisContext(context, profiles)
+		: context;
+}
+
+export function profileAnalysisUrl(
+	handle: string,
+	options: ProfileAnalysisRequestOptions,
+) {
+	const params = new URLSearchParams();
+	params.set("handle", handle);
+	params.set("maxTweets", String(options.maxTweets));
+	params.set("maxPages", String(options.maxPages));
+	params.set("maxConversations", String(options.maxConversations));
+	params.set("maxConversationPages", String(options.maxConversationPages));
+	if (options.refresh) {
+		params.set("refresh", "true");
+	}
+	return `/api/profile-analysis?${params.toString()}`;
+}
+
+export async function profileAnalysisRequestError(response: Response) {
+	const status = `${String(response.status)}${response.statusText ? ` ${response.statusText}` : ""}`;
+	let detail = "";
+	try {
+		const contentType = response.headers.get("content-type") ?? "";
+		if (contentType.includes("application/json")) {
+			const payload = (await response.json()) as {
+				error?: unknown;
+				message?: unknown;
+			};
+			if (typeof payload.message === "string") detail = payload.message;
+			else if (typeof payload.error === "string") detail = payload.error;
+		} else {
+			detail = (await response.text()).trim();
+		}
+	} catch {
+		detail = "";
+	}
+	return new Error(
+		detail
+			? `Profile analysis failed (${status}): ${detail}`
+			: `Profile analysis failed (${status})`,
+	);
+}
+
+export function formatProfileAnalysisCounts(
+	context: ProfileAnalysisContext | null,
+) {
+	if (!context) return "xurl profile backfill with cached AI analysis.";
+	return [
+		context.fetchCached ? "cached backfill" : "fresh xurl backfill",
+		`${String(context.counts.tweets)} tweets`,
+		`${String(context.counts.conversationTweets)} conversation tweets`,
+		`${String(context.counts.conversationsScanned)} conversations`,
+	].join(" · ");
+}
+
+export function cleanProfileHandle(value: string) {
+	return value.trim().replace(/^@/, "");
+}
+
+export function useProfileAnalysisStream(handle: string): ProfileAnalysisState {
+	const [markdown, setMarkdown] = useState("");
+	const [context, setContext] = useState<ProfileAnalysisContext | null>(null);
+	const [result, setResult] = useState<ProfileAnalysisRunResult | null>(null);
+	const [status, setStatus] = useState("Ready");
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const abortRef = useRef<AbortController | null>(null);
+	const requestIdRef = useRef(0);
+
+	const run = useCallback(
+		(refresh = false, overrideHandle?: string) => {
+			const trimmed = cleanProfileHandle(overrideHandle ?? handle);
+			if (!trimmed) return;
+			abortRef.current?.abort();
+			const controller = new AbortController();
+			const requestId = requestIdRef.current + 1;
+			requestIdRef.current = requestId;
+			abortRef.current = controller;
+			const isActiveRequest = () =>
+				abortRef.current === controller &&
+				requestIdRef.current === requestId &&
+				!controller.signal.aborted;
+			const requestedHydrationHandles = new Set<string>();
+			const hydratedProfilesByHandle = new Map<string, ProfileRecord>();
+			const rememberHydratedProfiles = (
+				nextContext: ProfileAnalysisContext,
+			) => {
+				for (const profile of nextContext.profiles ?? []) {
+					hydratedProfilesByHandle.set(
+						normalizeProfileHandle(profile.handle),
+						profile,
+					);
+				}
+			};
+			const mergeKnownHydratedProfiles = (
+				nextContext: ProfileAnalysisContext,
+			) =>
+				hydratedProfilesByHandle.size > 0
+					? applyHydratedProfilesToProfileAnalysisContext(nextContext, [
+							...hydratedProfilesByHandle.values(),
+						])
+					: nextContext;
+			const hydrateContext = (
+				nextContext: ProfileAnalysisContext,
+				nextResult?: ProfileAnalysisRunResult,
+			) => {
+				void hydrateProfileAnalysisContext({
+					context: nextContext,
+					analysis: nextResult?.analysis,
+					markdown: nextResult?.markdown,
+					requestedHandles: requestedHydrationHandles,
+				})
+					.then((hydratedContext) => {
+						if (!isActiveRequest()) return;
+						if (hydratedContext === nextContext) return;
+						rememberHydratedProfiles(hydratedContext);
+						const mergedContext = mergeKnownHydratedProfiles(hydratedContext);
+						setContext(mergedContext);
+						if (nextResult) {
+							setResult({
+								...nextResult,
+								context: mergedContext,
+							});
+						}
+					})
+					.catch(() => {
+						// Profile hover hydration is best-effort; analysis remains usable.
+					});
+			};
+			setMarkdown("");
+			setContext(null);
+			setResult(null);
+			setError(null);
+			setLoading(true);
+			setStatus("Starting profile analysis");
+
+			fetch(
+				profileAnalysisUrl(trimmed, {
+					refresh,
+					...DEFAULT_PROFILE_ANALYSIS_LIMITS,
+				}),
+				{ signal: controller.signal },
+			)
+				.then(async (response) => {
+					if (!response.ok) {
+						throw await profileAnalysisRequestError(response);
+					}
+					if (!response.body) {
+						throw new Error("Profile analysis failed: empty response body");
+					}
+					const reader = response.body.getReader();
+					const decoder = new TextDecoder();
+					let buffer = "";
+					const pump = (): Promise<void> =>
+						reader.read().then(({ done, value }) => {
+							if (!isActiveRequest()) return;
+							if (done) return;
+							buffer += decoder.decode(value, { stream: true });
+							let newline = buffer.indexOf("\n");
+							while (newline >= 0) {
+								const line = buffer.slice(0, newline).trim();
+								buffer = buffer.slice(newline + 1);
+								if (line) {
+									const event = JSON.parse(line) as ProfileAnalysisStreamEvent;
+									if (!isActiveRequest()) return;
+									if (event.type === "status") {
+										setStatus(
+											event.detail
+												? `${event.label} · ${event.detail}`
+												: event.label,
+										);
+									} else if (event.type === "start") {
+										setContext(event.context);
+										setStatus(
+											event.cached
+												? "Loading cached analysis"
+												: "Summarizing profile",
+										);
+										hydrateContext(event.context);
+									} else if (event.type === "delta") {
+										setMarkdown((current) => current + event.delta);
+									} else if (event.type === "done") {
+										const mergedContext = mergeKnownHydratedProfiles(
+											event.result.context,
+										);
+										const mergedResult =
+											mergedContext === event.result.context
+												? event.result
+												: {
+														...event.result,
+														context: mergedContext,
+													};
+										setResult(mergedResult);
+										setContext(mergedContext);
+										setMarkdown(event.result.markdown);
+										setStatus(event.result.cached ? "Cached" : "Complete");
+										hydrateContext(mergedContext, mergedResult);
+									} else if (event.type === "error") {
+										setError(event.error);
+									}
+								}
+								newline = buffer.indexOf("\n");
+							}
+							return pump();
+						});
+					return pump();
+				})
+				.catch((cause: unknown) => {
+					if (!isActiveRequest()) return;
+					setError(cause instanceof Error ? cause.message : "Analysis failed");
+				})
+				.finally(() => {
+					if (!isActiveRequest()) return;
+					setLoading(false);
+				});
+		},
+		[handle],
+	);
+
+	useEffect(
+		() => () => {
+			abortRef.current?.abort();
+		},
+		[],
+	);
+
+	return { context, error, loading, markdown, result, run, status };
+}
+
+export function ProfileAnalysisStatusLine({
+	analysis,
+	className = "",
+}: {
+	analysis: ProfileAnalysisState;
+	className?: string;
+}) {
+	return (
+		<div
+			className={`flex items-center gap-2 text-[13px] font-medium text-[var(--ink-soft)] ${className}`}
+		>
+			{analysis.loading ? (
+				<Loader2 className="size-4 animate-spin" strokeWidth={1.8} />
+			) : analysis.result ? (
+				<CheckCircle2 className="size-4" strokeWidth={1.8} />
+			) : (
+				<Sparkles className="size-4" strokeWidth={1.8} />
+			)}
+			<span>{analysis.status}</span>
+		</div>
+	);
+}
+
+export function ProfileAnalysisOutput({
+	analysis,
+	emptyLabel = "No profile selected.",
+}: {
+	analysis: ProfileAnalysisState;
+	emptyLabel?: string;
+}) {
+	return (
+		<>
+			{analysis.error ? (
+				<div className={errorCopyClass}>{analysis.error}</div>
+			) : null}
+
+			{analysis.markdown ? (
+				<div className="max-w-3xl">
+					<MarkdownViewer
+						context={analysis.context}
+						markdown={analysis.markdown}
+					/>
+				</div>
+			) : (
+				<div className="rounded-[8px] border border-[var(--line)] bg-[var(--panel)] p-6 text-[14px] text-[var(--ink-soft)]">
+					{emptyLabel}
+				</div>
+			)}
+		</>
+	);
+}

package/src/components/ProfilePreview.tsx

@@ -1,5 +1,15 @@
-import type { ReactNode } from "react";
+import {
+	Fragment,
+	type ReactNode,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
 import { formatCompactNumber } from "#/lib/present";
+import {
+	collectTweetSegmentsForText,
+	profileDescriptionEntitiesFromXurl,
+} from "#/lib/tweet-render";
 import type { ProfileRecord } from "#/lib/types";
 import {
 	cx,
@@ -11,9 +21,74 @@ import {
 	profilePreviewMetaClass,
 	profilePreviewNameClass,
 	profilePreviewTriggerClass,
+	tweetLinkClass,
 } 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 };
+}
+
+function ProfilePreviewBio({ profile }: { profile: ProfileRecord }) {
+	const segments = collectTweetSegmentsForText(
+		profile.bio,
+		profileDescriptionEntitiesFromXurl(profile.entities),
+	);
+	let cursor = 0;
+
+	return (
+		<span className={profilePreviewBioClass}>
+			{segments.map((segment, index) => {
+				if (
+					segment.kind !== "url" ||
+					segment.start < cursor ||
+					segment.end <= segment.start ||
+					segment.end > profile.bio.length
+				) {
+					return null;
+				}
+				const prefix = profile.bio.slice(cursor, segment.start);
+				cursor = segment.end;
+				const href = safeHttpUrl(segment.expandedUrl);
+				return (
+					<Fragment key={`${segment.url}-${String(index)}`}>
+						{prefix}
+						{href ? (
+							<a
+								className={tweetLinkClass}
+								href={href}
+								rel="noreferrer"
+								target="_blank"
+							>
+								{segment.expandedUrl}
+							</a>
+						) : (
+							profile.bio.slice(segment.start, segment.end)
+						)}
+					</Fragment>
+				);
+			})}
+			{profile.bio.slice(cursor)}
+		</span>
+	);
+}
+
 export function ProfilePreview({
 	profile,
 	children,
@@ -23,17 +98,55 @@ 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);
+	}, []);
+
 	return (
-		<span className={cx(profilePreviewClass, "group", className)}>
+		<span
+			ref={shellRef}
+			className={cx(profilePreviewClass, "group", className)}
+			onFocus={updatePlacement}
+			onPointerEnter={updatePlacement}
+		>
 			<a
 				className={profilePreviewTriggerClass}
-				href={`https://x.com/${profile.handle}`}
-				rel="noreferrer"
-				target="_blank"
+				href={`/profiles/${encodeURIComponent(profile.handle)}`}
 			>
 				{children}
 			</a>
-			<span className={profilePreviewCardClass}>
+			<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}
@@ -48,9 +161,7 @@ export function ProfilePreview({
 						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
 					</span>
 				</span>
-				{profile.bio ? (
-					<span className={profilePreviewBioClass}>{profile.bio}</span>
-				) : null}
+				{profile.bio ? <ProfilePreviewBio profile={profile} /> : null}
 				<span className={profilePreviewMetaClass}>
 					{formatCompactNumber(profile.followersCount)} followers
 				</span>

package/src/components/SavedTimelineView.tsx

@@ -41,14 +41,24 @@ export function SavedTimelineView({
 	searchPlaceholder,
 }: SavedTimelineViewProps) {
 	const [search, setSearch] = useState("");
-	const { meta, items, loading, error, retry, refreshLocalView, replyToTweet } =
-		useTimelineRouteData({
-			resource: "home",
-			search,
-			errorFallback: `${TITLES[filter]} unavailable`,
-			likedOnly: filter === "liked",
-			bookmarkedOnly: filter === "bookmarked",
-		});
+	const {
+		meta,
+		items,
+		loading,
+		error,
+		retry,
+		refreshLocalView,
+		replyToTweet,
+		hasMore,
+		loadingMore,
+		loadMore,
+	} = useTimelineRouteData({
+		resource: "home",
+		search,
+		errorFallback: `${TITLES[filter]} unavailable`,
+		likedOnly: filter === "liked",
+		bookmarkedOnly: filter === "bookmarked",
+	});
 
 	const subtitle = useMemo(() => {
 		if (!meta) {
@@ -126,6 +136,18 @@ export function SavedTimelineView({
 							showReplyControls={false}
 						/>
 					))}
+					{!loading && !error && hasMore ? (
+						<div className="flex justify-center py-4">
+							<button
+								className="rounded-full bg-[var(--accent)] px-5 py-1.5 text-[14px] font-bold text-white disabled:opacity-60"
+								disabled={loadingMore}
+								onClick={loadMore}
+								type="button"
+							>
+								{loadingMore ? "Loading…" : "Load more"}
+							</button>
+						</div>
+					) : null}
 				</section>
 			</ConversationSurfaceScope>
 		</>

package/src/components/SyncNowButton.tsx

@@ -41,8 +41,11 @@ export function SyncNowButton({
 		[accounts],
 	);
 	const accountId = globalAccountId ?? defaultAccountId;
-	const accountAwareSync = kind !== "timeline" && kind !== "dms";
-	const waitingForAccount = accountAwareSync && accounts === undefined;
+	const accountAwareSync = kind !== "dms";
+	const waitingForAccount =
+		accountAwareSync &&
+		accounts === undefined &&
+		(showAccountPicker || kind !== "timeline");
 	const birdOnlyWrongAccount =
 		!accountAwareSync &&
 		accountId !== undefined &&