feat(backend): wire feed renderers into API

Add FeedRenderer and FeedRendererProvider to support server-side
rendering of feed items via ?render=json-render query param.

- FeedRenderer maps sourceId to FeedItemRenderer, renders matching
  items and drops the rest
- FeedRendererProvider mirrors FeedSourceProvider pattern for
  per-user renderer construction
- UserSession exposes renderer, handler converts JrxNode to Spec
- Returns 400 for unknown render format, 500 if renderer missing

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/package.json

@@ -15,6 +15,7 @@
 		"@aelis/source-location": "workspace:*",
 		"@aelis/source-tfl": "workspace:*",
 		"@aelis/source-weatherkit": "workspace:*",
+		"@nym.sh/jrx": "^0.2.0",
 		"@openrouter/sdk": "^0.9.11",
 		"arktype": "^2.1.29",
 		"better-auth": "^1",

apps/aelis-backend/src/caldav/renderer-provider.ts

@@ -0,0 +1,7 @@
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { renderCalDavFeedItem } from "@aelis/source-caldav"
+
+export const CALDAV_SOURCE_ID = "aelis.caldav"
+
+export const calDavRenderer: FeedItemRenderer = renderCalDavFeedItem as FeedItemRenderer

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

@@ -1,10 +1,19 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
+import type {
+	ActionDefinition,
+	ContextEntry,
+	FeedItem,
+	FeedItemRenderer,
+	FeedSource,
+} from "@aelis/core"
+import type { Spec } from "@json-render/core"
 
 import { contextKey } from "@aelis/core"
+import { JRX_NODE } from "@nym.sh/jrx"
 import { describe, expect, test } from "bun:test"
 import { Hono } from "hono"
 
 import { mockAuthSessionMiddleware } from "../auth/session-middleware.ts"
+import { FeedRenderer } from "../session/feed-renderer.ts"
 import { UserSessionManager } from "../session/index.ts"
 import { registerFeedHttpHandlers } from "./http.ts"
 
@@ -19,6 +28,17 @@ interface FeedResponse {
 	errors: Array<{ sourceId: string; error: string }>
 }
 
+interface RenderedFeedResponse {
+	items: Array<{
+		id: string
+		type: string
+		timestamp: string
+		data: Record<string, unknown>
+		ui: Spec
+	}>
+	errors: Array<{ sourceId: string; error: string }>
+}
+
 function createStubSource(
 	id: string,
 	items: FeedItem[] = [],
@@ -150,6 +170,168 @@ describe("GET /api/feed", () => {
 	})
 })
 
