birdclaw 0.8.2 → 0.8.4

package/src/routes/profile-analyze.tsx

@@ -1,112 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { Loader2, RefreshCw, Search, UserSearch } from "lucide-react";
-import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
-import {
-	cleanProfileHandle,
-	formatProfileAnalysisCounts,
-	ProfileAnalysisOutput,
-	ProfileAnalysisStatusLine,
-	useProfileAnalysisStream,
-} from "#/components/ProfileAnalysisStream";
-import {
-	cx,
-	pageHeaderActionsClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	primaryButtonClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	secondaryButtonClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/profile-analyze")({
-	component: ProfileAnalyzeRoute,
-	validateSearch: (search: Record<string, unknown>) => ({
-		handle: typeof search.handle === "string" ? search.handle : "",
-	}),
-});
-
-function ProfileAnalyzeRoute() {
-	const search = Route.useSearch();
-	const [handle, setHandle] = useState(cleanProfileHandle(search.handle));
-	const submittedHandle = useMemo(() => cleanProfileHandle(handle), [handle]);
-	const analysis = useProfileAnalysisStream(submittedHandle);
-	const autoRunHandleRef = useRef("");
-	const runAnalysisRef = useRef(analysis.run);
-
-	useEffect(() => {
-		runAnalysisRef.current = analysis.run;
-	}, [analysis.run]);
-
-	useEffect(() => {
-		const urlHandle = cleanProfileHandle(search.handle);
-		setHandle(urlHandle);
-		if (urlHandle && autoRunHandleRef.current !== urlHandle) {
-			autoRunHandleRef.current = urlHandle;
-			runAnalysisRef.current(false, urlHandle);
-		}
-	}, [search.handle]);
-
-	const submit = (event: FormEvent<HTMLFormElement>) => {
-		event.preventDefault();
-		analysis.run(false);
-	};
-
-	return (
-		<section className="flex min-h-screen flex-col gap-6 px-4 py-8">
-			<header className={cx(pageHeaderClass, "border-b-0")}>
-				<div className={pageHeaderRowClass}>
-					<div>
-						<h1 className={pageTitleClass}>Profile Analyse</h1>
-						<p className={pageSubtitleClass}>
-							{formatProfileAnalysisCounts(analysis.context)}
-						</p>
-					</div>
-					<div className={pageHeaderActionsClass}>
-						<button
-							className={secondaryButtonClass}
-							disabled={!submittedHandle || analysis.loading}
-							onClick={() => analysis.run(true)}
-							type="button"
-						>
-							<RefreshCw className="size-4" strokeWidth={1.8} />
-							Refresh
-						</button>
-					</div>
-				</div>
-				<form
-					className="mt-5 flex flex-col gap-3 sm:flex-row"
-					onSubmit={submit}
-				>
-					<label className={cx(searchFieldShellClass, "min-w-0 flex-1")}>
-						<Search className={searchFieldIconClass} strokeWidth={1.8} />
-						<input
-							className={searchFieldInputClass}
-							onChange={(event) => setHandle(event.target.value)}
-							placeholder="handle"
-							value={handle}
-						/>
-					</label>
-					<button
-						className={primaryButtonClass}
-						disabled={!submittedHandle || analysis.loading}
-						type="submit"
-					>
-						{analysis.loading ? (
-							<Loader2 className="size-4 animate-spin" strokeWidth={1.8} />
-						) : (
-							<UserSearch className="size-4" strokeWidth={1.8} />
-						)}
-						Analyse
-					</button>
-				</form>
-			</header>
-
-			<ProfileAnalysisStatusLine analysis={analysis} />
-			<ProfileAnalysisOutput analysis={analysis} />
-		</section>
-	);
-}

package/src/routes/profiles.$handle.tsx

