style(services): apply formatter to App and ServicesPage

frontend/src/App.tsx

@@ -454,7 +454,10 @@ function AppInner() {
 								<Route path="/observability" element={<ObservabilityPage />} />
 								<Route path="/settings" element={<Settings />} />
 								<Route path="/services" element={<ServicesPage />} />
-								<Route path="/services/:serviceType/:serviceId" element={<ServicePage />} />
+								<Route
+									path="/services/:serviceType/:serviceId"
+									element={<ServicePage />}
+								/>
 							</Route>
 						</Routes>
 					</BrowserRouter>
@@ -487,7 +490,10 @@ function AppInner() {
 							<Route path="/observability" element={<ObservabilityPage />} />
 							<Route path="/settings" element={<Settings />} />
 							<Route path="/services" element={<ServicesPage />} />
-							<Route path="/services/:serviceType/:serviceId" element={<ServicePage />} />
+							<Route
+								path="/services/:serviceType/:serviceId"
+								element={<ServicePage />}
+							/>
 						</Route>
 					</Routes>
 				</BrowserRouter>

frontend/src/pages/ServicesPage.tsx

@@ -57,7 +57,9 @@ function Field({
 		<div className="flex flex-col gap-1.5">
 			<Label htmlFor={htmlFor}>{label}</Label>
 			{children}
-			{helper ? <p className="text-xs text-muted-foreground">{helper}</p> : null}
+			{helper ? (
+				<p className="text-xs text-muted-foreground">{helper}</p>
+			) : null}
 		</div>
 	);
 }
@@ -71,13 +73,23 @@ function ServiceConfigFields({
 	config: Record<string, unknown>;
 	onChange: (config: Record<string, unknown>) => void;
 }) {
-	const properties = (type.config_schema as { properties?: Record<string, { type?: string; description?: string }> }).properties ?? {};
+	const properties =
+		(
+			type.config_schema as {
+				properties?: Record<string, { type?: string; description?: string }>;
+			}
+		).properties ?? {};
 	return (
 		<div className="flex flex-col gap-3">
 			{Object.entries(properties).map(([key, schema]) => {
 				const isNumber = schema.type === "integer" || schema.type === "number";
 				return (
-					<Field key={key} label={key} htmlFor={`cfg-${key}`} helper={schema.description}>
+					<Field
+						key={key}
+						label={key}
+						htmlFor={`cfg-${key}`}
+						helper={schema.description}
+					>
 						<Input
 							id={`cfg-${key}`}
 							type={isNumber ? "number" : "text"}
@@ -123,7 +135,9 @@ function ServiceSecretFields({
 						id={`secret-${field.key}`}
 						type="password"
 						value={secrets[field.key] ?? ""}
-						onChange={(e) => onChange({ ...secrets, [field.key]: e.target.value })}
+						onChange={(e) =>
+							onChange({ ...secrets, [field.key]: e.target.value })
+						}
 					/>
 				</Field>
 			))}
@@ -193,7 +207,9 @@ function CreateServiceDialog({
 						</div>
 					) : (
 						<>
-							<p className="text-sm text-muted-foreground">{selectedType?.description}</p>
+							<p className="text-sm text-muted-foreground">
+								{selectedType?.description}
+							</p>
 							<Field label="Name" htmlFor="service-name">
 								<Input
 									id="service-name"
@@ -219,7 +235,9 @@ function CreateServiceDialog({
 								<Switch
 									id="service-enabled"
 									checked={draft.enabled}
-									onCheckedChange={(checked) => setDraft({ ...draft, enabled: checked })}
+									onCheckedChange={(checked) =>
+										setDraft({ ...draft, enabled: checked })
+									}
 								/>
 								<Label htmlFor="service-enabled">Enabled</Label>
 							</div>
@@ -258,7 +276,9 @@ export function ServicesPage() {
 	}, [services]);
 
 	const typeName = (t: string) =>
-		types.find((x) => x.service_type === t)?.name ?? getServiceBinding(t)?.name ?? t;
+		types.find((x) => x.service_type === t)?.name ??
+		getServiceBinding(t)?.name ??
+		t;
 
 	return (
 		<div className="flex flex-col gap-4">
@@ -275,14 +295,17 @@ export function ServicesPage() {
 				{services.length === 0 ? (
 					<Alert>
 						<AlertDescription>
-							No services yet. Add a Grafana, Prometheus, Jellyfin, Nextcloud, or SSH task runner.
+							No services yet. Add a Grafana, Prometheus, Jellyfin, Nextcloud,
+							or SSH task runner.
 						</AlertDescription>
 					</Alert>
 				) : (
 					<div className="flex flex-col gap-4">
 						{grouped.map(([serviceType, instances]) => (
 							<div key={serviceType} className="flex flex-col gap-2">
-								<div className="text-sm font-medium">{typeName(serviceType)}</div>
+								<div className="text-sm font-medium">
+									{typeName(serviceType)}
+								</div>
 								<div className="flex flex-col gap-2">
 									{instances.map((s) => (
 										<div
@@ -293,7 +316,9 @@ export function ServicesPage() {
 												<div className="flex items-center gap-2">
 													<span className="font-medium">{s.name}</span>
 													<Badge variant="outline">{s.service_type}</Badge>
-													{!s.enabled ? <Badge variant="secondary">disabled</Badge> : null}
+													{!s.enabled ? (
+														<Badge variant="secondary">disabled</Badge>
+													) : null}
 													{Object.entries(s.secrets_set).some(([, v]) => v) ? (
 														<Badge variant="outline">secrets set</Badge>
 													) : null}
@@ -303,7 +328,9 @@ export function ServicesPage() {
 												<Button
 													variant="ghost"
 													size="sm"
-													onClick={() => navigate(`/services/${s.service_type}/${s.id}`)}
+													onClick={() =>
+														navigate(`/services/${s.service_type}/${s.id}`)
+													}
 												>
 													Open <ExternalLink className="ml-1 h-3 w-3" />
 												</Button>
@@ -325,7 +352,10 @@ export function ServicesPage() {
 				)}
 			</SectionCard>
 
-			<CreateServiceDialog open={createOpen} onClose={() => setCreateOpen(false)} />
+			<CreateServiceDialog
+				open={createOpen}
+				onClose={() => setCreateOpen(false)}
+			/>
 			<ConfirmDialog
 				open={Boolean(deleteId)}
 				title="Delete service?"