birdclaw 0.1.0

package/src/routes/inbox.tsx

@@ -0,0 +1,201 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { InboxCard } from "#/components/InboxCard";
+import type {
+	InboxItem,
+	InboxKind,
+	InboxResponse,
+	QueryEnvelope,
+} from "#/lib/types";
+import {
+	actionButtonClass,
+	cx,
+	eyebrowClass,
+	feedPageClass,
+	heroControlsClass,
+	heroCopyClass,
+	heroShellClass,
+	heroTitleClass,
+	inboxLaneClass,
+	navLinkActiveClass,
+	navLinkClass,
+	pageWrapClass,
+	segmentActiveClass,
+	segmentClass,
+	segmentedClass,
+	textFieldClass,
+	textFieldShortClass,
+	timestampClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/inbox")({
+	component: InboxRoute,
+});
+
+function InboxRoute() {
+	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
+	const [items, setItems] = useState<InboxItem[]>([]);
+	const [kind, setKind] = useState<InboxKind>("mixed");
+	const [minScore, setMinScore] = useState("40");
+	const [hideLowSignal, setHideLowSignal] = useState(true);
+	const [refreshTick, setRefreshTick] = useState(0);
+	const [isScoring, setIsScoring] = useState(false);
+	const [activeReplyId, setActiveReplyId] = useState<string | null>(null);
+	const [replyDraft, setReplyDraft] = useState("");
+	const [isSendingReply, setIsSendingReply] = useState(false);
+	const [stats, setStats] = useState<InboxResponse["stats"] | null>(null);
+
+	useEffect(() => {
+		fetch("/api/status")
+			.then((response) => response.json())
+			.then((data: QueryEnvelope) => setMeta(data));
+	}, []);
+
+	useEffect(() => {
+		const url = new URL("/api/inbox", window.location.origin);
+		url.searchParams.set("kind", kind);
+		url.searchParams.set("minScore", minScore);
+		url.searchParams.set("refresh", String(refreshTick));
+		if (hideLowSignal) {
+			url.searchParams.set("hideLowSignal", "1");
+		}
+
+		fetch(url)
+			.then((response) => response.json())
+			.then((data: InboxResponse) => {
+				setItems(data.items);
+				setStats(data.stats);
+			});
+	}, [hideLowSignal, kind, minScore, refreshTick]);
+
+	const subtitle = useMemo(() => {
+		if (!meta || !stats) return "Ranking unreplied mentions and DMs...";
+		return `${stats.total} items in queue · ${stats.openai} OpenAI scored · ${meta.transport.statusText}`;
+	}, [meta, stats]);
+
+	async function scoreNow() {
+		setIsScoring(true);
+		try {
+			await fetch("/api/action", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					kind: "scoreInbox",
+					scoreKind: kind,
+					limit: 8,
+				}),
+			});
+			setRefreshTick((value) => value + 1);
+		} finally {
+			setIsScoring(false);
+		}
+	}
+
+	async function sendReply(item: InboxItem) {
+		if (!replyDraft.trim()) return;
+		setIsSendingReply(true);
+		try {
+			await fetch("/api/action", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(
+					item.entityKind === "dm"
+						? {
+								kind: "replyDm",
+								conversationId: item.entityId,
+								text: replyDraft,
+							}
+						: {
+								kind: "replyTweet",
+								accountId: item.accountId,
+								tweetId: item.entityId,
+								text: replyDraft,
+							},
+				),
+			});
+			setReplyDraft("");
+			setActiveReplyId(null);
+			setRefreshTick((value) => value + 1);
+		} finally {
+			setIsSendingReply(false);
+		}
+	}
+
+	return (
+		<main className={pageWrapClass}>
+			<div className={feedPageClass}>
+				<section className={heroShellClass}>
+					<div>
+						<p className={eyebrowClass}>inbox</p>
+						<h2 className={heroTitleClass}>AI triage for mentions and DMs.</h2>
+						<p className={heroCopyClass}>{subtitle}</p>
+					</div>
+					<div className={heroControlsClass}>
+						<div className={segmentedClass}>
+							{(["mixed", "mentions", "dms"] as const).map((value) => (
+								<button
+									key={value}
+									className={cx(
+										segmentClass,
+										value === kind && segmentActiveClass,
+									)}
+									onClick={() => setKind(value)}
+									type="button"
+								>
+									{value}
+								</button>
+							))}
+						</div>
+						<input
+							className={cx(textFieldClass, textFieldShortClass)}
+							inputMode="numeric"
+							onChange={(event) => setMinScore(event.target.value)}
+							placeholder="Min AI score"
+							value={minScore}
+						/>
+						<button
+							className={cx(navLinkClass, hideLowSignal && navLinkActiveClass)}
+							onClick={() => setHideLowSignal((value) => !value)}
+							type="button"
+						>
+							{hideLowSignal ? "Hide low-signal" : "Show all"}
+						</button>
+						<button
+							className={actionButtonClass}
+							disabled={isScoring}
+							onClick={() => void scoreNow()}
+							type="button"
+						>
+							{isScoring ? "Scoring..." : "Score with OpenAI"}
+						</button>
+					</div>
+				</section>
+
+				<section className={inboxLaneClass}>
+					{items.map((item) => (
+						<InboxCard
+							key={item.id}
+							isReplying={activeReplyId === item.id}
+							item={item}
+							onReplyChange={setReplyDraft}
+							onReplySend={() => void sendReply(item)}
+							onReplyToggle={() => {
+								if (activeReplyId === item.id) {
+									setActiveReplyId(null);
+									setReplyDraft("");
+									return;
+								}
+								setActiveReplyId(item.id);
+								setReplyDraft("");
+							}}
+							replyDraft={activeReplyId === item.id ? replyDraft : ""}
+						/>
+					))}
+				</section>
+			</div>
+			{isSendingReply ? (
+				<p className={timestampClass}>Sending reply...</p>
+			) : null}
+		</main>
+	);
+}

