@hanzo/ui 8.0.2 → 8.0.4

package/src/cd/types.ts

@@ -0,0 +1,318 @@
+/**
+ * @hanzo/ui/cd — the Hanzo CD (continuous-delivery) data contract.
+ *
+ * This is the FE↔BE handshake for the `/v1/gitops` API. Every component in this
+ * module is presentational and data-prop-driven: a host console fetches these
+ * rows (via the injected `GitopsClient`) and hands them to the views. The shapes
+ * live in ONE place so the pure folds (status → tone, tree → graph, diff → hunks)
+ * are unit-tested in isolation and the visual components never reach into a data
+ * layer.
+ *
+ * The vocabulary mirrors a GitOps engine's model (health/sync verdicts, the
+ * owner-reference resource graph, operation phases) so a backend that projects a
+ * cluster's live state maps onto it directly, but the names are engine-neutral.
+ *
+ * Attribution: the information design of these views is a derivative port of the
+ * Argo CD web UI (Apache-2.0). See ./NOTICE.
+ */
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Status vocabularies — small, glanceable, closed unions.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * A resource/application health verdict. `Unknown` is honest — a missing signal
+ * is never guessed up to `Healthy`.
+ */
+export type HealthStatus =
+  | 'Healthy'
+  | 'Progressing'
+  | 'Degraded'
+  | 'Suspended'
+  | 'Missing'
+  | 'Unknown'
+
+/** Whether live state matches the desired (Git) state. */
+export type SyncStatus = 'Synced' | 'OutOfSync' | 'Unknown'
+
+/** The phase of an in-flight sync/rollback operation. */
+export type OperationPhase =
+  | 'Running'
+  | 'Terminating'
+  | 'Failed'
+  | 'Error'
+  | 'Succeeded'
+  | 'Pending'
+
+/** A pod's lifecycle phase (drives the pod-status dot). */
+export type PodPhase = 'Pending' | 'Running' | 'Succeeded' | 'Failed' | 'Unknown'
+
+/** Per-resource result code within a sync operation. */
+export type SyncResultCode = 'Synced' | 'Pruned' | 'SyncFailed' | 'Unknown'
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Resource graph — the owner-reference tree of live cluster objects.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** A group/version/kind/namespace/name coordinate for a cluster object. */
+export interface ResourceRef {
+  /** Stable unique id (k8s uid, or a synthesized `group/kind/ns/name`). */
+  uid: string
+  group: string
+  version: string
+  kind: string
+  namespace: string
+  name: string
+}
+
+/** A labelled datum shown as a chip on a node / in the summary (e.g. `Revision: 3`). */
+export interface InfoItem {
+  name: string
+  value: string
+}
+
+/** Ingress/service surface of a networked resource (Service, Ingress). */
+export interface ResourceNetworking {
+  /** Objects this resource routes to (Service → Pods, Ingress → Service). */
+  targetRefs?: ResourceRef[]
+  labels?: Record<string, string>
+  /** Externally reachable URLs (a domain's live site). */
+  externalURLs?: string[]
+  ingress?: { hostname?: string; ip?: string }[]
+}
+
+/**
+ * One node of the live resource graph. Ownership is expressed by `parentRefs`
+ * (an object may have several owners); the graph is the transitive closure of
+ * those edges rooted at the application. Pure data — no React, no back-refs.
+ */
+export interface ResourceNode extends ResourceRef {
+  /** The object(s) that own this one — the edges of the graph. */
+  parentRefs?: ResourceRef[]
+  /** Health verdict for this object, when the engine computes one. */
+  health?: { status: HealthStatus; message?: string }
+  /** Sync verdict for this object (managed objects only). */
+  status?: SyncStatus
+  /** Glanceable facts shown as chips (revision, replicas, image tag, …). */
+  info?: InfoItem[]
+  networkingInfo?: ResourceNetworking
+  images?: string[]
+  createdAt?: string
+  /** True for hook/sync-operation objects; `resourceVersion` for freshness. */
+  hook?: boolean
+  resourceVersion?: string
+  /** Present on Pod nodes — drives pod-specific rendering. */
+  podInfo?: PodInfo
+}
+
+/** Extra facts a Pod node carries (containers, phase, restarts, node/host). */
+export interface PodInfo {
+  phase: PodPhase
+  /** Reason string when the phase alone is ambiguous (CrashLoopBackOff, …). */
+  reason?: string
+  ready?: string // e.g. "2/3"
+  restarts?: number
+  node?: string
+  age?: string
+}
+
+/**
+ * The full resource graph for an application: the managed nodes plus any
+ * orphaned objects (live in the app's namespace but not owned by it).
+ */
+export interface ResourceTree {
+  nodes: ResourceNode[]
+  orphanedNodes?: ResourceNode[]
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Application — the deployable unit the list shows and the detail drills into.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** Where an application's desired state comes from (a Git repo path @ revision). */
+export interface AppSource {
+  repoURL: string
+  path?: string
+  targetRevision?: string
+  chart?: string
+}
+
+/** The destination cluster + namespace an application deploys to. */
+export interface AppDestination {
+  server?: string
+  name?: string
+  namespace: string
+}
+
+/** Revision metadata resolved from the source repo (for the status panel). */
+export interface RevisionMetadata {
+  revision: string
+  author?: string
+  date?: string
+  message?: string
+  tags?: string[]
+}
+
+/**
+ * A summary of one application — the shape the list/tiles render. Enough to draw
+ * a row without fetching the tree.
+ */
+export interface AppSummary {
+  name: string
+  namespace?: string
+  project?: string
+  health: HealthStatus
+  sync: SyncStatus
+  /** Short revision (sha/tag) currently reconciled. */
+  revision?: string
+  source?: AppSource
+  destination?: AppDestination
+  /** Epoch ms of the last successful sync (rendered relative). */
+  lastSyncedAt?: number
+  /** Phase of an in-flight operation, when one is running. */
+  operationPhase?: OperationPhase
+  /** Rollup counts of managed resources by health, for the tile mini-bar. */
+  resourceCounts?: Partial<Record<HealthStatus, number>>
+  labels?: Record<string, string>
+}
+
+/** A single sync/deploy in the history (for the rollback list). */
+export interface DeployRevision {
+  /** Monotonic history id — the handle passed to `rollback`. */
+  id: number
+  revision: string
+  deployedAt?: number
+  source?: AppSource
+  metadata?: RevisionMetadata
+}
+
+/** The result of (or progress of) the most recent sync/rollback operation. */
+export interface OperationState {
+  phase: OperationPhase
+  message?: string
+  startedAt?: number
+  finishedAt?: number
+  /** The revision the operation targeted. */
+  revision?: string
+  /** Per-resource results (kind/name → code + message). */
+  syncResult?: {
+    ref: ResourceRef
+    result: SyncResultCode
+    message?: string
+    hookPhase?: string
+  }[]
+}
+
+/**
+ * The full application detail — everything the status panel + controls need
+ * beyond the tree. Returned by `getApp`.
+ */
+export interface AppDetail extends AppSummary {
+  /** Resolved metadata for the reconciled revision. */
+  revisionMetadata?: RevisionMetadata
+  /** Deploy/rollout history, newest last (matches engine ordering). */
+  history?: DeployRevision[]
+  /** In-flight or last-completed operation. */
+  operationState?: OperationState
+  /** Free-form conditions/warnings surfaced by the engine. */
+  conditions?: { type: string; message: string; lastTransitionTime?: string }[]
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Node detail — manifest + events + logs for the drawer.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** A k8s-style event row shown in the node drawer's Events tab. */
+export interface ResourceEvent {
+  reason: string
+  message: string
+  type?: 'Normal' | 'Warning'
+  count?: number
+  firstSeen?: string
+  lastSeen?: string
+  source?: string
+}
+
+/** One log line (optionally tagged with its container + a parsed timestamp). */
+export interface LogEntry {
+  content: string
+  timestamp?: string
+  container?: string
+  /** True for stderr — rendered in the warn tone. */
+  err?: boolean
+}
+
+/**
+ * Everything the node drawer needs for a single resource: the live manifest
+ * (YAML), recent events, a recent-logs snapshot (pods), and the desired/live
+ * pair for the inline diff. Returned by `getResource`.
+ */
+export interface ResourceDetail {
+  ref: ResourceRef
+  health?: { status: HealthStatus; message?: string }
+  syncStatus?: SyncStatus
+  /** Live manifest as YAML (or JSON) text. */
+  liveManifest?: string
+  /** Desired manifest as YAML text — enables the drawer's inline diff. */
+  desiredManifest?: string
+  events?: ResourceEvent[]
+  /** Recent log lines for a pod/container (a snapshot; streaming is optional). */
+  logs?: LogEntry[]
+  /** Container names, when the resource is a Pod (drives the log selector). */
+  containers?: string[]
+  info?: InfoItem[]
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Diff — desired vs live for the whole application.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** One resource's desired/live manifest pair for the application diff view. */
+export interface ResourceDiff {
+  ref: ResourceRef
+  /** Sync verdict for this resource (drives the section pill). */
+  status?: SyncStatus
+  desired?: string
+  live?: string
+  /** True when the resource is unmanaged/hook (rendered muted). */
+  hook?: boolean
+}
+
+/** The full application diff payload. Returned by `getDiff`. */
+export interface AppDiff {
+  items: ResourceDiff[]
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Mutations — sync + rollback request bodies.
+// ──────────────────────────────────────────────────────────────────────────────
+
+/** Body for `POST /v1/gitops/{name}/sync`. */
+export interface SyncRequest {
+  /** Target revision; omit to sync to the source's configured revision. */
+  revision?: string
+  /** Prune resources that no longer exist in the desired state. */
+  prune?: boolean
+  /** Server-side dry-run (compute the plan without applying). */
+  dryRun?: boolean
+  /** Restrict the sync to specific resources (default: all). */
+  resources?: ResourceRef[]
+}
+
+/** Body for `POST /v1/gitops/{name}/rollback`. */
+export interface RollbackRequest {
+  /** The history id (from `DeployRevision.id`) to roll back to. */
+  id: number
+  prune?: boolean
+  dryRun?: boolean
+}
+
+/** The response to a sync/rollback — the operation the engine kicked off. */
+export interface OperationResponse {
+  operationState: OperationState
+}
+
+/** The apps-list response: `GET /v1/gitops`. */
+export interface AppListResponse {
+  items: AppSummary[]
+}

package/src/dashboard.ts

@@ -0,0 +1,8 @@
+// @hanzo/ui/dashboard — the console dashboard kit (landing + deploy pipeline +
+// composable overview primitives + charts/motion layer), re-exported from its
+// home package @hanzo/dashboard. Thin subpath:
+//
+//   import { ... } from '@hanzo/ui/dashboard'
+//
+// Optional peer — only pulled when the subpath is used.
+export * from '@hanzo/dashboard'

package/src/gitops.ts

@@ -0,0 +1,5 @@
+// @hanzo/ui/gitops — the CD/GitOps surface, re-exported from its home package
+// @hanzo/gitops (an Apache-2.0 clean-room port of the Argo CD UI). Kept as a thin
+// subpath so a console can `import { GitopsAppList, GitopsAppTree, GitopsNodeInfo,
+// HealthBadge, ... } from '@hanzo/ui/gitops'` while the code lives in one place.
+export * from '@hanzo/gitops'

package/src/network.ts

@@ -0,0 +1,11 @@
+// @hanzo/ui/network — the ONE network selector, re-exported from its home module
+// @hanzo/ui-shadcn/network. `NetworkSwitcher` renders the selected environment
+// and a menu of configured networks + a custom-endpoint form, backed by the
+// shared selected-network store; `configureNetworks` swaps the network set so a
+// downstream brand can white-label it. Thin subpath:
+//
+//   import { NetworkSwitcher, useNetwork, configureNetworks, HANZO_NETWORKS,
+//            type Network } from '@hanzo/ui/network'
+//
+// Optional peer — only pulled when the subpath is used.
+export * from '@hanzo/ui-shadcn/network'

package/src/product/AppHeader.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+/**
+ * AppHeader — the shared shell header every Hanzo surface renders: the brand
+ * mark top-left (from @hanzo/logo, white-label via `wordmark`/`brand`), an
+ * org/project slot (usually `<OrgSwitcher/>`), an app switcher listing the
+ * Hanzo surfaces (modeled on the console's AppLauncher), and an identity menu
+ * (Profile · Theme · Team settings · Billing · Sign out).
+ *
+ * Host-agnostic: every action is an injected handler; a row renders only when
+ * its handler is provided (honest — no dead menu items). Mobile-first: fluid
+ * flex + truncation, the wordmark collapse is the brand motion itself.
+ */
+import { useState, type ReactNode } from 'react'
+import { Button, Popover, Separator, Text, XStack, YStack } from '@hanzo/gui'
+import { CreditCard, Grip, LogOut, Settings2, UserRound } from '@hanzogui/lucide-icons-2'
+
+import { BrandMark } from './BrandMark'
+import { ThemeToggle } from './ThemeToggle'
+
+/** One Hanzo surface the app switcher offers. */
+export type Surface = { id: string; label: string; href: string; hint?: string }
+
+/** The five Hanzo surfaces (cloud opens the console). */
+export const SURFACES: Surface[] = [
+  { id: 'ai', label: 'Hanzo AI', href: 'https://hanzo.ai', hint: 'hanzo.ai' },
+  { id: 'cloud', label: 'Cloud', href: 'https://console.hanzo.ai', hint: 'console' },
+  { id: 'console', label: 'Console', href: 'https://console.hanzo.ai', hint: 'console.hanzo.ai' },
+  { id: 'app', label: 'App', href: 'https://hanzo.app', hint: 'hanzo.app' },
+  { id: 'team', label: 'Team', href: 'https://hanzo.team', hint: 'hanzo.team' },
+]
+
+const openHref = (href: string) => {
+  if (typeof window !== 'undefined') window.open(href, '_blank', 'noopener')
+}
+
+function MenuRow({ icon, label, onPress }: { icon: ReactNode; label: string; onPress: () => void }) {
+  return (
+    <XStack onPress={onPress} cursor="pointer" items="center" gap="$2.5" px="$2" py="$2" rounded="$3" hoverStyle={{ bg: '$color5' }}>
+      {icon}
+      <Text fontSize="$2" color="$color12">
+        {label}
+      </Text>
+    </XStack>
+  )
+}
+
+export type AppHeaderProps = {
+  /** Brand slot — defaults to the animated `<BrandMark/>`. */
+  brand?: ReactNode
+  /** White-label wordmark for the default brand mark. */
+  wordmark?: string
+  /** Brand press (usually "go home"). */
+  onBrand?: () => void
+  /** Org/project slot — usually `<OrgSwitcher/>` (+ a project switcher). */
+  org?: ReactNode
+  /** Free slot between the org slot and the right cluster. */
+  children?: ReactNode
+  /** App-switcher surfaces; [] hides the switcher. */
+  surfaces?: Surface[]
+  /** Open a surface — default `window.open` (new tab). */
+  open?: (surface: Surface) => void
+  /** Identity-menu trigger label (the signed-in user's name/email). */
+  user?: string
+  /** Replace the whole identity menu content. */
+  menu?: ReactNode
+  /** Theme row content — default `<ThemeToggle/>`; null hides the row. */
+  theme?: ReactNode
+  onProfile?: () => void
+  onTeam?: () => void
+  onBilling?: () => void
+  onSignOut?: () => void
+}
+
+export function AppHeader({
+  brand,
+  wordmark = 'Hanzo',
+  onBrand,
+  org,
+  children,
+  surfaces = SURFACES,
+  open,
+  user,
+  menu,
+  theme,
+  onProfile,
+  onTeam,
+  onBilling,
+  onSignOut,
+}: AppHeaderProps) {
+  const [appsOpen, setAppsOpen] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const launch = (s: Surface) => {
+    setAppsOpen(false)
+    if (open) open(s)
+    else openHref(s.href)
+  }
+
+  return (
+    <XStack items="center" gap="$2" px="$3" height={52} borderBottomWidth={1} borderColor="$borderColor" bg="$background">
+      <XStack items="center" cursor={onBrand ? 'pointer' : undefined} onPress={onBrand}>
+        {brand ?? <BrandMark wordmark={wordmark} />}
+      </XStack>
+
+      {org ? (
+        <XStack items="center" minW={0}>
+          {org}
+        </XStack>
+      ) : null}
+
+      <XStack flex={1} items="center" minW={0}>
+        {children}
+      </XStack>
+
+      {surfaces.length > 0 ? (
+        <Popover open={appsOpen} onOpenChange={setAppsOpen} placement="bottom-end">
+          <Popover.Trigger asChild>
+            <Button size="$2" chromeless icon={<Grip size={16} />} aria-label="Apps" />
+          </Popover.Trigger>
+          <Popover.Content bordered elevate p="$2" width={230} bg="$color2" borderColor="$borderColor">
+            <YStack gap="$1">
+              {surfaces.map((s) => (
+                <XStack key={s.id} onPress={() => launch(s)} cursor="pointer" items="center" gap="$2.5" px="$2" py="$2" rounded="$3" hoverStyle={{ bg: '$color5' }}>
+                  <Text flex={1} fontSize="$2" fontWeight="600" color="$color12">
+                    {s.label}
+                  </Text>
+                  {s.hint ? (
+                    <Text fontSize="$1" color="$color10">
+                      {s.hint}
+                    </Text>
+                  ) : null}
+                </XStack>
+              ))}
+            </YStack>
+          </Popover.Content>
+        </Popover>
+      ) : null}
+
+      <Popover open={menuOpen} onOpenChange={setMenuOpen} placement="bottom-end">
+        <Popover.Trigger asChild>
+          <Button size="$2" chromeless icon={<UserRound size={16} />} aria-label="Account">
+            {user ? (
+              <Text fontSize="$2" color="$color12" numberOfLines={1} maxW={140}>
+                {user}
+              </Text>
+            ) : null}
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content bordered elevate p="$2" width={220} bg="$color2" borderColor="$borderColor">
+          {menu ?? (
+            <YStack gap="$1">
+              {onProfile ? <MenuRow icon={<UserRound size={15} />} label="Profile" onPress={() => (setMenuOpen(false), onProfile())} /> : null}
+              {theme !== null ? (
+                <XStack items="center" gap="$2.5" px="$2" py="$1" rounded="$3">
+                  <Text flex={1} fontSize="$2" color="$color12">
+                    Theme
+                  </Text>
+                  {theme ?? <ThemeToggle />}
+                </XStack>
+              ) : null}
+              {onTeam ? <MenuRow icon={<Settings2 size={15} />} label="Team settings" onPress={() => (setMenuOpen(false), onTeam())} /> : null}
+              {onBilling ? <MenuRow icon={<CreditCard size={15} />} label="Billing" onPress={() => (setMenuOpen(false), onBilling())} /> : null}
+              {onSignOut ? (
+                <>
+                  <Separator borderColor="$borderColor" my="$1" />
+                  <MenuRow icon={<LogOut size={15} />} label="Sign out" onPress={() => (setMenuOpen(false), onSignOut())} />
+                </>
+              ) : null}
+            </YStack>
+          )}
+        </Popover.Content>
+      </Popover>
+    </XStack>
+  )
+}

package/src/product/BrandMark.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+/**
+ * BrandMark — the canonical brand lockup for an app header, from @hanzo/logo
+ * (the ONE home of the mark geometry + motion). Animated by default: intro
+ * flip + idle breathing + a wordmark that slides in, holds, then collapses
+ * (returns on hover). Pure CSS, reduced-motion-safe; the mark inherits
+ * `currentColor` so it themes for free. White-label via `wordmark`.
+ */
+import { HanzoLogo } from '@hanzo/logo/react'
+
+import { HanzoMark } from './HanzoMark'
+
+export function BrandMark({
+  size = 20,
+  wordmark = 'Hanzo',
+  animated = true,
+}: {
+  size?: number
+  /** Wordmark text (white-label): "Hanzo", "Lux", "Zoo", … */
+  wordmark?: string
+  /** false = the static mark alone (no motion shell, no wordmark). */
+  animated?: boolean
+}) {
+  if (!animated) return <HanzoMark size={size} />
+  return <HanzoLogo animated size={size} wordmark={wordmark} />
+}

package/src/product/HanzoMark.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 /**
- * The Hanzo "H" mark — the canonical brand glyph (same geometry as app/icon.svg).
+ * The Hanzo "H" mark — the canonical 7-path shaded glyph: five body blocks +
+ * two shade slivers (geometry canon: @hanzo/logo `MARK_PATHS`).
  *
- * Rendered as inline SVG with `fill: currentColor`, so it inherits the
- * surrounding text color and adapts to the dark/light theme with no per-theme
- * asset. ONE source for the mark across the chrome (sidebar + header).
+ * Rendered as inline SVG with `fill: currentColor` (shade at reduced opacity),
+ * so it inherits the surrounding text color and adapts to the dark/light theme
+ * with no per-theme asset. ONE source for the mark across the chrome.
  */
 export function HanzoMark({ size = 22, color = 'currentColor' }: { size?: number; color?: string }) {
   return (
@@ -19,9 +20,11 @@ export function HanzoMark({ size = 22, color = 'currentColor' }: { size?: number
       style={{ display: 'block', flexShrink: 0 }}
     >
       <path d="M22.21 67V44.6369H0V67H22.21Z" />
+      <path opacity={0.55} d="M0 44.6369L22.21 46.8285V44.6369H0Z" />
       <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" />
       <path d="M22.21 0H0V22.3184H22.21V0Z" />
       <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" />
+      <path opacity={0.55} d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" />
       <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" />
     </svg>
   )