birdclaw 0.5.0 → 0.6.0

package/src/routes/today.tsx

@@ -0,0 +1,441 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { CheckCircle2, Loader2, RefreshCw, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { MarkdownViewer } from "#/components/MarkdownViewer";
+import type {
+	PeriodDigestContext,
+	PeriodDigestRunResult,
+	PeriodDigestStreamEvent,
+} from "#/lib/period-digest";
+import type { ProfileRecord } from "#/lib/types";
+import {
+	cx,
+	errorCopyClass,
+	pageHeaderActionsClass,
+	pageHeaderClass,
+	pageHeaderRowClass,
+	pageSubtitleClass,
+	pageTitleClass,
+	secondaryButtonClass,
+	segmentActiveClass,
+	segmentClass,
+	segmentedClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/today")({
+	component: TodayRoute,
+});
+
+type PeriodOption = "today" | "24h" | "yesterday" | "week";
+type HydrateProfileResult = {
+	handle: string;
+	status: "hit" | "miss" | "error";
+	profile?: ProfileRecord;
+};
+
+const PROFILE_HYDRATION_LIMIT = 12;
+const PROFILE_HYDRATION_DELAY_MS = 300;
+
+const periods: Array<{ value: PeriodOption; label: string }> = [
+	{ value: "today", label: "Today" },
+	{ value: "24h", label: "24h" },
+	{ value: "yesterday", label: "Yesterday" },
+	{ value: "week", label: "Week" },
+];
+
+function digestUrl(
+	period: PeriodOption,
+	includeDms: boolean,
+	refresh: boolean,
+) {
+	const url = new URL("/api/period-digest", window.location.origin);
+	url.searchParams.set("period", period);
+	url.searchParams.set("includeDms", String(includeDms));
+	if (refresh) {
+		url.searchParams.set("refresh", "true");
+	}
+	return url;
+}
+
+async function digestRequestError(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
+			? `Digest request failed (${status}): ${detail}`
+			: `Digest request failed (${status})`,
+	);
+}
+
+function formatCounts(context: PeriodDigestContext | null) {
+	if (!context) return "Local Twitter memory, summarized as it streams.";
+	const counts = context.counts;
+	return [
+		`${String(counts.home)} home`,
+		`${String(counts.mentions)} mentions`,
+		`${String(counts.links)} links`,
+		context.includeDms ? `${String(counts.dms)} DMs` : null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+}
+
+function normalizeHandle(value: string) {
+	return value.trim().replace(/^@/, "").toLowerCase();
+}
+
+function collectProfilesForHydration(result: PeriodDigestRunResult) {
+	const handles = new Set<string>();
+	const tweetIds = new Set<string>();
+	for (const id of result.digest.sourceTweetIds) tweetIds.add(id);
+	for (const topic of result.digest.keyTopics) {
+		for (const id of topic.tweetIds) tweetIds.add(id);
+	}
+	for (const link of result.digest.notableLinks) {
+		for (const id of link.sourceTweetIds) tweetIds.add(id);
+	}
+	for (const item of result.digest.actionItems) {
+		if (item.tweetId) tweetIds.add(item.tweetId);
+	}
+
+	const tweetsById = new Map(
+		result.context.tweets.flatMap((tweet) => [
+			[tweet.id, tweet],
+			[`tweet_${tweet.id}`, tweet],
+		]),
+	);
+	for (const id of tweetIds) {
+		const tweet = tweetsById.get(id);
+		if (!tweet) continue;
+		const handle = normalizeHandle(tweet.author);
+		if (handle) handles.add(handle);
+		if (handles.size >= PROFILE_HYDRATION_LIMIT) return [...handles];
+	}
+
+	for (const tweet of result.context.tweets) {
+		const handle = normalizeHandle(tweet.author);
+		if (handle) handles.add(handle);
+		if (handles.size >= PROFILE_HYDRATION_LIMIT) return [...handles];
+	}
+	return [...handles];
+}
+
+function applyHydratedProfilesToContext(
+	context: PeriodDigestContext,
+	profilesByHandle: Map<string, ProfileRecord>,
+) {
+	let changed = false;
+	const tweets = context.tweets.map((tweet) => {
+		const profile = profilesByHandle.get(normalizeHandle(tweet.author));
+		if (!profile || profile === tweet.authorProfile) return tweet;
+		changed = true;
+		return {
+			...tweet,
+			author: profile.handle,
+			name: profile.displayName,
+			authorProfile: profile,
+		};
+	});
+	return changed ? { ...context, tweets } : context;
+}
+
+function applyHydratedProfilesToResult(
+	result: PeriodDigestRunResult,
+	profiles: ProfileRecord[],
+) {
+	const profilesByHandle = new Map(
+		profiles.map((profile) => [normalizeHandle(profile.handle), profile]),
+	);
+	if (profilesByHandle.size === 0) return result;
+	const context = applyHydratedProfilesToContext(
+		result.context,
+		profilesByHandle,
+	);
+	return context === result.context ? result : { ...result, context };
+}
+
+function useDigestStream(period: PeriodOption, includeDms: boolean) {
+	const [markdown, setMarkdown] = useState("");
+	const [context, setContext] = useState<PeriodDigestContext | null>(null);
+	const [result, setResult] = useState<PeriodDigestRunResult | 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 hydratedHandlesRef = useRef(new Set<string>());
+	const hydratedProfilesRef = useRef(new Map<string, ProfileRecord>());
+
+	const run = useCallback(
+		(refresh = false) => {
+			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(digestUrl(period, includeDms, refresh), {
+				signal: controller.signal,
+			})
+				.then(async (response) => {
+					if (!response.ok) {
+						throw await digestRequestError(response);
+					}
+					if (!response.body) {
+						throw new Error("Digest 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 PeriodDigestStreamEvent;
+									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 : "Digest failed");
+				})
+				.finally(() => {
+					if (isActiveRequest()) {
+						setLoading(false);
+					}
+				});
+		},
+		[includeDms, period],
+	);
+
+	useEffect(() => {
+		run(false);
+		return () => abortRef.current?.abort();
+	}, [run]);
+
+	useEffect(() => {
+		if (!result) return;
+		if (hydratedProfilesRef.current.size > 0) {
+			const cachedProfiles = [...hydratedProfilesRef.current.values()];
+			setResult((current) =>
+				current
+					? applyHydratedProfilesToResult(current, cachedProfiles)
+					: current,
+			);
+			setContext((current) =>
+				current
+					? applyHydratedProfilesToContext(current, hydratedProfilesRef.current)
+					: current,
+			);
+		}
+		const handles = collectProfilesForHydration(result).filter(
+			(handle) => !hydratedHandlesRef.current.has(handle),
+		);
+		if (handles.length === 0) return;
+
+		const controller = new AbortController();
+		const url = new URL("/api/profile-hydrate", window.location.origin);
+		url.searchParams.set("handles", handles.join(","));
+
+		let idleId: number | null = null;
+		const runHydration = () => {
+			fetch(url, { signal: controller.signal })
+				.then((response) => response.json())
+				.then((response: { results?: HydrateProfileResult[] }) => {
+					for (const handle of handles) hydratedHandlesRef.current.add(handle);
+					const profiles =
+						response.results
+							?.map((item) => item.profile)
+							.filter((profile): profile is ProfileRecord =>
+								Boolean(profile),
+							) ?? [];
+					if (profiles.length === 0) return;
+					for (const profile of profiles) {
+						hydratedProfilesRef.current.set(
+							normalizeHandle(profile.handle),
+							profile,
+						);
+					}
+					setResult((current) =>
+						current
+							? applyHydratedProfilesToResult(current, profiles)
+							: current,
+					);
+					const profilesByHandle = new Map(
+						profiles.map((profile) => [
+							normalizeHandle(profile.handle),
+							profile,
+						]),
+					);
+					setContext((current) =>
+						current
+							? applyHydratedProfilesToContext(current, profilesByHandle)
+							: current,
+					);
+				})
+				.catch((error: unknown) => {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						return;
+					}
+					console.warn("Profile hydration failed", error);
+				});
+		};
+		const timer = window.setTimeout(() => {
+			if ("requestIdleCallback" in window) {
+				idleId = window.requestIdleCallback(runHydration, { timeout: 2500 });
+			} else {
+				runHydration();
+			}
+		}, PROFILE_HYDRATION_DELAY_MS);
+
+		return () => {
+			controller.abort();
+			window.clearTimeout(timer);
+			if (idleId !== null && "cancelIdleCallback" in window) {
+				window.cancelIdleCallback(idleId);
+			}
+		};
+	}, [result]);
+
+	return { context, error, loading, markdown, result, run };
+}
+
+function TodayRoute() {
+	const [period, setPeriod] = useState<PeriodOption>("today");
+	const [includeDms, setIncludeDms] = useState(false);
+	const { context, error, loading, markdown, result, run } = useDigestStream(
+		period,
+		includeDms,
+	);
+	const sourceLabel = useMemo(
+		() => formatCounts(result?.context ?? context),
+		[context, result],
+	);
+
+	return (
+		<div className="flex min-h-screen flex-col">
+			<header className={pageHeaderClass}>
+				<div className={pageHeaderRowClass}>
+					<div className="min-w-0">
+						<h1 className={pageTitleClass}>What happened</h1>
+						<p className={pageSubtitleClass}>{sourceLabel}</p>
+					</div>
+					<div className={pageHeaderActionsClass}>
+						<button
+							type="button"
+							className={secondaryButtonClass}
+							onClick={() => run(true)}
+							disabled={loading}
+						>
+							<RefreshCw
+								className={cx("size-4", loading && "animate-spin")}
+								aria-hidden="true"
+							/>
+							Refresh
+						</button>
+					</div>
+				</div>
+				<div className="flex flex-wrap items-center gap-2 px-4 pb-3">
+					<div className={segmentedClass} aria-label="Digest period">
+						{periods.map((item) => (
+							<button
+								key={item.value}
+								type="button"
+								className={cx(
+									segmentClass,
+									period === item.value && segmentActiveClass,
+								)}
+								onClick={() => setPeriod(item.value)}
+							>
+								{item.label}
+							</button>
+						))}
+					</div>
+					<label className="inline-flex items-center gap-2 rounded-full border border-[var(--line)] px-3 py-1 text-[13px] font-medium text-[var(--ink-soft)]">
+						<input
+							type="checkbox"
+							checked={includeDms}
+							onChange={(event) => setIncludeDms(event.currentTarget.checked)}
+						/>
+						DMs
+					</label>
+				</div>
+			</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
+						? "Streaming report"
+						: result
+							? `${result.cached ? "Cached" : "Ready"} · ${result.context.window.label}`
+							: "Ready"}
+				</span>
+			</div>
+
+			{markdown ? (
+				<MarkdownViewer
+					context={result?.context ?? context}
+					markdown={markdown}
+				/>
+			) : (
+				<div className="px-4 py-5 text-[14px] text-[var(--ink-soft)]">
+					Waiting for the first tokens...
+				</div>
+			)}
+		</div>
+	);
+}

