feat(client): wire up API client and react-query (#75)

* feat(client): wire up API client and react-query

Add ApiClient class, auth middleware placeholder, feed query,
and wrap the app in QueryClientProvider.

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

* fix(client): append base url on api client req

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

* fix(client): allow req middlewares to run on empty init

* fix(client): rm unused private route declr

* fix(client): handle empty url in client.request

Co-authored-by: ona-patrol <ona@nym.sh>

---------

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

apps/aelis-backend/package.json

@@ -15,7 +15,6 @@
 		"@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

@@ -1,7 +0,0 @@
-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,19 +1,10 @@
-import type {
-	ActionDefinition,
-	ContextEntry,
-	FeedItem,
-	FeedItemRenderer,
-	FeedSource,
-} from "@aelis/core"
-import type { Spec } from "@json-render/core"
+import type { ActionDefinition, ContextEntry, FeedItem, FeedSource } from "@aelis/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"
 
@@ -28,17 +19,6 @@ 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[] = [],
@@ -170,168 +150,6 @@ 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,7 +1,6 @@
 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"
@@ -38,31 +37,6 @@ 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,13 +3,11 @@ 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 { FeedRenderer, UserSessionManager } from "./session/index.ts"
-import { TFL_SOURCE_ID, tflRenderer } from "./tfl/renderer-provider.ts"
+import { UserSessionManager } from "./session/index.ts"
 import { WeatherSourceProvider } from "./weather/provider.ts"
 
 function main() {
@@ -26,11 +24,6 @@ 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(),
@@ -43,9 +36,6 @@ function main() {
 				},
 			}),
 		],
-		rendererProvider: {
-			feedRendererForUser: (_userId) => new FeedRenderer(allRenderers),
-		},
 		feedEnhancer,
 	})
 

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

@@ -1,30 +0,0 @@
-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,7 +3,5 @@ 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

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

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

@@ -1,24 +1,20 @@
 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
 	}
 
@@ -28,11 +24,7 @@ export class UserSessionManager {
 			const sources = this.providers.map((p) =>
 				typeof p === "function" ? p(userId) : p.feedSourceForUser(userId),
 			)
-			session = new UserSession({
-				sources,
-				enhancer: this.feedEnhancer,
-				renderer: this.rendererProvider?.feedRendererForUser(userId) ?? null,
-			})
+			session = new UserSession(sources, this.feedEnhancer)
 			this.sessions.set(userId, session)
 		}
 		return session

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