+describe("GET /api/feed?render=json-render", () => {
+	const stubRenderer: FeedItemRenderer = (item) => ({
+		$$typeof: JRX_NODE,
+		type: "FeedCard",
+		props: {},
+		children: [
+			{
+				$$typeof: JRX_NODE,
+				type: "SansSerifText",
+				props: { content: `Rendered: ${item.data.value}` },
+				children: [],
+				key: undefined,
+				visible: undefined,
+				on: undefined,
+				repeat: undefined,
+				watch: undefined,
+			},
+		],
+		key: undefined,
+		visible: undefined,
+		on: undefined,
+		repeat: undefined,
+		watch: undefined,
+	})
+
+	const rendererProvider = {
+		feedRendererForUser: () => new FeedRenderer({ "test-source": stubRenderer }),
+	}
+
+	test("returns rendered items with ui field as Spec", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "item-1",
+				sourceId: "test-source",
+				type: "renderable",
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: "hello" },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+			rendererProvider,
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed?render=json-render")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as RenderedFeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("item-1")
+		expect(body.items[0]!.ui).toBeDefined()
+		expect(body.items[0]!.ui.root).toBeDefined()
+		expect(body.items[0]!.ui.elements).toBeDefined()
+	})
+
+	test("drops items without a renderer", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "renderable-1",
+				sourceId: "test-source",
+				type: "renderable",
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: "yes" },
+			},
+			{
+				id: "unrenderable-1",
+				sourceId: "other-source",
+				type: "no-renderer",
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: "no" },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+			rendererProvider,
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed?render=json-render")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as RenderedFeedResponse
+		expect(body.items).toHaveLength(1)
+		expect(body.items[0]!.id).toBe("renderable-1")
+	})
+
+	test("returns empty items when no renderers match", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "item-1",
+				sourceId: "other-source",
+				type: "no-renderer",
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: 42 },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+			rendererProvider,
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed?render=json-render")
+
+		expect(res.status).toBe(200)
+		const body = (await res.json()) as RenderedFeedResponse
+		expect(body.items).toHaveLength(0)
+	})
+
+	test("returns 400 for unknown render format", async () => {
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test")],
+			rendererProvider,
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed?render=unknown")
+
+		expect(res.status).toBe(400)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("unknown")
+	})
+
+	test("returns 500 when renderer is not available", async () => {
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test")],
+		})
+		const app = buildTestApp(manager, "user-1")
+
+		const res = await app.request("/api/feed?render=json-render")
+
+		expect(res.status).toBe(500)
+		const body = (await res.json()) as { error: string }
+		expect(body.error).toContain("not available")
+	})
+
+	test("without render param returns raw items (no ui field)", async () => {
+		const items: FeedItem[] = [
+			{
+				id: "item-1",
+				sourceId: "test-source",
+				type: "renderable",
+				timestamp: new Date("2025-01-01T00:00:00.000Z"),
+				data: { value: 42 },
+			},
+		]
+		const manager = new UserSessionManager({
+			providers: [() => createStubSource("test", items)],
+			rendererProvider,
+		})
+		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(1)
+		expect(body.items[0]!).not.toHaveProperty("ui")
+	})
+})
+
 describe("GET /api/context", () => {
 	const weatherKey = contextKey("aelis.weather", "weather")
 	const weatherData = { temperature: 20, condition: "Clear" }

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

@@ -1,6 +1,7 @@
 import type { Context, Hono } from "hono"
 
 import { contextKey } from "@aelis/core"
+import { render } from "@nym.sh/jrx"
 import { createMiddleware } from "hono/factory"
 
 import type { AuthSessionMiddleware } from "../auth/session-middleware.ts"
@@ -37,6 +38,31 @@ async function handleGetFeed(c: Context<Env>) {
 
 	const feed = await session.feed()
 
+	const renderParam = c.req.query("render")
+
+	if (renderParam !== undefined) {
+		if (renderParam !== "json-render") {
+			return c.json({ error: `Unknown render format: "${renderParam}"` }, 400)
+		}
+
+		if (!session.renderer) {
+			return c.json({ error: "Rendering is not available" }, 500)
+		}
+
+		const renderedItems = session.renderer.render(feed.items).map((item) => ({
+			...item,
+			ui: render(item.ui),
+		}))
+
+		return c.json({
+			items: renderedItems,
+			errors: feed.errors.map((e) => ({
+				sourceId: e.sourceId,
+				error: e.error.message,
+			})),
+		})
+	}
+
 	return c.json({
 		items: feed.items,
 		errors: feed.errors.map((e) => ({

apps/aelis-backend/src/server.ts

@@ -3,11 +3,13 @@ import { Hono } from "hono"
 
 import { registerAuthHandlers } from "./auth/http.ts"
 import { mockAuthSessionMiddleware, requireSession } from "./auth/session-middleware.ts"
+import { CALDAV_SOURCE_ID, calDavRenderer } from "./caldav/renderer-provider.ts"
+import { registerFeedHttpHandlers } from "./engine/http.ts"
 import { createFeedEnhancer } from "./enhancement/enhance-feed.ts"
 import { createLlmClient } from "./enhancement/llm-client.ts"
-import { registerFeedHttpHandlers } from "./engine/http.ts"
 import { registerLocationHttpHandlers } from "./location/http.ts"
-import { UserSessionManager } from "./session/index.ts"
+import { FeedRenderer, UserSessionManager } from "./session/index.ts"
+import { TFL_SOURCE_ID, tflRenderer } from "./tfl/renderer-provider.ts"
 import { WeatherSourceProvider } from "./weather/provider.ts"
 
 function main() {
@@ -24,6 +26,11 @@ function main() {
 		console.warn("[enhancement] OPENROUTER_API_KEY not set — feed enhancement disabled")
 	}
 
+	const allRenderers = {
+		[TFL_SOURCE_ID]: tflRenderer,
+		[CALDAV_SOURCE_ID]: calDavRenderer,
+	}
+
 	const sessionManager = new UserSessionManager({
 		providers: [
 			() => new LocationSource(),
@@ -36,6 +43,9 @@ function main() {
 				},
 			}),
 		],
+		rendererProvider: {
+			feedRendererForUser: (_userId) => new FeedRenderer(allRenderers),
+		},
 		feedEnhancer,
 	})
 

apps/aelis-backend/src/session/feed-renderer.ts

@@ -0,0 +1,30 @@
+import type { FeedItem, FeedItemRenderer, RenderedFeedItem } from "@aelis/core"
+
+/**
+ * Renders feed items using registered renderers.
+ *
+ * Constructed with a map of source ID to renderer function.
+ * Items whose source has no renderer are silently dropped.
+ */
+export class FeedRenderer {
+	private readonly renderers: Map<string, FeedItemRenderer>
+
+	constructor(renderers: Record<string, FeedItemRenderer>) {
+		this.renderers = new Map(Object.entries(renderers))
+	}
+
+	/**
+	 * Renders an array of feed items. Items whose sourceId has no
+	 * registered renderer are silently dropped from the result.
+	 */
+	render(items: FeedItem[]): RenderedFeedItem[] {
+		const result: RenderedFeedItem[] = []
+		for (const item of items) {
+			const renderer = this.renderers.get(item.sourceId)
+			if (renderer) {
+				result.push({ ...item, ui: renderer(item) })
+			}
+		}
+		return result
+	}
+}

apps/aelis-backend/src/session/index.ts

@@ -3,5 +3,7 @@ export type {
 	FeedSourceProviderFn,
 	FeedSourceProviderInput,
 } from "./feed-source-provider.ts"
+export { FeedRenderer } from "./feed-renderer.ts"
+export type { FeedRendererProvider } from "./renderer-provider.ts"
 export { UserSession } from "./user-session.ts"
 export { UserSessionManager } from "./user-session-manager.ts"

apps/aelis-backend/src/session/renderer-provider.ts

@@ -0,0 +1,5 @@
+import type { FeedRenderer } from "./feed-renderer.ts"
+
+export interface FeedRendererProvider {
+	feedRendererForUser(userId: string): FeedRenderer
+}

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

@@ -1,20 +1,24 @@
 import type { FeedEnhancer } from "../enhancement/enhance-feed.ts"
 import type { FeedSourceProviderInput } from "./feed-source-provider.ts"
+import type { FeedRendererProvider } from "./renderer-provider.ts"
 
 import { UserSession } from "./user-session.ts"
 
 export interface UserSessionManagerConfig {
 	providers: FeedSourceProviderInput[]
+	rendererProvider?: FeedRendererProvider | null
 	feedEnhancer?: FeedEnhancer | null
 }
 
 export class UserSessionManager {
 	private sessions = new Map<string, UserSession>()
 	private readonly providers: FeedSourceProviderInput[]
+	private readonly rendererProvider: FeedRendererProvider | null
 	private readonly feedEnhancer: FeedEnhancer | null
 
 	constructor(config: UserSessionManagerConfig) {
 		this.providers = config.providers
+		this.rendererProvider = config.rendererProvider ?? null
 		this.feedEnhancer = config.feedEnhancer ?? null
 	}
 
@@ -24,7 +28,11 @@ export class UserSessionManager {
 			const sources = this.providers.map((p) =>
 				typeof p === "function" ? p(userId) : p.feedSourceForUser(userId),
 			)
-			session = new UserSession(sources, this.feedEnhancer)
+			session = new UserSession({
+				sources,
+				enhancer: this.feedEnhancer,
+				renderer: this.rendererProvider?.feedRendererForUser(userId) ?? null,
+			})
 			this.sessions.set(userId, session)
 		}
 		return session

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

@@ -1,8 +1,16 @@
-import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/core"
+import type {
+	ActionDefinition,
+	ContextEntry,
+	FeedItem,
+	FeedItemRenderer,
+	FeedSource,
+} from "@aelis/core"
 
 import { LocationSource } from "@aelis/source-location"
+import { JRX_NODE } from "@nym.sh/jrx"
 import { describe, expect, test } from "bun:test"
 
+import { FeedRenderer } from "./feed-renderer.ts"
 import { UserSession } from "./user-session.ts"
 
 function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
@@ -25,7 +33,9 @@ function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
 
 describe("UserSession", () => {
 	test("registers sources and starts engine", async () => {
-		const session = new UserSession([createStubSource("test-a"), createStubSource("test-b")])
+		const session = new UserSession({
+			sources: [createStubSource("test-a"), createStubSource("test-b")],
+		})
 
 		const result = await session.engine.refresh()
 
@@ -34,7 +44,7 @@ describe("UserSession", () => {
 
 	test("getSource returns registered source", () => {
 		const location = new LocationSource()
-		const session = new UserSession([location])
+		const session = new UserSession({ sources: [location] })
 
 		const result = session.getSource<LocationSource>("aelis.location")
 
@@ -42,13 +52,13 @@ describe("UserSession", () => {
 	})
 
 	test("getSource returns undefined for unknown source", () => {
-		const session = new UserSession([createStubSource("test")])
+		const session = new UserSession({ sources: [createStubSource("test")] })
 
 		expect(session.getSource("unknown")).toBeUndefined()
 	})
 
 	test("destroy stops engine and clears sources", () => {
-		const session = new UserSession([createStubSource("test")])
+		const session = new UserSession({ sources: [createStubSource("test")] })
 
 		session.destroy()
 
@@ -57,7 +67,7 @@ describe("UserSession", () => {
 
 	test("engine.executeAction routes to correct source", async () => {
 		const location = new LocationSource()
-		const session = new UserSession([location])
+		const session = new UserSession({ sources: [location] })
 
 		await session.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5,
@@ -82,7 +92,7 @@ describe("UserSession.feed", () => {
 				data: { value: 42 },
 			},
 		]
-		const session = new UserSession([createStubSource("test", items)])
+		const session = new UserSession({ sources: [createStubSource("test", items)] })
 
 		const result = await session.feed()
 
@@ -103,7 +113,7 @@ describe("UserSession.feed", () => {
 		const enhancer = async (feedItems: FeedItem[]) =>
 			feedItems.map((item) => ({ ...item, data: { ...item.data, enhanced: true } }))
 
-		const session = new UserSession([createStubSource("test", items)], enhancer)
+		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
 
 		const result = await session.feed()
 
@@ -127,7 +137,7 @@ describe("UserSession.feed", () => {
 			return feedItems.map((item) => ({ ...item, data: { ...item.data, enhanced: true } }))
 		}
 
-		const session = new UserSession([createStubSource("test", items)], enhancer)
+		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
 
 		const result1 = await session.feed()
 		expect(result1.items[0]!.data.enhanced).toBe(true)
@@ -162,7 +172,7 @@ describe("UserSession.feed", () => {
 			}))
 		}
 
-		const session = new UserSession([source], enhancer)
+		const session = new UserSession({ sources: [source], enhancer })
 
 		// First feed triggers refresh + enhancement
 		const result1 = await session.feed()
@@ -205,7 +215,7 @@ describe("UserSession.feed", () => {
 			throw new Error("enhancement exploded")
 		}
 
-		const session = new UserSession([createStubSource("test", items)], enhancer)
+		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
 
 		const result = await session.feed()
 
@@ -214,3 +224,81 @@ describe("UserSession.feed", () => {
 		expect(result.items[0]!.data.value).toBe(42)
 	})
 })
+
+describe("FeedRenderer", () => {
+	const stubRenderer: FeedItemRenderer = (item) => ({
+		$$typeof: JRX_NODE,
+		type: "FeedCard",
+		props: { content: item.data.value },
+		children: [],
+		key: undefined,
+		visible: undefined,
+		on: undefined,
+		repeat: undefined,
+		watch: undefined,
+	})
+
+	function makeItem(sourceId: string): FeedItem {
+		return {
+			id: `item-${sourceId}`,
+			sourceId,
+			type: "some-type",
+			timestamp: new Date("2025-01-01T00:00:00.000Z"),
+			data: { value: 42 },
+		}
+	}
+
+	test("renders items with matching sourceId", () => {
+		const renderer = new FeedRenderer({ "test-source": stubRenderer })
+
+		const result = renderer.render([makeItem("test-source")])
+
+		expect(result).toHaveLength(1)
+		expect(result[0]!.ui).toBeDefined()
+		expect(result[0]!.id).toBe("item-test-source")
+	})
+
+	test("drops items without a matching renderer", () => {
+		const renderer = new FeedRenderer({ "test-source": stubRenderer })
+
+		const result = renderer.render([makeItem("unknown-source")])
+
+		expect(result).toHaveLength(0)
+	})
+
+	test("filters mixed items", () => {
+		const renderer = new FeedRenderer({ "test-source": stubRenderer })
+
+		const result = renderer.render([makeItem("test-source"), makeItem("unknown-source")])
+
+		expect(result).toHaveLength(1)
+		expect(result[0]!.id).toBe("item-test-source")
+	})
+
+	test("renders empty array for empty input", () => {
+		const renderer = new FeedRenderer({ "test-source": stubRenderer })
+
+		expect(renderer.render([])).toHaveLength(0)
+	})
+
+	test("renders with no renderers registered", () => {
+		const renderer = new FeedRenderer({})
+
+		expect(renderer.render([makeItem("test-source")])).toHaveLength(0)
+	})
+})
+
+describe("UserSession.renderer", () => {
+	test("exposes renderer when provided", () => {
+		const renderer = new FeedRenderer({})
+		const session = new UserSession({ sources: [createStubSource("test")], renderer })
+
+		expect(session.renderer).toBe(renderer)
+	})
+
+	test("renderer is null when not provided", () => {
+		const session = new UserSession({ sources: [createStubSource("test")] })
+
+		expect(session.renderer).toBeNull()
+	})
+})

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

@@ -1,9 +1,17 @@
 import { FeedEngine, type FeedItem, type FeedResult, type FeedSource } from "@aelis/core"
 
 import type { FeedEnhancer } from "../enhancement/enhance-feed.ts"
+import type { FeedRenderer } from "./feed-renderer.ts"
+
+export interface UserSessionOptions {
+	sources: FeedSource[]
+	enhancer?: FeedEnhancer | null
+	renderer?: FeedRenderer | null
+}
 
 export class UserSession {
 	readonly engine: FeedEngine
+	readonly renderer: FeedRenderer | null
 	private sources = new Map<string, FeedSource>()
 	private readonly enhancer: FeedEnhancer | null
 	private enhancedItems: FeedItem[] | null = null
@@ -12,10 +20,11 @@ export class UserSession {
 	private enhancingPromise: Promise<void> | null = null
 	private unsubscribe: (() => void) | null = null
 
-	constructor(sources: FeedSource[], enhancer?: FeedEnhancer | null) {
+	constructor(options: UserSessionOptions) {
 		this.engine = new FeedEngine()
-		this.enhancer = enhancer ?? null
-		for (const source of sources) {
+		this.enhancer = options.enhancer ?? null
+		this.renderer = options.renderer ?? null
+		for (const source of options.sources) {
 			this.sources.set(source.id, source)
 			this.engine.register(source)
 		}

apps/aelis-backend/src/tfl/renderer-provider.ts

@@ -0,0 +1,7 @@
+import type { FeedItemRenderer } from "@aelis/core"
+
+import { renderTflAlert } from "@aelis/source-tfl"
+
+export const TFL_SOURCE_ID = "aelis.tfl"
+
+export const tflRenderer: FeedItemRenderer = renderTflAlert as FeedItemRenderer

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",
@@ -25,6 +25,7 @@
         "@aelis/source-location": "workspace:*",
         "@aelis/source-tfl": "workspace:*",
         "@aelis/source-weatherkit": "workspace:*",
+        "@nym.sh/jrx": "^0.2.0",
         "@openrouter/sdk": "^0.9.11",
         "arktype": "^2.1.29",
         "better-auth": "^1",
@@ -152,6 +153,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",
@@ -177,10 +179,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",
@@ -691,7 +698,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=="],
 

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-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/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-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/tsconfig.json

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