birdclaw 0.1.0

package/src/components/AvatarChip.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { getInitials } from "#/lib/present";
+import { avatarChipClass, avatarChipLargeClass, cx } from "#/lib/ui";
+
+export function AvatarChip({
+	profileId,
+	avatarUrl,
+	name,
+	hue,
+	size = "default",
+}: {
+	profileId?: string;
+	avatarUrl?: string;
+	name: string;
+	hue: number;
+	size?: "default" | "large";
+}) {
+	const avatarSrc =
+		profileId && avatarUrl
+			? `/api/avatar?profileId=${encodeURIComponent(profileId)}`
+			: null;
+	const [failedSrc, setFailedSrc] = useState<string | null>(null);
+	const showImage = avatarSrc && failedSrc !== avatarSrc;
+
+	return (
+		<span
+			className={cx(
+				avatarChipClass,
+				"avatar-chip",
+				size === "large" && cx(avatarChipLargeClass, "avatar-chip-large"),
+			)}
+			style={{ backgroundColor: `hsl(${hue} 72% 50%)` }}
+		>
+			{showImage ? (
+				<img
+					alt={name}
+					className="size-full rounded-[inherit] object-cover"
+					loading="lazy"
+					onError={() => setFailedSrc(avatarSrc)}
+					src={avatarSrc}
+				/>
+			) : (
+				getInitials(name)
+			)}
+		</span>
+	);
+}

package/src/components/DmWorkspace.tsx

