birdclaw 0.5.0 → 0.6.0

package/src/routes/api/sync.tsx

@@ -0,0 +1,105 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Effect } from "effect";
+import {
+	jsonResponse,
+	requestJsonEffect,
+	runRouteEffect,
+	sensitiveRequestErrorResponse,
+} from "#/lib/http-effect";
+import {
+	getWebSyncJob,
+	parseWebSyncKind,
+	startWebSync,
+	type WebSyncDmInbox,
+	type WebSyncOptions,
+} from "#/lib/web-sync";
+
+function parseAccountId(value: unknown) {
+	return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+function parseDmInbox(value: unknown): WebSyncDmInbox | undefined {
+	return value === "all" || value === "accepted" || value === "requests"
+		? value
+		: undefined;
+}
+
+function parsePositiveInteger(value: unknown, max: number) {
+	const parsed =
+		typeof value === "number"
+			? value
+			: typeof value === "string"
+				? Number(value)
+				: Number.NaN;
+	if (!Number.isInteger(parsed) || parsed <= 0) return undefined;
+	return Math.min(parsed, max);
+}
+
+function parseSyncOptions(kind: string, body: Record<string, unknown>) {
+	if (kind !== "dms") return {};
+	const options: WebSyncOptions = {};
+	const inbox = parseDmInbox(body.inbox);
+	const limit = parsePositiveInteger(body.limit, 1000);
+	const maxPages = parsePositiveInteger(body.maxPages, 250);
+	if (inbox) options.inbox = inbox;
+	if (limit) options.limit = limit;
+	if (maxPages) options.maxPages = maxPages;
+	if (typeof body.allPages === "boolean") options.allPages = body.allPages;
+	return options;
+}
+
+export const Route = createFileRoute("/api/sync")({
+	server: {
+		handlers: {
+			GET: ({ request }) => {
+				const denied = sensitiveRequestErrorResponse(request);
+				if (denied) return denied;
+
+				const url = new URL(request.url);
+				const id = url.searchParams.get("id");
+				if (!id) {
+					return jsonResponse(
+						{ ok: false, message: "Missing sync job id" },
+						{ status: 400 },
+					);
+				}
+
+				const job = getWebSyncJob(id);
+				if (!job) {
+					return jsonResponse(
+						{ ok: false, message: "Sync job not found" },
+						{ status: 404 },
+					);
+				}
+
+				return jsonResponse(job);
+			},
+			POST: ({ request }) =>
+				runRouteEffect(
+					Effect.gen(function* () {
+						const denied = sensitiveRequestErrorResponse(request);
+						if (denied) return denied;
+
+						const body = yield* requestJsonEffect<Record<string, unknown>>(
+							request,
+							{},
+						);
+						const kind = parseWebSyncKind(body.kind);
+						if (!kind) {
+							return jsonResponse(
+								{ ok: false, message: "Unknown sync kind" },
+								{ status: 400 },
+							);
+						}
+
+						const job = startWebSync(
+							kind,
+							parseAccountId(body.accountId),
+							parseSyncOptions(kind, body),
+						);
+						return jsonResponse(job, { status: job.inProgress ? 202 : 200 });
+					}),
+				),
+		},
+	},
+});

package/src/routes/dms.tsx

@@ -2,11 +2,18 @@ import { createFileRoute } from "@tanstack/react-router";
 import { Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { DmWorkspace } from "#/components/DmWorkspace";
+import { FeedEmpty, FeedError, FeedLoading } from "#/components/FeedState";
+import { SyncNowButton } from "#/components/SyncNowButton";
+import { useSelectedAccountId } from "#/components/account-selection";
+import {
+	fetchQueryEnvelope,
+	fetchQueryResponse,
+	postAction,
+} from "#/lib/api-client";
 import type {
 	DmConversationItem,
 	DmMessageItem,
 	QueryEnvelope,
-	QueryResponse,
 	ReplyFilter,
 } from "#/lib/types";
 import {
@@ -25,8 +32,7 @@ import {
 	tabButtonClass,
 	tabButtonIndicatorClass,
 	tabStripClass,
-	textFieldClass,
-	textFieldShortClass,
+	timestampClass,
 } from "#/lib/ui";
 
 export const Route = createFileRoute("/dms")({
@@ -39,36 +45,71 @@ const TABS: Array<{ value: ReplyFilter; label: string }> = [
 	{ value: "replied", label: "Replied" },
 ];
 
+const SORTS: Array<{ value: "recent" | "followers"; label: string }> = [
+	{ value: "recent", label: "Newest" },
+	{ value: "followers", label: "Followers" },
+];
+
+type DmInboxFilter = "all" | "accepted" | "requests";
+
+const INBOX_FILTERS: Array<{ value: DmInboxFilter; label: string }> = [
+	{ value: "all", label: "All" },
+	{ value: "accepted", label: "Accepted" },
+	{ value: "requests", label: "Requests" },
+];
+
+const filterNumberFieldClass =
+	"flex h-[46px] shrink-0 items-center gap-2 rounded-md border border-[var(--line)] bg-[var(--bg)] px-3 py-0 text-[14px] text-[var(--ink)] outline-none transition-colors duration-150 focus-within:border-[var(--accent)] focus-within:shadow-[0_0_0_1px_var(--accent)]";
+
 function DmsRoute() {
 	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
 	const [items, setItems] = useState<DmConversationItem[]>([]);
 	const [messages, setMessages] = useState<DmMessageItem[]>([]);
+	const [loadedConversationId, setLoadedConversationId] = useState<
+		string | undefined
+	>();
 	const [selectedConversationId, setSelectedConversationId] = useState<
 		string | undefined
 	>();
+	const [inboxFilter, setInboxFilter] = useState<DmInboxFilter>("all");
 	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("unreplied");
-	const [minFollowers, setMinFollowers] = useState("0");
-	const [minInfluenceScore, setMinInfluenceScore] = useState("0");
-	const [sort, setSort] = useState<"recent" | "influence">("recent");
+	const [minFollowers, setMinFollowers] = useState("");
+	const [minInfluenceScore, setMinInfluenceScore] = useState("");
+	const [sort, setSort] = useState<"recent" | "followers">("recent");
 	const [search, setSearch] = useState("");
 	const [replyDraft, setReplyDraft] = useState("");
 	const [refreshTick, setRefreshTick] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [replyError, setReplyError] = useState<string | null>(null);
+	const selectedAccountId = useSelectedAccountId(meta?.accounts);
+
+	async function loadStatus() {
+		setMeta(await fetchQueryEnvelope());
+	}
 
 	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
+		void loadStatus();
 	}, []);
 
 	useEffect(() => {
 		const controller = new AbortController();
+		let active = true;
 		const url = new URL("/api/query", window.location.origin);
 		url.searchParams.set("resource", "dms");
+		url.searchParams.set("inbox", inboxFilter);
 		url.searchParams.set("replyFilter", replyFilter);
-		url.searchParams.set("minFollowers", minFollowers);
-		url.searchParams.set("minInfluenceScore", minInfluenceScore);
 		url.searchParams.set("refresh", String(refreshTick));
 		url.searchParams.set("sort", sort);
+		if (minFollowers.trim()) {
+			url.searchParams.set("minFollowers", minFollowers.trim());
+		}
+		if (minInfluenceScore.trim()) {
+			url.searchParams.set("minInfluenceScore", minInfluenceScore.trim());
+		}
+		if (selectedAccountId && inboxFilter !== "requests") {
+			url.searchParams.set("account", selectedAccountId);
+		}
 		if (selectedConversationId) {
 			url.searchParams.set("conversationId", selectedConversationId);
 		}
@@ -76,12 +117,15 @@ function DmsRoute() {
 			url.searchParams.set("search", search.trim());
 		}
 
-		fetch(url, { signal: controller.signal })
-			.then((response) => response.json())
-			.then((data: QueryResponse) => {
+		setError(null);
+		setLoading(true);
+		fetchQueryResponse(url, { signal: controller.signal })
+			.then((data) => {
+				if (!active) return;
 				const conversations = data.items as DmConversationItem[];
 				const nextSelected =
 					data.selectedConversation?.conversation.id ?? conversations[0]?.id;
+				setLoadedConversationId(data.selectedConversation?.conversation.id);
 				setItems(conversations);
 				setSelectedConversationId((current) => {
 					if (!current) return nextSelected;
@@ -93,28 +137,54 @@ function DmsRoute() {
 				});
 				setMessages(data.selectedConversation?.messages ?? []);
 			})
-			.catch((error: unknown) => {
-				if (error instanceof DOMException && error.name === "AbortError") {
+			.catch((fetchError: unknown) => {
+				if (
+					fetchError instanceof DOMException &&
+					fetchError.name === "AbortError"
+				) {
 					return;
 				}
-				throw error;
+				if (!active) return;
+				setError(
+					fetchError instanceof Error
+						? fetchError.message
+						: "Messages unavailable",
+				);
+				setItems([]);
+				setMessages([]);
+				setLoadedConversationId(undefined);
+			})
+			.finally(() => {
+				if (active) {
+					setLoading(false);
+				}
 			});
 
 		return () => {
+			active = false;
 			controller.abort();
 		};
 	}, [
 		minFollowers,
 		minInfluenceScore,
+		inboxFilter,
 		refreshTick,
 		replyFilter,
 		search,
 		selectedConversationId,
+		selectedAccountId,
 		sort,
 	]);
 
 	const selectedConversation =
 		items.find((item) => item.id === selectedConversationId) ?? null;
+	const switchingConversation =
+		loading &&
+		Boolean(
+			selectedConversationId &&
+			loadedConversationId &&
+			selectedConversationId !== loadedConversationId,
+		);
 
 	const subtitle = useMemo(() => {
 		if (!meta) return "Loading direct messages...";
@@ -153,6 +223,7 @@ function DmsRoute() {
 		const previousMessages = messages;
 		const previousItems = items;
 
+		setReplyError(null);
 		setReplyDraft("");
 		setMessages((current) => [...current, optimisticMessage]);
 		setItems((current) =>
@@ -170,14 +241,10 @@ function DmsRoute() {
 		);
 
 		try {
-			await fetch("/api/action", {
-				method: "POST",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify({
-					kind: "replyDm",
-					conversationId,
-					text,
-				}),
+			await postAction({
+				kind: "replyDm",
+				conversationId,
+				text,
 			});
 
 			setSelectedConversationId(conversationId);
@@ -186,10 +253,15 @@ function DmsRoute() {
 			setReplyDraft(text);
 			setMessages(previousMessages);
 			setItems(previousItems);
-			throw error;
+			setReplyError(error instanceof Error ? error.message : "Reply failed");
 		}
 	}
 
+	function refreshLocalView() {
+		setRefreshTick((value) => value + 1);
+		void loadStatus();
+	}
+
 	return (
 		<>
 			<header className={pageHeaderClass}>
@@ -198,8 +270,35 @@ function DmsRoute() {
 						<h1 className={pageTitleClass}>Messages</h1>
 						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
+					<SyncNowButton
+						accounts={meta?.accounts}
+						kind="dms"
+						label="Sync DMs"
+						onSynced={refreshLocalView}
+						syncOptions={{
+							inbox: inboxFilter,
+							limit: inboxFilter === "requests" ? 200 : 50,
+							maxPages: inboxFilter === "requests" ? 3 : 1,
+						}}
+					/>
 				</div>
 				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
+					<div className={segmentedClass} aria-label="DM inbox">
+						{INBOX_FILTERS.map((filter) => (
+							<button
+								key={filter.value}
+								aria-pressed={inboxFilter === filter.value}
+								className={cx(
+									segmentClass,
+									inboxFilter === filter.value && segmentActiveClass,
+								)}
+								onClick={() => setInboxFilter(filter.value)}
+								type="button"
+							>
+								{filter.label}
+							</button>
+						))}
+					</div>
 					<label className={cx(searchFieldShellClass, "flex-1 min-w-[200px]")}>
 						<Search className={searchFieldIconClass} strokeWidth={2} />
 						<input
@@ -209,37 +308,47 @@ function DmsRoute() {
 							value={search}
 						/>
 					</label>
-					<input
-						className={cx(textFieldClass, textFieldShortClass)}
-						inputMode="numeric"
-						onChange={(event) => setMinFollowers(event.target.value)}
-						placeholder="Min followers"
-						value={minFollowers}
-					/>
-					<input
-						className={cx(textFieldClass, textFieldShortClass)}
-						inputMode="numeric"
-						onChange={(event) => setMinInfluenceScore(event.target.value)}
-						placeholder="Min score"
-						value={minInfluenceScore}
-					/>
+					<label className={cx(filterNumberFieldClass, "w-[156px]")}>
+						<span className="shrink-0 text-[12px] font-semibold text-[var(--ink-soft)]">
+							Followers
+						</span>
+						<input
+							className="min-w-0 flex-1 border-0 bg-transparent text-right text-[14px] text-[var(--ink)] outline-none placeholder:text-[var(--ink-soft)]"
+							inputMode="numeric"
+							onChange={(event) => setMinFollowers(event.target.value)}
+							placeholder="Any"
+							value={minFollowers}
+						/>
+					</label>
+					<label className={cx(filterNumberFieldClass, "w-[132px]")}>
+						<span className="shrink-0 text-[12px] font-semibold text-[var(--ink-soft)]">
+							Score
+						</span>
+						<input
+							className="min-w-0 flex-1 border-0 bg-transparent text-right text-[14px] text-[var(--ink)] outline-none placeholder:text-[var(--ink-soft)]"
+							inputMode="numeric"
+							onChange={(event) => setMinInfluenceScore(event.target.value)}
+							placeholder="Any"
+							value={minInfluenceScore}
+						/>
+					</label>
 					<div className={segmentedClass}>
-						{(["recent", "influence"] as const).map((value) => (
+						{SORTS.map((option) => (
 							<button
-								key={value}
+								key={option.value}
 								className={cx(
 									segmentClass,
-									value === sort && segmentActiveClass,
+									option.value === sort && segmentActiveClass,
 								)}
-								onClick={() => setSort(value)}
+								onClick={() => setSort(option.value)}
 								type="button"
 							>
-								{value}
+								{option.label}
 							</button>
 						))}
 					</div>
 				</div>
-				<div className={tabStripClass}>
+				<div className={tabStripClass} aria-label="DM reply filter">
 					{TABS.map((tab) => {
 						const active = replyFilter === tab.value;
 						return (
@@ -259,16 +368,47 @@ function DmsRoute() {
 					})}
 				</div>
 			</header>
+			{replyError ? (
+				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
+					{replyError}
+				</p>
+			) : null}
 
-			<DmWorkspace
-				conversations={items}
-				onReplyDraftChange={setReplyDraft}
-				onReplySend={replyToConversation}
-				onSelectConversation={setSelectedConversationId}
-				replyDraft={replyDraft}
-				selectedConversation={selectedConversation}
-				selectedMessages={messages}
-			/>
+			{loading && (items.length === 0 || switchingConversation) ? (
+				<FeedLoading
+					detail="Reading local conversations and reply state"
+					label="Loading messages"
+				/>
+			) : error ? (
+				<FeedError
+					action={
+						<button
+							className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
+							onClick={() => setRefreshTick((value) => value + 1)}
+							type="button"
+						>
+							Retry
+						</button>
+					}
+					message={error}
+					title="Could not load messages"
+				/>
+			) : items.length === 0 ? (
+				<FeedEmpty
+					detail="Sync DMs or broaden the filters to find a conversation."
+					label="No conversations in this view"
+				/>
+			) : (
+				<DmWorkspace
+					conversations={items}
+					onReplyDraftChange={setReplyDraft}
+					onReplySend={replyToConversation}
+					onSelectConversation={setSelectedConversationId}
+					replyDraft={replyDraft}
+					selectedConversation={selectedConversation}
+					selectedMessages={messages}
+				/>
+			)}
 		</>
 	);
 }

package/src/routes/inbox.tsx

@@ -1,7 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Sparkles } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { useSelectedAccountId } from "#/components/account-selection";
 import { InboxCard } from "#/components/InboxCard";
+import { postAction } from "#/lib/api-client";
 import type {
 	InboxItem,
 	InboxKind,
@@ -48,7 +50,9 @@ function InboxRoute() {
 	const [activeReplyId, setActiveReplyId] = useState<string | null>(null);
 	const [replyDraft, setReplyDraft] = useState("");
 	const [isSendingReply, setIsSendingReply] = useState(false);
+	const [replyError, setReplyError] = useState<string | null>(null);
 	const [stats, setStats] = useState<InboxResponse["stats"] | null>(null);
+	const selectedAccountId = useSelectedAccountId(meta?.accounts);
 
 	useEffect(() => {
 		fetch("/api/status")
@@ -61,6 +65,9 @@ function InboxRoute() {
 		url.searchParams.set("kind", kind);
 		url.searchParams.set("minScore", minScore);
 		url.searchParams.set("refresh", String(refreshTick));
+		if (selectedAccountId) {
+			url.searchParams.set("account", selectedAccountId);
+		}
 		if (hideLowSignal) {
 			url.searchParams.set("hideLowSignal", "1");
 		}
@@ -71,7 +78,7 @@ function InboxRoute() {
 				setItems(data.items);
 				setStats(data.stats);
 			});
-	}, [hideLowSignal, kind, minScore, refreshTick]);
+	}, [hideLowSignal, kind, minScore, refreshTick, selectedAccountId]);
 
 	const subtitle = useMemo(() => {
 		if (!meta || !stats) return "Ranking unreplied mentions and DMs...";
@@ -87,6 +94,7 @@ function InboxRoute() {
 				body: JSON.stringify({
 					kind: "scoreInbox",
 					scoreKind: kind,
+					account: selectedAccountId,
 					limit: 8,
 				}),
 			});
@@ -99,28 +107,27 @@ function InboxRoute() {
 	async function sendReply(item: InboxItem) {
 		if (!replyDraft.trim()) return;
 		setIsSendingReply(true);
+		setReplyError(null);
 		try {
-			await fetch("/api/action", {
-				method: "POST",
-				headers: { "content-type": "application/json" },
-				body: JSON.stringify(
-					item.entityKind === "dm"
-						? {
-								kind: "replyDm",
-								conversationId: item.entityId,
-								text: replyDraft,
-							}
-						: {
-								kind: "replyTweet",
-								accountId: item.accountId,
-								tweetId: item.entityId,
-								text: replyDraft,
-							},
-				),
-			});
+			await postAction(
+				item.entityKind === "dm"
+					? {
+							kind: "replyDm",
+							conversationId: item.entityId,
+							text: replyDraft,
+						}
+					: {
+							kind: "replyTweet",
+							accountId: item.accountId,
+							tweetId: item.entityId,
+							text: replyDraft,
+						},
+			);
 			setReplyDraft("");
 			setActiveReplyId(null);
 			setRefreshTick((value) => value + 1);
+		} catch (error) {
+			setReplyError(error instanceof Error ? error.message : "Reply failed");
 		} finally {
 			setIsSendingReply(false);
 		}
@@ -181,6 +188,11 @@ function InboxRoute() {
 					})}
 				</div>
 			</header>
+			{replyError ? (
+				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
+					{replyError}
+				</p>
+			) : null}
 			<section className={feedClass}>
 				{items.length === 0 ? (
 					<div className={emptyStateClass}>Inbox clear.</div>
@@ -193,6 +205,7 @@ function InboxRoute() {
 						onReplyChange={setReplyDraft}
 						onReplySend={() => void sendReply(item)}
 						onReplyToggle={() => {
+							setReplyError(null);
 							if (activeReplyId === item.id) {
 								setActiveReplyId(null);
 								setReplyDraft("");