feat(tfl): add FeedItemRenderer for TfL alerts (#73)

* feat(tfl): add FeedItemRenderer for TfL alerts

Implement renderTflAlert using JRX and @aelis/components.
Upgrade @nym.sh/jrx to 0.2.0 for null child support.

Co-authored-by: Ona <no-reply@ona.com>

* fix(tfl): add jsxImportSource pragma for CI

The CI test runner doesn't use per-package tsconfig.json,
so the pragma is needed alongside the tsconfig setting.

Co-authored-by: Ona <no-reply@ona.com>

* fix(ci): run tests per-package via bun run test

Use 'bun run test' (which runs 'bun run --filter * test')
instead of 'bun test' so each package runs tests from its
own directory. Add jsxImportSource pragma to renderer files
since consumers without a JRX tsconfig also import them.

Co-authored-by: Ona <no-reply@ona.com>

* fix(tfl): handle near-1km boundary in formatDistance

Values like 0.9999km rounded to 1000m and displayed as
'1000m away'. Now converts to meters first and switches
to km format when rounded meters >= 1000.

Co-authored-by: Ona <no-reply@ona.com>

---------

Co-authored-by: Ona <no-reply@ona.com>

.github/workflows/build-waitlist-website.yml

@@ -0,0 +1,42 @@
+name: Build waitlist website
+
+on:
+  push:
+    branches: [master]
+    paths:
+      - apps/waitlist-website/**
+      - .github/workflows/build-waitlist-website.yml
+
+  workflow_dispatch:
+
+env:
+  REGISTRY: cr.nym.sh
+  IMAGE_NAME: aelis-waitlist-website
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: apps/waitlist-website
+          push: true
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -21,4 +21,4 @@ jobs:
         run: bun install --frozen-lockfile
 
       - name: Run tests
-        run: bun test
+        run: bun run test

apps/aelis-backend/src/engine/http.test.ts

@@ -0,0 +1,315 @@
+import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
+
+import { contextKey } from "@aelis/core"
+import { describe, expect, test } from "bun:test"
+import { Hono } from "hono"
+
+import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
+import { UserSessionManager } from "../session/index.ts"
+import { registerFeedHttpHandlers } from "./http.ts"
+
+interface FeedResponse {
+	items: Array<{
+		id: string
+		type: string
+		priority: number
+		timestamp: string
+		data: Record<string, unknown>
+	}>
+	errors: Array<{ sourceId: string; error: string }>
+}
+
+function createStubSource(
+	id: string,
+	items: FeedItem[] = [],
+	contextEntries: readonly ContextEntry[] | null = null,
+): FeedSource {
+	return {
+		id,
+		async listActions(): Promise<Record<string, ActionDefinition>> {
+			return {}
+		},
+		async executeAction(): Promise<unknown> {
+			return undefined
+		},
+		async fetchContext(): Promise<readonly ContextEntry[] | null> {
+			return contextEntries
+		},
+		async fetchItems() {
+			return items
+		},
+	}
+}
+
+function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
+	const app = new Hono()
+	registerFeedHttpHandlers(app, {
+		sessionManager,
+		authSessionMiddleware: mockAuthSessionMiddleware(userId),
+	})
+	return app
+}
+
+describe("GET /api/feed", () => {
+	test("returns 401 without auth", async () => {
+		const manager = new UserSessionManager({ providers: [] })
+		const app = buildTestApp(manager)
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(401)
+	})
+
+	test("returns cached feed when available", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "item-1",
+				sourceId: "test",
+				type: "test",
+				priority: 0.8,
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: 42 },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		// Prime the cache
+		const session = manager.getOrCreate("user-1")
+		await session.engine.refresh()
+		expect(session.engine.lastFeed()).not.toBeNull()
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("item-1")
+		expect(body.items[0]!.type).toBe("test")
+		expect(body.items[0]!.priority).toBe(0.8)
+		expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
+		expect(body.errors).toHaveLength(0)
+	})
+
+	test("forces refresh when no cached feed", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "fresh-1",
+				sourceId: "test",
+				type: "test",
+				priority: 0.5,
+				timestamp: new Date("2025-06-01T12:00:00.000Z"),
+				data: { fresh: true },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		// No prior refresh — lastFeed() returns null, handler should call refresh()
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("fresh-1")
+		expect(body.items[0]!.data.fresh).toBe(true)
+		expect(body.errors).toHaveLength(0)
+	})
+
+	test("serializes source errors as message strings", async () => {
+		const failingSource: FeedSource = {
+			id: "failing",
+			async listActions() {
+				return {}
+			},
+			async executeAction() {
+				return undefined
+			},
+			async fetchContext() {
+				return null
+			},
+			async fetchItems() {
+				throw new Error("connection timeout")
+			},
+		}
+		const manager = new UserSessionManager({ providers: [() => failingSource] })
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as FeedResponse
+		expect(body.items).toHaveLength(0)
+		expect(body.errors).toHaveLength(1)
+		expect(body.errors[0]!.sourceId).toBe("failing")
+		expect(body.errors[0]!.error).toBe("connection timeout")
+	})
+})
+
+describe("GET /api/context", () => {
+	const weatherKey = contextKey("aelis.weather", "weather")
+	const weatherData = { temperature: 20, condition: "Clear" }
+	const contextEntries: readonly ContextEntry[] = [[weatherKey, weatherData]]
+
+	// The mock auth middleware always injects this hardcoded user ID
+	const mockUserId = "k7Gx2mPqRvNwYs9TdLfA4bHcJeUo1iZn"
+
+	function buildContextApp(userId?: string) {
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("weather", [], contextEntries)],
+		})
+		const app = buildTestApp(manager, userId)
+		const session = manager.getOrCreate(mockUserId)
+		return { app, session }
+	}
+
+	test("returns 401 without auth", async () => {
+		const manager = new UserSessionManager({ providers: [] })
+		const app = buildTestApp(manager)
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]')
+
+		expect(res.status).toBe(401)
+	})
+
+	test("returns 400 when key param is missing", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is invalid JSON", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=notjson")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is not an array", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request('/api/context?key="string"')
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key contains invalid element types", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=[true,null,[1,2]]")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when key is an empty array", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request("/api/context?key=[]")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("key")
+	})
+
+	test("returns 400 when match param is invalid", async () => {
+		const { app } = buildContextApp("user-1")
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=invalid')
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("match")
+	})
+
+	test("returns exact match with match=exact", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]&match=exact')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as { match: string; value: unknown }
+		expect(body.match).toBe("exact")
+		expect(body.value).toEqual(weatherData)
+	})
+
+	test("returns 404 with match=exact when only prefix would match", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=exact')
+
+		expect(res.status).toBe(404)
+	})
+
+	test("returns prefix match with match=prefix", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]&match=prefix')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as {
+			match: string
+			entries: Array<{ key: unknown[]; value: unknown }>
+		}
+		expect(body.match).toBe("prefix")
+		expect(body.entries).toHaveLength(1)
+		expect(body.entries[0]!.key).toEqual(["aelis.weather", "weather"])
+		expect(body.entries[0]!.value).toEqual(weatherData)
+	})
+
+	test("default mode returns exact match when available", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather","weather"]')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as { match: string; value: unknown }
+		expect(body.match).toBe("exact")
+		expect(body.value).toEqual(weatherData)
+	})
+
+	test("default mode falls back to prefix when no exact match", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["aelis.weather"]')
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as {
+			match: string
+			entries: Array<{ key: unknown[]; value: unknown }>
+		}
+		expect(body.match).toBe("prefix")
+		expect(body.entries).toHaveLength(1)
+		expect(body.entries[0]!.value).toEqual(weatherData)
+	})
+
+	test("returns 404 when neither exact nor prefix matches", async () => {
+		const { app, session } = buildContextApp("user-1")
+		await session.engine.refresh()
+
+		const res = await app.request('/api/context?key=["nonexistent"]')
+
+		expect(res.status).toBe(404)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toBe("Context key not found")
+	})
+})

apps/aelis-backend/src/engine/http.ts

@@ -0,0 +1,118 @@
+import type { Context, Hono } from "hono"
+
+import { contextKey } from "@aelis/core"
+import { createMiddleware } from "hono/factory"
+
+import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
+import type { UserSessionManager } from "../session/index.ts"
+
+type Env = {
+	Variables: {
+		sessionManager: UserSessionManager
+	}
+}
+
+interface FeedHttpHandlersDeps {
+	sessionManager: UserSessionManager
+	authSessionMiddleware: AuthSessionMiddleware
+}
+
+export function registerFeedHttpHandlers(
+	app: Hono,
+	{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
+) {
+	const inject = createMiddleware<Env>(async (c, next) => {
+		c.set("sessionManager", sessionManager)
+		await next()
+	})
+
+	app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
+	app.get("/api/context", inject, authSessionMiddleware, handleGetContext)
+}
+
+async function handleGetFeed(c: Context<Env>) {
+	const user = c.get("user")!
+	const sessionManager = c.get("sessionManager")
+	const session = sessionManager.getOrCreate(user.id)
+
+	const feed = await session.feed()
+
+	return c.json({
+		items: feed.items,
+		errors: feed.errors.map((e) => ({
+			sourceId: e.sourceId,
+			error: e.error.message,
+		})),
+	})
+}
+
+function handleGetContext(c: Context<Env>) {
+	const keyParam = c.req.query("key")
+	if (!keyParam) {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	let parsed: unknown
+	try {
+		parsed = JSON.parse(keyParam)
+	} catch {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	if (!Array.isArray(parsed) || parsed.length === 0 || !parsed.every(isContextKeyPart)) {
+		return c.json({ error: 'Invalid or missing "key" parameter: must be a JSON array' }, 400)
+	}
+
+	const matchParam = c.req.query("match")
+	if (matchParam !== undefined && matchParam !== "exact" && matchParam !== "prefix") {
+		return c.json({ error: 'Invalid "match" parameter: must be "exact" or "prefix"' }, 400)
+	}
+
+	const user = c.get("user")!
+	const sessionManager = c.get("sessionManager")
+	const session = sessionManager.getOrCreate(user.id)
+	const context = session.engine.currentContext()
+	const key = contextKey(...parsed)
+
+	if (matchParam === "exact") {
+		const value = context.get(key)
+		if (value === undefined) {
+			return c.json({ error: "Context key not found" }, 404)
+		}
+		return c.json({ match: "exact", value })
+	}
+
+	if (matchParam === "prefix") {
+		const entries = context.find(key)
+		if (entries.length === 0) {
+			return c.json({ error: "Context key not found" }, 404)
+		}
+		return c.json({ match: "prefix", entries })
+	}
+
+	// Default: single find() covers both exact and prefix matches
+	const entries = context.find(key)
+	if (entries.length === 0) {
+		return c.json({ error: "Context key not found" }, 404)
+	}
+
+	// If exactly one result with the same key length, treat as exact match
+	if (entries.length === 1 && entries[0]!.key.length === parsed.length) {
+		return c.json({ match: "exact", value: entries[0]!.value })
+	}
+
+	return c.json({ match: "prefix", entries })
+}
+
+/** Validates that a value is a valid ContextKeyPart (string, number, or plain object of primitives). */
+function isContextKeyPart(value: unknown): boolean {
+	if (typeof value === "string" || typeof value === "number") {
+		return true
+	}
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+		return Object.values(value).every(
+			(v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean",
+		)
+	}
+	return false
+}

apps/aelis-backend/src/enhancement/merge.test.ts

@@ -9,6 +9,7 @@ import { mergeEnhancement } from "./merge.ts"
 function makeItem(overrides: Partial<FeedItem> = {}): FeedItem {
 	return {
 		id: "item-1",
+		sourceId: "test",
 		type: "test",
 		timestamp: new Date("2025-01-01T00:00:00Z"),
 		data: { value: 42 },

apps/aelis-backend/src/enhancement/merge.ts

@@ -2,6 +2,8 @@ import type { FeedItem } from "@aelis/core"
 
 import type { EnhancementResult } from "./schema.ts"
 
+const ENHANCEMENT_SOURCE_ID = "aelis.enhancement"
+
 /**
  * Merges an EnhancementResult into feed items.
  *
@@ -10,7 +12,11 @@ import type { EnhancementResult } from "./schema.ts"
  * - Returns a new array (no mutation)
  * - Ignores fills for items/slots that don't exist
  */
-export function mergeEnhancement(items: FeedItem[], result: EnhancementResult, currentTime: Date): FeedItem[] {
+export function mergeEnhancement(
+	items: FeedItem[],
+	result: EnhancementResult,
+	currentTime: Date,
+): FeedItem[] {
 	const merged = items.map((item) => {
 		const fills = result.slotFills[item.id]
 		if (!fills || !item.slots) return item
@@ -31,6 +37,7 @@ export function mergeEnhancement(items: FeedItem[], result: EnhancementResult, c
 	for (const synthetic of result.syntheticItems) {
 		merged.push({
 			id: synthetic.id,
+			sourceId: ENHANCEMENT_SOURCE_ID,
 			type: synthetic.type,
 			timestamp: currentTime,
 			data: { text: synthetic.text },

apps/aelis-backend/src/enhancement/prompt-builder.test.ts

@@ -7,6 +7,7 @@ import { buildPrompt, hasUnfilledSlots } from "./prompt-builder.ts"
 function makeItem(overrides: Partial<FeedItem> = {}): FeedItem {
 	return {
 		id: "item-1",
+		sourceId: "test",
 		type: "test",
 		timestamp: new Date("2025-01-01T00:00:00Z"),
 		data: { value: 42 },
@@ -60,7 +61,9 @@ describe("buildPrompt", () => {
 
 		expect(parsed.items).toHaveLength(1)
 		expect((parsed.items as Array<Record<string, unknown>>)[0]!.id).toBe("item-1")
-		expect((parsed.items as Array<Record<string, unknown>>)[0]!.slots).toEqual({ insight: "Weather insight" })
+		expect((parsed.items as Array<Record<string, unknown>>)[0]!.slots).toEqual({
+			insight: "Weather insight",
+		})
 		expect((parsed.items as Array<Record<string, unknown>>)[0]!.type).toBeUndefined()
 		expect(parsed.context).toHaveLength(0)
 	})

apps/aelis-backend/src/feed/http.test.ts

@@ -1,144 +0,0 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
-
-import { describe, expect, test } from "bun:test"
-import { Hono } from "hono"
-
-import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
-import { UserSessionManager } from "../session/index.ts"
-import { registerFeedHttpHandlers } from "./http.ts"
-
-interface FeedResponse {
-	items: Array<{
-		id: string
-		type: string
-		priority: number
-		timestamp: string
-		data: Record<string, unknown>
-	}>
-	errors: Array<{ sourceId: string; error: string }>
-}
-
-function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
-	return {
-		id,
-		async listActions(): Promise<Record<string, ActionDefinition>> {
-			return {}
-		},
-		async executeAction(): Promise<unknown> {
-			return undefined
-		},
-		async fetchContext(): Promise<readonly ContextEntry[] | null> {
-			return null
-		},
-		async fetchItems() {
-			return items
-		},
-	}
-}
-
-function buildTestApp(sessionManager: UserSessionManager, userId?: string) {
-	const app = new Hono()
-	registerFeedHttpHandlers(app, {
-		sessionManager,
-		authSessionMiddleware: mockAuthSessionMiddleware(userId),
-	})
-	return app
-}
-
-describe("GET /api/feed", () => {
-	test("returns 401 without auth", async () => {
-		const manager = new UserSessionManager({ providers: [] })
-		const app = buildTestApp(manager)
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(401)
-	})
-
-	test("returns cached feed when available", async () => {
-		const items: FeedItem[] = [
-			{
-				id: "item-1",
-				type: "test",
-				priority: 0.8,
-				timestamp: new Date("2025-01-01T00:00:00.000Z"),
-				data: { value: 42 },
-			},
-		]
-		const manager = new UserSessionManager({
-			providers: [() => createStubSource("test", items)],
-		})
-		const app = buildTestApp(manager, "user-1")
-
-		// Prime the cache
-		const session = manager.getOrCreate("user-1")
-		await session.engine.refresh()
-		expect(session.engine.lastFeed()).not.toBeNull()
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(1)
-		expect(body.items[0]!.id).toBe("item-1")
-		expect(body.items[0]!.type).toBe("test")
-		expect(body.items[0]!.priority).toBe(0.8)
-		expect(body.items[0]!.timestamp).toBe("2025-01-01T00:00:00.000Z")
-		expect(body.errors).toHaveLength(0)
-	})
-
-	test("forces refresh when no cached feed", async () => {
-		const items: FeedItem[] = [
-			{
-				id: "fresh-1",
-				type: "test",
-				priority: 0.5,
-				timestamp: new Date("2025-06-01T12:00:00.000Z"),
-				data: { fresh: true },
-			},
-		]
-		const manager = new UserSessionManager({
-			providers: [() => createStubSource("test", items)],
-		})
-		const app = buildTestApp(manager, "user-1")
-
-		// No prior refresh — lastFeed() returns null, handler should call refresh()
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(1)
-		expect(body.items[0]!.id).toBe("fresh-1")
-		expect(body.items[0]!.data.fresh).toBe(true)
-		expect(body.errors).toHaveLength(0)
-	})
-
-	test("serializes source errors as message strings", async () => {
-		const failingSource: FeedSource = {
-			id: "failing",
-			async listActions() {
-				return {}
-			},
-			async executeAction() {
-				return undefined
-			},
-			async fetchContext() {
-				return null
-			},
-			async fetchItems() {
-				throw new Error("connection timeout")
-			},
-		}
-		const manager = new UserSessionManager({ providers: [() => failingSource] })
-		const app = buildTestApp(manager, "user-1")
-
-		const res = await app.request("/api/feed")
-
-		expect(res.status).toBe(200)
-		const body = (await res.json()) as FeedResponse
-		expect(body.items).toHaveLength(0)
-		expect(body.errors).toHaveLength(1)
-		expect(body.errors[0]!.sourceId).toBe("failing")
-		expect(body.errors[0]!.error).toBe("connection timeout")
-	})
-})

apps/aelis-backend/src/feed/http.ts

@@ -1,45 +0,0 @@
-import type { Context, Hono } from "hono"
-
-import { createMiddleware } from "hono/factory"
-
-import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
-import type { UserSessionManager } from "../session/index.ts"
-
-type Env = {
-	Variables: {
-		sessionManager: UserSessionManager
-	}
-}
-
-interface FeedHttpHandlersDeps {
-	sessionManager: UserSessionManager
-	authSessionMiddleware: AuthSessionMiddleware
-}
-
-export function registerFeedHttpHandlers(
-	app: Hono,
-	{ sessionManager, authSessionMiddleware }: FeedHttpHandlersDeps,
-) {
-	const inject = createMiddleware<Env>(async (c, next) => {
-		c.set("sessionManager", sessionManager)
-		await next()
-	})
-
-	app.get("/api/feed", inject, authSessionMiddleware, handleGetFeed)
-}
-
-async function handleGetFeed(c: Context<Env>) {
-	const user = c.get("user")!
-	const sessionManager = c.get("sessionManager")
-	const session = sessionManager.getOrCreate(user.id)
-
-	const feed = await session.feed()
-
-	return c.json({
-		items: feed.items,
-		errors: feed.errors.map((e) => ({
-			sourceId: e.sourceId,
-			error: e.error.message,
-		})),
-	})
-}

apps/aelis-backend/src/server.ts

@@ -5,7 +5,7 @@ import { registerAuthHandlers } from "./auth/http.ts"
 import { mockAuthSessionMiddleware, requireSession } from "./auth/session-middleware.ts"
 import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
 import { createLlmClient } from "./enhancement/llm-client.ts"
-import { registerFeedHttpHandlers } from "./feed/http.ts"
+import { registerFeedHttpHandlers } from "./engine/http.ts"
 import { registerLocationHttpHandlers } from "./location/http.ts"
 import { UserSessionManager } from "./session/index.ts"
 import { WeatherSourceProvider } from "./weather/provider.ts"

apps/aelis-backend/src/session/user-session.test.ts

@@ -76,6 +76,7 @@ describe("UserSession.feed", () => {
 		const items: FeedItem[] = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-01T00:00:00.000Z"),
 				data: { value: 42 },
@@ -93,6 +94,7 @@ describe("UserSession.feed", () => {
 		const items: FeedItem[] = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-01T00:00:00.000Z"),
 				data: { value: 42 },
@@ -113,6 +115,7 @@ describe("UserSession.feed", () => {
 		const items: FeedItem[] = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-01T00:00:00.000Z"),
 				data: { value: 42 },
@@ -139,6 +142,7 @@ describe("UserSession.feed", () => {
 		let currentItems: FeedItem[] = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-01T00:00:00.000Z"),
 				data: { version: 1 },
@@ -169,6 +173,7 @@ describe("UserSession.feed", () => {
 		currentItems = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-02T00:00:00.000Z"),
 				data: { version: 2 },
@@ -190,6 +195,7 @@ describe("UserSession.feed", () => {
 		const items: FeedItem[] = [
 			{
 				id: "item-1",
+				sourceId: "test",
 				type: "test",
 				timestamp: new Date("2025-01-01T00:00:00.000Z"),
 				data: { value: 42 },

apps/aelis-client/package.json

@@ -18,6 +18,7 @@
 		"@expo-google-fonts/inter": "^0.4.2",
 		"@expo-google-fonts/source-serif-4": "^0.4.1",
 		"@expo/vector-icons": "^15.0.3",
+		"@json-render/react-native": "^0.13.0",
 		"@react-navigation/bottom-tabs": "^7.4.0",
 		"@react-navigation/elements": "^2.6.3",
 		"@react-navigation/native": "^7.1.8",
@@ -45,7 +46,8 @@
 		"react-native-svg": "15.12.1",
 		"react-native-web": "~0.21.0",
 		"react-native-worklets": "0.5.1",
-		"twrnc": "^4.16.0"
+		"twrnc": "^4.16.0",
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@types/react": "~19.1.0",

apps/aelis-client/src/components/ui/button.showcase.tsx

@@ -1,4 +1,3 @@
-import Feather from "@expo/vector-icons/Feather"
 import { View } from "react-native"
 import tw from "twrnc"
 
@@ -15,22 +14,22 @@ function ButtonShowcase() {
 				<Button
 					style={tw`self-start`}
 					label="Add item"
-					leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="plus" />}
 				/>
 			</Section>
 			<Section title="Trailing icon">
 				<Button
 					style={tw`self-start`}
 					label="Next"
-					trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="arrow-right" />}
 				/>
 			</Section>
 			<Section title="Both icons">
 				<Button
 					style={tw`self-start`}
 					label="Download"
-					leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
+					leadingIcon={<Button.Icon name="download" />}
-					trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
+					trailingIcon={<Button.Icon name="chevron-down" />}
 				/>
 			</Section>
 		</View>

apps/aelis-client/src/components/ui/button.tsx

@@ -1,8 +1,19 @@
+import Feather from "@expo/vector-icons/Feather"
 import { type PressableProps, Pressable, View } from "react-native"
 import tw from "twrnc"
 
 import { SansSerifText } from "./sans-serif-text"
 
+type FeatherIconName = React.ComponentProps<typeof Feather>["name"]
+
+type ButtonIconProps = {
+	name: FeatherIconName
+}
+
+function ButtonIcon({ name }: ButtonIconProps) {
+	return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
+}
+
 type ButtonProps = Omit<PressableProps, "children"> & {
 	label: string
 	leadingIcon?: React.ReactNode
@@ -12,7 +23,7 @@ type ButtonProps = Omit<PressableProps, "children"> & {
 export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
 	const hasIcons = leadingIcon != null || trailingIcon != null
 
-	const textElement = <SansSerifText style={tw`text-stone-200 font-medium`}>{label}</SansSerifText>
+	const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
 
 	return (
 		<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
@@ -28,3 +39,5 @@ export function Button({ style, label, leadingIcon, trailingIcon, ...props }: Bu
 		</Pressable>
 	)
 }
+
+Button.Icon = ButtonIcon

apps/aelis-client/src/json-render/catalog.ts

@@ -0,0 +1,68 @@
+import { defineCatalog } from "@json-render/core"
+import { schema } from "@json-render/react-native/schema"
+import { z } from "zod"
+
+export const catalog = defineCatalog(schema, {
+	components: {
+		View: {
+			props: z.object({
+				style: z.string().nullable(),
+			}),
+			slots: ["default"],
+			description:
+				"Generic layout container. The style prop accepts a twrnc class string (e.g. 'flex-row gap-2 p-4 items-center').",
+			example: { style: "flex-row gap-2 p-4" },
+		},
+		Button: {
+			props: z.object({
+				label: z.string(),
+				leadingIcon: z.string().nullable(),
+				trailingIcon: z.string().nullable(),
+			}),
+			events: ["press"],
+			slots: [],
+			description:
+				"Pressable button with a label and optional Feather icons. Icon values are Feather icon names (e.g. 'plus', 'arrow-right'). Bind on.press to trigger an action.",
+			example: { label: "Add item", leadingIcon: "plus", trailingIcon: null },
+		},
+		FeedCard: {
+			props: z.object({
+				style: z.string().nullable(),
+			}),
+			slots: ["default"],
+			description: "Bordered card container for feed content. The style prop accepts a twrnc class string.",
+			example: { style: "p-4 gap-2" },
+		},
+		SansSerifText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Sans-serif text (Inter font). The style prop accepts a twrnc class string for size, weight, color, etc.",
+			example: { text: "Hello world", style: "text-base font-medium" },
+		},
+		SerifText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Serif text (Source Serif 4 font). The style prop accepts a twrnc class string for size, color, etc.",
+			example: { text: "Heading", style: "text-xl" },
+		},
+		MonospaceText: {
+			props: z.object({
+				text: z.string(),
+				style: z.string().nullable(),
+			}),
+			slots: [],
+			description:
+				"Monospace text (Menlo font). The style prop accepts a twrnc class string for size, color, etc.",
+			example: { text: "const x = 42", style: "text-sm" },
+		},
+	},
+	actions: {},
+})

apps/aelis-client/src/json-render/index.ts

@@ -0,0 +1,2 @@
+export { catalog } from "./catalog"
+export { registry } from "./registry"

apps/aelis-client/src/json-render/registry.tsx

@@ -0,0 +1,39 @@
+import { defineRegistry } from "@json-render/react-native"
+import { View } from "react-native"
+import tw from "twrnc"
+
+import { Button } from "@/components/ui/button"
+import { FeedCard } from "@/components/ui/feed-card"
+import { MonospaceText } from "@/components/ui/monospace-text"
+import { SansSerifText } from "@/components/ui/sans-serif-text"
+import { SerifText } from "@/components/ui/serif-text"
+
+import { catalog } from "./catalog"
+
+type ButtonIconName = React.ComponentProps<typeof Button.Icon>["name"]
+
+export const { registry } = defineRegistry(catalog, {
+	components: {
+		View: ({ props, children }) => <View style={props.style ? tw`${props.style}` : undefined}>{children}</View>,
+		Button: ({ props, emit }) => (
+			<Button
+				label={props.label}
+				leadingIcon={props.leadingIcon ? <Button.Icon name={props.leadingIcon as ButtonIconName} /> : undefined}
+				trailingIcon={props.trailingIcon ? <Button.Icon name={props.trailingIcon as ButtonIconName} /> : undefined}
+				onPress={() => emit("press")}
+			/>
+		),
+		FeedCard: ({ props, children }) => (
+			<FeedCard style={props.style ? tw`${props.style}` : undefined}>{children}</FeedCard>
+		),
+		SansSerifText: ({ props }) => (
+			<SansSerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SansSerifText>
+		),
+		SerifText: ({ props }) => (
+			<SerifText style={props.style ? tw`${props.style}` : undefined}>{props.text}</SerifText>
+		),
+		MonospaceText: ({ props }) => (
+			<MonospaceText style={props.style ? tw`${props.style}` : undefined}>{props.text}</MonospaceText>
+		),
+	},
+})

bun.lock

@@ -6,7 +6,7 @@
       "name": "aelis",
       "devDependencies": {
         "@json-render/core": "^0.12.1",
-        "@nym.sh/jrx": "^0.1.0",
+        "@nym.sh/jrx": "^0.2.0",
         "@types/bun": "latest",
         "oxfmt": "^0.24.0",
         "oxlint": "^1.39.0",
@@ -42,6 +42,7 @@
         "@expo-google-fonts/inter": "^0.4.2",
         "@expo-google-fonts/source-serif-4": "^0.4.1",
         "@expo/vector-icons": "^15.0.3",
+        "@json-render/react-native": "^0.13.0",
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
@@ -70,6 +71,7 @@
         "react-native-web": "~0.21.0",
         "react-native-worklets": "0.5.1",
         "twrnc": "^4.16.0",
+        "zod": "^4.3.6",
       },
       "devDependencies": {
         "@types/react": "~19.1.0",
@@ -108,6 +110,14 @@
         "vite-tsconfig-paths": "^5.1.4",
       },
     },
+    "packages/aelis-components": {
+      "name": "@aelis/components",
+      "version": "0.0.0",
+      "peerDependencies": {
+        "@json-render/core": "*",
+        "@nym.sh/jrx": "*",
+      },
+    },
     "packages/aelis-core": {
       "name": "@aelis/core",
       "version": "0.0.0",
@@ -142,6 +152,7 @@
       "name": "@aelis/source-caldav",
       "version": "0.0.0",
       "dependencies": {
+        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "ical.js": "^2.1.0",
         "tsdav": "^2.1.7",
@@ -167,10 +178,15 @@
       "name": "@aelis/source-tfl",
       "version": "0.0.0",
       "dependencies": {
+        "@aelis/components": "workspace:*",
         "@aelis/core": "workspace:*",
         "@aelis/source-location": "workspace:*",
         "arktype": "^2.1.0",
       },
+      "peerDependencies": {
+        "@json-render/core": "*",
+        "@nym.sh/jrx": "*",
+      },
     },
     "packages/aelis-source-weatherkit": {
       "name": "@aelis/source-weatherkit",
@@ -187,6 +203,8 @@
 
     "@aelis/backend": ["@aelis/backend@workspace:apps/aelis-backend"],
 
+    "@aelis/components": ["@aelis/components@workspace:packages/aelis-components"],
+
     "@aelis/core": ["@aelis/core@workspace:packages/aelis-core"],
 
     "@aelis/data-source-weatherkit": ["@aelis/data-source-weatherkit@workspace:packages/aelis-data-source-weatherkit"],
@@ -657,6 +675,8 @@
 
     "@json-render/core": ["@json-render/core@0.12.1", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-1tV/481GPHmIRd6lXfWcTaIslQusmDg5lzcSBzWLkSXjF9sjjyOQL090in7uHT4tOMWkdmlEJOW5H9C72PsUEQ=="],
 
+    "@json-render/react-native": ["@json-render/react-native@0.13.0", "", { "dependencies": { "@json-render/core": "0.13.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-native": ">=0.71.0", "zod": "^4.0.0" } }, "sha512-uUrK28xPb7LuyYsi9cTnvrnXnVBG0OwU5Up35aaXwcWMLrfqxJ7oWfF97HlDvZIckQtm0VEngAXhHMW97qBEkg=="],
+
     "@mjackson/node-fetch-server": ["@mjackson/node-fetch-server@0.2.0", "", {}, "sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng=="],
 
     "@mongodb-js/saslprep": ["@mongodb-js/saslprep@1.4.6", "", { "dependencies": { "sparse-bitfield": "^3.0.3" } }, "sha512-y+x3H1xBZd38n10NZF/rEBlvDOOMQ6LKUTHqr8R9VkJ+mmQOYtJFxIlkkK8fZrtOiL6VixbOBWMbZGBdal3Z1g=="],
@@ -677,7 +697,7 @@
 
     "@nolyfill/is-core-module": ["@nolyfill/is-core-module@1.0.39", "", {}, "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA=="],
 
-    "@nym.sh/jrx": ["@nym.sh/jrx@0.1.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-mu6fkAP/TI9FuP8A4WMCrcucpUtWF5xBTcETnrjOtvEED9i+7sQKuoOyhJeF6QaSuUkAA/8t3Xx3kYUjcAPFbw=="],
+    "@nym.sh/jrx": ["@nym.sh/jrx@0.2.0", "", { "peerDependencies": { "@json-render/core": ">=0.10.0" } }, "sha512-jd7Z1Q6T21366MtSUnwCFiu6Yl1AdNc9s5m6HxeUg265P+0enZCiyyxOuHsFwvpUcSEs/2DVBsqfMptdca44lA=="],
 
     "@oclif/core": ["@oclif/core@4.8.4", "", { "dependencies": { "ansi-escapes": "^4.3.2", "ansis": "^3.17.0", "clean-stack": "^3.0.1", "cli-spinners": "^2.9.2", "debug": "^4.4.3", "ejs": "^3.1.10", "get-package-type": "^0.1.0", "indent-string": "^4.0.0", "is-wsl": "^2.2.0", "lilconfig": "^3.1.3", "minimatch": "^10.2.4", "semver": "^7.7.3", "string-width": "^4.2.3", "supports-color": "^8", "tinyglobby": "^0.2.14", "widest-line": "^3.1.0", "wordwrap": "^1.0.0", "wrap-ansi": "^7.0.0" } }, "sha512-UTAqwXJJyRvLBvosL+1uPZYSpr8lEHgUb/EVGbPXo5WZqUIBHfJ0sR2bkBEsrj00/ar4IegKxx4YK0wn2c8SQg=="],
 
@@ -3457,6 +3477,8 @@
 
     "@jest/transform/write-file-atomic": ["write-file-atomic@4.0.2", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" } }, "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg=="],
 
+    "@json-render/react-native/@json-render/core": ["@json-render/core@0.13.0", "", { "dependencies": { "zod": "^4.3.6" } }, "sha512-CXmCsc8BHDRq45ScVd+qgvjTbwZHPVpVD05WnTqgDxqfY3LGXu5vxaQRSwYoEodg/DGcZq/4HSj4ipVvrzy3qQ=="],
+
     "@mrleebo/prisma-ast/lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
 
     "@oclif/core/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],

package.json

@@ -15,7 +15,7 @@
 	},
 	"devDependencies": {
 		"@json-render/core": "^0.12.1",
-		"@nym.sh/jrx": "^0.1.0",
+		"@nym.sh/jrx": "^0.2.0",
 		"@types/bun": "latest",
 		"oxfmt": "^0.24.0",
 		"oxlint": "^1.39.0"

packages/aelis-components/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@aelis/components",
+	"version": "0.0.0",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"scripts": {
+		"test": "bun test ./src"
+	},
+	"peerDependencies": {
+		"@json-render/core": "*",
+		"@nym.sh/jrx": "*"
+	}
+}

packages/aelis-components/src/button.ts

@@ -0,0 +1,15 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type ButtonProps = {
+	label: string
+	leadingIcon?: string
+	trailingIcon?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function Button(props: ButtonProps): JrxNode {
+	return jsx("Button", props)
+}

packages/aelis-components/src/components.test.tsx

@@ -0,0 +1,155 @@
+/** @jsxImportSource @nym.sh/jrx */
+
+import { render } from "@nym.sh/jrx"
+import { describe, expect, test } from "bun:test"
+
+import { Button } from "./button.ts"
+import { FeedCard } from "./feed-card.ts"
+import { MonospaceText } from "./monospace-text.ts"
+import { SansSerifText } from "./sans-serif-text.ts"
+import { SerifText } from "./serif-text.ts"
+
+describe("Button", () => {
+	test("renders with label", () => {
+		const spec = render(<Button label="Press me" />)
+
+		expect(spec.root).toStartWith("button-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("Button")
+		expect(root.props).toEqual({ label: "Press me" })
+	})
+
+	test("renders with icon props", () => {
+		const spec = render(<Button label="Add" leadingIcon="plus" trailingIcon="arrow-right" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("Button")
+		expect(root.props).toEqual({
+			label: "Add",
+			leadingIcon: "plus",
+			trailingIcon: "arrow-right",
+		})
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<Button label="Go" style="px-4 py-2" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("px-4 py-2")
+	})
+})
+
+describe("FeedCard", () => {
+	test("renders as container", () => {
+		const spec = render(<FeedCard />)
+
+		expect(spec.root).toStartWith("feedcard-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+	})
+
+	test("renders with a single child", () => {
+		const spec = render(
+			<FeedCard>
+				<SansSerifText content="Only child" />
+			</FeedCard>,
+		)
+
+		const root = spec.elements[spec.root]!
+		expect(root.children).toHaveLength(1)
+		const child = spec.elements[root.children![0]!]!
+		expect(child.type).toBe("SansSerifText")
+		expect(child.props).toEqual({ content: "Only child" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<FeedCard style="p-4 border rounded-lg" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("p-4 border rounded-lg")
+	})
+})
+
+describe("SansSerifText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<SansSerifText content="Hello" />)
+
+		expect(spec.root).toStartWith("sansseriftext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("SansSerifText")
+		expect(root.props).toEqual({ content: "Hello" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<SansSerifText content="Hello" style="text-sm text-stone-500" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-sm text-stone-500")
+	})
+})
+
+describe("SerifText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<SerifText content="Title" />)
+
+		expect(spec.root).toStartWith("seriftext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("SerifText")
+		expect(root.props).toEqual({ content: "Title" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<SerifText content="Title" style="text-xl" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-xl")
+	})
+})
+
+describe("MonospaceText", () => {
+	test("renders with content prop", () => {
+		const spec = render(<MonospaceText content="code()" />)
+
+		expect(spec.root).toStartWith("monospacetext-")
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("MonospaceText")
+		expect(root.props).toEqual({ content: "code()" })
+	})
+
+	test("passes style as string prop", () => {
+		const spec = render(<MonospaceText content="code()" style="text-xs" />)
+
+		const root = spec.elements[spec.root]!
+		expect(root.props.style).toBe("text-xs")
+	})
+})
+
+describe("composite", () => {
+	test("FeedCard with nested children", () => {
+		const spec = render(
+			<FeedCard>
+				<SerifText content="Weather" />
+				<SansSerifText content="Sunny, 22C" />
+				<Button label="Details" />
+			</FeedCard>,
+		)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+		expect(root.children).toHaveLength(3)
+
+		const childKeys = root.children!
+		const child0 = spec.elements[childKeys[0]!]!
+		const child1 = spec.elements[childKeys[1]!]!
+		const child2 = spec.elements[childKeys[2]!]!
+
+		expect(child0.type).toBe("SerifText")
+		expect(child0.props).toEqual({ content: "Weather" })
+
+		expect(child1.type).toBe("SansSerifText")
+		expect(child1.props).toEqual({ content: "Sunny, 22C" })
+
+		expect(child2.type).toBe("Button")
+		expect(child2.props).toEqual({ label: "Details" })
+	})
+})

packages/aelis-components/src/feed-card.ts

@@ -0,0 +1,12 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type FeedCardProps = {
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function FeedCard(props: FeedCardProps): JrxNode {
+	return jsx("FeedCard", props)
+}

packages/aelis-components/src/index.ts

@@ -0,0 +1,14 @@
+export type { ButtonProps } from "./button.ts"
+export { Button } from "./button.ts"
+
+export type { FeedCardProps } from "./feed-card.ts"
+export { FeedCard } from "./feed-card.ts"
+
+export type { SansSerifTextProps } from "./sans-serif-text.ts"
+export { SansSerifText } from "./sans-serif-text.ts"
+
+export type { SerifTextProps } from "./serif-text.ts"
+export { SerifText } from "./serif-text.ts"
+
+export type { MonospaceTextProps } from "./monospace-text.ts"
+export { MonospaceText } from "./monospace-text.ts"

packages/aelis-components/src/monospace-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type MonospaceTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function MonospaceText(props: MonospaceTextProps): JrxNode {
+	return jsx("MonospaceText", props)
+}

packages/aelis-components/src/sans-serif-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type SansSerifTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function SansSerifText(props: SansSerifTextProps): JrxNode {
+	return jsx("SansSerifText", props)
+}

packages/aelis-components/src/serif-text.ts

@@ -0,0 +1,13 @@
+import type { JrxNode } from "@nym.sh/jrx"
+
+import { jsx } from "@nym.sh/jrx/jsx-runtime"
+
+export type SerifTextProps = {
+	content?: string
+	style?: string
+	children?: JrxNode | JrxNode[]
+}
+
+export function SerifText(props: SerifTextProps): JrxNode {
+	return jsx("SerifText", props)
+}

packages/aelis-components/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"jsxImportSource": "@nym.sh/jrx"
+	},
+	"include": ["src"]
+}

packages/aelis-core/src/data-source.ts

@@ -17,6 +17,7 @@ import type { FeedItem } from "./feed"
  *     const data = await fetchWeather(location)
  *     return [{
  *       id: `weather-${Date.now()}`,
+ *       sourceId: "aelis.weather",
  *       type: this.type,
  *       timestamp: context.time,
  *       data: { temp: data.temperature },

packages/aelis-core/src/feed-engine.test.ts

@@ -99,6 +99,7 @@ function createWeatherSource(
 			return [
 				{
 					id: `weather-${Date.now()}`,
+					sourceId: "weather",
 					type: "weather",
 					timestamp: new Date(),
 					data: {
@@ -130,6 +131,7 @@ function createAlertSource(): FeedSource<AlertFeedItem> {
 				return [
 					{
 						id: "alert-storm",
+						sourceId: "alert",
 						type: "alert",
 						timestamp: new Date(),
 						data: { message: "Storm warning!" },
@@ -423,6 +425,7 @@ describe("FeedEngine", () => {
 					return [
 						{
 							id: "item-1",
+							sourceId: "working",
 							type: "test",
 							priority: 0.5,
 							timestamp: new Date(),
@@ -746,6 +749,7 @@ describe("FeedEngine", () => {
 					return [
 						{
 							id: "item-1",
+							sourceId: "reactive-items",
 							type: "test",
 							priority: 0.5,
 							timestamp: new Date(),
@@ -830,6 +834,7 @@ describe("FeedEngine", () => {
 					return [
 						{
 							id: `item-${fetchCount}`,
+							sourceId: "counter",
 							type: "test",
 							priority: 0.5,
 							timestamp: new Date(),
@@ -895,6 +900,7 @@ describe("FeedEngine", () => {
 					return [
 						{
 							id: `weather-${Date.now()}`,
+							sourceId: "weather",
 							type: "weather",
 							priority: 0.5,
 							timestamp: new Date(),

packages/aelis-core/src/feed-post-processor.test.ts

@@ -29,11 +29,17 @@ type WeatherItem = FeedItem<"weather", { temp: number }>
 type CalendarItem = FeedItem<"calendar", { title: string }>
 
 function weatherItem(id: string, temp: number): WeatherItem {
-	return { id, type: "weather", timestamp: new Date(), data: { temp } }
+	return { id, sourceId: "aelis.weather", type: "weather", timestamp: new Date(), data: { temp } }
 }
 
 function calendarItem(id: string, title: string): CalendarItem {
-	return { id, type: "calendar", timestamp: new Date(), data: { title } }
+	return {
+		id,
+		sourceId: "aelis.calendar",
+		type: "calendar",
+		timestamp: new Date(),
+		data: { title },
+	}
 }
 
 // =============================================================================

packages/aelis-core/src/feed-source.test.ts

@@ -98,6 +98,7 @@ function createWeatherSource(
 			return [
 				{
 					id: `weather-${Date.now()}`,
+					sourceId: "weather",
 					type: "weather",
 					timestamp: new Date(),
 					data: {
@@ -129,6 +130,7 @@ function createAlertSource(): FeedSource<AlertFeedItem> {
 				return [
 					{
 						id: "alert-storm",
+						sourceId: "alert",
 						type: "alert",
 						timestamp: new Date(),
 						data: { message: "Storm warning!" },

packages/aelis-core/src/feed.test.ts

@@ -6,6 +6,7 @@ describe("FeedItem slots", () => {
 	test("FeedItem without slots is valid", () => {
 		const item: FeedItem<"test", { value: number }> = {
 			id: "test-1",
+			sourceId: "test-source",
 			type: "test",
 			timestamp: new Date(),
 			data: { value: 42 },
@@ -17,6 +18,7 @@ describe("FeedItem slots", () => {
 	test("FeedItem with unfilled slots", () => {
 		const item: FeedItem<"weather", { temp: number }> = {
 			id: "weather-1",
+			sourceId: "aelis.weather",
 			type: "weather",
 			timestamp: new Date(),
 			data: { temp: 18 },
@@ -41,6 +43,7 @@ describe("FeedItem slots", () => {
 	test("FeedItem with filled slots", () => {
 		const item: FeedItem<"weather", { temp: number }> = {
 			id: "weather-1",
+			sourceId: "aelis.weather",
 			type: "weather",
 			timestamp: new Date(),
 			data: { temp: 18 },
@@ -75,6 +78,7 @@ describe("FeedItem slots", () => {
 	test("FeedItem with empty slots record", () => {
 		const item: FeedItem<"test", { value: number }> = {
 			id: "test-1",
+			sourceId: "test-source",
 			type: "test",
 			timestamp: new Date(),
 			data: { value: 1 },

packages/aelis-core/src/feed.ts

@@ -48,6 +48,7 @@ export interface Slot {
  *
  * const item: WeatherItem = {
  *   id: "weather-123",
+ *   sourceId: "aelis.weatherkit",
  *   type: "weather",
  *   timestamp: new Date(),
  *   data: { temp: 18, condition: "cloudy" },
@@ -67,6 +68,8 @@ export interface FeedItem<
 > {
 	/** Unique identifier */
 	id: string
+	/** ID of the FeedSource that produced this item */
+	sourceId: string
 	/** Item type, matches the data source type */
 	type: TType
 	/** When this item was generated */
@@ -79,6 +82,12 @@ export interface FeedItem<
 	slots?: Record<string, Slot>
 }
 
+/** Takes a FeedItem and returns a JRX node tree for rendering. */
+export type FeedItemRenderer<
+	TType extends string = string,
+	TData extends Record<string, unknown> = Record<string, unknown>,
+> = (item: FeedItem<TType, TData>) => JrxNode
+
 /** A FeedItem with a JRX UI tree attached for client-side rendering. */
 export interface RenderedFeedItem<
 	TType extends string = string,

packages/aelis-core/src/index.ts

@@ -7,7 +7,7 @@ export type { ActionDefinition } from "./action"
 export { UnknownActionError } from "./action"
 
 // Feed
-export type { FeedItem, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
+export type { FeedItem, FeedItemRenderer, FeedItemSignals, RenderedFeedItem, Slot } from "./feed"
 export { TimeRelevance } from "./feed"
 
 // Feed Source

packages/aelis-data-source-weatherkit/src/data-source.ts

@@ -47,6 +47,8 @@ interface LocationData {
 
 const LocationKey: ContextKey<LocationData> = contextKey("aelis.location", "location")
 
+const SOURCE_ID = "aelis.weather"
+
 export class WeatherKitDataSource implements DataSource<WeatherFeedItem, WeatherKitQueryConfig> {
 	private readonly DEFAULT_HOURLY_LIMIT = 12
 	private readonly DEFAULT_DAILY_LIMIT = 7
@@ -236,6 +238,7 @@ function createCurrentWeatherFeedItem(
 
 	return {
 		id: `weather-current-${timestamp.getTime()}`,
+		sourceId: SOURCE_ID,
 		type: WeatherFeedItemType.Current,
 		timestamp,
 		data: {
@@ -270,6 +273,7 @@ function createHourlyWeatherFeedItem(
 
 	return {
 		id: `weather-hourly-${timestamp.getTime()}-${index}`,
+		sourceId: SOURCE_ID,
 		type: WeatherFeedItemType.Hourly,
 		timestamp,
 		data: {
@@ -304,6 +308,7 @@ function createDailyWeatherFeedItem(
 
 	return {
 		id: `weather-daily-${timestamp.getTime()}-${index}`,
+		sourceId: SOURCE_ID,
 		type: WeatherFeedItemType.Daily,
 		timestamp,
 		data: {
@@ -331,6 +336,7 @@ function createWeatherAlertFeedItem(alert: WeatherAlert, timestamp: Date): Weath
 
 	return {
 		id: `weather-alert-${alert.id}`,
+		sourceId: SOURCE_ID,
 		type: WeatherFeedItemType.Alert,
 		timestamp,
 		data: {

packages/aelis-feed-enhancers/src/time-of-day-enhancer.test.ts

@@ -40,6 +40,7 @@ function saturday(hour: number, minute = 0): Date {
 function weatherCurrent(id = "w-current"): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Current,
 		timestamp: new Date(),
 		data: { temperature: 18, precipitationIntensity: 0 },
@@ -49,6 +50,7 @@ function weatherCurrent(id = "w-current"): FeedItem {
 function weatherCurrentRainy(id = "w-current-rain"): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Current,
 		timestamp: new Date(),
 		data: { temperature: 12, precipitationIntensity: 2.5 },
@@ -58,6 +60,7 @@ function weatherCurrentRainy(id = "w-current-rain"): FeedItem {
 function weatherCurrentExtreme(id = "w-current-extreme"): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Current,
 		timestamp: new Date(),
 		data: { temperature: -5, precipitationIntensity: 0 },
@@ -67,6 +70,7 @@ function weatherCurrentExtreme(id = "w-current-extreme"): FeedItem {
 function weatherHourly(id = "w-hourly"): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Hourly,
 		timestamp: new Date(),
 		data: { forecastTime: new Date(), temperature: 20 },
@@ -76,6 +80,7 @@ function weatherHourly(id = "w-hourly"): FeedItem {
 function weatherDaily(id = "w-daily"): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Daily,
 		timestamp: new Date(),
 		data: { forecastDate: new Date() },
@@ -85,6 +90,7 @@ function weatherDaily(id = "w-daily"): FeedItem {
 function weatherAlert(id = "w-alert", urgency = 0.9): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.weather",
 		type: WeatherFeedItemType.Alert,
 		timestamp: new Date(),
 		data: { severity: "extreme" },
@@ -99,6 +105,7 @@ function calendarEvent(
 ): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.google-calendar",
 		type: CalendarFeedItemType.Event,
 		timestamp: new Date(),
 		data: {
@@ -120,6 +127,7 @@ function calendarEvent(
 function calendarAllDay(id: string): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.google-calendar",
 		type: CalendarFeedItemType.AllDay,
 		timestamp: new Date(),
 		data: {
@@ -145,6 +153,7 @@ function caldavEvent(
 ): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.caldav",
 		type: CalDavFeedItemType.Event,
 		timestamp: new Date(),
 		data: {
@@ -170,6 +179,7 @@ function caldavEvent(
 function tflAlert(id = "tfl-1", urgency = 0.8): FeedItem {
 	return {
 		id,
+		sourceId: "aelis.tfl",
 		type: TflFeedItemType.Alert,
 		timestamp: new Date(),
 		data: {
@@ -185,6 +195,7 @@ function tflAlert(id = "tfl-1", urgency = 0.8): FeedItem {
 function unknownItem(id = "unknown-1"): FeedItem {
 	return {
 		id,
+		sourceId: "unknown",
 		type: "some-future-type",
 		timestamp: new Date(),
 		data: { foo: "bar" },

packages/aelis-source-caldav/package.json

@@ -9,6 +9,7 @@
 		"test:live": "bun run scripts/test-live.ts"
 	},
 	"dependencies": {
+		"@aelis/components": "workspace:*",
 		"@aelis/core": "workspace:*",
 		"ical.js": "^2.1.0",
 		"tsdav": "^2.1.7"

packages/aelis-source-caldav/src/caldav-source.ts

@@ -133,7 +133,7 @@ export class CalDavSource implements FeedSource<CalDavFeedItem> {
 	async fetchItems(context: Context): Promise<CalDavFeedItem[]> {
 		const now = context.time
 		const events = await this.fetchEvents(context)
-		return events.map((event) => createFeedItem(event, now, this.timeZone))
+		return events.map((event) => createFeedItem(event, now, this.id, this.timeZone))
 	}
 
 	private fetchEvents(context: Context): Promise<CalDavEventData[]> {
@@ -351,9 +351,15 @@ function createEventSlots(): Record<string, Slot> {
 	}
 }
 
-function createFeedItem(event: CalDavEventData, now: Date, timeZone?: string): CalDavFeedItem {
+function createFeedItem(
+	event: CalDavEventData,
+	now: Date,
+	sourceId: string,
+	timeZone?: string,
+): CalDavFeedItem {
 	return {
 		id: `caldav-event-${event.uid}${event.recurrenceId ? `-${event.recurrenceId}` : ""}`,
+		sourceId,
 		type: CalDavFeedItemType.Event,
 		timestamp: now,
 		data: event,

packages/aelis-source-caldav/src/index.ts

@@ -1,6 +1,7 @@
 export { CalDavCalendarKey, type CalendarContext } from "./calendar-context.ts"
 export { CalDavSource, type CalDavSourceOptions } from "./caldav-source.ts"
 export { parseICalEvents, type ICalTimeRange } from "./ical-parser.ts"
+export { renderCalDavFeedItem } from "./renderer.tsx"
 export {
 	AttendeeRole,
 	AttendeeStatus,

packages/aelis-source-caldav/src/renderer.tsx

@@ -0,0 +1,74 @@
+/** @jsxImportSource @nym.sh/jrx */
+
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { FeedCard, SansSerifText, SerifText } from "@aelis/components"
+
+import type { CalDavEventData } from "./types.ts"
+
+import { CalDavEventStatus } from "./types.ts"
+
+function formatTime(date: Date): string {
+	const hours = date.getHours()
+	const minutes = date.getMinutes()
+	const period = hours >= 12 ? "PM" : "AM"
+	const h = hours % 12 || 12
+	const m = minutes.toString().padStart(2, "0")
+	return `${h}:${m} ${period}`
+}
+
+function formatTimeRange(data: CalDavEventData): string {
+	if (data.isAllDay) {
+		return "All day"
+	}
+	return `${formatTime(data.startDate)} – ${formatTime(data.endDate)}`
+}
+
+function formatStatus(status: CalDavEventData["status"]): string | null {
+	if (status === CalDavEventStatus.Cancelled) return "Cancelled"
+	if (status === CalDavEventStatus.Tentative) return "Tentative"
+	return null
+}
+
+export const renderCalDavFeedItem: FeedItemRenderer<"caldav-event", CalDavEventData> = (item) => {
+	const { data, slots } = item
+	const statusLabel = formatStatus(data.status)
+	const attendeeCount = data.attendees.length
+
+	return (
+		<FeedCard>
+			{statusLabel ? <SansSerifText content={statusLabel} style="text-xs uppercase" /> : null}
+
+			<SerifText content={data.title} style="text-lg" />
+
+			<SansSerifText content={formatTimeRange(data)} style="text-sm" />
+
+			{data.calendarName ? (
+				<SansSerifText content={data.calendarName} style="text-sm text-secondary" />
+			) : null}
+
+			{data.location ? (
+				<SansSerifText content={data.location} style="text-sm text-secondary" />
+			) : null}
+
+			{attendeeCount > 0 ? (
+				<SansSerifText
+					content={`${attendeeCount} attendee${attendeeCount === 1 ? "" : "s"}`}
+					style="text-sm text-secondary"
+				/>
+			) : null}
+
+			{slots?.insight?.content ? (
+				<SansSerifText content={slots.insight.content} style="text-sm" />
+			) : null}
+
+			{slots?.preparation?.content ? (
+				<SansSerifText content={slots.preparation.content} style="text-sm" />
+			) : null}
+
+			{slots?.crossSource?.content ? (
+				<SansSerifText content={slots.crossSource.content} style="text-sm" />
+			) : null}
+		</FeedCard>
+	)
+}

packages/aelis-source-caldav/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"jsxImportSource": "@nym.sh/jrx"
+	},
+	"include": ["src"]
+}

packages/aelis-source-google-calendar/src/google-calendar-source.ts

@@ -113,7 +113,7 @@ export class GoogleCalendarSource implements FeedSource<CalendarFeedItem> {
 		const now = context.time.getTime()
 		const lookaheadMs = this.lookaheadHours * 60 * 60 * 1000
 
-		return events.map((event) => createFeedItem(event, now, lookaheadMs))
+		return events.map((event) => createFeedItem(event, now, lookaheadMs, this.id))
 	}
 
 	private async resolveCalendarIds(): Promise<string[]> {
@@ -208,11 +208,13 @@ function createFeedItem(
 	event: CalendarEventData,
 	nowMs: number,
 	lookaheadMs: number,
+	sourceId: string,
 ): CalendarFeedItem {
 	const itemType = event.isAllDay ? CalendarFeedItemType.AllDay : CalendarFeedItemType.Event
 
 	return {
 		id: `calendar-${event.calendarId}-${event.eventId}`,
+		sourceId,
 		type: itemType,
 		timestamp: new Date(nowMs),
 		data: event,

packages/aelis-source-tfl/package.json

@@ -10,7 +10,12 @@
 	},
 	"dependencies": {
 		"@aelis/core": "workspace:*",
+		"@aelis/components": "workspace:*",
 		"@aelis/source-location": "workspace:*",
 		"arktype": "^2.1.0"
+	},
+	"peerDependencies": {
+		"@json-render/core": "*",
+		"@nym.sh/jrx": "*"
 	}
 }

packages/aelis-source-tfl/src/index.ts

@@ -11,3 +11,4 @@ export {
 	type TflLineStatus,
 	type TflSourceOptions,
 } from "./types.ts"
+export { renderTflAlert } from "./renderer.tsx"

packages/aelis-source-tfl/src/renderer.test.tsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource @nym.sh/jrx */
+import { render } from "@nym.sh/jrx"
+import { describe, expect, test } from "bun:test"
+
+import type { TflAlertFeedItem } from "./types.ts"
+
+import { renderTflAlert } from "./renderer.tsx"
+
+function makeItem(overrides: Partial<TflAlertFeedItem["data"]> = {}): TflAlertFeedItem {
+	return {
+		id: "tfl-alert-northern-minor-delays",
+		type: "tfl-alert",
+		timestamp: new Date("2026-01-15T12:00:00Z"),
+		data: {
+			line: "northern",
+			lineName: "Northern",
+			severity: "minor-delays",
+			description: "Minor delays due to signal failure",
+			closestStationDistance: null,
+			...overrides,
+		},
+	}
+}
+
+describe("renderTflAlert", () => {
+	test("renders a FeedCard with title and description", () => {
+		const node = renderTflAlert(makeItem())
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		expect(root.type).toBe("FeedCard")
+		expect(root.children!.length).toBeGreaterThanOrEqual(2)
+
+		const title = spec.elements[root.children![0]!]!
+		expect(title.type).toBe("SansSerifText")
+		expect(title.props.content).toBe("Northern · Minor delays")
+
+		const body = spec.elements[root.children![1]!]!
+		expect(body.type).toBe("SansSerifText")
+		expect(body.props.content).toBe("Minor delays due to signal failure")
+	})
+
+	test("shows nearest station distance when available", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: 0.35 }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		expect(root.children).toHaveLength(3)
+
+		const caption = spec.elements[root.children![2]!]!
+		expect(caption.type).toBe("SansSerifText")
+		expect(caption.props.content).toBe("Nearest station: 350m away")
+	})
+
+	test("formats distance in km when >= 1km", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: 2.456 }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const caption = spec.elements[root.children![2]!]!
+		expect(caption.props.content).toBe("Nearest station: 2.5km away")
+	})
+
+	test("formats near-1km boundary as km not meters", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: 0.9999 }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const caption = spec.elements[root.children![2]!]!
+		expect(caption.props.content).toBe("Nearest station: 1.0km away")
+	})
+
+	test("omits station distance when null", () => {
+		const node = renderTflAlert(makeItem({ closestStationDistance: null }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		// Title + body only, no caption (empty fragment doesn't produce a child)
+		const children = root.children!.filter((key) => {
+			const el = spec.elements[key]
+			return el && el.type !== "Fragment"
+		})
+		expect(children).toHaveLength(2)
+	})
+
+	test("renders closure severity label", () => {
+		const node = renderTflAlert(makeItem({ severity: "closure", lineName: "Central" }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const title = spec.elements[root.children![0]!]!
+		expect(title.props.content).toBe("Central · Closed")
+	})
+
+	test("renders major delays severity label", () => {
+		const node = renderTflAlert(makeItem({ severity: "major-delays", lineName: "Jubilee" }))
+		const spec = render(node)
+
+		const root = spec.elements[spec.root]!
+		const title = spec.elements[root.children![0]!]!
+		expect(title.props.content).toBe("Jubilee · Major delays")
+	})
+})

packages/aelis-source-tfl/src/renderer.tsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource @nym.sh/jrx */
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { FeedCard, SansSerifText } from "@aelis/components"
+
+import type { TflAlertData } from "./types.ts"
+
+import { TflAlertSeverity } from "./types.ts"
+
+const SEVERITY_LABEL: Record<TflAlertSeverity, string> = {
+	[TflAlertSeverity.Closure]: "Closed",
+	[TflAlertSeverity.MajorDelays]: "Major delays",
+	[TflAlertSeverity.MinorDelays]: "Minor delays",
+}
+
+function formatDistance(km: number): string {
+	const meters = Math.round(km * 1000)
+	if (meters < 1000) {
+		return `${meters}m away`
+	}
+	return `${(meters / 1000).toFixed(1)}km away`
+}
+
+export const renderTflAlert: FeedItemRenderer<"tfl-alert", TflAlertData> = (item) => {
+	const { lineName, severity, description, closestStationDistance } = item.data
+	const severityLabel = SEVERITY_LABEL[severity]
+
+	return (
+		<FeedCard>
+			<SansSerifText content={`${lineName} · ${severityLabel}`} style="text-base font-semibold" />
+			<SansSerifText content={description} style="text-sm" />
+			{closestStationDistance !== null ? (
+				<SansSerifText
+					content={`Nearest station: ${formatDistance(closestStationDistance)}`}
+					style="text-xs text-stone-500"
+				/>
+			) : null}
+		</FeedCard>
+	)
+}

packages/aelis-source-tfl/src/tfl-source.ts

@@ -151,6 +151,7 @@ export class TflSource implements FeedSource<TflAlertFeedItem> {
 
 			return {
 				id: `tfl-alert-${status.lineId}-${status.severity}`,
+				sourceId: this.id,
 				type: TflFeedItemType.Alert,
 				timestamp: context.time,
 				data,

packages/aelis-source-tfl/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"jsxImportSource": "@nym.sh/jrx"
+	},
+	"include": ["src"]
+}

packages/aelis-source-weatherkit/src/weather-source.ts

@@ -167,7 +167,9 @@ export class WeatherSource implements FeedSource<WeatherFeedItem> {
 		const items: WeatherFeedItem[] = []
 
 		if (response.currentWeather) {
-			items.push(createCurrentWeatherFeedItem(response.currentWeather, timestamp, this.units))
+			items.push(
+				createCurrentWeatherFeedItem(response.currentWeather, timestamp, this.units, this.id),
+			)
 		}
 
 		if (response.forecastHourly?.hours) {
@@ -175,7 +177,7 @@ export class WeatherSource implements FeedSource<WeatherFeedItem> {
 			for (let i = 0; i < hours.length; i++) {
 				const hour = hours[i]
 				if (hour) {
-					items.push(createHourlyWeatherFeedItem(hour, i, timestamp, this.units))
+					items.push(createHourlyWeatherFeedItem(hour, i, timestamp, this.units, this.id))
 				}
 			}
 		}
@@ -185,14 +187,14 @@ export class WeatherSource implements FeedSource<WeatherFeedItem> {
 			for (let i = 0; i < days.length; i++) {
 				const day = days[i]
 				if (day) {
-					items.push(createDailyWeatherFeedItem(day, i, timestamp, this.units))
+					items.push(createDailyWeatherFeedItem(day, i, timestamp, this.units, this.id))
 				}
 			}
 		}
 
 		if (response.weatherAlerts?.alerts) {
 			for (const alert of response.weatherAlerts.alerts) {
-				items.push(createWeatherAlertFeedItem(alert, timestamp))
+				items.push(createWeatherAlertFeedItem(alert, timestamp, this.id))
 			}
 		}
 
@@ -284,6 +286,7 @@ function createCurrentWeatherFeedItem(
 	current: CurrentWeather,
 	timestamp: Date,
 	units: Units,
+	sourceId: string,
 ): WeatherFeedItem {
 	const signals: FeedItemSignals = {
 		urgency: adjustUrgencyForCondition(BASE_URGENCY.current, current.conditionCode),
@@ -292,6 +295,7 @@ function createCurrentWeatherFeedItem(
 
 	return {
 		id: `weather-current-${timestamp.getTime()}`,
+		sourceId,
 		type: WeatherFeedItemType.Current,
 		timestamp,
 		data: {
@@ -324,6 +328,7 @@ function createHourlyWeatherFeedItem(
 	index: number,
 	timestamp: Date,
 	units: Units,
+	sourceId: string,
 ): WeatherFeedItem {
 	const signals: FeedItemSignals = {
 		urgency: adjustUrgencyForCondition(BASE_URGENCY.hourly, hourly.conditionCode),
@@ -332,6 +337,7 @@ function createHourlyWeatherFeedItem(
 
 	return {
 		id: `weather-hourly-${timestamp.getTime()}-${index}`,
+		sourceId,
 		type: WeatherFeedItemType.Hourly,
 		timestamp,
 		data: {
@@ -358,6 +364,7 @@ function createDailyWeatherFeedItem(
 	index: number,
 	timestamp: Date,
 	units: Units,
+	sourceId: string,
 ): WeatherFeedItem {
 	const signals: FeedItemSignals = {
 		urgency: adjustUrgencyForCondition(BASE_URGENCY.daily, daily.conditionCode),
@@ -366,6 +373,7 @@ function createDailyWeatherFeedItem(
 
 	return {
 		id: `weather-daily-${timestamp.getTime()}-${index}`,
+		sourceId,
 		type: WeatherFeedItemType.Daily,
 		timestamp,
 		data: {
@@ -385,7 +393,11 @@ function createDailyWeatherFeedItem(
 	}
 }
 
-function createWeatherAlertFeedItem(alert: WeatherAlert, timestamp: Date): WeatherFeedItem {
+function createWeatherAlertFeedItem(
+	alert: WeatherAlert,
+	timestamp: Date,
+	sourceId: string,
+): WeatherFeedItem {
 	const signals: FeedItemSignals = {
 		urgency: adjustUrgencyForAlertSeverity(alert.severity),
 		timeRelevance: timeRelevanceForAlertSeverity(alert.severity),
@@ -393,6 +405,7 @@ function createWeatherAlertFeedItem(alert: WeatherAlert, timestamp: Date): Weath
 
 	return {
 		id: `weather-alert-${alert.id}`,
+		sourceId,
 		type: WeatherFeedItemType.Alert,
 		timestamp,
 		data: {