@@ -1,228 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { ExternalLink, Loader2, RefreshCw } from "lucide-react";
-import { useEffect, useRef } from "react";
-import { AvatarChip } from "#/components/AvatarChip";
-import { TweetRichText } from "#/components/TweetRichText";
-import {
-	cleanProfileHandle,
-	formatProfileAnalysisCounts,
-	ProfileAnalysisOutput,
-	ProfileAnalysisStatusLine,
-	useProfileAnalysisStream,
-} from "#/components/ProfileAnalysisStream";
-import { formatCompactNumber } from "#/lib/present";
-import type { ProfileAnalysisContext } from "#/lib/profile-analysis";
-import { profileDescriptionEntitiesFromXurl } from "#/lib/tweet-render";
-import type { ProfileRecord, TweetEntities } from "#/lib/types";
-
-export const Route = createFileRoute("/profiles/$handle")({
-	component: ProfilesHandleRoute,
-});
-
-const profileHeaderButtonClass =
-	"inline-flex items-center justify-center gap-1.5 rounded-full border border-[var(--line-strong)] bg-[var(--bg)] px-4 py-1.5 text-[14px] font-bold text-[var(--ink)] shadow-sm transition-colors duration-150 hover:bg-[var(--bg-hover)] disabled:cursor-default disabled:opacity-55";
-const profileMentionRe = /(^|[^\w@./])@([A-Za-z0-9_]{1,15})\b/g;
-
-function stableHue(value: string) {
-	let hash = 0;
-	for (const char of value) {
-		hash = (hash * 31 + char.charCodeAt(0)) % 360;
-	}
-	return hash;
-}
-
-function ProfilesHandleRoute() {
-	const { handle } = Route.useParams();
-	return <ProfileRouteView handle={handle} />;
-}
-
-function profilesByHandleFromContext(context: ProfileAnalysisContext | null) {
-	const profilesByHandle = new Map<string, ProfileRecord>();
-	if (!context) return profilesByHandle;
-	profilesByHandle.set(context.profile.handle.toLowerCase(), context.profile);
-	for (const profile of context.profiles ?? []) {
-		profilesByHandle.set(profile.handle.toLowerCase(), profile);
-	}
-	for (const tweet of context.conversations) {
-		profilesByHandle.set(tweet.author.toLowerCase(), {
-			id: tweet.profileId,
-			handle: tweet.author,
-			displayName: tweet.name || tweet.author,
-			bio: tweet.bio,
-			followersCount: tweet.followersCount,
-			avatarHue: 210,
-			avatarUrl: tweet.avatarUrl,
-			createdAt: tweet.createdAt,
-		});
-	}
-	return profilesByHandle;
-}
-
-function profileBioEntities(
-	profile: ProfileRecord,
-	profilesByHandle: Map<string, ProfileRecord>,
-) {
-	const entities = profileDescriptionEntitiesFromXurl(profile.entities);
-	const mentions = entities.mentions ?? [];
-	const existingMentionRanges = new Set(
-		mentions.map((mention) => `${mention.start}:${mention.end}`),
-	);
-	for (const match of profile.bio.matchAll(profileMentionRe)) {
-		const start = (match.index ?? 0) + match[1].length;
-		const username = match[2];
-		const end = start + username.length + 1;
-		const key = `${start}:${end}`;
-		if (existingMentionRanges.has(key)) continue;
-		const linkedProfile = profilesByHandle.get(username.toLowerCase());
-		mentions.push({
-			username,
-			start,
-			end,
-			...(linkedProfile ? { profile: linkedProfile } : {}),
-		});
-	}
-	const next: TweetEntities = {
-		...entities,
-		...(mentions.length ? { mentions } : {}),
-	};
-	return next;
-}
-
-function ProfileBioText({
-	profile,
-	profilesByHandle,
-}: {
-	profile: ProfileRecord;
-	profilesByHandle: Map<string, ProfileRecord>;
-}) {
-	return (
-		<TweetRichText
-			className="m-0 max-w-2xl whitespace-pre-wrap text-[15px] leading-[1.45] text-[var(--ink)] [overflow-wrap:anywhere]"
-			entities={profileBioEntities(profile, profilesByHandle)}
-			text={profile.bio}
-			urlLabel="expanded"
-		/>
-	);
-}
-
-export function ProfileRouteView({ handle }: { handle: string }) {
-	const cleanHandle = cleanProfileHandle(handle);
-	const analysis = useProfileAnalysisStream(cleanHandle);
-	const autoRunHandleRef = useRef("");
-	const runAnalysisRef = useRef(analysis.run);
-	const profile = analysis.context?.profile;
-	const displayName = profile?.displayName || `@${cleanHandle}`;
-	const bio = profile?.bio ?? "";
-	const profilesByHandle = profilesByHandleFromContext(analysis.context);
-
-	useEffect(() => {
-		runAnalysisRef.current = analysis.run;
-	}, [analysis.run]);
-
-	useEffect(() => {
-		if (cleanHandle && autoRunHandleRef.current !== cleanHandle) {
-			autoRunHandleRef.current = cleanHandle;
-			runAnalysisRef.current(false, cleanHandle);
-		}
-	}, [cleanHandle]);
-
-	return (
-		<section className="flex min-h-screen flex-col">
-			<header className="border-b border-[var(--line)] bg-[var(--bg)]">
-				<div
-					className="h-32 bg-[linear-gradient(135deg,color-mix(in_srgb,var(--bg-active)_68%,var(--accent)_32%),color-mix(in_srgb,var(--bg)_70%,var(--accent)_30%))]"
-					data-testid="profile-cover"
-				/>
-				<div className="px-4 pb-5">
-					<div className="flex flex-col gap-4">
-						<div
-							className="-mt-8 flex items-start justify-between gap-3"
-							data-testid="profile-avatar-overlap"
-						>
-							<div className="flex min-w-0 items-start gap-3">
-								<span className="inline-grid rounded-full ring-4 ring-[var(--bg)]">
-									<AvatarChip
-										avatarUrl={profile?.avatarUrl ?? undefined}
-										hue={profile?.avatarHue ?? stableHue(cleanHandle)}
-										name={displayName}
-										profileId={profile?.id}
-										size="large"
-									/>
-								</span>
-								<div className="min-w-0 pb-1 pt-9">
-									<h1 className="m-0 truncate text-[24px] font-bold text-[var(--ink)]">
-										{displayName}
-									</h1>
-									<div className="truncate text-[14px] text-[var(--ink-soft)]">
-										@{profile?.handle ?? cleanHandle}
-									</div>
-								</div>
-							</div>
-							<div className="mt-10 flex shrink-0 items-center gap-2">
-								<a
-									className={profileHeaderButtonClass}
-									href={`https://x.com/${encodeURIComponent(profile?.handle ?? cleanHandle)}`}
-									rel="noreferrer"
-									target="_blank"
-								>
-									<ExternalLink className="size-4" strokeWidth={1.8} />X
-								</a>
-								<button
-									className={profileHeaderButtonClass}
-									disabled={!cleanHandle || analysis.loading}
-									onClick={() => analysis.run(true, cleanHandle)}
-									type="button"
-								>
-									{analysis.loading ? (
-										<Loader2
-											className="size-4 animate-spin"
-											strokeWidth={1.8}
-										/>
-									) : (
-										<RefreshCw className="size-4" strokeWidth={1.8} />
-									)}
-									Refresh
-								</button>
-							</div>
-						</div>
-
-						{profile && bio ? (
-							<ProfileBioText
-								profile={profile}
-								profilesByHandle={profilesByHandle}
-							/>
-						) : null}
-
-						<div className="flex flex-wrap gap-x-4 gap-y-1 text-[13px] text-[var(--ink-soft)]">
-							{profile ? (
-								<>
-									<span>
-										<strong className="text-[var(--ink)]">
-											{formatCompactNumber(profile.followersCount)}
-										</strong>{" "}
-										followers
-									</span>
-									<span>
-										<strong className="text-[var(--ink)]">
-											{formatCompactNumber(profile.followingCount ?? 0)}
-										</strong>{" "}
-										following
-									</span>
-								</>
-							) : null}
-							<span>{formatProfileAnalysisCounts(analysis.context)}</span>
-						</div>
-					</div>
-				</div>
-			</header>
-
-			<div className="flex flex-col gap-5 px-4 py-5">
-				<ProfileAnalysisStatusLine analysis={analysis} />
-				<ProfileAnalysisOutput
-					analysis={analysis}
-					emptyLabel={`Preparing @${cleanHandle}.`}
-				/>
-			</div>
-		</section>
-	);
-}

