birdclaw 0.5.0 → 0.5.1

package/src/components/DmWorkspace.tsx

@@ -1,3 +1,4 @@
+import { CheckCircle2, Circle } from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { DmConversationItem, DmMessageItem } from "#/lib/types";
 import {
@@ -29,7 +30,6 @@ import {
 	dmThreadNameClass,
 	dmThreadSubtitleClass,
 	dmThreadTitleClass,
-	emptyStateClass,
 	pillAlertClass,
 	pillClass,
 	pillSoftClass,
@@ -37,6 +37,7 @@ import {
 	timestampClass,
 } from "#/lib/ui";
 import { AvatarChip } from "./AvatarChip";
+import { BirdclawEmpty } from "./BrandMark";
 
 function MessageBubble({ message }: { message: DmMessageItem }) {
 	const outbound = message.direction === "outbound";
@@ -80,14 +81,17 @@ export function DmWorkspace({
 }) {
 	const participant = selectedConversation?.participant ?? null;
 	const subtitle = selectedConversation
-		? `${selectedConversation.needsReply ? "Reply owed" : "Thread clear"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
+		? `${selectedConversation.needsReply ? "Reply open" : "We replied"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
 		: "No conversation selected";
 
 	return (
 		<section className={dmShellClass}>
 			<aside className={dmListClass}>
 				{conversations.length === 0 ? (
-					<div className={emptyStateClass}>No conversations.</div>
+					<BirdclawEmpty
+						detail="Sync DMs to populate this lane."
+						label="No conversations"
+					/>
 				) : null}
 				{conversations.map((conversation) => {
 					const active = conversation.id === selectedConversation?.id;
@@ -127,8 +131,16 @@ export function DmWorkspace({
 											pillClass,
 											conversation.needsReply ? pillAlertClass : pillSoftClass,
 										)}
+										aria-label={
+											conversation.needsReply ? "Reply open" : "We replied"
+										}
 									>
-										{conversation.needsReply ? "needs reply" : "clear"}
+										{conversation.needsReply ? (
+											<Circle className="size-3" strokeWidth={2.2} />
+										) : (
+											<CheckCircle2 className="size-3.5" strokeWidth={2} />
+										)}
+										{conversation.needsReply ? "open" : "replied"}
 									</span>
 									<span className={cx(pillClass, pillSoftClass)}>
 										{conversation.influenceScore} ·{" "}
@@ -192,8 +204,8 @@ export function DmWorkspace({
 										<dt className={contextStatTermClass}>Reply state</dt>
 										<dd className={contextStatValueClass}>
 											{selectedConversation.needsReply
-												? "Needs reply"
-												: "Replied"}
+												? "Reply open"
+												: "We replied"}
 										</dd>
 									</div>
 									<div className={contextStatRowClass}>
@@ -221,8 +233,8 @@ export function DmWorkspace({
 							<div className={composerBarClass}>
 								<span className={timestampClass}>
 									{selectedConversation.needsReply
-										? "Reply still owed"
-										: "Thread clear"}
+										? "Reply open"
+										: "We replied"}
 								</span>
 								<button
 									className={primaryButtonClass}
@@ -236,7 +248,10 @@ export function DmWorkspace({
 						</div>
 					</>
 				) : (
-					<div className={emptyStateClass}>No DM selected.</div>
+					<BirdclawEmpty
+						detail="Pick a conversation to read the thread."
+						label="No DM selected"
+					/>
 				)}
 			</div>
 		</section>

package/src/components/FeedState.tsx

@@ -0,0 +1,147 @@
+import type { ReactNode } from "react";
+import { BirdclawEmpty, BirdclawLoading } from "./BrandMark";
+
+function SkeletonBlock({
+	className,
+	muted = false,
+}: {
+	className: string;
+	muted?: boolean;
+}) {
+	return (
+		<span
+			aria-hidden="true"
+			className={`block animate-pulse rounded-full ${muted ? "bg-[color:color-mix(in_srgb,var(--ink-soft)_16%,transparent)]" : "bg-[color:color-mix(in_srgb,var(--ink-soft)_24%,transparent)]"} ${className}`}
+		/>
+	);
+}
+
+export function TweetSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => {
+				const hasMedia = index % 3 === 0;
+				const hasQuote = index % 4 === 2;
+				return (
+					<article
+						className="flex gap-3 px-4 py-3"
+						data-perf="tweet-skeleton-row"
+						key={`tweet-skeleton-${index}`}
+					>
+						<SkeletonBlock className="size-10 shrink-0 rounded-full" />
+						<div className="min-w-0 flex-1 space-y-3">
+							<div className="flex items-center gap-2">
+								<SkeletonBlock className="h-3.5 w-32" />
+								<SkeletonBlock className="h-3 w-20" muted />
+								<SkeletonBlock className="ml-auto h-5 w-16" muted />
+							</div>
+							<div className="space-y-2">
+								<SkeletonBlock className="h-3 w-full" />
+								<SkeletonBlock className="h-3 w-11/12" muted />
+								{index % 2 === 0 ? (
+									<SkeletonBlock className="h-3 w-7/12" muted />
+								) : null}
+							</div>
+							{hasMedia ? (
+								<SkeletonBlock className="h-32 w-full rounded-2xl" muted />
+							) : null}
+							{hasQuote ? (
+								<div className="space-y-2 rounded-2xl border border-[var(--line)] px-3 py-2">
+									<SkeletonBlock className="h-3 w-28" muted />
+									<SkeletonBlock className="h-3 w-full" muted />
+								</div>
+							) : null}
+							<div className="flex max-w-md items-center justify-between">
+								{["thread", "reply", "repost", "like"].map((key) => (
+									<SkeletonBlock className="h-3 w-11" key={key} muted />
+								))}
+							</div>
+						</div>
+					</article>
+				);
+			})}
+		</div>
+	);
+}
+
+export function LinkSkeletonRows({ count = 4 }: { count?: number }) {
+	return (
+		<div aria-hidden="true" className="divide-y divide-[var(--line)]">
+			{Array.from({ length: count }, (_unused, index) => (
+				<article
+					className="flex gap-3 px-4 py-3"
+					data-perf="link-skeleton-row"
+					key={`link-skeleton-${index}`}
+				>
+					<SkeletonBlock className="size-9 shrink-0 rounded-full" muted />
+					<div className="min-w-0 flex-1 space-y-3">
+						<SkeletonBlock className="h-3.5 w-8/12" />
+						<SkeletonBlock className="h-3 w-6/12" muted />
+						<div className="flex flex-wrap gap-2">
+							<SkeletonBlock className="h-3 w-20" muted />
+							<SkeletonBlock className="h-3 w-14" muted />
+							<SkeletonBlock className="h-3 w-24" muted />
+						</div>
+						{index % 2 === 0 ? (
+							<SkeletonBlock
+								className="h-20 w-72 max-w-full rounded-2xl"
+								muted
+							/>
+						) : null}
+					</div>
+				</article>
+			))}
+		</div>
+	);
+}
+
+export function FeedLoading({
+	children,
+	detail,
+	label,
+}: {
+	children?: ReactNode;
+	detail?: string;
+	label: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)]">
+			<BirdclawLoading detail={detail} label={label} />
+			{children}
+		</div>
+	);
+}
+
+export function FeedError({
+	action,
+	message,
+	title = "Could not load this view",
+}: {
+	action?: ReactNode;
+	message: string;
+	title?: string;
+}) {
+	return (
+		<div className="border-b border-[var(--line)] px-6 py-10 text-center">
+			<div className="mx-auto max-w-sm">
+				<div className="text-[14px] font-bold text-[var(--alert)]">{title}</div>
+				<p className="mt-2 text-[13px] leading-[1.45] text-[var(--ink-soft)]">
+					{message}
+				</p>
+				{action ? (
+					<div className="mt-4 flex justify-center">{action}</div>
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+export function FeedEmpty({
+	detail,
+	label,
+}: {
+	detail?: string;
+	label: string;
+}) {
+	return <BirdclawEmpty detail={detail} label={label} />;
+}

package/src/components/InboxCard.tsx

@@ -1,5 +1,10 @@
 import { Link } from "@tanstack/react-router";
-import { ExternalLink, MessageCircle } from "lucide-react";
+import {
+	CheckCircle2,
+	Circle,
+	ExternalLink,
+	MessageCircle,
+} from "lucide-react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { InboxItem } from "#/lib/types";
 import {
@@ -86,7 +91,14 @@ export function InboxCard({
 						<span className={mutedDotClass} />
 						<span>influence {formatCompactNumber(item.influenceScore)}</span>
 						<span className={mutedDotClass} />
-						<span>{item.needsReply ? "needs reply" : "resolved"}</span>
+						<span className="inline-flex items-center gap-1">
+							{item.needsReply ? (
+								<Circle className="size-3" strokeWidth={2.2} />
+							) : (
+								<CheckCircle2 className="size-3.5" strokeWidth={2} />
+							)}
+							{item.needsReply ? "open" : "replied"}
+						</span>
 					</div>
 					<div className="flex items-center gap-2">
 						<button

package/src/components/SavedTimelineView.tsx

@@ -1,9 +1,16 @@
 import { Search } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import {
+	FeedEmpty,
+	FeedError,
+	FeedLoading,
+	TweetSkeletonRows,
+} from "#/components/FeedState";
+import { SyncNowButton } from "#/components/SyncNowButton";
 import { TimelineCard } from "#/components/TimelineCard";
-import type { QueryEnvelope, QueryResponse, TimelineItem } from "#/lib/types";
+import { useTimelineRouteData } from "#/components/useTimelineRouteData";
+import { ConversationSurfaceScope } from "#/lib/conversation-surface";
 import {
-	emptyStateClass,
 	feedClass,
 	pageHeaderClass,
 	pageHeaderRowClass,
@@ -33,30 +40,15 @@ export function SavedTimelineView({
 	loadingLabel,
 	searchPlaceholder,
 }: SavedTimelineViewProps) {
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [items, setItems] = useState<TimelineItem[]>([]);
 	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(filter, "true");
-		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[]));
-	}, [filter, refreshTick, search]);
+	const { meta, items, loading, error, retry, refreshLocalView, replyToTweet } =
+		useTimelineRouteData({
+			resource: "home",
+			search,
+			errorFallback: `${TITLES[filter]} unavailable`,
+			likedOnly: filter === "liked",
+			bookmarkedOnly: filter === "bookmarked",
+		});
 
 	const subtitle = useMemo(() => {
 		if (!meta) {
@@ -67,23 +59,7 @@ export function SavedTimelineView({
 		return `${String(items.length)} visible · ${meta.transport.statusText}`;
 	}, [items.length, loadingLabel, 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);
-	}
+	const syncKind = filter === "liked" ? "likes" : "bookmarks";
 
 	return (
 		<>
@@ -94,6 +70,12 @@ export function SavedTimelineView({
 						<p className={pageSubtitleClass}>{title}</p>
 						<p className={pageSubtitleClass}>{subtitle}</p>
 					</div>
+					<SyncNowButton
+						accounts={meta?.accounts}
+						kind={syncKind}
+						label={filter === "liked" ? "Sync likes" : "Sync bookmarks"}
+						onSynced={refreshLocalView}
+					/>
 				</div>
 				<div className="px-4 pb-3">
 					<label className={searchFieldShellClass}>
@@ -107,19 +89,45 @@ export function SavedTimelineView({
 					</label>
 				</div>
 			</header>
-			<section className={feedClass}>
-				{items.length === 0 ? (
-					<div className={emptyStateClass}>Nothing saved here yet.</div>
-				) : null}
-				{items.map((item) => (
-					<TimelineCard
-						key={item.id}
-						item={item}
-						onReply={replyToTweet}
-						showReplyControls={false}
-					/>
-				))}
-			</section>
+			<ConversationSurfaceScope>
+				<section className={feedClass}>
+					{loading ? (
+						<FeedLoading
+							detail={`Reading local ${TITLES[filter].toLowerCase()}`}
+							label={loadingLabel}
+						>
+							<TweetSkeletonRows />
+						</FeedLoading>
+					) : error ? (
+						<FeedError
+							action={
+								<button
+									className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
+									onClick={retry}
+									type="button"
+								>
+									Retry
+								</button>
+							}
+							message={error}
+							title={`Could not load ${TITLES[filter].toLowerCase()}`}
+						/>
+					) : items.length === 0 ? (
+						<FeedEmpty
+							detail="Sync this collection or broaden the search."
+							label="Nothing saved here yet"
+						/>
+					) : null}
+					{items.map((item) => (
+						<TimelineCard
+							key={item.id}
+							item={item}
+							onReply={replyToTweet}
+							showReplyControls={false}
+						/>
+					))}
+				</section>
+			</ConversationSurfaceScope>
 		</>
 	);
 }

package/src/components/SyncNowButton.tsx

@@ -0,0 +1,105 @@
+import { RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { postSync } from "#/lib/api-client";
+import type { AccountRecord } from "#/lib/types";
+import { cx, selectFieldClass } from "#/lib/ui";
+import type { WebSyncKind, WebSyncResponse } from "#/lib/web-sync";
+
+interface SyncNowButtonProps {
+	kind: WebSyncKind;
+	label: string;
+	accounts?: AccountRecord[];
+	onSynced: (result: WebSyncResponse) => void;
+}
+
+export function SyncNowButton({
+	kind,
+	label,
+	accounts = [],
+	onSynced,
+}: SyncNowButtonProps) {
+	const [syncing, setSyncing] = useState(false);
+	const [message, setMessage] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [selectedAccountId, setSelectedAccountId] = useState<
+		string | undefined
+	>();
+	const defaultAccountId = useMemo(
+		() => accounts.find((account) => account.isDefault)?.id ?? accounts[0]?.id,
+		[accounts],
+	);
+	const accountId = selectedAccountId ?? defaultAccountId;
+
+	useEffect(() => {
+		if (!accounts.length) {
+			setSelectedAccountId(undefined);
+			return;
+		}
+		if (!accountId || !accounts.some((account) => account.id === accountId)) {
+			setSelectedAccountId(defaultAccountId);
+		}
+	}, [accountId, accounts, defaultAccountId]);
+
+	async function syncNow() {
+		setSyncing(true);
+		setError(null);
+		setMessage(null);
+		try {
+			const data = await postSync(kind, accountId);
+			if (!data.ok) throw new Error(data.summary);
+			setMessage(data.summary);
+			onSynced(data);
+		} catch (syncError) {
+			setError(syncError instanceof Error ? syncError.message : "Sync failed");
+		} finally {
+			setSyncing(false);
+		}
+	}
+
+	return (
+		<div className="flex shrink-0 items-center gap-2">
+			{accounts.length > 1 ? (
+				<select
+					aria-label="Sync account"
+					className={cx(selectFieldClass, "h-9 w-[132px]")}
+					disabled={syncing}
+					onChange={(event) => setSelectedAccountId(event.target.value)}
+					value={accountId ?? ""}
+				>
+					{accounts.map((account) => (
+						<option key={account.id} value={account.id}>
+							{account.handle}
+						</option>
+					))}
+				</select>
+			) : null}
+			<button
+				type="button"
+				className={cx(
+					"inline-flex h-9 shrink-0 items-center gap-1.5 rounded-full border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] font-semibold text-[var(--ink)] transition-[background,border-color,color,transform] duration-150 hover:border-[color:color-mix(in_srgb,var(--accent)_45%,var(--line))] hover:bg-[var(--accent-soft)] hover:text-[var(--accent)] active:scale-[0.98] disabled:cursor-wait disabled:opacity-65",
+					syncing && "text-[var(--ink-soft)]",
+				)}
+				aria-label={syncing ? `${label}: syncing` : label}
+				disabled={syncing}
+				onClick={syncNow}
+			>
+				<RefreshCw
+					className={cx("size-4", syncing && "animate-spin")}
+					strokeWidth={2}
+				/>
+				<span className="hidden sm:inline">
+					{syncing ? "Syncing..." : label}
+				</span>
+			</button>
+			<span
+				className={cx(
+					"hidden max-w-[190px] truncate text-[12px] sm:inline",
+					error ? "text-[var(--alert)]" : "text-[var(--ink-soft)]",
+				)}
+				role="status"
+			>
+				{error ?? message ?? ""}
+			</span>
+		</div>
+	);
+}

package/src/components/ThemeSlider.tsx

@@ -1,6 +1,5 @@
 import { Monitor, Moon, Sun } from "lucide-react";
-import type { CSSProperties, MouseEvent } from "react";
-import { useMemo } from "react";
+import type { MouseEvent } from "react";
 import { type ThemeValue, useTheme } from "#/lib/theme";
 import {
 	startThemeTransition,
@@ -18,67 +17,18 @@ const THEME_OPTIONS = [
 	label: string;
 }>;
 
-const ACTIVE_ITEM_WIDTH_PX = 30;
-const GAP_PX = 6;
-const CONTAINER_PADDING_PX = 6;
-const INDICATOR_SIZE_PX = 30;
-const INDICATOR_OVERHANG_PX = (INDICATOR_SIZE_PX - ACTIVE_ITEM_WIDTH_PX) / 2;
-const INDICATOR_BASE_OFFSET_PX = CONTAINER_PADDING_PX - INDICATOR_OVERHANG_PX;
-
-function toPx(value: number) {
-	return `${String(value)}px`;
-}
-
 export function ThemeSlider() {
-	const { isReady, theme, resolvedTheme, setTheme } = useTheme();
-
-	const activeIndex = useMemo(() => {
-		const index = THEME_OPTIONS.findIndex((option) => option.key === theme);
-		return index === -1 ? 0 : index;
-	}, [theme]);
-
-	const indicatorOffset = activeIndex * (ACTIVE_ITEM_WIDTH_PX + GAP_PX);
-	const indicatorStyle = useMemo<CSSProperties>(
-		() => ({
-			left: toPx(INDICATOR_BASE_OFFSET_PX),
-			transform: `translate(${toPx(indicatorOffset)}, -50%)`,
-		}),
-		[indicatorOffset],
-	);
-	const sliderStyle = useMemo<CSSProperties>(
-		() => ({
-			gridTemplateColumns: `repeat(${String(THEME_OPTIONS.length)}, ${toPx(ACTIVE_ITEM_WIDTH_PX)})`,
-			columnGap: toPx(GAP_PX),
-			padding: `0 ${toPx(CONTAINER_PADDING_PX)}`,
-			width: toPx(
-				THEME_OPTIONS.length * ACTIVE_ITEM_WIDTH_PX +
-					(THEME_OPTIONS.length - 1) * GAP_PX +
-					CONTAINER_PADDING_PX * 2,
-			),
-		}),
-		[],
-	);
+	const { isReady, theme, setTheme } = useTheme();
 
 	return (
 		<fieldset
-			className="theme-slider-shell m-0 border-0 p-0"
+			className="theme-slider-shell m-0 flex justify-center border-0 px-2 py-1 min-[1100px]:justify-start min-[1100px]:px-3"
 			aria-label="Theme selector"
 		>
-			<div
-				className="theme-slider relative grid h-[42px] place-items-center overflow-hidden rounded-full border border-[var(--line)] bg-[color:color-mix(in_srgb,var(--panel-strong)_86%,transparent)] shadow-[inset_0_1px_0_color-mix(in_srgb,white_40%,transparent)] transition-[background,border-color] duration-180"
-				style={sliderStyle}
-			>
-				<div
-					className={cx(
-						"theme-slider-indicator pointer-events-none absolute top-1/2 z-0 size-[30px] rounded-full border border-[color:color-mix(in_srgb,var(--line-strong)_85%,transparent)] bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.6),transparent_58%),var(--panel-strong)] shadow-[0_10px_24px_var(--shadow),inset_0_1px_0_rgba(255,255,255,0.35)] transition-[transform,background,border-color,box-shadow] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)]",
-						resolvedTheme === "dark" &&
-							"theme-slider-indicator-dark shadow-[0_10px_24px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.08)]",
-					)}
-					style={indicatorStyle}
-				/>
+			<div className="theme-slider flex flex-col items-center gap-1.5 min-[1100px]:flex-row">
 				{THEME_OPTIONS.map((option, index) => {
 					const Icon = option.icon;
-					const isActive = index === activeIndex;
+					const isActive = option.key === theme || (index === 0 && !theme);
 
 					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
 						if (isActive) return;
@@ -102,8 +52,9 @@ export function ThemeSlider() {
 							key={option.key}
 							type="button"
 							className={cx(
-								"theme-slider-button relative z-[1] inline-flex size-[30px] items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[color,transform] duration-160 hover:-translate-y-px hover:text-[var(--ink)] disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
-								isActive && "theme-slider-button-active text-[var(--ink)]",
+								"theme-slider-button inline-flex size-9 items-center justify-center rounded-full border-0 bg-transparent text-[var(--ink-soft)] transition-[background,color,transform] duration-150 hover:bg-[var(--bg-hover)] hover:text-[var(--ink)] active:scale-95 disabled:cursor-default disabled:opacity-55 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:color-mix(in_srgb,var(--accent)_54%,transparent)]",
+								isActive &&
+									"theme-slider-button-active bg-[var(--bg-active)] text-[var(--ink)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--line)_72%,transparent)]",
 							)}
 							onClick={handleClick}
 							aria-label={option.label}
@@ -112,8 +63,8 @@ export function ThemeSlider() {
 							disabled={!isReady}
 						>
 							<Icon
-								className="theme-slider-icon size-[15px]"
-								strokeWidth={1.8}
+								className="theme-slider-icon size-[17px]"
+								strokeWidth={isActive ? 2.1 : 1.8}
 							/>
 						</button>
 					);