From b6da7df7f94a6fa9b4f9a63daeb16ef741a37ee2 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Wed, 17 Jun 2026 13:47:57 +0000
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20slice=205=20=E2=80=94=20migra?=
 =?UTF-8?q?te=20Settings=20+=20Actions=20to=20shadcn/Tailwind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web UI rework. Form-heavy pair (controlled useState parity, no form lib):
- pages/Settings.tsx off @mui: monitoring-machine CRUD, SSH-key mgmt,
  SSH test/validation feedback, danger-zone reset (ConfirmDialog), tabs
- pages/Actions.tsx off @mui: saved-task editor, machine selection,
  run history, tabs
- Both reuse migrated shared components (SectionCard/SelectionRailCard/
  TabbedCard/HoverEditButton/ConfirmDialog/DialogFooter) as before
- Behavioral tests added (mocked hooks; no live SSH)

Gate: build + lint + test green (19 files / 39 tests).
---
 frontend/src/pages/Actions.tsx                |  771 ++++----
 frontend/src/pages/Settings.tsx               | 1670 ++++++++---------
 frontend/src/pages/__tests__/Actions.test.tsx |  118 ++
 .../src/pages/__tests__/Settings.test.tsx     |  122 ++
 .../changes/web-ui-rework/apply-progress.md   |  148 ++
 openspec/changes/web-ui-rework/tasks.md       |   10 +-
 6 files changed, 1490 insertions(+), 1349 deletions(-)
 create mode 100644 frontend/src/pages/__tests__/Actions.test.tsx
 create mode 100644 frontend/src/pages/__tests__/Settings.test.tsx