@@ -0,0 +1,246 @@
+import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import type { DmConversationItem, DmMessageItem } from "#/lib/types";
+import {
+	actionButtonClass,
+	composerBarClass,
+	composerInputClass,
+	composerShellClass,
+	contextBioClass,
+	contextHandleClass,
+	contextStatRowClass,
+	contextStatsClass,
+	contextStatTermClass,
+	contextStatValueClass,
+	cx,
+	dmGridClass,
+	dmListClass,
+	dmListCopyClass,
+	dmListItemActiveClass,
+	dmListItemClass,
+	dmPreviewTextClass,
+	emptyStateClass,
+	eyebrowClass,
+	identityRowClass,
+	messageBubbleClass,
+	messageBubbleOutboundClass,
+	messageMetaClass,
+	messageRowClass,
+	messageRowOutboundClass,
+	messageStackClass,
+	metaStackClass,
+	pillAlertClass,
+	pillClass,
+	pillSoftClass,
+	threadBioClass,
+	threadDetailColumnClass,
+	threadDetailHeaderClass,
+	threadHeaderClass,
+	threadShellClass,
+	threadSubtitleClass,
+	threadTitleClass,
+	timestampClass,
+} from "#/lib/ui";
+import { AvatarChip } from "./AvatarChip";
+
+function MessageBubble({ message }: { message: DmMessageItem }) {
+	return (
+		<div
+			className={cx(
+				messageRowClass,
+				message.direction === "outbound" && messageRowOutboundClass,
+			)}
+		>
+			<div className={messageMetaClass}>
+				<span>{message.sender.displayName}</span>
+				<span>{formatShortTimestamp(message.createdAt)}</span>
+			</div>
+			<div
+				className={cx(
+					messageBubbleClass,
+					message.direction === "outbound" && messageBubbleOutboundClass,
+				)}
+			>
+				{message.text}
+			</div>
+		</div>
+	);
+}
+
+export function DmWorkspace({
+	conversations,
+	selectedConversation,
+	selectedMessages,
+	onSelectConversation,
+	replyDraft,
+	onReplyDraftChange,
+	onReplySend,
+}: {
+	conversations: DmConversationItem[];
+	selectedConversation: DmConversationItem | null;
+	selectedMessages: DmMessageItem[];
+	onSelectConversation: (conversationId: string) => void;
+	replyDraft: string;
+	onReplyDraftChange: (value: string) => void;
+	onReplySend: (conversationId: string) => void;
+}) {
+	const participant = selectedConversation?.participant ?? null;
+	const subtitle = selectedConversation
+		? `${selectedConversation.needsReply ? "Reply owed" : "Thread clear"} · last message ${formatShortTimestamp(selectedConversation.lastMessageAt)}`
+		: "No conversation selected";
+
+	return (
+		<section className={dmGridClass}>
+			<aside className={dmListClass}>
+				{conversations.map((conversation) => {
+					const active = conversation.id === selectedConversation?.id;
+					return (
+						<button
+							key={conversation.id}
+							className={cx(dmListItemClass, active && dmListItemActiveClass)}
+							onClick={() => onSelectConversation(conversation.id)}
+							type="button"
+						>
+							<AvatarChip
+								avatarUrl={conversation.participant.avatarUrl}
+								hue={conversation.participant.avatarHue}
+								name={conversation.participant.displayName}
+								profileId={conversation.participant.id}
+							/>
+							<div className={dmListCopyClass}>
+								<div className={identityRowClass}>
+									<strong>{conversation.participant.displayName}</strong>
+									<span>@{conversation.participant.handle}</span>
+								</div>
+								<p className={dmPreviewTextClass}>
+									{conversation.lastMessagePreview}
+								</p>
+							</div>
+							<div className={metaStackClass}>
+								<span
+									className={cx(
+										pillClass,
+										conversation.needsReply ? pillAlertClass : pillSoftClass,
+									)}
+								>
+									{conversation.needsReply ? "needs reply" : "clear"}
+								</span>
+								<span className={cx(pillClass, pillSoftClass)}>
+									{conversation.influenceScore} · {conversation.influenceLabel}
+								</span>
+								<span className={timestampClass}>
+									{formatShortTimestamp(conversation.lastMessageAt)}
+								</span>
+							</div>
+						</button>
+					);
+				})}
+			</aside>
+
+			<div className={threadShellClass}>
+				{selectedConversation ? (
+					<>
+						<header className={threadHeaderClass}>
+							<div>
+								<p className={eyebrowClass}>direct messages</p>
+								<h2 className={threadTitleClass}>
+									{selectedConversation.participant.displayName}
+								</h2>
+								<p className={threadSubtitleClass}>{subtitle}</p>
+								<p className={threadBioClass}>
+									{selectedConversation.lastMessagePreview}
+								</p>
+							</div>
+							<div className={threadDetailColumnClass}>
+								<div className={threadDetailHeaderClass}>
+									<AvatarChip
+										avatarUrl={participant?.avatarUrl}
+										hue={participant?.avatarHue ?? 18}
+										name={participant?.displayName ?? "Unknown"}
+										profileId={participant?.id ?? undefined}
+										size="large"
+									/>
+									<div>
+										<strong>{participant?.displayName}</strong>
+										<p className={cx("context-handle", contextHandleClass)}>
+											@{participant?.handle}
+										</p>
+									</div>
+								</div>
+								<p className={cx("context-bio", contextBioClass)}>
+									{participant?.bio}
+								</p>
+								<dl className={contextStatsClass}>
+									<div className={contextStatRowClass}>
+										<dt className={contextStatTermClass}>Followers</dt>
+										<dd className={contextStatValueClass}>
+											{formatCompactNumber(participant?.followersCount ?? 0)}
+										</dd>
+									</div>
+									<div className={contextStatRowClass}>
+										<dt className={contextStatTermClass}>Influence</dt>
+										<dd className={contextStatValueClass}>
+											{selectedConversation.influenceScore} ·{" "}
+											{selectedConversation.influenceLabel}
+										</dd>
+									</div>
+									<div className={contextStatRowClass}>
+										<dt className={contextStatTermClass}>Reply state</dt>
+										<dd className={contextStatValueClass}>
+											{selectedConversation.needsReply
+												? "Needs reply"
+												: "Replied"}
+										</dd>
+									</div>
+									<div className={contextStatRowClass}>
+										<dt className={contextStatTermClass}>Account</dt>
+										<dd className={contextStatValueClass}>
+											{selectedConversation.accountHandle}
+										</dd>
+									</div>
+								</dl>
+								<button
+									className={actionButtonClass}
+									onClick={() => onReplySend(selectedConversation.id)}
+									type="button"
+								>
+									Reply
+								</button>
+							</div>
+						</header>
+						<div className={messageStackClass}>
+							{selectedMessages.map((message) => (
+								<MessageBubble key={message.id} message={message} />
+							))}
+						</div>
+						<div className={composerShellClass}>
+							<textarea
+								className={composerInputClass}
+								onChange={(event) => onReplyDraftChange(event.target.value)}
+								placeholder={`Reply to @${selectedConversation.participant.handle}`}
+								rows={4}
+								value={replyDraft}
+							/>
+							<div className={composerBarClass}>
+								<span className={timestampClass}>
+									{selectedConversation.needsReply
+										? "Reply still owed"
+										: "Thread clear"}
+								</span>
+								<button
+									className={actionButtonClass}
+									disabled={!replyDraft.trim()}
+									onClick={() => onReplySend(selectedConversation.id)}
+									type="button"
+								>
+									Send reply
+								</button>
+							</div>
+						</div>
+					</>
+				) : (
+					<div className={emptyStateClass}>No DM selected.</div>
+				)}
+			</div>
+		</section>
+	);
+}

