Files
zeekay 24e67d965e landing: what we ship is counted, and drawn from the page's own parts
The commits section read numbers that were typed into scripts/sync-oss.ts
(5,420 repositories, 214 orgs, 784 pushes a day, 245,417 commits, each
contributor's count), a day's count scaled by a made-up factor, and a star
count that began at 1,420. The forge's database holds 1,150 repositories
and 46 orgs; none of that was read. Its panels were tinted rgba over a
stylesheet, DualStarButton showed its guess before GitHub answered, and
BulkStarModal said "successfully starred" over a forge PUT.

scripts/sync-oss.ts (was .mjs) now counts GitHub's public activity for the
orgs we publish: commits a day, the year, the week, active repositories and
the newest commits, written at each build with the moment it was read. A
figure the snapshot does not hold is not drawn. The grid, bars and
repository card are @hanzo/ui/marketing (8.29.19); the showcase stylesheet
and DayActivityModal are deleted. The org and repo pages lose their typed
"velocity" banners.

Design lint is zero in components/oss, home/OpenSource and ForgeBetaBanner.
e2e/gates/activity.spec.ts holds each figure to the snapshot, the cards to
one fill and edge in both schemes, a card's name, line and foot to their own
rows, and the phone to no sideways scroll.

Claude-Session: https://claude.ai/code/session_017vrVus6PPBgP5YRzKV1iqW
2026-10-26 09:57:01 -07:00

286 lines
10 KiB
TypeScript

'use client'
import React, { useState, useMemo, useEffect } from 'react'
import Link from 'next/link'
import { findOrg, getOrgRepos } 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, 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 == &apos;admin&apos;)
</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)"
>
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 == &apos;admin&apos;</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>
)}
{/* 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) => (
<Link
key={repo.name}
href={`/oss/${repo.org}/${repo.name}`}
>
<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>
</Link>
))}
</Grid>
</Section>
</Page>
)
}