birdclaw 0.5.1 → 0.7.0

package/src/components/AccountSwitcher.tsx

@@ -0,0 +1,186 @@
+import { Check, ChevronDown } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { fetchQueryEnvelope } from "#/lib/api-client";
+import type { AccountRecord } from "#/lib/types";
+import { cx } from "#/lib/ui";
+import { AvatarChip } from "./AvatarChip";
+import { setStoredAccountId, useSelectedAccountId } from "./account-selection";
+
+function hueForAccount(account: AccountRecord) {
+	let hash = 0;
+	const value = account.handle || account.name || account.id;
+	for (const character of value) {
+		hash = (hash * 31 + character.charCodeAt(0)) % 360;
+	}
+	return hash;
+}
+
+function accountLabel(account: AccountRecord) {
+	return account.handle || account.name || account.id;
+}
+
+function avatarName(account: AccountRecord) {
+	return account.name || account.handle || account.id;
+}
+
+export function AccountSwitcher({ action }: { action?: ReactNode } = {}) {
+	const [accounts, setAccounts] = useState<AccountRecord[]>([]);
+	const [open, setOpen] = useState(false);
+	const switcherRef = useRef<HTMLDivElement>(null);
+	const selectedAccountId = useSelectedAccountId(accounts);
+	const selectedAccount = useMemo(
+		() => accounts.find((account) => account.id === selectedAccountId),
+		[accounts, selectedAccountId],
+	);
+
+	useEffect(() => {
+		let active = true;
+		fetchQueryEnvelope()
+			.then((meta) => {
+				if (active) setAccounts(meta.accounts);
+			})
+			.catch(() => {
+				if (active) setAccounts([]);
+			});
+		return () => {
+			active = false;
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!open) return;
+
+		const closeOnOutside = (event: PointerEvent) => {
+			if (!switcherRef.current?.contains(event.target as Node)) {
+				setOpen(false);
+			}
+		};
+		const closeOnEscape = (event: KeyboardEvent) => {
+			if (event.key === "Escape") setOpen(false);
+		};
+		window.addEventListener("pointerdown", closeOnOutside);
+		window.addEventListener("keydown", closeOnEscape);
+		return () => {
+			window.removeEventListener("pointerdown", closeOnOutside);
+			window.removeEventListener("keydown", closeOnEscape);
+		};
+	}, [open]);
+
+	if (accounts.length < 2 || !selectedAccount) {
+		return action ? (
+			<div className="flex justify-center px-1 min-[1100px]:justify-start min-[1100px]:px-2">
+				{action}
+			</div>
+		) : null;
+	}
+
+	return (
+		<div ref={switcherRef} className="relative px-1 min-[1100px]:px-2">
+			<div
+				className={cx(
+					"group grid w-full justify-items-center gap-2 text-[var(--ink)] min-[1100px]:flex min-[1100px]:h-11 min-[1100px]:items-center min-[1100px]:justify-start min-[1100px]:gap-1 min-[1100px]:rounded-full min-[1100px]:border min-[1100px]:border-transparent min-[1100px]:bg-transparent min-[1100px]:p-0.5 min-[1100px]:transition-[background,border-color,box-shadow] min-[1100px]:duration-150 min-[1100px]:hover:bg-[var(--bg-hover)]",
+					open &&
+						"min-[1100px]:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] min-[1100px]:bg-[var(--bg-active)] min-[1100px]:shadow-[0_0_0_1px_color-mix(in_srgb,var(--accent)_20%,transparent)]",
+				)}
+			>
+				<button
+					type="button"
+					aria-expanded={open}
+					aria-haspopup="listbox"
+					aria-label={`Active account: ${accountLabel(selectedAccount)}`}
+					className="flex size-11 min-w-0 flex-none items-center justify-center gap-2 rounded-full px-1 py-1 text-left transition-colors duration-150 hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_srgb,var(--accent)_28%,transparent)] min-[1100px]:h-auto min-[1100px]:w-auto min-[1100px]:flex-1 min-[1100px]:justify-start min-[1100px]:hover:bg-transparent"
+					onClick={() => setOpen((value) => !value)}
+				>
+					<AvatarChip
+						avatarUrl={selectedAccount.avatarUrl}
+						hue={selectedAccount.avatarHue ?? hueForAccount(selectedAccount)}
+						name={avatarName(selectedAccount)}
+						profileId={selectedAccount.profileId}
+						size="small"
+					/>
+					<span className="hidden min-w-0 flex-1 flex-col leading-tight min-[1100px]:flex">
+						<span className="truncate text-[14px] font-bold">
+							{accountLabel(selectedAccount)}
+						</span>
+						<span className="truncate text-[11px] font-medium text-[var(--ink-soft)]">
+							active account
+						</span>
+					</span>
+				</button>
+				{action ? (
+					<div className="order-first shrink-0 min-[1100px]:order-none">
+						{action}
+					</div>
+				) : null}
+				<button
+					type="button"
+					aria-expanded={open}
+					aria-haspopup="listbox"
+					aria-label="Switch account"
+					className="hidden size-8 shrink-0 items-center justify-center rounded-full text-[var(--ink-soft)] transition-colors duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_srgb,var(--accent)_28%,transparent)] min-[1100px]:inline-flex"
+					onClick={() => setOpen((value) => !value)}
+				>
+					<ChevronDown
+						className={cx(
+							"size-4 transition-transform duration-150",
+							open && "rotate-180",
+						)}
+						strokeWidth={2.2}
+						aria-hidden="true"
+					/>
+				</button>
+			</div>
+			{open ? (
+				<div
+					role="listbox"
+					aria-label="Active account"
+					className="absolute bottom-[calc(100%+8px)] left-1 z-50 w-[228px] overflow-hidden rounded-2xl border border-[var(--line)] bg-[color:color-mix(in_srgb,var(--bg)_96%,black_4%)] py-1.5 shadow-[0_18px_48px_rgba(0,0,0,.28)] backdrop-blur min-[1100px]:left-2"
+				>
+					{accounts.map((account) => {
+						const selected = account.id === selectedAccount.id;
+						return (
+							<button
+								key={account.id}
+								type="button"
+								role="option"
+								aria-selected={selected}
+								className={cx(
+									"flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors duration-150 hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-active)] focus-visible:outline-none",
+									selected && "bg-[var(--accent-soft)]",
+								)}
+								onClick={() => {
+									setStoredAccountId(account.id);
+									setOpen(false);
+								}}
+							>
+								<AvatarChip
+									avatarUrl={account.avatarUrl}
+									hue={account.avatarHue ?? hueForAccount(account)}
+									name={avatarName(account)}
+									profileId={account.profileId}
+									size="small"
+								/>
+								<span className="min-w-0 flex-1">
+									<span className="block truncate text-[14px] font-bold text-[var(--ink)]">
+										{accountLabel(account)}
+									</span>
+									<span className="block truncate text-[12px] text-[var(--ink-soft)]">
+										{account.name || account.id}
+									</span>
+								</span>
+								{selected ? (
+									<Check
+										className="size-4 shrink-0 text-[var(--accent)]"
+										strokeWidth={2.4}
+										aria-hidden="true"
+									/>
+								) : null}
+							</button>
+						);
+					})}
+				</div>
+			) : null}
+		</div>
+	);
+}

