mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
cb6db9e659
Inline style objects became gui props (Box for a div, View or Text rendering the element for the rest, since Box styles only a div), raw colours and sizes became the design's tokens, the brand swatches read @hanzo/design's own values, and the project and creation hues moved to palette.json, which is data. The newsletter's subscribe button is the standard filled Action. connect-steps.tsx, which nothing imports, is deleted with the brand constants nobody read. Pages compared before and after at 1440x900 and 390x844: blockchain, brand, directory, projects, settings, unsubscribe identical; founder 0.03% of pixels; buying specialist's title snaps from 28 to the ramp's 26px and the newsletter's button is now filled. Claude-Session: https://claude.ai/code/session_017vrVus6PPBgP5YRzKV1iqW
368 lines
13 KiB
TypeScript
368 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useMemo, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { findOrg, getOrgRepos, statsData } from '@/lib/oss'
|
|
import { superAdmin } from '@hanzo/app/lib/session'
|
|
import { useHydrated } from '@hanzo/app/lib/hydrated'
|
|
import { mix } from '@hanzo/app/lib/mix'
|
|
import { Page, PageHero, Section } from '@/components/marketing/page-kit'
|
|
import { Box, Button, Input, Text, View, XStack, YStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Chip, Display, Lede, Title, Leaf, Line } from '@hanzo/ui/marketing'
|
|
import { Github } from '@/components/brand'
|
|
import { ArrowLeft, ExternalLink, GitBranch, Lock, Shield, Sparkles, Star, Terminal } from 'lucide-react'
|
|
|
|
const MUTED = 'var(--muted-foreground)'
|
|
const INK = 'var(--foreground)'
|
|
const BORDER = 'var(--border)'
|
|
|
|
const PRIVATE_INTERNAL_REPOS = [
|
|
{
|
|
name: 'cloud-backend',
|
|
desc: 'Core microservices, multi-tenant billing settlement, and edge proxy behind api.hanzo.ai.',
|
|
tag: 'Proprietary Core',
|
|
lang: 'Go',
|
|
},
|
|
{
|
|
name: 'iam-production',
|
|
desc: 'Sovereign IAM directory, OIDC authentication, and cryptographic session claims.',
|
|
tag: 'Security & Auth',
|
|
lang: 'TypeScript',
|
|
},
|
|
{
|
|
name: 'cluster-ops',
|
|
desc: 'Automated bare-metal GPU provisioning, Slurm clusters, and ROCm / CUDA scheduler.',
|
|
tag: 'Infrastructure',
|
|
lang: 'Rust / Python',
|
|
},
|
|
{
|
|
name: 'billing-ledger',
|
|
desc: 'Real-time metered spend ledger, author royalty calculation (20%), and payout settlement.',
|
|
tag: 'Finance Engine',
|
|
lang: 'Go / SQL',
|
|
},
|
|
]
|
|
|
|
export function OrgView({ orgSlug }: { orgSlug: string }) {
|
|
const org = findOrg(orgSlug) || {
|
|
slug: orgSlug,
|
|
title: orgSlug.charAt(0).toUpperCase() + orgSlug.slice(1),
|
|
category: 'Ecosystem',
|
|
description: `Official open-source repository organization for ${orgSlug} on Hanzo Forge.`,
|
|
}
|
|
|
|
const hydrated = useHydrated()
|
|
const [isAdmin, setIsAdmin] = useState(false)
|
|
const [query, setQuery] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (hydrated) {
|
|
try {
|
|
setIsAdmin(superAdmin())
|
|
} catch {
|
|
setIsAdmin(false)
|
|
}
|
|
}
|
|
}, [hydrated])
|
|
|
|
const repos = useMemo(() => getOrgRepos(orgSlug), [orgSlug])
|
|
const filteredRepos = useMemo(() => {
|
|
if (!query.trim()) return repos
|
|
const q = query.toLowerCase()
|
|
return repos.filter((r) => r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q))
|
|
}, [repos, query])
|
|
|
|
const isHanzoInc = orgSlug === 'hanzo-inc'
|
|
|
|
return (
|
|
<Page>
|
|
<PageHero
|
|
eyebrow={`ORGANIZATION / ${org.category.toUpperCase()}`}
|
|
title={org.title}
|
|
lede={org.description}
|
|
>
|
|
<XStack flexWrap="wrap" items="center" gap={12}>
|
|
<Button size="sm" asChild>
|
|
<a href={`https://git.hanzo.ai/${orgSlug}`} target="_blank" rel="noopener noreferrer">
|
|
<Terminal size={14} />
|
|
View on git.hanzo.ai ↗
|
|
</a>
|
|
</Button>
|
|
<Button size="sm" variant="outline" asChild>
|
|
<a href={`https://github.com/${orgSlug}`} target="_blank" rel="noopener noreferrer">
|
|
<Github width={14} height={14} />
|
|
GitHub Mirror ↗
|
|
</a>
|
|
</Button>
|
|
<Button size="sm" variant="ghost" asChild>
|
|
<Link href="/open-source">
|
|
<ArrowLeft size={14} />
|
|
All Organizations
|
|
</Link>
|
|
</Button>
|
|
</XStack>
|
|
</PageHero>
|
|
|
|
{/* Privacy Notice for hanzo-inc */}
|
|
{isHanzoInc && (
|
|
<Section title={isAdmin ? 'SuperAdmin Verified' : 'Restricted Internal Infrastructure'}>
|
|
{isAdmin ? (
|
|
<Box
|
|
p={20}
|
|
rounded="$5"
|
|
borderWidth={1}
|
|
borderColor="var(--primary)"
|
|
bg={mix('var(--primary)', 10, 'srgb')}
|
|
>
|
|
<XStack items="center" gap={12} mb={8}>
|
|
<Shield size={20} color="var(--primary)" />
|
|
<Text fontWeight="600" color={INK} fontSize="$3">
|
|
SuperAdmin Access Active (owner == 'admin')
|
|
</Text>
|
|
</XStack>
|
|
<Text color={MUTED} fontSize="$2" mb={16}>
|
|
You have elevated authorization to inspect internal production repositories, private cluster manifests,
|
|
and sovereign deployment pipelines on git.hanzo.ai.
|
|
</Text>
|
|
<Grid columns={{ min: 280, max: 2 }} gap={12}>
|
|
{PRIVATE_INTERNAL_REPOS.map((p) => (
|
|
<Box
|
|
key={p.name}
|
|
p={16}
|
|
rounded="$4"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="var(--background)"
|
|
>
|
|
<XStack items="center" justify="space-between" mb={6}>
|
|
<Text fontWeight="600" color={INK} fontSize="$2">
|
|
hanzo-inc/{p.name}
|
|
</Text>
|
|
<Chip
|
|
fontSize="$1"
|
|
px={8}
|
|
py={2}
|
|
rounded="var(--radius-full)"
|
|
bg={mix('var(--primary)', 15, 'srgb')}
|
|
color="var(--primary)"
|
|
>
|
|
{p.tag}
|
|
</Chip>
|
|
</XStack>
|
|
<Text color={MUTED} fontSize="$1" mb={8}>
|
|
{p.desc}
|
|
</Text>
|
|
<XStack items="center" justify="space-between">
|
|
<Text color={MUTED} fontSize="$1" fontFamily="$mono">
|
|
{p.lang}
|
|
</Text>
|
|
<Text
|
|
render={<a href={`https://git.hanzo.ai/hanzo-inc/${p.name}`} target="_blank" rel="noopener noreferrer" />}
|
|
fontSize="$1"
|
|
color="var(--primary)"
|
|
textDecorationLine="none"
|
|
>
|
|
Internal Tree ↗
|
|
</Text>
|
|
</XStack>
|
|
</Box>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
) : (
|
|
<Box
|
|
p={20}
|
|
rounded="$5"
|
|
borderWidth={1}
|
|
borderColor={BORDER}
|
|
bg={mix('var(--foreground)', 3, 'srgb')}
|
|
>
|
|
<XStack items="center" gap={12} mb={8}>
|
|
<Lock size={18} color="var(--muted-foreground)" />
|
|
<Text fontWeight="600" color={INK} fontSize="$2">
|
|
Proprietary Infrastructure Restricted
|
|
</Text>
|
|
</XStack>
|
|
<Text color={MUTED} fontSize="$2" mb={14}>
|
|
This organization manages Hanzo Inc. core production backend infrastructure and cloud services. Internal
|
|
clusters and proprietary APIs are restricted to authorized Hanzo SuperAdmins (<code>owner == 'admin'</code>).
|
|
Public application frameworks and client libraries remain open and listed below.
|
|
</Text>
|
|
<XStack items="center" gap={12}>
|
|
<Button size="xs" variant="outline" asChild>
|
|
<Link href="/auth/login">
|
|
Sign in with SuperAdmin
|
|
</Link>
|
|
</Button>
|
|
<Text color={MUTED} fontSize="$1">
|
|
Public repositories are accessible to all visitors.
|
|
</Text>
|
|
</XStack>
|
|
</Box>
|
|
)}
|
|
</Section>
|
|
)}
|
|
|
|
{/* Engineering Velocity Banner */}
|
|
<Section title="Ecosystem Velocity">
|
|
<Box
|
|
p={20}
|
|
rounded="$5"
|
|
borderWidth={1}
|
|
borderColor={BORDER}
|
|
bg={mix('var(--foreground)', 2, 'srgb')}
|
|
>
|
|
<XStack flexWrap="wrap" items="center" justify="space-between" gap={16} mb={16}>
|
|
<YStack gap={4}>
|
|
<XStack items="center" gap={8}>
|
|
<Sparkles size={16} color="var(--primary)" />
|
|
<Text fontWeight="600" color={INK} fontSize="$3">
|
|
250,000+ Annual Commits
|
|
</Text>
|
|
</XStack>
|
|
<Text color={MUTED} fontSize="$2">
|
|
High-frequency engineering across sovereign forge (git.hanzo.ai) and synchronized GitHub mirrors.
|
|
</Text>
|
|
</YStack>
|
|
<Chip
|
|
fontSize="$1"
|
|
px={10}
|
|
py={4}
|
|
rounded="var(--radius-full)"
|
|
bg={mix('var(--primary)', 12, 'srgb')}
|
|
color="var(--primary)"
|
|
fontWeight="600"
|
|
>
|
|
750+ Pushes / Day
|
|
</Chip>
|
|
</XStack>
|
|
|
|
<Grid columns={{ min: 220, max: 4 }} gap={12}>
|
|
{statsData.coreContributors.map((c) => (
|
|
<Text
|
|
render={<a key={c.handle} href={c.githubUrl || c.forgeUrl || `https://github.com/${c.handle}`} target="_blank" rel="noopener noreferrer" />}
|
|
textDecorationLine="none"
|
|
>
|
|
<Box
|
|
p={14}
|
|
rounded="$4"
|
|
borderWidth={1}
|
|
borderColor={BORDER}
|
|
bg="var(--background)"
|
|
hoverStyle={{ borderColor: 'var(--primary)' }}
|
|
>
|
|
<XStack items="center" gap={10} mb={8}>
|
|
<Box
|
|
width={28}
|
|
height={28}
|
|
rounded={999}
|
|
bg={mix('var(--foreground)', 10, 'srgb')}
|
|
items="center"
|
|
justify="center"
|
|
>
|
|
<Text fontSize="$1" fontWeight="700" color={INK}>
|
|
{c.name.charAt(0)}
|
|
</Text>
|
|
</Box>
|
|
<YStack minW={0}>
|
|
<Text fontSize="$2" fontWeight="600" color={INK} numberOfLines={1}>
|
|
{c.name}
|
|
</Text>
|
|
<Text fontSize="$1" color={MUTED} numberOfLines={1}>
|
|
{c.role}
|
|
</Text>
|
|
</YStack>
|
|
</XStack>
|
|
<Text fontSize="$1" color="var(--primary)" fontWeight="600">
|
|
{c.commits} commits
|
|
</Text>
|
|
</Box>
|
|
</Text>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
</Section>
|
|
|
|
{/* Repositories in this Org */}
|
|
<Section title={`Repositories in ${org.slug}`}>
|
|
<XStack items="center" justify="space-between" gap={16} mb={20} flexWrap="wrap">
|
|
<Text color={MUTED} fontSize="$2">
|
|
Showing {filteredRepos.length} public {filteredRepos.length === 1 ? 'repository' : 'repositories'}
|
|
</Text>
|
|
<Box width="100%" maxW={320}>
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Filter repositories..."
|
|
size="sm"
|
|
/>
|
|
</Box>
|
|
</XStack>
|
|
|
|
<Grid columns={{ min: 280, max: 3 }} gap={16}>
|
|
{filteredRepos.map((repo) => (
|
|
<Text
|
|
render={<Link key={repo.name} href={`/oss/${repo.org}/${repo.name}`} />}
|
|
display="inline"
|
|
textDecorationLine="none"
|
|
>
|
|
<Leaf
|
|
p={20}
|
|
rounded="$5"
|
|
borderWidth={1}
|
|
borderColor={BORDER}
|
|
bg="var(--background)"
|
|
hoverStyle={{ borderColor: 'color-mix(in srgb, var(--primary) 50%, transparent)' }}
|
|
height="100%"
|
|
display="flex"
|
|
flexDirection="column"
|
|
>
|
|
<XStack items="center" justify="space-between" mb={12}>
|
|
<Box
|
|
width={36}
|
|
height={36}
|
|
rounded="$3"
|
|
borderWidth={1}
|
|
borderColor={BORDER}
|
|
items="center"
|
|
justify="center"
|
|
>
|
|
<Text fontSize={18}>{repo.icon}</Text>
|
|
</Box>
|
|
<XStack items="center" gap={6}>
|
|
<Star size={13} color="var(--muted-foreground)" />
|
|
<Text fontSize="$1" color={MUTED} fontFamily="$mono">
|
|
{repo.stars}
|
|
</Text>
|
|
</XStack>
|
|
</XStack>
|
|
|
|
<Text render="h3" fontSize="$3" fontWeight="600" color={INK} mb={6}>
|
|
{repo.org}/{repo.name}
|
|
</Text>
|
|
<Text fontSize="$2" color={MUTED} mb={16} flex={1} numberOfLines={2}>
|
|
{repo.description}
|
|
</Text>
|
|
|
|
<XStack items="center" justify="space-between" pt={12} borderTopWidth={1} borderColor={BORDER}>
|
|
<XStack gap={6}>
|
|
{repo.languages.slice(0, 2).map((lang) => (
|
|
<Chip key={lang} fontSize="$1" px={6} py={2} rounded="$2" bg="$hover" color={MUTED}>
|
|
{lang}
|
|
</Chip>
|
|
))}
|
|
</XStack>
|
|
<Text fontSize="$1" color="var(--primary)" fontWeight="500">
|
|
Explore →
|
|
</Text>
|
|
</XStack>
|
|
</Leaf>
|
|
</Text>
|
|
))}
|
|
</Grid>
|
|
</Section>
|
|
</Page>
|
|
)
|
|
}
|