chore: general cleanup/pr improvements

app/layouts/shell.tsx

@@ -47,9 +47,8 @@ export async function loader({ request, context }: Route.LoaderArgs) {
       configAvailable: context.hs.readable(),
       debug: context.config.debug,
       user: session.user,
-      uiAccess: check,
       access: {
-        ui: await context.sessions.check(request, Capabilities.ui_access),
+        ui: check,
         dns: await context.sessions.check(request, Capabilities.read_network),
         users: await context.sessions.check(request, Capabilities.read_users),
         policy: await context.sessions.check(request, Capabilities.read_policy),

app/routes/auth/pending-approval.tsx

@@ -1,10 +1,8 @@
-import { eq } from "drizzle-orm";
 import { ClockIcon, LogOut, RefreshCw, UserCheck } from "lucide-react";
 import { Form, redirect } from "react-router";
 
 import Button from "~/components/Button";
 import Card from "~/components/Card";
-import { users } from "~/server/db/schema";
 import { Capabilities } from "~/server/web/roles";
 import toast from "~/utils/toast";
 
@@ -24,18 +22,11 @@ export async function loader({ request, context }: Route.LoaderArgs) {
       return redirect("/machines");
     }
 
-    const [user] = await context.db
-      .select()
-      .from(users)
-      .where(eq(users.sub, session.user.subject))
-      .limit(1);
-
     const url = context.config.headscale.public_url ?? context.config.headscale.url;
 
     return {
       user: session.user,
       url,
-      exists: !!user,
     };
   } catch {
     return redirect("/login", {

app/routes/machines/components/machine-row.tsx

@@ -2,8 +2,6 @@ import { ChevronDown, Copy } from "lucide-react";
 import { useMemo } from "react";
 import { Link } from "react-router";
 
-import type { User } from "~/types";
-
 import Chip from "~/components/Chip";
 import Menu from "~/components/Menu";
 import StatusCircle from "~/components/StatusCircle";
@@ -12,11 +10,13 @@ import { ExpiryTag } from "~/components/tags/Expiry";
 import { HeadplaneAgentTag } from "~/components/tags/HeadplaneAgent";
 import { SubnetTag } from "~/components/tags/Subnet";
 import { TailscaleSSHTag } from "~/components/tags/TailscaleSSH";
+import type { User } from "~/types";
 import cn from "~/utils/cn";
 import * as hinfo from "~/utils/host-info";
 import { PopulatedNode } from "~/utils/node-info";
 import { formatTimeDelta } from "~/utils/time";
 import toast from "~/utils/toast";
+import { getUserDisplayName } from "~/utils/user";
 
 import MenuOptions from "./menu";
 
@@ -63,9 +63,7 @@ export default function MachineRow({
             {node.givenName}
           </p>
           <p className="text-sm opacity-50">
-            {node.user
-              ? node.user.name || node.user.displayName || node.user.email || node.user.id
-              : "Tag-owned"}
+            {node.user ? getUserDisplayName(node.user) : "Tag-owned"}
           </p>
           <div className="mt-1.5 flex flex-wrap gap-1">
             {mapTagsToComponents(node, uiTags)}

app/routes/machines/dialogs/move.tsx

@@ -1,9 +1,9 @@
 import { Key, useState } from "react";
 
-import type { Machine, User } from "~/types";
-
 import Dialog from "~/components/Dialog";
 import Select from "~/components/Select";
+import type { Machine, User } from "~/types";
+import { getUserDisplayName } from "~/utils/user";
 
 interface MoveProps {
   machine: Machine;
@@ -34,9 +34,7 @@ export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
           placeholder="Select a user"
         >
           {users.map((user) => (
-            <Select.Item key={user.id}>
-              {user.name || user.displayName || user.email || user.id}
-            </Select.Item>
+            <Select.Item key={user.id}>{getUserDisplayName(user)}</Select.Item>
           ))}
         </Select>
       </Dialog.Panel>

app/routes/machines/dialogs/new.tsx

@@ -1,92 +1,86 @@
-import { Computer, FileKey2 } from 'lucide-react';
-import { useState } from 'react';
-import { useNavigate } from 'react-router';
-import Code from '~/components/Code';
-import Dialog from '~/components/Dialog';
-import Input from '~/components/Input';
-import Menu from '~/components/Menu';
-import Select from '~/components/Select';
-import type { User } from '~/types';
+import { Computer, FileKey2 } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+
+import Code from "~/components/Code";
+import Dialog from "~/components/Dialog";
+import Input from "~/components/Input";
+import Menu from "~/components/Menu";
+import Select from "~/components/Select";
+import type { User } from "~/types";
+import { getUserDisplayName } from "~/utils/user";
 
 export interface NewMachineProps {
-	server: string;
-	users: User[];
-	isDisabled?: boolean;
-	disabledKeys?: string[];
+  server: string;
+  users: User[];
+  isDisabled?: boolean;
+  disabledKeys?: string[];
 }
 
 export default function NewMachine(data: NewMachineProps) {
-	const [pushDialog, setPushDialog] = useState(false);
-	const [mkey, setMkey] = useState('');
-	const navigate = useNavigate();
+  const [pushDialog, setPushDialog] = useState(false);
+  const [mkey, setMkey] = useState("");
+  const navigate = useNavigate();
 
-	const isMkeyInvalid = mkey.length > 0 && mkey.length !== 24;
+  const isMkeyInvalid = mkey.length > 0 && mkey.length !== 24;
 
-	return (
-		<>
-			<Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
-				<Dialog.Panel isDisabled={mkey.length !== 24}>
-					<Dialog.Title>Register Machine Key</Dialog.Title>
-					<Dialog.Text className="mb-4">
-						The machine key is given when you run{' '}
-						<Code isCopyable>tailscale up --login-server={data.server}</Code> on
-						your device.
-					</Dialog.Text>
-					<input name="action_id" type="hidden" value="register" />
-					<Input
-						errorMessage="Machine key must be exactly 24 characters"
-						isInvalid={isMkeyInvalid}
-						isRequired
-						label="Machine Key"
-						name="register_key"
-						onChange={setMkey}
-						placeholder="AbCd..."
-						validationBehavior="native"
-					/>
-					<Select
-						isRequired
-						label="Owner"
-						name="user"
-						placeholder="Select a user"
-					>
-						{data.users.map((user) => (
-							<Select.Item key={user.id}>
-								{user.name || user.displayName || user.email || user.id}
-							</Select.Item>
-						))}
-					</Select>
-				</Dialog.Panel>
-			</Dialog>
-			<Menu disabledKeys={data.disabledKeys} isDisabled={data.isDisabled}>
-				<Menu.Button variant="heavy">Add Device</Menu.Button>
-				<Menu.Panel
-					onAction={(key) => {
-						if (key === 'register') {
-							setPushDialog(true);
-							return;
-						}
+  return (
+    <>
+      <Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
+        <Dialog.Panel isDisabled={mkey.length !== 24}>
+          <Dialog.Title>Register Machine Key</Dialog.Title>
+          <Dialog.Text className="mb-4">
+            The machine key is given when you run{" "}
+            <Code isCopyable>tailscale up --login-server={data.server}</Code> on your device.
+          </Dialog.Text>
+          <input name="action_id" type="hidden" value="register" />
+          <Input
+            errorMessage="Machine key must be exactly 24 characters"
+            isInvalid={isMkeyInvalid}
+            isRequired
+            label="Machine Key"
+            name="register_key"
+            onChange={setMkey}
+            placeholder="AbCd..."
+            validationBehavior="native"
+          />
+          <Select isRequired label="Owner" name="user" placeholder="Select a user">
+            {data.users.map((user) => (
+              <Select.Item key={user.id}>{getUserDisplayName(user)}</Select.Item>
+            ))}
+          </Select>
+        </Dialog.Panel>
+      </Dialog>
+      <Menu disabledKeys={data.disabledKeys} isDisabled={data.isDisabled}>
+        <Menu.Button variant="heavy">Add Device</Menu.Button>
+        <Menu.Panel
+          onAction={(key) => {
+            if (key === "register") {
+              setPushDialog(true);
+              return;
+            }
 
-						if (key === 'pre-auth') {
-							navigate('/settings/auth-keys');
-						}
-					}}
-				>
-					<Menu.Section>
-						<Menu.Item key="register" textValue="Register Machine Key">
-							<div className="flex items-center gap-x-3">
-								<Computer className="w-4" />
-								Register Machine Key
-							</div>
-						</Menu.Item>
-						<Menu.Item key="pre-auth" textValue="Generate Pre-auth Key">
-							<div className="flex items-center gap-x-3">
-								<FileKey2 className="w-4" />
-								Generate Pre-auth Key
-							</div>
-						</Menu.Item>
-					</Menu.Section>
-				</Menu.Panel>
-			</Menu>
-		</>
-	);
+            if (key === "pre-auth") {
+              navigate("/settings/auth-keys");
+            }
+          }}
+        >
+          <Menu.Section>
+            <Menu.Item key="register" textValue="Register Machine Key">
+              <div className="flex items-center gap-x-3">
+                <Computer className="w-4" />
+                Register Machine Key
+              </div>
+            </Menu.Item>
+            <Menu.Item key="pre-auth" textValue="Generate Pre-auth Key">
+              <div className="flex items-center gap-x-3">
+                <FileKey2 className="w-4" />
+                Generate Pre-auth Key
+              </div>
+            </Menu.Item>
+          </Menu.Section>
+        </Menu.Panel>
+      </Menu>
+    </>
+  );
 }

app/routes/machines/machine-actions.ts

@@ -60,9 +60,10 @@ export async function machineAction({ request, context }: Route.ActionArgs) {
     });
   }
 
-  // Tag-only nodes (Headscale 0.28+) have no user, so we rely on role-based permissions
+  // Tag-only nodes (Headscale 0.28+) have no user — only role-based permissions apply
   const nodeOwnerId = node.user?.providerId?.split("/").pop();
-  if (nodeOwnerId !== session.user.subject && !check) {
+  const isOwner = nodeOwnerId !== undefined && nodeOwnerId === session.user.subject;
+  if (!isOwner && !check) {
     throw data("You do not have permission to act on this machine", {
       status: 403,
     });

app/routes/machines/machine.tsx

@@ -12,9 +12,9 @@ import Tooltip from "~/components/Tooltip";
 import cn from "~/utils/cn";
 import { getOSInfo, getTSVersion } from "~/utils/host-info";
 import { mapNodes, sortNodeTags } from "~/utils/node-info";
+import { getUserDisplayName } from "~/utils/user";
 
 import type { Route } from "./+types/machine";
-
 import { mapTagsToComponents, uiTagsForNode } from "./components/machine-row";
 import MenuOptions from "./components/menu";
 import Routes from "./dialogs/routes";
@@ -109,9 +109,7 @@ export default function Page({
           </span>
           <div className="mt-1 flex items-center gap-x-2.5">
             <UserCircle />
-            {node.user
-              ? node.user.name || node.user.displayName || node.user.email || node.user.id
-              : "Tag-owned"}
+            {node.user ? getUserDisplayName(node.user) : "Tag-owned"}
           </div>
         </div>
         <div className="p-2 pl-4">
@@ -243,11 +241,7 @@ export default function Page({
         <div className="flex flex-col gap-1">
           <Attribute
             name="Creator"
-            value={
-              node.user
-                ? node.user.name || node.user.displayName || node.user.email || node.user.id
-                : "Tag-owned"
-            }
+            value={node.user ? getUserDisplayName(node.user) : "Tag-owned"}
           />
           <Attribute name="Machine name" value={node.givenName} />
           <Attribute

app/routes/settings/auth-keys/actions.ts

@@ -17,6 +17,20 @@ export async function authKeysAction({ request, context }: Route.ActionArgs) {
     });
   }
 
+  async function checkSelfServiceOwnership(userId: string) {
+    if (canGenerateAny || !canGenerateOwn) return;
+    const [targetUser] = await api.getUsers(userId);
+    if (!targetUser) {
+      throw data("User not found.", { status: 404 });
+    }
+    const targetSubject = targetUser.providerId?.split("/").pop();
+    if (targetSubject !== session.user.subject) {
+      throw data("You do not have permission to manage this user's pre-auth keys", {
+        status: 403,
+      });
+    }
+  }
+
   const formData = await request.formData();
   const action = formData.get("action_id")?.toString();
   if (!action) {
@@ -40,18 +54,8 @@ export async function authKeysAction({ request, context }: Route.ActionArgs) {
         });
       }
 
-      // Only allow self-service users to create keys for themselves
-      if (!canGenerateAny && canGenerateOwn && user) {
-        const [targetUser] = await api.getUsers(user);
-        if (!targetUser) {
-          return data("User not found.", { status: 404 });
-        }
-        const targetSubject = targetUser.providerId?.split("/").pop();
-        if (targetSubject !== session.user.subject) {
-          throw data("You can only create pre-auth keys for your own user", {
-            status: 403,
-          });
-        }
+      if (user) {
+        await checkSelfServiceOwnership(user);
       }
 
       const expiry = formData.get("expiry")?.toString();
@@ -104,19 +108,7 @@ export async function authKeysAction({ request, context }: Route.ActionArgs) {
         });
       }
 
-      // Only allow self-service users to expire their own keys
-      if (!canGenerateAny && canGenerateOwn) {
-        const [targetUser] = await api.getUsers(user);
-        if (!targetUser) {
-          return data("User not found.", { status: 404 });
-        }
-        const targetSubject = targetUser.providerId?.split("/").pop();
-        if (targetSubject !== session.user.subject) {
-          throw data("You can only expire pre-auth keys for your own user", {
-            status: 403,
-          });
-        }
-      }
+      await checkSelfServiceOwnership(user);
 
       await api.expirePreAuthKey(user, key);
       return data("Pre-auth key expired");

app/routes/settings/auth-keys/auth-key-row.tsx

@@ -1,6 +1,6 @@
-import type { PreAuthKey, User } from "~/types";
-
 import Attribute from "~/components/Attribute";
+import type { PreAuthKey, User } from "~/types";
+import { getUserDisplayName } from "~/utils/user";
 
 import ExpireAuthKey from "./dialogs/expire-auth-key";
 
@@ -14,7 +14,7 @@ export default function AuthKeyRow({ authKey, user }: Props) {
   const expiration = new Date(authKey.expiration).toLocaleString();
   const isExpired =
     (authKey.used && !authKey.reusable) || new Date(authKey.expiration) < new Date();
-  const userDisplay = user ? user.name || user.displayName || user.email || user.id : "(Tag Only)";
+  const userDisplay = user ? getUserDisplayName(user) : "(Tag Only)";
 
   return (
     <div className="w-full">

app/routes/settings/auth-keys/dialogs/add-auth-key.tsx

@@ -1,8 +1,6 @@
 import { Key, useEffect, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 
-import type { User } from "~/types";
-
 import Button from "~/components/Button";
 import Code from "~/components/Code";
 import Dialog from "~/components/Dialog";
@@ -11,7 +9,9 @@ import Link from "~/components/Link";
 import NumberInput from "~/components/NumberInput";
 import Select from "~/components/Select";
 import Switch from "~/components/Switch";
+import type { User } from "~/types";
 import toast from "~/utils/toast";
+import { getUserDisplayName } from "~/utils/user";
 
 interface AddAuthKeyProps {
   users: User[];
@@ -152,9 +152,7 @@ export default function AddAuthKey({
               selectedKey={userId}
             >
               {availableUsers.map((user) => (
-                <Select.Item key={user.id}>
-                  {user.name || user.displayName || user.email || user.id}
-                </Select.Item>
+                <Select.Item key={user.id}>{getUserDisplayName(user)}</Select.Item>
               ))}
             </Select>
           )}

app/routes/settings/auth-keys/overview.tsx

@@ -2,20 +2,18 @@ import { FileKey2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Link as RemixLink } from "react-router";
 
-import type { PreAuthKey } from "~/types";
-import type { User } from "~/types/User";
-
 import Code from "~/components/Code";
 import Link from "~/components/Link";
 import Notice from "~/components/Notice";
 import Select from "~/components/Select";
 import TableList from "~/components/TableList";
 import { Capabilities } from "~/server/web/roles";
+import type { PreAuthKey } from "~/types";
+import type { User } from "~/types/User";
 import log from "~/utils/log";
-import { filterUsersWithValidIds, getUserDisplayName } from "~/utils/user";
+import { getUserDisplayName } from "~/utils/user";
 
 import type { Route } from "./+types/overview";
-
 import { authKeysAction } from "./actions";
 import AuthKeyRow from "./auth-key-row";
 import AddAuthKey from "./dialogs/add-auth-key";
@@ -63,15 +61,17 @@ export async function loader({ request, context }: Route.LoaderArgs) {
       | { success: false; user: User; error: unknown; preAuthKeys: [] };
 
     const results: FetchResult[] = await Promise.all(
-      filterUsersWithValidIds(users).map(async (user) => {
-        try {
-          const preAuthKeys = await api.getPreAuthKeys(user.id);
-          return { success: true as const, user, preAuthKeys };
-        } catch (error) {
-          log.error("api", "GET /v1/preauthkey for %s: %o", user.name, error);
-          return { success: false as const, user, error, preAuthKeys: [] as const };
-        }
-      }),
+      users
+        .filter((u) => u.id?.length > 0)
+        .map(async (user) => {
+          try {
+            const preAuthKeys = await api.getPreAuthKeys(user.id);
+            return { success: true as const, user, preAuthKeys };
+          } catch (error) {
+            log.error("api", "GET /v1/preauthkey for %s: %o", user.name, error);
+            return { success: false as const, user, error, preAuthKeys: [] as const };
+          }
+        }),
     );
 
     keys = results

app/utils/user.ts

@@ -1,11 +1,5 @@
 import type { User } from "~/types/User";
 
-// Filter users with valid IDs (OIDC users may not have a name)
-export function filterUsersWithValidIds(users: User[]): User[] {
-  return users.filter((user) => user.id?.length > 0);
-}
-
-// Get display name with fallback: name -> displayName -> email -> id
 export function getUserDisplayName(user: User): string {
   return user.name || user.displayName || user.email || user.id;
 }