package/src/components/AppNav.tsx

@@ -2,58 +2,79 @@ import { Link, useRouterState } from "@tanstack/react-router";
 import {
 	Bell,
 	Bookmark,
+	CalendarDays,
+	Database,
+	Gauge,
+	Globe2,
 	Heart,
 	Home,
 	Inbox,
 	Link as LinkIcon,
 	Mail,
+	MessagesSquare,
 	ShieldOff,
+	UserSearch,
 } from "lucide-react";
 import {
 	cx,
 	navLinkActiveClass,
 	navLinkClass,
+	navLinkCompactClass,
 	navLinkIconClass,
 	navLinkLabelClass,
+	navLinkLabelCompactClass,
 	sidebarBrandClass,
 	sidebarBrandCopyClass,
+	sidebarBrandCopyCompactClass,
 	sidebarBrandMarkClass,
 	sidebarBrandTaglineClass,
 	sidebarBrandTitleClass,
+	sidebarShellCompactClass,
 	sidebarFooterClass,
 	sidebarNavClass,
 	sidebarShellClass,
 } from "#/lib/ui";
+import { AccountSwitcher } from "./AccountSwitcher";
 import { BirdclawMark } from "./BrandMark";
 import { ThemeSlider } from "./ThemeSlider";
 
 const links = [
 	{ to: "/inbox", label: "Inbox", icon: Inbox },
+	{ to: "/today", label: "Today", icon: CalendarDays },
+	{ to: "/discuss", label: "Discuss", icon: MessagesSquare },
+	{ to: "/profile-analyze", label: "Analyse", icon: UserSearch },
+	{ to: "/network-map", label: "Map", icon: Globe2 },
+	{ to: "/data-sources", label: "Sources", icon: Database },
 	{ to: "/", label: "Home", icon: Home },
 	{ to: "/mentions", label: "Mentions", icon: Bell },
 	{ to: "/likes", label: "Likes", icon: Heart },
 	{ to: "/bookmarks", label: "Bookmarks", icon: Bookmark },
 	{ to: "/links", label: "Links", icon: LinkIcon },
+	{ to: "/rate-limits", label: "Rate Limits", icon: Gauge },
 	{ to: "/dms", label: "DMs", icon: Mail },
 	{ to: "/blocks", label: "Blocks", icon: ShieldOff },
 ] as const;
 
