birdclaw 0.5.0 → 0.5.1

package/src/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as DmsRouteImport } from './routes/dms'
 import { Route as BookmarksRouteImport } from './routes/bookmarks'
 import { Route as BlocksRouteImport } from './routes/blocks'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiSyncRouteImport } from './routes/api/sync'
 import { Route as ApiStatusRouteImport } from './routes/api/status'
 import { Route as ApiQueryRouteImport } from './routes/api/query'
 import { Route as ApiProfileHydrateRouteImport } from './routes/api/profile-hydrate'
@@ -68,6 +69,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiSyncRoute = ApiSyncRouteImport.update({
+  id: '/api/sync',
+  path: '/api/sync',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiStatusRoute = ApiStatusRouteImport.update({
   id: '/api/status',
   path: '/api/status',
@@ -138,6 +144,7 @@ export interface FileRoutesByFullPath {
   '/api/profile-hydrate': typeof ApiProfileHydrateRoute
   '/api/query': typeof ApiQueryRoute
   '/api/status': typeof ApiStatusRoute
+  '/api/sync': typeof ApiSyncRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -158,6 +165,7 @@ export interface FileRoutesByTo {
   '/api/profile-hydrate': typeof ApiProfileHydrateRoute
   '/api/query': typeof ApiQueryRoute
   '/api/status': typeof ApiStatusRoute
+  '/api/sync': typeof ApiSyncRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -179,6 +187,7 @@ export interface FileRoutesById {
   '/api/profile-hydrate': typeof ApiProfileHydrateRoute
   '/api/query': typeof ApiQueryRoute
   '/api/status': typeof ApiStatusRoute
+  '/api/sync': typeof ApiSyncRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -201,6 +210,7 @@ export interface FileRouteTypes {
     | '/api/profile-hydrate'
     | '/api/query'
     | '/api/status'
+    | '/api/sync'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -221,6 +231,7 @@ export interface FileRouteTypes {
     | '/api/profile-hydrate'
     | '/api/query'
     | '/api/status'
+    | '/api/sync'
   id:
     | '__root__'
     | '/'
@@ -241,6 +252,7 @@ export interface FileRouteTypes {
     | '/api/profile-hydrate'
     | '/api/query'
     | '/api/status'
+    | '/api/sync'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -262,6 +274,7 @@ export interface RootRouteChildren {
   ApiProfileHydrateRoute: typeof ApiProfileHydrateRoute
   ApiQueryRoute: typeof ApiQueryRoute
   ApiStatusRoute: typeof ApiStatusRoute
+  ApiSyncRoute: typeof ApiSyncRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -322,6 +335,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/sync': {
+      id: '/api/sync'
+      path: '/api/sync'
+      fullPath: '/api/sync'
+      preLoaderRoute: typeof ApiSyncRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/status': {
       id: '/api/status'
       path: '/api/status'
@@ -414,6 +434,7 @@ const rootRouteChildren: RootRouteChildren = {
   ApiProfileHydrateRoute: ApiProfileHydrateRoute,
   ApiQueryRoute: ApiQueryRoute,
   ApiStatusRoute: ApiStatusRoute,
+  ApiSyncRoute: ApiSyncRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

package/src/routes/api/sync.tsx

@@ -0,0 +1,59 @@
+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,
+		},
+	});
+}
+
+function parseAccountId(value: unknown) {
+	return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+export const Route = createFileRoute("/api/sync")({
+	server: {
+		handlers: {
+			GET: ({ request }) => {
+				const url = new URL(request.url);
+				const id = url.searchParams.get("id");
+				if (!id) {
+					return json(
+						{ ok: false, message: "Missing sync job id" },
+						{ status: 400 },
+					);
+				}
+
+				const job = getWebSyncJob(id);
+				if (!job) {
+					return json(
+						{ ok: false, message: "Sync job not found" },
+						{ status: 404 },
+					);
+				}
+
+				return json(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 },
+					);
+				}
+
+				const job = startWebSync(kind, parseAccountId(body.accountId));
+				return json(job, { status: job.inProgress ? 202 : 200 });
+			},
+		},
+	},
+});

package/src/routes/dms.tsx

@@ -2,11 +2,17 @@ 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 {
+	fetchQueryEnvelope,
+	fetchQueryResponse,
+	postAction,
+} from "#/lib/api-client";
 import type {
 	DmConversationItem,
 	DmMessageItem,
 	QueryEnvelope,
-	QueryResponse,
 	ReplyFilter,
 } from "#/lib/types";
 import {
@@ -43,6 +49,9 @@ 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
 	>();
@@ -53,15 +62,20 @@ function DmsRoute() {
 	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);
+
+	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("replyFilter", replyFilter);
@@ -76,12 +90,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,14 +110,31 @@ 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();
 		};
 	}, [
@@ -115,6 +149,13 @@ function DmsRoute() {
 
 	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...";
@@ -170,14 +211,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);
@@ -190,6 +227,11 @@ function DmsRoute() {
 		}
 	}
 
+	function refreshLocalView() {
+		setRefreshTick((value) => value + 1);
+		void loadStatus();
+	}
+
 	return (
 		<>
 			<header className={pageHeaderClass}>
@@ -198,6 +240,11 @@ function DmsRoute() {
 						<h1 className={pageTitleClass}>Messages</h1>
 						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
+					<SyncNowButton
+						kind="dms"
+						label="Sync DMs"
+						onSynced={refreshLocalView}
+					/>
 				</div>
 				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
 					<label className={cx(searchFieldShellClass, "flex-1 min-w-[200px]")}>
@@ -260,15 +307,41 @@ function DmsRoute() {
 				</div>
 			</header>
 
-			<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/index.tsx

@@ -1,138 +1,32 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { TimelineCard } from "#/components/TimelineCard";
-import type {
-	QueryEnvelope,
-	QueryResponse,
-	ReplyFilter,
-	TimelineItem,
-} from "#/lib/types";
-import {
-	cx,
-	emptyStateClass,
-	feedClass,
-	pageHeaderClass,
-	pageHeaderRowClass,
-	pageSubtitleClass,
-	pageTitleClass,
-	searchFieldIconClass,
-	searchFieldInputClass,
-	searchFieldShellClass,
-	tabButtonActiveClass,
-	tabButtonClass,
-	tabButtonIndicatorClass,
-	tabStripClass,
-} from "#/lib/ui";
+import { TimelineRouteFrame } from "#/components/TimelineRouteFrame";
+import type { QueryEnvelope } from "#/lib/types";
 
 export const Route = createFileRoute("/")({
 	component: HomeRoute,
 });
 
-const TABS: Array<{ value: ReplyFilter; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "unreplied", label: "Unreplied" },
-	{ value: "replied", label: "Replied" },
-];
+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() {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
-	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("all");
-	const [search, setSearch] = useState("");
-	const [refreshTick, setRefreshTick] = useState(0);
-
-	useEffect(() => {
-		fetch("/api/status")
-			.then((response) => response.json())
-			.then((data: QueryEnvelope) => setMeta(data));
-	}, []);
-
-	useEffect(() => {
-		const url = new URL("/api/query", window.location.origin);
-		url.searchParams.set("resource", "home");
-		url.searchParams.set("replyFilter", replyFilter);
-		url.searchParams.set("refresh", String(refreshTick));
-		if (search.trim()) {
-			url.searchParams.set("search", search.trim());
-		}
-
-		fetch(url)
-			.then((response) => response.json())
-			.then((data: QueryResponse) => setItems(data.items as TimelineItem[]));
-	}, [refreshTick, replyFilter, search]);
-
-	const subtitle = useMemo(() => {
-		if (!meta) return "Loading local context...";
-		return `${String(meta.stats.home)} items · ${String(meta.stats.needsReply)} waiting · ${meta.transport.statusText}`;
-	}, [meta]);
-
-	async function replyToTweet(tweetId: string) {
-		const text = window.prompt("Reply text");
-		if (!text?.trim()) return;
-
-		await fetch("/api/action", {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({
-				kind: "replyTweet",
-				accountId: "acct_primary",
-				tweetId,
-				text,
-			}),
-		});
-
-		setRefreshTick((value) => value + 1);
-	}
-
 	return (
-		<>
-			<header className={pageHeaderClass}>
-				<div className={pageHeaderRowClass}>
-					<div className="flex min-w-0 flex-col">
-						<h1 className={pageTitleClass}>Home</h1>
-						<p className={pageSubtitleClass}>{subtitle}</p>
-					</div>
-				</div>
-				<div className="px-4 pb-3">
-					<label className={searchFieldShellClass}>
-						<Search className={searchFieldIconClass} strokeWidth={2} />
-						<input
-							className={searchFieldInputClass}
-							onChange={(event) => setSearch(event.target.value)}
-							placeholder="Search local timeline"
-							value={search}
-						/>
-					</label>
-				</div>
-				<div className={tabStripClass}>
-					{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>
-			<section className={feedClass}>
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>No posts to show.</div>
-				) : null}
-				{items.map((item) => (
-					<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
-				))}
-			</section>
-		</>
+		<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/links.tsx

@@ -11,6 +11,12 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AvatarChip } from "#/components/AvatarChip";
+import {
+	FeedEmpty,
+	FeedError,
+	FeedLoading,
+	LinkSkeletonRows,
+} from "#/components/FeedState";
 import { ProfilePreview } from "#/components/ProfilePreview";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type {
@@ -26,7 +32,6 @@ import type {
 } from "#/lib/types";
 import {
 	cx,
-	emptyStateClass,
 	pageHeaderClass,
 	pageHeaderRowClass,
 	pageSubtitleClass,
@@ -649,6 +654,7 @@ function LinksRoute() {
 	const cacheRef = useRef(new Map<string, LinkInsightResponse>());
 	const inFlightRef = useRef(new Set<string>());
 	const mountedRef = useRef(true);
+	const [errorByKey, setErrorByKey] = useState<Record<string, string>>({});
 	const [, bumpCacheVersion] = useState(0);
 	const currentCacheKey = insightCacheKey(
 		kind,
@@ -658,6 +664,8 @@ function LinksRoute() {
 		refreshTick,
 	);
 	const data = cacheRef.current.get(currentCacheKey) ?? null;
+	const error = errorByKey[currentCacheKey] ?? null;
+	const loading = !data && !error;
 
 	useEffect(() => {
 		return () => {
@@ -672,6 +680,11 @@ function LinksRoute() {
 				return;
 			}
 			inFlightRef.current.add(key);
+			setErrorByKey((current) => {
+				const rest = { ...current };
+				delete rest[key];
+				return rest;
+			});
 			fetch(linkInsightsUrl(fetchKind, range, sort, source, refreshTick))
 				.then((response) => response.json())
 				.then((response: LinkInsightResponse) => {
@@ -684,7 +697,17 @@ function LinksRoute() {
 					if (error instanceof DOMException && error.name === "AbortError") {
 						return;
 					}
+					if (!mountedRef.current) {
+						return;
+					}
 					console.warn("Link insights failed", error);
+					setErrorByKey((current) => ({
+						...current,
+						[key]:
+							error instanceof Error
+								? error.message
+								: "Link insights unavailable",
+					}));
 				})
 				.finally(() => {
 					inFlightRef.current.delete(key);
@@ -865,10 +888,32 @@ function LinksRoute() {
 			</header>
 
 			<section className="flex flex-col">
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>
-						{data ? "No links in this window." : "Loading links..."}
-					</div>
+				{loading ? (
+					<FeedLoading
+						detail="Ranking URLs and collecting local discussion"
+						label="Loading links"
+					>
+						<LinkSkeletonRows />
+					</FeedLoading>
+				) : 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 links"
+					/>
+				) : items.length === 0 ? (
+					<FeedEmpty
+						detail="Try a different range, source, or search term."
+						label="No links in this window"
+					/>
 				) : null}
 				{items.map((item, index) => (
 					<LinkInsightRow