package/src/components/EmbeddedTweetCard.tsx

@@ -0,0 +1,44 @@
+import { formatShortTimestamp } from "#/lib/present";
+import type { EmbeddedTweet } from "#/lib/types";
+import {
+	embeddedTweetAuthorClass,
+	embeddedTweetCardClass,
+	embeddedTweetCopyClass,
+	embeddedTweetHeaderClass,
+	embeddedTweetLabelClass,
+	timestampClass,
+} from "#/lib/ui";
+import { ProfilePreview } from "./ProfilePreview";
+import { TweetMediaGrid } from "./TweetMediaGrid";
+import { TweetRichText } from "./TweetRichText";
+
+export function EmbeddedTweetCard({
+	item,
+	label,
+}: {
+	item: EmbeddedTweet;
+	label: string;
+}) {
+	return (
+		<section className={embeddedTweetCardClass}>
+			<p className={embeddedTweetLabelClass}>{label}</p>
+			<header className={embeddedTweetHeaderClass}>
+				<ProfilePreview profile={item.author}>
+					<span className={embeddedTweetAuthorClass}>
+						<strong>{item.author.displayName}</strong>
+						<span>@{item.author.handle}</span>
+					</span>
+				</ProfilePreview>
+				<span className={timestampClass}>
+					{formatShortTimestamp(item.createdAt)}
+				</span>
+			</header>
+			<TweetRichText
+				className={embeddedTweetCopyClass}
+				entities={item.entities}
+				text={item.text}
+			/>
+			<TweetMediaGrid items={item.media} />
+		</section>
+	);
+}

package/src/components/InboxCard.tsx

@@ -0,0 +1,136 @@
+import { Link } from "@tanstack/react-router";
+import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
+import type { InboxItem } from "#/lib/types";
+import {
+	actionButtonClass,
+	actionRowClass,
+	bodyCopyClass,
+	cardFooterClass,
+	cardHeaderClass,
+	composerBarClass,
+	composerInputClass,
+	composerShellClass,
+	contentCardClass,
+	cx,
+	eyebrowClass,
+	identityBlockClass,
+	identityRowClass,
+	inboxAnalysisClass,
+	inboxTitleClass,
+	metaStackClass,
+	metricRowClass,
+	mutedDotClass,
+	navLinkClass,
+	pillAlertClass,
+	pillClass,
+	pillSoftClass,
+	timestampClass,
+} from "#/lib/ui";
+import { AvatarChip } from "./AvatarChip";
+
+export function InboxCard({
+	item,
+	isReplying,
+	replyDraft,
+	onReplyChange,
+	onReplyToggle,
+	onReplySend,
+}: {
+	item: InboxItem;
+	isReplying: boolean;
+	replyDraft: string;
+	onReplyChange: (value: string) => void;
+	onReplyToggle: () => void;
+	onReplySend: () => void;
+}) {
+	return (
+		<article className={cx(contentCardClass, "inbox-card")}>
+			<div className={cardHeaderClass}>
+				<div className={identityBlockClass}>
+					<AvatarChip
+						avatarUrl={item.participant.avatarUrl}
+						hue={item.participant.avatarHue}
+						name={item.participant.displayName}
+						profileId={item.participant.id}
+					/>
+					<div>
+						<div className={identityRowClass}>
+							<strong>{item.participant.displayName}</strong>
+							<span>@{item.participant.handle}</span>
+							<span className={mutedDotClass} />
+							<span>
+								{formatCompactNumber(item.participant.followersCount)} followers
+							</span>
+						</div>
+					</div>
+				</div>
+				<div className={metaStackClass}>
+					<span className={cx(pillClass, pillSoftClass)}>
+						{item.entityKind}
+					</span>
+					<span className={cx(pillClass, pillAlertClass)}>
+						score {item.score}
+					</span>
+					<span className={timestampClass}>
+						{formatShortTimestamp(item.createdAt)}
+					</span>
+				</div>
+			</div>
+			<p className={eyebrowClass}>ai triage</p>
+			<h3 className={inboxTitleClass}>{item.title}</h3>
+			<p className={bodyCopyClass}>{item.text}</p>
+			<div className={inboxAnalysisClass}>
+				<strong>{item.summary}</strong>
+				<p>{item.reasoning}</p>
+			</div>
+			<div className={cardFooterClass}>
+				<div className={metricRowClass}>
+					<span>{item.source}</span>
+					<span>influence {item.influenceScore}</span>
+					<span>{item.needsReply ? "needs reply" : "resolved"}</span>
+				</div>
+				<div className={actionRowClass}>
+					<button
+						className={navLinkClass}
+						onClick={onReplyToggle}
+						type="button"
+					>
+						{isReplying ? "Close reply" : "Reply"}
+					</button>
+					<Link
+						className={actionButtonClass}
+						to={item.entityKind === "dm" ? "/dms" : "/mentions"}
+					>
+						Open
+					</Link>
+				</div>
+			</div>
+			{isReplying ? (
+				<div className={composerShellClass}>
+					<textarea
+						className={composerInputClass}
+						onChange={(event) => onReplyChange(event.target.value)}
+						placeholder={
+							item.entityKind === "dm"
+								? `Reply to @${item.participant.handle}`
+								: `Reply to mention from @${item.participant.handle}`
+						}
+						rows={4}
+						value={replyDraft}
+					/>
+					<div className={composerBarClass}>
+						<span className={timestampClass}>Send from inbox</span>
+						<button
+							className={actionButtonClass}
+							disabled={!replyDraft.trim()}
+							onClick={onReplySend}
+							type="button"
+						>
+							Send
+						</button>
+					</div>
+				</div>
+			) : null}
+		</article>
+	);
+}