-export function AppNav() {
+export function AppNav({ compact = false }: { compact?: boolean }) {
 	const pathname = useRouterState({
 		select: (state) => state.location.pathname,
 	});
 
 	return (
-		<aside className={sidebarShellClass}>
+		<aside className={compact ? sidebarShellCompactClass : sidebarShellClass}>
 			<div className="flex flex-col">
 				<Link to="/" className={sidebarBrandClass}>
 					<span className={sidebarBrandMarkClass}>
 						<BirdclawMark className="size-10" />
 					</span>
-					<span className={sidebarBrandCopyClass}>
+					<span
+						className={
+							compact ? sidebarBrandCopyCompactClass : sidebarBrandCopyClass
+						}
+					>
 						<span className={sidebarBrandTitleClass}>birdclaw</span>
 						<span className={sidebarBrandTaglineClass}>
-							Fast search for your Twitter archive.
+							Fast search for your archive.
 						</span>
 					</span>
 				</Link>
@@ -66,7 +87,10 @@ export function AppNav() {
 								key={link.to}
 								to={link.to}
 								aria-label={link.label}
-								className={cx(navLinkClass, active && navLinkActiveClass)}
+								className={cx(
+									compact ? navLinkCompactClass : navLinkClass,
+									active && navLinkActiveClass,
+								)}
 							>
 								<Icon
 									className={navLinkIconClass}
@@ -74,14 +98,20 @@ export function AppNav() {
 									strokeWidth={active ? 2.4 : 1.8}
 									aria-hidden="true"
 								/>
-								<span className={navLinkLabelClass}>{link.label}</span>
+								<span
+									className={
+										compact ? navLinkLabelCompactClass : navLinkLabelClass
+									}
+								>
+									{link.label}
+								</span>
 							</Link>
 						);
 					})}
 				</nav>
 			</div>
 			<div className={sidebarFooterClass}>
-				<ThemeSlider />
+				<AccountSwitcher action={<ThemeSlider compact />} />
 			</div>
 		</aside>
 	);

package/src/components/AvatarChip.tsx

