Make service connection config editable on service page

The service detail page showed non-secret connection config (base_url,
user_id, username, timeout_seconds) as read-only. Render schema-driven
editable inputs (reusing the create-dialog pattern) with a draftConfig
state hydrated from the instance, and unify the save button to persist
both config and secrets. Number fields render as type=number; the base_url
schema description surfaces as helper text.

frontend/src/pages/ServicePage.tsx

@@ -10,8 +10,13 @@ import {
 	useDeleteServiceInstance,
 	useSaveServiceInstance,
 	useServiceInstances,
+	useServiceTypes,
 } from "../hooks/useServices";
-import type { ServiceInstance, ServiceInstanceInput } from "../types";
+import type {
+	ServiceInstance,
+	ServiceInstanceInput,
+	ServiceTypeInfo,
+} from "../types";
 import { SectionCard } from "../components/SectionCard";
 import { ConfirmDialog } from "../components/ConfirmDialog";
 import { getServiceBinding } from "../integrations/registry";
@@ -44,6 +49,7 @@ export function ServicePage() {
 		serviceId: string;
 	}>();
 	const { data: services = [] } = useServiceInstances(serviceType || undefined);
+	const { data: types = [] } = useServiceTypes();
 	const saveService = useSaveServiceInstance();
 	const deleteService = useDeleteServiceInstance();
 
@@ -52,9 +58,14 @@ export function ServicePage() {
 		[services, serviceId],
 	);
 	const binding = getServiceBinding(serviceType);
+	const typeInfo = useMemo(
+		() => types.find((t) => t.service_type === serviceType),
+		[types, serviceType],
+	);
 
 	const [name, setName] = useState("");
 	const [enabled, setEnabled] = useState(true);
+	const [draftConfig, setDraftConfig] = useState<Record<string, unknown>>({});
 	const [deleteOpen, setDeleteOpen] = useState(false);
 	const [hydrated, setHydrated] = useState(false);
 
@@ -62,6 +73,7 @@ export function ServicePage() {
 	if (instance && !hydrated) {
 		setName(instance.name);
 		setEnabled(instance.enabled);
+		setDraftConfig({ ...instance.config });
 		setHydrated(true);
 	}
 
@@ -86,7 +98,7 @@ export function ServicePage() {
 			id: instance!.id,
 			service_type: instance!.service_type,
 			name,
-			config: instance!.config,
+			config: draftConfig,
 			secrets: {}, // secrets are managed via the dedicated inputs below
 			enabled,
 		};
@@ -134,7 +146,12 @@ export function ServicePage() {
 				</div>
 			</SectionCard>
 
-			<ServiceSecretsCard instance={instance} />
+			<ServiceConnectionCard
+				instance={instance}
+				typeInfo={typeInfo}
+				draftConfig={draftConfig}
+				onConfigChange={setDraftConfig}
+			/>
 
 			{binding.widgets.length > 0 ? (
 				<SectionCard
@@ -178,28 +195,82 @@ export function ServicePage() {
 	);
 }
 
-function ServiceSecretsCard({ instance }: { instance: ServiceInstance }) {
+function ServiceConnectionCard({
+	instance,
+	typeInfo,
+	draftConfig,
+	onConfigChange,
+}: {
+	instance: ServiceInstance;
+	typeInfo: ServiceTypeInfo | undefined;
+	draftConfig: Record<string, unknown>;
+	onConfigChange: (config: Record<string, unknown>) => void;
+}) {
 	const saveService = useSaveServiceInstance();
 	// Empty-on-edit: local state starts blank; a blank field means "keep existing".
 	const [draftSecrets, setDraftSecrets] = useState<Record<string, string>>({});
 
+	const properties =
+		(
+			(typeInfo?.config_schema ?? {}) as {
+				properties?: Record<
+					string,
+					{ type?: string; description?: string; default?: unknown }
+				>;
+			}
+		).properties ?? {};
+	const configEntries: Array<
+		[string, { type?: string; description?: string }]
+	> =
+		Object.keys(properties).length > 0
+			? Object.entries(properties).map(([key, schema]) => [
+					key,
+					{ type: schema?.type, description: schema?.description },
+				])
+			: Object.entries(instance.config).map(([key, value]) => [
+					key,
+					{ type: typeof value === "number" ? "integer" : "string" },
+				]);
+
 	return (
 		<SectionCard
 			title="Connection"
-			description="Non-secret config is read-only here for now; edit secret values below."
+			description="Edit non-secret connection config and secret values."
 		>
 			<div className="flex flex-col gap-3">
-				{Object.entries(instance.config).length === 0 ? (
+				{configEntries.length === 0 ? (
 					<p className="text-sm text-muted-foreground">No connection config.</p>
 				) : (
-					<dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2">
-						{Object.entries(instance.config).map(([key, value]) => (
-							<div key={key} className="flex flex-col">
-								<dt className="text-xs text-muted-foreground">{key}</dt>
-								<dd className="truncate font-mono text-xs">{String(value)}</dd>
-							</div>
-						))}
-					</dl>
+					<div className="flex flex-col gap-3">
+						{configEntries.map(([key, schema]) => {
+							const isNumber =
+								schema.type === "integer" || schema.type === "number";
+							return (
+								<Field
+									key={key}
+									label={key}
+									htmlFor={`cfg-${key}`}
+									helper={schema.description}
+								>
+									<Input
+										id={`cfg-${key}`}
+										type={isNumber ? "number" : "text"}
+										value={String(draftConfig[key] ?? "")}
+										onChange={(e) =>
+											onConfigChange({
+												...draftConfig,
+												[key]: isNumber
+													? e.target.value === ""
+														? undefined
+														: Number(e.target.value)
+													: e.target.value,
+											})
+										}
+									/>
+								</Field>
+							);
+						})}
+					</div>
 				)}
 
 				{Object.keys(instance.secrets_set).length === 0 ? (
@@ -229,26 +300,27 @@ function ServiceSecretsCard({ instance }: { instance: ServiceInstance }) {
 								{isSet ? <Badge variant="secondary">set</Badge> : null}
 							</div>
 						))}
-						<Button
-							onClick={() => {
-								const onlyChanged = Object.fromEntries(
-									Object.entries(draftSecrets).filter(([, v]) => v !== ""),
-								);
-								saveService.mutate({
-									id: instance.id,
-									service_type: instance.service_type,
-									name: instance.name,
-									config: instance.config,
-									secrets: onlyChanged,
-									enabled: instance.enabled,
-								});
-								setDraftSecrets({});
-							}}
-						>
-							Update secrets
-						</Button>
 					</div>
 				)}
+
+				<Button
+					onClick={() => {
+						const onlyChanged = Object.fromEntries(
+							Object.entries(draftSecrets).filter(([, v]) => v !== ""),
+						);
+						saveService.mutate({
+							id: instance.id,
+							service_type: instance.service_type,
+							name: instance.name,
+							config: draftConfig,
+							secrets: onlyChanged,
+							enabled: instance.enabled,
+						});
+						setDraftSecrets({});
+					}}
+				>
+					Update connection
+				</Button>
 			</div>
 		</SectionCard>
 	);