birdclaw 0.8.3 → 0.8.4

package/src/routes/dms.tsx

@@ -1,415 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import {
-	keepPreviousData,
-	useMutation,
-	useQuery,
-	useQueryClient,
-} from "@tanstack/react-query";
-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 { queryKeys } from "#/lib/query-client";
-import type {
-	DmConversationItem,
-	DmMessageItem,
-	QueryResponse,
-	ReplyFilter,
-} from "#/lib/types";
-import { useDebouncedValue } from "#/components/useDebouncedValue";
-import {
-	cx,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	segmentActiveClass,
-	segmentClass,
-	segmentedClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-	timestampClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/dms")({
-	component: DmsRoute,
-});
-
-const TABS: Array<{ value: ReplyFilter; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "unreplied", label: "Unreplied" },
-	{ 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 queryClient = useQueryClient();
-	const [selectedConversationId, setSelectedConversationId] = useState<
-		string | undefined
-	>();
-	const [inboxFilter, setInboxFilter] = useState<DmInboxFilter>("all");
-	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("unreplied");
-	const [minFollowers, setMinFollowers] = useState("");
-	const [minInfluenceScore, setMinInfluenceScore] = useState("");
-	const [sort, setSort] = useState<"recent" | "followers">("recent");
-	const [search, setSearch] = useState("");
-	const [replyDraft, setReplyDraft] = useState("");
-	const statusQuery = useQuery({
-		queryKey: queryKeys.status,
-		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
-	});
-	const meta = statusQuery.data ?? null;
-	const selectedAccountId = useSelectedAccountId(meta?.accounts);
-	const debouncedSearch = useDebouncedValue(search, 180);
-	const dmsQueryKey = [
-		...queryKeys.dms,
-		{
-			inboxFilter,
-			replyFilter,
-			minFollowers,
-			minInfluenceScore,
-			sort,
-			search: debouncedSearch,
-			selectedAccountId: selectedAccountId ?? null,
-			selectedConversationId: selectedConversationId ?? null,
-		},
-	] as const;
-	const dmsQuery = useQuery({
-		queryKey: dmsQueryKey,
-		queryFn: ({ signal }) => {
-			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("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);
-			}
-			if (debouncedSearch.trim()) {
-				url.searchParams.set("search", debouncedSearch.trim());
-			}
-			return fetchQueryResponse(url, { signal });
-		},
-		placeholderData: keepPreviousData,
-		staleTime: 5 * 60_000,
-	});
-	const items = (dmsQuery.data?.items ?? []) as DmConversationItem[];
-	const messages = dmsQuery.data?.selectedConversation?.messages ?? [];
-	const loadedConversationId =
-		dmsQuery.data?.selectedConversation?.conversation.id;
-
-	useEffect(() => {
-		if (!dmsQuery.data) return;
-		const nextSelected = loadedConversationId ?? items[0]?.id;
-		setSelectedConversationId((current) => {
-			if (!current) return nextSelected;
-			return items.some((conversation) => conversation.id === current)
-				? current
-				: nextSelected;
-		});
-	}, [dmsQuery.data, items, loadedConversationId]);
-
-	const selectedConversation =
-		items.find((item) => item.id === selectedConversationId) ?? null;
-	const switchingConversation = Boolean(
-		!dmsQuery.isError &&
-		selectedConversationId &&
-		loadedConversationId &&
-		selectedConversationId !== loadedConversationId,
-	);
-
-	const subtitle = useMemo(() => {
-		if (!meta) return "Loading direct messages...";
-		return `${String(meta.stats.dms)} conversations cached locally`;
-	}, [meta]);
-	const replyMutation = useMutation({
-		mutationFn: ({
-			conversationId,
-			text,
-		}: {
-			conversationId: string;
-			text: string;
-		}) => postAction({ kind: "replyDm", conversationId, text }),
-		onMutate: async ({ conversationId, text }) => {
-			await queryClient.cancelQueries({ queryKey: dmsQueryKey });
-			const previous = queryClient.getQueryData<QueryResponse>(dmsQueryKey);
-			if (!previous || !selectedConversation) return { previous };
-			const now = new Date().toISOString();
-			const accountRecord = meta?.accounts.find(
-				(account) => account.id === selectedConversation.accountId,
-			);
-			const senderHandle = (
-				accountRecord?.handle ?? selectedConversation.accountHandle
-			).replace(/^@/, "");
-			const optimisticMessage: DmMessageItem = {
-				id: `optimistic-${now}`,
-				conversationId,
-				text,
-				createdAt: now,
-				direction: "outbound",
-				isReplied: true,
-				mediaCount: 0,
-				sender: {
-					id: `local-${selectedConversation.accountId}`,
-					handle: senderHandle,
-					displayName: accountRecord?.name ?? senderHandle,
-					bio: "",
-					followersCount: 0,
-					avatarHue: 18,
-					createdAt: now,
-				},
-			};
-			const previousItems = previous.items as DmConversationItem[];
-			queryClient.setQueryData<QueryResponse>(dmsQueryKey, {
-				...previous,
-				items: previousItems.map((item) =>
-					item.id === conversationId
-						? {
-								...item,
-								lastMessageAt: now,
-								lastMessagePreview: text,
-								needsReply: false,
-								unreadCount: 0,
-							}
-						: item,
-				),
-				selectedConversation: previous.selectedConversation
-					? {
-							...previous.selectedConversation,
-							messages: [
-								...previous.selectedConversation.messages,
-								optimisticMessage,
-							],
-						}
-					: previous.selectedConversation,
-			});
-			return { previous };
-		},
-		onError: (_error, _variables, context) => {
-			if (context?.previous) {
-				queryClient.setQueryData(dmsQueryKey, context.previous);
-			}
-		},
-		onSettled: () =>
-			Promise.all([
-				queryClient.invalidateQueries({ queryKey: queryKeys.dms }),
-				queryClient.invalidateQueries({ queryKey: queryKeys.status }),
-			]),
-	});
-
-	async function replyToConversation(conversationId: string) {
-		const text = replyDraft.trim();
-		if (!text || !selectedConversation) return;
-		setReplyDraft("");
-		try {
-			await replyMutation.mutateAsync({ conversationId, text });
-			setSelectedConversationId(conversationId);
-		} catch {
-			setReplyDraft(text);
-		}
-	}
-
-	function refreshLocalView() {
-		void Promise.all([
-			queryClient.invalidateQueries({ queryKey: queryKeys.dms }),
-			queryClient.invalidateQueries({ queryKey: queryKeys.status }),
-		]);
-	}
-	const loading = dmsQuery.isPending;
-	const error = dmsQuery.error
-		? dmsQuery.error instanceof Error
-			? dmsQuery.error.message
-			: "Messages unavailable"
-		: null;
-	const replyError = replyMutation.error
-		? replyMutation.error instanceof Error
-			? replyMutation.error.message
-			: "Reply failed"
-		: null;
-
-	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<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
-							className={searchFieldInputClass}
-							onChange={(event) => setSearch(event.target.value)}
-							placeholder="Search DMs"
-							value={search}
-						/>
-					</label>
-					<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}>
-						{SORTS.map((option) => (
-							<button
-								key={option.value}
-								className={cx(
-									segmentClass,
-									option.value === sort && segmentActiveClass,
-								)}
-								onClick={() => setSort(option.value)}
-								type="button"
-							>
-								{option.label}
-							</button>
-						))}
-					</div>
-				</div>
-				<div className={tabStripClass} aria-label="DM reply filter">
-					{TABS.map((tab) => {
-						const active = replyFilter === tab.value;
-						return (
-							<button
-								key={tab.value}
-								type="button"
-								aria-pressed={active}
-								className={cx(tabButtonClass, active && tabButtonActiveClass)}
-								onClick={() => setReplyFilter(tab.value)}
-							>
-								<span className="relative inline-flex flex-col items-center justify-center py-1">
-									{tab.value}
-									{active ? <span className={tabButtonIndicatorClass} /> : null}
-								</span>
-							</button>
-						);
-					})}
-				</div>
-			</header>
-			{replyError ? (
-				<p className={cx(timestampClass, "px-4 py-2 text-red-500")}>
-					{replyError}
-				</p>
-			) : null}
-
-			{(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={() => void dmsQuery.refetch()}
-							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,232 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import {
-	keepPreviousData,
-	useMutation,
-	useQuery,
-	useQueryClient,
-} from "@tanstack/react-query";
-import { Sparkles } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useSelectedAccountId } from "#/components/account-selection";
-import { InboxCard } from "#/components/InboxCard";
-import { fetchQueryEnvelope, postAction } from "#/lib/api-client";
-import { queryKeys } from "#/lib/query-client";
-import type { InboxItem, InboxKind, InboxResponse } from "#/lib/types";
-import {
-	cx,
-	emptyStateClass,
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	primaryButtonClass,
-	secondaryButtonClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-	textFieldClass,
-	textFieldShortClass,
-	timestampClass,
-} from "#/lib/ui";
-
-export const Route = createFileRoute("/inbox")({
-	component: InboxRoute,
-});
-
-const TABS: Array<{ value: InboxKind; label: string }> = [
-	{ value: "mixed", label: "Mixed" },
-	{ value: "mentions", label: "Mentions" },
-	{ value: "dms", label: "DMs" },
-];
-
-function InboxRoute() {
-	const queryClient = useQueryClient();
-	const [kind, setKind] = useState<InboxKind>("mixed");
-	const [minScore, setMinScore] = useState("40");
-	const [hideLowSignal, setHideLowSignal] = useState(true);
-	const [activeReplyId, setActiveReplyId] = useState<string | null>(null);
-	const [replyDraft, setReplyDraft] = useState("");
-	const [isSendingReply, setIsSendingReply] = useState(false);
-	const [replyError, setReplyError] = useState<string | null>(null);
-	const statusQuery = useQuery({
-		queryKey: queryKeys.status,
-		queryFn: ({ signal }) => fetchQueryEnvelope({ signal }),
-	});
-	const meta = statusQuery.data ?? null;
-	const selectedAccountId = useSelectedAccountId(meta?.accounts);
-	const inboxQueryKey = [
-		...queryKeys.inbox,
-		{
-			hideLowSignal,
-			kind,
-			minScore,
-			selectedAccountId: selectedAccountId ?? null,
-		},
-	] as const;
-	const inboxQuery = useQuery({
-		queryKey: inboxQueryKey,
-		queryFn: async ({ signal }) => {
-			const url = new URL("/api/inbox", window.location.origin);
-			url.searchParams.set("kind", kind);
-			url.searchParams.set("minScore", minScore);
-			if (selectedAccountId) {
-				url.searchParams.set("account", selectedAccountId);
-			}
-			if (hideLowSignal) {
-				url.searchParams.set("hideLowSignal", "1");
-			}
-
-			const response = await fetch(url, { signal });
-			if (!response.ok) {
-				throw new Error(`Inbox request failed (${String(response.status)})`);
-			}
-			return (await response.json()) as InboxResponse;
-		},
-		placeholderData: keepPreviousData,
-		staleTime: 5 * 60_000,
-	});
-	const items = inboxQuery.data?.items ?? [];
-	const stats = inboxQuery.data?.stats ?? null;
-	const scoreMutation = useMutation({
-		mutationFn: () =>
-			postAction({
-				kind: "scoreInbox",
-				scoreKind: kind,
-				account: selectedAccountId,
-				limit: 8,
-			}),
-		onSuccess: () =>
-			queryClient.invalidateQueries({ queryKey: queryKeys.inbox }),
-	});
-
-	const subtitle = useMemo(() => {
-		if (!meta || !stats) return "Ranking unreplied mentions and DMs...";
-		return `${String(stats.total)} in queue · ${String(stats.openai)} OpenAI scored · ${meta.transport.statusText}`;
-	}, [meta, stats]);
-
-	async function scoreNow() {
-		await scoreMutation.mutateAsync();
-	}
-
-	async function sendReply(item: InboxItem) {
-		if (!replyDraft.trim()) return;
-		setIsSendingReply(true);
-		setReplyError(null);
-		try {
-			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);
-			await queryClient.invalidateQueries({ queryKey: queryKeys.inbox });
-		} catch (error) {
-			setReplyError(error instanceof Error ? error.message : "Reply failed");
-		} finally {
-			setIsSendingReply(false);
-		}
-	}
-
-	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Inbox</h1>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-					<button
-						className={primaryButtonClass}
-						disabled={scoreMutation.isPending}
-						onClick={() => void scoreNow()}
-						type="button"
-					>
-						<Sparkles className="size-4" strokeWidth={2.2} />
-						{scoreMutation.isPending ? "Scoring..." : "Score with OpenAI"}
-					</button>
-				</div>
-				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
-					<input
-						className={cx(textFieldClass, textFieldShortClass)}
-						inputMode="numeric"
-						onChange={(event) => setMinScore(event.target.value)}
-						placeholder="Min AI score"
-						value={minScore}
-					/>
-					<button
-						className={secondaryButtonClass}
-						onClick={() => setHideLowSignal((value) => !value)}
-						type="button"
-						aria-pressed={hideLowSignal}
-					>
-						{hideLowSignal ? "Hide low-signal" : "Show all"}
-					</button>
-				</div>
-				<div className={tabStripClass}>
-					{TABS.map((tab) => {
-						const active = kind === tab.value;
-						return (
-							<button
-								key={tab.value}
-								type="button"
-								aria-pressed={active}
-								className={cx(tabButtonClass, active && tabButtonActiveClass)}
-								onClick={() => setKind(tab.value)}
-							>
-								<span className="relative inline-flex flex-col items-center justify-center py-1">
-									{tab.value}
-									{active ? <span className={tabButtonIndicatorClass} /> : null}
-								</span>
-							</button>
-						);
-					})}
-				</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>
-				) : null}
-				{items.map((item) => (
-					<InboxCard
-						key={item.id}
-						isReplying={activeReplyId === item.id}
-						item={item}
-						onReplyChange={setReplyDraft}
-						onReplySend={() => void sendReply(item)}
-						onReplyToggle={() => {
-							setReplyError(null);
-							if (activeReplyId === item.id) {
-								setActiveReplyId(null);
-								setReplyDraft("");
-								return;
-							}
-							setActiveReplyId(item.id);
-							setReplyDraft("");
-						}}
-						replyDraft={activeReplyId === item.id ? replyDraft : ""}
-					/>
-				))}
-			</section>
-			{isSendingReply ? (
-				<p className={cx(timestampClass, "px-4 py-2")}>Sending reply...</p>
-			) : null}
-		</>
-	);
-}

