birdclaw 0.5.1 → 0.6.0

package/src/routes/api/sync.tsx

@@ -1,28 +1,64 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { getWebSyncJob, parseWebSyncKind, startWebSync } from "#/lib/web-sync";
-
-function json(data: unknown, init?: ResponseInit) {
-	return new Response(JSON.stringify(data), {
-		...init,
-		headers: {
-			"content-type": "application/json",
-			...init?.headers,
-		},
-	});
-}
+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 json(
+					return jsonResponse(
 						{ ok: false, message: "Missing sync job id" },
 						{ status: 400 },
 					);
@@ -30,30 +66,40 @@ export const Route = createFileRoute("/api/sync")({
 
 				const job = getWebSyncJob(id);
 				if (!job) {
-					return json(
+					return jsonResponse(
 						{ ok: false, message: "Sync job not found" },
 						{ status: 404 },
 					);
 				}
 
-				return json(job);
+				return jsonResponse(job);
 			},
-			POST: async ({ request }) => {
-				const body = (await request.json().catch(() => ({}))) as Record<
-					string,
-					unknown
-				>;
-				const kind = parseWebSyncKind(body.kind);
-				if (!kind) {
-					return json(
-						{ ok: false, message: "Unknown sync kind" },
-						{ status: 400 },
-					);
-				}
+			POST: ({ request }) =>
+				runRouteEffect(
+					Effect.gen(function* () {
+						const denied = sensitiveRequestErrorResponse(request);
+						if (denied) return denied;
 
-				const job = startWebSync(kind, parseAccountId(body.accountId));
-				return json(job, { status: job.inProgress ? 202 : 200 });
-			},
+						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

@@ -4,6 +4,7 @@ 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,
@@ -31,8 +32,7 @@ import {
 	tabButtonClass,
 	tabButtonIndicatorClass,
 	tabStripClass,
-	textFieldClass,
-	textFieldShortClass,
+	timestampClass,
 } from "#/lib/ui";
 
 export const Route = createFileRoute("/dms")({
@@ -45,6 +45,22 @@ 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[]>([]);
@@ -55,15 +71,18 @@ function DmsRoute() {
 	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());
@@ -78,11 +97,19 @@ function DmsRoute() {
 		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);
 		}
@@ -140,10 +167,12 @@ function DmsRoute() {
 	}, [
 		minFollowers,
 		minInfluenceScore,
+		inboxFilter,
 		refreshTick,
 		replyFilter,
 		search,
 		selectedConversationId,
+		selectedAccountId,
 		sort,
 	]);
 
@@ -194,6 +223,7 @@ function DmsRoute() {
 		const previousMessages = messages;
 		const previousItems = items;
 
+		setReplyError(null);
 		setReplyDraft("");
 		setMessages((current) => [...current, optimisticMessage]);
 		setItems((current) =>
@@ -223,7 +253,7 @@ function DmsRoute() {
 			setReplyDraft(text);
 			setMessages(previousMessages);
 			setItems(previousItems);
-			throw error;
+			setReplyError(error instanceof Error ? error.message : "Reply failed");
 		}
 	}
 
@@ -241,12 +271,34 @@ function DmsRoute() {
 						<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
@@ -256,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 (
@@ -306,6 +368,11 @@ function DmsRoute() {
 					})}
 				</div>
 			</header>
+			{replyError ? (
+				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
+					{replyError}
+				</p>
+			) : null}
 
 			{loading && (items.length === 0 || switchingConversation) ? (
 				<FeedLoading

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("");