mirror of
https://github.com/hanzoai/agents.git
synced 2026-10-30 18:48:36 +00:00
zeekay
dc00ea93d0
This example shipped a live tailwind pipeline (tailwind.config.ts, a postcss
config running the tailwind plugin, @tailwind directives in globals.css), ten
@radix-ui packages, and fourteen vendored shadcn components. Tailwind classes
and radix primitives are DOM-only, so the example taught readers a pattern that
cannot run on iOS or Android — and examples propagate.
Everything now renders through @hanzo/ui on the @hanzo/gui backend, which
compiles to React Native. Utility strings became style props on View/XStack/
YStack/Text; the vendored ui/ directory is gone because @hanzo/ui already
exports every primitive it re-implemented, with matching variant names.
Tailwind and @hanzo/ui cannot coexist: @hanzo/ui ships plain CSS cascade layers
and tailwind's postcss plugin rejects `@layer base` without `@tailwind base`.
The pipeline had to come out for the library to load at all, which is why this
is a whole-app change rather than a partial one.
Also removed EvaluationForm.tsx — 273 lines of tailwind nothing imported.
Platform moves the conversion required: React 18 -> 19 and Next 14 -> 15 for
@hanzo/ui's peer range, react-native aliased to react-native-web for the web
bundle, and <Hanzo> mounted in the root layout to install the theme.
Three defects found by rendering it rather than trusting the build:
- Tabs defaults to flexDirection row, so tab panels laid out beside the tab
list and spilled outside the metric cards
- TabsContent computes flex 1 1 0, which collapses to height 0 inside a
content-sized column; it needs flexBasis auto there
- CollapsibleTrigger has no asChild — it wraps children itself, so the claim
rows rendered as empty boxes
Measured: 1465 tailwind utility tokens across 22 files -> 0; 10 radix packages
-> 0; 14 vendored shadcn files -> 0. next build green, tsc --noEmit clean,
every tab and the claim expand/collapse verified in a real browser with no
console errors.
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { Text, XStack, YStack } from '@hanzo/ui'
|
|
import { useEvaluation } from '@/hooks/useEvaluation'
|
|
import { EvaluationInput } from '@/lib/types'
|
|
import { DashboardShell, DashboardHeader, DashboardMain } from '@/components/eval/DashboardShell'
|
|
import { InputPanel } from '@/components/eval/InputPanel'
|
|
import { ResultsPanel } from '@/components/eval/ResultsPanel'
|
|
import { PoweredBy } from '@/components/PoweredBy'
|
|
|
|
export default function Home() {
|
|
const { status, result, error, notes, currentStep, evaluate, reset } = useEvaluation()
|
|
|
|
const handleSubmit = async (input: EvaluationInput) => {
|
|
await evaluate(input)
|
|
}
|
|
|
|
return (
|
|
<DashboardShell>
|
|
<DashboardHeader>
|
|
<XStack alignItems="center" gap="$3">
|
|
<YStack
|
|
height={32}
|
|
width={32}
|
|
borderRadius="$4"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
backgroundColor="$color2"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Image src="/hanzo-agents-icon-dark.svg" alt="Hanzo Agents" width={16} height={16} />
|
|
</YStack>
|
|
<YStack>
|
|
<Text fontSize={14} fontWeight="600">
|
|
RAG Evaluation Studio
|
|
</Text>
|
|
<Text fontSize={10} fontFamily="$mono" color="$color11">
|
|
v0.1.0-beta
|
|
</Text>
|
|
</YStack>
|
|
</XStack>
|
|
<XStack alignItems="center" gap="$6">
|
|
<XStack borderLeftWidth={1} borderLeftColor="$borderColor" paddingLeft="$6" display="none" $md={{ display: 'flex' }}>
|
|
<PoweredBy />
|
|
</XStack>
|
|
</XStack>
|
|
</DashboardHeader>
|
|
|
|
<DashboardMain flexDirection="column" $md={{ flexDirection: 'row' }}>
|
|
<InputPanel
|
|
onSubmit={handleSubmit}
|
|
isLoading={status === 'evaluating'}
|
|
width="100%"
|
|
$md={{ width: 420 }}
|
|
$lg={{ width: 480 }}
|
|
flexShrink={0}
|
|
height="100%"
|
|
overflow="hidden"
|
|
/>
|
|
<ResultsPanel
|
|
status={status}
|
|
result={result}
|
|
error={error}
|
|
notes={notes}
|
|
currentStep={currentStep}
|
|
onReset={reset}
|
|
flex={1}
|
|
minWidth={0}
|
|
height="100%"
|
|
overflow="hidden"
|
|
/>
|
|
</DashboardMain>
|
|
</DashboardShell>
|
|
)
|
|
}
|