From f8a8864bfd6eacc623d3e2c4143c6c9c6e2bec8a Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Fri, 29 May 2026 22:12:54 +0000
Subject: [PATCH] add user profiles

---
 src/index.css | 6 ++++++
 src/layout.tsx | 17 ++++++++++++++++-
 src/routes.tsx | 3 +++
 src/components/repo.tsx | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
 src/pages/home.tsx | 30 ++++++++++++++++--------------
 src/pages/profile.tsx | 1389 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/pages/search.tsx | 5 +++++
 src/lib/api/graph.ts | 174 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/lib/api/identity.ts | 35 +++++++++++++++++++++++++++++++++++
 src/pages/repo/issues.tsx | 6 +++---
 src/pages/repo/pulls.tsx | 2 +-
 11 file(s) changed, 1751 insertion(s)(+), 50 deletion(s)(-)

diff --git a/src/index.css b/src/index.css
--- a/src/index.css
+++ b/src/index.css
@@ -3470,3 +3470,9 @@
 		color: rgb(244 114 182);
 	}
 }
+
+.untangled-vouch-label {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+}
+
diff --git a/src/layout.tsx b/src/layout.tsx
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Bell, LogOut, RotateCcw, Save, Search, Settings } from 'lucide-solid';
+import { Bell, LogOut, RotateCcw, Save, Search, Settings, UserRound } from 'lucide-solid';
 import { A, useLocation, useNavigate } from '@solidjs/router';
 import { createQuery, useQueryClient } from '@tanstack/solid-query';
 import { For, Show, createEffect, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
@@ -229,6 +229,21 @@
 					<div class="font-medium truncate">{viewerQuery.data?.handle ?? auth.currentDid()}</div>
 					<div class="text-gray-500 dark:text-gray-400 truncate">{auth.currentDid()}</div>
 				</div>
+				<Show when={viewerQuery.data?.handle}>
+					{(handle) => (
+						<A
+							href={`/${handle()}`}
+							class="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-50 hover:dark:bg-gray-700/50 text-black dark:text-white no-underline hover:no-underline border-b border-gray-200 dark:border-gray-700"
+							onClick={(e) => {
+								const details = e.currentTarget.closest('details');
+								if (details) details.open = false;
+							}}
+						>
+							<UserRound class="size-4" />
+							profile
+						</A>
+					)}
+				</Show>
 				<button
 					type="button"
 					class="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-50 hover:dark:bg-gray-700/50"
diff --git a/src/routes.tsx b/src/routes.tsx
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -19,6 +19,7 @@
 import { NotFoundPage } from './pages/not-found';
 import { OAuthCallbackPage } from './pages/oauth-callback';
 import { SearchPage } from './pages/search';
+import { ProfilePage } from './pages/profile';
 
 export const AppRoutes: Component = () => (
 	<Router root={RootShell}>
@@ -39,6 +40,8 @@
 			<Route path="/blob/:ref/*path" component={BlobPage} />
 			<Route path="/tree/:ref/*path" component={RepoCodePage} />
 		</Route>
+		<Route path="/:actor" component={ProfilePage} />
 		<Route path="*404" component={NotFoundPage} />
 	</Router>
 );
+
diff --git a/src/components/repo.tsx b/src/components/repo.tsx
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -29,6 +29,11 @@
 import { A } from '@solidjs/router';
 import { For, Show, createMemo, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
 import type { RepoContext, TreeEntry } from '../lib/api/repos';
+import { createQuery } from '@tanstack/solid-query';
+import { getRepo, getRepoLanguages } from '../lib/api/repos';
+import { getRepoStarCount } from '../lib/api/stars';
+import { getRepoIssueCount } from '../lib/api/issues';
+import { getRepoPullCount } from '../lib/api/pulls';
 import { formatRelativeTime, languageColor } from '../lib/repo-utils';
 import { getTangledAppviewService } from '../lib/settings';
 import { Avatar, SkeletonBlock, buttonStyles, cardStyles } from './common';
@@ -1620,29 +1625,90 @@
 	compact?: boolean;
 	href?: string;
 	noBorder?: boolean;
+	showOwner?: boolean;
 }
 
 export const RepoCard: Component<RepoCardProps> = (props) => {
 	const linkHref = () => props.href || `/${props.owner}/${props.name}`;
-	const langColor = () => props.language ? languageColor(props.language) : undefined;
+
+	// Define queries for statistics
+	const repoContextQuery = createQuery(() => ({
+		queryKey: ['repo-context', props.owner, props.name],
+		queryFn: () => getRepo(props.owner, props.name),
+		staleTime: 300_000,
+	}));
+
+	const repoContext = () => repoContextQuery.data;
+
+	const starCountQuery = createQuery(() => ({
+		queryKey: ['repo-stars-count', repoContext()?.repoDid],
+		queryFn: () => getRepoStarCount(repoContext()!),
+		enabled: !!repoContext(),
+		staleTime: 300_000,
+	}));
+
+	const issueCountQuery = createQuery(() => ({
+		queryKey: ['repo-issues-count', repoContext()?.repoDid],
+		queryFn: () => getRepoIssueCount(repoContext()!),
+		enabled: !!repoContext(),
+		staleTime: 300_000,
+	}));
+
+	const pullCountQuery = createQuery(() => ({
+		queryKey: ['repo-pulls-count', repoContext()?.repoDid],
+		queryFn: () => getRepoPullCount(repoContext()!),
+		enabled: !!repoContext(),
+		staleTime: 300_000,
+	}));
+
+	const languagesQuery = createQuery(() => ({
+		queryKey: ['repo-languages', repoContext()?.repoDid],
+		queryFn: () => getRepoLanguages(repoContext()!, 'HEAD'),
+		enabled: !!repoContext(),
+		staleTime: 300_000,
+	}));
+
+	const resolvedLanguage = () => {
+		if (props.language !== undefined) return props.language;
+		const list = languagesQuery.data?.languages;
+		if (!list || list.length === 0) return undefined;
+		const sorted = [...list].sort((a, b) => b.percentage - a.percentage);
+		return sorted[0].name;
+	};
+
+	const langColor = () => {
+		const lang = resolvedLanguage();
+		return lang ? languageColor(lang) : undefined;
+	};
+
+	const stars = () => props.stars !== undefined ? props.stars : starCountQuery.data;
+	const openIssues = () => props.openIssues !== undefined ? props.openIssues : issueCountQuery.data;
+	const openPRs = () => props.openPRs !== undefined ? props.openPRs : pullCountQuery.data;
+	const forks = () => props.forks;
+
+	const isMetricsLoading = () => {
+		const langLoading = props.language === undefined && (languagesQuery.isLoading || repoContextQuery.isLoading);
+		const starsLoading = props.stars === undefined && (starCountQuery.isLoading || repoContextQuery.isLoading);
+		const issuesLoading = props.openIssues === undefined && (issueCountQuery.isLoading || repoContextQuery.isLoading);
+		const prsLoading = props.openPRs === undefined && (pullCountQuery.isLoading || repoContextQuery.isLoading);
+		return langLoading || starsLoading || issuesLoading || prsLoading;
+	};
 
 	return (
 		<div
 			class={clsx(
-				'flex flex-col gap-1 bg-white dark:bg-gray-800 drop-shadow-sm',
-				props.compact ? 'p-3 md:p-4' : 'p-4 md:p-6',
-				!props.noBorder && 'border border-gray-200 dark:border-gray-700 rounded-sm',
-				!props.compact && 'min-h-[8rem]',
-				props.compact && 'focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80'
+				props.compact ? 'focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80' : 'min-h-32',
+				'py-4 px-6 gap-1 flex flex-col drop-shadow-sm bg-white dark:bg-gray-800',
+				!props.noBorder && 'border border-gray-200 dark:border-gray-700 rounded-sm'
 			)}
 		>
 			<div class="font-medium dark:text-white flex items-center justify-between">
-				<div class="flex items-center min-w-0 flex-1 mr-2 text-base">
+				<div class="flex items-center min-w-0 flex-1 mr-2">
 					<Show
 						when={props.isFork}
-						fallback={<BookMarked class="w-4 h-4 mr-1.5 shrink-0 text-gray-400" />}
+						fallback={<BookMarked class="w-4 h-4 mr-1.5 shrink-0" />}
 					>
-						<GitFork class="w-4 h-4 mr-1.5 shrink-0 text-gray-400" />
+						<GitFork class="w-4 h-4 mr-1.5 shrink-0" />
 					</Show>
 					<A
 						href={linkHref()}
@@ -1651,50 +1717,62 @@
 							props.compact && 'focus:outline-none'
 						)}
 					>
-						{props.owner}/{props.name}
+						<Show when={props.showOwner !== false} fallback={props.name}>
+							{props.owner}/{props.name}
+						</Show>
 					</A>
 				</div>
 			</div>
 
 			<Show when={props.description}>
-				<div class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2 mt-1">
+				<div class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2">
 					{props.description}
 				</div>
 			</Show>
 
-			<Show when={props.language || props.stars !== undefined || props.forks !== undefined || props.openIssues !== undefined || props.openPRs !== undefined}>
-				<div class="text-gray-400 text-xs font-mono inline-flex gap-4 mt-auto pt-2">
-					<Show when={props.language}>
-						<div class="flex gap-1.5 items-center">
+			<Show
+				when={!isMetricsLoading()}
+				fallback={
+					<div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">
+						<SkeletonBlock class="h-4 w-16" />
+						<SkeletonBlock class="h-4 w-12" />
+						<SkeletonBlock class="h-4 w-12" />
+						<SkeletonBlock class="h-4 w-12" />
+					</div>
+				}
+			>
+				<div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">
+					<Show when={resolvedLanguage()}>
+						<div class="flex gap-2 items-center text-sm">
 							<span
 								class="rounded-full inline-block"
 								style={{ 'background-color': langColor(), width: '10px', height: '10px' }}
 							/>
-							<span>{props.language}</span>
+							<span>{resolvedLanguage()}</span>
 						</div>
 					</Show>
-					<Show when={props.stars !== undefined && props.stars > 0}>
-						<div class="flex gap-1 items-center">
+					<Show when={stars() !== undefined && stars()! > 0}>
+						<div class="flex gap-1 items-center text-sm">
 							<Star class="w-3 h-3 fill-current" />
-							<span>{props.stars}</span>
+							<span>{stars()}</span>
 						</div>
 					</Show>
-					<Show when={props.forks !== undefined && props.forks > 0}>
-						<div class="flex gap-1 items-center">
+					<Show when={forks() !== undefined && forks()! > 0}>
+						<div class="flex gap-1 items-center text-sm">
 							<GitFork class="w-3 h-3" />
-							<span>{props.forks}</span>
+							<span>{forks()}</span>
 						</div>
 					</Show>
-					<Show when={props.openIssues !== undefined && props.openIssues > 0}>
-						<div class="flex gap-1 items-center">
+					<Show when={openIssues() !== undefined && openIssues()! > 0}>
+						<div class="flex gap-1 items-center text-sm">
 							<CircleDot class="w-3 h-3" />
-							<span>{props.openIssues}</span>
+							<span>{openIssues()}</span>
 						</div>
 					</Show>
-					<Show when={props.openPRs !== undefined && props.openPRs > 0}>
-						<div class="flex gap-1 items-center">
+					<Show when={openPRs() !== undefined && openPRs()! > 0}>
+						<div class="flex gap-1 items-center text-sm">
 							<GitPullRequest class="w-3 h-3" />
-							<span>{props.openPRs}</span>
+							<span>{openPRs()}</span>
 						</div>
 					</Show>
 				</div>
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -472,7 +472,7 @@
 
 					<Show
 						when={auth.currentDid()}
-						fallback={<HomeFeedEmpty title="Sign in for repo activity" body="Issues, pull requests, and repositories from your account will appear here." />}
+						fallback={<HomeFeedEmpty title="Sign in for repo activity" body="Issues, pull requests, and repos from your account will appear here." />}
 					>
 						<Show
 							when={!ownReposQuery.isLoading}
@@ -484,7 +484,7 @@
 							>
 								<Show
 									when={activityItems().length > 0}
-									fallback={<HomeFeedEmpty title="No repo activity yet" body="New repository, issue, and pull request activity will land here." />}
+									fallback={<HomeFeedEmpty title="No repo activity yet" body="New repo, issue, and pull request activity will land here." />}
 								>
 									<div class="untangled-home-activity-list">
 										<For each={activityItems()}>
@@ -503,7 +503,7 @@
 						<HomeSectionHeader icon={<BookMarked class="size-5 text-gray-500" />} title="recent" />
 						<Show
 							when={recentRepos().length > 0}
-							fallback={<HomeEmpty label="No recent repositories." />}
+							fallback={<HomeEmpty label="No recent repos." />}
 						>
 							<div class="flex flex-col gap-3">
 								<For each={recentRepos().slice(0, 5)}>
@@ -538,7 +538,7 @@
 										<A href={item.href} class="untangled-home-repo-row">
 											<div class="text-sm font-semibold text-black dark:text-white truncate">
 												{item.title}{' '}
-												<span class="text-gray-500 dark:text-gray-400 font-normal">#{item.number}</span>
+												<span class="text-gray-500 dark:text-gray-400 font-normal">#{item.uri.split('/').pop()}</span>
 											</div>
 											<div class="mt-2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 min-w-0">
 												<StateBadge state={item.state} kind={item.kind} />
@@ -584,22 +584,22 @@
 					</aside>
 
 					<section class="untangled-home-wide-section untangled-home-lower-left">
-						<HomeSectionHeader icon={<UserRound class="size-5" />} title="following activity" />
+						<HomeSectionHeader icon={<UserRound class="size-5" />} title="timeline" />
 						<Show
 							when={auth.currentDid()}
-							fallback={<HomeEmpty label="Sign in to see followed repository activity." />}
+							fallback={<HomeEmpty label="Sign in to see followed repo activity." />}
 						>
 							<Show
 								when={!followingQuery.isLoading}
-								fallback={<LoadingState label="Loading followed repositories..." />}
+								fallback={<LoadingState label="Loading followed repos..." />}
 							>
 								<Show
 									when={!followingQuery.error}
-									fallback={<ErrorState message={followingQuery.error instanceof Error ? followingQuery.error.message : 'Failed to load following activity'} />}
+									fallback={<ErrorState message={followingQuery.error instanceof Error ? followingQuery.error.message : 'Failed to load timeline'} />}
 								>
 									<Show
 										when={(followingQuery.data?.activity.length ?? 0) > 0}
-										fallback={<HomeEmpty label="No followed repository activity yet." />}
+										fallback={<HomeEmpty label="No followed repo activity yet." />}
 									>
 										<div class="untangled-home-activity-list">
 											<For each={followingQuery.data?.activity ?? []}>
@@ -666,11 +666,13 @@
 												};
 												return (
 													<div class="flex items-center gap-3">
-														<Avatar did={suggestion.did} size="size-10" />
+														<A href={`/${suggestion.handle}`}>
+															<Avatar did={suggestion.did} size="size-10" />
+														</A>
 														<div class="flex flex-col min-w-0 flex-1">
-															<a href={`https://tangled.org/${suggestion.handle}`} target="_blank" rel="noopener noreferrer" class="text-sm font-medium dark:text-white hover:underline truncate">
+															<A href={`/${suggestion.handle}`} class="text-sm font-medium dark:text-white hover:underline truncate">
 																{suggestion.handle}
-															</a>
+															</A>
 															<span class="text-xs text-gray-500 dark:text-gray-400 truncate">
 																&nbsp;
 															</span>
@@ -724,7 +726,7 @@
 	<div class="untangled-home-feed-empty">
 		<LoaderCircle class="size-8 animate-spin" />
 		<h3>Loading activity</h3>
-		<p>Checking your repositories.</p>
+		<p>Checking your repos.</p>
 	</div>
 );
 