package/src/components/ProfilePreview.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import { formatCompactNumber } from "#/lib/present";
+import type { ProfileRecord } from "#/lib/types";
+import {
+	cx,
+	profilePreviewBioClass,
+	profilePreviewCardClass,
+	profilePreviewClass,
+	profilePreviewHandleClass,
+	profilePreviewHeaderClass,
+	profilePreviewMetaClass,
+	profilePreviewTriggerClass,
+} from "#/lib/ui";
+import { AvatarChip } from "./AvatarChip";
+
+export function ProfilePreview({
+	profile,
+	children,
+	className = "",
+}: {
+	profile: ProfileRecord;
+	children: ReactNode;
+	className?: string;
+}) {
+	return (
+		<span className={cx(profilePreviewClass, "group", className)}>
+			<a
+				className={profilePreviewTriggerClass}
+				href={`https://x.com/${profile.handle}`}
+				rel="noreferrer"
+				target="_blank"
+			>
+				{children}
+			</a>
+			<span className={profilePreviewCardClass}>
+				<span className={profilePreviewHeaderClass}>
+					<AvatarChip
+						avatarUrl={profile.avatarUrl}
+						hue={profile.avatarHue}
+						name={profile.displayName}
+						profileId={profile.id}
+					/>
+					<span>
+						<strong>{profile.displayName}</strong>
+						<span className={profilePreviewHandleClass}>@{profile.handle}</span>
+					</span>
+				</span>
+				<span className={profilePreviewBioClass}>{profile.bio}</span>
+				<span className={profilePreviewMetaClass}>
+					{formatCompactNumber(profile.followersCount)} followers
+				</span>
+			</span>
+		</span>
+	);
+}

package/src/components/ThemeSlider.tsx

@@ -0,0 +1,124 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+import type { CSSProperties, MouseEvent } from "react";
+import { useMemo } from "react";
+import { type ThemeValue, useTheme } from "#/lib/theme";
+import {
+	startThemeTransition,
+	type ThemeTransitionContext,
+} from "#/lib/theme-transition";
+import { cx } from "#/lib/ui";
+
+const THEME_OPTIONS = [
+	{ key: "system", icon: Monitor, label: "System default" },
+	{ key: "light", icon: Sun, label: "Light theme" },
+	{ key: "dark", icon: Moon, label: "Dark theme" },
+] as const satisfies Array<{
+	key: ThemeValue;
+	icon: typeof Sun;
+	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,
+			),
+		}),
+		[],
+	);
+
+	return (
+		<fieldset
+			className="theme-slider-shell m-0 border-0 p-0"
+			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}
+				/>
+				{THEME_OPTIONS.map((option, index) => {
+					const Icon = option.icon;
+					const isActive = index === activeIndex;
+
+					const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+						if (isActive) return;
+
+						const context: ThemeTransitionContext = {
+							element: event.currentTarget,
+							pointerClientX: event.clientX,
+							pointerClientY: event.clientY,
+						};
+
+						startThemeTransition({
+							nextTheme: option.key,
+							currentTheme: theme,
+							setTheme,
+							context,
+						});
+					};
+
+					return (
+						<button
+							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)]",
+							)}
+							onClick={handleClick}
+							aria-label={option.label}
+							aria-pressed={isActive}
+							data-testid={`theme-${option.key}`}
+							disabled={!isReady}
+						>
+							<Icon
+								className="theme-slider-icon size-[15px]"
+								strokeWidth={1.8}
+							/>
+						</button>
+					);
+				})}
+			</div>
+		</fieldset>
+	);
+}