@@ -1,16 +1,8 @@
-import type {
-	ActionDefinition,
-	ContextEntry,
-	FeedItem,
-	FeedItemRenderer,
-	FeedSource,
-} from "@aelis/core"
+import type { ActionDefinition, ContextEntry, FeedItem, 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 {
@@ -33,9 +25,7 @@ function createStubSource(id: string, items: FeedItem[] = []): FeedSource {
 
 describe("UserSession", () => {
 	test("registers sources and starts engine", async () => {
-		const session = new UserSession({
-			sources: [createStubSource("test-a"), createStubSource("test-b")],
-		})
+		const session = new UserSession([createStubSource("test-a"), createStubSource("test-b")])
 
 		const result = await session.engine.refresh()
 
@@ -44,7 +34,7 @@ describe("UserSession", () => {
 
 	test("getSource returns registered source", () => {
 		const location = new LocationSource()
-		const session = new UserSession({ sources: [location] })
+		const session = new UserSession([location])
 
 		const result = session.getSource<LocationSource>("aelis.location")
 
@@ -52,13 +42,13 @@ describe("UserSession", () => {
 	})
 
 	test("getSource returns undefined for unknown source", () => {
-		const session = new UserSession({ sources: [createStubSource("test")] })
+		const session = new UserSession([createStubSource("test")])
 
 		expect(session.getSource("unknown")).toBeUndefined()
 	})
 
 	test("destroy stops engine and clears sources", () => {
-		const session = new UserSession({ sources: [createStubSource("test")] })
+		const session = new UserSession([createStubSource("test")])
 
 		session.destroy()
 
@@ -67,7 +57,7 @@ describe("UserSession", () => {
 
 	test("engine.executeAction routes to correct source", async () => {
 		const location = new LocationSource()
-		const session = new UserSession({ sources: [location] })
+		const session = new UserSession([location])
 
 		await session.engine.executeAction("aelis.location", "update-location", {
 			lat: 51.5,
@@ -92,7 +82,7 @@ describe("UserSession.feed", () => {
 				data: { value: 42 },
 			},
 		]
-		const session = new UserSession({ sources: [createStubSource("test", items)] })
+		const session = new UserSession([createStubSource("test", items)])
 
 		const result = await session.feed()
 
@@ -113,7 +103,7 @@ describe("UserSession.feed", () => {
 		const enhancer = async (feedItems: FeedItem[]) =>
 			feedItems.map((item) => ({ ...item, data: { ...item.data, enhanced: true } }))
 
-		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
+		const session = new UserSession([createStubSource("test", items)], enhancer)
 
 		const result = await session.feed()
 
@@ -137,7 +127,7 @@ describe("UserSession.feed", () => {
 			return feedItems.map((item) => ({ ...item, data: { ...item.data, enhanced: true } }))
 		}
 
-		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
+		const session = new UserSession([createStubSource("test", items)], enhancer)
 
 		const result1 = await session.feed()
 		expect(result1.items[0]!.data.enhanced).toBe(true)
@@ -172,7 +162,7 @@ describe("UserSession.feed", () => {
 			}))
 		}
 
-		const session = new UserSession({ sources: [source], enhancer })
+		const session = new UserSession([source], enhancer)
 
 		// First feed triggers refresh + enhancement
 		const result1 = await session.feed()
@@ -215,7 +205,7 @@ describe("UserSession.feed", () => {
 			throw new Error("enhancement exploded")
 		}
 
-		const session = new UserSession({ sources: [createStubSource("test", items)], enhancer })
+		const session = new UserSession([createStubSource("test", items)], enhancer)
 
 		const result = await session.feed()
 
@@ -224,81 +214,3 @@ 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,17 +1,9 @@
 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
@@ -20,11 +12,10 @@ export class UserSession {
 	private enhancingPromise: Promise<void> | null = null
 	private unsubscribe: (() => void) | null = null
 
-	constructor(options: UserSessionOptions) {
+	constructor(sources: FeedSource[], enhancer?: FeedEnhancer | null) {
 		this.engine = new FeedEngine()
-		this.enhancer = options.enhancer ?? null
-		this.renderer = options.renderer ?? null
-		for (const source of options.sources) {
+		this.enhancer = enhancer ?? null
+		for (const source of sources) {
 			this.sources.set(source.id, source)
 			this.engine.register(source)
 		}

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

@@ -1,7 +0,0 @@
-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

apps/aelis-client/package.json

@@ -22,6 +22,7 @@
 		"@react-navigation/bottom-tabs": "^7.4.0",
 		"@react-navigation/elements": "^2.6.3",
 		"@react-navigation/native": "^7.1.8",
+		"@tanstack/react-query": "^5.90.21",
 		"expo": "~54.0.33",
 		"expo-constants": "~18.0.13",
 		"expo-dev-client": "~6.0.20",

apps/aelis-client/src/api/auth-middleware.ts

@@ -0,0 +1,6 @@
+import { ApiRequestMiddleware } from "./client"
+
+export const authMiddleware: ApiRequestMiddleware = (_url, init) => {
+	// TODO: placeholder auth middleware
+	return init
+}

apps/aelis-client/src/api/client.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext } from "react"
+
+export type ApiRequestMiddleware = (
+	url: Parameters<typeof fetch>[0],
+	init: RequestInit,
+) => RequestInit
+
+export class ApiClient {
+	private readonly baseUrl: string
+	private readonly middlewares: readonly ApiRequestMiddleware[]
+
+	static noop = new ApiClient({ baseUrl: "" })
+
+	constructor({
+		baseUrl,
+		middlewares = [],
+	}: {
+		baseUrl: string
+		middlewares?: ApiRequestMiddleware[]
+	}) {
+		this.baseUrl = baseUrl
+		this.middlewares = middlewares
+	}
+
+	async request<T>(...[url, init = {}]: Parameters<typeof fetch>): Promise<[Response, T]> {
+		const finalInit = this.middlewares.reduce(
+			(prevInit, middleware) => middleware(url, prevInit),
+			init,
+		)
+		return fetch(this.baseUrl ? new URL(url.toString(), this.baseUrl) : url, finalInit).then((res) =>
+			Promise.all([Promise.resolve(res), res.json()]),
+		)
+	}
+}
+
+export const ApiClientContext = createContext(ApiClient.noop)
+export function useApiClient() {
+	return useContext(ApiClientContext)
+}

apps/aelis-client/src/app/_layout.tsx

@@ -1,17 +1,29 @@
 import "react-native-reanimated"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { Stack } from "expo-router"
 import { StatusBar } from "expo-status-bar"
+import React from "react"
 import { useColorScheme } from "react-native"
 import tw, { useDeviceContext } from "twrnc"
 
+import { authMiddleware } from "@/api/auth-middleware"
+import { ApiClient, ApiClientContext } from "@/api/client"
+
+const queryClient = new QueryClient()
+const apiClient = new ApiClient({
+	baseUrl: process.env.EXPO_PUBLIC_API_BASE_URL ?? "",
+	middlewares: [authMiddleware],
+})
+
 export default function RootLayout() {
 	useDeviceContext(tw)
+
 	const colorScheme = useColorScheme()
 	const headerBg = colorScheme === "dark" ? "#1c1917" : "#f5f5f4"
 	const headerTint = colorScheme === "dark" ? "#e7e5e4" : "#1c1917"
 
 	return (
-		<>
+		<ContextProvider>
 			<Stack
 				screenOptions={{
 					headerShown: false,
@@ -40,6 +52,14 @@ export default function RootLayout() {
 				/>
 			</Stack>
 			<StatusBar style="auto" />
-		</>
+		</ContextProvider>
+	)
+}
+
+function ContextProvider({ children }: React.PropsWithChildren) {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<ApiClientContext value={apiClient}>{children}</ApiClientContext>
+		</QueryClientProvider>
 	)
 }

apps/aelis-client/src/feed/queries.ts

@@ -0,0 +1,13 @@
+import { queryOptions } from "@tanstack/react-query"
+
+import { useApiClient } from "@/api/client"
+
+import { FeedItem } from "./types"
+
+export function useFeedQuery() {
+	const api = useApiClient()
+	return queryOptions({
+		queryKey: ["feed"],
+		queryFn: async () => api.request<{ items: FeedItem[] }>("/feed?render=json-render"),
+	})
+}

apps/aelis-client/src/feed/types.ts

@@ -0,0 +1,5 @@
+import { Spec } from "@json-render/core"
+
+export interface FeedItem {
+	ui: Spec
+}

bun.lock

@@ -25,7 +25,6 @@
         "@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",
@@ -47,6 +46,7 @@
         "@react-navigation/bottom-tabs": "^7.4.0",
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.8",
+        "@tanstack/react-query": "^5.90.21",
         "expo": "~54.0.33",
         "expo-constants": "~18.0.13",
         "expo-dev-client": "~6.0.20",
@@ -1190,6 +1190,10 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.1", "", { "dependencies": { "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "tailwindcss": "4.2.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
+
     "@tsconfig/node10": ["@tsconfig/node10@1.0.12", "", {}, "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ=="],
 
     "@tsconfig/node12": ["@tsconfig/node12@1.0.11", "", {}, "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="],