birdclaw 0.4.1 → 0.5.1

package/src/components/TweetMediaGrid.tsx

@@ -1,39 +1,136 @@
+import { X } from "lucide-react";
+import { useState } from "react";
 import type { TweetMediaItem } from "#/lib/types";
 import { tweetMediaGridClass, tweetMediaTileClass } from "#/lib/ui";
 
 export function TweetMediaGrid({ items }: { items: TweetMediaItem[] }) {
+	const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 	if (items.length === 0) {
 		return null;
 	}
 
+	const visibleItems = items.slice(0, 4);
+	const selectedItem =
+		selectedIndex === null ? null : (visibleItems[selectedIndex] ?? null);
+	const selectedVideoUrl =
+		selectedItem?.type === "video" || selectedItem?.type === "gif"
+			? (selectedItem.variants?.[0]?.url ?? playableVideoUrl(selectedItem.url))
+			: null;
+
 	return (
-		<div className={tweetMediaGridClass(Math.min(items.length, 4))}>
-			{items.slice(0, 4).map((item, index) => (
-				<a
-					key={item.url + String(index)}
-					className={tweetMediaTileClass(index, Math.min(items.length, 4))}
-					href={item.url}
-					rel="noreferrer"
-					target="_blank"
+		<>
+			<div className={tweetMediaGridClass(Math.min(items.length, 4))}>
+				{visibleItems.map((item, index) => (
+					<button
+						key={item.url + String(index)}
+						aria-label={`Open tweet media ${String(index + 1)}`}
+						className={tweetMediaTileClass(index, Math.min(items.length, 4))}
+						onClick={(event) => {
+							event.stopPropagation();
+							setSelectedIndex(index);
+						}}
+						style={
+							visibleItems.length === 1 && item.width && item.height
+								? {
+										aspectRatio: `${String(item.width)} / ${String(item.height)}`,
+									}
+								: undefined
+						}
+						type="button"
+					>
+						{item.type === "image" ? (
+							<img
+								alt={item.altText ?? `Tweet media ${String(index + 1)}`}
+								className="tweet-media-image block size-full object-contain"
+								loading="lazy"
+								src={item.thumbnailUrl ?? item.url}
+							/>
+						) : (
+							<span className="tweet-media-fallback grid min-h-40 place-items-center font-semibold text-[var(--ink-soft)]">
+								{item.type === "video"
+									? "Video"
+									: item.type === "gif"
+										? "GIF"
+										: "Media"}
+							</span>
+						)}
+					</button>
+				))}
+			</div>
+			{selectedItem ? (
+				<div
+					aria-modal="true"
+					className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4"
+					onClick={(event) => {
+						event.stopPropagation();
+						setSelectedIndex(null);
+					}}
+					role="dialog"
 				>
-					{item.type === "image" ? (
+					<button
+						aria-label="Close media viewer"
+						className="absolute right-4 top-4 grid size-10 place-items-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
+						onClick={(event) => {
+							event.stopPropagation();
+							setSelectedIndex(null);
+						}}
+						type="button"
+					>
+						<X className="size-5" strokeWidth={1.8} />
+					</button>
+					{selectedItem.type === "image" ? (
 						<img
-							alt={item.altText ?? `Tweet media ${String(index + 1)}`}
-							className="tweet-media-image block size-full object-cover"
-							loading="lazy"
-							src={item.thumbnailUrl ?? item.url}
+							alt={selectedItem.altText ?? "Tweet media"}
+							className="max-h-[92vh] max-w-[92vw] object-contain"
+							onClick={(event) => event.stopPropagation()}
+							src={selectedItem.url}
+						/>
+					) : selectedVideoUrl ? (
+						<video
+							autoPlay={selectedItem.type === "gif"}
+							className="max-h-[92vh] max-w-[92vw]"
+							controls
+							loop={selectedItem.type === "gif"}
+							muted={selectedItem.type === "gif"}
+							onClick={(event) => event.stopPropagation()}
+							playsInline
+							poster={selectedItem.thumbnailUrl}
+							src={selectedVideoUrl}
 						/>
 					) : (
-						<span className="tweet-media-fallback grid min-h-40 place-items-center font-semibold text-[var(--ink-soft)]">
-							{item.type === "video"
-								? "Video"
-								: item.type === "gif"
-									? "GIF"
-									: "Media"}
-						</span>
+						<div
+							className="grid min-h-64 min-w-80 place-items-center gap-3 rounded-2xl border border-white/20 bg-black p-6 text-white"
+							onClick={(event) => event.stopPropagation()}
+						>
+							<span>
+								{selectedItem.type === "video"
+									? "Video"
+									: selectedItem.type === "gif"
+										? "GIF"
+										: "Media"}
+							</span>
+							<a
+								className="rounded-full bg-white/10 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-white/20"
+								href={selectedItem.url}
+								rel="noreferrer"
+								target="_blank"
+							>
+								Open media
+							</a>
+						</div>
 					)}
-				</a>
-			))}
-		</div>
+				</div>
+			) : null}
+		</>
 	);
 }
+
+function playableVideoUrl(url: string) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.hostname === "video.twimg.com") return url;
+		return /\.(?:mp4|m3u8)(?:$|[?#])/i.test(parsed.pathname) ? url : undefined;
+	} catch {
+		return /\.(?:mp4|m3u8)(?:$|[?#])/i.test(url) ? url : undefined;
+	}
+}

package/src/components/TweetRichText.tsx

@@ -1,5 +1,9 @@
 import { Fragment } from "react";
-import { collectTweetSegments } from "#/lib/tweet-render";
+import type { ReactNode } from "react";
+import {
+	collectTweetSegments,
+	enrichFallbackUrlEntities,
+} from "#/lib/tweet-render";
 import type { TweetEntities } from "#/lib/types";
 import {
 	bodyCopyClass,
@@ -13,12 +17,15 @@ export function TweetRichText({
 	text,
 	entities,
 	className = "body-copy",
+	hiddenUrlRanges = [],
 }: {
 	text: string;
 	entities: TweetEntities;
 	className?: string;
+	hiddenUrlRanges?: Array<{ start: number; end: number }>;
 }) {
-	const segments = collectTweetSegments(entities);
+	const richEntities = enrichFallbackUrlEntities(text, entities);
+	const segments = collectTweetSegments(richEntities);
 	let cursor = 0;
 
 	return (
@@ -35,12 +42,20 @@ export function TweetRichText({
 				const prefix = text.slice(cursor, segment.start);
 				cursor = segment.end;
 
-				let node = (
+				let node: ReactNode = (
 					<Fragment key={`segment-${String(index)}`}>
 						{text.slice(segment.start, segment.end)}
 					</Fragment>
 				);
-				if (segment.kind === "mention" && segment.profile) {
+				if (
+					segment.kind === "url" &&
+					hiddenUrlRanges.some(
+						(range) =>
+							range.start === segment.start && range.end === segment.end,
+					)
+				) {
+					node = null;
+				} else if (segment.kind === "mention" && segment.profile) {
 					node = (
 						<ProfilePreview
 							key={`segment-${String(index)}`}

package/src/components/useTimelineRouteData.ts

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+import type {
+	QueryEnvelope,
+	ReplyFilter,
+	ResourceKind,
+	TimelineItem,
+} from "#/lib/types";
+import {
+	fetchQueryEnvelope,
+	fetchQueryResponse,
+	postAction,
+} from "#/lib/api-client";
+
+interface UseTimelineRouteDataOptions {
+	resource: Exclude<ResourceKind, "dms">;
+	search: string;
+	errorFallback: string;
+	replyFilter?: ReplyFilter;
+	likedOnly?: boolean;
+	bookmarkedOnly?: boolean;
+}
+
+export function useTimelineRouteData({
+	resource,
+	search,
+	errorFallback,
+	replyFilter,
+	likedOnly = false,
+	bookmarkedOnly = false,
+}: UseTimelineRouteDataOptions) {
+	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
+	const [items, setItems] = useState<TimelineItem[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [refreshTick, setRefreshTick] = useState(0);
+
+	async function loadStatus() {
+		setMeta(await fetchQueryEnvelope());
+	}
+
+	useEffect(() => {
+		void loadStatus();
+	}, []);
+
+	useEffect(() => {
+		const url = new URL("/api/query", window.location.origin);
+		url.searchParams.set("resource", resource);
+		url.searchParams.set("refresh", String(refreshTick));
+		if (replyFilter) {
+			url.searchParams.set("replyFilter", replyFilter);
+		}
+		if (likedOnly) {
+			url.searchParams.set("liked", "true");
+		}
+		if (bookmarkedOnly) {
+			url.searchParams.set("bookmarked", "true");
+		}
+		if (search.trim()) {
+			url.searchParams.set("search", search.trim());
+		}
+
+		const controller = new AbortController();
+		let active = true;
+		setError(null);
+		setLoading(true);
+		fetchQueryResponse(url, { signal: controller.signal })
+			.then((data) => {
+				if (active) {
+					setItems(data.items as TimelineItem[]);
+				}
+			})
+			.catch((fetchError: unknown) => {
+				if (
+					fetchError instanceof DOMException &&
+					fetchError.name === "AbortError"
+				) {
+					return;
+				}
+				if (!active) return;
+				setError(
+					fetchError instanceof Error ? fetchError.message : errorFallback,
+				);
+				setItems([]);
+			})
+			.finally(() => {
+				if (active) {
+					setLoading(false);
+				}
+			});
+
+		return () => {
+			active = false;
+			controller.abort();
+		};
+	}, [
+		bookmarkedOnly,
+		errorFallback,
+		likedOnly,
+		refreshTick,
+		replyFilter,
+		resource,
+		search,
+	]);
+
+	function retry() {
+		setRefreshTick((value) => value + 1);
+	}
+
+	function refreshLocalView() {
+		setRefreshTick((value) => value + 1);
+		void loadStatus();
+	}
+
+	async function replyToTweet(tweetId: string) {
+		const text = window.prompt("Reply text");
+		if (!text?.trim()) return;
+
+		await postAction({
+			kind: "replyTweet",
+			accountId: "acct_primary",
+			tweetId,
+			text,
+		});
+
+		retry();
+	}
+
+	return {
+		meta,
+		items,
+		loading,
+		error,
+		retry,
+		refreshLocalView,
+		replyToTweet,
+	};
+}

package/src/lib/api-client.ts

@@ -0,0 +1,229 @@
+import { z } from "zod";
+import type {
+	DmConversationItem,
+	DmMessageItem,
+	QueryEnvelope,
+	QueryResponse,
+	TimelineItem,
+} from "./types";
+import type {
+	WebSyncJobSnapshot,
+	WebSyncKind,
+	WebSyncResponse,
+} from "./web-sync";
+
+const jsonRecordSchema = z.object({}).passthrough();
+const resourceKindSchema = z.enum(["home", "mentions", "authored", "dms"]);
+const webSyncKindSchema = z.enum([
+	"timeline",
+	"mentions",
+	"likes",
+	"bookmarks",
+	"dms",
+]);
+
+const queryEnvelopeSchema = z
+	.object({
+		accounts: z.array(jsonRecordSchema),
+		archives: z.array(jsonRecordSchema),
+		transport: z
+			.object({
+				statusText: z.string(),
+			})
+			.passthrough(),
+		stats: z.object({
+			home: z.number(),
+			mentions: z.number(),
+			dms: z.number(),
+			needsReply: z.number(),
+			inbox: z.number(),
+		}),
+	})
+	.transform((value) => value as unknown as QueryEnvelope);
+
+const queryResponseSchema = z
+	.object({
+		resource: resourceKindSchema,
+		items: z.array(jsonRecordSchema),
+		selectedConversation: z
+			.object({
+				conversation: jsonRecordSchema,
+				messages: z.array(jsonRecordSchema),
+			})
+			.nullish(),
+	})
+	.transform(
+		(value) =>
+			({
+				...value,
+				items: value.items as unknown as Array<
+					TimelineItem | DmConversationItem
+				>,
+				selectedConversation: value.selectedConversation
+					? {
+							conversation: value.selectedConversation
+								.conversation as unknown as DmConversationItem,
+							messages: value.selectedConversation
+								.messages as unknown as DmMessageItem[],
+						}
+					: value.selectedConversation,
+			}) as QueryResponse,
+	);
+
+const webSyncResponseSchema = z
+	.object({
+		ok: z.boolean(),
+		kind: webSyncKindSchema,
+		accountId: z.string().optional(),
+		summary: z.string(),
+		steps: z.array(jsonRecordSchema),
+		startedAt: z.string().optional(),
+		finishedAt: z.string().optional(),
+		inProgress: z.boolean().optional(),
+		backup: z.unknown().optional(),
+		error: z.string().optional(),
+	})
+	.transform((value) => value as unknown as WebSyncResponse);
+
+const webSyncJobSchema = z
+	.object({
+		id: z.string(),
+		kind: webSyncKindSchema,
+		accountId: z.string().optional(),
+		status: z.enum(["running", "succeeded", "failed"]),
+		startedAt: z.string(),
+		finishedAt: z.string().optional(),
+		summary: z.string(),
+		inProgress: z.boolean(),
+		result: webSyncResponseSchema.optional(),
+		error: z.string().optional(),
+	})
+	.transform((value) => value as unknown as WebSyncJobSnapshot);
+
+const actionResponseSchema = jsonRecordSchema;
+const SYNC_POLL_INTERVAL_MS = 500;
+
+export class ApiFetchError extends Error {
+	constructor(
+		message: string,
+		readonly status?: number,
+	) {
+		super(message);
+		this.name = "ApiFetchError";
+	}
+}
+
+function responseMessage(data: unknown, fallback: string) {
+	if (data && typeof data === "object") {
+		const record = data as {
+			message?: unknown;
+			error?: unknown;
+			summary?: unknown;
+		};
+		if (typeof record.message === "string") return record.message;
+		if (typeof record.error === "string") return record.error;
+		if (typeof record.summary === "string") return record.summary;
+	}
+	return fallback;
+}
+
+async function readJson(response: Response) {
+	try {
+		return await response.json();
+	} catch {
+		return null;
+	}
+}
+
+export async function fetchJson<T>(
+	input: RequestInfo | URL,
+	init: RequestInit | undefined,
+	schema: z.ZodType<T>,
+	fallbackMessage: string,
+): Promise<T> {
+	const response = await fetch(input, init);
+	const data = await readJson(response);
+	if (!response.ok) {
+		throw new ApiFetchError(
+			responseMessage(data, fallbackMessage),
+			response.status,
+		);
+	}
+
+	const parsed = schema.safeParse(data);
+	if (!parsed.success) {
+		throw new ApiFetchError(fallbackMessage);
+	}
+	return parsed.data;
+}
+
+export function fetchQueryEnvelope(init?: RequestInit) {
+	return fetchJson(
+		"/api/status",
+		init,
+		queryEnvelopeSchema,
+		"Status unavailable",
+	);
+}
+
+export function fetchQueryResponse(
+	input: RequestInfo | URL,
+	init?: RequestInit,
+) {
+	return fetchJson(input, init, queryResponseSchema, "Query unavailable");
+}
+
+export function postAction(body: Record<string, unknown>) {
+	return fetchJson(
+		"/api/action",
+		{
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify(body),
+		},
+		actionResponseSchema,
+		"Action failed",
+	);
+}
+
+export function postSync(kind: WebSyncKind, accountId?: string) {
+	return fetchJson(
+		"/api/sync",
+		{
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				kind,
+				...(accountId ? { accountId } : {}),
+			}),
+		},
+		webSyncJobSchema,
+		"Sync failed",
+	).then(waitForWebSyncJob);
+}
+
+function fetchSyncJob(id: string) {
+	const url = new URL("/api/sync", window.location.origin);
+	url.searchParams.set("id", id);
+	return fetchJson(url, undefined, webSyncJobSchema, "Sync status unavailable");
+}
+
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForWebSyncJob(job: WebSyncJobSnapshot) {
+	let current = job;
+	while (current.inProgress) {
+		await delay(SYNC_POLL_INTERVAL_MS);
+		current = await fetchSyncJob(current.id);
+	}
+
+	if (!current.result) {
+		throw new ApiFetchError(current.error ?? current.summary);
+	}
+	if (!current.result.ok) {
+		throw new ApiFetchError(current.result.error ?? current.result.summary);
+	}
+	return current.result;
+}

package/src/lib/archive-finder.ts

@@ -96,27 +96,31 @@ export async function findArchives(): Promise<ArchiveCandidate[]> {
 		'kMDItemDisplayName == "*archive*.zip" && kMDItemKind == "Zip archive"',
 	];
 
-	for (const query of queries) {
-		try {
-			const { stdout } = await execAsync(`mdfind -onlyin ~ '${query}'`, {
-				timeout: 5000,
-			});
-
-			const paths = stdout
-				.split("\n")
-				.map((item) => item.trim())
-				.filter((item) => item.length > 0 && item.endsWith(".zip"));
-
-			const candidates = await Promise.all(
-				paths.map((filePath) => getCandidate(filePath)),
-			);
-			for (const candidate of candidates) {
-				if (candidate) {
-					found.set(candidate.path, candidate);
-				}
+	const spotlightCandidates = await Promise.all(
+		queries.map(async (query) => {
+			try {
+				const { stdout } = await execAsync(`mdfind -onlyin ~ '${query}'`, {
+					timeout: 5000,
+				});
+
+				const paths = stdout
+					.split("\n")
+					.map((item) => item.trim())
+					.filter((item) => item.length > 0 && item.endsWith(".zip"));
+
+				return Promise.all(paths.map((filePath) => getCandidate(filePath)));
+			} catch {
+				// Best-effort only.
+				return [];
+			}
+		}),
+	);
+
+	for (const candidates of spotlightCandidates) {
+		for (const candidate of candidates) {
+			if (candidate) {
+				found.set(candidate.path, candidate);
 			}
-		} catch {
-			// Best-effort only.
 		}
 	}