fmt + add and wire observation retention

what ever new thing could add stuff in CONTEXT.md and docs/adr/ hmmmmmmmmmmmmmmmmmmmmmm

ui/src/pages/AlertsPage.tsx

@@ -72,7 +72,10 @@ export function AlertsPage({ alerts, transitions, onRefresh }: Props) {
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="grid gap-2 sm:grid-cols-3">
-            <label htmlFor="alert-severity" className="grid gap-1 text-sm text-muted-foreground">
+            <label
+              htmlFor="alert-severity"
+              className="grid gap-1 text-sm text-muted-foreground"
+            >
               Severity
               <Select
                 value={severity}
@@ -93,7 +96,10 @@ export function AlertsPage({ alerts, transitions, onRefresh }: Props) {
               </Select>
             </label>
 
-            <label htmlFor="alert-status" className="grid gap-1 text-sm text-muted-foreground">
+            <label
+              htmlFor="alert-status"
+              className="grid gap-1 text-sm text-muted-foreground"
+            >
               Status
               <Select
                 value={status}
@@ -114,7 +120,10 @@ export function AlertsPage({ alerts, transitions, onRefresh }: Props) {
               </Select>
             </label>
 
-            <label htmlFor="alert-kind" className="grid gap-1 text-sm text-muted-foreground">
+            <label
+              htmlFor="alert-kind"
+              className="grid gap-1 text-sm text-muted-foreground"
+            >
               Kind
               <Select
                 value={kind}
@@ -170,7 +179,10 @@ export function AlertsPage({ alerts, transitions, onRefresh }: Props) {
           </span>
         </CardHeader>
         <CardContent className="space-y-2">
-          <label htmlFor="alert-transition-search" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="alert-transition-search"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             Search
             <Input
               id="alert-transition-search"

ui/src/pages/AuditPage.tsx

@@ -70,7 +70,10 @@ export function AuditPage({ events, onRefresh }: Props) {
 
       <CardContent className="space-y-3">
         <div className="grid gap-2 sm:grid-cols-3">
-          <label htmlFor="audit-event-type" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="audit-event-type"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             Event type
             <Select
               value={eventType}
@@ -91,7 +94,10 @@ export function AuditPage({ events, onRefresh }: Props) {
             </Select>
           </label>
 
-          <label htmlFor="audit-outcome" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="audit-outcome"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             Outcome
             <Select
               value={outcome}
@@ -112,7 +118,10 @@ export function AuditPage({ events, onRefresh }: Props) {
             </Select>
           </label>
 
-          <label htmlFor="audit-search" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="audit-search"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             Search
             <Input
               id="audit-search"

ui/src/pages/CommandsPage.tsx

@@ -71,7 +71,10 @@ export function CommandsPage({
       </CardHeader>
       <CardContent>
         <form className="grid gap-3" onSubmit={submit}>
-          <label htmlFor="cmd-agent" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="cmd-agent"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             <span>Agent</span>
             <AgentSelector
               agents={agents}
@@ -80,7 +83,10 @@ export function CommandsPage({
             />
           </label>
 
-          <label htmlFor="cmd-kind" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="cmd-kind"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             <span>Command</span>
             <Select
               value={kind}
@@ -98,7 +104,10 @@ export function CommandsPage({
             </Select>
           </label>
 
-          <label htmlFor="cmd-query" className="grid gap-1 text-sm text-muted-foreground">
+          <label
+            htmlFor="cmd-query"
+            className="grid gap-1 text-sm text-muted-foreground"
+          >
             <span>Query</span>
             <Input
               id="cmd-query"

ui/src/pages/DevicesPage.tsx

@@ -225,7 +225,10 @@ export function DevicesPage({ agents, onAfterWake, onRefresh }: Props) {
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="grid gap-2 lg:grid-cols-[minmax(16rem,1fr)_11rem_10rem_14rem_10rem]">
-            <label htmlFor="fleet-search" className="grid gap-1 text-sm text-muted-foreground">
+            <label
+              htmlFor="fleet-search"
+              className="grid gap-1 text-sm text-muted-foreground"
+            >
               <span>Search</span>
               <div className="relative">
                 <Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
@@ -250,7 +253,10 @@ export function DevicesPage({ agents, onAfterWake, onRefresh }: Props) {
               values={knownFilters}
               onChange={(value) => setKnown(value as KnownFilter)}
             />
-            <label htmlFor="fleet-agent" className="grid gap-1 text-sm text-muted-foreground">
+            <label
+              htmlFor="fleet-agent"
+              className="grid gap-1 text-sm text-muted-foreground"
+            >
               <span>Agent</span>
               <Select
                 value={agentId}

ui/src/pages/TokensPage.tsx

@@ -219,7 +219,10 @@ export function TokensPage() {
                 </Button>
               </div>
               {useCustom && (
-                <label htmlFor="token-custom-ttl" className="mt-2 grid gap-1 text-sm text-muted-foreground">
+                <label
+                  htmlFor="token-custom-ttl"
+                  className="mt-2 grid gap-1 text-sm text-muted-foreground"
+                >
                   <span>TTL (seconds)</span>
                   <Input
                     id="token-custom-ttl"

ui/src/pages/WakeToolsPage.tsx

@@ -101,7 +101,10 @@ export function WakeToolsPage({
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <label htmlFor="wake-agent" className="grid gap-1.5 text-sm text-muted-foreground">
+          <label
+            htmlFor="wake-agent"
+            className="grid gap-1.5 text-sm text-muted-foreground"
+          >
             <span>Agent</span>
             <AgentSelector
               agents={agents}
@@ -111,7 +114,10 @@ export function WakeToolsPage({
           </label>
 
           <form onSubmit={handleWake} className="grid gap-3">
-            <label htmlFor="wake-target" className="grid gap-1.5 text-sm text-muted-foreground">
+            <label
+              htmlFor="wake-target"
+              className="grid gap-1.5 text-sm text-muted-foreground"
+            >
               <span>Target</span>
               <Input
                 id="wake-target"

ui/src/pages/fleet/FleetDeviceDetailsDialog.tsx

@@ -54,7 +54,9 @@ export function FleetDeviceDetailsDialog({
 }: Props) {
   const [displayName, setDisplayName] = useState(device?.display_name ?? "");
   const [targetDeviceId, setTargetDeviceId] = useState("");
-  const [routeId, setRouteId] = useState(device?.recommended_route?.route_id ?? "");
+  const [routeId, setRouteId] = useState(
+    device?.recommended_route?.route_id ?? "",
+  );
   const [addKind, setAddKind] = useState<"mac" | "ip">("mac");
   const [addValue, setAddValue] = useState("");
   const [error, setError] = useState("");