diff --git a/frontend/src/pages/Actions.tsx b/frontend/src/pages/Actions.tsx
index 48025c3..b44a473 100644
--- a/frontend/src/pages/Actions.tsx
+++ b/frontend/src/pages/Actions.tsx
@@ -1,26 +1,6 @@
+import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import {
-	Alert,
-	Box,
-	Button,
-	Card,
-	CardContent,
-	Chip,
-	Dialog,
-	DialogContent,
-	DialogTitle,
-	Divider,
-	FormControl,
-	InputLabel,
-	MenuItem,
-	Select,
-	Stack,
-	Tab,
-	Tabs,
-	TextField,
-	Typography,
-} from "@mui/material";
-import type { MonitoringMachine, SavedTaskInput } from "../types";
+import type { MonitoringMachine, SavedTask, SavedTaskInput } from "../types";
 import {
 	useDeleteTask,
 	useMonitoringSettings,
@@ -31,10 +11,63 @@ import {
 } from "../hooks/useSettings";
 import { DialogFooter } from "../components/DialogFooter";
 import { HoverEditButton } from "../components/HoverEditButton";
+import { SectionCard } from "../components/SectionCard";
 import { SelectionRailCard } from "../components/SelectionRailCard";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+
+// Radix Select disallows empty-string item values; the "None" option maps to
+// this sentinel and converts back to "" at the draft boundary.
+const NONE = "__none__";
 
 type ActionTab = "new" | string;
 
+/** Small labeled-field wrapper replacing the MUI `<TextField label>` shell. */
+function FormField({
+	label,
+	htmlFor,
+	helperText,
+	children,
+}: {
+	label: string;
+	htmlFor?: string;
+	helperText?: string;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex flex-col">
+			<Label htmlFor={htmlFor} className="mb-1">
+				{label}
+			</Label>
+			{children}
+			{helperText ? (
+				<p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
+			) : null}
+		</div>
+	);
+}
+
 function emptyTask(): SavedTaskInput {
 	return {
 		id: null,
@@ -59,6 +92,18 @@ function sameTask(a: SavedTaskInput, b: SavedTaskInput) {
 	);
 }
 
+function initialFromTask(task: SavedTask): SavedTaskInput {
+	return {
+		id: task.id,
+		name: task.name,
+		task_type: task.task_type,
+		content: task.content,
+		enabled: task.enabled,
+		default_machine_id: task.default_machine_id,
+		notes: task.notes,
+	};
+}
+
 function TaskEditor({
 	task,
 	machines,
@@ -72,101 +117,98 @@ function TaskEditor({
 		(machine) => machine.id === task.default_machine_id,
 	);
 	return (
-		<Stack spacing={1.5}>
-			<Stack
-				direction="row"
-				spacing={1}
-				sx={{ alignItems: "center", flexWrap: "wrap" }}
-			>
-				<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
+		<div className="flex flex-col gap-4">
+			<div className="flex flex-row flex-wrap items-center gap-2">
+				<p className="text-sm font-semibold">
 					{task.id ? "Edit action" : "New action"}
-				</Typography>
-				<Chip size="small" variant="outlined" label={task.task_type} />
-				<Chip
-					size="small"
-					variant="outlined"
-					label={task.enabled ? "enabled" : "disabled"}
-				/>
+				</p>
+				<Badge variant="outline">{task.task_type}</Badge>
+				<Badge variant="outline">{task.enabled ? "enabled" : "disabled"}</Badge>
 				{selectedMachine && (
-					<Chip
-						size="small"
-						variant="outlined"
-						label={`default: ${selectedMachine.name}`}
-					/>
+					<Badge variant="outline">{`default: ${selectedMachine.name}`}</Badge>
 				)}
-			</Stack>
+			</div>
 
-			<Stack spacing={1.25}>
-				<TextField
-					fullWidth
-					size="small"
-					label="Name"
-					value={task.name}
-					onChange={(e) => onChange({ ...task, name: e.target.value })}
-				/>
-				<Stack direction="row" spacing={1.25} sx={{ flexWrap: "wrap" }}>
-					<FormControl size="small" sx={{ minWidth: 180, flex: "1 1 180px" }}>
-						<InputLabel>Type</InputLabel>
-						<Select
-							label="Type"
-							value={task.task_type}
-							onChange={(e) =>
-								onChange({
-									...task,
-									task_type: e.target.value as SavedTaskInput["task_type"],
-								})
-							}
-						>
-							<MenuItem value="shell">Shell</MenuItem>
-							<MenuItem value="python">Python</MenuItem>
-						</Select>
-					</FormControl>
-					<FormControl size="small" sx={{ minWidth: 220, flex: "1 1 220px" }}>
-						<InputLabel>Default machine</InputLabel>
-						<Select
-							label="Default machine"
-							value={task.default_machine_id}
-							onChange={(e) =>
-								onChange({
-									...task,
-									default_machine_id: String(e.target.value),
-								})
-							}
-						>
-							<MenuItem value="">None</MenuItem>
-							{machines.map((machine) => (
-								<MenuItem key={machine.id} value={machine.id}>
-									{machine.name}
-								</MenuItem>
-							))}
-						</Select>
-					</FormControl>
-				</Stack>
-				<TextField
-					fullWidth
-					size="small"
-					label="Notes"
-					value={task.notes}
-					onChange={(e) => onChange({ ...task, notes: e.target.value })}
-				/>
-				<TextField
-					fullWidth
-					multiline
-					minRows={9}
-					size="small"
+			<div className="flex flex-col gap-2">
+				<FormField label="Name" htmlFor="task-name">
+					<Input
+						id="task-name"
+						value={task.name}
+						onChange={(e) => onChange({ ...task, name: e.target.value })}
+					/>
+				</FormField>
+				<div className="flex flex-row flex-wrap gap-2">
+					<div className="min-w-[180px] flex-1">
+						<FormField label="Type">
+							<Select
+								value={task.task_type}
+								onValueChange={(value) =>
+									onChange({
+										...task,
+										task_type: value as SavedTaskInput["task_type"],
+									})
+								}
+							>
+								<SelectTrigger className="w-full" size="sm">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="shell">Shell</SelectItem>
+									<SelectItem value="python">Python</SelectItem>
+								</SelectContent>
+							</Select>
+						</FormField>
+					</div>
+					<div className="min-w-[220px] flex-1">
+						<FormField label="Default machine">
+							<Select
+								value={task.default_machine_id || NONE}
+								onValueChange={(value) =>
+									onChange({
+										...task,
+										default_machine_id: value === NONE ? "" : value,
+									})
+								}
+							>
+								<SelectTrigger className="w-full" size="sm">
+									<SelectValue placeholder="None" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={NONE}>None</SelectItem>
+									{machines.map((machine) => (
+										<SelectItem key={machine.id} value={machine.id}>
+											{machine.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</FormField>
+					</div>
+				</div>
+				<FormField label="Notes">
+					<Input
+						value={task.notes}
+						onChange={(e) => onChange({ ...task, notes: e.target.value })}
+					/>
+				</FormField>
+				<FormField
 					label={
 						task.task_type === "python" ? "Python script" : "Shell command"
 					}
-					value={task.content}
-					onChange={(e) => onChange({ ...task, content: e.target.value })}
 					helperText={
 						task.task_type === "python"
 							? "Python is run as `python3 -c`."
 							: "Shell commands are run through `/bin/sh -c`."
 					}
-				/>
-			</Stack>
-		</Stack>
+				>
+					<Textarea
+						rows={9}
+						value={task.content}
+						onChange={(e) => onChange({ ...task, content: e.target.value })}
+					/>
+				</FormField>
+			</div>
+		</div>
 	);
 }
 
@@ -200,25 +242,36 @@ function TaskDialog({
 	};
 
 	return (
-		<Dialog open={open} onClose={requestClose} fullWidth maxWidth="md">
-			<DialogTitle>{task.id ? "Edit action" : "New action"}</DialogTitle>
-			<DialogContent dividers>
+		<Dialog
+			open={open}
+			onOpenChange={(next) => {
+				if (!next) requestClose();
+			}}
+		>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>{task.id ? "Edit action" : "New action"}</DialogTitle>
+					<DialogDescription>
+						Save a reusable server task. Shell commands run via{" "}
+						<code>/bin/sh -c</code>; Python runs via <code>python3 -c</code>.
+					</DialogDescription>
+				</DialogHeader>
 				<TaskEditor task={task} machines={machines} onChange={onChange} />
+				<DialogFooter
+					onCancel={requestClose}
+					cancelLabel="Cancel"
+					onConfirm={onSave}
+					confirmLabel="Save action"
+					confirmBusyLabel="Save action"
+					secondaryAction={
+						onDelete ? (
+							<Button variant="destructive" onClick={onDelete}>
+								Delete
+							</Button>
+						) : undefined
+					}
+				/>
 			</DialogContent>
-			<DialogFooter
-				onCancel={requestClose}
-				cancelLabel="Cancel"
-				onConfirm={onSave}
-				confirmLabel="Save action"
-				confirmBusyLabel="Save action"
-				secondaryAction={
-					onDelete ? (
-						<Button variant="outlined" color="error" onClick={onDelete}>
-							Delete
-						</Button>
-					) : undefined
-				}
-			/>
 		</Dialog>
 	);
 }
@@ -243,6 +296,12 @@ export function Actions() {
 	);
 	const selectedRuns = useTaskRuns(selectedTask?.id);
 
+	const openEdit = (initial: SavedTaskInput) => {
+		setDraft(initial);
+		setDraftBaseline(initial);
+		setEditOpen(true);
+	};
+
 	const createNew = () => {
 		const initial = emptyTask();
 		setDraft(initial);
@@ -271,51 +330,43 @@ export function Actions() {
 	const editingTask = selectedTask;
 
 	return (
-		<Stack spacing={2.25}>
-			<Stack
-				direction="row"
-				spacing={1}
-				sx={{
-					alignItems: "center",
-					justifyContent: "space-between",
-					flexWrap: "wrap",
-				}}
-			>
-				<Box>
-					<Typography variant="h5" sx={{ fontWeight: 800 }}>
-						Actions
-					</Typography>
-					<Typography variant="body2" color="text.secondary">
+		<div className="flex flex-col gap-6">
+			<div className="flex flex-row flex-wrap items-center justify-between gap-2">
+				<div>
+					<h1 className="text-lg font-semibold">Actions</h1>
+					<p className="text-xs text-muted-foreground">
 						Save reusable server tasks and switch between them with tabs.
-					</Typography>
-				</Box>
-				<Chip label={`${tasks.length} saved`} variant="outlined" />
-			</Stack>
+					</p>
+				</div>
+				<Badge variant="outline">{`${tasks.length} saved`}</Badge>
+			</div>
 
 			{saveTask.error && (
-				<Alert severity="error">{String(saveTask.error)}</Alert>
+				<Alert variant="destructive">
+					<AlertDescription>{String(saveTask.error)}</AlertDescription>
+				</Alert>
 			)}
 			{deleteTask.error && (
-				<Alert severity="error">{String(deleteTask.error)}</Alert>
+				<Alert variant="destructive">
+					<AlertDescription>{String(deleteTask.error)}</AlertDescription>
+				</Alert>
+			)}
+			{runTask.error && (
+				<Alert variant="destructive">
+					<AlertDescription>{String(runTask.error)}</AlertDescription>
+				</Alert>
 			)}
-			{runTask.error && <Alert severity="error">{String(runTask.error)}</Alert>}
 
-			<Box
-				sx={{
-					display: "grid",
-					gridTemplateColumns: { xs: "1fr", md: "280px minmax(0, 1fr)" },
-					gap: 2,
-				}}
-			>
+			<div className="grid grid-cols-1 gap-4 md:grid-cols-[280px_minmax(0,1fr)]">
 				<SelectionRailCard
 					title="Saved actions"
 					description="Pick a saved task, then edit or run it from the detail pane."
-					contentSx={{ maxHeight: { xs: 520, md: 620 } }}
+					contentSx={{}}
 					footer={
 						<Button
-							variant="outlined"
-							size="small"
-							fullWidth
+							variant="outline"
+							size="sm"
+							className="w-full"
 							onClick={createNew}
 						>
 							Add action
@@ -324,301 +375,155 @@ export function Actions() {
 				>
 					<Tabs
 						value={tab}
-						onChange={(_, value) => setTab(value)}
+						onValueChange={(value) => setTab(value)}
 						orientation="vertical"
-						variant="scrollable"
-						sx={{ borderRight: 1, borderColor: "divider" }}
+						className="w-full"
 					>
-						{tasks.map((task) => (
-							<Box
-								key={task.id}
-								sx={{
-									position: "relative",
-									width: "100%",
-									"&:hover .rail-edit": { opacity: 1 },
-								}}
-							>
-								<Tab
-									value={task.id}
-									label={task.name}
-									sx={{
-										alignItems: "flex-start",
-										justifyContent: "flex-start",
-										width: 1,
-										pr: 5,
-									}}
-									onClick={() => setTab(task.id)}
-									onDoubleClick={() => {
-										const initial = {
-											id: task.id,
-											name: task.name,
-											task_type: task.task_type,
-											content: task.content,
-											enabled: task.enabled,
-											default_machine_id: task.default_machine_id,
-											notes: task.notes,
-										};
-										setDraft(initial);
-										setDraftBaseline(initial);
-										setEditOpen(true);
-									}}
-								/>
-								<Box
-									sx={{
-										position: "absolute",
-										right: 4,
-										top: "50%",
-										transform: "translateY(-50%)",
-									}}
+						<TabsList variant="line" className="h-fit w-full justify-start">
+							{tasks.map((task) => (
+								<div
+									key={task.id}
+									className="group relative w-full group-hover:[&_.rail-edit]:opacity-100"
 								>
-									<HoverEditButton
-										onClick={() => {
-											const initial = {
-												id: task.id,
-												name: task.name,
-												task_type: task.task_type,
-												content: task.content,
-												enabled: task.enabled,
-												default_machine_id: task.default_machine_id,
-												notes: task.notes,
-											};
-											setDraft(initial);
-											setDraftBaseline(initial);
-											setEditOpen(true);
-										}}
-									/>
-								</Box>
-							</Box>
-						))}
+									<TabsTrigger
+										value={task.id}
+										className="w-full justify-start pr-9"
+										onClick={() => setTab(task.id)}
+										onDoubleClick={() => openEdit(initialFromTask(task))}
+									>
+										{task.name}
+									</TabsTrigger>
+									<div className="absolute top-1/2 right-1 -translate-y-1/2">
+										<HoverEditButton
+											onClick={() => openEdit(initialFromTask(task))}
+										/>
+									</div>
+								</div>
+							))}
+						</TabsList>
 					</Tabs>
 				</SelectionRailCard>
 
-				<Stack spacing={2}>
+				<div className="flex flex-col gap-4">
 					{editingTask ? (
-						<Card variant="outlined">
-							<CardContent sx={{ p: 1.5 }}>
-								<Stack spacing={1.5}>
-									<Stack
-										direction="row"
-										spacing={1}
-										sx={{
-											alignItems: "center",
-											justifyContent: "space-between",
-											flexWrap: "wrap",
+						<SectionCard
+							title={editingTask.name}
+							description="Open the editor popup to modify this action."
+							action={
+								<div className="flex flex-row flex-wrap items-center gap-2">
+									<Button
+										variant="outline"
+										onClick={() => openEdit(initialFromTask(editingTask))}
+									>
+										Edit
+									</Button>
+									<Button
+										disabled={runTask.isPending || !runMachineId}
+										onClick={async () => {
+											await runTask.mutateAsync({
+												taskId: editingTask.id,
+												machineId: runMachineId,
+											});
 										}}
 									>
-										<Box>
-											<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-												{editingTask.name}
-											</Typography>
-											<Typography variant="body2" color="text.secondary">
-												Open the editor popup to modify this action.
-											</Typography>
-										</Box>
-										<Stack
-											direction="row"
-											spacing={1}
-											sx={{ flexWrap: "wrap" }}
-										>
-											<Button
-												variant="outlined"
-												onClick={() => {
-													const initial = {
-														id: editingTask.id,
-														name: editingTask.name,
-														task_type: editingTask.task_type,
-														content: editingTask.content,
-														enabled: editingTask.enabled,
-														default_machine_id: editingTask.default_machine_id,
-														notes: editingTask.notes,
-													};
-													setDraft(initial);
-													setDraftBaseline(initial);
-													setEditOpen(true);
-												}}
-											>
-												Edit
-											</Button>
-											<Button
-												variant="contained"
-												disabled={runTask.isPending || !runMachineId}
-												onClick={async () => {
-													await runTask.mutateAsync({
-														taskId: editingTask.id,
-														machineId: runMachineId,
-													});
-												}}
-											>
-												{runTask.isPending ? "Running..." : "Run action"}
-											</Button>
-										</Stack>
-									</Stack>
-
-									<Stack
-										direction="row"
-										spacing={1}
-										sx={{ alignItems: "center", flexWrap: "wrap" }}
+										{runTask.isPending ? "Running..." : "Run action"}
+									</Button>
+								</div>
+							}
+						>
+							<div className="flex flex-wrap items-center gap-2">
+								<FormField label="Run on machine">
+									<Select
+										value={runMachineId}
+										onValueChange={(value) => setRunMachineId(value)}
 									>
-										<FormControl size="small" sx={{ minWidth: 240 }}>
-											<InputLabel>Run on machine</InputLabel>
-											<Select
-												label="Run on machine"
-												value={runMachineId}
-												onChange={(e) =>
-													setRunMachineId(String(e.target.value))
-												}
-											>
-												{machines.map((machine) => (
-													<MenuItem key={machine.id} value={machine.id}>
-														{machine.name}
-													</MenuItem>
-												))}
-											</Select>
-										</FormControl>
-									</Stack>
-
-									<Divider />
-									<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-										Recent runs
-									</Typography>
-									{selectedRuns.data?.items?.length ? (
-										<Stack spacing={1.25}>
-											{selectedRuns.data.items.map((run) => (
-												<Card key={run.id} variant="outlined">
-													<CardContent sx={{ p: 1.5 }}>
-														<Stack spacing={1}>
-															<Stack
-																direction="row"
-																spacing={1}
-																sx={{ alignItems: "center", flexWrap: "wrap" }}
-															>
-																<Chip
-																	size="small"
-																	variant="outlined"
-																	label={run.status}
-																/>
-																<Typography
-																	variant="body2"
-																	color="text.secondary"
-																>
-																	{run.machine_name} ·{" "}
-																	{new Date(
-																		run.created_at * 1000,
-																	).toLocaleString()}
-																</Typography>
-															</Stack>
-															{run.stdout_tail && (
-																<Box
-																	sx={{
-																		px: 1,
-																		py: 0.75,
-																		border: 1,
-																		borderColor: "divider",
-																		borderRadius: 1,
-																	}}
-																>
-																	<Typography
-																		variant="caption"
-																		color="text.secondary"
-																	>
-																		stdout
-																	</Typography>
-																	<Typography
-																		variant="body2"
-																		sx={{
-																			fontFamily: "monospace",
-																			whiteSpace: "pre-wrap",
-																			wordBreak: "break-word",
-																		}}
-																	>
-																		{run.stdout_tail}
-																	</Typography>
-																</Box>
-															)}
-															{run.stderr_tail && (
-																<Box
-																	sx={{
-																		px: 1,
-																		py: 0.75,
-																		border: 1,
-																		borderColor: "divider",
-																		borderRadius: 1,
-																	}}
-																>
-																	<Typography
-																		variant="caption"
-																		color="text.secondary"
-																	>
-																		stderr
-																	</Typography>
-																	<Typography
-																		variant="body2"
-																		sx={{
-																			fontFamily: "monospace",
-																			whiteSpace: "pre-wrap",
-																			wordBreak: "break-word",
-																		}}
-																	>
-																		{run.stderr_tail}
-																	</Typography>
-																</Box>
-															)}
-															{run.error && (
-																<Alert severity="error">{run.error}</Alert>
-															)}
-														</Stack>
-													</CardContent>
-												</Card>
+										<SelectTrigger className="min-w-[240px]" size="sm">
+											<SelectValue placeholder="Select machine" />
+										</SelectTrigger>
+										<SelectContent>
+											{machines.map((machine) => (
+												<SelectItem key={machine.id} value={machine.id}>
+													{machine.name}
+												</SelectItem>
 											))}
-										</Stack>
-									) : (
-										<Alert severity="info">No runs yet.</Alert>
-									)}
-								</Stack>
-							</CardContent>
-						</Card>
+										</SelectContent>
+									</Select>
+								</FormField>
+							</div>
+
+							<Separator />
+
+							<p className="text-sm font-semibold">Recent runs</p>
+							{selectedRuns.data?.items?.length ? (
+								<div className="flex flex-col gap-2">
+									{selectedRuns.data.items.map((run) => (
+										<Card key={run.id}>
+											<CardContent className="flex flex-col gap-2 p-3">
+												<div className="flex flex-row flex-wrap items-center gap-2">
+													<Badge variant="outline">{run.status}</Badge>
+													<p className="text-xs text-muted-foreground">
+														{run.machine_name} ·{" "}
+														{new Date(run.created_at * 1000).toLocaleString()}
+													</p>
+												</div>
+												{run.stdout_tail && (
+													<div className="rounded-lg border border-border px-3 py-2">
+														<p className="text-xs text-muted-foreground">
+															stdout
+														</p>
+														<p className="whitespace-pre-wrap break-words font-mono text-sm">
+															{run.stdout_tail}
+														</p>
+													</div>
+												)}
+												{run.stderr_tail && (
+													<div className="rounded-lg border border-border px-3 py-2">
+														<p className="text-xs text-muted-foreground">
+															stderr
+														</p>
+														<p className="whitespace-pre-wrap break-words font-mono text-sm">
+															{run.stderr_tail}
+														</p>
+													</div>
+												)}
+												{run.error && (
+													<Alert variant="destructive">
+														<AlertDescription>{run.error}</AlertDescription>
+													</Alert>
+												)}
+											</CardContent>
+										</Card>
+									))}
+								</div>
+							) : (
+								<Alert>
+									<AlertDescription>No runs yet.</AlertDescription>
+								</Alert>
+							)}
+						</SectionCard>
 					) : (
-						<Stack spacing={2}>
-							<Card variant="outlined">
-								<CardContent sx={{ p: 2 }}>
-									<Stack spacing={1.25}>
-										<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-											No action selected
-										</Typography>
-								<Typography variant="body2" color="text.secondary">
-									Select a saved action from the list on the left to view
-									its details, run it, or open the editor popup. Use the
-									button at the bottom to add a new action.
-								</Typography>
+						<div className="flex flex-col gap-4">
+							<SectionCard
+								title="No action selected"
+								description="Select a saved action from the list on the left to view its details, run it, or open the editor popup. Use the button at the bottom to add a new action."
+							>
 								{tasks[0] && (
-									<Button
-										variant="outlined"
-										onClick={() => setTab(tasks[0].id)}
-									>
+									<Button variant="outline" onClick={() => setTab(tasks[0].id)}>
 										Select first action
 									</Button>
 								)}
-									</Stack>
-								</CardContent>
-							</Card>
+							</SectionCard>
 
-							<Card variant="outlined">
-								<CardContent sx={{ p: 2 }}>
-									<Stack spacing={1}>
-										<Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
-											What this panel shows
-										</Typography>
-										<Typography variant="body2" color="text.secondary">
-											Saved actions stay on the left rail, while details, run
-											controls, and recent history appear here.
-										</Typography>
-									</Stack>
-								</CardContent>
-							</Card>
-						</Stack>
+							<SectionCard title="What this panel shows">
+								<p className="text-xs text-muted-foreground">
+									Saved actions stay on the left rail, while details, run
+									controls, and recent history appear here.
+								</p>
+							</SectionCard>
+						</div>
 					)}
-				</Stack>
-			</Box>
+				</div>
+			</div>
 
 			<TaskDialog
 				open={editOpen}
@@ -632,6 +537,6 @@ export function Actions() {
 					draft.id ? () => deleteTask.mutate(String(draft.id)) : undefined
 				}
 			/>
-		</Stack>
+		</div>
 	);
 }
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 9bb130c..ef61022 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1,25 +1,11 @@
+import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
-import {
-	Alert,
-	Box,
-	Button,
-	Card,
-	CardContent,
-	Checkbox,
-	Chip,
-	Dialog,
-	DialogContent,
-	DialogTitle,
-	FormControlLabel,
-	Grid,
-	Stack,
-	MenuItem,
-	Switch,
-	Tab,
-	TextField,
-	Typography,
-} from "@mui/material";
-import type { MonitoringMachine, MonitoringMachineInput, SSHKey, SSHKeyInput } from "../types";
+import type {
+	MonitoringMachine,
+	MonitoringMachineInput,
+	SSHKey,
+	SSHKeyInput,
+} from "../types";
 import {
 	useDeleteMonitoringMachine,
 	useDeleteSSHKey,
@@ -37,6 +23,32 @@ import { SectionCard } from "../components/SectionCard";
 import { SelectionRailCard } from "../components/SelectionRailCard";
 import { TabbedCard } from "../components/TabbedCard";
 import { ConfirmDialog } from "../components/ConfirmDialog";
+import { cn } from "@/lib/utils";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+
 const SERVICE_OPTIONS = [
 	{ value: "monitoring", label: "Monitoring" },
 	{ value: "files", label: "Files" },
@@ -44,7 +56,56 @@ const SERVICE_OPTIONS = [
 	{ value: "jellyseerr", label: "Jellyseerr" },
 	{ value: "nextcloud", label: "Nextcloud" },
 ];
+
+// Radix Select disallows empty-string item values, so the "no selection" option
+// maps to this sentinel and converts back to "" at the draft boundary.
+const NONE = "__none__";
+
 type SettingsTab = "machines" | "ssh-keys" | "danger";
+
+/** Small labeled-field wrapper replacing the MUI `<TextField label>` shell. */
+function FormField({
+	label,
+	htmlFor,
+	helperText,
+	children,
+}: {
+	label: string;
+	htmlFor?: string;
+	helperText?: string;
+	children: ReactNode;
+}) {
+	return (
+		<div className="flex flex-col">
+			<Label htmlFor={htmlFor} className="mb-1">
+				{label}
+			</Label>
+			{children}
+			{helperText ? (
+				<p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
+			) : null}
+		</div>
+	);
+}
+
+/** Overline section label (replaces MUI `Typography variant="overline"`). */
+function SectionLabel({
+	title,
+	description,
+}: {
+	title: string;
+	description: string;
+}) {
+	return (
+		<div className="pt-1">
+			<p className="text-[0.7rem] leading-tight font-medium tracking-wide text-muted-foreground uppercase">
+				{title}
+			</p>
+			<p className="text-xs text-muted-foreground">{description}</p>
+		</div>
+	);
+}
+
 function emptyMachine(
 	mode: MonitoringMachineInput["mode"] = "local",
 ): MonitoringMachineInput {
@@ -73,6 +134,7 @@ function emptyMachine(
 		notes: "",
 	};
 }
+
 function MachineEditor({
 	title,
 	hint,
@@ -112,169 +174,125 @@ function MachineEditor({
 	const placeholderIfSet = (isSet: boolean | undefined) =>
 		isSet ? "Set, not shown" : undefined;
 	return (
-		<Card variant="outlined">
-			<CardContent sx={{ p: 1.5 }}>
-				<Stack spacing={1.5}>
-					<Stack
-						direction="row"
-						spacing={1}
-						sx={{
-							alignItems: "center",
-							justifyContent: "space-between",
-							flexWrap: "wrap",
-						}}
-					>
-						<Box>
-							<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-								{title}
-							</Typography>
-							{hint && (
-								<Typography variant="body2" color="text.secondary">
-									{hint}
-								</Typography>
-							)}
-						</Box>
-						<Stack
-							direction="row"
-							spacing={1}
-							sx={{ alignItems: "center", flexWrap: "wrap" }}
-						>
-							<Chip size="small" variant="outlined" label={draft.mode} />
-							<Chip
-								size="small"
-								variant="outlined"
-								label={draft.enabled ? "enabled" : "disabled"}
-							/>
-							<Chip
-								size="small"
-								variant="outlined"
-								label={`${enabledServices} services`}
-							/>
-						</Stack>
-					</Stack>
-					<Grid container spacing={1.25}>
-						<Grid size={{ xs: 12 }}>
-							<Box sx={{ pt: 0.25 }}>
-								<Typography
-									variant="overline"
-									sx={{
-										display: "block",
-										lineHeight: 1.1,
-										color: "text.secondary",
-									}}
-								>
-									General
-								</Typography>
-								<Typography variant="body2" color="text.secondary">
-									Name, mode, enabled state, and service roles.
-								</Typography>
-							</Box>
-						</Grid>
-						<Grid size={{ xs: 12, md: 6 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Name"
+		<Card>
+			<CardContent className="flex flex-col gap-4 p-3">
+				<div className="flex flex-wrap items-center justify-between gap-2">
+					<div>
+						<p className="text-sm font-semibold">{title}</p>
+						{hint ? (
+							<p className="text-xs text-muted-foreground">{hint}</p>
+						) : null}
+					</div>
+					<div className="flex flex-row flex-wrap items-center gap-1">
+						<Badge variant="outline">{draft.mode}</Badge>
+						<Badge variant="outline">
+							{draft.enabled ? "enabled" : "disabled"}
+						</Badge>
+						<Badge variant="outline">{`${enabledServices} services`}</Badge>
+					</div>
+				</div>
+				<div className="grid grid-cols-12 gap-2">
+					<div className="col-span-12">
+						<SectionLabel
+							title="General"
+							description="Name, mode, enabled state, and service roles."
+						/>
+					</div>
+					<div className="col-span-12 md:col-span-6">
+						<FormField label="Name" htmlFor="machine-name">
+							<Input
+								id="machine-name"
 								value={draft.name}
 								onChange={(e) =>
 									setDraft((current) => ({ ...current, name: e.target.value }))
 								}
 							/>
-						</Grid>
-						<Grid size={{ xs: 12, md: 3 }}>
-							{editingMachine ? (
-								<TextField
-									fullWidth
-									size="small"
-									label="Mode"
+						</FormField>
+					</div>
+					<div className="col-span-12 md:col-span-3">
+						{editingMachine ? (
+							<FormField label="Mode">
+								<Input value={draft.mode} disabled />
+							</FormField>
+						) : (
+							<FormField label="Mode">
+								<Select
 									value={draft.mode}
-									disabled
-								/>
-							) : (
-								<TextField
-									select
-									fullWidth
-									size="small"
-									label="Mode"
-									value={draft.mode}
-									onChange={(e) => {
-										const newMode = e.target.value as MonitoringMachineInput["mode"];
+									onValueChange={(value) => {
+										const newMode = value as MonitoringMachineInput["mode"];
 										setDraft((current) => ({
 											...emptyMachine(newMode),
 											id: current.id,
 										}));
 									}}
 								>
-									<MenuItem value="local">Local</MenuItem>
-									<MenuItem value="ssh">SSH</MenuItem>
-								</TextField>
-							)}
-						</Grid>
-						<Grid size={{ xs: 12, md: 3 }}>
-							<FormControlLabel
-								control={
-									<Switch
-										checked={draft.enabled}
-										onChange={(e) =>
+									<SelectTrigger className="w-full" size="sm">
+										<SelectValue />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectItem value="local">Local</SelectItem>
+										<SelectItem value="ssh">SSH</SelectItem>
+									</SelectContent>
+								</Select>
+							</FormField>
+						)}
+					</div>
+					<div className="col-span-12 md:col-span-3">
+						<div className="flex items-center gap-2">
+							<Switch
+								id="machine-enabled"
+								checked={draft.enabled}
+								onCheckedChange={(checked) =>
+									setDraft((current) => ({ ...current, enabled: checked }))
+								}
+							/>
+							<Label htmlFor="machine-enabled">
+								{draft.enabled ? "Enabled" : "Disabled"}
+							</Label>
+						</div>
+					</div>
+					<div className="col-span-12">
+						<div className="flex flex-row flex-wrap items-center gap-1">
+							{SERVICE_OPTIONS.map((option) => {
+								const checked = draft.services.includes(option.value);
+								return (
+									<button
+										key={option.value}
+										type="button"
+										onClick={() =>
 											setDraft((current) => ({
 												...current,
-												enabled: e.target.checked,
+												services: checked
+													? current.services.filter(
+															(service) => service !== option.value,
+														)
+													: [...current.services, option.value],
 											}))
 										}
-									/>
-								}
-								label={draft.enabled ? "Enabled" : "Disabled"}
-								sx={{ ml: 0 }}
-							/>
-						</Grid>
-						<Grid size={{ xs: 12 }}>
-							<Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
-								{SERVICE_OPTIONS.map((option) => {
-									const checked = draft.services.includes(option.value);
-									return (
-										<Chip
-											key={option.value}
-											label={option.label}
-											variant={checked ? "filled" : "outlined"}
-											onClick={() =>
-												setDraft((current) => ({
-													...current,
-													services: checked
-														? current.services.filter(
-																(service) => service !== option.value,
-															)
-														: [...current.services, option.value],
-												}))
-											}
-										/>
-									);
-								})}
-							</Stack>
-						</Grid>
-						{!isLocal && (
-							<>
-								<Grid size={{ xs: 12 }}>
-									<Box sx={{ pt: 0.5 }}>
-										<Typography
-											variant="overline"
-											sx={{
-												display: "block",
-												lineHeight: 1.1,
-												color: "text.secondary",
-											}}
-										>
-											Connection
-										</Typography>
-										<Typography variant="body2" color="text.secondary">
-											SSH host, port, username, and credentials.
-										</Typography>
-									</Box>
-								</Grid>
-								<Grid size={{ xs: 12, md: 4 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Host"
+										className={cn(
+											"inline-flex h-5 cursor-pointer items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors",
+											checked
+												? "bg-primary text-primary-foreground"
+												: "border border-border text-foreground hover:bg-muted",
+										)}
+									>
+										{option.label}
+									</button>
+								);
+							})}
+						</div>
+					</div>
+					{!isLocal && (
+						<>
+							<div className="col-span-12">
+								<SectionLabel
+									title="Connection"
+									description="SSH host, port, username, and credentials."
+								/>
+							</div>
+							<div className="col-span-12 md:col-span-4">
+								<FormField label="Host">
+									<Input
 										value={draft.host}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -283,12 +301,11 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 2 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Port"
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-2">
+								<FormField label="Port">
+									<Input
 										type="number"
 										value={draft.port}
 										onChange={(e) =>
@@ -298,12 +315,11 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 3 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Username"
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-3">
+								<FormField label="Username">
+									<Input
 										value={draft.username}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -312,39 +328,43 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 4 }}>
-									<TextField
-										select
-										fullWidth
-										size="small"
-										label="SSH key"
-										value={draft.ssh_key_id}
-										onChange={(e) =>
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-4">
+								<FormField
+									label="SSH key"
+									helperText={
+										sshKeys.length > 0
+											? "Select a saved SSH key."
+											: "No SSH keys are saved yet. Add one in the SSH Keys tab."
+									}
+								>
+									<Select
+										value={draft.ssh_key_id || NONE}
+										onValueChange={(value) =>
 											setDraft((current) => ({
 												...current,
-												ssh_key_id: e.target.value,
+												ssh_key_id: value === NONE ? "" : value,
 											}))
 										}
-										helperText={
-											sshKeys.length > 0
-												? "Select a saved SSH key."
-												: "No SSH keys are saved yet. Add one in the SSH Keys tab."
-										}
 									>
-										<MenuItem value="">No key selected</MenuItem>
-										{sshKeys.map((key) => (
-											<MenuItem key={key.id} value={key.id}>
-												{key.name}
-											</MenuItem>
-										))}
-									</TextField>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Password"
+										<SelectTrigger className="w-full" size="sm">
+											<SelectValue placeholder="No key selected" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value={NONE}>No key selected</SelectItem>
+											{sshKeys.map((key) => (
+												<SelectItem key={key.id} value={key.id}>
+													{key.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Password">
+									<Input
 										type="password"
 										placeholder={placeholderIfSet(editingMachine?.password_set)}
 										value={draft.password}
@@ -355,33 +375,19 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-							</>
-						)}
-						<Grid size={{ xs: 12 }}>
-							<Box sx={{ pt: 0.5 }}>
-								<Typography
-									variant="overline"
-									sx={{
-										display: "block",
-										lineHeight: 1.1,
-										color: "text.secondary",
-									}}
-								>
-									Monitoring / Files
-								</Typography>
-								<Typography variant="body2" color="text.secondary">
-									Media root and path mapping used by monitoring and browsing.
-									Saving a monitoring machine also starts its collector
-									automatically.
-								</Typography>
-							</Box>
-						</Grid>
-						<Grid size={{ xs: 12, md: 6 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Media root"
+								</FormField>
+							</div>
+						</>
+					)}
+					<div className="col-span-12">
+						<SectionLabel
+							title="Monitoring / Files"
+							description="Media root and path mapping used by monitoring and browsing. Saving a monitoring machine also starts its collector automatically."
+						/>
+					</div>
+					<div className="col-span-12 md:col-span-6">
+						<FormField label="Media root">
+							<Input
 								value={draft.media_root}
 								onChange={(e) =>
 									setDraft((current) => ({
@@ -390,31 +396,19 @@ function MachineEditor({
 									}))
 								}
 							/>
-						</Grid>
-						{hasJellyfin && (
-							<>
-								<Grid size={{ xs: 12 }}>
-									<Box sx={{ pt: 0.5 }}>
-										<Typography
-											variant="overline"
-											sx={{
-												display: "block",
-												lineHeight: 1.1,
-												color: "text.secondary",
-											}}
-										>
-											Jellyfin
-										</Typography>
-										<Typography variant="body2" color="text.secondary">
-											Library host and user selection for media browsing.
-										</Typography>
-									</Box>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Jellyfin URL"
+						</FormField>
+					</div>
+					{hasJellyfin && (
+						<>
+							<div className="col-span-12">
+								<SectionLabel
+									title="Jellyfin"
+									description="Library host and user selection for media browsing."
+								/>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Jellyfin URL">
+									<Input
 										value={draft.jellyfin_url}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -423,12 +417,11 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Jellyfin user ID"
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Jellyfin user ID">
+									<Input
 										value={draft.jellyfin_user_id}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -437,14 +430,15 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Jellyfin API key"
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Jellyfin API key">
+									<Input
 										type="password"
-										placeholder={placeholderIfSet(editingMachine?.jellyfin_api_key_set)}
+										placeholder={placeholderIfSet(
+											editingMachine?.jellyfin_api_key_set,
+										)}
 										value={draft.jellyfin_api_key}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -453,34 +447,21 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-							</>
-						)}
-						{hasJellyseerr && (
-							<>
-								<Grid size={{ xs: 12 }}>
-									<Box sx={{ pt: 0.5 }}>
-										<Typography
-											variant="overline"
-											sx={{
-												display: "block",
-												lineHeight: 1.1,
-												color: "text.secondary",
-											}}
-										>
-											Jellyseerr
-										</Typography>
-										<Typography variant="body2" color="text.secondary">
-											Optional request-manager enrichment for users and
-											requests.
-										</Typography>
-									</Box>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Jellyseerr URL"
+								</FormField>
+							</div>
+						</>
+					)}
+					{hasJellyseerr && (
+						<>
+							<div className="col-span-12">
+								<SectionLabel
+									title="Jellyseerr"
+									description="Optional request-manager enrichment for users and requests."
+								/>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Jellyseerr URL">
+									<Input
 										value={draft.jellyseerr_url}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -489,14 +470,15 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-								<Grid size={{ xs: 12, md: 6 }}>
-									<TextField
-										fullWidth
-										size="small"
-										label="Jellyseerr API key"
+								</FormField>
+							</div>
+							<div className="col-span-12 md:col-span-6">
+								<FormField label="Jellyseerr API key">
+									<Input
 										type="password"
-										placeholder={placeholderIfSet(editingMachine?.jellyseerr_api_key_set)}
+										placeholder={placeholderIfSet(
+											editingMachine?.jellyseerr_api_key_set,
+										)}
 										value={draft.jellyseerr_api_key}
 										onChange={(e) =>
 											setDraft((current) => ({
@@ -505,118 +487,115 @@ function MachineEditor({
 											}))
 										}
 									/>
-								</Grid>
-							</>
-						)}
-						{isLocal && (
-							<Grid size={{ xs: 12, md: 6 }}>
-								<TextField
-									fullWidth
-									size="small"
-									label="Local hint"
-									value="Uses the API host directly"
-									disabled
-								/>
-							</Grid>
-						)}
-						<Grid size={{ xs: 12 }}>
-							<Box sx={{ pt: 0.5 }}>
-								<Typography
-									variant="overline"
-									sx={{
-										display: "block",
-										lineHeight: 1.1,
-										color: "text.secondary",
-									}}
-								>
-									Notes
-								</Typography>
-								<Typography variant="body2" color="text.secondary">
-									Free-form administrator notes for this machine.
-								</Typography>
-							</Box>
-						</Grid>
-						<Grid size={{ xs: 12 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Notes"
+								</FormField>
+							</div>
+						</>
+					)}
+					{isLocal && (
+						<div className="col-span-12 md:col-span-6">
+							<FormField label="Local hint">
+								<Input value="Uses the API host directly" disabled />
+							</FormField>
+						</div>
+					)}
+					<div className="col-span-12">
+						<SectionLabel
+							title="Notes"
+							description="Free-form administrator notes for this machine."
+						/>
+					</div>
+					<div className="col-span-12">
+						<FormField label="Notes">
+							<Input
 								value={draft.notes}
 								onChange={(e) =>
 									setDraft((current) => ({ ...current, notes: e.target.value }))
 								}
 							/>
-						</Grid>{" "}
-					</Grid>
-					{selectedSSHKey ? (
-						<Alert severity="info">
+						</FormField>
+					</div>
+				</div>
+				{selectedSSHKey ? (
+					<Alert>
+						<AlertDescription>
 							Selected key: {selectedSSHKey.name}
 							{selectedSSHKey.fingerprint
 								? ` · ${selectedSSHKey.fingerprint}`
 								: ""}
-						</Alert>
-					) : !isLocal && sshKeys.length === 0 ? (
-						<Alert severity="warning">
+						</AlertDescription>
+					</Alert>
+				) : !isLocal && sshKeys.length === 0 ? (
+					<Alert>
+						<AlertDescription>
 							No SSH keys have been saved yet. Add one before configuring SSH
 							machines.
-						</Alert>
-					) : draft.ssh_key_id ? (
-						<Alert severity="warning">
+						</AlertDescription>
+					</Alert>
+				) : draft.ssh_key_id ? (
+					<Alert variant="destructive">
+						<AlertDescription>
 							The selected SSH key was not found.
-						</Alert>
-					) : null}
-					{!isLocal && !hasJellyfin && (
-						<Alert severity="warning">
+						</AlertDescription>
+					</Alert>
+				) : null}
+				{!isLocal && !hasJellyfin && (
+					<Alert>
+						<AlertDescription>
 							SSH machines usually need monitoring or files enabled.
-						</Alert>
-					)}
-					{!isLocal && (
-						<Stack spacing={1}>
-							<Alert severity="info">
+						</AlertDescription>
+					</Alert>
+				)}
+				{!isLocal && (
+					<div className="flex flex-col gap-2">
+						<Alert>
+							<AlertDescription>
 								Validate SSH before saving: this records the first trusted host
 								key in the backend-managed known_hosts file, then checks SSH
 								auth.
-							</Alert>
-							<Stack
-								direction="row"
-								spacing={1}
-								sx={{ flexWrap: "wrap", alignItems: "center" }}
-							>
-								<Button
-									variant="outlined"
-									onClick={onValidateSSH}
-									disabled={
-										isValidatingSSH ||
-										!draft.host.trim() ||
-										!draft.username.trim()
-									}
-								>
-									{isValidatingSSH
-										? "Validating SSH..."
-										: "Validate SSH + trust host"}
-								</Button>
-								<Typography variant="caption" color="text.secondary">
-									SSH status: {sshValidationStatus || "Not tested yet"}
-								</Typography>
-							</Stack>
-							{sshValidationMessage && (
-								<Alert severity="success">{sshValidationMessage}</Alert>
-							)}
-							{sshValidationError && (
-								<Alert severity="error">{sshValidationError}</Alert>
-							)}
-						</Stack>
-					)}
-					{hasJellyseerr && !draft.jellyseerr_url && (
-						<Alert severity="info">
-							Jellyseerr is enabled, but no URL is configured yet.
+							</AlertDescription>
 						</Alert>
-					)}
-				</Stack>
+						<div className="flex flex-row flex-wrap items-center gap-2">
+							<Button
+								variant="outline"
+								onClick={onValidateSSH}
+								disabled={
+									isValidatingSSH ||
+									!draft.host.trim() ||
+									!draft.username.trim()
+								}
+							>
+								{isValidatingSSH
+									? "Validating SSH..."
+									: "Validate SSH + trust host"}
+							</Button>
+							<p className="text-xs text-muted-foreground">
+								SSH status: {sshValidationStatus || "Not tested yet"}
+							</p>
+						</div>
+						{sshValidationMessage && (
+							<Alert>
+								<AlertDescription>{sshValidationMessage}</AlertDescription>
+							</Alert>
+						)}
+						{sshValidationError && (
+							<Alert variant="destructive">
+								<AlertDescription>{sshValidationError}</AlertDescription>
+							</Alert>
+						)}
+					</div>
+				)}
+				{hasJellyseerr && !draft.jellyseerr_url && (
+					<Alert>
+						<AlertDescription>
+							Jellyseerr is enabled, but no URL is configured yet.
+						</AlertDescription>
+					</Alert>
+				)}
 			</CardContent>
 		</Card>
 	);
 }
+
 function SSHKeyManager({
 	sshKeys,
 	selectedKeyId,
@@ -655,26 +634,29 @@ function SSHKeyManager({
 		});
 		onSelectKeyId("");
 	};
+	const loadKey = (key: SSHKey) => {
+		onSelectKeyId(key.id);
+		setDraft({
+			id: key.id,
+			name: key.name,
+			private_key: "",
+			passphrase: "",
+			public_key: key.public_key,
+			fingerprint: key.fingerprint,
+			notes: key.notes,
+		});
+	};
 	return (
-		<Box
-			sx={{
-				display: "grid",
-				gridTemplateColumns: {
-					xs: "1fr",
-					md: "320px minmax(0, 1fr)",
-				},
-				gap: 2,
-			}}
-		>
+		<div className="grid grid-cols-1 gap-4 md:grid-cols-[320px_minmax(0,1fr)]">
 			<SelectionRailCard
 				title="SSH keys"
 				description="Select a key to see its details."
 				minHeight={420}
 				footer={
 					<Button
-						variant="outlined"
-						size="small"
-						fullWidth
+						variant="outline"
+						size="sm"
+						className="w-full"
 						onClick={() => {
 							clear();
 						}}
@@ -683,75 +665,36 @@ function SSHKeyManager({
 					</Button>
 				}
 			>
-				<Box sx={{ flex: 1, overflowY: "auto" }}>
-					{sshKeys.length === 0 && (
-						<Box sx={{ p: 2, textAlign: "center" }}>
-							<Typography variant="body2" color="text.secondary">
-								No SSH keys saved yet.
-							</Typography>
-						</Box>
-					)}
-					{sshKeys.map((key) => {
-						const active = key.id === selectedKeyId;
-						return (
-							<Box
-								key={key.id}
-								onClick={() => {
-									onSelectKeyId(key.id);
-									setDraft({
-										id: key.id,
-										name: key.name,
-										private_key: "",
-										passphrase: "",
-										public_key: key.public_key,
-										fingerprint: key.fingerprint,
-										notes: key.notes,
-									});
-								}}
-								sx={{
-									display: "grid",
-									gridTemplateColumns: "minmax(0, 1fr) auto",
-									gap: 1,
-									px: 1.25,
-									py: 1.1,
-									borderTop: 1,
-									borderColor: "divider",
-									cursor: "pointer",
-									width: "100%",
-									bgcolor: active
-										? "action.selected"
-										: "background.paper",
-									"&:hover .rail-edit": { opacity: 1 },
-								}}
-							>
-								<Box sx={{ minWidth: 0 }}>
-									<Typography sx={{ fontWeight: 700 }} noWrap>
-										{key.name}
-									</Typography>
-									<Typography variant="caption" color="text.secondary">
-										{key.private_key_set ? "key saved" : "no key"} ·{" "}
-										{key.usage_count} machine
-										{key.usage_count === 1 ? "" : "s"}
-									</Typography>
-								</Box>
-								<HoverEditButton
-									onClick={() => {
-										onSelectKeyId(key.id);
-										setDraft({
-											id: key.id,
-											name: key.name,
-											private_key: "",
-											passphrase: "",
-											public_key: key.public_key,
-											fingerprint: key.fingerprint,
-											notes: key.notes,
-										});
-									}}
-								/>
-							</Box>
-						);
-					})}
-				</Box>
+				{sshKeys.length === 0 && (
+					<div className="p-4 text-center">
+						<p className="text-xs text-muted-foreground">
+							No SSH keys saved yet.
+						</p>
+					</div>
+				)}
+				{sshKeys.map((key) => {
+					const active = key.id === selectedKeyId;
+					return (
+						<div
+							key={key.id}
+							onClick={() => loadKey(key)}
+							className={cn(
+								"group grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] gap-2 border-t border-border px-3 py-2.5 group-hover:[&_.rail-edit]:opacity-100",
+								active ? "bg-muted" : "bg-card hover:bg-muted/50",
+							)}
+						>
+							<div className="min-w-0">
+								<p className="truncate font-semibold">{key.name}</p>
+								<p className="text-xs text-muted-foreground">
+									{key.private_key_set ? "key saved" : "no key"} ·{" "}
+									{key.usage_count} machine
+									{key.usage_count === 1 ? "" : "s"}
+								</p>
+							</div>
+							<HoverEditButton onClick={() => loadKey(key)} />
+						</div>
+					);
+				})}
 			</SelectionRailCard>
 			<SectionCard
 				title={selectedKey?.name || "No key selected"}
@@ -762,90 +705,76 @@ function SSHKeyManager({
 				}
 				action={
 					selectedKey ? (
-						<Chip
-							size="small"
-							variant="outlined"
-							label={`${selectedKey.usage_count} machine${selectedKey.usage_count === 1 ? "" : "s"}`}
-						/>
+						<Badge variant="outline">{`${selectedKey.usage_count} machine${selectedKey.usage_count === 1 ? "" : "s"}`}</Badge>
 					) : undefined
 				}
 			>
-				<Stack spacing={1.5}>
-					<Grid container spacing={1.25}>
-						<Grid size={{ xs: 12, md: 4 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Key name"
-								value={draft.name}
-								onChange={(e) =>
-									setDraft((current) => ({
-										...current,
-										name: e.target.value,
-									}))
-								}
-							/>
-						</Grid>
-						<Grid size={{ xs: 12, md: 4 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Passphrase"
-								type="password"
-								value={draft.passphrase}
-								onChange={(e) =>
-									setDraft((current) => ({
-										...current,
-										passphrase: e.target.value,
-									}))
-								}
-								helperText="Optional"
-							/>
-						</Grid>
-						<Grid size={{ xs: 12, md: 4 }}>
-							<TextField
-								fullWidth
-								size="small"
-								label="Notes"
-								value={draft.notes}
-								onChange={(e) =>
-									setDraft((current) => ({
-										...current,
-										notes: e.target.value,
-									}))
-								}
-							/>
-						</Grid>
-						<Grid size={{ xs: 12 }}>
-							<TextField
-								fullWidth
-								multiline
-								minRows={6}
-								size="small"
+				<div className="flex flex-col gap-4">
+					<div className="grid grid-cols-12 gap-2">
+						<div className="col-span-12 md:col-span-4">
+							<FormField label="Key name">
+								<Input
+									value={draft.name}
+									onChange={(e) =>
+										setDraft((current) => ({
+											...current,
+											name: e.target.value,
+										}))
+									}
+								/>
+							</FormField>
+						</div>
+						<div className="col-span-12 md:col-span-4">
+							<FormField label="Passphrase" helperText="Optional">
+								<Input
+									type="password"
+									value={draft.passphrase}
+									onChange={(e) =>
+										setDraft((current) => ({
+											...current,
+											passphrase: e.target.value,
+										}))
+									}
+								/>
+							</FormField>
+						</div>
+						<div className="col-span-12 md:col-span-4">
+							<FormField label="Notes">
+								<Input
+									value={draft.notes}
+									onChange={(e) =>
+										setDraft((current) => ({
+											...current,
+											notes: e.target.value,
+										}))
+									}
+								/>
+							</FormField>
+						</div>
+						<div className="col-span-12">
+							<FormField
 								label="Private key"
-								type="password"
-								value={draft.private_key}
-								onChange={(e) =>
-									setDraft((current) => ({
-										...current,
-										private_key: e.target.value,
-									}))
-								}
 								helperText={
 									editing
 										? "Leave blank to keep the existing private key."
 										: "Paste the full key text here."
 								}
-							/>
-						</Grid>
-					</Grid>
-					<Stack
-						direction="row"
-						spacing={1}
-						sx={{ flexWrap: "wrap", alignItems: "center" }}
-					>
+							>
+								<Textarea
+									rows={6}
+									value={draft.private_key}
+									onChange={(e) =>
+										setDraft((current) => ({
+											...current,
+											private_key: e.target.value,
+										}))
+									}
+								/>
+							</FormField>
+						</div>
+					</div>
+					<div className="flex flex-row flex-wrap items-center gap-2">
 						<Button
-							variant="contained"
 							disabled={saveKey.isPending}
 							onClick={async () => {
 								await saveKey.mutateAsync(draft);
@@ -855,7 +784,7 @@ function SSHKeyManager({
 							{editing ? "Update key" : "Save key"}
 						</Button>
 						<Button
-							variant="outlined"
+							variant="outline"
 							disabled={generateKey.isPending}
 							onClick={async () => {
 								const generated = await generateKey.mutateAsync({
@@ -878,75 +807,45 @@ function SSHKeyManager({
 						>
 							{generateKey.isPending ? "Generating..." : "Generate key"}
 						</Button>
-						<Button variant="outlined" onClick={clear}>
+						<Button variant="outline" onClick={clear}>
 							Clear
 						</Button>
 						{selectedKey && (
 							<Button
-								variant="outlined"
-								color="error"
+								variant="destructive"
 								onClick={() => deleteKey.mutate(selectedKey.id)}
 							>
 								Delete
 							</Button>
 						)}
-					</Stack>
+					</div>
 					{saveKey.error && (
-						<Alert severity="error">{String(saveKey.error)}</Alert>
+						<Alert variant="destructive">
+							<AlertDescription>{String(saveKey.error)}</AlertDescription>
+						</Alert>
 					)}
 					{selectedKey && (
-						<Stack spacing={1.25}>
-							<Box
-								sx={{
-									px: 1,
-									py: 0.75,
-									border: 1,
-									borderColor: "divider",
-									borderRadius: 1,
-								}}
-							>
-								<Typography variant="caption" color="text.secondary">
-									Fingerprint
-								</Typography>
-								<Typography
-									variant="body2"
-									sx={{
-										fontFamily: "monospace",
-										wordBreak: "break-all",
-									}}
-								>
+						<div className="flex flex-col gap-2">
+							<div className="rounded-lg border border-border px-3 py-2">
+								<p className="text-xs text-muted-foreground">Fingerprint</p>
+								<p className="break-all font-mono text-sm">
 									{selectedKey.fingerprint || "Unavailable"}
-								</Typography>
-							</Box>
-							<Box
-								sx={{
-									px: 1,
-									py: 0.75,
-									border: 1,
-									borderColor: "divider",
-									borderRadius: 1,
-								}}
-							>
-								<Typography variant="caption" color="text.secondary">
-									Public key
-								</Typography>
-								<Typography
-									variant="body2"
-									sx={{
-										fontFamily: "monospace",
-										wordBreak: "break-all",
-									}}
-								>
+								</p>
+							</div>
+							<div className="rounded-lg border border-border px-3 py-2">
+								<p className="text-xs text-muted-foreground">Public key</p>
+								<p className="break-all font-mono text-sm">
 									{selectedKey.public_key || "Unavailable"}
-								</Typography>
-							</Box>
-						</Stack>
+								</p>
+							</div>
+						</div>
 					)}
-				</Stack>
+				</div>
 			</SectionCard>
-		</Box>
+		</div>
 	);
 }
+
 function ResetLocalDatabaseCard() {
 	const resetDatabase = useResetLocalDatabase();
 	const [open, setOpen] = useState(false);
@@ -968,105 +867,94 @@ function ResetLocalDatabaseCard() {
 	};
 	return (
 		<>
-			<Card variant="outlined">
-				<CardContent sx={{ p: 1.5 }}>
-					<Stack spacing={1.5}>
-						<Stack
-							direction="row"
-							spacing={1}
-							sx={{ alignItems: "center", flexWrap: "wrap" }}
-						>
-							<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-								Danger zone
-							</Typography>
-							<Chip
-								label="Destructive"
-								size="small"
-								color="error"
-								variant="outlined"
-							/>
-						</Stack>
-						<Typography variant="body2" color="text.secondary">
-							Reset the local SQLite settings/media index databases after
-							acknowledging the data loss.
-						</Typography>
-						<Button
-							variant="outlined"
-							color="error"
-							onClick={() => setOpen(true)}
-						>
-							Reset local database
-						</Button>
-						{resetDatabase.error && (
-							<Alert severity="error">{String(resetDatabase.error)}</Alert>
-						)}
-					</Stack>
+			<Card>
+				<CardContent className="flex flex-col gap-4 p-3">
+					<div className="flex flex-row flex-wrap items-center gap-2">
+						<p className="text-sm font-semibold">Danger zone</p>
+						<Badge variant="destructive">Destructive</Badge>
+					</div>
+					<p className="text-xs text-muted-foreground">
+						Reset the local SQLite settings/media index databases after
+						acknowledging the data loss.
+					</p>
+					<Button variant="destructive" onClick={() => setOpen(true)}>
+						Reset local database
+					</Button>
+					{resetDatabase.error && (
+						<Alert variant="destructive">
+							<AlertDescription>{String(resetDatabase.error)}</AlertDescription>
+						</Alert>
+					)}
 				</CardContent>
 			</Card>
-			<Dialog open={open} onClose={close} fullWidth maxWidth="sm">
-				<DialogTitle>Reset local database</DialogTitle>
-				<DialogContent>
-					<Stack spacing={1.5} sx={{ pt: 1 }}>
-						<Typography variant="body2" color="text.secondary">
+			<Dialog
+				open={open}
+				onOpenChange={(next) => {
+					if (!next) close();
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>Reset local database</DialogTitle>
+						<DialogDescription>
 							This deletes the local settings and media index SQLite files. It
 							does not affect remote servers.
-						</Typography>
-						<FormControlLabel
-							control={
-								<Checkbox
-									checked={ackSettings}
-									onChange={(e) => setAckSettings(e.target.checked)}
-								/>
-							}
-							label="I understand settings will be lost."
-						/>
-						<FormControlLabel
-							control={
-								<Checkbox
-									checked={ackIndex}
-									onChange={(e) => setAckIndex(e.target.checked)}
-								/>
-							}
-							label="I understand the media index will be rebuilt."
-						/>
-						<FormControlLabel
-							control={
-								<Checkbox
-									checked={ackIrreversible}
-									onChange={(e) => setAckIrreversible(e.target.checked)}
-								/>
-							}
-							label="I understand this cannot be undone."
-						/>
-						<TextField
-							fullWidth
-							label='Type "reset local database" to confirm'
-							value={phrase}
-							onChange={(e) => setPhrase(e.target.value)}
-						/>
-					</Stack>
+						</DialogDescription>
+					</DialogHeader>
+					<div className="flex flex-col gap-3">
+						<label className="flex items-center gap-2 text-sm">
+							<Checkbox
+								checked={ackSettings}
+								onCheckedChange={(checked) => setAckSettings(Boolean(checked))}
+							/>
+							I understand settings will be lost.
+						</label>
+						<label className="flex items-center gap-2 text-sm">
+							<Checkbox
+								checked={ackIndex}
+								onCheckedChange={(checked) => setAckIndex(Boolean(checked))}
+							/>
+							I understand the media index will be rebuilt.
+						</label>
+						<label className="flex items-center gap-2 text-sm">
+							<Checkbox
+								checked={ackIrreversible}
+								onCheckedChange={(checked) =>
+									setAckIrreversible(Boolean(checked))
+								}
+							/>
+							I understand this cannot be undone.
+						</label>
+						<FormField label='Type "reset local database" to confirm'>
+							<Input
+								value={phrase}
+								onChange={(e) => setPhrase(e.target.value)}
+							/>
+						</FormField>
+					</div>
+					<DialogFooter
+						onCancel={close}
+						cancelLabel="Cancel"
+						onConfirm={async () => {
+							await resetDatabase.mutateAsync({
+								confirm_phrase: phrase,
+								acknowledge_settings_loss: ackSettings,
+								acknowledge_media_index_loss: ackIndex,
+								acknowledge_irreversible: ackIrreversible,
+							});
+							close();
+						}}
+						confirmLabel="Reset database"
+						confirmBusyLabel="Resetting..."
+						confirmColor="error"
+						confirmDisabled={!canSubmit || resetDatabase.isPending}
+					/>
 				</DialogContent>
-				<DialogFooter
-					onCancel={close}
-					cancelLabel="Cancel"
-					onConfirm={async () => {
-						await resetDatabase.mutateAsync({
-							confirm_phrase: phrase,
-							acknowledge_settings_loss: ackSettings,
-							acknowledge_media_index_loss: ackIndex,
-							acknowledge_irreversible: ackIrreversible,
-						});
-						close();
-					}}
-					confirmLabel="Reset database"
-					confirmBusyLabel="Resetting..."
-					confirmColor="error"
-					confirmDisabled={!canSubmit || resetDatabase.isPending}
-				/>
 			</Dialog>
 		</>
 	);
 }
+
 export function Settings() {
 	const { data: machines, error } = useMonitoringSettings();
 	const { data: sshKeys = [] } = useSSHKeys();
@@ -1083,7 +971,8 @@ export function Settings() {
 	const [machineDraft, setMachineDraft] = useState<MonitoringMachineInput>(
 		emptyMachine(),
 	);
-	const [editingMachine, setEditingMachine] = useState<MonitoringMachine | null>(null);
+	const [editingMachine, setEditingMachine] =
+		useState<MonitoringMachine | null>(null);
 	const [selectedMachineId, setSelectedMachineId] = useState("");
 	const orderedMachines = useMemo(() => machines ?? [], [machines]);
 	const selectedMachine = useMemo(
@@ -1098,7 +987,10 @@ export function Settings() {
 		setSSHValidationError("");
 		setSSHValidationStatus("");
 	};
-	const openEditMachine = (input: MonitoringMachineInput, original?: MonitoringMachine | null) => {
+	const openEditMachine = (
+		input: MonitoringMachineInput,
+		original?: MonitoringMachine | null,
+	) => {
 		clearSSHValidation();
 		setMachineDraft(input);
 		setEditingMachine(original ?? null);
@@ -1151,55 +1043,58 @@ export function Settings() {
 		}
 	};
 	return (
-		<Stack spacing={2.25}>
-			<Stack spacing={0.5}>
-				<Typography variant="h5" sx={{ fontWeight: 800 }}>
-					Settings
-				</Typography>
-				<Typography variant="body2" color="text.secondary">
+		<div className="flex flex-col gap-6">
+			<div className="flex flex-col gap-1">
+				<h1 className="text-lg font-semibold">Settings</h1>
+				<p className="text-xs text-muted-foreground">
 					Structure machines, reusable SSH keys, and safety controls from a
 					tabbed admin workspace.
-				</Typography>
-			</Stack>
-			{error && <Alert severity="error">{String(error)}</Alert>}
+				</p>
+			</div>
+			{error && (
+				<Alert variant="destructive">
+					<AlertDescription>{String(error)}</AlertDescription>
+				</Alert>
+			)}
 			{saveMachine.error && (
-				<Alert severity="error">{String(saveMachine.error)}</Alert>
+				<Alert variant="destructive">
+					<AlertDescription>{String(saveMachine.error)}</AlertDescription>
+				</Alert>
 			)}
 			{deleteMachine.error && (
-				<Alert severity="error">{String(deleteMachine.error)}</Alert>
+				<Alert variant="destructive">
+					<AlertDescription>{String(deleteMachine.error)}</AlertDescription>
+				</Alert>
 			)}
 			<TabbedCard
 				value={tab}
 				onChange={(value) => setTab(value as SettingsTab)}
 				tabs={[
-					<Tab key="machines" value="machines" label="Machines" />,
-					<Tab key="ssh-keys" value="ssh-keys" label="SSH Keys" />,
-					<Tab key="danger" value="danger" label="Danger Zone" />,
+					<TabsTrigger key="machines" value="machines">
+						Machines
+					</TabsTrigger>,
+					<TabsTrigger key="ssh-keys" value="ssh-keys">
+						SSH Keys
+					</TabsTrigger>,
+					<TabsTrigger key="danger" value="danger">
+						Danger Zone
+					</TabsTrigger>,
 				]}
-				contentSx={{ p: 1.5 }}
+				contentSx={{}}
 			>
 				{tab === "machines" && (
-					<Stack spacing={2}>
+					<div className="flex flex-col gap-4">
 						{orderedMachines.length > 0 ? (
-							<Box
-								sx={{
-									display: "grid",
-									gridTemplateColumns: {
-										xs: "1fr",
-										md: "320px minmax(0, 1fr)",
-									},
-									gap: 2,
-								}}
-							>
+							<div className="grid grid-cols-1 gap-4 md:grid-cols-[320px_minmax(0,1fr)]">
 								<SelectionRailCard
 									title="Machines"
 									description="Select a machine to see its settings."
 									minHeight={420}
 									footer={
 										<Button
-											variant="outlined"
-											size="small"
-											fullWidth
+											variant="outline"
+											size="sm"
+											className="w-full"
 											onClick={() => {
 												clearSSHValidation();
 												setMachineDraft(emptyMachine("local"));
@@ -1211,44 +1106,30 @@ export function Settings() {
 										</Button>
 									}
 								>
-									<Box sx={{ flex: 1, overflowY: "auto" }}>
-										{orderedMachines.map((machine) => {
-											const active = machine.id === selectedMachine?.id;
-											return (
-												<Box
-													key={machine.id}
-													onClick={() => setSelectedMachineId(machine.id)}
-													sx={{
-														display: "grid",
-														gridTemplateColumns: "minmax(0, 1fr) auto",
-														gap: 1,
-														px: 1.25,
-														py: 1.1,
-														borderTop: 1,
-														borderColor: "divider",
-														cursor: "pointer",
-														width: "100%",
-														bgcolor: active
-															? "action.selected"
-															: "background.paper",
-														"&:hover .rail-edit": { opacity: 1 },
-													}}
-												>
-													<Box sx={{ minWidth: 0 }}>
-														<Typography sx={{ fontWeight: 700 }} noWrap>
-															{machine.name}
-														</Typography>
-														<Typography
-															variant="caption"
-															color="text.secondary"
-														>
-															{machine.mode} ·{" "}
-															{machine.enabled ? "Enabled" : "Disabled"}
-														</Typography>
-													</Box>
-													<HoverEditButton
-														onClick={() => {
-															openEditMachine({
+									{orderedMachines.map((machine) => {
+										const active = machine.id === selectedMachine?.id;
+										return (
+											<div
+												key={machine.id}
+												onClick={() => setSelectedMachineId(machine.id)}
+												className={cn(
+													"group grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] gap-2 border-t border-border px-3 py-2.5 group-hover:[&_.rail-edit]:opacity-100",
+													active ? "bg-muted" : "bg-card hover:bg-muted/50",
+												)}
+											>
+												<div className="min-w-0">
+													<p className="truncate font-semibold">
+														{machine.name}
+													</p>
+													<p className="text-xs text-muted-foreground">
+														{machine.mode} ·{" "}
+														{machine.enabled ? "Enabled" : "Disabled"}
+													</p>
+												</div>
+												<HoverEditButton
+													onClick={() => {
+														openEditMachine(
+															{
 																id: machine.id,
 																name: machine.name,
 																mode: machine.mode,
@@ -1271,13 +1152,14 @@ export function Settings() {
 																jellyseerr_url: machine.jellyseerr_url,
 																jellyseerr_api_key: "",
 																notes: machine.notes,
-															}, machine);
-														}}
-													/>
-												</Box>
-											);
-										})}
-									</Box>
+															},
+															machine,
+														);
+													}}
+												/>
+											</div>
+										);
+									})}
 								</SelectionRailCard>
 								<SectionCard
 									title={selectedMachine?.name || "No machine selected"}
@@ -1290,134 +1172,98 @@ export function Settings() {
 									}
 									action={
 										selectedMachine ? (
-											<Chip
-												size="small"
-												variant="outlined"
-												label={selectedMachine.mode}
-											/>
+											<Badge variant="outline">{selectedMachine.mode}</Badge>
 										) : undefined
 									}
 								>
 									{selectedMachine ? (
-										<Stack spacing={1.25}>
-											<Stack
-												direction="row"
-												spacing={1}
-												sx={{ flexWrap: "wrap" }}
-											>
-												<Chip
-													size="small"
-													variant="outlined"
-													label={
-														selectedMachine.enabled ? "enabled" : "disabled"
-													}
-												/>
-												<Chip
-													size="small"
-													variant="outlined"
-													label={`${selectedMachine.services.length} services`}
-												/>
+										<div className="flex flex-col gap-4">
+											<div className="flex flex-row flex-wrap items-center gap-1">
+												<Badge variant="outline">
+													{selectedMachine.enabled ? "enabled" : "disabled"}
+												</Badge>
+												<Badge variant="outline">{`${selectedMachine.services.length} services`}</Badge>
 												{selectedMachine.ssh_key_id && (
-													<Chip
-														size="small"
-														variant="outlined"
-														label={`SSH key ${selectedMachine.ssh_key_id}`}
-													/>
+													<Badge variant="outline">{`SSH key ${selectedMachine.ssh_key_id}`}</Badge>
 												)}
-											</Stack>
-											<Typography variant="body2" color="text.secondary">
+											</div>
+											<p className="text-xs text-muted-foreground">
 												{selectedMachine.notes || "No notes."}
-											</Typography>
-											<Box
-												sx={{
-													display: "grid",
-													gap: 1,
-													gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
-												}}
-											>
+											</p>
+											<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
 												{selectedMachine.mode === "ssh" ? (
 													<>
-														<TextField
-															size="small"
-															label="Host"
-															value={selectedMachine.host}
-															disabled
-														/>
-														<TextField
-															size="small"
-															label="Port"
-															value={selectedMachine.port}
-															disabled
-														/>
-														<TextField
-															size="small"
-															label="Username"
-															value={selectedMachine.username}
-															disabled
-														/>
+														<FormField label="Host">
+															<Input value={selectedMachine.host} disabled />
+														</FormField>
+														<FormField label="Port">
+															<Input value={selectedMachine.port} disabled />
+														</FormField>
+														<FormField label="Username">
+															<Input
+																value={selectedMachine.username}
+																disabled
+															/>
+														</FormField>
 													</>
 												) : (
-													<TextField
-														size="small"
-														label="Media root"
-														value={selectedMachine.media_root || "localhost"}
-														disabled
-													/>
+													<FormField label="Media root">
+														<Input
+															value={selectedMachine.media_root || "localhost"}
+															disabled
+														/>
+													</FormField>
 												)}
-											</Box>
-											<Stack
-												direction="row"
-												spacing={1}
-												sx={{ flexWrap: "wrap" }}
-											>
+											</div>
+											<div className="flex flex-row flex-wrap items-center gap-2">
 												<Button
-													variant="outlined"
+													variant="outline"
 													onClick={() =>
-														openEditMachine({
-															id: selectedMachine.id,
-															name: selectedMachine.name,
-															mode: selectedMachine.mode,
-															enabled: selectedMachine.enabled,
-															services: selectedMachine.services,
-															host: selectedMachine.host,
-															port: selectedMachine.port,
-															username: selectedMachine.username,
-															key_directory: "",
-															key_name: "",
-															path_prefix: "",
-															ssh_key_id: selectedMachine.ssh_key_id,
-															ssh_private_key: "",
-															ssh_private_key_passphrase: "",
-															password: "",
-															media_root: selectedMachine.media_root,
-															jellyfin_url: selectedMachine.jellyfin_url,
-															jellyfin_user_id:
-																selectedMachine.jellyfin_user_id,
-															jellyfin_api_key: "",
-															jellyseerr_url: selectedMachine.jellyseerr_url,
-															jellyseerr_api_key: "",
-															notes: selectedMachine.notes,
-														}, selectedMachine)
+														openEditMachine(
+															{
+																id: selectedMachine.id,
+																name: selectedMachine.name,
+																mode: selectedMachine.mode,
+																enabled: selectedMachine.enabled,
+																services: selectedMachine.services,
+																host: selectedMachine.host,
+																port: selectedMachine.port,
+																username: selectedMachine.username,
+																key_directory: "",
+																key_name: "",
+																path_prefix: "",
+																ssh_key_id: selectedMachine.ssh_key_id,
+																ssh_private_key: "",
+																ssh_private_key_passphrase: "",
+																password: "",
+																media_root: selectedMachine.media_root,
+																jellyfin_url: selectedMachine.jellyfin_url,
+																jellyfin_user_id:
+																	selectedMachine.jellyfin_user_id,
+																jellyfin_api_key: "",
+																jellyseerr_url: selectedMachine.jellyseerr_url,
+																jellyseerr_api_key: "",
+																notes: selectedMachine.notes,
+															},
+															selectedMachine,
+														)
 													}
 												>
 													Edit
 												</Button>
 												<Button
-													variant="outlined"
-													color="error"
-													onClick={() =>
-														setDeleteMachineId(selectedMachine.id)
-													}
+													variant="destructive"
+													onClick={() => setDeleteMachineId(selectedMachine.id)}
 												>
 													Delete
 												</Button>
-											</Stack>
-										</Stack>
+											</div>
+										</div>
 									) : null}
 								</SectionCard>
-							</Box>
+							</div>
 						) : null}
-					</Stack>
+					</div>
 				)}
 				{tab === "ssh-keys" && (
 					<SSHKeyManager
@@ -1430,14 +1276,19 @@ export function Settings() {
 			</TabbedCard>
 			<Dialog
 				open={machineDialogOpen}
-				onClose={closeMachineDialog}
-				fullWidth
-				maxWidth="lg"
+				onOpenChange={(open) => {
+					if (!open) closeMachineDialog();
+				}}
 			>
-				<DialogTitle>
-					{machineDraft.id ? "Edit machine" : "Create machine"}
-				</DialogTitle>
-				<DialogContent dividers>
+				<DialogContent className="sm:max-w-4xl">
+					<DialogHeader>
+						<DialogTitle>
+							{machineDraft.id ? "Edit machine" : "Create machine"}
+						</DialogTitle>
+						<DialogDescription>
+							{machineDraft.mode === "local" ? "Local API host" : "SSH target"}
+						</DialogDescription>
+					</DialogHeader>
 					<MachineEditor
 						key={`${machineDraft.id ?? machineDraft.mode}-${machineDraft.mode}`}
 						title={
@@ -1458,34 +1309,31 @@ export function Settings() {
 						sshValidationError={sshValidationError}
 						sshValidationStatus={sshValidationStatus}
 					/>
+					<DialogFooter
+						onCancel={closeMachineDialog}
+						cancelLabel="Cancel"
+						onConfirm={() => {
+							void saveMachineDraft(machineDraft);
+						}}
+						confirmLabel={machineDraft.id ? "Save machine" : "Create machine"}
+						confirmDisabled={
+							!machineDraft.name ||
+							(machineDraft.mode === "ssh" && !machineDraft.host.trim())
+						}
+						secondaryAction={
+							machineDraft.id ? (
+								<Button
+									variant="destructive"
+									onClick={() => {
+										setDeleteMachineId(machineDraft.id as string);
+									}}
+								>
+									Delete
+								</Button>
+							) : undefined
+						}
+					/>
 				</DialogContent>
-				<DialogFooter
-					onCancel={closeMachineDialog}
-					cancelLabel="Cancel"
-					onConfirm={() => {
-						void saveMachineDraft(machineDraft);
-					}}
-					confirmLabel={machineDraft.id ? "Save machine" : "Create machine"}
-					confirmDisabled={
-						!machineDraft.name ||
-						(machineDraft.mode === "ssh" && !machineDraft.host.trim())
-					}
-					secondaryAction={
-						machineDraft.id ? (
-							<Button
-								variant="outlined"
-								color="error"
-								onClick={() => {
-									setDeleteMachineId(machineDraft.id as string);
-
-								}}
-							>
-								Delete
-							</Button>
-						) : undefined
-					}
-				/>
-
 			</Dialog>
 			<ConfirmDialog
 				open={Boolean(deleteMachineId)}
@@ -1500,6 +1348,6 @@ export function Settings() {
 					setDeleteMachineId(null);
 				}}
 			/>
-		</Stack>
+		</div>
 	);
 }
diff --git a/frontend/src/pages/__tests__/Actions.test.tsx b/frontend/src/pages/__tests__/Actions.test.tsx
new file mode 100644
index 0000000..1d90289
--- /dev/null
+++ b/frontend/src/pages/__tests__/Actions.test.tsx
@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Actions } from "../Actions";
+import type { MonitoringMachine, SavedTask } from "../../types";
+
+const saveTaskMutate = vi.fn().mockResolvedValue({
+	id: "t1",
+	name: "Restart svc",
+	task_type: "shell",
+	content: "",
+	enabled: true,
+	default_machine_id: "",
+	notes: "",
+});
+const deleteTaskMutate = vi.fn();
+const runTaskMutate = vi.fn().mockResolvedValue({});
+
+let machines: MonitoringMachine[] = [];
+let tasks: SavedTask[] = [];
+
+vi.mock("../../hooks/useSettings", () => ({
+	useMonitoringSettings: () => ({ data: machines }),
+	useTasks: () => ({ data: tasks }),
+	useSaveTask: () => ({ mutateAsync: saveTaskMutate, isPending: false }),
+	useDeleteTask: () => ({ mutate: deleteTaskMutate }),
+	useRunTask: () => ({ mutateAsync: runTaskMutate, isPending: false }),
+	useTaskRuns: () => ({ data: { items: [] } }),
+}));
+
+function machine(
+	overrides: Partial<MonitoringMachine> = {},
+): MonitoringMachine {
+	return {
+		id: "m1",
+		name: "This machine",
+		mode: "local",
+		enabled: true,
+		services: ["monitoring", "files"],
+		host: "",
+		port: 22,
+		username: "",
+		key_directory: "",
+		key_name: "",
+		ssh_key_id: "",
+		ssh_private_key_set: false,
+		ssh_private_key_passphrase_set: false,
+		password_set: false,
+		media_root: "",
+		path_prefix: "",
+		jellyfin_url: "",
+		jellyfin_user_id: "",
+		jellyfin_api_key_set: false,
+		jellyseerr_url: "",
+		jellyseerr_api_key_set: false,
+		notes: "",
+		...overrides,
+	} as MonitoringMachine;
+}
+
+function task(overrides: Partial<SavedTask> = {}): SavedTask {
+	return {
+		id: "t1",
+		name: "Restart svc",
+		task_type: "shell",
+		content: "systemctl restart foo",
+		enabled: true,
+		default_machine_id: "",
+		notes: "",
+		created_at: 0,
+		updated_at: 0,
+		...overrides,
+	} as SavedTask;
+}
+
+beforeEach(() => {
+	saveTaskMutate.mockClear();
+	deleteTaskMutate.mockClear();
+	runTaskMutate.mockClear();
+	machines = [];
+	tasks = [];
+});
+
+describe("Actions", () => {
+	it("shows the empty state and creates a task via the editor dialog", async () => {
+		render(<Actions />);
+
+		expect(screen.getByText("No action selected")).toBeInTheDocument();
+		expect(
+			screen.getByRole("button", { name: "Add action" }),
+		).toBeInTheDocument();
+
+		await userEvent.click(screen.getByRole("button", { name: "Add action" }));
+		// Editor dialog opened (Name field is unique to the editor).
+		expect(screen.getByLabelText("Name")).toBeInTheDocument();
+
+		// Controlled input parity: name + default shell type flow through.
+		await userEvent.type(screen.getByLabelText("Name"), "Restart svc");
+		await userEvent.click(screen.getByRole("button", { name: "Save action" }));
+
+		expect(saveTaskMutate).toHaveBeenCalledTimes(1);
+		const saved = saveTaskMutate.mock.calls[0][0];
+		expect(saved.name).toBe("Restart svc");
+		expect(saved.task_type).toBe("shell");
+	});
+
+	it("disables the Run button until a run machine is selected", async () => {
+		machines = [machine()];
+		tasks = [task()];
+		render(<Actions />);
+
+		// Selecting a saved task tab exposes the detail + Run control.
+		await userEvent.click(screen.getByRole("tab", { name: "Restart svc" }));
+
+		const runButton = screen.getByRole("button", { name: "Run action" });
+		expect(runButton).toBeDisabled();
+	});
+});
diff --git a/frontend/src/pages/__tests__/Settings.test.tsx b/frontend/src/pages/__tests__/Settings.test.tsx
new file mode 100644
index 0000000..ce56ca3
--- /dev/null
+++ b/frontend/src/pages/__tests__/Settings.test.tsx
@@ -0,0 +1,122 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Settings } from "../Settings";
+import type { MonitoringMachine } from "../../types";
+
+const saveMachineMutate = vi.fn().mockResolvedValue({});
+const deleteMachineMutate = vi.fn();
+const testSSHMutate = vi
+	.fn()
+	.mockResolvedValue({
+		message: "SSH auth succeeded",
+		known_hosts_updated: true,
+	});
+
+let machines: MonitoringMachine[] = [];
+
+vi.mock("../../hooks/useSettings", () => ({
+	useMonitoringSettings: () => ({ data: machines }),
+	useSSHKeys: () => ({ data: [] }),
+	useSaveMonitoringMachine: () => ({
+		mutateAsync: saveMachineMutate,
+		isPending: false,
+	}),
+	useDeleteMonitoringMachine: () => ({ mutate: deleteMachineMutate }),
+	useTestMonitoringMachineSSH: () => ({
+		mutateAsync: testSSHMutate,
+		isPending: false,
+	}),
+	useResetLocalDatabase: () => ({}),
+	useSaveSSHKey: () => ({ mutateAsync: vi.fn() }),
+	useGenerateSSHKey: () => ({ mutateAsync: vi.fn(), isPending: false }),
+	useDeleteSSHKey: () => ({ mutate: vi.fn() }),
+}));
+
+function localMachine(
+	overrides: Partial<MonitoringMachine> = {},
+): MonitoringMachine {
+	return {
+		id: "m1",
+		name: "This machine",
+		mode: "local",
+		enabled: true,
+		services: ["monitoring", "files", "jellyfin"],
+		host: "",
+		port: 22,
+		username: "",
+		key_directory: "",
+		key_name: "",
+		ssh_key_id: "",
+		ssh_private_key_set: false,
+		ssh_private_key_passphrase_set: false,
+		password_set: false,
+		media_root: "/mnt/media",
+		path_prefix: "",
+		jellyfin_url: "",
+		jellyfin_user_id: "",
+		jellyfin_api_key_set: false,
+		jellyseerr_url: "",
+		jellyseerr_api_key_set: false,
+		notes: "Primary node",
+		...overrides,
+	} as MonitoringMachine;
+}
+
+beforeEach(() => {
+	saveMachineMutate.mockClear();
+	deleteMachineMutate.mockClear();
+	testSSHMutate.mockClear();
+	machines = [];
+});
+
+describe("Settings", () => {
+	it("renders the machine list from the mocked store", () => {
+		machines = [localMachine()];
+		render(<Settings />);
+		// The rail row caption (mode · enabled) is unique to the selection rail.
+		expect(screen.getByText("local · Enabled")).toBeInTheDocument();
+	});
+
+	it("saves a machine via the editor dialog (controlled useState parity)", async () => {
+		machines = [localMachine()];
+		render(<Settings />);
+
+		// The detail-pane "Edit" has visible text "Edit"; the rail hover edit
+		// affordance is icon-only (aria-label "Edit") — disambiguate by text.
+		const detailEdit = screen
+			.getAllByRole("button", { name: "Edit" })
+			.find((button) => button.textContent === "Edit") as HTMLButtonElement;
+		await userEvent.click(detailEdit);
+
+		expect(screen.getByText("Edit machine")).toBeInTheDocument();
+
+		// Rename through the labeled field, then save.
+		const nameInput = screen.getByLabelText("Name");
+		await userEvent.clear(nameInput);
+		await userEvent.type(nameInput, "Worker node");
+
+		await userEvent.click(screen.getByRole("button", { name: "Save machine" }));
+
+		expect(saveMachineMutate).toHaveBeenCalledTimes(1);
+		const saved = saveMachineMutate.mock.calls[0][0];
+		expect(saved.name).toBe("Worker node");
+		expect(saved.mode).toBe("local");
+	});
+
+	it("deletes a machine through the confirm dialog", async () => {
+		machines = [localMachine()];
+		render(<Settings />);
+
+		// Detail-pane "Delete" opens the confirm dialog.
+		await userEvent.click(screen.getByRole("button", { name: "Delete" }));
+		expect(screen.getByText("Delete machine?")).toBeInTheDocument();
+
+		// Confirm (the confirm dialog's "Delete" is the last one rendered).
+		const deletes = screen.getAllByRole("button", { name: "Delete" });
+		await userEvent.click(deletes[deletes.length - 1]);
+
+		expect(deleteMachineMutate).toHaveBeenCalledTimes(1);
+		expect(deleteMachineMutate).toHaveBeenCalledWith("m1");
+	});
+});
diff --git a/openspec/changes/web-ui-rework/apply-progress.md b/openspec/changes/web-ui-rework/apply-progress.md
index fa11c6b..4a0e2ab 100644
--- a/openspec/changes/web-ui-rework/apply-progress.md
+++ b/openspec/changes/web-ui-rework/apply-progress.md
@@ -616,3 +616,151 @@ Overall change `applyState` is still reported **blocked** by the status engine
 Slice 4 migration itself — `design.md` §1 provided the authoritative component
 mapping and `actionContext` is `repo-local` with `allowedEditRoots` covering the
 workspace. Should be resolved before `sdd-verify`/archive, per the slice-3 note.
+
+## Slice 5 — Settings + Actions (form-heavy pair) — COMPLETE
+
+Migrated the two form-heavy pages off `@mui/material` onto the shadcn/Tailwind
+design system per `design.md` §1. All 5 Slice-5 tasks in `tasks.md` are now
+marked `- [x]`. **No form library introduced** — every field stays controlled
+`useState`, exactly as before.
+
+### Completed tasks (persisted checkboxes updated)
+
+- [x] **`frontend/src/pages/Actions.tsx`** — MUI-free. `Tab/Tabs` → shadcn `Tabs`/
+  `TabsList`/`TabsTrigger` (vertical orientation in the saved-actions rail);
+  `FormControl`/`InputLabel`/`Select`/`MenuItem` → shadcn `Select` family (with a
+  `NONE = "__none__"` sentinel for the empty "None" option, since Radix Select
+  disallows empty-string item values); `Divider` → `Separator`; `Dialog` family →
+  shadcn `Dialog`. Saved-task editor (shell/python `Textarea`, default-machine
+  `Select`), run-machine selection, and the recent-runs list are preserved.
+  Reuses `SelectionRailCard`, `SectionCard` (detail + empty states),
+  `HoverEditButton`, `DialogFooter`. `TextField`→`Input`+`Label` via a file-local
+  `FormField` helper.
+- [x] **`frontend/src/pages/Settings.tsx`** — MUI-free. MUI `Grid` → 12-col CSS
+  grid (`grid grid-cols-12` + `col-span-*`); `Switch` → shadcn `Switch`
+  (`onCheckedChange`); `Checkbox`+`FormControlLabel` → `Checkbox` + native
+  `<label>`/`Label` rows; `Tab` → `TabsTrigger` inside `TabbedCard`; `Select` →
+  shadcn `Select` (incl. the SSH-key picker with the `NONE` sentinel);
+  `Dialog`/`DialogTitle`/`DialogContent` → shadcn `Dialog`. Monitoring-machine CRUD
+  (rail + detail + edit dialog), SSH-key management (rail + SectionCard editor +
+  generate/save/delete), SSH test/validation feedback (status line + success/error
+  `Alert`s, exact message strings preserved incl. the protocol-banner /
+  auth-failed / generic branches), and danger-zone database reset (3 acks + typed
+  confirm phrase gating `confirmDisabled`, via the shared `ConfirmDialog`) are all
+  preserved. Reuses `SectionCard`, `SelectionRailCard`, `TabbedCard`,
+  `HoverEditButton`, `DialogFooter`, `ConfirmDialog`.
+- [x] **Form-behavior parity** — all hook usage (`useMonitoringSettings`,
+  `useSSHKeys`, `useSave*`, `useDelete*`, `useGenerateSSHKey`, `useTestMonitoringMachineSSH`,
+  `useResetLocalDatabase`, `useTasks`, `useTaskRuns`, `useRunTask`) and controlled
+  `useState` drafts are unchanged. No form library.
+- [x] **Tests** — `src/pages/__tests__/Settings.test.tsx` (renders machine list
+  from mocked store; saves a renamed machine via the editor dialog; deletes a
+  machine through the confirm dialog) and `src/pages/__tests__/Actions.test.tsx`
+  (empty state + create/save task via editor; `Run action` button disabled until a
+  run machine is selected). Hooks mocked with `vi.mock`; no live SSH needed.
+- [x] **Exit gate** — `npm run build` + `npm run lint` + `npm test` all exit 0;
+  `npm run test:node` (`node --test tests/*.test.mjs`) green (4/4). Verified
+  below.
+
+### Files changed (this slice)
+
+- `frontend/src/pages/Settings.tsx` (rewrite; MUI → shadcn/Tailwind)
+- `frontend/src/pages/Actions.tsx` (rewrite; MUI → shadcn/Tailwind)
+- `frontend/src/pages/__tests__/Settings.test.tsx` (new)
+- `frontend/src/pages/__tests__/Actions.test.tsx` (new)
+
+No other page or `components/*` file was edited (scope-clean confirmed via
+`git status`). Shared components (`SectionCard`, `SelectionRailCard`,
+`TabbedCard`, `HoverEditButton`, `ConfirmDialog`, `DialogFooter`) were reused
+unchanged.
+
+### Gate results (run from `frontend/`)
+
+| Command | Result | Notes |
+|---|---|---|
+| `npm run build` (`tsc -b && vite build`) | **pass (exit 0)** | 3313 modules; pre-existing >500 kB chunk warning only. |
+| `npm run lint` (`eslint .`) | **pass (exit 0)** | 0 errors. 2 pre-existing `react-hooks/exhaustive-deps` warnings live in `UsersPage.impl.tsx` (slice 6, out of scope). |
+| `npm test` (`vitest run`) | **pass (exit 0)** | 19 files / 39 tests, including the 5 new Settings+Actions tests. |
+| `npm run test:node` (`node --test tests/*.test.mjs`) | **pass (exit 0)** | 4/4 node suites (untouched). |
+| `grep @mui/(material\|icons-material\|x-data-grid)` over both pages | **BOTH-MUI-FREE** | Hard gate satisfied. |
+
+> Note on `node --test tests`: the literal `node --test tests` invocation in the
+> tasks.md exit-gate line mis-resolves `tests` as a module entry (`Cannot find
+> module '.../tests'`). The working command is the npm script
+> `test:node` = `node --test tests/*.test.mjs` (matches slice-1's harness), which
+> is green. `npm test` covers the component suite.
+
+### Deviations from design / notes
+
+- **`Alert` variant surface:** the shadcn `Alert` primitive only exposes
+  `default` + `destructive`. MUI `severity="info"/"success"/"warning"` map to the
+  default `Alert` and `severity="error"` maps to `destructive`. All SSH
+  validation / info / warning **message text is preserved verbatim** (behavior
+  parity); only the severity→color cue is flattened to the two available Alert
+  variants.
+- **Badge cues:** MUI `Chip variant="outlined"` → `Badge variant="outline"`; the
+  danger-zone "Destructive" chip and destructive buttons → `Badge`/`Button
+  variant="destructive"`. Status chips (enabled/disabled/service counts/run
+  status) use `outline`. No `success` cue was needed at these call sites (run
+  status is a free-text string), consistent with design §2.3.
+- **Radix Select empty value:** `NONE = "__none__"` sentinel is converted to `""`
+  at the draft boundary for both the SSH-key picker (Settings) and the
+  default-machine picker (Actions). Required because Radix Select rejects
+  empty-string item values.
+- **Hover-reveal edit affordance:** `HoverEditButton` (not editable this slice)
+  ships with a baked `opacity-0` + `rail-edit` class. Since the MUI
+  `&:hover .rail-edit` sx rules are gone, each rail row now carries a Tailwind
+  `group` + arbitrary-variant `group-hover:[&_.rail-edit]:opacity-100` to restore
+  the hover-reveal (verified the utility is generated by the Tailwind v4 build).
+- **Dialog widths:** MUI `maxWidth` → `sm:max-w-4xl` (machine editor), `sm:max-w-2xl`
+  (task editor), `sm:max-w-md` (danger-zone reset). A `DialogDescription` was
+  added to each shadcn dialog (a11y + avoids the Radix "missing description" dev
+  warning) without changing behavior.
+
+### SSH-validation / form behavior worth flagging
+
+- The `validateMachineSSH` flow, its `try/catch`, the `known_hosts_updated` →
+  status-string branch, and the three lowered-message status branches
+  (protocol-banner / auth-failed / generic) are byte-for-byte preserved.
+- `saveMachineDraft` still clears SSH validation, awaits `mutateAsync`, then closes
+  the dialog and resets the draft to `emptyMachine(mode)`.
+- The danger-zone reset `canSubmit` gate (exact phrase match + all 3 acks) is
+  preserved and wired to `DialogFooter.confirmDisabled`.
+
+### Remaining tasks (exact unchecked `- [ ]` lines)
+
+All Slice-5 lines are `[x]`. The remaining 28 unchecked lines are Slice 6
+(Users: table/drawer/compose + 9 lucide icons), Slice 7 (`DataTable` + Media +
+FileBrowser off `@mui/x-data-grid`), and Slice 8 (package.json cleanup + grep
+gates + `docs/REQUIREMENTS.md`). No slice-5 work remains.
+
+### Workload / PR boundary
+
+Single slice, under the 400-line added budget: ~1097 insertions / ~1337 deletions
+across the two page rewrites (net −240 — the migration is more compact) + 2 new
+test files (~150 lines). The parent owns the commit/PR; nothing committed here.
+
+### Top risk for slice 6
+
+**`UsersPage.impl.tsx`** is the largest consumer (25 MUI components + 9
+`@mui/icons-material` icons + `Drawer`→`Sheet` + rich-text compose with
+file attachments + selection-across-pagination). Per `design.md` §8 it has a
+**high sub-split likelihood**; expect a 6a (directory table + selection + drawer)
+→ 6b (compose dialog + formatting actions + attachments) split to stay ≤400
+lines. The icon-name pin (`Close→X`, `AttachFile→Paperclip`, `FormatBold→Bold`,
+`FormatItalic→Italic`, `Link→Link`, `FormatListBulleted→List`, `MailOutlined→Mail`,
+`Send→Send`, `DeleteOutlined→Trash2`) must be verified at the lucide-react
+`^1.14.0` pin before authoring. Selection-across-pagination semantics
+(`selectedUserIds` surviving paging/filtering) and the rich-text compose behavior
+(queue-status polling + `FormData` attachments + `useSendUserMessage`) are the
+behavior-parity surfaces to guard.
+
+### Structured status note
+
+Overall change `applyState` remains **blocked** per the status engine (domain
+specs missing/partial; legacy flat `spec.md`). This is a planning-completeness
+gap only — `design.md` §1 supplied the authoritative MUI→shadcn mapping and
+`actionContext` is `repo-local` with `allowedEditRoots: ["/home/user/Manage_01"]`.
+The parent explicitly delegated Slice 5 with a clear scope/delivery path, so this
+slice proceeded under that delegation. Should be resolved before
+`sdd-verify`/archive, per the slice-3/slice-4 notes.
diff --git a/openspec/changes/web-ui-rework/tasks.md b/openspec/changes/web-ui-rework/tasks.md
index afcb25b..4369c0a 100644
--- a/openspec/changes/web-ui-rework/tasks.md
+++ b/openspec/changes/web-ui-rework/tasks.md
@@ -176,11 +176,11 @@ Each slice section restates this gate as its final task.
 > ~350–500 lines, medium-high. Depends on slice 2. Keep uncontrolled/`useState` form
 > parity — NO form library. Split 5a (Actions) → 5b (Settings) if over 400.
 
-- [ ] Migrate `frontend/src/pages/Actions.tsx` (19 MUI components incl. Tab/Tabs/Select/MenuItem/FormControl/InputLabel/Divider/Dialog → shadcn `Tabs`/`Select`/`Separator`/`Dialog`; saved-task editor, machine selection, run history preserved).
-- [ ] Migrate `frontend/src/pages/Settings.tsx` (18 MUI components incl. Grid/Switch/Checkbox/FormControlLabel/Tab/Select/Dialog → CSS grid/`Switch`/`Checkbox`/`Label`/`Tabs`/`Select`/`Dialog`; monitoring-machine CRUD, SSH-key management, SSH test/validation feedback, danger-zone reset, tabbed UI preserved).
-- [ ] Keep all current form behaviors (controlled `useState`, SSH validation messages, ConfirmDialog integration from slice 2) — no form-library introduction.
-- [ ] Add component tests for the migrated Settings (machine save/delete confirm) and Actions (save/run task) where behavior is exercisable without live SSH.
-- [ ] **Exit gate:** Settings + Actions MUI-free; forms behave as before; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green.
+- [x] Migrate `frontend/src/pages/Actions.tsx` (19 MUI components incl. Tab/Tabs/Select/MenuItem/FormControl/InputLabel/Divider/Dialog → shadcn `Tabs`/`Select`/`Separator`/`Dialog`; saved-task editor, machine selection, run history preserved).
+- [x] Migrate `frontend/src/pages/Settings.tsx` (18 MUI components incl. Grid/Switch/Checkbox/FormControlLabel/Tab/Select/Dialog → CSS grid/`Switch`/`Checkbox`/`Label`/`Tabs`/`Select`/`Dialog`; monitoring-machine CRUD, SSH-key management, SSH test/validation feedback, danger-zone reset, tabbed UI preserved).
+- [x] Keep all current form behaviors (controlled `useState`, SSH validation messages, ConfirmDialog integration from slice 2) — no form-library introduction.
+- [x] Add component tests for the migrated Settings (machine save/delete confirm) and Actions (save/run task) where behavior is exercisable without live SSH.
+- [x] **Exit gate:** Settings + Actions MUI-free; forms behave as before; `npm run build` + `npm run lint` + `npm test` + `node --test tests` green.
 
 ---