2 files changed, 46 insertions, 0 deletions
diff --git a/src/features/surface-host/ui/Number.svelte b/src/features/surface-host/ui/Number.svelte
new file mode 100644
index 0000000..0f3323d
--- /dev/null
+++ b/src/features/surface-host/ui/Number.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { InvokeMessage } from "@dispatch/ui-contract";
+	import type { NumberFieldView } from "../logic/types";
+
+	let {
+		field,
+		surfaceId,
+		onInvoke,
+	}: { field: NumberFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } =
+		$props();
+
+	// Commit on change/Enter rather than every keystroke. Ignore empty/non-numeric
+	// input (the backend also floors/validates); send the new number as payload.
+	function commit(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const next = target.valueAsNumber;
+		if (Number.isNaN(next)) return;
+		onInvoke({
+			type: "invoke",
+			surfaceId,
+			actionId: field.action.actionId,
+			payload: next,
+		});
+	}
+</script>
+
+<label class="flex items-center justify-between gap-2 text-sm">
+	<span>{field.label}</span>
+	<span class="flex items-center gap-1">
+		<input
+			type="number"
+			class="input input-bordered input-sm w-24"
+			value={field.value}
+			min={field.min}
+			max={field.max}
+			step={field.step}
+			onchange={commit}
+		/>
+		{#if field.unit}
+			<span class="opacity-60">{field.unit}</span>
+		{/if}
+	</span>
+</label>
diff --git a/src/features/surface-host/ui/SurfaceView.svelte b/src/features/surface-host/ui/SurfaceView.svelte
index 5210e8c..24be8b8 100644
--- a/src/features/surface-host/ui/SurfaceView.svelte
+++ b/src/features/surface-host/ui/SurfaceView.svelte
@@ -2,6 +2,7 @@
 	import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract";
 	import { groupRenderFields, planSurface } from "../logic/plan";
 	import Button from "./Button.svelte";
+	import Number from "./Number.svelte";
 	import Progress from "./Progress.svelte";
 	import Selector from "./Selector.svelte";
 	import StatTable from "./StatTable.svelte";
@@ -30,6 +31,8 @@
 			<Progress field={group.field} />
 		{:else if group.field.kind === "selector"}
 			<Selector field={group.field} surfaceId={spec.id} {onInvoke} />
+		{:else if group.field.kind === "number"}
+			<Number field={group.field} surfaceId={spec.id} {onInvoke} />
 		{:else if group.field.kind === "button"}
 			<Button field={group.field} surfaceId={spec.id} {onInvoke} />
 		{:else if group.field.kind === "custom"}