package/src/styles.css

@@ -34,23 +34,24 @@
 	--ring: rgb(29 155 240 / 35%);
 	--shadow: rgb(15 20 25 / 6%);
 	--shadow-strong: rgb(15 20 25 / 12%);
+	--brand-shadow: rgb(29 155 240 / 22%);
 	--theme-switch-x: 50%;
 	--theme-switch-y: 50%;
 	color-scheme: light;
 }
 
 [data-theme="dark"] {
-	--bg: #000000;
-	--bg-elevated: #16181c;
-	--bg-hover: #16181c;
-	--bg-active: #1d1f23;
-	--panel: #000000;
-	--panel-strong: #16181c;
-	--line: #2f3336;
-	--line-strong: #536471;
-	--ink: #e7e9ea;
-	--ink-soft: #71767b;
-	--ink-mute: #5b6166;
+	--bg: #0b0f14;
+	--bg-elevated: #10151b;
+	--bg-hover: #141a21;
+	--bg-active: #18212a;
+	--panel: #0b0f14;
+	--panel-strong: #121820;
+	--line: #26323d;
+	--line-strong: #44515d;
+	--ink: #d8dee5;
+	--ink-soft: #8b98a5;
+	--ink-mute: #687480;
 	--accent: #1d9bf0;
 	--accent-hover: #1a8cd8;
 	--accent-press: #177cc1;
@@ -63,6 +64,7 @@
 	--ring: rgb(29 155 240 / 45%);
 	--shadow: rgb(0 0 0 / 60%);
 	--shadow-strong: rgb(0 0 0 / 80%);
+	--brand-shadow: rgb(29 155 240 / 36%);
 	color-scheme: dark;
 }
 
