ui(machines): breadcrumbs show hostname; remove dev debug footer from sidebar; prep list search virtualization via name

src/app/admin/machines/[id]/page.tsx

@@ -1,18 +1,30 @@
+"use client"
+
 import Link from "next/link"
+import { useMemo } from "react"
+import { useQuery } from "convex/react"
+import type { Id } from "@/convex/_generated/dataModel"
 import { AppShell } from "@/components/app-shell"
 import { SiteHeader } from "@/components/site-header"
 import { DEFAULT_TENANT_ID } from "@/lib/constants"
 import { AdminMachineDetailsClient } from "@/components/admin/machines/admin-machine-details.client"
+import { api } from "@/convex/_generated/api"
+import { useAuth } from "@/lib/auth-client"
 
 export const runtime = "nodejs"
 export const dynamic = "force-dynamic"
 
 export default function AdminMachineDetailsPage({ params }: { params: { id: string } }) {
   const { id } = params
+  const { convexUserId } = useAuth()
+  const machines = useQuery(
+    convexUserId ? api.machines.listByTenant : "skip",
+    convexUserId ? { tenantId: DEFAULT_TENANT_ID, includeMetadata: false } : ("skip" as const)
+  ) as Array<{ _id: Id<"machines">; hostname: string }> | undefined
+  const hostname = useMemo(() => machines?.find((m) => m._id === (id as unknown as Id<"machines">))?.hostname ?? "Hostname", [machines, id])
+
   return (
-    <AppShell
+    <AppShell header={<SiteHeader title="Detalhe da máquina" lead="Inventário e métricas da máquina selecionada." />}>
-      header={<SiteHeader title="Detalhe da máquina" lead="Inventário e métricas da máquina selecionada." />}
-    >
       <div className="mx-auto w-full max-w-6xl px-4 pb-12 lg:px-6">
         <nav className="mb-4 text-sm text-neutral-600">
           <ol className="flex items-center gap-2">
@@ -20,7 +32,7 @@ export default function AdminMachineDetailsPage({ params }: { params: { id: stri
               <Link href="/admin/machines" className="underline-offset-4 hover:underline">Máquinas</Link>
             </li>
             <li className="text-neutral-400">/</li>
-            <li className="text-neutral-800">Detalhe</li>
+            <li className="text-neutral-800">{hostname}</li>
           </ol>
         </nav>
         <AdminMachineDetailsClient tenantId={DEFAULT_TENANT_ID} machineId={id} />

src/components/app-sidebar.tsx

@@ -214,30 +214,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             }}
           />
         )}
-        {process.env.NODE_ENV !== "production" ? (
+        {/* Dev debug removido */}
-          <div className="mt-3 rounded-lg border border-dashed border-slate-300 bg-slate-50 p-2 text-[11px] text-slate-700">
-            <div className="flex items-center justify-between">
-              <span className="font-semibold">Dev</span>
-              <span className="rounded-full border border-slate-300 bg-white px-2 py-[2px]">{isStaff ? "staff" : "guest"}</span>
-            </div>
-            <div className="mt-1 grid gap-[2px]">
-              <div>
-                <span className="text-slate-500">role: </span>
-                <span className="font-mono">{(session?.user as any)?.role ?? "(none)"}</span>
-              </div>
-              <div className="truncate">
-                <span className="text-slate-500">convexUserId: </span>
-                <span className="font-mono">{convexUserId ?? "(null)"}</span>
-              </div>
-              {process.env.NEXT_PUBLIC_CONVEX_URL ? (
-                <div className="truncate">
-                  <span className="text-slate-500">convex: </span>
-                  <span className="font-mono">{process.env.NEXT_PUBLIC_CONVEX_URL}</span>
-                </div>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>