package/src/routes/index.tsx

@@ -0,0 +1,125 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { TimelineCard } from "#/components/TimelineCard";
+import type {
+	QueryEnvelope,
+	QueryResponse,
+	ReplyFilter,
+	TimelineItem,
+} from "#/lib/types";
+import {
+	cx,
+	eyebrowClass,
+	feedPageClass,
+	heroControlsClass,
+	heroCopyClass,
+	heroShellClass,
+	heroTitleClass,
+	pageWrapClass,
+	segmentActiveClass,
+	segmentClass,
+	segmentedClass,
+	textFieldClass,
+	textFieldWideClass,
+	timelineLaneClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/")({
+	component: HomeRoute,
+});
+
+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 `${meta.stats.home} home items · ${meta.stats.needsReply} waiting on action · ${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 (
+		<main className={pageWrapClass}>
+			<div className={feedPageClass}>
+				<section className={heroShellClass}>
+					<div>
+						<p className={eyebrowClass}>home timeline</p>
+						<h2 className={heroTitleClass}>
+							Read first. Act only where signal survives.
+						</h2>
+						<p className={heroCopyClass}>{subtitle}</p>
+					</div>
+					<div className={heroControlsClass}>
+						<input
+							className={cx(textFieldClass, textFieldWideClass)}
+							onChange={(event) => setSearch(event.target.value)}
+							placeholder="Search local timeline"
+							value={search}
+						/>
+						<div className={segmentedClass}>
+							{(["all", "replied", "unreplied"] as const).map((value) => (
+								<button
+									key={value}
+									className={cx(
+										segmentClass,
+										value === replyFilter && segmentActiveClass,
+									)}
+									onClick={() => setReplyFilter(value)}
+									type="button"
+								>
+									{value}
+								</button>
+							))}
+						</div>
+					</div>
+				</section>
+
+				<section className={timelineLaneClass}>
+					{items.map((item) => (
+						<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
+					))}
+				</section>
+			</div>
+		</main>
+	);
+}

package/src/routes/mentions.tsx

@@ -0,0 +1,125 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { TimelineCard } from "#/components/TimelineCard";
+import type {
+	QueryEnvelope,
+	QueryResponse,
+	ReplyFilter,
+	TimelineItem,
+} from "#/lib/types";
+import {
+	cx,
+	eyebrowClass,
+	feedPageClass,
+	heroControlsClass,
+	heroCopyClass,
+	heroShellClass,
+	heroTitleClass,
+	pageWrapClass,
+	segmentActiveClass,
+	segmentClass,
+	segmentedClass,
+	textFieldClass,
+	textFieldWideClass,
+	timelineLaneClass,
+} from "#/lib/ui";
+
+export const Route = createFileRoute("/mentions")({
+	component: MentionsRoute,
+});
+
+function MentionsRoute() {
+	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
+	const [items, setItems] = useState<TimelineItem[]>([]);
+	const [replyFilter, setReplyFilter] = useState<ReplyFilter>("unreplied");
+	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", "mentions");
+		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 mentions...";
+		return `${meta.stats.mentions} mention/reply items in local store`;
+	}, [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 (
+		<main className={pageWrapClass}>
+			<div className={feedPageClass}>
+				<section className={heroShellClass}>
+					<div>
+						<p className={eyebrowClass}>mentions and replies</p>
+						<h2 className={heroTitleClass}>
+							Keep the actionable queue small and visible.
+						</h2>
+						<p className={heroCopyClass}>{subtitle}</p>
+					</div>
+					<div className={heroControlsClass}>
+						<input
+							className={cx(textFieldClass, textFieldWideClass)}
+							onChange={(event) => setSearch(event.target.value)}
+							placeholder="Search mentions"
+							value={search}
+						/>
+						<div className={segmentedClass}>
+							{(["all", "replied", "unreplied"] as const).map((value) => (
+								<button
+									key={value}
+									className={cx(
+										segmentClass,
+										value === replyFilter && segmentActiveClass,
+									)}
+									onClick={() => setReplyFilter(value)}
+									type="button"
+								>
+									{value}
+								</button>
+							))}
+						</div>
+					</div>
+				</section>
+
+				<section className={timelineLaneClass}>
+					{items.map((item) => (
+						<TimelineCard key={item.id} item={item} onReply={replyToTweet} />
+					))}
+				</section>
+			</div>
+		</main>
+	);
+}

package/src/styles.css

@@ -0,0 +1,109 @@
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Instrument+Sans:wght@400;500;600;700&display=swap");
+@import "tailwindcss";
+
+@theme inline {
+	--font-sans: "Instrument Sans", sans-serif;
+	--font-display: "Fraunces", serif;
+}
+
+:root {
+	--bg: #f5f0e8;
+	--panel: rgb(255 252 247 / 92%);
+	--panel-strong: rgb(255 255 255 / 82%);
+	--line: rgb(32 24 17 / 12%);
+	--line-strong: rgb(32 24 17 / 24%);
+	--ink: #19130e;
+	--ink-soft: rgb(25 19 14 / 68%);
+	--accent: #1d6f53;
+	--accent-soft: rgb(29 111 83 / 12%);
+	--alert: #a34a2d;
+	--alert-soft: rgb(163 74 45 / 14%);
+	--shadow: rgb(32 24 17 / 8%);
+	--theme-switch-x: 50%;
+	--theme-switch-y: 50%;
+	color-scheme: light;
+}
+
+[data-theme="dark"] {
+	--bg: #151311;
+	--panel: rgb(29 24 19 / 88%);
+	--panel-strong: rgb(39 32 27 / 94%);
+	--line: rgb(245 232 214 / 10%);
+	--line-strong: rgb(245 232 214 / 18%);
+	--ink: #f4ede3;
+	--ink-soft: rgb(244 237 227 / 68%);
+	--accent: #68c4a0;
+	--accent-soft: rgb(104 196 160 / 14%);
+	--alert: #d98a69;
+	--alert-soft: rgb(217 138 105 / 16%);
+	--shadow: rgb(0 0 0 / 34%);
+	color-scheme: dark;
+}
+
+html,
+body {
+	min-height: 100%;
+}
+
+body {
+	background:
+		radial-gradient(
+			circle at top left,
+			color-mix(in srgb, var(--accent) 16%, transparent),
+			transparent 28%
+		),
+		radial-gradient(
+			circle at right 18%,
+			color-mix(in srgb, var(--alert) 12%, transparent),
+			transparent 24%
+		),
+		linear-gradient(
+			180deg,
+			color-mix(in srgb, var(--bg) 82%, white) 0%,
+			var(--bg) 100%
+		);
+}
+
+@keyframes theme-circle-transition {
+	0% {
+		clip-path: circle(
+			0% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%)
+		);
+	}
+
+	100% {
+		clip-path: circle(
+			150% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%)
+		);
+	}
+}
+
+html.theme-transition {
+	view-transition-name: theme;
+}
+
+/* View transition pseudo-element. */
+html.theme-transition::view-transition-old(theme) {
+	animation: none;
+	mix-blend-mode: normal;
+	z-index: 1;
+}
+
+/* View transition pseudo-element. */
+html.theme-transition::view-transition-new(theme) {
+	animation: theme-circle-transition 0.45s ease-out forwards;
+	mix-blend-mode: normal;
+	z-index: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	/* View transition pseudo-element. */
+	html.theme-transition::view-transition-old(theme) {
+		animation: none !important;
+	}
+
+	/* View transition pseudo-element. */
+	html.theme-transition::view-transition-new(theme) {
+		animation: none !important;
+	}
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
+    "paths": {
+      "#/*": ["./src/*"],
+      "@/*": ["./src/*"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  }
+}

package/vite.config.ts

@@ -0,0 +1,23 @@
+import tailwindcss from "@tailwindcss/vite";
+import { devtools } from "@tanstack/devtools-vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+const config = defineConfig({
+	plugins: [
+		devtools(),
+		tailwindcss(),
+		tanstackStart({
+			router: {
+				routeFileIgnorePattern: "\\.(test|spec)\\.(ts|tsx)$",
+			},
+		}),
+		viteReact(),
+	],
+	resolve: {
+		tsconfigPaths: true,
+	},
+});
+
+export default config;