From aee2bae4cec0fa79eb6f99dab1f7778ce1e2ed5e Mon Sep 17 00:00:00 2001
From: Mars <mars@pupbrained.dev>
Date: Sun, 22 Feb 2026 02:46:52 -0500
Subject: [PATCH] feat(web): ui/ux cleanup

---
 interface/src/api/client.ts                |   2 +
 interface/src/components/Markdown.tsx      |  10 +-
 interface/src/hooks/useChannelLiveState.ts |  11 +-
 interface/src/routes/AgentDetail.tsx       | 121 ++++++-----
 interface/src/routes/AgentSkills.tsx       | 221 +++++++++++--------
 interface/src/routes/ChannelDetail.tsx     |  76 ++++---
 src/api/server.rs                          |   8 +-
 src/api/skills.rs                          | 233 ++++++++++++++++++++-
 src/conversation/history.rs                |   2 +-
 src/tools/browser.rs                       |   5 +-
 10 files changed, 511 insertions(+), 178 deletions(-)

diff --git a/interface/src/api/client.ts b/interface/src/api/client.ts
index 837861d77..69d298aed 100644
--- a/interface/src/api/client.ts
+++ b/interface/src/api/client.ts
@@ -779,12 +779,14 @@ export interface RegistrySkill {
 	skillId: string;
 	name: string;
 	installs: number;
+	description?: string;
 	id?: string;
 }
 
 export interface RegistryBrowseResponse {
 	skills: RegistrySkill[];
 	has_more: boolean;
+	total?: number;
 }
 
 export interface RegistrySearchResponse {
diff --git a/interface/src/components/Markdown.tsx b/interface/src/components/Markdown.tsx
index 81bbf057e..b903aa96b 100644
--- a/interface/src/components/Markdown.tsx
+++ b/interface/src/components/Markdown.tsx
@@ -1,9 +1,15 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-export function Markdown({ children }: { children: string }) {
+export function Markdown({
+	children,
+	className,
+}: {
+	children: string;
+	className?: string;
+}) {
 	return (
-		<div className="markdown">
+		<div className={className ? `markdown ${className}` : "markdown"}>
 			<ReactMarkdown
 				remarkPlugins={[remarkGfm]}
 				components={{
diff --git a/interface/src/hooks/useChannelLiveState.ts b/interface/src/hooks/useChannelLiveState.ts
index b9aa8992c..7f35c3073 100644
--- a/interface/src/hooks/useChannelLiveState.ts
+++ b/interface/src/hooks/useChannelLiveState.ts
@@ -58,6 +58,10 @@ function itemTimestamp(item: TimelineItem): string {
 	}
 }
 
+function itemKey(item: TimelineItem): string {
+	return `${item.type}:${item.id}`;
+}
+
 /**
  * Manages all live channel state from SSE events, message history loading,
  * and status snapshot fetching. Returns the state map and SSE event handlers.
@@ -579,12 +583,15 @@ export function useChannelLiveState(channels: ChannelInfo[]) {
 					setLiveStates((current) => {
 						const existing = current[channelId];
 						if (!existing) return current;
+						const existingKeys = new Set(existing.timeline.map(itemKey));
+						const olderItems = data.items.filter((item) => !existingKeys.has(itemKey(item)));
+						const hasMore = olderItems.length === 0 ? false : data.has_more;
 						return {
 							...current,
 							[channelId]: {
 								...existing,
-								timeline: [...data.items, ...existing.timeline],
-								hasMore: data.has_more,
+								timeline: [...olderItems, ...existing.timeline],
+								hasMore,
 								loadingMore: false,
 							},
 						};
diff --git a/interface/src/routes/AgentDetail.tsx b/interface/src/routes/AgentDetail.tsx
index 4ed6f6cda..97528a299 100644
--- a/interface/src/routes/AgentDetail.tsx
+++ b/interface/src/routes/AgentDetail.tsx
@@ -144,35 +144,51 @@ export function AgentDetail({ agentId, liveStates }: AgentDetailProps) {
 						{/* Memory Donut */}
 						<div className="rounded-xl bg-app-darkBox p-5">
 							<div className="mb-4 flex items-center justify-between">
-								<h3 className="font-plex text-sm font-medium text-ink-dull">Memory Types</h3>
-								<span className="text-2xl font-medium tabular-nums text-ink">{overviewData.memory_total}</span>
+								<h3 className="font-plex text-sm font-medium text-ink-dull">Memory</h3>
+								<Link
+									to="/agents/$agentId/memories"
+									params={{ agentId }}
+									className="text-tiny text-accent hover:text-accent/80"
+								>
+									Edit
+								</Link>
 							</div>
 							<MemoryDonut counts={overviewData.memory_counts} />
 						</div>
 
 						{/* Model Routing */}
 						{configData && (
-							<div className="rounded-xl bg-app-darkBox p-5">
+							<div className="flex h-full flex-col rounded-xl bg-app-darkBox p-5">
 								<div className="mb-4 flex items-center justify-between">
 									<h3 className="font-plex text-sm font-medium text-ink-dull">Model Routing</h3>
 									<Link
 										to="/agents/$agentId/config"
 										params={{ agentId }}
+										search={{ tab: "routing" }}
 										className="text-tiny text-accent hover:text-accent/80"
 									>
 										Edit
 									</Link>
 								</div>
-								<ModelRoutingList config={configData} />
+								<div className="flex-1">
+									<ModelRoutingList config={configData} />
+								</div>
 							</div>
 						)}
 
 						{/* Quick Stats */}
-						<div className="rounded-xl bg-app-darkBox p-5">
-							<div className="mb-4">
+						<div className="flex h-full flex-col rounded-xl bg-app-darkBox p-5">
+							<div className="mb-4 flex items-center justify-between">
 								<h3 className="font-plex text-sm font-medium text-ink-dull">Configuration</h3>
+								<Link
+									to="/agents/$agentId/config"
+									params={{ agentId }}
+									className="text-tiny text-accent hover:text-accent/80"
+								>
+									Edit
+								</Link>
 							</div>
-							<div className="flex flex-col gap-3">
+							<div className="flex flex-1 flex-col justify-evenly gap-2">
 								<StatRow label="Context Window" value={agent.context_window.toLocaleString()} />
 								<StatRow label="Max Turns" value={String(agent.max_turns)} />
 								<StatRow label="Max Branches" value={String(agent.max_concurrent_branches)} />
@@ -470,8 +486,8 @@ function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: n
 
 	const maxCount = Math.max(...data.map((d) => d.count), 1);
 	const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+	const hours = Array.from({ length: 24 }, (_value, index) => index);
 
-	// Create a 7x24 grid
 	const getCell = (day: number, hour: number) => {
 		const cell = data.find((d) => d.day === day && d.hour === hour);
 		return cell?.count ?? 0;
@@ -483,34 +499,30 @@ function ActivityHeatmap({ data }: { data: { day: number; hour: number; count: n
 	};
 
 	return (
-		<div className="h-48 overflow-auto">
-			<div className="flex flex-col gap-1">
-				{/* Hour labels */}
-				<div className="flex gap-1">
-					<div className="w-8 flex-shrink-0" /> {/* Day label spacer */}
-					{Array.from({ length: 24 }, (_, h) => (
-						<div key={h} className="w-4 flex-shrink-0 text-center text-[10px] text-ink-faint">
-							{h % 6 === 0 ? h : ""}
+		<div className="h-48">
+			<div className="grid h-full grid-rows-[auto_repeat(7,minmax(0,1fr))] gap-y-1">
+				<div className="grid grid-cols-[2rem_repeat(24,minmax(0,1fr))] gap-1">
+					<div />
+					{hours.map((hour) => (
+						<div key={hour} className="text-center text-[10px] text-ink-faint">
+							{hour % 6 === 0 ? hour : ""}
 						</div>
 					))}
 				</div>
-				{/* Heatmap grid */}
 				{days.map((dayLabel, day) => (
-					<div key={day} className="flex items-center gap-1">
-						<div className="w-8 flex-shrink-0 text-[10px] text-ink-faint">{dayLabel}</div>
-						<div className="flex gap-1">
-							{Array.from({ length: 24 }, (_, hour) => {
-								const count = getCell(day, hour);
-								return (
-									<div
-										key={hour}
-										title={`${dayLabel} ${hour}:00 - ${count} messages`}
-										className="h-4 w-4 flex-shrink-0 rounded-sm bg-accent transition-opacity hover:ring-1 hover:ring-accent"
-										style={{ opacity: getOpacity(count) }}
-									/>
-								);
-							})}
-						</div>
+					<div key={day} className="grid grid-cols-[2rem_repeat(24,minmax(0,1fr))] items-center gap-1">
+						<div className="text-[10px] text-ink-faint">{dayLabel}</div>
+						{hours.map((hour) => {
+							const count = getCell(day, hour);
+							return (
+								<div
+									key={hour}
+									title={`${dayLabel} ${hour}:00 - ${count} messages`}
+									className="h-3.5 w-full rounded-sm bg-accent transition-opacity hover:ring-1 hover:ring-accent"
+									style={{ opacity: getOpacity(count) }}
+								/>
+							);
+						})}
 					</div>
 				))}
 			</div>
@@ -524,14 +536,15 @@ function MemoryDonut({ counts }: { counts: Record<string, number> }) {
 		value: counts[type] ?? 0,
 		color: MEMORY_TYPE_COLORS[idx % MEMORY_TYPE_COLORS.length],
 	})).filter((d) => d.value > 0);
+	const total = data.reduce((sum, item) => sum + item.value, 0);
 
 	if (data.length === 0) {
 		return <div className="h-48 flex items-center justify-center text-ink-faint text-sm">No memories</div>;
 	}
 
 	return (
-		<div>
-			<div className="h-40">
+			<div>
+			<div className="relative h-40">
 				<ResponsiveContainer width="100%" height="100%">
 					<PieChart>
 						<Pie
@@ -555,11 +568,18 @@ function MemoryDonut({ counts }: { counts: Record<string, number> }) {
 								border: `1px solid ${CHART_COLORS.tooltip.border}`,
 								borderRadius: "6px",
 								fontSize: "12px",
+								padding: "4px 6px",
 							}}
-							itemStyle={{ color: CHART_COLORS.tooltip.text }}
+							wrapperStyle={{ zIndex: 20 }}
+							labelStyle={{ display: "none" }}
+							itemStyle={{ color: CHART_COLORS.tooltip.text, margin: 0, lineHeight: 1.2 }}
 						/>
 					</PieChart>
 				</ResponsiveContainer>
+				<div className="pointer-events-none absolute inset-0 z-0 flex flex-col items-center justify-center">
+					<span className="text-2xl font-medium tabular-nums text-ink">{total}</span>
+					<span className="text-tiny text-ink-faint">total</span>
+				</div>
 			</div>
 			<div className="mt-2 flex flex-wrap justify-center gap-2">
 				{data.map((item) => (
@@ -586,7 +606,7 @@ function ModelRoutingList({ config }: { config: { routing: { channel: string; br
 	];
 
 	return (
-		<div className="flex flex-col gap-2">
+		<div className="flex h-full flex-col justify-evenly gap-2">
 			{models.map(({ label, model, color }) => (
 				<div key={label} className="flex items-center justify-between">
 					<span className="text-tiny text-ink-faint">{label}</span>
@@ -628,29 +648,32 @@ function IdentitySection({
 	if (!hasContent) return null;
 
 	const files = [
-		{ label: "SOUL.md", content: identity.soul },
-		{ label: "IDENTITY.md", content: identity.identity },
-		{ label: "USER.md", content: identity.user },
+		{ label: "SOUL.md", tab: "soul", content: identity.soul },
+		{ label: "IDENTITY.md", tab: "identity", content: identity.identity },
+		{ label: "USER.md", tab: "user", content: identity.user },
 	].filter((f) => f.content && f.content.trim().length > 0 && !f.content.startsWith("<!--"));
 
 	if (files.length === 0) return null;
 
 	return (
 		<section className="mt-6">
-			<div className="mb-3 flex items-center justify-between">
+			<div className="mb-3">
 				<h3 className="font-plex text-sm font-medium text-ink-dull">Identity</h3>
-				<Link
-					to="/agents/$agentId/config"
-					params={{ agentId }}
-					className="text-tiny text-accent hover:text-accent/80"
-				>
-					Edit
-				</Link>
 			</div>
 			<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-				{files.map(({ label, content }) => (
+				{files.map(({ label, tab, content }) => (
 					<div key={label} className="rounded-xl bg-app-darkBox p-4">
-						<span className="text-tiny font-medium text-ink-faint">{label}</span>
+						<div className="flex items-center justify-between gap-3">
+							<span className="text-tiny font-medium text-ink-faint">{label}</span>
+							<Link
+								to="/agents/$agentId/config"
+								params={{ agentId }}
+								search={{ tab }}
+								className="text-tiny text-accent hover:text-accent/80"
+							>
+								Edit
+							</Link>
+						</div>
 						<p className="mt-2 line-clamp-4 whitespace-pre-wrap text-sm leading-relaxed text-ink-dull">
 							{content!.trim()}
 						</p>
diff --git a/interface/src/routes/AgentSkills.tsx b/interface/src/routes/AgentSkills.tsx
index f41c1b3ae..e636f2834 100644
--- a/interface/src/routes/AgentSkills.tsx
+++ b/interface/src/routes/AgentSkills.tsx
@@ -53,34 +53,34 @@ function InstalledSkill({
 }) {
 	return (
 		<div className="flex flex-col rounded-lg border border-app-line bg-app-box p-4 transition-colors hover:border-app-line-hover">
-			<div className="flex items-start justify-between gap-3">
-				<div className="flex-1">
-					<div className="flex items-center gap-2">
-						<h3 className="font-plex text-sm font-medium text-ink">
+			<div className="flex items-center justify-between gap-3">
+				<div className="min-w-0 flex-1">
+					<div className="flex min-w-0 items-center gap-2">
+						<h3 className="truncate font-plex text-sm font-medium text-ink">
 							{skill.name}
 						</h3>
 						<Badge variant={skill.source === "instance" ? "accent" : "green"} size="sm">
 							{skill.source}
 						</Badge>
 					</div>
-					<p className="mt-2 text-xs text-ink-faint">
-						{skill.description || "No description provided"}
-					</p>
 				</div>
 				<Button
-					variant="ghost"
-					size="sm"
+					variant="outline"
+					size="icon"
 					onClick={onRemove}
 					disabled={isRemoving}
-					className="text-red-400 hover:text-red-300"
+					className="h-6 w-6 flex-shrink-0"
 				>
 					<FontAwesomeIcon
 						icon={isRemoving ? faSpinner : faTrash}
-						className={isRemoving ? "animate-spin" : ""}
+						className={clsx("text-[11px]", isRemoving && "animate-spin")}
 					/>
 				</Button>
 			</div>
-			<p className="mt-3 font-mono text-xs text-ink-dull">
+			<p className="mt-2 text-xs text-ink-faint">
+				{skill.description || "No description provided"}
+			</p>
+			<p className="mt-3 font-mono text-xs text-ink-dull break-all">
 				{skill.base_dir}
 			</p>
 		</div>
@@ -91,12 +91,16 @@ function RegistrySkillCard({
 	skill,
 	isInstalled,
 	onInstall,
+	onRemove,
 	isInstalling,
+	isRemoving,
 }: {
 	skill: RegistrySkill;
 	isInstalled: boolean;
 	onInstall: () => void;
+	onRemove: () => void;
 	isInstalling: boolean;
+	isRemoving: boolean;
 }) {
 	return (
 		<div className="flex flex-col rounded-lg border border-app-line bg-app-box p-4 transition-colors hover:border-app-line-hover">
@@ -104,28 +108,47 @@ function RegistrySkillCard({
 				<h3 className="truncate font-plex text-sm font-medium text-ink">
 					{skill.name}
 				</h3>
-				{isInstalled && (
-					<FontAwesomeIcon
-						icon={faCheckCircle}
-						className="shrink-0 text-xs text-green-400"
-					/>
-				)}
 			</div>
 			<p className="mt-1 font-mono text-[11px] text-ink-dull/60">{skill.source}</p>
+			<p className="mt-2 flex-1 text-xs text-ink-faint">
+				{skill.description || "No description provided"}
+			</p>
 			<div className="mt-auto flex items-center justify-between gap-2 pt-3">
 				<span className="text-xs text-ink-faint">
 					{formatInstalls(skill.installs)} installs
 				</span>
 				<Button
-					variant={isInstalled ? "ghost" : "outline"}
+					variant="outline"
 					size="icon"
-					onClick={onInstall}
-					disabled={isInstalling || isInstalled}
+					onClick={() => {
+						if (isInstalled) {
+							onRemove();
+						} else {
+							onInstall();
+						}
+					}}
+					disabled={isInstalling || isRemoving}
+					className={clsx(
+						"group h-6 w-6 p-0",
+					)}
+					title={isInstalled ? "Remove installed skill" : "Install skill"}
 				>
-					<FontAwesomeIcon
-						icon={isInstalling ? faSpinner : faDownload}
-						className={clsx("text-xs", isInstalling && "animate-spin")}
-					/>
+					{isInstalling || isRemoving ? (
+						<FontAwesomeIcon icon={faSpinner} className="animate-spin text-xs" />
+					) : isInstalled ? (
+						<span className="relative flex h-3.5 w-3.5 items-center justify-center text-xs">
+							<FontAwesomeIcon
+								icon={faCheckCircle}
+								className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-150 ease-out group-hover:scale-75 group-hover:opacity-0"
+							/>
+							<FontAwesomeIcon
+								icon={faTrash}
+								className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-all duration-150 ease-out group-hover:scale-100 group-hover:opacity-100"
+							/>
+						</span>
+					) : (
+						<FontAwesomeIcon icon={faDownload} className="text-xs" />
+					)}
 				</Button>
 			</div>
 		</div>
@@ -231,7 +254,9 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 	});
 
 	const installedSkills = skillsData?.skills ?? [];
-	const installedNames = new Set(installedSkills.map((s) => s.name.toLowerCase()));
+	const installedSkillNames = new Map(
+		installedSkills.map((skill) => [skill.name.toLowerCase(), skill.name]),
+	);
 
 	// Flatten browse pages or use search results
 	const registrySkills: RegistrySkill[] = debouncedSearch
@@ -239,6 +264,7 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 		: (browseData?.pages.flatMap((p) => p.skills) ?? []);
 
 	const isRegistryLoading = debouncedSearch ? isSearching : isBrowseLoading;
+	const totalRegistrySkills = browseData?.pages[0]?.total;
 
 	return (
 		<div className="flex h-full flex-col">
@@ -324,19 +350,81 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 				<div className="p-6">
 					{activeTab === "browse" && (
 						<div className="space-y-4">
+							<div className="rounded-lg border border-app-line bg-app-box p-6">
+								<h3 className="text-sm font-medium text-ink">
+									Install from GitHub
+								</h3>
+								<p className="mt-1 text-xs text-ink-faint">
+									Install any skill from a GitHub repository
+								</p>
+								<form
+									onSubmit={(e) => {
+										e.preventDefault();
+										const formData = new FormData(e.currentTarget);
+										const spec = formData.get("spec") as string;
+										if (spec) {
+											installMutation.mutate(spec);
+											e.currentTarget.reset();
+										}
+									}}
+									className="mt-3 flex gap-2"
+								>
+									<input
+										type="text"
+										name="spec"
+										placeholder="owner/repo or owner/repo/skill-name"
+										className="flex-1 rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
+									/>
+									<Button
+										type="submit"
+										variant="default"
+										size="default"
+										disabled={installMutation.isPending}
+									>
+										{installMutation.isPending ? (
+											<>
+												<FontAwesomeIcon
+													icon={faSpinner}
+													className="animate-spin"
+												/>
+												Installing...
+											</>
+										) : (
+											<>
+												<FontAwesomeIcon icon={faDownload} />
+												Install
+											</>
+										)}
+									</Button>
+								</form>
+								{installMutation.isError && (
+									<p className="mt-2 text-xs text-red-400">
+										Failed to install skill. Check the repository format.
+									</p>
+								)}
+								{installMutation.isSuccess && (
+									<p className="mt-2 text-xs text-green-400">
+										Installed {installMutation.data.installed.length} skill(s):{" "}
+										{installMutation.data.installed.join(", ")}
+									</p>
+								)}
+							</div>
+
 							<div className="flex items-center justify-between">
 								<h2 className="text-sm font-medium text-ink-dull">
 									{debouncedSearch
 										? `Results for "${debouncedSearch}"`
 										: `${VIEWS.find((v) => v.key === registryView)?.label ?? ""} Skills`}
 								</h2>
-								<span className="text-xs text-ink-faint">
-									{debouncedSearch && searchData
-										? `${searchData.count} results`
+							<span className="text-xs text-ink-faint">
+								{debouncedSearch && searchData
+									? `${searchData.count} results`
+									: totalRegistrySkills != null
+										? `${totalRegistrySkills} skills`
 										: registrySkills.length > 0
 											? `${registrySkills.length} skills`
 											: ""}
-								</span>
+							</span>
 							</div>
 
 							{isRegistryLoading && registrySkills.length === 0 && (
@@ -362,9 +450,8 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 							<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 								{registrySkills.map((skill) => {
 									const spec = installSpec(skill);
-									const isInstalled = installedNames.has(
-										skill.name.toLowerCase(),
-									);
+									const installedName = installedSkillNames.get(skill.name.toLowerCase());
+									const isInstalled = Boolean(installedName);
 									return (
 										<RegistrySkillCard
 											key={`${skill.source}/${skill.skillId}`}
@@ -373,10 +460,19 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 											onInstall={() =>
 												installMutation.mutate(spec)
 											}
+											onRemove={() => {
+												if (installedName) {
+													removeMutation.mutate(installedName);
+												}
+											}}
 											isInstalling={
 												installMutation.isPending &&
 												installMutation.variables === spec
 											}
+											isRemoving={
+												removeMutation.isPending &&
+												removeMutation.variables === installedName
+											}
 										/>
 									);
 								})}
@@ -394,65 +490,6 @@ export function AgentSkills({ agentId }: AgentSkillsProps) {
 								</div>
 							)}
 
-							<div className="mt-8 rounded-lg border border-app-line bg-app-box p-6">
-								<h3 className="text-sm font-medium text-ink">
-									Install from GitHub
-								</h3>
-								<p className="mt-1 text-xs text-ink-faint">
-									Install any skill from a GitHub repository
-								</p>
-								<form
-									onSubmit={(e) => {
-										e.preventDefault();
-										const formData = new FormData(e.currentTarget);
-										const spec = formData.get("spec") as string;
-										if (spec) {
-											installMutation.mutate(spec);
-											e.currentTarget.reset();
-										}
-									}}
-									className="mt-3 flex gap-2"
-								>
-									<input
-										type="text"
-										name="spec"
-										placeholder="owner/repo or owner/repo/skill-name"
-										className="flex-1 rounded-md border border-app-line bg-app-darkBox px-3 py-2 text-sm text-ink placeholder-ink-faint focus:border-accent focus:outline-none"
-									/>
-									<Button
-										type="submit"
-										variant="default"
-										size="default"
-										disabled={installMutation.isPending}
-									>
-										{installMutation.isPending ? (
-											<>
-												<FontAwesomeIcon
-													icon={faSpinner}
-													className="animate-spin"
-												/>
-												Installing...
-											</>
-										) : (
-											<>
-												<FontAwesomeIcon icon={faDownload} />
-												Install
-											</>
-										)}
-									</Button>
-								</form>
-								{installMutation.isError && (
-									<p className="mt-2 text-xs text-red-400">
-										Failed to install skill. Check the repository format.
-									</p>
-								)}
-								{installMutation.isSuccess && (
-									<p className="mt-2 text-xs text-green-400">
-										Installed {installMutation.data.installed.length} skill(s):{" "}
-										{installMutation.data.installed.join(", ")}
-									</p>
-								)}
-							</div>
 						</div>
 					)}
 
diff --git a/interface/src/routes/ChannelDetail.tsx b/interface/src/routes/ChannelDetail.tsx
index 40c06523c..9c263b23d 100644
--- a/interface/src/routes/ChannelDetail.tsx
+++ b/interface/src/routes/ChannelDetail.tsx
@@ -49,10 +49,10 @@ function LiveBranchRunItem({ item, live, channelId }: { item: TimelineBranchRun;
 			</span>
 			<div className="min-w-0 flex-1">
 				<div className="rounded-md bg-violet-500/10 px-3 py-2">
-					<div className="flex items-center gap-2">
+					<div className="flex min-w-0 items-center gap-2">
 						<div className="h-2 w-2 animate-pulse rounded-full bg-violet-400" />
 						<span className="text-sm font-medium text-violet-300">Branch</span>
-						<span className="truncate text-sm text-ink-dull">{item.description}</span>
+						<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">{item.description}</span>
 						<CancelButton onClick={() => { api.cancelProcess(channelId, "branch", item.id).catch(console.warn); }} />
 					</div>
 					<div className="mt-1 flex items-center gap-3 pl-4 text-tiny text-ink-faint">
@@ -78,10 +78,10 @@ function LiveWorkerRunItem({ item, live, channelId }: { item: TimelineWorkerRun;
 			</span>
 			<div className="min-w-0 flex-1">
 				<div className="rounded-md bg-amber-500/10 px-3 py-2">
-					<div className="flex items-center gap-2">
+					<div className="flex min-w-0 items-center gap-2">
 						<div className="h-2 w-2 animate-pulse rounded-full bg-amber-400" />
 						<span className="text-sm font-medium text-amber-300">Worker</span>
-						<span className="truncate text-sm text-ink-dull">{item.task}</span>
+						<span className="min-w-0 flex-1 truncate text-sm text-ink-dull">{item.task}</span>
 						<CancelButton onClick={() => { api.cancelProcess(channelId, "worker", item.id).catch(console.warn); }} />
 					</div>
 					<div className="mt-1 flex items-center gap-3 pl-4 text-tiny text-ink-faint">
@@ -114,12 +114,18 @@ function BranchRunItem({ item }: { item: TimelineBranchRun }) {
 					variant="ghost"
 					className="h-auto w-full justify-start rounded-md bg-violet-500/10 px-3 py-2 text-left hover:bg-violet-500/15"
 				>
-					<div className="flex items-center gap-2">
-						<div className="h-2 w-2 rounded-full bg-violet-400/50" />
-						<span className="text-sm font-medium text-violet-300">Branch</span>
-						<span className="truncate text-sm text-ink-dull">{item.description}</span>
+					<div className="flex min-w-0 items-start gap-2">
+						<span className="inline-flex flex-shrink-0 items-center gap-2 self-start">
+							<span className="h-2 w-2 rounded-full bg-violet-400/50" />
+							<span className="text-sm font-medium text-violet-300">Branch</span>
+						</span>
+						<span className={`min-w-0 flex-1 text-sm text-ink-dull ${
+							expanded ? "whitespace-normal break-words" : "truncate"
+						}`}>
+							{item.description}
+						</span>
 						{item.conclusion && (
-							<span className="ml-auto text-tiny text-ink-faint">
+							<span className="flex-shrink-0 self-start text-tiny leading-5 text-ink-faint">
 								{expanded ? "▾" : "▸"}
 							</span>
 						)}
@@ -128,7 +134,7 @@ function BranchRunItem({ item }: { item: TimelineBranchRun }) {
 				{expanded && item.conclusion && (
 					<div className="mt-1 rounded-md border border-violet-500/10 bg-violet-500/5 px-3 py-2">
 						<div className="text-sm text-ink-dull">
-							<Markdown>{item.conclusion}</Markdown>
+							<Markdown className="whitespace-pre-wrap break-words">{item.conclusion}</Markdown>
 						</div>
 					</div>
 				)}
@@ -152,12 +158,18 @@ function WorkerRunItem({ item }: { item: TimelineWorkerRun }) {
 					variant="ghost"
 					className="h-auto w-full justify-start rounded-md bg-amber-500/10 px-3 py-2 text-left hover:bg-amber-500/15"
 				>
-					<div className="flex items-center gap-2">
-						<div className="h-2 w-2 rounded-full bg-amber-400/50" />
-						<span className="text-sm font-medium text-amber-300">Worker</span>
-						<span className="truncate text-sm text-ink-dull">{item.task}</span>
+					<div className="flex min-w-0 items-start gap-2">
+						<span className="inline-flex flex-shrink-0 items-center gap-2 self-start">
+							<span className="h-2 w-2 rounded-full bg-amber-400/50" />
+							<span className="text-sm font-medium text-amber-300">Worker</span>
+						</span>
+						<span className={`min-w-0 flex-1 text-sm text-ink-dull ${
+							expanded ? "whitespace-normal break-words" : "truncate"
+						}`}>
+							{item.task}
+						</span>
 						{item.result && (
-							<span className="ml-auto text-tiny text-ink-faint">
+							<span className="flex-shrink-0 self-start text-tiny leading-5 text-ink-faint">
 								{expanded ? "▾" : "▸"}
 							</span>
 						)}
@@ -166,7 +178,7 @@ function WorkerRunItem({ item }: { item: TimelineWorkerRun }) {
 				{expanded && item.result && (
 					<div className="mt-1 rounded-md border border-amber-500/10 bg-amber-500/5 px-3 py-2">
 						<div className="text-sm text-ink-dull">
-							<Markdown>{item.result}</Markdown>
+							<Markdown className="whitespace-pre-wrap break-words">{item.result}</Markdown>
 						</div>
 					</div>
 				)}
@@ -231,10 +243,20 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const sentinelRef = useRef<HTMLDivElement>(null);
+	const lastLoadMoreAtRef = useRef(0);
 
 	// Trigger load when the sentinel at the top of the timeline becomes visible
 	const handleIntersection = useCallback((entries: IntersectionObserverEntry[]) => {
-		if (entries[0]?.isIntersecting && hasMore && !loadingMore) {
+		const entry = entries[0];
+		if (!entry?.isIntersecting) {
+			return;
+		}
+		const now = Date.now();
+		if (now - lastLoadMoreAtRef.current < 800) {
+			return;
+		}
+		if (hasMore && !loadingMore) {
+			lastLoadMoreAtRef.current = now;
 			onLoadMore();
 		}
 	}, [hasMore, loadingMore, onLoadMore]);
@@ -303,15 +325,17 @@ export function ChannelDetail({ agentId, channelId, channel, liveState, onLoadMo
 								<span className="ml-1 text-tiny text-ink-faint">typing</span>
 							</div>
 						)}
-					<Button
-						onClick={() => setCortexOpen(!cortexOpen)}
-						variant={cortexOpen ? "secondary" : "ghost"}
-						size="icon"
-						className={`h-8 w-8 ${cortexOpen ? "bg-violet-500/20 text-violet-400" : ""}`}
-						title="Toggle cortex chat"
-					>
-						<HugeiconsIcon icon={IdeaIcon} className="h-4 w-4" />
-					</Button>
+					<div className="flex overflow-hidden rounded-md border border-app-line bg-app-darkBox">
+						<Button
+							onClick={() => setCortexOpen(!cortexOpen)}
+							variant={cortexOpen ? "secondary" : "ghost"}
+							size="icon"
+							className={cortexOpen ? "bg-app-selected text-ink" : ""}
+							title="Toggle cortex chat"
+						>
+							<HugeiconsIcon icon={IdeaIcon} className="h-4 w-4" />
+						</Button>
+					</div>
 					</div>
 				</div>
 
diff --git a/src/api/server.rs b/src/api/server.rs
index 39dcc9d64..17c82d48f 100644
--- a/src/api/server.rs
+++ b/src/api/server.rs
@@ -7,7 +7,7 @@ use super::{
 };
 
 use axum::Json;
-use axum::extract::Request;
+use axum::extract::{Request, State};
 use axum::Router;
 use axum::http::{StatusCode, Uri, header};
 use axum::middleware::{self, Next};
@@ -177,7 +177,11 @@ pub async fn start_http_server(
     Ok(handle)
 }
 
-async fn api_auth_middleware(state: Arc<ApiState>, request: Request, next: Next) -> Response {
+async fn api_auth_middleware(
+    State(state): State<Arc<ApiState>>,
+    request: Request,
+    next: Next,
+) -> Response {
     let Some(expected_token) = state.auth_token.as_deref() else {
         return next.run(request).await;
     };
diff --git a/src/api/skills.rs b/src/api/skills.rs
index ccad77f22..7b0dc41ba 100644
--- a/src/api/skills.rs
+++ b/src/api/skills.rs
@@ -4,7 +4,13 @@ use axum::Json;
 use axum::extract::{Query, State};
 use axum::http::StatusCode;
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use std::sync::LazyLock;
 use std::sync::Arc;
+use std::time::Duration;
+
+static REGISTRY_SKILL_DESCRIPTION_CACHE: LazyLock<tokio::sync::RwLock<HashMap<String, String>>> =
+    LazyLock::new(|| tokio::sync::RwLock::new(HashMap::new()));
 
 #[derive(Serialize)]
 pub(super) struct SkillInfo {
@@ -52,6 +58,9 @@ pub(super) struct RegistrySkill {
     skill_id: String,
     name: String,
     installs: u64,
+    #[serde(default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    description: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     id: Option<String>,
 }
@@ -60,6 +69,8 @@ pub(super) struct RegistrySkill {
 pub(super) struct RegistryBrowseResponse {
     skills: Vec<RegistrySkill>,
     has_more: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    total: Option<u64>,
 }
 
 #[derive(Serialize)]
@@ -233,6 +244,8 @@ pub(super) async fn registry_browse(
         #[serde(default)]
         #[serde(rename = "hasMore")]
         has_more: bool,
+        #[serde(default)]
+        total: Option<u64>,
     }
 
     let body: UpstreamResponse = response.json().await.map_err(|error| {
@@ -240,9 +253,13 @@ pub(super) async fn registry_browse(
         StatusCode::BAD_GATEWAY
     })?;
 
+    let mut skills = body.skills;
+    enrich_registry_descriptions(&client, &mut skills).await;
+
     Ok(Json(RegistryBrowseResponse {
-        skills: body.skills,
+        skills,
         has_more: body.has_more,
+        total: body.total,
     }))
 }
 
@@ -286,9 +303,221 @@ pub(super) async fn registry_search(
         StatusCode::BAD_GATEWAY
     })?;
 
+    let mut skills = body.skills;
+    enrich_registry_descriptions(&client, &mut skills).await;
+
     Ok(Json(RegistrySearchResponse {
-        skills: body.skills,
+        skills,
         query: body.query,
         count: body.count,
     }))
 }
+
+async fn enrich_registry_descriptions(client: &reqwest::Client, skills: &mut [RegistrySkill]) {
+    let mut join_set = tokio::task::JoinSet::new();
+
+    for index in 0..skills.len() {
+        if skills[index]
+            .description
+            .as_ref()
+            .is_some_and(|description| !description.trim().is_empty())
+        {
+            continue;
+        }
+
+        let source = skills[index].source.clone();
+        let skill_id = skills[index].skill_id.clone();
+        let cache_key = registry_skill_key(&source, &skill_id);
+
+        let cached = {
+            let cache = REGISTRY_SKILL_DESCRIPTION_CACHE.read().await;
+            cache.get(&cache_key).cloned()
+        };
+
+        if let Some(description) = cached {
+            skills[index].description = Some(description);
+            continue;
+        }
+
+        let client = client.clone();
+        join_set.spawn(async move {
+            let description = fetch_registry_skill_description(&client, &source, &skill_id).await;
+            (index, cache_key, description)
+        });
+    }
+
+    while let Some(result) = join_set.join_next().await {
+        let Ok((index, cache_key, description)) = result else {
+            continue;
+        };
+        let Some(description) = description else {
+            continue;
+        };
+
+        if let Some(skill) = skills.get_mut(index) {
+            skill.description = Some(description.clone());
+        }
+
+        let mut cache = REGISTRY_SKILL_DESCRIPTION_CACHE.write().await;
+        cache.insert(cache_key, description);
+    }
+}
+
+fn registry_skill_key(source: &str, skill_id: &str) -> String {
+    format!("{source}/{skill_id}")
+}
+
+async fn fetch_registry_skill_description(
+    client: &reqwest::Client,
+    source: &str,
+    skill_id: &str,
+) -> Option<String> {
+    let repo_name = source.split('/').next_back().unwrap_or_default();
+
+    let mut candidate_paths = if repo_name == skill_id {
+        vec![
+            "SKILL.md".to_string(),
+            format!("{skill_id}/SKILL.md"),
+            format!("skills/{skill_id}/SKILL.md"),
+            format!(".claude/skills/{skill_id}/SKILL.md"),
+        ]
+    } else {
+        vec![
+            format!("{skill_id}/SKILL.md"),
+            format!("skills/{skill_id}/SKILL.md"),
+            format!(".claude/skills/{skill_id}/SKILL.md"),
+            "SKILL.md".to_string(),
+        ]
+    };
+
+    for path in candidate_paths.drain(..) {
+        let url = format!("https://raw.githubusercontent.com/{source}/main/{path}");
+        let response = match client
+            .get(&url)
+            .header(reqwest::header::USER_AGENT, "spacebot-registry-client")
+            .timeout(Duration::from_secs(3))
+            .send()
+            .await
+        {
+            Ok(response) => response,
+            Err(_) => continue,
+        };
+
+        if !response.status().is_success() {
+            continue;
+        }
+
+        let markdown = match response.text().await {
+            Ok(markdown) => markdown,
+            Err(_) => continue,
+        };
+
+        if let Some(description) = extract_skill_description(&markdown) {
+            return Some(description);
+        }
+    }
+
+    None
+}
+
+fn extract_skill_description(markdown: &str) -> Option<String> {
+    let lines = strip_frontmatter(markdown)
+        .lines()
+        .map(str::to_string)
+        .collect::<Vec<_>>();
+
+    for (index, line) in lines.iter().enumerate() {
+        let heading = line.trim().to_ascii_lowercase();
+        if heading.starts_with('#') && heading.contains("description") {
+            if let Some(description) = extract_paragraph(&lines[(index + 1)..]) {
+                return Some(description);
+            }
+        }
+    }
+
+    extract_paragraph(&lines)
+}
+
+fn strip_frontmatter(markdown: &str) -> String {
+    let mut lines = markdown.lines();
+    let Some(first_line) = lines.next() else {
+        return String::new();
+    };
+
+    if first_line.trim() != "---" {
+        return markdown.to_string();
+    }
+
+    for line in lines.by_ref() {
+        if line.trim() == "---" {
+            break;
+        }
+    }
+
+    lines.collect::<Vec<_>>().join("\n")
+}
+
+fn extract_paragraph(lines: &[String]) -> Option<String> {
+    let mut in_code_block = false;
+    let mut paragraph_lines = Vec::new();
+
+    for line in lines {
+        let trimmed = line.trim();
+
+        if trimmed.starts_with("```") {
+            in_code_block = !in_code_block;
+            continue;
+        }
+        if in_code_block {
+            continue;
+        }
+
+        if trimmed.is_empty() {
+            if paragraph_lines.is_empty() {
+                continue;
+            }
+            break;
+        }
+
+        if trimmed.starts_with('#') || trimmed.starts_with("| ---") {
+            if paragraph_lines.is_empty() {
+                continue;
+            }
+            break;
+        }
+
+        let cleaned = cleaned_description_line(trimmed);
+        if cleaned.is_empty() {
+            continue;
+        }
+        paragraph_lines.push(cleaned);
+    }
+
+    if paragraph_lines.is_empty() {
+        return None;
+    }
+
+    let mut description = paragraph_lines.join(" ");
+    description = description
+        .split_whitespace()
+        .collect::<Vec<_>>()
+        .join(" ");
+
+    if description.is_empty() {
+        return None;
+    }
+
+    if description.chars().count() > 220 {
+        description = format!("{}...", description.chars().take(217).collect::<String>());
+    }
+
+    Some(description)
+}
+
+fn cleaned_description_line(line: &str) -> String {
+    line
+        .trim_start_matches("- ")
+        .trim_start_matches("* ")
+        .trim_start_matches("+ ")
+        .replace('`', "")
+}
diff --git a/src/conversation/history.rs b/src/conversation/history.rs
index dfdb2b83a..aa7540bab 100644
--- a/src/conversation/history.rs
+++ b/src/conversation/history.rs
@@ -339,7 +339,7 @@ impl ProcessRunLogger {
         before: Option<&str>,
     ) -> crate::error::Result<Vec<TimelineItem>> {
         let before_clause = if before.is_some() {
-            "AND timestamp < ?3"
+            "AND datetime(timestamp) < datetime(?3)"
         } else {
             ""
         };
diff --git a/src/tools/browser.rs b/src/tools/browser.rs
index e650a5ac3..c90551006 100644
--- a/src/tools/browser.rs
+++ b/src/tools/browser.rs
@@ -4,7 +4,6 @@
 //! via headless Chrome using chromiumoxide. Uses an accessibility-tree based
 //! ref system for LLM-friendly element addressing.
 
-use std::net::{IpAddr, Ipv4Addr, Ipv6Addr};
 use crate::config::BrowserConfig;
 
 use chromiumoxide::browser::{Browser, BrowserConfig as ChromeConfig};
@@ -17,11 +16,13 @@ use chromiumoxide_cdp::cdp::browser_protocol::input::{
 };
 use chromiumoxide_cdp::cdp::browser_protocol::page::CaptureScreenshotFormat;
 use futures::StreamExt as _;
+use reqwest::Url;
 use rig::completion::ToolDefinition;
 use rig::tool::Tool;
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
+use std::net::{IpAddr, Ipv4Addr, Ipv6Addr};
 use std::path::PathBuf;
 use std::sync::Arc;
 use tokio::sync::Mutex;
@@ -31,7 +32,7 @@ use tokio::task::JoinHandle;
 /// Blocks private/loopback IPs, link-local addresses, and cloud metadata endpoints
 /// to prevent server-side request forgery.
 fn validate_url(url: &str) -> Result<(), BrowserError> {
-    let parsed = url::Url::parse(url).map_err(|error| {
+    let parsed = Url::parse(url).map_err(|error| {
         BrowserError::new(format!("invalid URL '{url}': {error}"))
     })?;