Implement agent profile generation and API integration

- Added a new SQL migration for the agent profile table to store display name, status, bio, and avatar seed.
- Updated the API to include a new endpoint for retrieving agent profiles.
- Enhanced the agent summary structure to include the generated profile data.
- Implemented profile generation logic in the cortex, utilizing identity and memory context to create a personalized agent profile.
- Introduced new prompts for generating agent profiles based on context, improving the overall user experience.

Author: jamiepine

interface/src/api/client.ts

@@ -1,4 +1,4 @@
-const API_BASE = "/api";
+const API_BASE = ((window as any).__SPACEBOT_BASE_PATH || "") + "/api";
 
 export interface StatusResponse {
 	status: string;
@@ -226,6 +226,20 @@ export interface AgentOverviewResponse {
 	latest_bulletin: string | null;
 }
 
+export interface AgentProfile {
+	agent_id: string;
+	display_name: string | null;
+	status: string | null;
+	bio: string | null;
+	avatar_seed: string | null;
+	generated_at: string;
+	updated_at: string;
+}
+
+export interface AgentProfileResponse {
+	profile: AgentProfile | null;
+}
+
 export interface AgentSummary {
 	id: string;
 	channel_count: number;
@@ -234,6 +248,7 @@ export interface AgentSummary {
 	activity_sparkline: number[];
 	last_activity_at: string | null;
 	last_bulletin_at: string | null;
+	profile: AgentProfile | null;
 }
 
 export interface InstanceOverviewResponse {
@@ -894,6 +909,8 @@ export const api = {
 				channel_id: channelId ?? null,
 			}),
 		}),