@@ -141,6 +143,62 @@ textarea {
 	}
 }
 
+@keyframes birdclaw-load-sway {
+	0%,
+	100% {
+		transform: translateY(0) rotate(-2deg) scale(1);
+	}
+
+	40% {
+		transform: translateY(-5px) rotate(3deg) scale(1.04);
+	}
+
+	70% {
+		transform: translateY(1px) rotate(-1deg) scale(0.99);
+	}
+}
+
+@keyframes birdclaw-load-glow {
+	0%,
+	100% {
+		opacity: 0.24;
+		transform: scale(0.82);
+	}
+
+	50% {
+		opacity: 0.46;
+		transform: scale(1.08);
+	}
+}
+
+.birdclaw-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 168px;
+}
+
+.birdclaw-mark::before {
+	content: "";
+	position: absolute;
+	inset: 16%;
+	z-index: -1;
+	border-radius: 999px;
+	background: var(--accent-soft);
+	filter: blur(14px);
+	opacity: 0.34;
+}
+
+.birdclaw-mark-animated {
+	animation: birdclaw-load-sway 1.7s ease-in-out infinite;
+	transform-origin: 50% 56%;
+}
+
+.birdclaw-mark-animated::before {
+	animation: birdclaw-load-glow 1.7s ease-in-out infinite;
+}
+
 html.theme-transition {
 	view-transition-name: theme;
 }
@@ -169,4 +227,9 @@ html.theme-transition::view-transition-new(theme) {
 	html.theme-transition::view-transition-new(theme) {
 		animation: none !important;
 	}
+
+	.birdclaw-mark-animated,
+	.birdclaw-mark-animated::before {
+		animation: none !important;
+	}
 }

package/vite.config.ts

@@ -4,6 +4,11 @@ import { tanstackStart } from "@tanstack/react-start/plugin/vite";
 import viteReact from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
+const extraAllowedHosts =
+	process.env.BIRDCLAW_ALLOWED_HOSTS?.split(",")
+		.map((host) => host.trim())
+		.filter(Boolean) ?? [];
+
 const config = defineConfig({
 	plugins: [
 		devtools(),
@@ -18,6 +23,9 @@ const config = defineConfig({
 	resolve: {
 		tsconfigPaths: true,
 	},
+	server: {
+		allowedHosts: ["clawmac.sheep-coho.ts.net", ...extraAllowedHosts],
+	},
 });
 
 export default config;