@@ -21,9 +21,7 @@ export function AvatarChip({
 	size?: "default" | "large" | "small";
 }) {
 	const avatarSrc =
-		profileId && avatarUrl
-			? `/api/avatar?profileId=${encodeURIComponent(profileId)}`
-			: null;
+		profileId && avatarUrl ? avatarPath(profileId, avatarUrl) : null;
 	const [failedSrc, setFailedSrc] = useState<string | null>(null);
 	const showImage = avatarSrc && failedSrc !== avatarSrc;
 
@@ -50,3 +48,11 @@ export function AvatarChip({
 		</span>
 	);
 }
+
+function avatarPath(profileId: string, avatarUrl: string) {
+	const query = new URLSearchParams({
+		profileId,
+		v: avatarUrl,
+	});
+	return `/api/avatar?${query.toString()}`;
+}

package/src/components/DmWorkspace.tsx

@@ -19,6 +19,7 @@ import {
 	dmListPreviewClass,
 	dmListTimestampClass,
 	dmMessageBubbleClass,
+	dmMessageBubbleInboundClass,
 	dmMessageBubbleOutboundClass,
 	dmMessageMetaClass,
 	dmMessageRowClass,
@@ -48,7 +49,7 @@ function MessageBubble({ message }: { message: DmMessageItem }) {
 			<div
 				className={cx(
 					dmMessageBubbleClass,
-					outbound && dmMessageBubbleOutboundClass,
+					outbound ? dmMessageBubbleOutboundClass : dmMessageBubbleInboundClass,
 				)}
 			>
 				{message.text}
@@ -81,11 +82,11 @@ export function DmWorkspace({
 }) {
 	const participant = selectedConversation?.participant ?? null;
 	const subtitle = selectedConversation
-		? `${selectedConversation.needsReply ? "Reply open" : "We replied"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
+		? `${selectedConversation.isMessageRequest ? "Message request" : selectedConversation.needsReply ? "Reply open" : "We replied"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
 		: "No conversation selected";
 
 	return (
-		<section className={dmShellClass}>
+		<section aria-label="DM workspace" className={dmShellClass}>
 			<aside className={dmListClass}>
 				{conversations.length === 0 ? (
 					<BirdclawEmpty
@@ -142,9 +143,16 @@ export function DmWorkspace({
 										)}
 										{conversation.needsReply ? "open" : "replied"}
 									</span>
+									{conversation.isMessageRequest ? (
+										<span className={cx(pillClass, pillAlertClass)}>
+											request
+										</span>
+									) : null}
 									<span className={cx(pillClass, pillSoftClass)}>
-										{conversation.influenceScore} ·{" "}
-										{conversation.influenceLabel}
+										{formatCompactNumber(
+											conversation.participant.followersCount,
+										)}{" "}
+										followers
 									</span>
 								</div>
 							</div>
@@ -203,9 +211,11 @@ export function DmWorkspace({
 									<div className={contextStatRowClass}>
 										<dt className={contextStatTermClass}>Reply state</dt>
 										<dd className={contextStatValueClass}>
-											{selectedConversation.needsReply
-												? "Reply open"
-												: "We replied"}
+											{selectedConversation.isMessageRequest
+												? "Message request"
+												: selectedConversation.needsReply
+													? "Reply open"
+													: "We replied"}
 										</dd>
 									</div>
 									<div className={contextStatRowClass}>

package/src/components/LinkPreviewCard.tsx

@@ -9,6 +9,7 @@ import {
 	linkPreviewHostClass,
 	linkPreviewTitleClass,
 } from "#/lib/ui";
+import { safeHttpUrl } from "#/lib/url-safety";
 
 type LinkPreviewState = Pick<
 	TweetUrlEntity,
@@ -21,7 +22,6 @@ type LinkPreviewState = Pick<
 >;
 
 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> = [];
@@ -72,16 +72,13 @@ function schedulePreviewFetch(task: () => Promise<LinkPreviewMetadata | null>) {
 }
 
 function fetchPreview(entry: TweetUrlEntity) {
-	const targetUrl = entry.expandedUrl || entry.url;
+	const targetUrl = safeHttpUrl(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) => {
@@ -109,14 +106,32 @@ function displayHost(url: string, fallback: string) {
 function isDirectImageUrl(url: string) {
 	try {
 		const parsed = new URL(url);
-		if (IMAGE_EXTENSION_PATTERN.test(parsed.pathname)) return true;
 		return (
+			parsed.protocol === "https:" &&
 			parsed.hostname === "pbs.twimg.com" &&
 			(parsed.pathname.startsWith("/media/") ||
 				parsed.pathname.startsWith("/amplify_video_thumb/"))
 		);
 	} catch {
-		return IMAGE_EXTENSION_PATTERN.test(url);
+		return false;
+	}
+}
+
+function safePreviewImageUrl(url: string | null | undefined) {
+	if (!url) return null;
+	try {
+		const parsed = new URL(url);
+		if (
+			parsed.protocol === "https:" &&
+			parsed.hostname === "pbs.twimg.com" &&
+			(parsed.pathname.startsWith("/media/") ||
+				parsed.pathname.startsWith("/amplify_video_thumb/"))
+		) {
+			return parsed.toString();
+		}
+		return null;
+	} catch {
+		return null;
 	}
 }
 
@@ -127,22 +142,25 @@ export function LinkPreviewCard({
 	entry: TweetUrlEntity;
 	index: number;
 }) {
-	const targetUrl = entry.expandedUrl || entry.url;
-	const displayUrl = entry.displayUrl || displayHost(targetUrl, targetUrl);
-	const directImageUrl = isDirectImageUrl(targetUrl) ? targetUrl : null;
+	const targetUrl = safeHttpUrl(entry.expandedUrl || entry.url);
+	const previewUrl = targetUrl ?? "";
+	const displayUrl =
+		entry.displayUrl || (targetUrl ? displayHost(targetUrl, targetUrl) : "");
+	const directImageUrl =
+		targetUrl && isDirectImageUrl(targetUrl) ? targetUrl : null;
 	const initialPreview = useMemo<LinkPreviewState>(
 		() => ({
-			expandedUrl: targetUrl,
+			expandedUrl: previewUrl,
 			displayUrl,
 			title:
 				entry.title ??
-				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+				(directImageUrl ? displayHost(previewUrl, displayUrl) : undefined),
 			description:
 				entry.description ?? (directImageUrl ? displayUrl : undefined),
 			imageUrl: entry.imageUrl ?? directImageUrl,
 			siteName:
 				entry.siteName ??
-				(directImageUrl ? displayHost(targetUrl, displayUrl) : undefined),
+				(directImageUrl ? displayHost(previewUrl, displayUrl) : undefined),
 		}),
 		[
 			directImageUrl,
@@ -151,7 +169,7 @@ export function LinkPreviewCard({
 			entry.imageUrl,
 			entry.siteName,
 			entry.title,
-			targetUrl,
+			previewUrl,
 		],
 	);
 	const [preview, setPreview] = useState(initialPreview);
@@ -199,7 +217,7 @@ export function LinkPreviewCard({
 			void fetchPreview(entry).then((metadata) => {
 				if (cancelled || !metadata) return;
 				setPreview((current) => ({
-					expandedUrl: metadata.url || current.expandedUrl,
+					expandedUrl: safeHttpUrl(metadata.url) ?? current.expandedUrl,
 					displayUrl: current.displayUrl,
 					title: metadata.title ?? current.title,
 					description: metadata.description ?? current.description,
@@ -214,6 +232,8 @@ export function LinkPreviewCard({
 		};
 	}, [cacheKey, canHydrate, entry, hydratedKey, preview, targetUrl]);
 
+	if (!targetUrl) return null;
+
 	const title = preview.title || entry.displayUrl;
 	const description =
 		preview.description && preview.description !== title
@@ -221,14 +241,16 @@ export function LinkPreviewCard({
 			: preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
 	const host =
 		preview.siteName || displayHost(preview.expandedUrl, entry.displayUrl);
-	const showImage = Boolean(preview.imageUrl && !imageFailed);
+	const imageUrl = safePreviewImageUrl(preview.imageUrl);
+	const showImage = Boolean(imageUrl && !imageFailed);
+	const previewHref = safeHttpUrl(preview.expandedUrl) ?? targetUrl;
 
 	return (
 		<a
 			key={`${entry.expandedUrl}-${String(index)}`}
 			className={linkPreviewCardClass}
 			data-perf="link-preview-card"
-			href={preview.expandedUrl}
+			href={previewHref}
 			ref={cardRef}
 			rel="noreferrer"
 			target="_blank"
@@ -255,7 +277,7 @@ export function LinkPreviewCard({
 						className="size-full object-cover transition-transform duration-200 group-hover/link-preview:scale-[1.03]"
 						loading="lazy"
 						onError={() => setImageFailed(true)}
-						src={preview.imageUrl ?? ""}
+						src={imageUrl ?? ""}
 					/>
 				) : (
 					<ImageIcon