package/src/routes/index.tsx

@@ -1,32 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { TimelineRouteFrame } from "#/components/TimelineRouteFrame";
-import type { QueryEnvelope } from "#/lib/types";
-
-export const Route = createFileRoute("/")({
-	component: HomeRoute,
-});
-
-function homeSubtitle(meta: QueryEnvelope | null) {
-	if (!meta) return "Loading local context...";
-	return `${String(meta.stats.home)} items · ${String(meta.stats.needsReply)} waiting · ${meta.transport.statusText}`;
-}
-
-function HomeRoute() {
-	return (
-		<TimelineRouteFrame
-			emptyDetail="Try a different filter or sync the timeline again."
-			emptyLabel="No posts in this view"
-			errorFallback="Timeline unavailable"
-			errorTitle="Could not load posts"
-			initialReplyFilter="all"
-			loadingDetail="Reading the local timeline store"
-			loadingLabel="Loading posts"
-			resource="home"
-			searchPlaceholder="Search local timeline"
-			subtitle={homeSubtitle}
-			syncKind="timeline"
-			syncLabel="Sync timeline"
-			title="Home"
-		/>
-	);
-}

package/src/routes/likes.tsx

@@ -1,18 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { SavedTimelineView } from "#/components/SavedTimelineView";
-
-export const Route = createFileRoute("/likes")({
-	component: LikesRoute,
-});
-
-function LikesRoute() {
-	return (
-		<SavedTimelineView
-			eyebrow="liked posts"
-			filter="liked"
-			loadingLabel="Loading liked posts..."
-			searchPlaceholder="Search likes"
-			title="Things worth keeping in the orbit."
-		/>
-	);
-}