@@ -733,7 +735,7 @@
 	const actorUrl = () => props.item.actorHandle ? `/${props.item.actorHandle}` : '#';
 
 	const actionText = () => {
-		if (props.item.kind === 'repo') return 'published repository';
+		if (props.item.kind === 'repo') return 'published repo';
 		if (props.item.kind === 'issue') return 'created issue in';
 		if (props.item.kind === 'pull') return 'opened pull request in';
 		return 'updated';
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
new file mode 100644
--- /dev/null
+++ b/src/pages/profile.tsx
@@ -0,0 +1,1389 @@
+import clsx from 'clsx';
+import {
+	BookMarked,
+	Link,
+	LoaderCircle,
+	MapPin,
+	Rss,
+	Star,
+	UserRoundPlus,
+	UserRoundMinus,
+	Users,
+	GalleryVertical,
+	Shield,
+	ShieldCheck,
+	ShieldAlert,
+	ArrowRight,
+	X,
+	Check,
+	Pencil,
+} from 'lucide-solid';
+import { A, useParams, useSearchParams } from '@solidjs/router';
+import { createQuery, useQueryClient } from '@tanstack/solid-query';
+import { For, Show, Switch, Match, createMemo, createSignal, createEffect, type Component } from 'solid-js';
+import type { Did } from '@atcute/lexicons/syntax';
+import { ErrorState, LoadingState, PlaceholderAvatar, textareaStyles, inputStyles } from '../components/common';
+import { RepoCard } from '../components/repo';
+import {
+	listFollowRecords,
+	createFollow,
+	deleteFollow,
+	getFollowers,
+	getFollowing,
+	getVouchRecord,
+	putVouchRecord,
+	deleteVouchRecord,
+	type FollowerFollowingItem,
+	type FollowRecord,
+	type VouchRecord,
+} from '../lib/api/graph';
+import { resolveActor, getActorProfile, resolveAvatarUrl, putActorProfile } from '../lib/api/identity';
+import { listRepoRecords, getRepoByDid, type RepoContext } from '../lib/api/repos';
+import { useAuth } from '../lib/auth';
+import { listAllAppviewRecords } from '../lib/api/appview';
+import { formatRelativeTime } from '../lib/repo-utils';
+import { ShTangledFeedStar, ShTangledActorProfile } from '@atcute/tangled';
+
+const ProfileTabs: Component<{
+	activeTab: string;
+	reposCount: number;
+	starsCount: number;
+}> = (props) => {
+	const tabs = [
+		{ id: 'overview', label: 'overview', icon: () => <GalleryVertical class="w-4 h-4 mr-2" /> },
+		{ id: 'repos', label: 'repos', icon: () => <BookMarked class="w-4 h-4 mr-2" />, count: () => props.reposCount },
+		{ id: 'starred', label: 'starred', icon: () => <Star class="w-4 h-4 mr-2" />, count: () => props.starsCount },
+	];
+
+	return (
+		<nav class="w-full pl-4 overflow-x-auto overflow-y-hidden">
+			<div class="flex z-60">
+				<For each={tabs}>
+					{(tab) => {
+						const isActive = () => props.activeTab === tab.id;
+						return (
+							<A
+								href={`?tab=${tab.id}`}
+								class="relative -mr-px group no-underline hover:no-underline"
+							>
+								<div
+									class={clsx(
+										'px-4 py-1 mr-1 text-black dark:text-white text-base min-w-[80px] text-center relative rounded-t whitespace-nowrap',
+										isActive()
+											? '-mb-px bg-white dark:bg-gray-800 font-medium'
+											: 'group-hover:bg-gray-100/25 group-hover:dark:bg-gray-700/25'
+									)}
+								>
+									<span class="flex items-center justify-center">
+										{tab.icon()}
+										{tab.label}
+										{tab.count !== undefined && (
+											<span class="bg-gray-200 dark:bg-gray-700 rounded py-0.5 px-1 text-sm ml-1">
+												{tab.count()}
+											</span>
+										)}
+									</span>
+								</div>
+							</A>
+						);
+					}}
+				</For>
+			</div>
+		</nav>
+	);
+};
+
+const ProfileCardComponent: Component<{
+	actor: any;
+	profile?: any;
+	followersCount: number;
+	followingCount: number;
+	loggedInUserDid?: string;
+	isFollowing: boolean;
+	onFollowToggle: () => void;
+	actionLoading: boolean;
+	onTabChange: (tab: string) => void;
+	vouchRecord?: VouchRecord | null;
+	onVouchSubmit: (kind: 'vouch' | 'denounce' | 'none', reason?: string) => Promise<void>;
+	vouchActionLoading: boolean;
+	onProfileUpdate: (profile: ShTangledActorProfile.Main) => Promise<void>;
+	profileUpdateLoading: boolean;
+	reposCount: number;
+	starsCount: number;
+	mergedPRCount: number;
+	closedPRCount: number;
+	openPRCount: number;
+	openIssueCount: number;
+	closedIssueCount: number;
+}> = (props) => {
+	const userIdent = () => props.actor.handle || props.actor.did;
+	
+	const pronouns = () => props.profile?.pronouns;
+	const description = () => props.profile?.description;
+	const location = () => props.profile?.location;
+	const websiteLinks = () => props.profile?.links ?? [];
+	const includeBluesky = () => props.profile?.bluesky;
+
+	const isSelf = () => props.loggedInUserDid === props.actor.did;
+
+	const [kind, setKind] = createSignal<'vouch' | 'denounce' | 'none'>('none');
+	const [reason, setReason] = createSignal('');
+	let popoverRef: HTMLDivElement | undefined;
+
+	createEffect(() => {
+		const record = props.vouchRecord;
+		if (record) {
+			setKind(record.value.kind);
+			setReason(record.value.reason || '');
+		} else {
+			setKind('none');
+			setReason('');
+		}
+	});
+
+	const popoverId = () => `vouch-modal-${props.actor.did.replace(/[^a-zA-Z0-9]/g, '-')}`;
+
+	const isVouched = () => props.vouchRecord?.value.kind === 'vouch';
+	const isDenounced = () => props.vouchRecord?.value.kind === 'denounce';
+
+	const handleFollowClick = () => {
+		if (!props.loggedInUserDid) {
+			alert('Please sign in to follow users.');
+			return;
+		}
+		props.onFollowToggle();
+	};
+
+	const handleVouchClick = (e: MouseEvent) => {
+		if (!props.loggedInUserDid) {
+			e.preventDefault();
+			alert('Please sign in to vouch for users.');
+		}
+	};
+
+	const [isEditing, setIsEditing] = createSignal(false);
+	const [editBioText, setEditBioText] = createSignal('');
+	const [editPronounsText, setEditPronounsText] = createSignal('');
+	const [editLocationText, setEditLocationText] = createSignal('');
+	const [editBluesky, setEditBluesky] = createSignal(false);
+	const [editLinks, setEditLinks] = createSignal<string[]>(['', '', '', '', '']);
+	const [editStat1, setEditStat1] = createSignal('');
+	const [editStat2, setEditStat2] = createSignal('');
+
+	const startEditing = () => {
+		const p = props.profile;
+		setEditBioText(p?.description || '');
+		setEditPronounsText(p?.pronouns || '');
+		setEditLocationText(p?.location || '');
+		setEditBluesky(!!p?.bluesky);
+		
+		const existingLinks = p?.links || [];
+		const newLinks = ['', '', '', '', ''];
+		for (let i = 0; i < 5; i++) {
+			newLinks[i] = existingLinks[i] || '';
+		}
+		setEditLinks(newLinks);
+
+		const existingStats = p?.stats || [];
+		setEditStat1(existingStats[0] || '');
+		setEditStat2(existingStats[1] || '');
+
+		setIsEditing(true);
+	};
+
+	const handleSubmitProfile = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const finalLinks = editLinks().map(l => l.trim()).filter(Boolean);
+		const finalStats = [editStat1(), editStat2()].filter(Boolean);
+		
+		const updatedProfile: ShTangledActorProfile.Main = {
+			$type: 'sh.tangled.actor.profile',
+			...props.profile,
+			description: editBioText().trim() || undefined,
+			pronouns: editPronounsText().trim() || undefined,
+			location: editLocationText().trim() || undefined,
+			bluesky: editBluesky(),
+			links: finalLinks.length > 0 ? finalLinks : undefined,
+			stats: finalStats.length > 0 ? finalStats : undefined,
+		};
+
+		await props.onProfileUpdate(updatedProfile);
+		setIsEditing(false);
+	};
+
+	const getStatValue = (kind: string) => {
+		if (kind === 'repository-count') return props.reposCount;
+		if (kind === 'star-count') return props.starsCount;
+		if (kind === 'merged-pull-request-count') return props.mergedPRCount;
+		if (kind === 'closed-pull-request-count') return props.closedPRCount;
+		if (kind === 'open-pull-request-count') return props.openPRCount;
+		if (kind === 'open-issue-count') return props.openIssueCount;
+		if (kind === 'closed-issue-count') return props.closedIssueCount;
+		return 0;
+	};
+
+	const formatStatLabel = (kind: string) => {
+		const labels: Record<string, string> = {
+			'merged-pull-request-count': 'merged prs',
+			'closed-pull-request-count': 'closed prs',
+			'open-pull-request-count': 'open prs',
+			'open-issue-count': 'open issues',
+			'closed-issue-count': 'closed issues',
+			'repository-count': 'repos',
+			'star-count': 'stars received',
+		};
+		return labels[kind] || kind;
+	};
+
+	const avatarQuery = createQuery(() => ({
+		queryKey: ['avatar', props.actor.did],
+		queryFn: async () => resolveAvatarUrl(props.actor.did),
+		staleTime: 300_000,
+	}));
+
+	return (
+		<div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">
+			{/* Avatar */}
+			<div id="avatar" class="col-span-1 flex justify-center items-center">
+				<div class="w-3/4 aspect-square relative">
+					<Show
+						when={avatarQuery.data}
+						fallback={<PlaceholderAvatar size="absolute inset-0 w-full h-full p-2" iconSize="size-1/2" />}
+					>
+						<img
+							class="absolute inset-0 w-full h-full object-cover rounded-full p-2"
+							src={avatarQuery.data!}
+							alt={userIdent()}
+						/>
+					</Show>
+				</div>
+			</div>
+
+			{/* Details */}
+			<div class="col-span-2">
+				<div class="flex items-center flex-row flex-nowrap gap-2">
+					<p title={userIdent()} class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
+						{userIdent()}
+					</p>
+					<Show when={pronouns()}>
+						<p class="text-gray-500 dark:text-gray-400">{pronouns()}</p>
+					</Show>
+				</div>
+
+				<div class="md:hidden">
+					<div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
+						<span class="flex-shrink-0"><Users class="size-4" /></span>
+						<span id="followers">
+							<A href="?tab=followers">{props.followersCount} followers</A>
+						</span>
+						<span class="select-none after:content-['·']"></span>
+						<span id="following">
+							<A href="?tab=following">{props.followingCount} following</A>
+						</span>
+					</div>
+				</div>
+			</div>
+
+			{/* Bio and links */}
+			<div class="col-span-3 md:col-span-full">
+				<div id="profile-bio" class="text-sm space-y-2">
+					<Show
+						when={isEditing()}
+						fallback={
+							<>
+								<Show when={description()}>
+									<p class="text-base pb-4 md:pb-2">{description()}</p>
+								</Show>
+
+								<div class="hidden md:block">
+									<div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
+										<span class="flex-shrink-0"><Users class="size-4" /></span>
+										<span id="followers">
+											<A href="?tab=followers">{props.followersCount} followers</A>
+										</span>
+										<span class="select-none after:content-['·']"></span>
+										<span id="following">
+											<A href="?tab=following">{props.followingCount} following</A>
+										</span>
+									</div>
+								</div>
+
+								<div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
+									<Show when={location()}>
+										<div class="flex items-center gap-2">
+											<span class="flex-shrink-0"><MapPin class="size-4" /></span>
+											<span>{location()}</span>
+										</div>
+									</Show>
+
+									<Show when={includeBluesky()}>
+										<div class="flex items-center gap-2">
+											<span class="flex-shrink-0">
+												<svg class="w-4 h-4 text-black dark:text-white" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-3 -3 30 30">
+													<title>Bluesky</title>
+													<path fill="none" stroke="currentColor" d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" stroke-width="2.25"/>
+												</svg>
+											</span>
+											<a id="bluesky-link" href={`https://bsky.app/profile/${props.actor.did}`} target="_blank" rel="noopener noreferrer">
+												{props.actor.handle}
+											</a>
+										</div>
+									</Show>
+
+									<For each={websiteLinks()}>
+										{(link) => (
+											<Show when={link}>
+												<div class="flex items-center gap-2">
+													<span class="flex-shrink-0"><Link class="size-4" /></span>
+													<a rel="nofollow me" href={link} target="_blank" class="truncate">
+														{link}
+													</a>
+												</div>
+											</Show>
+										)}
+									</For>
+								</div>
+
+								<Show when={props.profile?.stats && props.profile.stats.length > 0}>
+									<div class="flex items-center justify-evenly gap-2 py-2">
+										<For each={props.profile.stats}>
+											{(statKind) => (
+												<div class="flex flex-col items-center gap-2">
+													<span class="text-xl font-bold">{getStatValue(statKind)}</span>
+													<span>{formatStatLabel(statKind)}</span>
+												</div>
+											)}
+										</For>
+									</div>
+								</Show>
+
+								<div class="flex my-2 items-center gap-2">
+									<Show
+										when={!isSelf()}
+										fallback={
+											<button
+												type="button"
+												onClick={startEditing}
+												class="btn w-full flex gap-2 items-center justify-center group text-sm"
+											>
+												<Pencil class="size-4 inline" />
+												edit
+											</button>
+										}
+									>
+										<button
+											onClick={handleFollowClick}
+											disabled={props.actionLoading}
+											class="btn w-full flex gap-2 items-center justify-center group text-sm"
+										>
+											<Show
+												when={props.actionLoading}
+												fallback={
+													<Show
+														when={props.isFollowing}
+														fallback={
+															<>
+																<UserRoundPlus class="size-4 inline" />
+																follow
+															</>
+														}
+													>
+														<>
+															<UserRoundMinus class="size-4 inline" />
+															unfollow
+														</>
+													</Show>
+												}
+											>
+												<LoaderCircle class="size-4 animate-spin inline" />
+												<Show when={props.isFollowing} fallback="follow">
+													unfollow
+												</Show>
+											</Show>
+										</button>
+									</Show>
+
+									<a
+										class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
+										href={`/${userIdent()}/feed.atom`}
+									>
+										<Rss class="size-4" />
+									</a>
+								</div>
+
+								<Show when={!isSelf()}>
+									<div class="relative w-full mt-2">
+										<button
+											id={`vouch-btn-${popoverId()}`}
+											type="button"
+											popovertarget={popoverId()}
+											popovertargetaction="toggle"
+											onClick={handleVouchClick}
+											class={clsx(
+												'w-full flex gap-2 items-center justify-center text-sm',
+												isVouched() ? 'btn-create' : isDenounced() ? 'btn-cancel' : 'btn'
+											)}
+										>
+											<Show
+												when={isVouched()}
+												fallback={
+													<Show
+														when={isDenounced()}
+														fallback={
+															<>
+																<Shield class="size-4" />
+																vouch
+															</>
+														}
+													>
+														<>
+															<ShieldAlert class="size-4" />
+															denounced
+														</>
+													</Show>
+												}
+											>
+												<>
+													<ShieldCheck class="size-4" />
+													vouched
+												</>
+											</Show>
+										</button>
+
+										<div
+											id={popoverId()}
+											popover="auto"
+											ref={popoverRef}
+											class="bg-white w-[95%] md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50 space-y-2"
+										>
+											<form
+												onSubmit={async (e) => {
+													e.preventDefault();
+													await props.onVouchSubmit(kind(), kind() === 'none' ? undefined : reason());
+													popoverRef?.hidePopover();
+												}}
+												class="flex flex-col gap-6 group"
+											>
+												<div>
+													<p class="font-semibold mb-1 text-base">Vouch for {userIdent()}</p>
+													<p class="text-gray-600 dark:text-gray-400 text-sm">
+														<Show
+															when={props.vouchRecord}
+															fallback={
+																<>
+																	Vouching builds a web-of-trust across Tangled. Vouch for users you
+																	have had positive interactions with.{' '}
+																	<a href="https://blog.tangled.org/vouching" class="inline-flex items-center gap-1" target="_blank" rel="noopener noreferrer">
+																		Read more <ArrowRight class="size-3" />
+																	</a>
+																</>
+															}
+														>
+															{(record) => (
+																<>
+																	You {record().value.kind === 'vouch' ? 'vouched' : 'denounced'} {userIdent()}{' '}
+																	{formatRelativeTime(record().value.createdAt)}.
+																	You can change your decision below.
+																</>
+															)}
+														</Show>
+													</p>
+												</div>
+
+												<div class="grid grid-cols-3 gap-2">
+													<input
+														id={`vouch-input-${popoverId()}`}
+														type="radio"
+														name="kind"
+														value="vouch"
+														checked={kind() === 'vouch'}
+														onChange={() => setKind('vouch')}
+														class="peer/vouch hidden appearance-none"
+													/>
+													<input
+														id={`denounce-input-${popoverId()}`}
+														type="radio"
+														name="kind"
+														value="denounce"
+														checked={kind() === 'denounce'}
+														onChange={() => setKind('denounce')}
+														class="peer/denounce hidden appearance-none"
+													/>
+													<input
+														id={`none-input-${popoverId()}`}
+														type="radio"
+														name="kind"
+														value="none"
+														checked={kind() === 'none'}
+														onChange={() => setKind('none')}
+														class="peer/none hidden appearance-none"
+													/>
+
+													<label
+														for={`vouch-input-${popoverId()}`}
+														class="untangled-vouch-label items-center gap-2 rounded p-2 ring-1 ring-gray-200 dark:ring-gray-700 cursor-pointer hover:bg-gray-100 peer-checked/vouch:bg-green-200 peer-checked/vouch:text-green-800 peer-checked/vouch:ring-green-400 dark:hover:bg-white/5 dark:peer-checked/vouch:bg-green-700 dark:peer-checked/vouch:text-green-200 dark:peer-checked/vouch:ring-green-600"
+													>
+														<ShieldCheck class="size-5" />
+														<span class="text-sm font-medium">vouch</span>
+													</label>
+													<label
+														for={`denounce-input-${popoverId()}`}
+														class="untangled-vouch-label items-center gap-2 rounded p-2 ring-1 ring-gray-200 dark:ring-gray-700 cursor-pointer hover:bg-gray-100 peer-checked/denounce:bg-red-200 peer-checked/denounce:text-red-800 peer-checked/denounce:ring-red-400 dark:hover:bg-white/5 dark:peer-checked/denounce:bg-red-700 dark:peer-checked/denounce:text-red-200 dark:peer-checked/denounce:ring-red-600"
+													>
+														<ShieldAlert class="size-5" />
+														<span class="text-sm font-medium">denounce</span>
+													</label>
+													<label
+														for={`none-input-${popoverId()}`}
+														class="untangled-vouch-label items-center gap-2 rounded p-2 ring-1 ring-gray-200 dark:ring-gray-700 cursor-pointer hover:bg-gray-100 peer-checked/none:bg-gray-200 peer-checked/none:text-gray-800 peer-checked/none:ring-gray-400 dark:hover:bg-white/5 dark:peer-checked/none:bg-gray-700 dark:peer-checked/none:text-gray-200 dark:peer-checked/none:ring-gray-600"
+													>
+														<Shield class="size-5 opacity-50" />
+														<span class="text-sm font-medium">none</span>
+													</label>
+
+													<textarea
+														id={`reason-${popoverId()}`}
+														name="reason"
+														rows="1"
+														maxLength="300"
+														placeholder="Write a reason..."
+														value={reason()}
+														onInput={(e) => setReason(e.currentTarget.value)}
+														class={clsx(textareaStyles(), 'resize-none col-span-3 peer-checked/none:hidden', kind() === 'none' && 'hidden')}
+													/>
+												</div>
+
+												<div class="flex gap-2">
+													<button
+														type="button"
+														onClick={() => {
+															const record = props.vouchRecord;
+															if (record) {
+																setKind(record.value.kind);
+																setReason(record.value.reason || '');
+															} else {
+																setKind('none');
+																setReason('');
+															}
+															popoverRef?.hidePopover();
+														}}
+														class="btn flex-1 flex items-center justify-center gap-2"
+													>
+														<X class="size-4" />
+														cancel
+													</button>
+													<button
+														type="submit"
+														disabled={props.vouchActionLoading}
+														class="btn-create flex-1 flex items-center justify-center gap-2 text-white group"
+													>
+														<Show
+															when={props.vouchActionLoading}
+															fallback={
+																<>
+																	<Check class="size-4 inline" />
+																	{props.vouchRecord ? 'update' : 'save'}
+																</>
+															}
+														>
+															<>
+																<LoaderCircle class="size-4 animate-spin inline" />
+																{props.vouchRecord ? 'update' : 'save'}
+															</>
+														</Show>
+													</button>
+												</div>
+											</form>
+										</div>
+									</div>
+								</Show>
+							</>
+						}
+					>
+						{/* EDIT FORM */}
+						<form onSubmit={handleSubmitProfile} class="flex flex-col gap-4 my-2 max-w-full">
+							<div class="flex flex-col gap-1">
+								<label class="m-0 p-0 text-sm font-semibold" for="description">bio</label>
+								<textarea
+									id="description"
+									class={clsx(textareaStyles(), 'w-full p-2')}
+									rows="3"
+									placeholder="write a bio"
+									value={editBioText()}
+									onInput={(e) => setEditBioText(e.currentTarget.value)}
+								/>
+							</div>
+
+							<div class="flex flex-col gap-1">
+								<label class="m-0 p-0 text-sm font-semibold" for="pronouns">pronouns</label>
+								<input
+									id="pronouns"
+									type="text"
+									class={clsx(inputStyles(), 'w-full p-2')}
+									placeholder="they/them"
+									value={editPronounsText()}
+									onInput={(e) => setEditPronounsText(e.currentTarget.value)}
+								/>
+							</div>
+
+							<div class="flex flex-col gap-1">
+								<label class="m-0 p-0 text-sm font-semibold" for="location">location</label>
+								<div class="flex items-center gap-2 w-full">
+									<span class="flex-shrink-0"><MapPin class="size-4" /></span>
+									<input
+										id="location"
+										type="text"
+										class={clsx(inputStyles(), 'w-full p-2')}
+										value={editLocationText()}
+										onInput={(e) => setEditLocationText(e.currentTarget.value)}
+									/>
+								</div>
+							</div>
+
+							<div class="flex flex-col gap-1">
+								<label class="m-0 p-0 text-sm font-semibold">social links</label>
+								<div class="flex items-center gap-2 py-1">
+									<input
+										type="checkbox"
+										id="includeBluesky"
+										checked={editBluesky()}
+										onChange={(e) => setEditBluesky(e.currentTarget.checked)}
+										class="mr-2"
+									/>
+									<label for="includeBluesky" class="my-0 py-0 normal-case font-normal text-sm">link to bluesky account</label>
+								</div>
+
+								<For each={editLinks()}>
+									{(link, index) => (
+										<div class="flex items-center gap-2 w-full">
+											<span class="flex-shrink-0"><Link class="size-4" /></span>
+											<input
+												type="text"
+												class={clsx(inputStyles(), 'w-full p-2')}
+												value={link}
+												placeholder={`social link ${index() + 1}`}
+												onInput={(e) => {
+													const next = [...editLinks()];
+													next[index()] = e.currentTarget.value;
+													setEditLinks(next);
+												}}
+											/>
+										</div>
+									)}
+								</For>
+							</div>
+
+							<div class="flex flex-col gap-1">
+								<label class="m-0 p-0 text-sm font-semibold">vanity stats</label>
+								<select
+									value={editStat1()}
+									onChange={(e) => setEditStat1(e.currentTarget.value)}
+									class="w-full p-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 dark:text-white text-sm"
+								>
+									<option value="">choose stat 1</option>
+									<option value="merged-pull-request-count">merged pr count</option>
+									<option value="closed-pull-request-count">closed pr count</option>
+									<option value="open-pull-request-count">open pr count</option>
+									<option value="open-issue-count">open issue count</option>
+									<option value="closed-issue-count">closed issue count</option>
+									<option value="repository-count">repository count</option>
+									<option value="star-count">star count</option>
+								</select>
+
+								<select
+									value={editStat2()}
+									onChange={(e) => setEditStat2(e.currentTarget.value)}
+									class="w-full p-2 mt-2 rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 dark:text-white text-sm"
+								>
+									<option value="">choose stat 2</option>
+									<option value="merged-pull-request-count">merged pr count</option>
+									<option value="closed-pull-request-count">closed pr count</option>
+									<option value="open-pull-request-count">open pr count</option>
+									<option value="open-issue-count">open issue count</option>
+									<option value="closed-issue-count">closed issue count</option>
+									<option value="repository-count">repository count</option>
+									<option value="star-count">star count</option>
+								</select>
+							</div>
+
+							<div class="flex items-center gap-2 justify-between">
+								<button
+									id="save-btn"
+									type="submit"
+									disabled={props.profileUpdateLoading}
+									class="btn-create p-1 w-full flex items-center justify-center gap-2 text-white text-sm"
+								>
+									<Show
+										when={props.profileUpdateLoading}
+										fallback={
+											<>
+												<Check class="size-4" />
+												save
+											</>
+										}
+									>
+										<>
+											<LoaderCircle class="w-4 h-4 animate-spin" />
+											save
+										</>
+									</Show>
+								</button>
+								<button
+									id="cancel-btn"
+									type="button"
+									onClick={() => setIsEditing(false)}
+									class="btn p-1 w-full flex items-center justify-center gap-2 text-sm"
+								>
+									<X class="size-4" />
+									cancel
+								</button>
+							</div>
+						</form>
+					</Show>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const FollowCard: Component<{
+	item: FollowerFollowingItem;
+	loggedInUserDid?: string;
+	viewerFollows?: FollowRecord[];
+	onFollowToggle?: (did: Did) => void;
+}> = (props) => {
+	const userIdent = () => props.item.handle || props.item.did;
+	
+	const profileQuery = createQuery(() => ({
+		queryKey: ['profile-record', props.item.did],
+		queryFn: () => getActorProfile(props.item.actor),
+		staleTime: 300_000,
+	}));
+
+	const followersQuery = createQuery(() => ({
+		queryKey: ['profile-followers', props.item.did],
+		queryFn: () => getFollowers(props.item.did),
+		staleTime: 300_000,
+	}));
+
+	const followingQuery = createQuery(() => ({
+		queryKey: ['profile-following', props.item.did],
+		queryFn: () => getFollowing(props.item.did),
+		staleTime: 300_000,
+	}));
+
+	const isFollowing = () => {
+		const list = props.viewerFollows;
+		if (!list) return false;
+		return list.some(follow => follow.value.subject === props.item.did);
+	};
+
+	const isSelf = () => props.loggedInUserDid === props.item.did;
+
+	const avatarQuery = createQuery(() => ({
+		queryKey: ['avatar', props.item.did],
+		queryFn: async () => resolveAvatarUrl(props.item.did),
+		staleTime: 300_000,
+	}));
+
+	return (
+		<div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700">
+			<div class="py-4 px-6 drop-shadow-sm bg-white dark:bg-gray-800 flex items-center gap-4">
+				<div class="flex-shrink-0 max-h-full w-24 h-24">
+					<Show
+						when={avatarQuery.data}
+						fallback={<PlaceholderAvatar size="w-24 h-24 p-2" iconSize="size-10" />}
+					>
+						<img
+							class="object-cover rounded-full p-2 w-24 h-24"
+							src={avatarQuery.data!}
+							alt={userIdent()}
+						/>
+					</Show>
+				</div>
+
+				<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 w-full min-w-0">
+					<div class="flex-1 min-h-0 justify-around flex flex-col">
+						<A href={`/${userIdent()}`}>
+							<span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
+								{userIdent()}
+							</span>
+						</A>
+						<Show when={profileQuery.data?.description}>
+							<p class="text-sm pb-2 md:pb-2 break-words">
+								{profileQuery.data!.description}
+							</p>
+						</Show>
+						<div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
+							<span class="flex-shrink-0"><Users class="size-4" /></span>
+							<span id="followers">
+								<A href={`/${userIdent()}?tab=followers`}>
+									{followersQuery.data?.length ?? 0} followers
+								</A>
+							</span>
+							<span class="select-none after:content-['·']"></span>
+							<span id="following">
+								<A href={`/${userIdent()}?tab=following`}>
+									{followingQuery.data?.length ?? 0} following
+								</A>
+							</span>
+						</div>
+					</div>
+					<Show when={props.loggedInUserDid && !isSelf()}>
+						<div class="w-full md:w-auto md:max-w-24 order-last md:order-none">
+							<button
+								onClick={() => props.onFollowToggle?.(props.item.did)}
+								class="btn w-full flex gap-2 items-center justify-center group"
+							>
+								<Show
+									when={isFollowing()}
+									fallback={
+										<>
+											<UserRoundPlus class="size-4 inline" />
+											Follow
+										</>
+									}
+								>
+									<>
+										<UserRoundMinus class="size-4 inline" />
+										Unfollow
+									</>
+								</Show>
+							</button>
+						</div>
+					</Show>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const ProfilePage: Component = () => {
+	const params = useParams();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const queryClient = useQueryClient();
+	const auth = useAuth();
+	
+	const [repoSearch, setRepoSearch] = createSignal('');
+	const [actionLoading, setActionLoading] = createSignal(false);
+
+	const actorParam = () => params.actor as string;
+	const activeTab = () => {
+		const tab = searchParams.tab;
+		return (Array.isArray(tab) ? tab[0] : tab) || 'overview';
+	};
+
+	const actorQuery = createQuery(() => ({
+		queryKey: ['profile-actor', actorParam()],
+		queryFn: () => resolveActor(actorParam()),
+	}));
+
+	const profileQuery = createQuery(() => ({
+		queryKey: ['profile-record', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: () => getActorProfile(actorQuery.data!),
+	}));
+
+	const followersQuery = createQuery(() => ({
+		queryKey: ['profile-followers', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: () => getFollowers(actorQuery.data!.did),
+	}));
+
+	const followingQuery = createQuery(() => ({
+		queryKey: ['profile-following', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: () => getFollowing(actorQuery.data!.did),
+	}));
+
+	const reposQuery = createQuery(() => ({
+		queryKey: ['profile-repos', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: () => listRepoRecords(actorQuery.data!),
+	}));
+
+	const starsQuery = createQuery(() => ({
+		queryKey: ['profile-stars', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: async () => {
+			const did = actorQuery.data!.did;
+			const starRecords = await listAllAppviewRecords<ShTangledFeedStar.Main>('sh.tangled.feed.listStarsBy', did);
+			const repos = await Promise.all(
+				starRecords.map(async (star) => {
+					const subject = star.value.subject as { did?: string; subjectDid?: string };
+					const repoDid = (subject.did ?? subject.subjectDid) as Did;
+					try {
+						return await getRepoByDid(repoDid);
+					} catch (e) {
+						console.error('failed to resolve starred repo', repoDid, e);
+						return null;
+					}
+				})
+			);
+			return repos.filter(Boolean) as RepoContext[];
+		},
+	}));
+
+	const viewerFollowsQuery = createQuery(() => ({
+		queryKey: ['viewer-follows', auth.currentDid()],
+		enabled: !!auth.currentDid(),
+		queryFn: () => listFollowRecords(auth.currentDid()!),
+	}));
+
+	const issuesQuery = createQuery(() => ({
+		queryKey: ['profile-issues-stat', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: async () => {
+			const did = actorQuery.data!.did;
+			try {
+				return await listAllAppviewRecords<any>('sh.tangled.repo.listIssuesBy', did);
+			} catch (e) {
+				console.error('Failed to fetch issues for stat', e);
+				return [];
+			}
+		}
+	}));
+
+	const pullsQuery = createQuery(() => ({
+		queryKey: ['profile-pulls-stat', actorQuery.data?.did],
+		enabled: !!actorQuery.data,
+		queryFn: async () => {
+			const did = actorQuery.data!.did;
+			try {
+				return await listAllAppviewRecords<any>('sh.tangled.repo.listPullsBy', did);
+			} catch (e) {
+				console.error('Failed to fetch pulls for stat', e);
+				return [];
+			}
+		}
+	}));
+
+	const mergedPRCount = () => (pullsQuery.data as any[])?.filter((p) => p.state === 'merged').length ?? 0;
+	const closedPRCount = () => (pullsQuery.data as any[])?.filter((p) => p.state === 'closed').length ?? 0;
+	const openPRCount = () => (pullsQuery.data as any[])?.filter((p) => p.state === 'open').length ?? 0;
+	const openIssueCount = () => (issuesQuery.data as any[])?.filter((i) => i.state === 'open').length ?? 0;
+	const closedIssueCount = () => (issuesQuery.data as any[])?.filter((i) => i.state === 'closed').length ?? 0;
+
+	const isFollowing = () => {
+		const list = viewerFollowsQuery.data;
+		const profileDid = actorQuery.data?.did;
+		if (!list || !profileDid) return false;
+		return list.some((follow) => follow.value.subject === profileDid);
+	};
+
+	const followRecordRkey = () => {
+		const list = viewerFollowsQuery.data;
+		const profileDid = actorQuery.data?.did;
+		if (!list || !profileDid) return undefined;
+		return list.find((follow) => follow.value.subject === profileDid)?.rkey;
+	};
+
+	const handleFollowToggle = async () => {
+		const agent = auth.agent();
+		const profileDid = actorQuery.data?.did;
+		if (!agent || !profileDid) return;
+
+		setActionLoading(true);
+		try {
+			const rkey = followRecordRkey();
+			if (rkey) {
+				await deleteFollow(agent, rkey);
+			} else {
+				await createFollow(agent, profileDid);
+			}
+			queryClient.invalidateQueries({ queryKey: ['viewer-follows', auth.currentDid()] });
+			queryClient.invalidateQueries({ queryKey: ['profile-followers', profileDid] });
+		} catch (e) {
+			console.error('Failed to toggle follow status', e);
+		} finally {
+			setActionLoading(false);
+		}
+	};
+
+	const handleItemFollowToggle = async (did: Did) => {
+		const agent = auth.agent();
+		if (!agent) return;
+
+		try {
+			const viewerFollows = viewerFollowsQuery.data ?? [];
+			const existing = viewerFollows.find((f) => f.value.subject === did);
+			if (existing) {
+				await deleteFollow(agent, existing.rkey);
+			} else {
+				await createFollow(agent, did);
+			}
+			queryClient.invalidateQueries({ queryKey: ['viewer-follows', auth.currentDid()] });
+			if (actorQuery.data?.did === did) {
+				queryClient.invalidateQueries({ queryKey: ['profile-followers', did] });
+			}
+		} catch (e) {
+			console.error('Failed to toggle follow status for list item', e);
+		}
+	};
+
+	const vouchQuery = createQuery(() => ({
+		queryKey: ['vouch-record', auth.currentDid(), actorQuery.data?.did],
+		enabled: !!auth.currentDid() && !!actorQuery.data?.did && auth.currentDid() !== actorQuery.data?.did,
+		queryFn: () => getVouchRecord(auth.currentDid()!, actorQuery.data!.did),
+	}));
+
+	const [vouchActionLoading, setVouchActionLoading] = createSignal(false);
+
+	const handleVouchSubmit = async (kind: 'vouch' | 'denounce' | 'none', reason?: string) => {
+		const agent = auth.agent();
+		const profileDid = actorQuery.data?.did;
+		if (!agent || !profileDid) return;
+
+		setVouchActionLoading(true);
+		try {
+			if (kind === 'none') {
+				await deleteVouchRecord(agent, profileDid);
+			} else {
+				await putVouchRecord(agent, profileDid, kind, reason);
+			}
+			queryClient.invalidateQueries({ queryKey: ['vouch-record', auth.currentDid(), profileDid] });
+		} catch (e) {
+			console.error('Failed to submit vouch status', e);
+		} finally {
+			setVouchActionLoading(false);
+		}
+	};
+
+	const [profileUpdateLoading, setProfileUpdateLoading] = createSignal(false);
+
+	const handleProfileUpdate = async (profile: ShTangledActorProfile.Main) => {
+		const agent = auth.agent();
+		const profileDid = actorQuery.data?.did;
+		if (!agent || !profileDid) return;
+
+		setProfileUpdateLoading(true);
+		try {
+			await putActorProfile(agent, profile);
+			queryClient.invalidateQueries({ queryKey: ['profile-record', profileDid] });
+		} catch (e) {
+			console.error('Failed to update profile record', e);
+		} finally {
+			setProfileUpdateLoading(false);
+		}
+	};
+
+	const pinnedRepos = createMemo(() => {
+		const list = reposQuery.data ?? [];
+		const pinnedDids = profileQuery.data?.pinnedRepositories ?? [];
+		if (pinnedDids.length > 0) {
+			return list.filter((repo) => {
+				const did = repo.value.repoDid;
+				const uri = repo.uri;
+				return (did && pinnedDids.includes(did)) || pinnedDids.includes(uri);
+			});
+		}
+		return list.slice(0, 4);
+	});
+
+	const filteredRepos = createMemo(() => {
+		const q = repoSearch().toLowerCase().trim();
+		const list = reposQuery.data ?? [];
+		if (!q) return list;
+		return list.filter(
+			(repo) =>
+				repo.value.name?.toLowerCase().includes(q) ||
+				repo.value.description?.toLowerCase().includes(q)
+		);
+	});
+
+	return (
+		<Switch>
+			<Match when={actorQuery.isLoading}>
+				<LoadingState label="Loading profile..." />
+			</Match>
+
+			<Match when={actorQuery.error}>
+				<div class="p-6 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800">
+					<ErrorState message="Could not resolve user profile." />
+				</div>
+			</Match>
+
+			<Match when={actorQuery.data}>
+				{(resolvedActor) => (
+					<Switch>
+						<Match when={profileQuery.isLoading}>
+							<LoadingState label="Loading profile data..." />
+						</Match>
+						<Match when={!profileQuery.data}>
+							{(() => {
+								const unresolvedAvatarQuery = createQuery(() => ({
+									queryKey: ['avatar', resolvedActor().did],
+									queryFn: async () => resolveAvatarUrl(resolvedActor().did),
+									staleTime: 300_000,
+								}));
+								return (
+									<section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white shadow-sm">
+										<div class="flex items-center gap-6 p-4">
+											<Show
+												when={unresolvedAvatarQuery.data}
+												fallback={<PlaceholderAvatar size="w-28 h-28" iconSize="size-12" />}
+											>
+												<img
+													class="w-28 h-28 shrink-0 object-cover rounded-full"
+													src={unresolvedAvatarQuery.data!}
+													alt={resolvedActor().handle || resolvedActor().did}
+												/>
+											</Show>
+											<div>
+												<p class="text-lg font-bold">{resolvedActor().handle || resolvedActor().did}</p>
+												<p class="text-gray-700 dark:text-gray-300 mt-2">This user hasn't joined Tangled yet.</p>
+												<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Let them know we're waiting for them!</p>
+											</div>
+										</div>
+									</section>
+								);
+							})()}
+						</Match>
+						<Match when={profileQuery.data}>
+							<div class="flex flex-col">
+								<ProfileTabs
+									activeTab={activeTab()}
+									reposCount={reposQuery.data?.length ?? 0}
+									starsCount={starsQuery.data?.length ?? 0}
+								/>
+
+								<section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white shadow-sm">
+									<div class="grid grid-cols-1 md:grid-cols-11 gap-4">
+										{/* Sidebar */}
+										<div
+											class={clsx(
+												activeTab() === 'overview' ? 'md:col-span-3' : 'hidden md:block md:col-span-3',
+												'order-1'
+											)}
+										>
+											<ProfileCardComponent
+												actor={resolvedActor()}
+												profile={profileQuery.data}
+												followersCount={followersQuery.data?.length ?? 0}
+												followingCount={followingQuery.data?.length ?? 0}
+												loggedInUserDid={auth.currentDid() ?? undefined}
+												isFollowing={isFollowing()}
+												onFollowToggle={handleFollowToggle}
+												actionLoading={actionLoading()}
+												onTabChange={(tab) => setSearchParams({ tab })}
+												vouchRecord={vouchQuery.data}
+												onVouchSubmit={handleVouchSubmit}
+												vouchActionLoading={vouchActionLoading()}
+												onProfileUpdate={handleProfileUpdate}
+												profileUpdateLoading={profileUpdateLoading()}
+												reposCount={reposQuery.data?.length ?? 0}
+												starsCount={starsQuery.data?.length ?? 0}
+												mergedPRCount={mergedPRCount()}
+												closedPRCount={closedPRCount()}
+												openPRCount={openPRCount()}
+												openIssueCount={openIssueCount()}
+												closedIssueCount={closedIssueCount()}
+											/>
+										</div>
+
+										<Switch>
+											{/* Overview Tab (split into two columns) */}
+											<Match when={activeTab() === 'overview'}>
+												{/* Pinned / Own Repos Column */}
+												<div id="all-repos" class="md:col-span-4 order-2 md:order-2">
+													<div class="grid grid-cols-1 gap-4">
+														<div>
+															<div class="text-base font-bold uppercase tracking-wider px-2 pb-4 dark:text-white flex items-center gap-2">
+																<A
+																	href="?tab=repos"
+																	class="flex text-black dark:text-white items-center gap-2 no-underline hover:no-underline group"
+																>
+																	<span>pinned repos</span>
+																</A>
+															</div>
+															<div id="repos" class="grid grid-cols-1 gap-4 items-stretch">
+																<For
+																	each={pinnedRepos()}
+																	fallback={
+																		<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																			<span>This user does not have any pinned repos.</span>
+																		</div>
+																	}
+																>
+																	{(repo) => (
+																		<RepoCard
+																			owner={resolvedActor().handle}
+																			name={repo.value.name || repo.rkey}
+																			description={repo.value.description}
+																			showOwner={false}
+																		/>
+																	)}
+																</For>
+															</div>
+														</div>
+													</div>
+												</div>
+
+												{/* Activity Timeline Column */}
+												<div class="md:col-span-4 order-3 md:order-3">
+													<p class="text-base font-bold uppercase tracking-wider px-2 pb-4 dark:text-white">activity</p>
+													<div class="flex flex-col gap-4 relative">
+														<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+															<span>This user does not have any activity yet.</span>
+														</div>
+													</div>
+												</div>
+											</Match>
+
+											{/* Repositories Tab */}
+											<Match when={activeTab() === 'repos'}>
+												<div id="all-repos" class="md:col-span-8 order-2 md:order-2">
+													<div class="mb-4">
+														<form id="search-form" class="flex relative" onSubmit={(e) => e.preventDefault()}>
+															<div class="flex-1 flex relative">
+																<input
+																	id="search-q"
+																	class="flex-1 py-1 pl-2 pr-10 mr-[-1px] rounded-r-none peer font-normal text-sm"
+																	type="text"
+																	placeholder="Search repos..."
+																	value={repoSearch()}
+																	onInput={(e) => setRepoSearch(e.currentTarget.value)}
+																/>
+																<Show when={repoSearch()}>
+																	<button
+																		type="button"
+																		onClick={() => setRepoSearch('')}
+																		class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+																	>
+																		<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+																	</button>
+																</Show>
+															</div>
+															<button
+																type="submit"
+																class="p-2 text-gray-400 border rounded-r border-gray-300 dark:border-gray-600"
+															>
+																<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+															</button>
+														</form>
+													</div>
+
+													<div id="repos" class="grid grid-cols-1 gap-4 mb-6">
+														<For
+															each={filteredRepos()}
+															fallback={
+																<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																	<span>This user does not have any repos yet.</span>
+																</div>
+															}
+														>
+															{(repo) => (
+																<RepoCard
+																	owner={resolvedActor().handle}
+																	name={repo.value.name || repo.rkey}
+																	description={repo.value.description}
+																	showOwner={false}
+																/>
+															)}
+														</For>
+													</div>
+												</div>
+											</Match>
+
+											{/* Starred Tab */}
+											<Match when={activeTab() === 'starred'}>
+												<div id="all-repos" class="md:col-span-8 order-2 md:order-2">
+													<Show
+														when={!starsQuery.isLoading}
+														fallback={<LoadingState label="Loading starred repos..." />}
+													>
+														<div id="repos" class="grid grid-cols-1 gap-4 mb-6">
+															<For
+																each={starsQuery.data ?? []}
+																fallback={
+																	<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																		<span>This user does not have any starred repos yet.</span>
+																	</div>
+																}
+															>
+																{(repo) => (
+																	<RepoCard
+																		owner={repo.owner.handle}
+																		name={repo.slug}
+																		description={repo.record.value.description}
+																		showOwner={true}
+																	/>
+																)}
+															</For>
+														</div>
+													</Show>
+												</div>
+											</Match>
+
+											{/* Followers Tab */}
+											<Match when={activeTab() === 'followers'}>
+												<div id="all-followers" class="md:col-span-8 order-2 md:order-2">
+													<p class="text-base font-bold uppercase tracking-wider p-2 dark:text-white">all followers</p>
+													<Show
+														when={!followersQuery.isLoading}
+														fallback={<LoadingState label="Loading followers..." />}
+													>
+														<div id="followers" class="grid grid-cols-1 gap-4 mb-6">
+															<For
+																each={followersQuery.data ?? []}
+																fallback={
+																	<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																		<span>This user does not have any followers yet.</span>
+																	</div>
+																}
+															>
+																{(item) => (
+																	<FollowCard
+																		item={item}
+																		loggedInUserDid={auth.currentDid() ?? undefined}
+																		viewerFollows={viewerFollowsQuery.data}
+																		onFollowToggle={handleItemFollowToggle}
+																	/>
+																)}
+															</For>
+														</div>
+													</Show>
+												</div>
+											</Match>
+
+											{/* Following Tab */}
+											<Match when={activeTab() === 'following'}>
+												<div id="all-following" class="md:col-span-8 order-2 md:order-2">
+													<p class="text-base font-bold uppercase tracking-wider p-2 dark:text-white">all following</p>
+													<Show
+														when={!followingQuery.isLoading}
+														fallback={<LoadingState label="Loading following list..." />}
+													>
+														<div id="following" class="grid grid-cols-1 gap-4 mb-6">
+															<For
+																each={followingQuery.data ?? []}
+																fallback={
+																	<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
+																		<span>This user does not follow anyone yet.</span>
+																	</div>
+																}
+															>
+																{(item) => (
+																	<FollowCard
+																		item={item}
+																		loggedInUserDid={auth.currentDid() ?? undefined}
+																		viewerFollows={viewerFollowsQuery.data}
+																		onFollowToggle={handleItemFollowToggle}
+																	/>
+																)}
+															</For>
+														</div>
+													</Show>
+												</div>
+											</Match>
+										</Switch>
+									</div>
+								</section>
+							</div>
+						</Match>
+			</Switch>
+		)}
+	</Match>
+		</Switch>
+	);
+};
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@@ -306,6 +306,11 @@
 							{title()}
 						</RepoThreadLink>
 					</Match>
+					<Match when={props.hit.nsid === 'sh.tangled.actor.profile'}>
+						<A href={`/${props.hit.author.handle}`} class="truncate min-w-0">
+							{props.hit.author.handle}
+						</A>
+					</Match>
 				<Match when={props.hit.nsid === 'sh.tangled.repo.issue.comment' || props.hit.nsid === 'sh.tangled.repo.pull.comment'}>
 					<CommentParentLink hit={props.hit} />
 				</Match>
diff --git a/src/lib/api/graph.ts b/src/lib/api/graph.ts
--- a/src/lib/api/graph.ts
+++ b/src/lib/api/graph.ts
@@ -1,11 +1,13 @@
 import { ok } from '@atcute/client';
 import type { ResolvedActor } from '@atcute/identity-resolver';
-import type { Nsid, ResourceUri } from '@atcute/lexicons/syntax';
+import type { Did, Nsid, ResourceUri } from '@atcute/lexicons/syntax';
+import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
 import { ShTangledGraphFollow } from '@atcute/tangled';
 
 import { getRpc } from './client';
-import { resolveActor } from './identity';
-import { parseAtUri } from './records';
+import { createAuthRpc, resolveActor, resolveActorForDisplay } from './identity';
+import { parseAtUri, type RecordCreationResult } from './records';
+import { listAllAppviewRecords } from './appview';
 
 const FOLLOW_COLLECTION = 'sh.tangled.graph.follow' as Nsid;
 
@@ -48,3 +50,169 @@
 
 	return records;
 };
+
+export const createFollow = async (agent: OAuthUserAgent, followeeDid: Did): Promise<RecordCreationResult> => {
+	const rpc = createAuthRpc(agent);
+	const record: ShTangledGraphFollow.Main = {
+		$type: 'sh.tangled.graph.follow',
+		subject: followeeDid,
+		createdAt: new Date().toISOString(),
+	};
+	const result = await ok(
+		rpc.post('com.atproto.repo.createRecord', {
+			input: {
+				repo: agent.sub,
+				collection: FOLLOW_COLLECTION,
+				record,
+			},
+		}),
+	);
+
+	return {
+		uri: result.uri,
+		rkey: parseAtUri(result.uri).rkey,
+	};
+};
+
+export const deleteFollow = async (agent: OAuthUserAgent, rkey: string): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	await ok(
+		rpc.post('com.atproto.repo.deleteRecord', {
+			input: {
+				repo: agent.sub,
+				collection: FOLLOW_COLLECTION,
+				rkey,
+			},
+		}),
+	);
+};
+
+export interface FollowerFollowingItem {
+	did: Did;
+	handle: string;
+	actor: ResolvedActor;
+	followRecord: FollowRecord;
+}
+
+export const getFollowers = async (did: Did): Promise<FollowerFollowingItem[]> => {
+	const records = await listAllAppviewRecords<ShTangledGraphFollow.Main>('sh.tangled.graph.listFollows', did);
+	return Promise.all(
+		records.map(async (record) => {
+			const parsed = parseAtUri(record.uri);
+			const actor = await resolveActorForDisplay(parsed.did);
+			return {
+				did: parsed.did,
+				handle: actor.handle,
+				actor,
+				followRecord: {
+					uri: record.uri,
+					cid: record.cid ?? '',
+					rkey: parsed.rkey,
+					value: record.value,
+				},
+			};
+		})
+	);
+};
+
+export const getFollowing = async (did: Did): Promise<FollowerFollowingItem[]> => {
+	const records = await listAllAppviewRecords<ShTangledGraphFollow.Main>('sh.tangled.graph.listFollowsBy', did);
+	return Promise.all(
+		records.map(async (record) => {
+			const targetDid = record.value.subject as Did;
+			const actor = await resolveActorForDisplay(targetDid);
+			const parsed = parseAtUri(record.uri);
+			return {
+				did: targetDid,
+				handle: actor.handle,
+				actor,
+				followRecord: {
+					uri: record.uri,
+					cid: record.cid ?? '',
+					rkey: parsed.rkey,
+					value: record.value,
+				},
+			};
+		})
+	);
+};
+
+const VOUCH_COLLECTION = 'sh.tangled.graph.vouch';
+
+export interface VouchRecord {
+	uri: string;
+	cid: string;
+	value: {
+		$type: 'sh.tangled.graph.vouch';
+		createdAt: string;
+		kind: 'vouch' | 'denounce';
+		reason?: string;
+		evidences?: string[];
+	};
+}
+
+export const getVouchRecord = async (
+	viewerDid: Did,
+	subjectDid: Did
+): Promise<VouchRecord | null> => {
+	try {
+		const resolvedViewer = await resolveActor(viewerDid);
+		const rpc = getRpc(resolvedViewer.pds);
+		const result = await ok(
+			rpc.get('com.atproto.repo.getRecord', {
+				params: {
+					repo: resolvedViewer.did,
+					collection: VOUCH_COLLECTION,
+					rkey: subjectDid,
+				},
+			})
+		);
+		return result as unknown as VouchRecord;
+	} catch (e) {
+		return null;
+	}
+};
+
+export const putVouchRecord = async (
+	agent: OAuthUserAgent,
+	subjectDid: Did,
+	kind: 'vouch' | 'denounce',
+	reason?: string,
+	evidences?: string[]
+): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	const record = {
+		$type: VOUCH_COLLECTION,
+		createdAt: new Date().toISOString(),
+		kind,
+		reason: reason || undefined,
+		evidences: evidences || undefined,
+	};
+	await ok(
+		rpc.post('com.atproto.repo.putRecord', {
+			input: {
+				repo: agent.sub,
+				collection: VOUCH_COLLECTION,
+				rkey: subjectDid,
+				record,
+			},
+		})
+	);
+};
+
+export const deleteVouchRecord = async (
+	agent: OAuthUserAgent,
+	subjectDid: Did
+): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	await ok(
+		rpc.post('com.atproto.repo.deleteRecord', {
+			input: {
+				repo: agent.sub,
+				collection: VOUCH_COLLECTION,
+				rkey: subjectDid,
+			},
+		})
+	);
+};
+
diff --git a/src/lib/api/identity.ts b/src/lib/api/identity.ts
--- a/src/lib/api/identity.ts
+++ b/src/lib/api/identity.ts
@@ -1,4 +1,5 @@
 import { ok } from '@atcute/client';
+import type { OAuthUserAgent } from '@atcute/oauth-browser-client';
 import {
 	type ActorResolver,
 	type ResolveActorOptions,
@@ -120,6 +121,23 @@
 	return profile.value;
 };
 
+export const getActorProfile = async (actor: ResolvedActor): Promise<ShTangledActorProfile.Main | null> => {
+	try {
+		return await getActorProfileFromAppview(actor);
+	} catch (cause) {
+		if (!(cause instanceof AppviewUnavailableError)) {
+			throw cause;
+		}
+
+		return await getOptionalRecord<ShTangledActorProfile.Main>(
+			actor,
+			ACTOR_PROFILE_COLLECTION,
+			'self',
+		);
+	}
+};
+
+
 export const resolveAvatarUrl = async (identifier: string): Promise<string | null> => {
 	const actor = await resolveActor(identifier);
 	let tangledProfile: ShTangledActorProfile.Main | null;
@@ -161,4 +179,21 @@
 	url.searchParams.set('did', did);
 	url.searchParams.set('cid', cid);
 	return url.toString();
+};
+
+export const putActorProfile = async (
+	agent: OAuthUserAgent,
+	profile: ShTangledActorProfile.Main
+): Promise<void> => {
+	const rpc = createAuthRpc(agent);
+	await ok(
+		rpc.post('com.atproto.repo.putRecord', {
+			input: {
+				repo: agent.sub,
+				collection: ACTOR_PROFILE_COLLECTION,
+				rkey: 'self',
+				record: profile,
+			},
+		})
+	);
 };
diff --git a/src/pages/repo/issues.tsx b/src/pages/repo/issues.tsx
--- a/src/pages/repo/issues.tsx
+++ b/src/pages/repo/issues.tsx
@@ -487,7 +487,7 @@
 										<StateBadge state={detail().issue.state} kind="issue" />
 										<span>opened by</span>
 										<Avatar did={detail().issue.author.did} size="size-6" />
-										<span class="text-gray-700 dark:text-gray-200">{detail().issue.author.handle}</span>
+										<a href={`/${detail().issue.author.did}`} class="text-gray-700 dark:text-gray-200">{detail().issue.author.handle}</a>
 										<span class="select-none">·</span>
 										<span>{formatRelativeTime(detail().issue.value.createdAt)}</span>
 									</div>
@@ -516,7 +516,7 @@
 														</div>
 														<div class="min-w-0 flex-1">
 															<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-																<span class="text-gray-700 dark:text-gray-200">{thread.item.author.handle}</span>
+																<a href={`/${thread.item.author.did}`} class="text-gray-700 dark:text-gray-200">{thread.item.author.handle}</a>
 																<Show when={thread.item.author.did === detail().issue.author.did}>
 																	<span>(author)</span>
 																</Show>
@@ -537,7 +537,7 @@
 																		</div>
 																		<div class="min-w-0 flex-1">
 																			<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-																				<span class="text-gray-700 dark:text-gray-200">{reply.author.handle}</span>
+																				<a href={`/${reply.author.did}`} class="text-gray-700 dark:text-gray-200">{reply.author.handle}</a>
 																				<Show when={reply.author.did === detail().issue.author.did}>
 																					<span>(author)</span>
 																				</Show>
diff --git a/src/pages/repo/pulls.tsx b/src/pages/repo/pulls.tsx
--- a/src/pages/repo/pulls.tsx
+++ b/src/pages/repo/pulls.tsx
@@ -1014,7 +1014,7 @@
 										<StateBadge state={detail().pull.state} kind="pull" />
 										<span>opened by</span>
 										<Avatar did={detail().pull.author.did} size="size-6" />
-										<span class="text-gray-700 dark:text-gray-200">{detail().pull.author.handle}</span>
+										<a href={`/${detail().pull.author.did}`} class="text-gray-700 dark:text-gray-200">{detail().pull.author.handle}</a>
 										<span class="select-none">·</span>
 										<span>{formatRelativeTime(detail().pull.value.createdAt)}</span>
 										<span class="select-none">·</span>

--
tangled.sh