+	agentProfile: (agentId: string) =>
+		fetchJson<AgentProfileResponse>(`/agents/profile?agent_id=${encodeURIComponent(agentId)}`),
 	agentIdentity: (agentId: string) =>
 		fetchJson<IdentityFiles>(`/agents/identity?agent_id=${encodeURIComponent(agentId)}`),
 	updateIdentity: async (request: IdentityUpdateRequest) => {

interface/src/router.tsx

@@ -275,7 +275,10 @@ const routeTree = rootRoute.addChildren([
 	channelRoute,
 ]);
 
-export const router = createRouter({routeTree});
+export const router = createRouter({
+	routeTree,
+	basepath: (window as any).__SPACEBOT_BASE_PATH || "/",
+});
 
 declare module "@tanstack/react-router" {
 	interface Register {

interface/src/routes/Overview.tsx

@@ -92,7 +92,7 @@ export function Overview({ liveStates }: OverviewProps) {
 						{/* Agent Cards */}
 						<section>
 							<h2 className="mb-4 font-plex text-sm font-medium text-ink-dull">Agents</h2>
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+							<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
 								{agents.map((agent) => (
 									<AgentCard
 										key={agent.id}
@@ -209,6 +209,54 @@ function HeroSection({
 	);
 }
 
+/** Deterministic gradient from a seed string. Produces two HSL colors. */
+function seedGradient(seed: string): [string, string] {
+	let hash = 0;
+	for (let i = 0; i < seed.length; i++) {
+		hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+		hash |= 0;
+	}
+	const hue1 = ((hash >>> 0) % 360);
+	const hue2 = (hue1 + 40 + ((hash >>> 8) % 60)) % 360;
+	return [
+		`hsl(${hue1}, 70%, 55%)`,
+		`hsl(${hue2}, 60%, 45%)`,
+	];
+}
+
+function AgentAvatar({ seed, size = 64 }: { seed: string; size?: number }) {
+	const [c1, c2] = seedGradient(seed);
+	const gradientId = `avatar-${seed.replace(/[^a-z0-9]/gi, "")}`;
+	return (
+		<svg width={size} height={size} viewBox="0 0 64 64" className="flex-shrink-0 rounded-full">
+			<defs>
+				<linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
+					<stop offset="0%" stopColor={c1} />
+					<stop offset="100%" stopColor={c2} />
+				</linearGradient>
+			</defs>
+			<circle cx="32" cy="32" r="32" fill={`url(#${gradientId})`} />
+		</svg>
+	);
+}
+
+/** Gradient banner SVG that fills the card top. Uses the same seed as the avatar. */
+function BannerGradient({ seed }: { seed: string }) {
+	const [c1, c2] = seedGradient(seed);
+	const bannerId = `banner-${seed.replace(/[^a-z0-9]/gi, "")}`;
+	return (
+		<svg className="absolute inset-0 h-full w-full rounded-t-xl" preserveAspectRatio="none" viewBox="0 0 400 100">
+			<defs>
+				<linearGradient id={bannerId} x1="0%" y1="0%" x2="100%" y2="100%">
+					<stop offset="0%" stopColor={c1} stopOpacity={0.25} />
+					<stop offset="100%" stopColor={c2} stopOpacity={0.15} />
+				</linearGradient>
+			</defs>
+			<rect width="400" height="100" fill={`url(#${bannerId})`} />
+		</svg>
+	);
+}
+
 function AgentCard({
 	agent,
 	liveActivity,
@@ -217,72 +265,111 @@ function AgentCard({
 	liveActivity: { workers: number; branches: number; hasActivity: boolean };
 }) {
 	const isActive = liveActivity.hasActivity || (agent.last_activity_at && new Date(agent.last_activity_at).getTime() > Date.now() - 5 * 60 * 1000);
+	const profile = agent.profile;
+	const displayName = profile?.display_name ?? agent.id;
+	const avatarSeed = profile?.avatar_seed ?? agent.id;
 
 	return (
 		<Link
 			to="/agents/$agentId"
 			params={{ agentId: agent.id }}
-			className="group flex flex-col rounded-xl border border-app-line bg-app-darkBox p-5 transition-all hover:border-app-line/80 hover:bg-app-darkBox/80"
+			className="group flex flex-col rounded-xl border border-app-line bg-app-darkBox overflow-hidden transition-all hover:border-app-line/80 hover:bg-app-darkBox/80"
 		>
-			<div className="flex items-start justify-between">
-				<div className="flex items-center gap-2">
-					<div className={`h-2.5 w-2.5 rounded-full ${isActive ? "bg-green-500" : "bg-gray-500"}`} />
-					<h3 className="font-plex text-lg font-medium text-ink">{agent.id}</h3>
-				</div>
+			{/* Banner + Avatar */}
+			<div className="relative h-20">
+				<BannerGradient seed={avatarSeed} />
+				{/* Live activity badges — top right */}
+				{(liveActivity.workers > 0 || liveActivity.branches > 0) && (
+					<div className="absolute top-2.5 right-3 flex items-center gap-1.5 z-10">
+						{liveActivity.workers > 0 && (
+							<span className="flex items-center gap-1 rounded-full bg-amber-500/20 backdrop-blur-sm px-2 py-0.5 text-tiny text-amber-400">
+								<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" />
+								{liveActivity.workers}w
+							</span>
+						)}
+						{liveActivity.branches > 0 && (
+							<span className="flex items-center gap-1 rounded-full bg-violet-500/20 backdrop-blur-sm px-2 py-0.5 text-tiny text-violet-400">
+								<span className="h-1.5 w-1.5 animate-pulse rounded-full bg-violet-400" />
+								{liveActivity.branches}b
+							</span>
+						)}
+					</div>
+				)}
 			</div>
 
-			{/* Sparkline */}
-			<div className="mt-3 h-10">
-				<SparklineChart data={agent.activity_sparkline} />
+			{/* Avatar — overlapping the banner */}
+			<div className="relative px-5 -mt-8">
+				<div className="relative inline-block">
+					<div className="rounded-full border-[3px] border-app-darkBox">
+						<AgentAvatar seed={avatarSeed} size={64} />
+					</div>
+					<div
+						className={`absolute bottom-0.5 right-0.5 h-4 w-4 rounded-full border-[2.5px] border-app-darkBox ${
+							isActive ? "bg-green-500" : "bg-gray-500"
+						}`}
+					/>
+				</div>
 			</div>
 
-			{/* Stats row */}
-			<div className="mt-3 flex items-center gap-4 text-tiny">
-				<div className="flex items-center gap-1">
-					<span className="text-ink-faint">Channels</span>
-					<span className="font-medium text-ink-dull">{agent.channel_count}</span>
-				</div>
-				<div className="flex items-center gap-1">
-					<span className="text-ink-faint">Memories</span>
-					<span className="font-medium text-ink-dull">{agent.memory_total.toLocaleString()}</span>
-				</div>
-				<div className="flex items-center gap-1">
-					<span className="text-ink-faint">Cron</span>
-					<span className="font-medium text-ink-dull">{agent.cron_job_count}</span>
-				</div>
+			{/* Name + status */}
+			<div className="px-5 mt-2">
+				<h3 className="font-plex text-xl font-semibold text-ink truncate">
+					{displayName}
+				</h3>
+				{profile?.status ? (
+					<p className="mt-1 text-sm text-ink-dull italic">
+						{profile.status}
+					</p>
+				) : agent.last_activity_at ? (
+					<p className="mt-1 text-tiny text-ink-faint">
+						Active {formatTimeAgo(agent.last_activity_at)}
+					</p>
+				) : null}
 			</div>
 
-			{/* Live activity badges */}
-			{(liveActivity.workers > 0 || liveActivity.branches > 0) && (
-				<div className="mt-3 flex flex-wrap gap-1.5">
-					{liveActivity.workers > 0 && (
-						<span className="rounded-full bg-amber-500/10 px-2 py-0.5 text-tiny text-amber-400">
-							{liveActivity.workers}w
-						</span>
-					)}
-					{liveActivity.branches > 0 && (
-						<span className="rounded-full bg-violet-500/10 px-2 py-0.5 text-tiny text-violet-400">
-							{liveActivity.branches}b
-						</span>
-					)}
-				</div>
+			{/* Bio — full text, no truncation */}
+			{profile?.bio && (
+				<p className="px-5 mt-3 text-sm leading-relaxed text-ink-dull">
+					{profile.bio}
+				</p>
 			)}
 
-			{/* Footer */}
-			<div className="mt-3 flex items-center justify-between text-tiny">
-				{agent.last_activity_at ? (
-					<span className="text-ink-faint">Active {formatTimeAgo(agent.last_activity_at)}</span>
-				) : (
-					<span className="text-ink-faint">No activity</span>
+			{/* Spacer pushes footer down when bio is short */}
+			<div className="flex-1" />
+
+			{/* Sparkline */}
+			<div className="mx-5 mt-4 h-10">
+				<SparklineChart data={agent.activity_sparkline} />
+			</div>
+
+			{/* Stats footer */}
+			<div className="flex items-center gap-4 px-5 py-3.5 mt-3 border-t border-app-line/50 text-tiny">
+				<StatPill label="channels" value={agent.channel_count} />
+				<StatPill label="memories" value={agent.memory_total} />
+				{agent.cron_job_count > 0 && (
+					<StatPill label="cron" value={agent.cron_job_count} />
 				)}
 				{agent.last_bulletin_at && (
-					<span className="text-accent/70">Bulletin {formatTimeAgo(agent.last_bulletin_at)}</span>
+					<span className="ml-auto text-accent/60">
+						Bulletin {formatTimeAgo(agent.last_bulletin_at)}
+					</span>
 				)}
 			</div>
 		</Link>
 	);
 }
 
+function StatPill({ label, value }: { label: string; value: number }) {
+	return (
+		<span className="text-ink-faint">
+			<span className="font-medium tabular-nums text-ink-dull">
+				{value >= 1000 ? `${(value / 1000).toFixed(1)}k` : value}
+			</span>
+			{" "}{label}
+		</span>
+	);
+}
+
 const CHART_COLORS = {
 	accent: "#6366f1",
 	accentBg: "#1e1b4b",

migrations/20260216000001_agent_profile.sql

@@ -0,0 +1,11 @@
+-- Agent profile: cortex-generated personality data displayed on the overview card.
+-- One row per agent, upserted each time the cortex regenerates.
+CREATE TABLE IF NOT EXISTS agent_profile (
+    agent_id    TEXT PRIMARY KEY NOT NULL,
+    display_name TEXT,           -- optional human-friendly name the cortex picks
+    status      TEXT,            -- short mood/status line (e.g. "deep in a rewrite")
+    bio         TEXT,            -- 2-3 sentence self-description
+    avatar_seed TEXT,            -- seed string for deterministic gradient generation
+    generated_at TEXT NOT NULL DEFAULT (datetime('now')),
+    updated_at  TEXT NOT NULL DEFAULT (datetime('now'))
+);

prompts/en/cortex_profile.md.j2

@@ -0,0 +1,12 @@
+You are generating a profile card for an AI agent. You have access to the agent's memory bulletin (a synthesis of its knowledge, recent activity, and identity) and its identity files.
+
+Based on this context, generate a JSON object with exactly these fields:
+
+- **display_name**: A short name or alias for the agent. If the identity files define a name, use it. Otherwise, invent something that fits the agent's personality. 1-3 words max.
+- **status**: A short, casual status line reflecting what the agent has been up to or how it's "feeling" based on recent activity and memories. Think Discord status — brief, personality-driven, sometimes witty. 3-10 words. Examples: "deep in a refactor", "learning about your codebase", "just vibing between tasks", "drowning in PRs".
+- **bio**: A 2-3 sentence self-description written in first person. This is the agent introducing itself. It should reflect personality from the identity/soul files and reference real things from its memories (projects it's worked on, things it knows about, its role). Keep it natural and conversational.
+
+Respond with ONLY the raw JSON object. No markdown fencing, no explanation.
+
+Example output:
+{"display_name": "Atlas", "status": "knee-deep in the auth rewrite", "bio": "I'm the dev agent for the Spacebot project. I've been spending most of my time on the Rust backend — memory systems, API endpoints, and keeping the cortex running smoothly. I know my way around James's codebase better than most humans at this point."}

prompts/en/fragments/system/profile_synthesis.md.j2

@@ -0,0 +1,13 @@
+Generate the agent profile based on the following context.
+
+{% if identity_context %}
+## Identity Files
+
+{{ identity_context }}
+{% endif %}
+
+{% if memory_bulletin %}
+## Current Memory Bulletin
+
+{{ memory_bulletin }}
+{% endif %}