diff --git a/apps/backend/setup.json b/apps/backend/setup.json
index 3623c1be..97223e9e 100644
--- a/apps/backend/setup.json
+++ b/apps/backend/setup.json
@@ -1,5 +1,5 @@
 {
-	"hw": "jetson",
+	"hw": "rk3588",
 	"ceracoder_path": "./mocks/ceracoder/",
 	"ceracoder_config": "/tmp/ceracoder.conf",
 	"srtla_path": "./mocks/srtla/",
diff --git a/apps/backend/src/modules/streaming/pipelines.ts b/apps/backend/src/modules/streaming/pipelines.ts
index 59ddd84d..a18f6981 100644
--- a/apps/backend/src/modules/streaming/pipelines.ts
+++ b/apps/backend/src/modules/streaming/pipelines.ts
@@ -120,7 +120,13 @@ export function searchPipelines(id: string): Pipeline | null {
 // Pipeline list in the format needed by the frontend
 type PipelineResponseEntry = Pick<
 	Pipeline,
-	"name" | "description" | "supportsAudio" | "supportsResolutionOverride" | "supportsFramerateOverride"
+	| "name"
+	| "description"
+	| "supportsAudio"
+	| "supportsResolutionOverride"
+	| "supportsFramerateOverride"
+	| "defaultResolution"
+	| "defaultFramerate"
 >;
 
 export function getPipelineList() {
@@ -135,11 +141,23 @@ export function getPipelineList() {
 			supportsAudio: pipeline.supportsAudio,
 			supportsResolutionOverride: pipeline.supportsResolutionOverride,
 			supportsFramerateOverride: pipeline.supportsFramerateOverride,
+			defaultResolution: pipeline.defaultResolution,
+			defaultFramerate: pipeline.defaultFramerate,
 		};
 	}
 	return list;
 }
 
+/**
+ * Get pipelines message with hardware info (for WebSocket broadcast)
+ */
+export function getPipelinesMessage() {
+	return {
+		hardware: getEffectiveHardware(),
+		pipelines: getPipelineList(),
+	};
+}
+
 /**
  * Generate a pipeline file with overrides
  */
diff --git a/apps/backend/src/modules/ui/status.ts b/apps/backend/src/modules/ui/status.ts
index 5c3b4187..c55d96f5 100644
--- a/apps/backend/src/modules/ui/status.ts
+++ b/apps/backend/src/modules/ui/status.ts
@@ -23,7 +23,7 @@ import { netIfBuildMsg } from "../network/network-interfaces.ts";
 import { buildRelaysMsg, getRelays } from "../remote/remote-relays.ts";
 import { getAudioDevices } from "../streaming/audio.ts";
 import { AUDIO_CODECS } from "@ceralive/ceracoder";
-import { getPipelineList } from "../streaming/pipelines.ts";
+import { getPipelinesMessage } from "../streaming/pipelines.ts";
 import { getIsStreaming } from "../streaming/streaming.ts";
 import { getRevisions } from "../system/revisions.ts";
 import { getSensors } from "../system/sensors.ts";
@@ -65,7 +65,7 @@ export function sendStatus(conn: WebSocket) {
 export function sendInitialStatus(conn: WebSocket) {
 	const config = getConfig();
 	conn.send(buildMsg("config", config));
-	conn.send(buildMsg("pipelines", getPipelineList()));
+	conn.send(buildMsg("pipelines", getPipelinesMessage()));
 	if (getRelays()) conn.send(buildMsg("relays", buildRelaysMsg()));
 	sendStatus(conn);
 	conn.send(buildMsg("netif", netIfBuildMsg()));
diff --git a/apps/backend/src/rpc/procedures/status.procedure.ts b/apps/backend/src/rpc/procedures/status.procedure.ts
index 00e58307..67db4c13 100644
--- a/apps/backend/src/rpc/procedures/status.procedure.ts
+++ b/apps/backend/src/rpc/procedures/status.procedure.ts
@@ -15,7 +15,7 @@ import {
 } from "../../modules/remote/remote-relays.ts";
 import { getAudioDevices } from "../../modules/streaming/audio.ts";
 import { AUDIO_CODECS } from "@ceralive/ceracoder";
-import { getPipelineList } from "../../modules/streaming/pipelines.ts";
+import { getPipelinesMessage } from "../../modules/streaming/pipelines.ts";
 import { getIsStreaming } from "../../modules/streaming/streaming.ts";
 import { getRevisions } from "../../modules/system/revisions.ts";
 import { getSensors } from "../../modules/system/sensors.ts";
@@ -71,7 +71,7 @@ export function buildInitialStatus() {
 	const config = getConfig();
 	return {
 		config,
-		pipelines: getPipelineList(),
+		pipelines: getPipelinesMessage(),
 		relays: getRelays() ? buildRelaysMsg() : null,
 		status: {
 			is_streaming: getIsStreaming(),
diff --git a/apps/backend/src/rpc/procedures/streaming.procedure.ts b/apps/backend/src/rpc/procedures/streaming.procedure.ts
index 6b7c9ebb..3a482238 100644
--- a/apps/backend/src/rpc/procedures/streaming.procedure.ts
+++ b/apps/backend/src/rpc/procedures/streaming.procedure.ts
@@ -9,7 +9,7 @@ import {
 	bitrateOutputSchema,
 	configMessageSchema,
 	getMockHardwareOutputSchema,
-	pipelinesSchema,
+	pipelinesMessageSchema,
 	setMockHardwareInputSchema,
 	setMockHardwareOutputSchema,
 	streamingConfigInputSchema,
@@ -25,6 +25,7 @@ import {
 	getEffectiveHardware,
 	getMockHardware,
 	getPipelineList,
+	getPipelinesMessage,
 	initPipelines,
 	setMockHardware,
 	VALID_HARDWARE_TYPES,
@@ -88,12 +89,15 @@ export const setBitrateProcedure = authedProcedure
 	});
 
 /**
- * Get pipelines procedure
+ * Get pipelines procedure - returns pipelines with hardware info
  */
 export const getPipelinesProcedure = authedProcedure
-	.output(pipelinesSchema)
+	.output(pipelinesMessageSchema)
 	.handler(() => {
-		return getPipelineList();
+		return {
+			hardware: getEffectiveHardware(),
+			pipelines: getPipelineList(),
+		};
 	});
 
 /**
@@ -149,7 +153,7 @@ export const setMockHardwareProcedure = authedProcedure
 		if (success) {
 			// Reload pipelines and broadcast to all clients
 			initPipelines();
-			broadcastMsg("pipelines", getPipelineList());
+			broadcastMsg("pipelines", getPipelinesMessage());
 			return {
 				success: true,
 				hardware: input.hardware,
diff --git a/apps/frontend/docs/DEVTOOLS.md b/apps/frontend/docs/DEVTOOLS.md
index df757f8c..6f39a75a 100644
--- a/apps/frontend/docs/DEVTOOLS.md
+++ b/apps/frontend/docs/DEVTOOLS.md
@@ -63,6 +63,21 @@ The DevTools tab displays real-time information about the current development en
   - Test toast queue management
 - **Usage**: Click various buttons to trigger different toast notifications
 
+#### 🔧 Mock Hardware Switcher
+- **Purpose**: Switch between hardware profiles to test different pipeline configurations
+- **Features**:
+  - **Hardware Profiles**: Switch between Jetson, RK3588, N100, and Generic (software)
+  - **Live Reload**: Pipelines update immediately and broadcast to all connected clients
+  - **Quick Switch Buttons**: Color-coded buttons for rapid hardware switching
+  - **Dropdown Selector**: Detailed view with hardware descriptions
+  - **State Display**: Shows effective hardware and current mock override
+- **Hardware Types**:
+  - 🟢 **NVIDIA Jetson**: NVIDIA nvenc hardware encoding
+  - 🟠 **Rockchip RK3588**: Rockchip MPP hardware encoding (supports 4K)
+  - 🔵 **Intel N100**: Intel VAAPI hardware encoding
+  - ⚪ **Generic**: Software x264/x265 encoding
+- **Usage**: Select a hardware profile to reload pipelines for that platform. The encoder settings will update to show available video sources for the selected hardware.
+
 ### 📊 System Information
 
 Real-time system and browser information display:
diff --git a/apps/frontend/src/lib/components/dev-tools/hardware-switcher.svelte b/apps/frontend/src/lib/components/dev-tools/hardware-switcher.svelte
index 7f9572ae..130d5b26 100644
--- a/apps/frontend/src/lib/components/dev-tools/hardware-switcher.svelte
+++ b/apps/frontend/src/lib/components/dev-tools/hardware-switcher.svelte
@@ -1,51 +1,55 @@
 <script lang="ts">
 import { Cpu, Loader2, RefreshCw } from '@lucide/svelte';
 import { toast } from 'svelte-sonner';
+import {
+	type HardwareType,
+	HARDWARE_LABELS,
+	HARDWARE_DESCRIPTIONS,
+	HARDWARE_COLORS,
+	hardwareTypeSchema,
+} from '@ceraui/rpc/schemas';
 
 import { Button } from '$lib/components/ui/button';
 import * as Card from '$lib/components/ui/card';
 import { Label } from '$lib/components/ui/label';
 import * as Select from '$lib/components/ui/select';
-import { rpc } from '$lib/rpc';
+import { rpc, getIsConnected } from '$lib/rpc';
 
-type HardwareType = 'jetson' | 'n100' | 'rk3588';
+// All available hardware types from schema
+const ALL_HARDWARE_TYPES = hardwareTypeSchema.options as HardwareType[];
 
 // State
 let selectedHardware = $state<HardwareType | null>(null);
-let effectiveHardware = $state<string>('unknown');
-let availableHardware = $state<HardwareType[]>(['jetson', 'n100', 'rk3588']);
+let effectiveHardware = $state<string>('loading...');
+let availableHardware = $state<HardwareType[]>(ALL_HARDWARE_TYPES);
 let isLoading = $state(false);
 let isInitialized = $state(false);
-
-// Hardware type display info
-const hardwareInfo: Record<HardwareType, { name: string; description: string; color: string }> = {
-	jetson: {
-		name: 'NVIDIA Jetson',
-		description: 'NVIDIA nvenc hardware encoding',
-		color: 'text-green-600 dark:text-green-400',
-	},
-	n100: {
-		name: 'Intel N100',
-		description: 'Intel VAAPI hardware encoding',
-		color: 'text-blue-600 dark:text-blue-400',
-	},
-	rk3588: {
-		name: 'Rockchip RK3588',
-		description: 'Rockchip MPP hardware encoding (supports 4K)',
-		color: 'text-orange-600 dark:text-orange-400',
-	},
-};
+let loadError = $state<string | null>(null);
 
 // Load current hardware state on mount
 async function loadHardwareState() {
+	isLoading = true;
+	loadError = null;
 	try {
+		// Wait for connection if not connected
+		const isConnected = getIsConnected();
+		if (!isConnected) {
+			effectiveHardware = 'connecting...';
+			// Retry after a short delay
+			await new Promise(resolve => setTimeout(resolve, 1000));
+		}
+		
 		const state = await rpc.streaming.getMockHardware();
 		selectedHardware = state.hardware;
 		effectiveHardware = state.effectiveHardware;
 		availableHardware = state.availableHardware;
 		isInitialized = true;
-	} catch (_error) {
-		toast.error('Failed to load hardware state');
+	} catch (error) {
+		loadError = error instanceof Error ? error.message : 'Failed to load';
+		effectiveHardware = 'error';
+		console.error('Failed to load hardware state:', error);
+	} finally {
+		isLoading = false;
 	}
 }
 
@@ -59,7 +63,7 @@ async function switchHardware(hardware: HardwareType) {
 		if (result.success) {
 			selectedHardware = result.hardware ?? null;
 			effectiveHardware = hardware;
-			toast.success(`Switched to ${hardwareInfo[hardware].name}`, {
+			toast.success(`Switched to ${HARDWARE_LABELS[hardware]}`, {
 				description: 'Pipelines reloaded and broadcast to all clients',
 			});
 		} else {
@@ -107,13 +111,21 @@ $effect(() => {
 			<div class="grid grid-cols-2 gap-4 text-sm">
 				<div>
 					<span class="text-muted-foreground">Effective Hardware:</span>
-					<span class="ml-2 font-mono font-medium">{effectiveHardware}</span>
+					<span class="ml-2 font-mono font-medium" class:text-yellow-500={effectiveHardware === 'loading...' || effectiveHardware === 'connecting...'} class:text-red-500={effectiveHardware === 'error'}>
+						{#if isLoading && !isInitialized}
+							<Loader2 class="inline h-3 w-3 animate-spin mr-1" />
+						{/if}
+						{effectiveHardware}
+					</span>
 				</div>
 				<div>
 					<span class="text-muted-foreground">Mock Override:</span>
 					<span class="ml-2 font-mono font-medium">{selectedHardware ?? 'None'}</span>
 				</div>
 			</div>
+			{#if loadError}
+				<div class="mt-2 text-xs text-red-500">{loadError}</div>
+			{/if}
 		</div>
 
 		<!-- Hardware Selector -->
@@ -131,16 +143,8 @@ $effect(() => {
 						Switching...
 					{:else if selectedHardware}
 						<div class="flex items-center gap-2">
-							<div
-								class={`h-2 w-2 rounded-full ${
-									selectedHardware === 'jetson'
-										? 'bg-green-500'
-										: selectedHardware === 'n100'
-											? 'bg-blue-500'
-											: 'bg-orange-500'
-								}`}
-							></div>
-							{hardwareInfo[selectedHardware].name}
+							<div class={`h-2 w-2 rounded-full ${HARDWARE_COLORS[selectedHardware].bg}`}></div>
+							{HARDWARE_LABELS[selectedHardware]}
 						</div>
 					{:else}
 						Select hardware...
@@ -151,18 +155,10 @@ $effect(() => {
 						{#each availableHardware as hw}
 							<Select.Item value={hw}>
 								<div class="flex items-center gap-2">
-									<div
-										class={`h-2 w-2 rounded-full ${
-											hw === 'jetson'
-												? 'bg-green-500'
-												: hw === 'n100'
-													? 'bg-blue-500'
-													: 'bg-orange-500'
-										}`}
-									></div>
+									<div class={`h-2 w-2 rounded-full ${HARDWARE_COLORS[hw].bg}`}></div>
 									<div>
-										<div class="font-medium">{hardwareInfo[hw].name}</div>
-										<div class="text-muted-foreground text-xs">{hardwareInfo[hw].description}</div>
+										<div class="font-medium">{HARDWARE_LABELS[hw]}</div>
+										<div class="text-muted-foreground text-xs">{HARDWARE_DESCRIPTIONS[hw]}</div>
 									</div>
 								</div>
 							</Select.Item>
@@ -175,18 +171,10 @@ $effect(() => {
 		<!-- Quick Switch Buttons -->
 		<div class="space-y-2">
 			<Label class="text-sm font-medium">Quick Switch</Label>
-			<div class="grid grid-cols-3 gap-2">
+			<div class="grid grid-cols-2 gap-2">
 				{#each availableHardware as hw}
 					<Button
-						class={`${
-							selectedHardware === hw
-								? hw === 'jetson'
-									? 'border-green-500 bg-green-500/20'
-									: hw === 'n100'
-										? 'border-blue-500 bg-blue-500/20'
-										: 'border-orange-500 bg-orange-500/20'
-								: ''
-						}`}
+						class={selectedHardware === hw ? HARDWARE_COLORS[hw].border : ''}
 						disabled={isLoading}
 						onclick={() => switchHardware(hw)}
 						size="sm"
@@ -195,7 +183,7 @@ $effect(() => {
 						{#if isLoading && selectedHardware === hw}
 							<Loader2 class="mr-1 h-3 w-3 animate-spin" />
 						{/if}
-						<span class={hardwareInfo[hw].color}>{hardwareInfo[hw].name.split(' ')[0]}</span>
+						<span class={HARDWARE_COLORS[hw].text}>{HARDWARE_LABELS[hw].split(' ')[0]}</span>
 					</Button>
 				{/each}
 			</div>
diff --git a/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.test.ts b/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.test.ts
deleted file mode 100644
index e47dee9a..00000000
--- a/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.test.ts
+++ /dev/null
@@ -1,328 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { autoSelectNextOption } from "./StreamingAutoSelection";
-
-// Mock data for testing
-const createMockGroupedPipelines = () => ({
-	hdmi: {
-		h264: {
-			"1080p": [
-				{
-					name: "hdmi/h264_1080p30",
-					asrc: true,
-					acodec: true,
-					identifier: "hdmi_h264_1080p30",
-					extraction: {
-						device: "hdmi",
-						encoder: "h264",
-						format: null,
-						resolution: "1080p",
-						fps: "30",
-					},
-				},
-				{
-					name: "hdmi/h264_1080p60",
-					asrc: true,
-					acodec: true,
-					identifier: "hdmi_h264_1080p60",
-					extraction: {
-						device: "hdmi",
-						encoder: "h264",
-						format: null,
-						resolution: "1080p",
-						fps: "60",
-					},
-				},
-			],
-			"720p": [
-				{
-					name: "hdmi/h264_720p30",
-					asrc: true,
-					acodec: true,
-					identifier: "hdmi_h264_720p30",
-					extraction: {
-						device: "hdmi",
-						encoder: "h264",
-						format: null,
-						resolution: "720p",
-						fps: "30",
-					},
-				},
-			],
-		},
-		h265: {
-			"1080p": [
-				{
-					name: "hdmi/h265_1080p30",
-					asrc: true,
-					acodec: true,
-					identifier: "hdmi_h265_1080p30",
-					extraction: {
-						device: "hdmi",
-						encoder: "h265",
-						format: null,
-						resolution: "1080p",
-						fps: "30",
-					},
-				},
-			],
-		},
-	},
-});
-
-// Simple mock with single option at each level for auto-selection tests
-const createSingleOptionMock = () => ({
-	usb: {
-		h264: {
-			"720p": [
-				{
-					name: "usb/h264_720p30",
-					asrc: true,
-					acodec: true,
-					identifier: "usb_h264_720p30",
-					extraction: {
-						device: "usb",
-						encoder: "h264",
-						format: null,
-						resolution: "720p",
-						fps: "30",
-					},
-				},
-			],
-		},
-	},
-});
-
-describe("autoSelectNextOption", () => {
-	describe("when groupedPipelines is undefined", () => {
-		it("should return empty object", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "hdmi",
-					encoder: undefined,
-					resolution: undefined,
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				undefined,
-			);
-			expect(result).toEqual({});
-		});
-	});
-
-	describe("when inputMode is undefined", () => {
-		it("should return all fields as undefined", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: undefined,
-					encoder: "h264",
-					resolution: "1080p",
-					framerate: "30",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result).toEqual({
-				encoder: undefined,
-				resolution: undefined,
-				framerate: undefined,
-				pipeline: undefined,
-			});
-		});
-	});
-
-	describe("encoder selection", () => {
-		it("should auto-select encoder when only one option exists", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "usb",
-					encoder: undefined,
-					resolution: undefined,
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				createSingleOptionMock(),
-			);
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should clear all dependents when encoder is invalid for inputMode", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "hdmi",
-					encoder: "invalid",
-					resolution: "1080p",
-					framerate: "30",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.encoder).toBe(undefined);
-			expect(result.resolution).toBe(undefined);
-			expect(result.framerate).toBe(undefined);
-			expect(result.pipeline).toBe(undefined);
-		});
-
-		it("should preserve encoder and dependents when encoder is valid", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "hdmi",
-					encoder: "h264",
-					resolution: "1080p",
-					framerate: "30",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should clear dependents when multiple encoder options and none selected", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "hdmi",
-					encoder: undefined,
-					resolution: "1080p",
-					framerate: "30",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.encoder).toBe(undefined);
-			expect(result.resolution).toBe(undefined);
-			expect(result.framerate).toBe(undefined);
-			expect(result.pipeline).toBe(undefined);
-		});
-	});
-
-	describe("resolution selection", () => {
-		it("should auto-select resolution when only one option exists", () => {
-			const result = autoSelectNextOption(
-				"resolution",
-				{
-					inputMode: "usb",
-					encoder: "h264",
-					resolution: undefined,
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				createSingleOptionMock(),
-			);
-			expect(result.resolution).toBe("720p");
-		});
-
-		it("should clear dependents when resolution is invalid for encoder", () => {
-			const result = autoSelectNextOption(
-				"resolution",
-				{
-					inputMode: "hdmi",
-					encoder: "h264",
-					resolution: "4k",
-					framerate: "30",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.resolution).toBe(undefined);
-			expect(result.framerate).toBe(undefined);
-			expect(result.pipeline).toBe(undefined);
-		});
-	});
-
-	describe("framerate selection", () => {
-		it("should auto-select framerate when only one option exists", () => {
-			const result = autoSelectNextOption(
-				"framerate",
-				{
-					inputMode: "usb",
-					encoder: "h264",
-					resolution: "720p",
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				createSingleOptionMock(),
-			);
-			expect(result.framerate).toBe("30");
-		});
-
-		it("should auto-select framerate when invalid value provided and only one option exists", () => {
-			// 720p only has one framerate (30), so invalid "120" gets cleared and auto-selected to "30"
-			const result = autoSelectNextOption(
-				"framerate",
-				{
-					inputMode: "hdmi",
-					encoder: "h264",
-					resolution: "720p",
-					framerate: "120",
-					pipeline: "test",
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.framerate).toBe("30"); // Auto-selected since only one option
-			expect(result.pipeline).toBe("hdmi_h264_720p30"); // Pipeline built with valid selection
-		});
-	});
-
-	describe("pipeline building", () => {
-		it("should build pipeline when all fields are valid", () => {
-			const result = autoSelectNextOption(
-				"framerate",
-				{
-					inputMode: "hdmi",
-					encoder: "h264",
-					resolution: "1080p",
-					framerate: "30",
-					pipeline: undefined,
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result.pipeline).toBe("hdmi_h264_1080p30");
-		});
-
-		it("should auto-select all fields and build pipeline for single-option chain", () => {
-			const result = autoSelectNextOption(
-				"inputMode",
-				{
-					inputMode: "usb",
-					encoder: undefined,
-					resolution: undefined,
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				createSingleOptionMock(),
-			);
-			expect(result.encoder).toBe("h264");
-			expect(result.resolution).toBe("720p");
-			expect(result.framerate).toBe("30");
-			expect(result.pipeline).toBe("usb_h264_720p30");
-		});
-	});
-
-	describe("edge cases", () => {
-		it("should handle inputMode with no available encoders", () => {
-			const result = autoSelectNextOption(
-				"encoder",
-				{
-					inputMode: "nonexistent",
-					encoder: undefined,
-					resolution: undefined,
-					framerate: undefined,
-					pipeline: undefined,
-				},
-				createMockGroupedPipelines(),
-			);
-			expect(result).toEqual({
-				encoder: undefined,
-				resolution: undefined,
-				framerate: undefined,
-				pipeline: undefined,
-			});
-		});
-	});
-});
diff --git a/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.ts b/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.ts
deleted file mode 100644
index 902343fd..00000000
--- a/apps/frontend/src/lib/components/streaming/StreamingAutoSelection.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import type { Pipelines } from "@ceraui/rpc/schemas";
-
-import type { GroupedPipelines } from "$lib/helpers/PipelineHelper";
-
-type Properties = {
-	inputMode: string | undefined;
-	encoder: string | undefined;
-	resolution: string | undefined;
-	framerate: string | undefined;
-	pipeline: keyof Pipelines | undefined;
-};
-
-export interface AutoSelectionResult {
-	encoder?: string;
-	resolution?: string;
-	framerate?: string;
-	pipeline?: keyof Pipelines | undefined;
-}
-
-export function autoSelectNextOption(
-	_currentLevel: string,
-	properties: Properties,
-	groupedPipelines: GroupedPipelines[keyof GroupedPipelines] | undefined,
-): AutoSelectionResult {
-	if (!groupedPipelines) return {};
-
-	// Initialize result with all possible fields to ensure proper clearing
-	const result: AutoSelectionResult = {
-		encoder: properties.encoder,
-		resolution: properties.resolution,
-		framerate: properties.framerate,
-		pipeline: properties.pipeline,
-	};
-
-	// Step 1: Validate/fix inputMode level
-	if (!properties.inputMode) {
-		return {
-			encoder: undefined,
-			resolution: undefined,
-			framerate: undefined,
-			pipeline: undefined,
-		};
-	}
-
-	// Step 2: Investigate encoder level
-	const availableEncoders = Object.keys(
-		groupedPipelines[properties.inputMode] || {},
-	);
-
-	if (properties.encoder && !availableEncoders.includes(properties.encoder)) {
-		result.encoder = undefined;
-		result.resolution = undefined;
-		result.framerate = undefined;
-		result.pipeline = undefined;
-	}
-
-	// Auto-select encoder if needed
-	if (!result.encoder && availableEncoders.length === 1) {
-		result.encoder = availableEncoders[0];
-	} else if (!result.encoder && availableEncoders.length === 0) {
-		return {
-			encoder: undefined,
-			resolution: undefined,
-			framerate: undefined,
-			pipeline: undefined,
-		};
-	}
-
-	// If no encoder selected and multiple options, ensure dependents are cleared
-	if (!result.encoder) {
-		result.resolution = undefined;
-		result.framerate = undefined;
-		result.pipeline = undefined;
-		return result;
-	}
-
-	// Step 3: Investigate resolution level
-	const availableResolutions = Object.keys(
-		groupedPipelines[properties.inputMode][result.encoder] || {},
-	);
-
-	if (result.resolution && !availableResolutions.includes(result.resolution)) {
-		result.resolution = undefined;
-		result.framerate = undefined;
-		result.pipeline = undefined;
-	}
-
-	// Auto-select resolution if needed
-	if (!result.resolution && availableResolutions.length === 1) {
-		result.resolution = availableResolutions[0];
-	} else if (!result.resolution && availableResolutions.length === 0) {
-		result.resolution = undefined;
-		result.framerate = undefined;
-		result.pipeline = undefined;
-		return result;
-	}
-
-	// If no resolution selected and multiple options, ensure dependents are cleared
-	if (!result.resolution) {
-		result.framerate = undefined;
-		result.pipeline = undefined;
-		return result;
-	}
-
-	// Step 4: Investigate framerate level
-	const availableFramerates =
-		groupedPipelines[properties.inputMode][result.encoder][result.resolution];
-
-	if (result.framerate) {
-		const frameratExists = availableFramerates?.some(
-			(p) => p.extraction.fps === result.framerate,
-		);
-		if (!frameratExists) {
-			result.framerate = undefined;
-			result.pipeline = undefined;
-		}
-	}
-
-	// Auto-select framerate if needed
-	if (!result.framerate && availableFramerates?.length === 1) {
-		const fps = availableFramerates[0].extraction.fps ?? undefined;
-		result.framerate = fps;
-	} else if (
-		!result.framerate &&
-		(!availableFramerates || availableFramerates.length === 0)
-	) {
-		result.framerate = undefined;
-		result.pipeline = undefined;
-		return result;
-	}
-
-	// If no framerate selected and multiple options, ensure pipeline is cleared
-	if (!result.framerate) {
-		result.pipeline = undefined;
-		return result;
-	}
-
-	// Step 5: Build pipeline if all fields are valid
-	if (result.encoder && result.resolution && result.framerate) {
-		const foundPipeline = availableFramerates?.find(
-			(p) => p.extraction.fps === result.framerate,
-		)?.identifier;
-		if (foundPipeline) {
-			result.pipeline = foundPipeline;
-		} else {
-			result.pipeline = undefined;
-		}
-	}
-
-	return result;
-}
-
-// resetDependentSelections function removed - all logic now unified in autoSelectNextOption
diff --git a/apps/frontend/src/lib/components/streaming/StreamingConfigService.ts b/apps/frontend/src/lib/components/streaming/StreamingConfigService.ts
index 87ffd567..547cb520 100644
--- a/apps/frontend/src/lib/components/streaming/StreamingConfigService.ts
+++ b/apps/frontend/src/lib/components/streaming/StreamingConfigService.ts
@@ -2,10 +2,15 @@ import type {
 	AudioCodecs,
 	ConfigMessage,
 	Pipelines,
+	Resolution,
+	Framerate,
 } from "@ceraui/rpc/schemas";
 import { toast } from "svelte-sonner";
 
 type Properties = {
+	source?: string;
+	resolution?: Resolution;
+	framerate?: Framerate;
 	pipeline: keyof Pipelines | undefined;
 	audioSource: string | undefined;
 	audioCodec: AudioCodecs | undefined;
@@ -21,14 +26,14 @@ type Properties = {
 };
 
 export interface ConfigServiceOptions {
-	unparsedPipelines: Pipelines | undefined;
+	pipelines: Pipelines | undefined;
 }
 
 export function buildStreamingConfig(
 	properties: Properties,
 	options: ConfigServiceOptions,
 ): Partial<ConfigMessage> | null {
-	const { unparsedPipelines } = options;
+	const { pipelines } = options;
 	const config: Partial<ConfigMessage> = {};
 
 	if (properties.pipeline) {
@@ -36,14 +41,14 @@ export function buildStreamingConfig(
 	}
 
 	// Safely access pipeline data with proper null checks
-	if (!unparsedPipelines || !properties.pipeline) {
+	if (!pipelines || !properties.pipeline) {
 		console.warn(
 			"Cannot build streaming config: missing pipeline data or pipeline selection",
 		);
 		return null;
 	}
 
-	const pipelineData = unparsedPipelines[properties.pipeline];
+	const pipelineData = pipelines[properties.pipeline];
 	if (!pipelineData) {
 		console.warn(
 			"Cannot build streaming config: pipeline data not found for",
@@ -52,13 +57,16 @@ export function buildStreamingConfig(
 		return null;
 	}
 
-	if (pipelineData.asrc && properties.audioSource) {
-		config.asrc = properties.audioSource;
-	}
-	// Always send acodec when pipeline requires it, default to 'aac' if not selected
-	if (pipelineData.acodec) {
+	// Audio configuration when pipeline supports it
+	if (pipelineData.supportsAudio) {
+		if (properties.audioSource) {
+			config.asrc = properties.audioSource;
+		}
+		// Default to 'aac' if not selected
 		config.acodec = properties.audioCodec || "aac";
 	}
+
+	// Server configuration
 	if (
 		(properties.relayServer === "-1" || properties.relayServer === undefined) &&
 		properties.srtlaServerAddress
@@ -70,6 +78,7 @@ export function buildStreamingConfig(
 	} else if (properties.relayServer) {
 		config.relay_server = properties.relayServer;
 	}
+
 	if (properties.srtLatency !== undefined) {
 		config.srt_latency = properties.srtLatency;
 	}
@@ -83,7 +92,7 @@ export function buildStreamingConfig(
 		config.relay_account = properties.relayAccount;
 	}
 
-	// These fields are required by the backend, always provide defaults
+	// Required fields with defaults
 	config.delay = properties.audioDelay ?? 0;
 	config.max_br = properties.bitrate ?? 5000;
 	config.bitrate_overlay = properties.bitrateOverlay ?? false;
@@ -92,21 +101,18 @@ export function buildStreamingConfig(
 }
 
 export function startStreamingWithConfig(config: Partial<ConfigMessage>): void {
-	// Try to dismiss all toasts first
 	try {
 		toast.dismiss();
 	} catch (error) {
 		console.warn("Could not dismiss toasts:", error);
 	}
 
-	// Use the global function which handles toast cleanup safely
 	if (
 		typeof window !== "undefined" &&
 		window.startStreamingWithNotificationClear
 	) {
 		window.startStreamingWithNotificationClear(config);
 	} else {
-		// Fallback to direct function call if global function is not available
 		import("$lib/helpers/SystemHelper")
 			.then((module) => {
 				module.startStreaming(
@@ -120,18 +126,15 @@ export function startStreamingWithConfig(config: Partial<ConfigMessage>): void {
 }
 
 export function stopStreaming(): void {
-	// Try to dismiss all toasts first
 	try {
 		toast.dismiss();
 	} catch (error) {
 		console.warn("Could not dismiss toasts:", error);
 	}
 
-	// Use the global function which handles toast cleanup safely
 	if (window.stopStreamingWithNotificationClear) {
 		window.stopStreamingWithNotificationClear();
 	} else {
-		// Fallback
 		import("$lib/helpers/SystemHelper")
 			.then((module) => {
 				module.stopStreaming();
@@ -145,5 +148,4 @@ export function stopStreaming(): void {
 	}
 }
 
-// Export type alias for global use
 export type StreamingConfig = ConfigMessage;
diff --git a/apps/frontend/src/lib/components/streaming/StreamingStateManager.svelte.ts b/apps/frontend/src/lib/components/streaming/StreamingStateManager.svelte.ts
index 72517491..66c21e2e 100644
--- a/apps/frontend/src/lib/components/streaming/StreamingStateManager.svelte.ts
+++ b/apps/frontend/src/lib/components/streaming/StreamingStateManager.svelte.ts
@@ -8,14 +8,11 @@ import type {
 	AudioCodecsMessage,
 	ConfigMessage,
 	Pipelines,
+	PipelinesMessage,
 	RelayMessage,
+	HardwareType,
 } from "@ceraui/rpc/schemas";
-import { getLL, locale } from "@ceraui/i18n/svelte";
 
-import {
-	type GroupedPipelines,
-	groupPipelinesByDeviceAndFormat,
-} from "$lib/helpers/PipelineHelper";
 import {
 	AudioCodecsMessages,
 	ConfigMessages,
@@ -25,8 +22,8 @@ import {
 } from "$lib/stores/websocket-store.svelte";
 
 export interface StreamingState {
-	groupedPipelines: GroupedPipelines[keyof GroupedPipelines] | undefined;
-	unparsedPipelines: Pipelines | undefined;
+	pipelines: Pipelines | undefined;
+	hardware: HardwareType | undefined;
 	isStreaming: boolean | undefined;
 	audioSources: Array<string>;
 	audioCodecs: AudioCodecsMessage | undefined;
@@ -42,10 +39,8 @@ export interface StreamingState {
  */
 class StreamingStateManager {
 	// Svelte 5 reactive state
-	private _groupedPipelines = $state<
-		GroupedPipelines[keyof GroupedPipelines] | undefined
-	>(undefined);
-	private _unparsedPipelines = $state<Pipelines | undefined>(undefined);
+	private _pipelines = $state<Pipelines | undefined>(undefined);
+	private _hardware = $state<HardwareType | undefined>(undefined);
 	private _isStreaming = $state<boolean | undefined>(undefined);
 	private _audioSources = $state<Array<string>>([]);
 	private _audioCodecs = $state<AudioCodecsMessage | undefined>(undefined);
@@ -56,11 +51,11 @@ class StreamingStateManager {
 	private _disposers: (() => void)[] = [];
 
 	// Reactive getters - direct access to $state
-	get groupedPipelines() {
-		return this._groupedPipelines;
+	get pipelines() {
+		return this._pipelines;
 	}
-	get unparsedPipelines() {
-		return this._unparsedPipelines;
+	get hardware() {
+		return this._hardware;
 	}
 	get isStreaming() {
 		return this._isStreaming;
@@ -83,7 +78,6 @@ class StreamingStateManager {
 
 	constructor() {
 		this.setupSubscriptions();
-		this.setupReactiveEffects();
 	}
 
 	public cleanup(): void {
@@ -149,53 +143,26 @@ class StreamingStateManager {
 		});
 		this._disposers.push(unsubRelays);
 
-		// Subscribe to pipeline messages
+		// Subscribe to pipeline messages (now includes hardware info)
 		const unsubPipelines = PipelinesMessages.subscribe((message) => {
 			if (message) {
-				this._unparsedPipelines = message;
-
-				// Process pipelines immediately when they arrive
-				this.processPipelines();
+				if ("pipelines" in (message as Record<string, unknown>)) {
+					this._pipelines = (message as PipelinesMessage).pipelines;
+					this._hardware = (message as PipelinesMessage).hardware;
+				} else {
+					this._pipelines = message as unknown as Pipelines;
+					this._hardware = this._hardware ?? undefined;
+				}
 			}
 		});
 		this._disposers.push(unsubPipelines);
 	}
 
-	private setupReactiveEffects() {
-		// Set up reactive pipeline processing using locale store subscription
-		const unsubLocale = locale.subscribe(() => {
-			// Process pipelines when locale changes (for translation updates)
-			this.processPipelines();
-		});
-		this._disposers.push(unsubLocale);
-	}
-
-	// Extract pipeline processing logic into a separate method
-	private processPipelines() {
-		if (this._unparsedPipelines && getLL()) {
-			const allGroupedPipelines = groupPipelinesByDeviceAndFormat(
-				this._unparsedPipelines,
-				{
-					matchDeviceResolution: getLL().settings.matchDeviceResolution(),
-					matchDeviceOutput: getLL().settings.matchDeviceOutput(),
-				},
-			);
-
-			// Get the first available device dynamically
-			const availableDevices = Object.keys(allGroupedPipelines);
-			if (availableDevices.length > 0) {
-				this._groupedPipelines = allGroupedPipelines[availableDevices[0]];
-			} else {
-				this._groupedPipelines = undefined;
-			}
-		}
-	}
-
 	// Get current state snapshot
 	getState(): StreamingState {
 		return {
-			groupedPipelines: this._groupedPipelines,
-			unparsedPipelines: this._unparsedPipelines,
+			pipelines: this._pipelines,
+			hardware: this._hardware,
 			isStreaming: this._isStreaming,
 			audioSources: this._audioSources,
 			audioCodecs: this._audioCodecs,
diff --git a/apps/frontend/src/lib/components/streaming/StreamingUtils.ts b/apps/frontend/src/lib/components/streaming/StreamingUtils.ts
index 470e6216..5cc57c6b 100644
--- a/apps/frontend/src/lib/components/streaming/StreamingUtils.ts
+++ b/apps/frontend/src/lib/components/streaming/StreamingUtils.ts
@@ -1,4 +1,3 @@
-import type { HumanReadablePipeline } from "$lib/helpers/PipelineHelper";
 import { updateBitrate } from "$lib/helpers/SystemHelper";
 
 export function normalizeValue(
@@ -35,46 +34,3 @@ export function updateMaxBitrate(
 		updateBitrate(bitrate);
 	}
 }
-
-export function getSortedFramerates(
-	framerates: HumanReadablePipeline[],
-): HumanReadablePipeline[] {
-	return [...framerates].sort((a, b) => {
-		// Put "match device output" or similar special options first
-		const fpsA = a.extraction.fps;
-		const fpsB = b.extraction.fps;
-
-		if (typeof fpsA === "string" && fpsA.toLowerCase().includes("match"))
-			return -1;
-		if (typeof fpsB === "string" && fpsB.toLowerCase().includes("match"))
-			return 1;
-
-		// Convert to numbers for numeric comparison with NaN safety
-		const numA = parseFloat(String(fpsA));
-		const numB = parseFloat(String(fpsB));
-		const safeNumA = Number.isFinite(numA) ? numA : 0;
-		const safeNumB = Number.isFinite(numB) ? numB : 0;
-
-		// Sort by numeric value
-		return safeNumA - safeNumB;
-	});
-}
-
-export function getSortedResolutions(resolutions: string[]): string[] {
-	return [...resolutions].sort((a, b) => {
-		// Put "match device resolution" or similar special options first
-		if (a.toLowerCase().includes("match") || a.toLowerCase().includes("device"))
-			return -1;
-		if (b.toLowerCase().includes("match") || b.toLowerCase().includes("device"))
-			return 1;
-
-		// Extract numeric values (like "720" from "720p") with NaN safety
-		const numA = parseInt(a.match(/\d+/)?.[0] || "0", 10);
-		const numB = parseInt(b.match(/\d+/)?.[0] || "0", 10);
-		const safeNumA = Number.isFinite(numA) ? numA : 0;
-		const safeNumB = Number.isFinite(numB) ? numB : 0;
-
-		// Sort by numeric value
-		return safeNumA - safeNumB;
-	});
-}
diff --git a/apps/frontend/src/lib/components/streaming/StreamingValidation.ts b/apps/frontend/src/lib/components/streaming/StreamingValidation.ts
index cb81aec0..977a8f17 100644
--- a/apps/frontend/src/lib/components/streaming/StreamingValidation.ts
+++ b/apps/frontend/src/lib/components/streaming/StreamingValidation.ts
@@ -1,11 +1,10 @@
-import type { Pipelines } from "@ceraui/rpc/schemas";
+import type { Pipelines, Resolution, Framerate } from "@ceraui/rpc/schemas";
 import { toast } from "svelte-sonner";
 
 type Properties = {
-	inputMode: string | undefined;
-	encoder: string | undefined;
-	resolution: string | undefined;
-	framerate: string | undefined;
+	source: string | undefined;
+	resolution: Resolution | undefined;
+	framerate: Framerate | undefined;
 	bitrate: number | undefined;
 	relayServer: string | undefined;
 	srtlaServerAddress: string | undefined;
@@ -16,7 +15,7 @@ type Properties = {
 };
 
 type ValidationOptions = {
-	unparsedPipelines: Pipelines | undefined;
+	pipelines: Pipelines | undefined;
 };
 
 export interface ValidationResult {
@@ -33,34 +32,13 @@ export function validateStreamingForm(
 	let hasErrors = false;
 	const errorMessages: string[] = [];
 
-	// Validate Input Mode
-	if (!properties.inputMode) {
-		formErrors.inputMode = t("settings.errors.inputModeRequired");
+	// Validate Video Source
+	if (!properties.source) {
+		formErrors.source = t("settings.errors.inputModeRequired");
 		errorMessages.push(t("settings.errors.inputModeRequired"));
 		hasErrors = true;
 	}
 
-	// Validate Encoding Format
-	if (!properties.encoder) {
-		formErrors.encoder = t("settings.errors.encoderRequired");
-		errorMessages.push(t("settings.errors.encoderRequired"));
-		hasErrors = true;
-	}
-
-	// Validate Encoding Resolution
-	if (!properties.resolution) {
-		formErrors.resolution = t("settings.errors.resolutionRequired");
-		errorMessages.push(t("settings.errors.resolutionRequired"));
-		hasErrors = true;
-	}
-
-	// Validate Framerate
-	if (!properties.framerate) {
-		formErrors.framerate = t("settings.errors.framerateRequired");
-		errorMessages.push(t("settings.errors.framerateRequired"));
-		hasErrors = true;
-	}
-
 	// Validate Bitrate
 	if (
 		!properties.bitrate ||
@@ -73,18 +51,18 @@ export function validateStreamingForm(
 	}
 
 	// Validate Audio Settings (when pipeline requires them)
-	if (options?.unparsedPipelines && properties.pipeline) {
-		const pipelineData = options.unparsedPipelines[properties.pipeline];
-		if (pipelineData) {
-			// Validate audio source when pipeline requires it
-			if (pipelineData.asrc && !properties.audioSource) {
+	if (options?.pipelines && properties.pipeline) {
+		const pipelineData = options.pipelines[properties.pipeline];
+		if (pipelineData?.supportsAudio) {
+			// Validate audio source when pipeline supports audio
+			if (!properties.audioSource) {
 				formErrors.audioSource = t("settings.errors.audioSourceRequired");
 				errorMessages.push(t("settings.errors.audioSourceRequired"));
 				hasErrors = true;
 			}
 
-			// Validate audio codec when pipeline requires it
-			if (pipelineData.acodec && !properties.audioCodec) {
+			// Validate audio codec when pipeline supports audio
+			if (!properties.audioCodec) {
 				formErrors.audioCodec = t("settings.errors.audioCodecRequired");
 				errorMessages.push(t("settings.errors.audioCodecRequired"));
 				hasErrors = true;
@@ -127,7 +105,6 @@ export function validateStreamingForm(
 
 	// Show toast messages - single error toast for all errors or success
 	if (hasErrors) {
-		// Show a single toast with the first error (to avoid spam)
 		toast.error(errorMessages[0], {
 			description:
 				errorMessages.length > 1
diff --git a/apps/frontend/src/lib/components/streaming/index.ts b/apps/frontend/src/lib/components/streaming/index.ts
index f4926010..1cfab671 100644
--- a/apps/frontend/src/lib/components/streaming/index.ts
+++ b/apps/frontend/src/lib/components/streaming/index.ts
@@ -1,5 +1,4 @@
 // Export all streaming components and utilities
-export * from "./StreamingAutoSelection";
 export * from "./StreamingConfigService";
 export * from "./StreamingStateManager.svelte";
 export * from "./StreamingUtils";
diff --git a/apps/frontend/src/lib/helpers/PipelineHelper.test.ts b/apps/frontend/src/lib/helpers/PipelineHelper.test.ts
deleted file mode 100644
index 153465f9..00000000
--- a/apps/frontend/src/lib/helpers/PipelineHelper.test.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-	groupPipelinesByDeviceAndFormat,
-	parsePipelineName,
-} from "./PipelineHelper";
-
-describe("parsePipelineName", () => {
-	it("should parse a standard HDMI h264 pipeline name", () => {
-		const result = parsePipelineName("hdmi/h264_1080p30");
-		expect(result.device).toBe("hdmi");
-		expect(result.encoder).toBe("h264");
-		expect(result.resolution).toBe("1080p");
-		expect(result.fps).toBe("30");
-	});
-
-	it("should parse h265 encoder", () => {
-		const result = parsePipelineName("usb/h265_720p60");
-		expect(result.device).toBe("usb");
-		expect(result.encoder).toBe("h265");
-		expect(result.resolution).toBe("720p");
-		expect(result.fps).toBe("60");
-	});
-
-	it("should parse format from name", () => {
-		const result = parsePipelineName("hdmi/h264_raw_1080p30");
-		expect(result.format).toBe("raw");
-	});
-
-	it("should handle libuvch264 format", () => {
-		const result = parsePipelineName("usb/libuvch264_usb_720p30");
-		expect(result.format).toBe("libuvch264");
-		expect(result.encoder).toBe("h264"); // libuvch264 is h264 encoding via UVC
-	});
-
-	it("should handle fps suffix format", () => {
-		const result = parsePipelineName("hdmi/h264_1080_30fps");
-		expect(result.fps).toBe("30");
-	});
-
-	it("should handle decimal fps values", () => {
-		const result = parsePipelineName("hdmi/h264_1080p29.97");
-		expect(result.fps).toBe("29.97");
-	});
-
-	it("should use custom translations for fallback values", () => {
-		const translations = {
-			matchDeviceResolution: "Auto Resolution",
-			matchDeviceOutput: "Auto FPS",
-		};
-		const result = parsePipelineName("hdmi/h264_unknown", translations);
-		expect(result.resolution).toBe("Auto Resolution");
-		expect(result.fps).toBe("Auto FPS");
-	});
-
-	it("should return null for device when no match found", () => {
-		const result = parsePipelineName("");
-		expect(result.device).toBe(null);
-	});
-
-	// Legacy pipeline naming tests (x264/x265 patterns)
-	describe("legacy naming patterns", () => {
-		it("should parse x264 encoder and normalize to h264", () => {
-			const result = parsePipelineName(
-				"generic/x264_superfast_v4l_mjpeg_1080p30",
-			);
-			expect(result.device).toBe("generic");
-			expect(result.encoder).toBe("h264"); // normalized from x264
-			expect(result.format).toBe("superfast");
-			expect(result.resolution).toBe("1080p");
-			expect(result.fps).toBe("30");
-		});
-
-		it("should parse x265 encoder and normalize to h265", () => {
-			const result = parsePipelineName("generic/x265_medium_hdmi_720p60");
-			expect(result.encoder).toBe("h265"); // normalized from x265
-			expect(result.format).toBe("medium");
-			expect(result.resolution).toBe("720p");
-			expect(result.fps).toBe("60");
-		});
-
-		it("should parse h265_rtmp pattern with _30fps suffix", () => {
-			const result = parsePipelineName(
-				"jetson/h265_rtmp_localhost_publish_live_30fps",
-			);
-			expect(result.device).toBe("jetson");
-			expect(result.encoder).toBe("h265");
-			expect(result.format).toBe("rtmp");
-			expect(result.fps).toBe("30");
-		});
-
-		it("should parse 4K resolution (2160p)", () => {
-			const result = parsePipelineName("rk3588/h265_4k_2160p30");
-			expect(result.resolution).toBe("2160p");
-			expect(result.fps).toBe("30");
-		});
-
-		it("should parse decimal fps 59.94", () => {
-			const result = parsePipelineName("n100/h264_hdmi_1080p59.94");
-			expect(result.device).toBe("n100");
-			expect(result.resolution).toBe("1080p");
-			expect(result.fps).toBe("59.94");
-		});
-
-		it("should handle case-insensitive encoder matching", () => {
-			const result = parsePipelineName("generic/X264_superfast_1080p30");
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should parse hdmi source type", () => {
-			const result = parsePipelineName("generic/h264_hdmi_1080p30");
-			expect(result.format).toBe("hdmi");
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should parse usb source type", () => {
-			const result = parsePipelineName("generic/h264_usb_720p60");
-			expect(result.format).toBe("usb");
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should skip nvenc and find hdmi source for Jetson", () => {
-			const result = parsePipelineName("jetson/h264_nvenc_hdmi_1080p60");
-			expect(result.format).toBe("hdmi");
-			expect(result.encoder).toBe("h264");
-		});
-
-		it("should skip vaapi and find usb source for Intel", () => {
-			const result = parsePipelineName("n100/h265_vaapi_usb_1080p30");
-			expect(result.format).toBe("usb");
-			expect(result.encoder).toBe("h265");
-		});
-
-		it("should skip mpp and find hdmi source for RK3588", () => {
-			const result = parsePipelineName("rk3588/h265_mpp_hdmi_2160p30");
-			expect(result.format).toBe("hdmi");
-			expect(result.encoder).toBe("h265");
-			expect(result.resolution).toBe("2160p");
-		});
-
-		it("should parse libuvch264 with usb suffix", () => {
-			const result = parsePipelineName("generic/libuvch264_usb_1080p30");
-			expect(result.format).toBe("libuvch264");
-			expect(result.encoder).toBe("h264");
-			expect(result.resolution).toBe("1080p");
-			expect(result.fps).toBe("30");
-		});
-	});
-});
-
-describe("groupPipelinesByDeviceAndFormat", () => {
-	const mockPipelines = {
-		hdmi_h264_1080p30: { name: "hdmi/h264_1080p30", asrc: true, acodec: true },
-		hdmi_h264_1080p60: { name: "hdmi/h264_1080p60", asrc: true, acodec: true },
-		hdmi_h264_720p30: { name: "hdmi/h264_720p30", asrc: true, acodec: false },
-		usb_h265_720p30: { name: "usb/h265_720p30", asrc: false, acodec: true },
-	};
-
-	it("should group pipelines by device", () => {
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines);
-		expect(Object.keys(result)).toContain("hdmi");
-		expect(Object.keys(result)).toContain("usb");
-	});
-
-	it("should group pipelines by format within device", () => {
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines);
-		// Structure: device -> format -> encoder -> resolution
-		// Format is extracted from pipeline name (e.g., "hdmi/h264_1080p30" -> format is after encoder prefix)
-		// When format can't be extracted, it becomes resolution directly
-		const hdmiFormats = Object.keys(result.hdmi);
-		expect(hdmiFormats.length).toBeGreaterThan(0);
-		const usbFormats = Object.keys(result.usb);
-		expect(usbFormats.length).toBeGreaterThan(0);
-	});
-
-	it("should group pipelines by resolution within encoder", () => {
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines);
-		const hdmiH264 = result.hdmi.unknown?.h264;
-		if (hdmiH264) {
-			expect(Object.keys(hdmiH264)).toContain("1080p");
-			expect(Object.keys(hdmiH264)).toContain("720p");
-		}
-	});
-
-	it("should include identifier in grouped pipeline", () => {
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines);
-		const hdmiPipelines = result.hdmi;
-		// Find the first pipeline and check its identifier
-		const firstFormat = Object.values(hdmiPipelines)[0];
-		const firstEncoder = Object.values(firstFormat)[0];
-		const firstResolution = Object.values(firstEncoder)[0];
-		expect(firstResolution[0].identifier).toBeDefined();
-	});
-
-	it("should include extraction metadata in grouped pipeline", () => {
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines);
-		const hdmiPipelines = result.hdmi;
-		const firstFormat = Object.values(hdmiPipelines)[0];
-		const firstEncoder = Object.values(firstFormat)[0];
-		const firstResolution = Object.values(firstEncoder)[0];
-		expect(firstResolution[0].extraction).toBeDefined();
-		expect(firstResolution[0].extraction.device).toBe("hdmi");
-	});
-
-	it("should handle empty pipelines object", () => {
-		const result = groupPipelinesByDeviceAndFormat({});
-		expect(result).toEqual({});
-	});
-
-	it("should apply translations to extraction", () => {
-		const translations = {
-			matchDeviceResolution: "Custom Resolution",
-			matchDeviceOutput: "Custom Output",
-		};
-		const result = groupPipelinesByDeviceAndFormat(mockPipelines, translations);
-		expect(result).toBeDefined();
-	});
-});
diff --git a/apps/frontend/src/lib/helpers/PipelineHelper.ts b/apps/frontend/src/lib/helpers/PipelineHelper.ts
index 09731aa4..3b9a215b 100644
--- a/apps/frontend/src/lib/helpers/PipelineHelper.ts
+++ b/apps/frontend/src/lib/helpers/PipelineHelper.ts
@@ -1,166 +1,120 @@
-import type { Pipelines } from "@ceraui/rpc/schemas";
-
-export type PipelineInfo = {
-	device: string | null;
-	encoder: string | null;
-	format: string | null;
-	resolution: string | null;
-	fps: string | null;
-};
-
-export type HumanReadablePipeline = {
-	name: string;
-	asrc: boolean;
-	acodec: boolean;
-	identifier: string;
-	extraction: PipelineInfo;
-};
-
-export type GroupedPipelines = {
-	[device: string]: {
-		[format: string]: {
-			[encoder: string]: {
-				[resolution: string]: HumanReadablePipeline[];
-			};
-		};
-	};
-};
-
-export function parsePipelineName(
-	name: string,
-	translations?: {
-		matchDeviceResolution: string;
-		matchDeviceOutput: string;
-	},
-): PipelineInfo {
-	// Basic device extraction (everything before /)
-	const deviceMatch = name.match(/^([^/]+)/);
-
-	// Special case for libuvch264 - it's both encoder and source type
-	const isLibUVC = name.includes("libuvch264");
-
-	// Extract encoder: h264, h265, x264, x265 (legacy x264/x265 naming)
-	// Normalize x264->h264, x265->h265 for consistency in UI grouping
-	// libuvch264 is also h264 encoding via UVC hardware
-	let encoder: string | null = null;
-	if (isLibUVC) {
-		encoder = "h264";
-	} else {
-		const encoderMatch = name.match(/(h264|h265|x264|x265)/i);
-		if (encoderMatch) {
-			const raw = encoderMatch[0].toLowerCase();
-			// Normalize x264/x265 to h264/h265 for consistent grouping
-			encoder = raw === "x264" ? "h264" : raw === "x265" ? "h265" : raw;
+import {
+	type Pipelines,
+	type Pipeline,
+	type Resolution,
+	type Framerate,
+	type HardwareType,
+	HARDWARE_LABELS,
+	VIDEO_SOURCE_LABELS,
+} from "@ceraui/rpc/schemas";
+
+type VideoSource = keyof typeof VIDEO_SOURCE_LABELS;
+
+export type { Pipeline, Resolution, Framerate };
+
+// Re-export for convenience
+export { VIDEO_SOURCE_LABELS, HARDWARE_LABELS };
+export type { VideoSource, HardwareType };
+
+/**
+ * Get a human-readable label for a video source
+ * Falls back to ceracoder bindings labels if no translation function provided
+ */
+export function getSourceLabel(source: string, t?: (key: string) => string): string {
+	// Try translation first if provided
+	if (t) {
+		const translated = t(`settings.sources.${source}`);
+		// If translation exists and is not the key itself
+		if (translated && !translated.includes("settings.sources.")) {
+			return translated;
 		}
 	}
+	// Fall back to ceracoder bindings labels
+	return VIDEO_SOURCE_LABELS[source as VideoSource] || source.toUpperCase();
+}
 
-	// Format/Source extraction
-	// Priority: libuvch264 > explicit source types (hdmi, usb) > format after encoder
-	// Hardware encoder names (nvenc, vaapi, mpp) should be skipped to find actual source
-	let format: string | null = null;
-	if (isLibUVC) {
-		format = "libuvch264";
-	} else {
-		// Hardware encoder prefixes to skip (these are not input sources)
-		const hwEncoders = ["nvenc", "vaapi", "mpp"];
-		// Actual input source types and format types
-		const inputSources = ["hdmi", "usb", "v4l", "rtmp", "raw", "mjpeg"];
-		// Software encoder presets (x264/x265 specific)
-		const presets = ["superfast", "medium", "fast", "slow", "veryfast"];
-
-		// Extract all segments after encoder prefix
-		const afterEncoder = name.match(/(?:h264|h265|x264|x265)_(.+)/i);
-		if (afterEncoder) {
-			const segments = afterEncoder[1].toLowerCase().split("_");
-
-			// Find the first segment that's an input source (skip hw encoder names)
-			for (const seg of segments) {
-				if (inputSources.includes(seg)) {
-					format = seg;
-					break;
-				}
-				// If it's a preset, use that as format
-				if (presets.includes(seg)) {
-					format = seg;
-					break;
-				}
-				// Skip hardware encoder names
-				if (hwEncoders.includes(seg)) {
-					continue;
-				}
-				// If we hit resolution pattern, stop
-				if (/^\d{3,4}p/.test(seg)) {
-					break;
-				}
-			}
+/**
+ * Get a human-readable label for a hardware type
+ * Falls back to ceracoder bindings labels if no translation function provided
+ */
+export function getHardwareLabel(hardware: string, t?: (key: string) => string): string {
+	// Try translation first if provided
+	if (t) {
+		const translated = t(`settings.hardwareTypes.${hardware}`);
+		// If translation exists and is not the key itself
+		if (translated && !translated.includes("settings.hardwareTypes.")) {
+			return translated;
 		}
 	}
+	// Fall back to ceracoder bindings labels
+	return HARDWARE_LABELS[hardware as HardwareType] || hardware.toUpperCase();
+}
 
-	// Extract resolution - formats: NNNp, NNNNp (720p, 1080p, 2160p), or 4k_2160p pattern
-	const resolutionMatch = name.match(/(\d{3,4}p)/);
-
-	// Extract framerate - multiple patterns:
-	// 1. pNN (1080p30) - captures after 'p' if followed by digits
-	// 2. _NNfps (like _30fps, _60fps)
-	// 3. Decimal fps (29.97, 59.94)
-	// Pattern must match fps after resolution or standalone _NNfps
-	const fpsMatch = name.match(
-		/(?:\d{3,4}p)(\d+(?:\.\d+)?)|_(\d+(?:\.\d+)?)fps/,
-	);
-
-	// Use translations if provided, fallback to English defaults
-	const defaultResolution =
-		translations?.matchDeviceResolution || "[Match device resolution]";
-	const defaultOutput =
-		translations?.matchDeviceOutput || "[Match device output]";
-
-	return {
-		device: deviceMatch ? deviceMatch[0] : null,
-		encoder,
-		format,
-		resolution: resolutionMatch ? resolutionMatch[0] : defaultResolution,
-		fps: fpsMatch ? fpsMatch[1] || fpsMatch[2] : defaultOutput,
+/**
+ * Get a human-readable label for a resolution
+ */
+export function getResolutionLabel(resolution: Resolution): string {
+	const labels: Record<Resolution, string> = {
+		"480p": "480p (854×480)",
+		"720p": "720p (1280×720)",
+		"1080p": "1080p (1920×1080)",
+		"1440p": "1440p (2560×1440)",
+		"2160p": "4K (3840×2160)",
+		"4k": "4K (3840×2160)",
 	};
+	return labels[resolution] || resolution;
 }
 
-export const groupPipelinesByDeviceAndFormat = (
-	pipelines: Pipelines,
-	translations?: {
-		matchDeviceResolution: string;
-		matchDeviceOutput: string;
-	},
-): GroupedPipelines => {
-	const groupedPipelines: GroupedPipelines = {};
-
-	Object.entries(pipelines).forEach(([key, value]) => {
-		const extraction = parsePipelineName(value.name, translations);
-		const device = extraction.device || "unknown";
-		const format = extraction.format || "unknown";
-		const encoder = extraction.encoder || "unknown";
-		const resolution = extraction.resolution || "unknown";
+/**
+ * Get a human-readable label for a framerate
+ */
+export function getFramerateLabel(framerate: Framerate): string {
+	if (framerate === 29.97) return "29.97 fps (NTSC)";
+	if (framerate === 59.94) return "59.94 fps (NTSC)";
+	return `${framerate} fps`;
+}
 
-		if (!groupedPipelines[device]) {
-			groupedPipelines[device] = {};
-		}
+/**
+ * Sort resolutions from lowest to highest
+ */
+export function sortResolutions(resolutions: Resolution[]): Resolution[] {
+	const order: Resolution[] = ["480p", "720p", "1080p", "1440p", "2160p", "4k"];
+	return resolutions.sort((a, b) => order.indexOf(a) - order.indexOf(b));
+}
 
-		if (!groupedPipelines[device][format]) {
-			groupedPipelines[device][format] = {};
-		}
+/**
+ * Sort framerates from lowest to highest
+ */
+export function sortFramerates(framerates: Framerate[]): Framerate[] {
+	return [...framerates].sort((a, b) => a - b);
+}
 
-		if (!groupedPipelines[device][format][encoder]) {
-			groupedPipelines[device][format][encoder] = {};
-		}
+/**
+ * Get pipelines as a sorted array with IDs
+ */
+export function getPipelineArray(pipelines: Pipelines): Array<{ id: string } & Pipeline> {
+	return Object.entries(pipelines)
+		.map(([id, pipeline]) => ({ id, ...pipeline }))
+		.sort((a, b) => a.name.localeCompare(b.name));
+}
 
-		if (!groupedPipelines[device][format][encoder][resolution]) {
-			groupedPipelines[device][format][encoder][resolution] = [];
-		}
+/**
+ * Check if a pipeline supports audio configuration
+ */
+export function supportsAudio(pipeline: Pipeline): boolean {
+	return pipeline.supportsAudio;
+}
 
-		groupedPipelines[device][format][encoder][resolution].push({
-			...value,
-			identifier: key,
-			extraction,
-		});
-	});
+/**
+ * Get the default resolution for a pipeline, or a fallback
+ */
+export function getDefaultResolution(pipeline: Pipeline): Resolution {
+	return pipeline.defaultResolution || "1080p";
+}
 
-	return groupedPipelines;
-};
+/**
+ * Get the default framerate for a pipeline, or a fallback
+ */
+export function getDefaultFramerate(pipeline: Pipeline): Framerate {
+	return pipeline.defaultFramerate || 30;
+}
diff --git a/apps/frontend/src/lib/rpc/client.ts b/apps/frontend/src/lib/rpc/client.ts
index 7a8c2f8f..37f6a95b 100644
--- a/apps/frontend/src/lib/rpc/client.ts
+++ b/apps/frontend/src/lib/rpc/client.ts
@@ -389,16 +389,16 @@ export interface TypedRPC {
 		getConfig: () => Promise<unknown>;
 		// Dev-only mock hardware switcher
 		setMockHardware: (input: {
-			hardware: "jetson" | "n100" | "rk3588";
+			hardware: "jetson" | "n100" | "rk3588" | "generic";
 		}) => Promise<{
 			success: boolean;
-			hardware?: "jetson" | "n100" | "rk3588";
+			hardware?: "jetson" | "n100" | "rk3588" | "generic";
 			error?: string;
 		}>;
 		getMockHardware: () => Promise<{
-			hardware: "jetson" | "n100" | "rk3588" | null;
+			hardware: "jetson" | "n100" | "rk3588" | "generic" | null;
 			effectiveHardware: string;
-			availableHardware: ("jetson" | "n100" | "rk3588")[];
+			availableHardware: ("jetson" | "n100" | "rk3588" | "generic")[];
 		}>;
 	};
 	modems: {
diff --git a/apps/frontend/src/lib/rpc/subscriptions.svelte.ts b/apps/frontend/src/lib/rpc/subscriptions.svelte.ts
index ac242aef..c4178f57 100644
--- a/apps/frontend/src/lib/rpc/subscriptions.svelte.ts
+++ b/apps/frontend/src/lib/rpc/subscriptions.svelte.ts
@@ -11,7 +11,7 @@ import type {
 	ModemList,
 	NetifMessage,
 	NotificationsMessage,
-	Pipelines,
+	PipelinesMessage,
 	RelayMessage,
 	Revisions,
 	SensorsStatus,
@@ -60,8 +60,8 @@ let modemsState = $state<ModemList | undefined>(undefined);
 // System state
 let sensorsState = $state<SensorsStatus | undefined>(undefined);
 let revisionsState = $state<Revisions | undefined>(undefined);
-let pipelinesState = $state<Pipelines | undefined>(undefined);
-let audioCodecsState = $state<Record<string, string> | undefined>(undefined);
+let pipelinesState = $state<PipelinesMessage | undefined>(undefined);
+let audioCodecsState = $state<Record<string, { name: string }> | undefined>(undefined);
 
 // Relay state
 let relaysState = $state<RelayMessage | undefined>(undefined);
@@ -236,11 +236,18 @@ function handleMessage(type: string, data: unknown): void {
 			break;
 
 		case "pipelines":
-			pipelinesState = data as Pipelines;
+			if (data && typeof data === "object" && "pipelines" in (data as Record<string, unknown>)) {
+				pipelinesState = data as PipelinesMessage;
+			} else {
+				pipelinesState = {
+					hardware: (data as { hardware?: string })?.hardware ?? "generic",
+					pipelines: data as Record<string, unknown>,
+				} as unknown as PipelinesMessage;
+			}
 			break;
 
 		case "acodecs":
-			audioCodecsState = data as Record<string, string>;
+			audioCodecsState = data as Record<string, { name: string }>;
 			break;
 
 		case "relays":
diff --git a/apps/frontend/src/lib/stores/websocket-store.svelte.ts b/apps/frontend/src/lib/stores/websocket-store.svelte.ts
index d10e6624..7c501823 100644
--- a/apps/frontend/src/lib/stores/websocket-store.svelte.ts
+++ b/apps/frontend/src/lib/stores/websocket-store.svelte.ts
@@ -12,7 +12,7 @@ import type {
 	LoginOutput,
 	NetifMessage,
 	NotificationsMessage,
-	Pipelines,
+	PipelinesMessage,
 	RelayMessage,
 	Revisions,
 	SensorsStatus,
@@ -35,7 +35,7 @@ let audioCodecsState = $state<AudioCodecsMessage | undefined>(undefined);
 let configState = $state<ConfigMessage | undefined>(undefined);
 let netifState = $state<NetifMessage | undefined>(undefined);
 let notificationsState = $state<NotificationsMessage | undefined>(undefined);
-let pipelinesState = $state<Pipelines | undefined>(undefined);
+let pipelinesState = $state<PipelinesMessage | undefined>(undefined);
 let relaysState = $state<RelayMessage | undefined>(undefined);
 let revisionsState = $state<Revisions | undefined>(undefined);
 let sensorsStatusState = $state<SensorsStatus | undefined>(undefined);
@@ -297,7 +297,14 @@ const assignMessage = (data: string) => {
 				NotificationsStore._set(value);
 				break;
 			case "pipelines":
-				PipelinesStore._set(value);
+				if (value && typeof value === "object" && "pipelines" in (value as Record<string, unknown>)) {
+					PipelinesStore._set(value as PipelinesMessage);
+				} else {
+					PipelinesStore._set({
+						hardware: (value as { hardware?: string })?.hardware ?? "generic",
+						pipelines: value as Record<string, unknown>,
+					} as unknown as PipelinesMessage);
+				}
 				break;
 			case "relays":
 				RelaysStore._set(value);
diff --git a/apps/frontend/src/main/shared/AudioCard.svelte b/apps/frontend/src/main/shared/AudioCard.svelte
index f5ab8350..bc660a6e 100644
--- a/apps/frontend/src/main/shared/AudioCard.svelte
+++ b/apps/frontend/src/main/shared/AudioCard.svelte
@@ -11,7 +11,7 @@ import { cn } from '$lib/utils';
 
 interface Props {
 	audioCodecs: AudioCodecsMessage | undefined;
-	unparsedPipelines: Pipelines | undefined;
+	pipelines: Pipelines | undefined;
 	audioSources: string[];
 	notAvailableAudioSource: string | undefined;
 	properties: {
@@ -29,7 +29,7 @@ interface Props {
 
 const {
 	audioCodecs,
-	unparsedPipelines,
+	pipelines,
 	audioSources,
 	notAvailableAudioSource,
 	properties,
@@ -49,19 +49,14 @@ $effect(() => {
 });
 
 const hasAudioSupport = $derived(
-	unparsedPipelines &&
+	pipelines &&
 		properties.pipeline &&
-		(unparsedPipelines[properties.pipeline]?.asrc ||
-			unparsedPipelines[properties.pipeline]?.acodec),
+		pipelines[properties.pipeline]?.supportsAudio,
 );
 
-const hasAudioSource = $derived(
-	unparsedPipelines && properties.pipeline && unparsedPipelines[properties.pipeline]?.asrc,
-);
-
-const hasAudioCodec = $derived(
-	unparsedPipelines && properties.pipeline && unparsedPipelines[properties.pipeline]?.acodec,
-);
+// With the new pipeline structure, supportsAudio means both source and codec are configurable
+const hasAudioSource = $derived(hasAudioSupport);
+const hasAudioCodec = $derived(hasAudioSupport);
 
 // Status colors based on audio support
 const statusColors = $derived.by(() => {
@@ -170,14 +165,14 @@ const statusColors = $derived.by(() => {
 						<Select.Trigger id="audioCodec" class="w-full">
 							{properties.audioCodec && audioCodecs
 								? (Object.entries(audioCodecs).find(
-										(acodec) => acodec[0] === properties.audioCodec,
-									)?.[1] ?? $LL.settings.selectAudioCodec())
+										([codec]) => codec === properties.audioCodec,
+									)?.[1]?.name ?? $LL.settings.selectAudioCodec())
 								: $LL.settings.selectAudioCodec()}
 						</Select.Trigger>
 						<Select.Content>
 							<Select.Group>
-								{#each Object.entries(audioCodecs || {}) as [codec, label]}
-									<Select.Item {label} value={codec}></Select.Item>
+								{#each Object.entries(audioCodecs || {}) as [codec, meta]}
+									<Select.Item label={meta.name} value={codec}></Select.Item>
 								{/each}
 							</Select.Group>
 						</Select.Content>
diff --git a/apps/frontend/src/main/shared/EncoderCard.svelte b/apps/frontend/src/main/shared/EncoderCard.svelte
index a32bd339..5e72ebe3 100644
--- a/apps/frontend/src/main/shared/EncoderCard.svelte
+++ b/apps/frontend/src/main/shared/EncoderCard.svelte
@@ -1,68 +1,82 @@
 <script lang="ts">
 import { LL } from '@ceraui/i18n/svelte';
-import { Binary } from '@lucide/svelte';
+import { Binary, Cpu } from '@lucide/svelte';
+import type { Pipelines, Pipeline, Resolution, Framerate, HardwareType } from '@ceraui/rpc/schemas';
 
 import * as Card from '$lib/components/ui/card';
 import { Checkbox } from '$lib/components/ui/checkbox';
 import { Input } from '$lib/components/ui/input';
 import { Label } from '$lib/components/ui/label';
 import * as Select from '$lib/components/ui/select';
-import type { GroupedPipelines } from '$lib/helpers/PipelineHelper';
+import { getSourceLabel, getResolutionLabel, getFramerateLabel, getHardwareLabel } from '$lib/helpers/PipelineHelper';
 import { cn } from '$lib/utils';
 
+// Available resolutions and framerates
+const RESOLUTIONS: Resolution[] = ["480p", "720p", "1080p", "1440p", "2160p"];
+const FRAMERATES: Framerate[] = [25, 29.97, 30, 50, 59.94, 60];
+
 interface Props {
-	groupedPipelines: GroupedPipelines[keyof GroupedPipelines] | undefined;
+	pipelines: Pipelines | undefined;
+	hardware: HardwareType | undefined;
 	properties: {
-		inputMode: string | undefined;
-		encoder: string | undefined;
-		resolution: string | undefined;
-		framerate: string | undefined;
+		source: string | undefined;
+		resolution: Resolution | undefined;
+		framerate: Framerate | undefined;
 		bitrate: number | undefined;
 		bitrateOverlay: boolean | undefined;
 	};
 	formErrors: Record<string, string>;
 	isStreaming: boolean;
-	onInputModeChange: (value: string) => void;
-	onEncoderChange: (value: string) => void;
-	onResolutionChange: (value: string) => void;
-	onFramerateChange: (value: string) => void;
+	onSourceChange: (value: string) => void;
+	onResolutionChange: (value: Resolution) => void;
+	onFramerateChange: (value: Framerate) => void;
 	onBitrateChange: (value: number) => void;
 	onBitrateOverlayChange: (checked: boolean) => void;
 	updateMaxBitrate: () => void;
 	normalizeValue: (value: number, min: number, max: number, step?: number) => number;
-	getSortedResolutions: (resolutions: string[]) => string[];
-	getSortedFramerates: (
-		framerates: Array<{ extraction: { fps?: string | null } }>,
-	) => Array<{ extraction: { fps?: string | null } }>;
 }
 
 const {
-	groupedPipelines,
+	pipelines,
+	hardware,
 	properties,
 	formErrors,
 	isStreaming,
-	onInputModeChange,
-	onEncoderChange,
+	onSourceChange,
 	onResolutionChange,
 	onFramerateChange,
 	onBitrateChange,
 	onBitrateOverlayChange,
 	updateMaxBitrate,
 	normalizeValue,
-	getSortedResolutions,
-	getSortedFramerates,
 }: Props = $props();
 
-// Local state for all select fields (initialized with defaults, synced via effects)
-let localInputMode = $state('');
-let localEncoder = $state('');
-let localResolution = $state('');
-let localFramerate = $state('');
+// Translation-aware label getters
+const t = (key: string) => {
+	// Use $LL to get translation by key path
+	const parts = key.split('.');
+	let result: unknown = $LL;
+	for (const part of parts) {
+		if (result && typeof result === 'object' && part in result) {
+			result = (result as Record<string, unknown>)[part];
+		} else {
+			return key; // Return key if translation not found
+		}
+	}
+	return typeof result === 'function' ? result() : key;
+};
+
+const getSourceLabelTranslated = (source: string) => getSourceLabel(source, t);
+const getHardwareLabelTranslated = (hw: string) => getHardwareLabel(hw, t);
+
+// Local state for all select fields
+let localSource = $state('');
+let localResolution = $state<Resolution>('1080p');
+let localFramerate = $state<Framerate>(30);
 let localBitrate = $state(5000);
 
 // Track if user has touched each field
-let inputModeTouched = $state(false);
-let encoderTouched = $state(false);
+let sourceTouched = $state(false);
 let resolutionTouched = $state(false);
 let framerateTouched = $state(false);
 
@@ -79,26 +93,18 @@ $effect(() => {
 
 // Sync FROM properties TO local state
 $effect(() => {
-	const newValue = properties.inputMode ?? '';
-	const valueChanged = newValue !== localInputMode;
+	const newValue = properties.source ?? '';
+	const valueChanged = newValue !== localSource;
 	const shouldSync =
-		!inputModeTouched ||
+		!sourceTouched ||
 		isComponentInitialMount ||
-		properties.inputMode === undefined ||
+		properties.source === undefined ||
 		valueChanged;
-	if (shouldSync && valueChanged) localInputMode = newValue;
-});
-
-$effect(() => {
-	const newValue = properties.encoder ?? '';
-	const valueChanged = newValue !== localEncoder;
-	const shouldSync =
-		!encoderTouched || isComponentInitialMount || properties.encoder === undefined || valueChanged;
-	if (shouldSync && valueChanged) localEncoder = newValue;
+	if (shouldSync && valueChanged) localSource = newValue;
 });
 
 $effect(() => {
-	const newValue = properties.resolution ?? '';
+	const newValue = properties.resolution ?? '1080p';
 	const valueChanged = newValue !== localResolution;
 	const shouldSync =
 		!resolutionTouched ||
@@ -109,7 +115,7 @@ $effect(() => {
 });
 
 $effect(() => {
-	const newValue = properties.framerate ?? '';
+	const newValue = properties.framerate ?? 30;
 	const valueChanged = newValue !== localFramerate;
 	const shouldSync =
 		!framerateTouched ||
@@ -124,10 +130,9 @@ $effect(() => {
 	localBitrate = newValue;
 });
 
-const hasOnlyOneEncoder = $derived(
-	properties.inputMode && groupedPipelines?.[properties.inputMode]
-		? Object.keys(groupedPipelines[properties.inputMode]).length === 1
-		: false,
+// Get the selected pipeline
+const selectedPipeline = $derived<Pipeline | undefined>(
+	localSource && pipelines ? pipelines[localSource] : undefined
 );
 
 // Status colors for encoder card (info/blue category)
@@ -145,156 +150,121 @@ const statusColors = {
 	<div class={cn('h-1 bg-gradient-to-r', statusColors.bg)}></div>
 
 	<Card.Header class="p-4 pb-3">
-		<div class="flex items-center gap-2.5">
-			<div class={cn('grid h-9 w-9 shrink-0 place-items-center rounded-lg', statusColors.icon)}>
-				<Binary class="h-4 w-4 text-white" />
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-2.5">
+				<div class={cn('grid h-9 w-9 shrink-0 place-items-center rounded-lg', statusColors.icon)}>
+					<Binary class="h-4 w-4 text-white" />
+				</div>
+				<Card.Title class="text-sm font-semibold">{$LL.settings.encoderSettings()}</Card.Title>
 			</div>
-			<Card.Title class="text-sm font-semibold">{$LL.settings.encoderSettings()}</Card.Title>
+			{#if hardware}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<Cpu class="h-3.5 w-3.5" />
+					<span>{getHardwareLabelTranslated(hardware)}</span>
+				</div>
+			{/if}
 		</div>
 	</Card.Header>
 
 	<Card.Content class="flex-1 space-y-4 px-4 pt-0 pb-4">
-		<!-- Input Mode Selection -->
+		<!-- Video Source Selection -->
 		<div class="space-y-2">
-			<Label class="text-sm font-medium" for="inputMode">{$LL.settings.inputMode()}</Label>
+			<Label class="text-sm font-medium" for="videoSource">{$LL.settings.inputMode()}</Label>
 			<Select.Root
 				disabled={isStreaming}
 				onValueChange={(value) => {
-					localInputMode = value;
-					inputModeTouched = true;
-					onInputModeChange(value);
-				}}
-				type="single"
-				value={localInputMode}
-			>
-				<Select.Trigger id="inputMode" class="w-full">
-					{localInputMode ? localInputMode.toUpperCase() : $LL.settings.selectInputMode()}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						{#if groupedPipelines}
-							{#each Object.entries(groupedPipelines) as [pipelineKey, _]}
-								{@const label = pipelineKey.toUpperCase().split(' ')[0]}
-								<Select.Item {label} value={pipelineKey}></Select.Item>
-							{/each}
-						{/if}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-			{#if formErrors.inputMode}
-				<p class="text-destructive text-sm">{formErrors.inputMode}</p>
-			{/if}
-			{#if properties.inputMode && properties.inputMode.includes('usb')}
-				<p class="text-muted-foreground rounded-md bg-blue-500/10 p-2 text-xs">
-					ℹ️ {$LL.settings.djiCameraMessage()}
-				</p>
-			{/if}
-		</div>
-
-		<!-- Encoding Format Selection -->
-		<div class="space-y-2">
-			<Label class="text-sm font-medium" for="encodingFormat">{$LL.settings.encodingFormat()}</Label
-			>
-			<Select.Root
-				disabled={isStreaming || !properties.inputMode || hasOnlyOneEncoder}
-				onValueChange={(value) => {
-					localEncoder = value;
-					encoderTouched = true;
-					onEncoderChange(value);
+					localSource = value;
+					sourceTouched = true;
+					onSourceChange(value);
 				}}
 				type="single"
-				value={localEncoder}
+				value={localSource}
 			>
-				<Select.Trigger id="encodingFormat" class="w-full">
-					{localEncoder ? localEncoder.toUpperCase() : $LL.settings.selectEncodingOutputFormat()}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						{#if properties.inputMode && groupedPipelines?.[properties.inputMode]}
-							{#each Object.keys(groupedPipelines[properties.inputMode]) as encoder}
-								<Select.Item label={encoder.toUpperCase()} value={encoder}></Select.Item>
-							{/each}
-						{/if}
-					</Select.Group>
-				</Select.Content>
+			<Select.Trigger id="videoSource" class="w-full">
+				{localSource ? getSourceLabelTranslated(localSource) : $LL.settings.selectInputMode()}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					{#if pipelines}
+						{#each Object.entries(pipelines) as [sourceId, pipeline]}
+							<Select.Item value={sourceId}>
+								<div class="flex flex-col py-1">
+									<span class="font-medium">{getSourceLabelTranslated(sourceId)}</span>
+									<span class="text-xs text-muted-foreground">{pipeline.description}</span>
+								</div>
+							</Select.Item>
+						{/each}
+					{/if}
+				</Select.Group>
+			</Select.Content>
 			</Select.Root>
-			{#if formErrors.encoder}
-				<p class="text-destructive text-sm">{formErrors.encoder}</p>
+			{#if formErrors.source}
+				<p class="text-destructive text-sm">{formErrors.source}</p>
 			{/if}
 		</div>
 
-		<!-- Encoding Resolution Selection -->
-		<div class="space-y-2">
-			<Label class="text-sm font-medium" for="encodingResolution"
-				>{$LL.settings.encodingResolution()}</Label
-			>
-			<Select.Root
-				disabled={isStreaming || !properties.encoder}
-				onValueChange={(value) => {
-					localResolution = value;
-					resolutionTouched = true;
-					onResolutionChange(value);
-				}}
-				type="single"
-				value={localResolution}
-			>
-				<Select.Trigger id="encodingResolution" class="w-full">
-					{localResolution ? localResolution : $LL.settings.selectEncodingResolution()}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						{#if properties.encoder && properties.inputMode && groupedPipelines?.[properties.inputMode]?.[properties.encoder]}
-							{@const resolutions = getSortedResolutions(
-								Object.keys(groupedPipelines[properties.inputMode][properties.encoder]),
-							)}
-							{#each resolutions as resolution}
-								<Select.Item label={resolution} value={resolution}></Select.Item>
+		<!-- Resolution Selection (if supported) -->
+		{#if selectedPipeline?.supportsResolutionOverride}
+			<div class="space-y-2">
+				<Label class="text-sm font-medium" for="resolution">{$LL.settings.encodingResolution()}</Label>
+				<Select.Root
+					disabled={isStreaming}
+					onValueChange={(value) => {
+						localResolution = value as Resolution;
+						resolutionTouched = true;
+						onResolutionChange(value as Resolution);
+					}}
+					type="single"
+					value={localResolution}
+				>
+					<Select.Trigger id="resolution" class="w-full">
+						{localResolution ? getResolutionLabel(localResolution) : $LL.settings.selectEncodingResolution()}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							{#each RESOLUTIONS as resolution}
+								<Select.Item label={getResolutionLabel(resolution)} value={resolution}></Select.Item>
 							{/each}
-						{/if}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-			{#if formErrors.resolution}
-				<p class="text-destructive text-sm">{formErrors.resolution}</p>
-			{/if}
-		</div>
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+				{#if formErrors.resolution}
+					<p class="text-destructive text-sm">{formErrors.resolution}</p>
+				{/if}
+			</div>
+		{/if}
 
-		<!-- Framerate Selection -->
-		<div class="space-y-2">
-			<Label class="text-sm font-medium" for="framerate">{$LL.settings.framerate()}</Label>
-			<Select.Root
-				disabled={isStreaming || !properties.resolution}
-				onValueChange={(value) => {
-					localFramerate = value;
-					framerateTouched = true;
-					onFramerateChange(value);
-				}}
-				type="single"
-				value={localFramerate}
-			>
-				<Select.Trigger id="framerate" class="w-full">
-					{localFramerate ? `${localFramerate} ${$LL.units.fps()}` : $LL.settings.selectFramerate()}
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						{#if properties.encoder && properties.inputMode && properties.resolution && groupedPipelines?.[properties.inputMode]?.[properties.encoder][properties.resolution]}
-							{@const framerates = getSortedFramerates(
-								groupedPipelines[properties.inputMode][properties.encoder][properties.resolution],
-							)}
-							{#each framerates as framerate}
-								{#if framerate.extraction.fps}
-									<Select.Item label={framerate.extraction.fps} value={framerate.extraction.fps}
-									></Select.Item>
-								{/if}
+		<!-- Framerate Selection (if supported) -->
+		{#if selectedPipeline?.supportsFramerateOverride}
+			<div class="space-y-2">
+				<Label class="text-sm font-medium" for="framerate">{$LL.settings.framerate()}</Label>
+				<Select.Root
+					disabled={isStreaming}
+					onValueChange={(value) => {
+						const numValue = parseFloat(value) as Framerate;
+						localFramerate = numValue;
+						framerateTouched = true;
+						onFramerateChange(numValue);
+					}}
+					type="single"
+					value={String(localFramerate)}
+				>
+					<Select.Trigger id="framerate" class="w-full">
+						{localFramerate ? getFramerateLabel(localFramerate) : $LL.settings.selectFramerate()}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Group>
+							{#each FRAMERATES as framerate}
+								<Select.Item label={getFramerateLabel(framerate)} value={String(framerate)}></Select.Item>
 							{/each}
-						{/if}
-					</Select.Group>
-				</Select.Content>
-			</Select.Root>
-			{#if formErrors.framerate}
-				<p class="text-destructive text-sm">{formErrors.framerate}</p>
-			{/if}
-		</div>
+						</Select.Group>
+					</Select.Content>
+				</Select.Root>
+				{#if formErrors.framerate}
+					<p class="text-destructive text-sm">{formErrors.framerate}</p>
+				{/if}
+			</div>
+		{/if}
 
 		<!-- Bitrate Control -->
 		<div class="space-y-3 rounded-lg border bg-slate-50 p-4 dark:bg-slate-900/50">
diff --git a/apps/frontend/src/main/tabs/Streaming.svelte b/apps/frontend/src/main/tabs/Streaming.svelte
index 89fdea28..36037d1b 100644
--- a/apps/frontend/src/main/tabs/Streaming.svelte
+++ b/apps/frontend/src/main/tabs/Streaming.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
 import { getTranslationByKey, LL } from '@ceraui/i18n/svelte';
-import type { AudioCodecs, Pipelines } from '@ceraui/rpc/schemas';
+import type { AudioCodecs, Pipelines, Resolution, Framerate } from '@ceraui/rpc/schemas';
 import { onDestroy } from 'svelte';
 import { toast } from 'svelte-sonner';
 
-import { autoSelectNextOption } from '$lib/components/streaming/StreamingAutoSelection';
 import {
 	buildStreamingConfig,
 	startStreamingWithConfig,
 } from '$lib/components/streaming/StreamingConfigService';
-// Import new modular components
 import { createStreamingStateManager } from '$lib/components/streaming/StreamingStateManager.svelte';
 import {
-	getSortedResolutions,
 	normalizeValue,
 	updateMaxBitrate,
 } from '$lib/components/streaming/StreamingUtils';
 import { validateStreamingForm } from '$lib/components/streaming/StreamingValidation';
-import { parsePipelineName } from '$lib/helpers/PipelineHelper';
+import { getDefaultResolution, getDefaultFramerate } from '$lib/helpers/PipelineHelper';
 import { stopStreaming } from '$lib/helpers/SystemHelper';
 import AudioCard from '$main/shared/AudioCard.svelte';
 import EncoderCard from '$main/shared/EncoderCard.svelte';
@@ -25,10 +22,9 @@ import ServerCard from '$main/shared/ServerCard.svelte';
 import StreamingControls from '$main/shared/StreamingControls.svelte';
 
 type Properties = {
-	inputMode: string | undefined;
-	encoder: string | undefined;
-	resolution: string | undefined;
-	framerate: string | undefined;
+	source: string | undefined;
+	resolution: Resolution | undefined;
+	framerate: Framerate | undefined;
 	pipeline: keyof Pipelines | undefined;
 	bitrate: number | undefined;
 	bitrateOverlay: boolean | undefined;
@@ -58,26 +54,25 @@ onDestroy(() => {
 // Extract reactive state using getters from the state manager
 const savedConfig = $derived(stateManager.savedConfig);
 const relayMessage = $derived(stateManager.relayMessage);
-const unparsedPipelines = $derived(stateManager.unparsedPipelines);
+const pipelines = $derived(stateManager.pipelines);
+const hardware = $derived(stateManager.hardware);
 const audioCodecs = $derived(stateManager.audioCodecs);
-const groupedPipelines = $derived(stateManager.groupedPipelines);
 const isStreaming = $derived(stateManager.isStreaming);
 const audioSources = $derived(stateManager.audioSources);
 const notAvailableAudioSource = $derived(stateManager.notAvailableAudioSource);
 
 let properties: Properties = $state({
+	source: undefined,
+	resolution: undefined,
+	framerate: undefined,
+	pipeline: undefined,
 	bitrate: undefined,
 	bitrateOverlay: false,
 	audioCodec: undefined,
 	audioDelay: 0,
 	audioSource: undefined,
-	encoder: undefined,
-	framerate: undefined,
-	inputMode: undefined,
-	pipeline: undefined,
 	relayAccount: undefined,
 	relayServer: undefined,
-	resolution: undefined,
 	srtlaServerAddress: undefined,
 	srtlaServerPort: undefined,
 	srtLatency: undefined,
@@ -96,29 +91,20 @@ const initialSelectedProperties: InitialSelectedProperties = $state({
 // Form state
 let formErrors = $state<Record<string, string>>({});
 
-// Flags to prevent effects from overriding user selections
-let isProgrammaticChange = $state(false);
-
-// Track which specific fields user has touched (per-field interaction tracking)
+// Track which specific fields user has touched
 let srtlaAddressTouched = $state(false);
 let srtlaPortTouched = $state(false);
 let srtStreamIdTouched = $state(false);
-
-// Track relay server/account touched state from parent (to prevent restore override)
 let relayServerTouched = $state(false);
 let relayAccountTouched = $state(false);
 
-// Track encoder-related user interactions (separate from ServerCard)
-let userHasInteracted = $state(false);
-
-// Track initial restoration phase to prevent premature userHasInteracted setting
+// Track initial restoration phase
 let isInitialMount = $state(true);
 let initialMountTimeoutId: ReturnType<typeof setTimeout> | undefined;
 
 // Single-shot: transition from initial mount phase after config is restored
 $effect(() => {
-	// Only schedule the timeout once when savedConfig and pipeline are both ready
-	if (isInitialMount && savedConfig && properties.pipeline && initialMountTimeoutId === undefined) {
+	if (isInitialMount && savedConfig && properties.source && initialMountTimeoutId === undefined) {
 		initialMountTimeoutId = setTimeout(() => {
 			isInitialMount = false;
 		}, 100);
@@ -133,7 +119,6 @@ onDestroy(() => {
 });
 
 // React to saved config changes and initialize properties
-// Uses === undefined checks to correctly handle falsy values (false, 0, '')
 $effect(() => {
 	if (savedConfig) {
 		const config = savedConfig;
@@ -142,7 +127,6 @@ $effect(() => {
 			properties.srtLatency = config.srt_latency ?? 2000;
 		}
 
-		// Only restore fields that user hasn't specifically touched
 		if (!srtlaPortTouched && properties.srtlaServerPort === undefined && config.srtla_port) {
 			properties.srtlaServerPort = config.srtla_port;
 		}
@@ -155,19 +139,25 @@ $effect(() => {
 			properties.srtlaServerAddress = config.srtla_addr;
 		}
 
-		// Use === undefined checks to properly handle 0, false, and '' as valid restored values
 		if (initialSelectedProperties.audioDelay === undefined) {
 			properties.audioDelay = initialSelectedProperties.audioDelay = config.delay ?? 0;
 		}
-		if (initialSelectedProperties.pipeline === undefined) {
-			initialSelectedProperties.pipeline = config.pipeline;
-			properties.pipeline = config.pipeline;
+		
+		// Restore source from saved pipeline (only if it exists in current pipelines)
+		if (initialSelectedProperties.pipeline === undefined && config.pipeline && pipelines) {
+			// Only restore if the saved pipeline exists as a valid source
+			if (pipelines[config.pipeline]) {
+				initialSelectedProperties.pipeline = config.pipeline;
+				properties.pipeline = config.pipeline;
+				properties.source = config.pipeline;
+			}
+			// If old format pipeline, clear it - user will need to reselect
 		}
+		
 		if (initialSelectedProperties.bitrate === undefined) {
 			properties.bitrate = initialSelectedProperties.bitrate = config?.max_br ?? 5000;
 		}
 
-		// bitrateOverlay can legitimately be false, so check === undefined
 		if (initialSelectedProperties.bitrateOverlay === undefined) {
 			properties.bitrateOverlay = initialSelectedProperties.bitrateOverlay =
 				config?.bitrate_overlay ?? false;
@@ -181,14 +171,12 @@ $effect(() => {
 	}
 });
 
-// React to relay server changes - only restore if user hasn't touched the fields
+// React to relay server changes
 $effect(() => {
 	if (relayMessage && savedConfig !== undefined && savedConfig.relay_server) {
-		// Only restore relay server if user hasn't touched it
 		if (!relayServerTouched && properties.relayServer === undefined) {
 			properties.relayServer = savedConfig.relay_server ? savedConfig.relay_server : '-1';
 		}
-		// Only restore relay account if user hasn't touched it
 		if (
 			!relayAccountTouched &&
 			properties.relayAccount === undefined &&
@@ -197,89 +185,41 @@ $effect(() => {
 			properties.relayAccount = savedConfig.relay_account;
 		}
 	} else if (properties.relayServer === undefined) {
-		// Set defaults only if not yet set
 		properties.relayServer = '-1';
 		properties.relayAccount = '-1';
 	}
 });
 
-// Parse pipeline to populate encoder fields (during init or programmatic changes, not user interaction)
-$effect.pre(() => {
-	if (
-		properties.pipeline &&
-		unparsedPipelines !== undefined &&
-		$LL &&
-		(!userHasInteracted || isProgrammaticChange)
-	) {
-		const pipelineData = unparsedPipelines[properties.pipeline];
-		if (!pipelineData) {
-			return;
-		}
-
-		const parsedPipeline = parsePipelineName(pipelineData.name, {
-			matchDeviceResolution: $LL.settings.matchDeviceResolution(),
-			matchDeviceOutput: $LL.settings.matchDeviceOutput(),
-		});
-
-		properties.inputMode = parsedPipeline.format ?? undefined;
-		properties.encoder = parsedPipeline.encoder ?? undefined;
-		properties.resolution = parsedPipeline.resolution ?? undefined;
-		properties.framerate = parsedPipeline.fps?.toString() ?? undefined;
-
-		// Auto-select aac as default audio codec if pipeline supports audio and no codec is selected
-		if (pipelineData.acodec && !properties.audioCodec && audioCodecs) {
-			const aacCodec = Object.keys(audioCodecs).find((codec) => codec.toLowerCase() === 'aac');
-			if (aacCodec) {
-				properties.audioCodec = aacCodec as AudioCodecs;
-			}
-		}
-	}
-});
-
-$effect(() => {
-	// During initial mount, don't interfere with pipeline restoration
-	if (isInitialMount) {
-		return;
-	}
-
-	// Minimal validation effect - just clear pipeline when incomplete
-	// All validation, auto-selection, and pipeline building is now handled in autoSelectNextOption
-	if (
-		!properties.inputMode ||
-		!properties.encoder ||
-		!properties.resolution ||
-		!properties.framerate
-	) {
-		if (properties.pipeline) {
-			properties.pipeline = undefined;
-		}
-	}
-});
-
-// Build pipeline when groupedPipelines becomes available and all fields are set
-// This handles the case where config is restored before pipelines are loaded
+// Set pipeline key when source changes
 $effect(() => {
-	if (
-		groupedPipelines &&
-		properties.inputMode &&
-		properties.encoder &&
-		properties.resolution &&
-		properties.framerate &&
-		!properties.pipeline
-	) {
-		const result = autoSelectNextOption('framerate', properties, groupedPipelines);
-		if (result.pipeline) {
-			properties.pipeline = result.pipeline;
+	if (properties.source && pipelines) {
+		const pipeline = pipelines[properties.source];
+		if (pipeline) {
+			properties.pipeline = properties.source;
+			
+			// Set default resolution and framerate if not already set
+			if (!properties.resolution && pipeline.defaultResolution) {
+				properties.resolution = pipeline.defaultResolution;
+			}
+			if (!properties.framerate && pipeline.defaultFramerate) {
+				properties.framerate = pipeline.defaultFramerate;
+			}
+			
+			// Auto-select AAC codec if pipeline supports audio
+			if (pipeline.supportsAudio && !properties.audioCodec && audioCodecs) {
+				const aacCodec = Object.keys(audioCodecs).find((codec) => codec.toLowerCase() === 'aac');
+				if (aacCodec) {
+					properties.audioCodec = aacCodec as AudioCodecs;
+				}
+			}
 		}
 	}
 });
 
-// Updated helper to use modular validation
 function validateForm() {
 	const result = validateStreamingForm(
 		{
-			inputMode: properties.inputMode,
-			encoder: properties.encoder,
+			source: properties.source,
 			resolution: properties.resolution,
 			framerate: properties.framerate,
 			bitrate: properties.bitrate,
@@ -291,34 +231,17 @@ function validateForm() {
 			audioCodec: properties.audioCodec,
 		},
 		(key) => getTranslationByKey($LL, key),
-		{ unparsedPipelines },
+		{ pipelines },
 	);
 
 	formErrors = result.errors;
 	return result.isValid;
 }
 
-// Updated helper to use modular update function
 const handleMaxBitrateUpdate = () => {
 	updateMaxBitrate(properties.bitrate, isStreaming);
 };
 
-// Local framerate sorter to match EncoderCard's expected signature
-type MinimalPipeline = { extraction: { fps?: string | null } };
-const getSortedFramerates = (framerates: MinimalPipeline[]): MinimalPipeline[] => {
-	return [...framerates].sort((a, b) => {
-		const fpsA = a.extraction.fps;
-		const fpsB = b.extraction.fps;
-		if (typeof fpsA === 'string' && fpsA.toLowerCase().includes('match')) return -1;
-		if (typeof fpsB === 'string' && fpsB.toLowerCase().includes('match')) return 1;
-		const numA = parseFloat(String(fpsA));
-		const numB = parseFloat(String(fpsB));
-		const safeA = Number.isFinite(numA) ? numA : 0;
-		const safeB = Number.isFinite(numB) ? numB : 0;
-		return safeA - safeB;
-	});
-};
-
 function onSubmitStreamingForm(event: Event) {
 	event.preventDefault();
 
@@ -330,109 +253,46 @@ function onSubmitStreamingForm(event: Event) {
 }
 
 const startStreamingWithCurrentConfig = () => {
-	// Try to dismiss all toasts first
 	try {
 		toast.dismiss();
 	} catch (error) {
 		console.warn('Could not dismiss toasts:', error);
 	}
 
-	// Ensure a pipeline is built before attempting to start
-	if (
-		!properties.pipeline &&
-		properties.inputMode &&
-		properties.encoder &&
-		properties.resolution &&
-		properties.framerate &&
-		groupedPipelines
-	) {
-		const result = autoSelectNextOption('framerate', properties, groupedPipelines);
-		properties = Object.assign({}, properties, result);
-	}
-
-	const config = buildStreamingConfig(properties, { unparsedPipelines });
+	const config = buildStreamingConfig(properties, { pipelines });
 
 	if (config) {
 		startStreamingWithConfig(config);
 	} else {
 		toast.error('Unable to start streaming: incomplete or invalid selection.', {
-			description:
-				'Please ensure input mode, encoder, resolution, and framerate form a valid pipeline.',
+			description: 'Please ensure video source is selected.',
 		});
 	}
 };
 
-// Auto-selection handlers using modular functions
-const handleInputModeChange = (value: string) => {
-	// Only mark user interaction if not during initial restoration
-	if (!isInitialMount) {
-		userHasInteracted = true;
-	}
-	isProgrammaticChange = true;
-
-	// Unified flow: validate → clean → auto-select → build pipeline
-	if (value && groupedPipelines) {
-		const updatedProperties = { ...properties, inputMode: value };
-		const result = autoSelectNextOption('inputMode', updatedProperties, groupedPipelines);
-		properties = Object.assign({}, properties, { inputMode: value }, result);
-	} else {
-		properties = { ...properties, inputMode: value };
-	}
-	isProgrammaticChange = false;
-};
-
-const handleEncoderChange = (value: string) => {
-	// Only mark user interaction if not during initial restoration
-	if (!isInitialMount) {
-		userHasInteracted = true;
-	}
-	isProgrammaticChange = true;
-
-	// Unified flow: validate → clean → auto-select → build pipeline
-	if (value && groupedPipelines) {
-		const updatedProperties = { ...properties, encoder: value };
-		const result = autoSelectNextOption('encoder', updatedProperties, groupedPipelines);
-		properties = Object.assign({}, properties, { encoder: value }, result);
-	} else {
-		properties = { ...properties, encoder: value };
+// Handler functions
+const handleSourceChange = (value: string) => {
+	properties.source = value;
+	properties.pipeline = value;
+	
+	// Apply defaults from pipeline metadata
+	if (pipelines && pipelines[value]) {
+		const pipeline = pipelines[value];
+		if (pipeline.defaultResolution) {
+			properties.resolution = pipeline.defaultResolution;
+		}
+		if (pipeline.defaultFramerate) {
+			properties.framerate = pipeline.defaultFramerate;
+		}
 	}
-	isProgrammaticChange = false;
 };
 
-const handleResolutionChange = (value: string) => {
-	// Only mark user interaction if not during initial restoration
-	if (!isInitialMount) {
-		userHasInteracted = true;
-	}
-	isProgrammaticChange = true;
-
-	// Unified flow: validate → clean → auto-select → build pipeline
-	if (value && groupedPipelines) {
-		const updatedProperties = { ...properties, resolution: value };
-		const result = autoSelectNextOption('resolution', updatedProperties, groupedPipelines);
-		properties = Object.assign({}, properties, { resolution: value }, result);
-	} else {
-		properties = { ...properties, resolution: value };
-	}
-	isProgrammaticChange = false;
+const handleResolutionChange = (value: Resolution) => {
+	properties.resolution = value;
 };
 
-const handleFramerateChange = (value: string) => {
-	// Only mark user interaction if not during initial restoration
-	if (!isInitialMount) {
-		userHasInteracted = true;
-	}
-	isProgrammaticChange = true;
-
-	// Unified flow: validate → build pipeline
-	if (value && groupedPipelines) {
-		const updatedProperties = { ...properties, framerate: value };
-		const result = autoSelectNextOption('framerate', updatedProperties, groupedPipelines);
-		properties = Object.assign({}, properties, { framerate: value }, result);
-	} else {
-		properties = { ...properties, framerate: value };
-	}
-	isProgrammaticChange = false;
+const handleFramerateChange = (value: Framerate) => {
+	properties.framerate = value;
 };
 </script>
 
@@ -446,20 +306,17 @@ const handleFramerateChange = (value: string) => {
 				<div class="h-full">
 					<EncoderCard
 						{formErrors}
-						{getSortedFramerates}
-						{getSortedResolutions}
-						{groupedPipelines}
+						{pipelines}
+						{hardware}
 						isStreaming={!!isStreaming}
 						{normalizeValue}
 						onBitrateChange={(value) => (properties.bitrate = value)}
 						onBitrateOverlayChange={(checked) => (properties.bitrateOverlay = checked)}
-						onEncoderChange={handleEncoderChange}
-						onFramerateChange={handleFramerateChange}
-						onInputModeChange={handleInputModeChange}
+						onSourceChange={handleSourceChange}
 						onResolutionChange={handleResolutionChange}
+						onFramerateChange={handleFramerateChange}
 						properties={{
-							inputMode: properties.inputMode,
-							encoder: properties.encoder,
+							source: properties.source,
 							resolution: properties.resolution,
 							framerate: properties.framerate,
 							bitrate: properties.bitrate,
@@ -486,7 +343,7 @@ const handleFramerateChange = (value: string) => {
 							audioCodec: properties.audioCodec,
 							audioDelay: properties.audioDelay,
 						}}
-						{unparsedPipelines}
+						pipelines={pipelines}
 					/>
 				</div>
 
@@ -536,24 +393,21 @@ const handleFramerateChange = (value: string) => {
 			</div>
 		</div>
 
-		<!-- Streaming Controls - Floating Button at Bottom -->
+		<!-- Streaming Controls -->
 		<StreamingControls
 			disabled={false}
 			isStreaming={!!isStreaming}
 			onStart={startStreamingWithCurrentConfig}
 			onStop={() => {
-				// Try to dismiss all toasts first
 				try {
 					toast.dismiss();
 				} catch (error) {
 					console.warn('Could not dismiss toasts:', error);
 				}
 
-				// Stop streaming with proper toast cleanup via the global function
 				if (window.stopStreamingWithNotificationClear) {
 					window.stopStreamingWithNotificationClear();
 				} else {
-					// Fallback
 					stopStreaming();
 				}
 			}}
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
new file mode 100644
index 00000000..bb32b835
--- /dev/null
+++ b/docs/ARCHITECTURE.md
@@ -0,0 +1,88 @@
+# CeraUI Architecture
+
+## Components
+- **Frontend (Svelte)**: Browser UI, talks to backend via WebSocket/RPC.
+- **Backend (Bun/TypeScript)**: Orchestrates ceracoder, srtla, network/modem, relays RPC events.
+- **ceracoder**: Runs GStreamer pipeline internally (capture, encode, mux) and sends SRT.
+- **srtla**: Splits SRT packets across multiple interfaces (bonding).
+- **srtla_rec**: Reassembles bonded streams on the server.
+- **srt-live-transmit**: Relays to the final consumer (OBS/Player/CDN).
+
+## System Flow (Frontend → Backend → Encoder)
+```
+Browser (CeraUI Frontend)
+    |
+    | WebSocket / RPC
+    v
+Backend (Bun/TypeScript)
+    |
+    | spawn / signal / configure
+    v
+ceracoder
+    |
+    | SRT (localhost)
+    v
+srtla (sender)
+    |
+    +-- Modem1 (4G/5G)
+    +-- Modem2 (4G/5G)
+    +-- WiFi / Ethernet
+          |
+          v
+       Internet
+```
+
+## Streaming Pipeline (Encoder → Bonding → Server)
+```
+ENCODER DEVICE (Field)                        SERVER (Ingest/Cloud)
+======================                        =====================
+
+Video Source (HDMI/USB/SRT/etc)
+        |
+        v
+   ceracoder
+   +---------------------------+
+   | GStreamer (internal)      |
+   | - Capture/Encode/Mux      |
+   | - MPEG-TS + SRT send      |
+   +-------------+-------------+
+                 |
+                 | SRT (localhost:9000)
+                 v
+           srtla (sender)
+   +-------------+-------------+
+   | splits packets across     |
+   | multiple interfaces       |
+   +------+------+------+------+
+          |      |      |
+      Modem1  Modem2  WiFi
+          \      |      /
+           \     |     /
+            \    |    /
+             \   |   /
+              \  |  /
+               \ | /
+             Internet
+                 |
+                 v
+                            srtla_rec
+                    +----------------------+
+                    | reassemble bonded    |
+                    | SRT stream           |
+                    +----------+-----------+
+                               |
+                               v
+                        srt-live-transmit
+                    +----------------------+
+                    | relay / bridge       |
+                    +----------+-----------+
+                               |
+                               v
+                       OBS / Player / CDN
+```
+
+## Data & Control Paths
+- **Control**: Frontend → Backend (RPC) → ceracoder/srtla (spawn, config, SIGHUP).
+- **Media**: ceracoder (GStreamer) → SRT → srtla → bonded links → srtla_rec → srt-live-transmit → consumer.
+- **Bitrate Adaptation**: ceracoder reads SRT stats, adjusts encoder bitrate dynamically.
+- **Config Reload**: ceracoder supports SIGHUP to reload INI without restart.
diff --git a/packages/i18n/src/ar/index.ts b/packages/i18n/src/ar/index.ts
index a842ee19..4b14f779 100644
--- a/packages/i18n/src/ar/index.ts
+++ b/packages/i18n/src/ar/index.ts
@@ -259,6 +259,24 @@ const ar = {
 	settings: {
 		encoderSettings: "إعدادات المرمز",
 		inputMode: "وضع الإدخال",
+		hardware: "الأجهزة",
+		hardwareTypes: {
+			jetson: "NVIDIA Jetson",
+			rk3588: "Rockchip RK3588",
+			n100: "Intel N100",
+			generic: "Generic (Software)",
+		},
+		sources: {
+			camlink: "Cam Link 4K",
+			libuvch264: "كاميرا UVC H264",
+			hdmi: "التقاط HDMI",
+			usb_mjpeg: "USB MJPEG",
+			v4l_mjpeg: "V4L2 MJPEG",
+			rtmp: "إدخال RTMP",
+			srt: "إدخال SRT",
+			test: "نمط اختبار",
+			decklink: "Decklink SDI",
+		},
 		djiCameraMessage:
 			"قد تعمل كاميرات DJI بشكل أفضل باستخدام وضع الإدخال USB-LIBUVCH264",
 		selectInputMode: "اختر وضع الإدخال",
diff --git a/packages/i18n/src/de/index.ts b/packages/i18n/src/de/index.ts
index e3d417a2..03221b37 100644
--- a/packages/i18n/src/de/index.ts
+++ b/packages/i18n/src/de/index.ts
@@ -287,6 +287,24 @@ const de = {
 	settings: {
 		encoderSettings: "Encoder-Einstellungen",
 		inputMode: "Eingabemodus",
+		hardware: "Hardware",
+		hardwareTypes: {
+			jetson: "NVIDIA Jetson",
+			rk3588: "Rockchip RK3588",
+			n100: "Intel N100",
+			generic: "Generic (Software)",
+		},
+		sources: {
+			camlink: "Cam Link 4K",
+			libuvch264: "UVC H264 Kamera",
+			hdmi: "HDMI Capture",
+			usb_mjpeg: "USB MJPEG",
+			v4l_mjpeg: "V4L2 MJPEG",
+			rtmp: "RTMP Ingest",
+			srt: "SRT Ingest",
+			test: "Testbild",
+			decklink: "Decklink SDI",
+		},
 		djiCameraMessage:
 			"DJI-Kameras funktionieren möglicherweise besser im USB-LIBUVCH264-Eingabemodus",
 		selectInputMode: "Wähle den Eingabemodus",
diff --git a/packages/i18n/src/en/index.ts b/packages/i18n/src/en/index.ts
index 119b0bd0..df5dc4e9 100644
--- a/packages/i18n/src/en/index.ts
+++ b/packages/i18n/src/en/index.ts
@@ -289,6 +289,26 @@ const en = {
 	settings: {
 		encoderSettings: "Encoder Settings",
 		inputMode: "Input Mode",
+		hardware: "Hardware",
+		// Hardware types
+		hardwareTypes: {
+			jetson: "NVIDIA Jetson",
+			rk3588: "Rockchip RK3588",
+			n100: "Intel N100",
+			generic: "Generic (Software)",
+		},
+		// Video sources
+		sources: {
+			camlink: "Cam Link 4K",
+			libuvch264: "UVC H264 Camera",
+			hdmi: "HDMI Capture",
+			usb_mjpeg: "USB MJPEG",
+			v4l_mjpeg: "V4L2 MJPEG",
+			rtmp: "RTMP Ingest",
+			srt: "SRT Ingest",
+			test: "Test Pattern",
+			decklink: "Decklink SDI",
+		},
 		djiCameraMessage:
 			"DJI cameras may work better using the USB-LIBUVCH264 input mode",
 		selectInputMode: "Select the input mode",
diff --git a/packages/i18n/src/es/index.ts b/packages/i18n/src/es/index.ts
index 65baaad7..24c239b3 100644
--- a/packages/i18n/src/es/index.ts
+++ b/packages/i18n/src/es/index.ts
@@ -299,6 +299,26 @@ const es = {
 	settings: {
 		encoderSettings: "Configuración del codificador",
 		inputMode: "Modo de entrada",
+		hardware: "Hardware",
+		// Hardware types
+		hardwareTypes: {
+			jetson: "NVIDIA Jetson",
+			rk3588: "Rockchip RK3588",
+			n100: "Intel N100",
+			generic: "Genérico (Software)",
+		},
+		// Video sources
+		sources: {
+			camlink: "Cam Link 4K",
+			libuvch264: "Cámara UVC H264",
+			hdmi: "Captura HDMI",
+			usb_mjpeg: "USB MJPEG",
+			v4l_mjpeg: "V4L2 MJPEG",
+			rtmp: "Entrada RTMP",
+			srt: "Entrada SRT",
+			test: "Patrón de prueba",
+			decklink: "Decklink SDI",
+		},
 		djiCameraMessage:
 			"Las cámaras DJI suelen funcionar mejor usando el modo de entrada USB-LIBUVCH264",
 		selectInputMode: "Seleccione el modo de Entrada",
diff --git a/packages/i18n/src/fr/index.ts b/packages/i18n/src/fr/index.ts
index a36e79e5..148a489b 100644
--- a/packages/i18n/src/fr/index.ts
+++ b/packages/i18n/src/fr/index.ts
@@ -273,6 +273,24 @@ const fr = {
 	settings: {
 		encoderSettings: "Paramètres de l'encodeur",
 		inputMode: "Mode d'entrée",
+		hardware: "Matériel",
+		hardwareTypes: {
+			jetson: "NVIDIA Jetson",
+			rk3588: "Rockchip RK3588",
+			n100: "Intel N100",
+			generic: "Generic (Software)",
+		},
+		sources: {
+			camlink: "Cam Link 4K",
+			libuvch264: "Caméra UVC H264",
+			hdmi: "Capture HDMI",
+			usb_mjpeg: "USB MJPEG",
+			v4l_mjpeg: "V4L2 MJPEG",
+			rtmp: "Entrée RTMP",
+			srt: "Entrée SRT",
+			test: "Mire de test",
+			decklink: "Decklink SDI",
+		},
 		djiCameraMessage:
 			"Les caméras DJI peuvent mieux fonctionner en utilisant le mode d’entrée USB-LIBUVCH264",
 		selectInputMode: "Sélectionnez le mode d'entrée",
diff --git a/packages/i18n/src/hi/index.ts b/packages/i18n/src/hi/index.ts
index 4bf69c5f..773e31fd 100644
--- a/packages/i18n/src/hi/index.ts
+++ b/packages/i18n/src/hi/index.ts
@@ -85,6 +85,24 @@ const hi = {
 	settings: {
 		encoderSettings: "एनकोडर सेटिंग्स",
 		inputMode: "इनपुट मोड",
+	hardware: "हार्डवेयर",
+	hardwareTypes: {
+		jetson: "NVIDIA Jetson",
+		rk3588: "Rockchip RK3588",
+		n100: "Intel N100",
+		generic: "Generic (Software)",
+	},
+	sources: {
+		camlink: "Cam Link 4K",
+		libuvch264: "UVC H264 कैमरा",
+		hdmi: "HDMI कैप्चर",
+		usb_mjpeg: "USB MJPEG",
+		v4l_mjpeg: "V4L2 MJPEG",
+		rtmp: "RTMP इनजेस्ट",
+		srt: "SRT इनजेस्ट",
+		test: "टेस्ट पैटर्न",
+		decklink: "Decklink SDI",
+	},
 		selectInputMode: "इनपुट मोड चुनें",
 		djiCameraMessage:
 			"DJI कैमरे USB-LIBUVCH264 इनपुट मोड का उपयोग करके बेहतर काम कर सकते हैं",
diff --git a/packages/i18n/src/ja/index.ts b/packages/i18n/src/ja/index.ts
index ab058540..facdbdb3 100644
--- a/packages/i18n/src/ja/index.ts
+++ b/packages/i18n/src/ja/index.ts
@@ -86,6 +86,24 @@ const ja = {
 	settings: {
 		encoderSettings: "エンコーダー設定",
 		inputMode: "入力モード",
+	hardware: "ハードウェア",
+	hardwareTypes: {
+		jetson: "NVIDIA Jetson",
+		rk3588: "Rockchip RK3588",
+		n100: "Intel N100",
+		generic: "Generic (Software)",
+	},
+	sources: {
+		camlink: "Cam Link 4K",
+		libuvch264: "UVC H264 カメラ",
+		hdmi: "HDMI キャプチャ",
+		usb_mjpeg: "USB MJPEG",
+		v4l_mjpeg: "V4L2 MJPEG",
+		rtmp: "RTMP インジェスト",
+		srt: "SRT インジェスト",
+		test: "テストパターン",
+		decklink: "Decklink SDI",
+	},
 		djiCameraMessage:
 			"DJIカメラはUSB-LIBUVCH264入力モードを使用するとより良く動作する可能性があります",
 		selectInputMode: "入力モードを選択",
diff --git a/packages/i18n/src/ko/index.ts b/packages/i18n/src/ko/index.ts
index cacc62ea..3fe77098 100644
--- a/packages/i18n/src/ko/index.ts
+++ b/packages/i18n/src/ko/index.ts
@@ -85,6 +85,24 @@ const ko = {
 	settings: {
 		encoderSettings: "인코더 설정",
 		inputMode: "입력 모드",
+	hardware: "하드웨어",
+	hardwareTypes: {
+		jetson: "NVIDIA Jetson",
+		rk3588: "Rockchip RK3588",
+		n100: "Intel N100",
+		generic: "Generic (Software)",
+	},
+	sources: {
+		camlink: "Cam Link 4K",
+		libuvch264: "UVC H264 카메라",
+		hdmi: "HDMI 캡처",
+		usb_mjpeg: "USB MJPEG",
+		v4l_mjpeg: "V4L2 MJPEG",
+		rtmp: "RTMP 인제스트",
+		srt: "SRT 인제스트",
+		test: "테스트 패턴",
+		decklink: "Decklink SDI",
+	},
 		djiCameraMessage:
 			"DJI 카메라는 USB-LIBUVCH264 입력 모드를 사용하면 더 잘 작동할 수 있습니다",
 		selectInputMode: "입력 모드를 선택",
diff --git a/packages/i18n/src/pt-BR/index.ts b/packages/i18n/src/pt-BR/index.ts
index b561932e..9700f04a 100644
--- a/packages/i18n/src/pt-BR/index.ts
+++ b/packages/i18n/src/pt-BR/index.ts
@@ -272,6 +272,24 @@ const ptBR = {
 	settings: {
 		encoderSettings: "Configurações do Codificador",
 		inputMode: "Modo de Entrada",
+	hardware: "Hardware",
+	hardwareTypes: {
+		jetson: "NVIDIA Jetson",
+		rk3588: "Rockchip RK3588",
+		n100: "Intel N100",
+		generic: "Generic (Software)",
+	},
+	sources: {
+		camlink: "Cam Link 4K",
+		libuvch264: "Câmera UVC H264",
+		hdmi: "Captura HDMI",
+		usb_mjpeg: "USB MJPEG",
+		v4l_mjpeg: "V4L2 MJPEG",
+		rtmp: "Ingestão RTMP",
+		srt: "Ingestão SRT",
+		test: "Padrão de teste",
+		decklink: "Decklink SDI",
+	},
 		djiCameraMessage:
 			"As câmeras DJI podem funcionar melhor usando o modo de entrada USB-LIBUVCH264",
 		selectInputMode: "Selecione o modo de entrada",
diff --git a/packages/i18n/src/zh/index.ts b/packages/i18n/src/zh/index.ts
index e71dd7a9..ca60dd6c 100644
--- a/packages/i18n/src/zh/index.ts
+++ b/packages/i18n/src/zh/index.ts
@@ -84,6 +84,24 @@ const zh = {
 	settings: {
 		encoderSettings: "编码器设置",
 		inputMode: "输入模式",
+	hardware: "硬件",
+	hardwareTypes: {
+		jetson: "NVIDIA Jetson",
+		rk3588: "Rockchip RK3588",
+		n100: "Intel N100",
+		generic: "Generic (Software)",
+	},
+	sources: {
+		camlink: "Cam Link 4K",
+		libuvch264: "UVC H264 相机",
+		hdmi: "HDMI 采集",
+		usb_mjpeg: "USB MJPEG",
+		v4l_mjpeg: "V4L2 MJPEG",
+		rtmp: "RTMP 采集",
+		srt: "SRT 采集",
+		test: "测试图案",
+		decklink: "Decklink SDI",
+	},
 		djiCameraMessage: "DJI 相机在使用 USB-LIBUVCH264 输入模式时可能表现更好",
 		selectInputMode: "选择输入模式",
 		selectEncodingOutputFormat: "选择输出编解码器",
diff --git a/packages/rpc/src/schemas/streaming.schema.ts b/packages/rpc/src/schemas/streaming.schema.ts
index 9b4e585f..24dc6231 100644
--- a/packages/rpc/src/schemas/streaming.schema.ts
+++ b/packages/rpc/src/schemas/streaming.schema.ts
@@ -40,20 +40,113 @@ export const bitrateOutputSchema = z.object({
 });
 export type BitrateOutput = z.infer<typeof bitrateOutputSchema>;
 
-// Pipeline schema
+// Resolution and framerate types for pipeline overrides
+export const resolutionSchema = z.enum(["480p", "720p", "1080p", "1440p", "2160p", "4k"]);
+export type Resolution = z.infer<typeof resolutionSchema>;
+
+export const framerateSchema = z.union([
+	z.literal(25),
+	z.literal(29.97),
+	z.literal(30),
+	z.literal(50),
+	z.literal(59.94),
+	z.literal(60),
+]);
+export type Framerate = z.infer<typeof framerateSchema>;
+
+// Hardware type schema
+export const hardwareTypeSchema = z.enum(["jetson", "rk3588", "n100", "generic"]);
+export type HardwareType = z.infer<typeof hardwareTypeSchema>;
+
+// Hardware labels (browser-safe, no Node deps)
+export const HARDWARE_LABELS: Record<HardwareType, string> = {
+	jetson: "NVIDIA Jetson",
+	rk3588: "Rockchip RK3588",
+	n100: "Intel N100",
+	generic: "Generic (Software)",
+};
+
+// Hardware descriptions for UI
+export const HARDWARE_DESCRIPTIONS: Record<HardwareType, string> = {
+	jetson: "NVIDIA nvenc hardware encoding",
+	rk3588: "Rockchip MPP hardware encoding (supports 4K)",
+	n100: "Intel VAAPI hardware encoding",
+	generic: "Software x264/x265 encoding",
+};
+
+// Hardware colors for UI (Tailwind classes)
+export const HARDWARE_COLORS: Record<HardwareType, { text: string; bg: string; border: string }> = {
+	jetson: {
+		text: "text-green-600 dark:text-green-400",
+		bg: "bg-green-500",
+		border: "border-green-500 bg-green-500/20",
+	},
+	rk3588: {
+		text: "text-orange-600 dark:text-orange-400",
+		bg: "bg-orange-500",
+		border: "border-orange-500 bg-orange-500/20",
+	},
+	n100: {
+		text: "text-blue-600 dark:text-blue-400",
+		bg: "bg-blue-500",
+		border: "border-blue-500 bg-blue-500/20",
+	},
+	generic: {
+		text: "text-gray-600 dark:text-gray-400",
+		bg: "bg-gray-500",
+		border: "border-gray-500 bg-gray-500/20",
+	},
+};
+
+// Video source labels (browser-safe)
+export const VIDEO_SOURCE_LABELS: Record<string, string> = {
+	camlink: "Cam Link 4K",
+	libuvch264: "UVC H264 Camera",
+	hdmi: "HDMI Capture",
+	usb_mjpeg: "USB MJPEG",
+	v4l_mjpeg: "V4L2 MJPEG",
+	rtmp: "RTMP Ingest",
+	srt: "SRT Ingest",
+	test: "Test Pattern",
+	decklink: "Decklink SDI",
+};
+
+// Pipeline schema - now based on video sources with structured metadata
 export const pipelineSchema = z.object({
 	name: z.string(),
-	asrc: z.boolean(),
-	acodec: z.boolean(),
+	description: z.string(),
+	supportsAudio: z.boolean(),
+	supportsResolutionOverride: z.boolean(),
+	supportsFramerateOverride: z.boolean(),
+	defaultResolution: resolutionSchema.optional(),
+	defaultFramerate: framerateSchema.optional(),
 });
 export type Pipeline = z.infer<typeof pipelineSchema>;
 
-// Pipelines message schema
+// Pipelines message schema - includes hardware info
+export const pipelinesMessageSchema = z.object({
+	hardware: hardwareTypeSchema,
+	pipelines: z.record(z.string(), pipelineSchema),
+});
+export type PipelinesMessage = z.infer<typeof pipelinesMessageSchema>;
+
+// Legacy alias for backwards compatibility
 export const pipelinesSchema = z.record(z.string(), pipelineSchema);
 export type Pipelines = z.infer<typeof pipelinesSchema>;
 
-// Audio codecs message schema
-export const audioCodecsMessageSchema = z.record(audioCodecSchema, z.string());
+// Available resolutions for UI
+export const AVAILABLE_RESOLUTIONS: Resolution[] = ["480p", "720p", "1080p", "1440p", "2160p"];
+
+// Available framerates for UI
+export const AVAILABLE_FRAMERATES: Framerate[] = [25, 29.97, 30, 50, 59.94, 60];
+
+// Audio codecs message schema (objects with name field)
+export const audioCodecsMessageSchema = z.record(
+	audioCodecSchema,
+	z.object({
+		name: z.string(),
+	}),
+);
 export type AudioCodecsMessage = z.infer<typeof audioCodecsMessageSchema>;
 
 import { customProviderInputSchema, providerSelectionSchema } from './cloud-provider.schema';
@@ -92,8 +185,8 @@ export const streamingStopOutputSchema = z.object({
 });
 export type StreamingStopOutput = z.infer<typeof streamingStopOutputSchema>;
 
-// Dev-only mock hardware switcher schemas
-export const mockHardwareTypeSchema = z.enum(['jetson', 'n100', 'rk3588']);
+// Dev-only mock hardware switcher schemas (includes generic for software fallback)
+export const mockHardwareTypeSchema = z.enum(['jetson', 'n100', 'rk3588', 'generic']);
 export type MockHardwareType = z.infer<typeof mockHardwareTypeSchema>;
 
 export const setMockHardwareInputSchema = z.object({