package/src/routes/rate-limits.tsx

@@ -1,309 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import {
-	Activity,
-	AlertTriangle,
-	Clock3,
-	Gauge,
-	RefreshCw,
-	ShieldCheck,
-} from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type {
-	XurlRateLimitEndpointSnapshot,
-	XurlRateLimitEvent,
-	XurlRateLimitSnapshot,
-} from "#/lib/xurl-rate-limits";
-import {
-	cx,
-	errorCopyClass,
-	pageHeaderActionsClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	secondaryButtonClass,
-	statusCopyClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/rate-limits")({
-	component: RateLimitsRoute,
-});
-
-async function fetchRateLimits() {
-	const response = await fetch("/api/xurl-rate-limits");
-	if (!response.ok) {
-		throw new Error(`Rate limits request failed (${String(response.status)})`);
-	}
-	return (await response.json()) as XurlRateLimitSnapshot;
-}
-
-function formatNumber(value: number) {
-	return new Intl.NumberFormat().format(value);
-}
-
-function formatAge(value: string | null, nowMs: number) {
-	if (!value) return "never";
-	const time = new Date(value).getTime();
-	if (!Number.isFinite(time)) return "unknown";
-	const seconds = Math.max(0, Math.round((nowMs - time) / 1000));
-	if (seconds < 60) return `${String(seconds)}s ago`;
-	const minutes = Math.round(seconds / 60);
-	if (minutes < 60) return `${String(minutes)}m ago`;
-	const hours = Math.round(minutes / 60);
-	return `${String(hours)}h ago`;
-}
-
-function formatReset(value: string | null, nowMs: number) {
-	if (!value) return "idle";
-	const time = new Date(value).getTime();
-	if (!Number.isFinite(time)) return "unknown";
-	const seconds = Math.max(0, Math.round((time - nowMs) / 1000));
-	if (seconds < 60) return `${String(seconds)}s`;
-	return `${String(Math.round(seconds / 60))}m`;
-}
-
-function statusTone(status: XurlRateLimitEndpointSnapshot["status"]) {
-	if (status === "critical") {
-		return "border-[color:color-mix(in_srgb,var(--alert)_55%,var(--line))] bg-[var(--alert-soft)] text-[var(--alert)]";
-	}
-	if (status === "warning") {
-		return "border-[color:color-mix(in_srgb,#f59e0b_55%,var(--line))] bg-[color:color-mix(in_srgb,#f59e0b_13%,var(--bg))] text-[color:color-mix(in_srgb,#f59e0b_85%,var(--ink))]";
-	}
-	if (status === "quiet") {
-		return "border-[var(--line)] bg-[var(--bg-active)] text-[var(--ink-soft)]";
-	}
-	return "border-[color:color-mix(in_srgb,#22c55e_45%,var(--line))] bg-[color:color-mix(in_srgb,#22c55e_12%,var(--bg))] text-[color:color-mix(in_srgb,#22c55e_80%,var(--ink))]";
-}
-
-function statusIcon(status: XurlRateLimitEndpointSnapshot["status"]) {
-	if (status === "critical") return AlertTriangle;
-	if (status === "warning") return Clock3;
-	if (status === "quiet") return Gauge;
-	return ShieldCheck;
-}
-
-function SummaryTile({
-	icon: Icon,
-	label,
-	value,
-}: {
-	icon: typeof Activity;
-	label: string;
-	value: string;
-}) {
-	return (
-		<div className="flex min-w-0 flex-col gap-2 border-b border-[var(--line)] px-4 py-3 sm:border-r">
-			<div className="flex items-center gap-2 text-[13px] font-medium text-[var(--ink-soft)]">
-				<Icon className="size-4" strokeWidth={1.8} />
-				<span>{label}</span>
-			</div>
-			<div className="truncate text-[24px] font-bold tracking-tight text-[var(--ink)]">
-				{value}
-			</div>
-		</div>
-	);
-}
-
-function EndpointRow({
-	endpoint,
-	nowMs,
-}: {
-	endpoint: XurlRateLimitEndpointSnapshot;
-	nowMs: number;
-}) {
-	const Icon = statusIcon(endpoint.status);
-	return (
-		<div className="grid gap-3 border-b border-[var(--line)] px-4 py-4 min-[760px]:grid-cols-[minmax(0,1.25fr)_minmax(180px,0.75fr)_92px]">
-			<div className="min-w-0">
-				<div className="flex flex-wrap items-center gap-2">
-					<span
-						className={cx(
-							"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[12px] font-bold capitalize",
-							statusTone(endpoint.status),
-						)}
-					>
-						<Icon className="size-3.5" strokeWidth={1.9} />
-						{endpoint.status}
-					</span>
-					<span className="font-bold text-[var(--ink)]">{endpoint.label}</span>
-				</div>
-				<div className="mt-1 font-mono text-[12px] text-[var(--ink-soft)]">
-					{endpoint.method} {endpoint.path}
-				</div>
-				<div className="mt-1 text-[13px] text-[var(--ink-soft)]">
-					{endpoint.description}
-				</div>
-			</div>
-			<div className="min-w-0">
-				<div className="mb-2 flex items-center justify-between gap-3 text-[13px] text-[var(--ink-soft)]">
-					<span>{formatNumber(endpoint.callsLastWindow)} calls</span>
-					<span>{formatNumber(endpoint.estimatedRemaining)} est. left</span>
-				</div>
-				<div className="h-2 overflow-hidden rounded-full bg-[var(--bg-active)]">
-					<div
-						className="h-full rounded-full bg-[var(--accent)]"
-						style={{ width: `${String(endpoint.usagePercent)}%` }}
-					/>
-				</div>
-				<div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[12px] text-[var(--ink-soft)]">
-					<span>{formatNumber(endpoint.perUserLimit)}/user</span>
-					<span>{formatNumber(endpoint.perAppLimit)}/app</span>
-					<span>{String(endpoint.rateLimitedLastWindow)} 429s</span>
-					<span>{String(endpoint.errorsLastWindow)} errors</span>
-				</div>
-			</div>
-			<div className="flex min-[760px]:flex-col gap-2 text-[12px] text-[var(--ink-soft)]">
-				<span>last {formatAge(endpoint.lastEventAt, nowMs)}</span>
-				<span>reset {formatReset(endpoint.estimatedResetAt, nowMs)}</span>
-			</div>
-		</div>
-	);
-}
-
-function EventRow({
-	event,
-	nowMs,
-}: {
-	event: XurlRateLimitEvent;
-	nowMs: number;
-}) {
-	return (
-		<div className="grid gap-2 border-b border-[var(--line)] px-4 py-3 text-[13px] min-[760px]:grid-cols-[120px_minmax(0,1fr)_120px]">
-			<div className="font-bold capitalize text-[var(--ink)]">
-				{event.status.replace("_", " ")}
-			</div>
-			<div className="min-w-0">
-				<div className="truncate font-mono text-[12px] text-[var(--ink-soft)]">
-					{event.endpoint}
-				</div>
-				<div className="truncate text-[var(--ink-soft)]">
-					{event.source}
-					{event.handle ? ` · @${event.handle}` : ""}
-				</div>
-				{event.detail ? (
-					<div className="mt-1 line-clamp-2 break-words text-[var(--ink-soft)]">
-						{event.detail}
-					</div>
-				) : null}
-			</div>
-			<div className="text-[var(--ink-soft)]">{formatAge(event.at, nowMs)}</div>
-		</div>
-	);
-}
-
-function RateLimitsRoute() {
-	const [snapshot, setSnapshot] = useState<XurlRateLimitSnapshot | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(true);
-	const nowMs = useMemo(() => Date.now(), [snapshot]);
-
-	const load = useCallback(() => {
-		setLoading(true);
-		setError(null);
-		fetchRateLimits()
-			.then(setSnapshot)
-			.catch((cause: unknown) => {
-				setError(cause instanceof Error ? cause.message : "Rate limits failed");
-			})
-			.finally(() => setLoading(false));
-	}, []);
-
-	useEffect(() => {
-		load();
-	}, [load]);
-
-	return (
-		<section className="flex min-h-screen flex-col">
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div>
-						<h1 className={pageTitleClass}>Rate Limits</h1>
-						<p className={pageSubtitleClass}>
-							Observed xurl calls with X API 15-minute windows.
-						</p>
-					</div>
-					<div className={pageHeaderActionsClass}>
-						<a
-							className={secondaryButtonClass}
-							href={
-								snapshot?.docsUrl ??
-								"https://docs.x.com/x-api/fundamentals/rate-limits"
-							}
-							rel="noreferrer"
-							target="_blank"
-						>
-							<Gauge className="size-4" strokeWidth={1.8} />
-							Docs
-						</a>
-						<button
-							className={secondaryButtonClass}
-							disabled={loading}
-							onClick={load}
-							type="button"
-						>
-							<RefreshCw
-								className={cx("size-4", loading && "animate-spin")}
-								strokeWidth={1.8}
-							/>
-							Refresh
-						</button>
-					</div>
-				</div>
-			</header>
-
-			{error ? <div className={errorCopyClass}>{error}</div> : null}
-
-			{snapshot ? (
-				<>
-					<div className="grid border-b border-[var(--line)] sm:grid-cols-2 min-[1040px]:grid-cols-4">
-						<SummaryTile
-							icon={Activity}
-							label="Calls in window"
-							value={formatNumber(snapshot.summary.totalCallsLastWindow)}
-						/>
-						<SummaryTile
-							icon={AlertTriangle}
-							label="429s in window"
-							value={formatNumber(snapshot.summary.rateLimitedLastWindow)}
-						/>
-						<SummaryTile
-							icon={Clock3}
-							label="Retry policy"
-							value={`${String(snapshot.throttle.rateLimitMaxRetries)} x ${String(Math.round(snapshot.throttle.rateLimitRetryMs / 1000))}s`}
-						/>
-						<SummaryTile
-							icon={Gauge}
-							label="Conversation delay"
-							value={`${String(snapshot.throttle.conversationDelayMs)}ms`}
-						/>
-					</div>
-
-					<div className="border-b border-[var(--line)]">
-						{snapshot.endpoints.map((endpoint) => (
-							<EndpointRow
-								endpoint={endpoint}
-								key={endpoint.key}
-								nowMs={nowMs}
-							/>
-						))}
-					</div>
-
-					<div className="px-4 py-3 text-[13px] font-bold text-[var(--ink)]">
-						Recent xurl events
-					</div>
-					{snapshot.events.length > 0 ? (
-						<div>
-							{snapshot.events.slice(0, 30).map((event) => (
-								<EventRow event={event} key={event.id} nowMs={nowMs} />
-							))}
-						</div>
-					) : (
-						<p className={statusCopyClass}>No observed xurl calls yet.</p>
-					)}
-				</>
-			) : loading ? (
-				<p className={statusCopyClass}>Loading rate limits...</p>
-			) : null}
-		</section>
-	);
-}