birdclaw 0.5.1 → 0.7.0

package/src/routes/discuss.tsx

@@ -0,0 +1,419 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+	ChevronDown,
+	CheckCircle2,
+	Loader2,
+	RefreshCw,
+	Search,
+	Sparkles,
+} from "lucide-react";
+import {
+	type FormEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { MarkdownViewer } from "#/components/MarkdownViewer";
+import type {
+	SearchDiscussionContext,
+	SearchDiscussionRunResult,
+	SearchDiscussionSource,
+	SearchDiscussionStreamEvent,
+} from "#/lib/search-discussion";
+import type { TweetSearchMode } from "#/lib/tweet-search-live";
+import {
+	cx,
+	errorCopyClass,
+	pageHeaderActionsClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	primaryButtonClass,
+	searchFieldIconClass,
+	searchFieldInputClass,
+	searchFieldShellClass,
+	secondaryButtonClass,
+	selectFieldClass,
+	textFieldClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/discuss")({
+	component: DiscussRoute,
+});
+
+const sources: Array<{ value: SearchDiscussionSource; label: string }> = [
+	{ value: "search", label: "Live search" },
+	{ value: "all", label: "All local" },
+	{ value: "home", label: "Home" },
+	{ value: "mentions", label: "Mentions" },
+	{ value: "authored", label: "Authored" },
+	{ value: "likes", label: "Likes" },
+	{ value: "bookmarks", label: "Bookmarks" },
+];
+
+const modes: Array<{ value: TweetSearchMode; label: string }> = [
+	{ value: "auto", label: "Auto" },
+	{ value: "bird", label: "Bird" },
+	{ value: "xurl", label: "xurl" },
+	{ value: "local", label: "Local" },
+];
+const DISCUSS_SEARCH_LIMIT = 20_000;
+const DISCUSS_MAX_PAGES = 200;
+
+function discussionUrl(
+	query: string,
+	options: {
+		source: SearchDiscussionSource;
+		mode: TweetSearchMode;
+		includeDms: boolean;
+		question: string;
+		refresh: boolean;
+	},
+) {
+	const url = new URL("/api/search-discussion", window.location.origin);
+	url.searchParams.set("query", query);
+	url.searchParams.set("source", options.source);
+	url.searchParams.set("mode", options.mode);
+	url.searchParams.set("includeDms", String(options.includeDms));
+	url.searchParams.set("limit", String(DISCUSS_SEARCH_LIMIT));
+	url.searchParams.set("maxPages", String(DISCUSS_MAX_PAGES));
+	if (options.question.trim()) {
+		url.searchParams.set("question", options.question.trim());
+	}
+	if (options.refresh) {
+		url.searchParams.set("refresh", "true");
+	}
+	return url;
+}
+
+function DropdownField<T extends string>({
+	label,
+	value,
+	options,
+	onChange,
+}: {
+	label: string;
+	value: T;
+	options: Array<{ value: T; label: string }>;
+	onChange: (value: T) => void;
+}) {
+	return (
+		<label className="relative min-w-0">
+			<span className="pointer-events-none absolute left-3 top-1.5 z-10 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--ink-soft)]">
+				{label}
+			</span>
+			<select
+				aria-label={label}
+				className={cx(
+					selectFieldClass,
+					"h-[54px] rounded-2xl bg-[var(--bg)] pb-1 pl-3 pr-9 pt-5 font-semibold text-[var(--ink)]",
+				)}
+				value={value}
+				onChange={(event) => onChange(event.currentTarget.value as T)}
+			>
+				{options.map((item) => (
+					<option key={item.value} value={item.value}>
+						{item.label}
+					</option>
+				))}
+			</select>
+			<ChevronDown
+				aria-hidden="true"
+				className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--ink-soft)]"
+				strokeWidth={2}
+			/>
+		</label>
+	);
+}
+
+async function discussionRequestError(response: Response) {
+	const status = `${String(response.status)}${response.statusText ? ` ${response.statusText}` : ""}`;
+	let detail = "";
+	try {
+		const contentType = response.headers.get("content-type") ?? "";
+		if (contentType.includes("application/json")) {
+			const payload = (await response.json()) as {
+				error?: unknown;
+				message?: unknown;
+			};
+			if (typeof payload.message === "string") detail = payload.message;
+			else if (typeof payload.error === "string") detail = payload.error;
+		} else {
+			detail = (await response.text()).trim();
+		}
+	} catch {
+		detail = "";
+	}
+	return new Error(
+		detail
+			? `Discussion request failed (${status}): ${detail}`
+			: `Discussion request failed (${status})`,
+	);
+}
+
+function formatCounts(context: SearchDiscussionContext | null) {
+	if (!context) return "Live keyword search with local memory.";
+	const counts = context.counts;
+	const live = context.liveSearch
+		? context.liveSearch.ok
+			? `${context.liveSearch.source} ${String(context.liveSearch.count)} fetched`
+			: `${context.liveSearch.source} failed`
+		: "local";
+	return [
+		live,
+		`${String(counts.search)} search`,
+		`${String(counts.home + counts.mentions + counts.authored)} timeline`,
+		`${String(counts.likes + counts.bookmarks)} saved`,
+		context.includeDms ? `${String(counts.dms)} DMs` : null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+}
+
+function useDiscussionStream(
+	query: string,
+	source: SearchDiscussionSource,
+	mode: TweetSearchMode,
+	includeDms: boolean,
+	question: string,
+) {
+	const [markdown, setMarkdown] = useState("");
+	const [context, setContext] = useState<SearchDiscussionContext | null>(null);
+	const [result, setResult] = useState<SearchDiscussionRunResult | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+	const abortRef = useRef<AbortController | null>(null);
+	const requestIdRef = useRef(0);
+
+	const run = useCallback(
+		(refresh = false) => {
+			const trimmed = query.trim();
+			if (!trimmed) return;
+			abortRef.current?.abort();
+			const controller = new AbortController();
+			const requestId = requestIdRef.current + 1;
+			requestIdRef.current = requestId;
+			abortRef.current = controller;
+			const isActiveRequest = () =>
+				abortRef.current === controller &&
+				requestIdRef.current === requestId &&
+				!controller.signal.aborted;
+			setMarkdown("");
+			setContext(null);
+			setResult(null);
+			setError(null);
+			setLoading(true);
+
+			fetch(
+				discussionUrl(trimmed, {
+					source,
+					mode,
+					includeDms,
+					question,
+					refresh,
+				}),
+				{ signal: controller.signal },
+			)
+				.then(async (response) => {
+					if (!response.ok) {
+						throw await discussionRequestError(response);
+					}
+					if (!response.body) {
+						throw new Error("Discussion request failed: empty response body");
+					}
+					const reader = response.body.getReader();
+					const decoder = new TextDecoder();
+					let buffer = "";
+					const pump = (): Promise<void> =>
+						reader.read().then(({ done, value }) => {
+							if (!isActiveRequest()) return;
+							if (done) return;
+							buffer += decoder.decode(value, { stream: true });
+							let newline = buffer.indexOf("\n");
+							while (newline >= 0) {
+								const line = buffer.slice(0, newline).trim();
+								buffer = buffer.slice(newline + 1);
+								if (line) {
+									const event = JSON.parse(line) as SearchDiscussionStreamEvent;
+									if (!isActiveRequest()) return;
+									if (event.type === "start") {
+										setContext(event.context);
+									} else if (event.type === "delta") {
+										setMarkdown((current) => current + event.delta);
+									} else if (event.type === "done") {
+										setResult(event.result);
+										setContext(event.result.context);
+										setMarkdown(event.result.markdown);
+									} else if (event.type === "error") {
+										setError(event.error);
+									}
+								}
+								newline = buffer.indexOf("\n");
+							}
+							return pump();
+						});
+					return pump();
+				})
+				.catch((cause: unknown) => {
+					if (!isActiveRequest()) return;
+					setError(
+						cause instanceof Error ? cause.message : "Discussion failed",
+					);
+				})
+				.finally(() => {
+					if (isActiveRequest()) {
+						setLoading(false);
+					}
+				});
+		},
+		[includeDms, mode, query, question, source],
+	);
+
+	useEffect(() => () => abortRef.current?.abort(), []);
+
+	return { context, error, loading, markdown, result, run };
+}
+
+function DiscussRoute() {
+	const [query, setQuery] = useState("");
+	const [submittedQuery, setSubmittedQuery] = useState("");
+	const [question, setQuestion] = useState("");
+	const [source, setSource] = useState<SearchDiscussionSource>("search");
+	const [mode, setMode] = useState<TweetSearchMode>("xurl");
+	const [includeDms, setIncludeDms] = useState(false);
+	const pendingSubmitRef = useRef(false);
+	const { context, error, loading, markdown, result, run } =
+		useDiscussionStream(submittedQuery, source, mode, includeDms, question);
+	const sourceLabel = useMemo(
+		() => formatCounts(result?.context ?? context),
+		[context, result],
+	);
+
+	function submit(event: FormEvent) {
+		event.preventDefault();
+		const trimmed = query.trim();
+		if (!trimmed) return;
+		pendingSubmitRef.current = true;
+		setSubmittedQuery(trimmed);
+		if (trimmed === submittedQuery) {
+			pendingSubmitRef.current = false;
+			run(false);
+		}
+	}
+
+	useEffect(() => {
+		if (!submittedQuery || !pendingSubmitRef.current) return;
+		pendingSubmitRef.current = false;
+		run(false);
+	}, [run, submittedQuery]);
+
+	return (
+		<div className="flex min-h-screen flex-col">
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="min-w-0">
+						<h1 className={pageTitleClass}>Discuss</h1>
+						<p className={pageSubtitleClass}>{sourceLabel}</p>
+					</div>
+					<div className={pageHeaderActionsClass}>
+						<button
+							type="button"
+							className={secondaryButtonClass}
+							onClick={() => run(true)}
+							disabled={loading || !submittedQuery}
+						>
+							<RefreshCw
+								className={cx("size-4", loading && "animate-spin")}
+								aria-hidden="true"
+							/>
+							Refresh
+						</button>
+					</div>
+				</div>
+				<form
+					className="grid gap-2 px-4 pb-3 md:grid-cols-[minmax(220px,1fr)_minmax(180px,0.8fr)_auto]"
+					onSubmit={submit}
+				>
+					<label className={searchFieldShellClass}>
+						<Search className={searchFieldIconClass} strokeWidth={2} />
+						<input
+							className={searchFieldInputClass}
+							placeholder="Keywords"
+							value={query}
+							onChange={(event) => setQuery(event.currentTarget.value)}
+						/>
+					</label>
+					<input
+						className={textFieldClass}
+						placeholder="Optional question"
+						value={question}
+						onChange={(event) => setQuestion(event.currentTarget.value)}
+					/>
+					<button
+						type="submit"
+						className={primaryButtonClass}
+						disabled={loading || !query.trim()}
+					>
+						<Sparkles className="size-4" aria-hidden="true" />
+						Discuss
+					</button>
+					<div className="grid gap-2 md:col-span-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
+						<DropdownField
+							label="Source"
+							options={sources}
+							value={source}
+							onChange={setSource}
+						/>
+						<DropdownField
+							label="Mode"
+							options={modes}
+							value={mode}
+							onChange={setMode}
+						/>
+						<label className="inline-flex h-[54px] items-center gap-2 rounded-2xl border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-medium text-[var(--ink-soft)]">
+							<input
+								type="checkbox"
+								checked={includeDms}
+								onChange={(event) => setIncludeDms(event.currentTarget.checked)}
+							/>
+							DMs
+						</label>
+					</div>
+				</form>
+			</header>
+
+			{error ? <div className={errorCopyClass}>{error}</div> : null}
+
+			<div className="border-b border-[var(--line)] px-4 py-2 text-[13px] text-[var(--ink-soft)]">
+				<span className="inline-flex items-center gap-1">
+					{loading ? (
+						<Loader2 className="size-4 animate-spin" aria-hidden="true" />
+					) : markdown ? (
+						<CheckCircle2 className="size-4" aria-hidden="true" />
+					) : (
+						<Sparkles className="size-4" aria-hidden="true" />
+					)}
+					{loading
+						? "Searching and streaming"
+						: result
+							? `${result.cached ? "Cached" : "Ready"} · ${result.context.query}`
+							: "Ready"}
+				</span>
+			</div>
+
+			{markdown ? (
+				<MarkdownViewer
+					context={(result?.context ?? context) as never}
+					markdown={markdown}
+				/>
+			) : (
+				<div className="px-4 py-5 text-[14px] text-[var(--ink-soft)]">
+					{loading ? "Waiting for the first tokens..." : "Search to begin."}
+				</div>
+			)}
+		</div>
+	);
+}

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