mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
6325fce333
ProviderMark is one table of every lab's mark, about 32 KB after brotli, and four client components imported it whole: the landing's agent strip and race, /templates' prompt rows and /gen's roster, which put it in the first load of /dev, /gen and /templates for a few marks below the fold. components/models/ Mark is the lazy one Maker already used, its footprint standing empty until the table arrives; every client mark draws through it. /dev's first load is 406 KB (was 449), /gen's 387 (was 429). A server page renders ProviderMark itself and ships none of it. The focused bar (the previous commit) stood in a Suspense boundary, and that boundary misbehaved twice. The prerender flushed it before the bar's module had loaded, so the export carried an empty boundary where the bar goes and the bar further down, swapped in by React's inline script: on a slow line it arrived late and pushed /login's form down (CLS 0.15 on Fast 3G against 0.1). And IAM settling is an update, so hydration threw the prerendered bar away for the fallback until the chunk landed (focus.spec found no wordmark). With no boundary the prerender holds the bar in place and a focused page hydrates once its chunk, a preload in its head, has arrived: measured on /forget, the bar is there from the first parse through hydration. Claude-Session: https://claude.ai/code/session_01BLLMyBFSvAfCt7ZGqYuiEz
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Every agent Gen runs (./agents), each wearing its own mark in the house ink
|
|
* and the flag that launches it. A client module because `ProviderMark` is
|
|
* drawn with @hanzo/ui, which a server component may reach only through its
|
|
* client boundary (e2e/gates/weight.spec.ts).
|
|
*
|
|
* House ink, as the homepage's agent strip sets its marks: every mark has its
|
|
* name beside it, so a brand's hue would identify nothing here and put a dozen
|
|
* palettes on a monochrome page.
|
|
*/
|
|
|
|
import { Text, XStack, YStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Mark } from '@/components/models/Mark'
|
|
import { AGENTS } from './roster'
|
|
|
|
export function Agents() {
|
|
return (
|
|
<Grid render="ul" columns={{ min: 220, max: 4 }} gap={8} $platform-web={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
|
{AGENTS.map((a) => (
|
|
<XStack
|
|
key={a.flag}
|
|
render="li"
|
|
data-agent={a.flag}
|
|
items="center"
|
|
gap="$3"
|
|
py="$3"
|
|
px="$4"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
rounded="$4"
|
|
minW={0}
|
|
>
|
|
<Mark org={a.mark} size={20} ink />
|
|
<YStack minW={0} gap={2}>
|
|
<Text fontSize="$3" lineHeight="$3" fontWeight="500" color="$ink">
|
|
{a.name}
|
|
</Text>
|
|
<Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--text-tertiary)">
|
|
{a.flag}
|
|
</Text>
|
|
</YStack>
|
|
</XStack>
|
|
))}
|
|
</Grid>
|
|
)
|
|
}
|