fix(machines): hydrate company name without slug flash

convex/machines.ts

@@ -740,6 +740,20 @@ export const listByTenant = query({
     const includeMetadata = Boolean(args.includeMetadata)
     const now = Date.now()
 
+    const tenantCompanies = await ctx.db
+      .query("companies")
+      .withIndex("by_tenant", (q) => q.eq("tenantId", tenantId))
+      .collect()
+
+    const companyById = new Map<string, typeof tenantCompanies[number]>()
+    const companyBySlug = new Map<string, typeof tenantCompanies[number]>()
+    for (const company of tenantCompanies) {
+      companyById.set(company._id, company)
+      if (company.slug) {
+        companyBySlug.set(company.slug, company)
+      }
+    }
+
     const machines = await ctx.db
       .query("machines")
       .withIndex("by_tenant", (q) => q.eq("tenantId", tenantId))
@@ -807,12 +821,17 @@ export const listByTenant = query({
           })
         ).then((arr) => arr.filter(Boolean) as Array<{ id: string; email: string; name: string }>)
 
+        const companyFromId = machine.companyId ? companyById.get(machine.companyId) ?? null : null
+        const companyFromSlug = machine.companySlug ? companyBySlug.get(machine.companySlug) ?? null : null
+        const resolvedCompany = companyFromId ?? companyFromSlug
+
         return {
           id: machine._id,
           tenantId: machine.tenantId,
           hostname: machine.hostname,
           companyId: machine.companyId ?? null,
-          companySlug: machine.companySlug ?? null,
+          companySlug: machine.companySlug ?? companyFromId?.slug ?? companyFromSlug?.slug ?? null,
+          companyName: resolvedCompany?.name ?? null,
           osName: machine.osName,
           osVersion: machine.osVersion ?? null,
           architecture: machine.architecture ?? null,
@@ -862,6 +881,17 @@ export const getById = query({
     const machine = await ctx.db.get(args.id)
     if (!machine) return null
 
+    const companyFromId = machine.companyId ? await ctx.db.get(machine.companyId) : null
+    const machineSlug = machine.companySlug ?? null
+    let companyFromSlug: typeof companyFromId | null = null
+    if (!companyFromId && machineSlug) {
+      companyFromSlug = await ctx.db
+        .query("companies")
+        .withIndex("by_tenant_slug", (q) => q.eq("tenantId", machine.tenantId).eq("slug", machineSlug))
+        .unique()
+    }
+    const resolvedCompany = companyFromId ?? companyFromSlug
+
     const tokens = await ctx.db
       .query("machineTokens")
       .withIndex("by_machine", (q) => q.eq("machineId", machine._id))
@@ -925,7 +955,8 @@ export const getById = query({
       tenantId: machine.tenantId,
       hostname: machine.hostname,
       companyId: machine.companyId ?? null,
-      companySlug: machine.companySlug ?? null,
+      companySlug: machine.companySlug ?? resolvedCompany?.slug ?? null,
+      companyName: resolvedCompany?.name ?? null,
       osName: machine.osName,
       osVersion: machine.osVersion ?? null,
       architecture: machine.architecture ?? null,

src/components/admin/machines/admin-machines-overview.tsx

@@ -696,6 +696,7 @@ export type MachinesQueryItem = {
   hostname: string
   companyId: string | null
   companySlug: string | null
+  companyName: string | null
   osName: string | null
   osVersion: string | null
   architecture: string | null
@@ -1059,11 +1060,35 @@ export function AdminMachinesOverview({ tenantId, initialCompanyFilterSlug = "al
   ) as Array<{ id: string; name: string; slug?: string }> | undefined
   const companyNameBySlug = useMemo(() => {
     const map = new Map<string, string>()
-    ;(companies ?? []).forEach((c) => c.slug && map.set(c.slug, c.name))
+    machines.forEach((m) => {
+      if (m.companySlug && m.companyName) {
+        map.set(m.companySlug, m.companyName)
+      }
+    })
+    ;(companies ?? []).forEach((c) => {
+      if (c.slug) {
+        map.set(c.slug, c.name)
+      }
+    })
     return map
-  }, [companies])
+  }, [machines, companies])
 
-  const companyOptions = useMemo(() => (companies ?? []).map((c) => ({ slug: c.slug ?? c.id, name: c.name })).sort((a,b)=>a.name.localeCompare(b.name,"pt-BR")), [companies])
+  const companyOptions = useMemo(() => {
+    if (companies && companies.length > 0) {
+      return companies
+        .map((c) => ({ slug: c.slug ?? c.id, name: c.name }))
+        .sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
+    }
+    const fallback = new Map<string, string>()
+    machines.forEach((m) => {
+      if (m.companySlug) {
+        fallback.set(m.companySlug, m.companyName ?? m.companySlug)
+      }
+    })
+    return Array.from(fallback.entries())
+      .map(([slug, name]) => ({ slug, name }))
+      .sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
+  }, [companies, machines])
 
 const filteredMachines = useMemo(() => {
     const text = q.trim().toLowerCase()
@@ -1231,17 +1256,10 @@ type MachineDetailsProps = {
 }
 
 export function MachineDetails({ machine }: MachineDetailsProps) {
-  const { convexUserId } = useAuth()
   const router = useRouter()
   const effectiveStatus = machine ? resolveMachineStatus(machine) : "unknown"
   const isActive = machine?.isActive ?? true
   const isDeactivated = !isActive || effectiveStatus === "deactivated"
-  // Company name lookup (by slug)
-  const companyQueryArgs = convexUserId && machine ? { tenantId: machine.tenantId, viewerId: convexUserId as Id<"users"> } : undefined
-  const companies = useQuery(
-    api.companies.list,
-    companyQueryArgs ?? ("skip" as const)
-  ) as Array<{ id: string; name: string; slug?: string }> | undefined
   const alertsHistory = useQuery(
     machine ? api.machines.listAlerts : "skip",
     machine ? { machineId: machine.id as Id<"machines">, limit: 50 } : ("skip" as const)
@@ -1782,11 +1800,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
     return chips
   }, [osNameDisplay, machine?.osVersion, machine?.architecture, windowsVersionLabel, windowsBuildLabel, windowsActivationStatus, primaryGpu, collaborator?.email, collaborator?.name, personaLabel, machine?.osName, remoteAccess])
 
-  const companyName = (() => {
-    if (!companies || !machine?.companySlug) return machine?.companySlug ?? null
-    const found = companies.find((c) => c.slug === machine.companySlug)
-    return found?.name ?? machine.companySlug
-  })()
+  const companyName = machine?.companyName ?? machine?.companySlug ?? null
 
   const [renaming, setRenaming] = useState(false)
   const [newName, setNewName] = useState<string>(machine?.hostname ?? "")
@@ -3405,7 +3419,7 @@ function MachinesGrid({ machines, companyNameBySlug }: { machines: MachinesQuery
         <MachineCard
           key={m.id}
           machine={m}
-          companyName={m.companySlug ? companyNameBySlug.get(m.companySlug) ?? m.companySlug : null}
+          companyName={m.companyName ?? (m.companySlug ? companyNameBySlug.get(m.companySlug) ?? m.companySlug : null)}
         />
       ))}
     </div>