@hanzo/dashboard 0.2.1 → 0.2.3

package/README.md

@@ -84,7 +84,7 @@ const config: OverviewConfig = {
   load: async ({ range }) => fromMyApi(await MyApi.overview(range)), // → OverviewData
 }
 
-<Overview config={config} isGlobalAdmin={amAdmin} />
+<Overview config={config} superAdmin={superAdmin(claims)} /> // @hanzo/iam's one reading
 ```
 
 The loader returns the normalized **`OverviewData`** (`kpi` / `series` / `distribution`
@@ -178,8 +178,8 @@ Extracted (and generalized: no `~/lib/*` / `~/config` imports) from
 
 - **Icons** are consumer-supplied (`IconComponent` = a `size`/`color` icon), replacing
   the console's `ProductIcon` from its registry.
-- **`Overview`** drops `~/lib/api` `ApiError`, `useIsGlobalAdmin`, `PageHeader`,
-  `FadeIn`, and `States` — `isGlobalAdmin` is now a prop and the header/fade/error
+- **`Overview`** drops `~/lib/api` `ApiError`, the console's SuperAdmin hook, `PageHeader`,
+  `FadeIn`, and `States` — `superAdmin` is now a prop (the host's verdict) and the header/fade/error
   chrome is inlined (self-contained).
 - **Landing** takes brand/docs/support/discord/accent from `LandingConfig` (was
   `~/config`). `LandingHero` inlines the hero graphic + accent button (was
@@ -205,7 +205,7 @@ per component:
    `@hanzo/dashboard`; `RailwayDeploy` + `LandingMetrics` import these hooks.
 3. **Overview** — replace `overview/living/{config,logic,tiles,LivingOverview}` with
    thin wrappers over the package. The console's `LivingOverviewModule` keeps its
-   registry-router wrapper and passes `isGlobalAdmin={useIsGlobalAdmin()}` +
+   registry-router wrapper and passes `superAdmin={useIsSuperAdmin()}` +
    maps `ApiError` into the driver's caught error. `PageHeader`/`FadeIn`/`States`
    stay in console (they're used elsewhere) — the driver now inlines its own.
 4. **Landing** — replace `products/landing/*` with the package; the console builds a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/dashboard",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "description": "Hanzo Dashboard — the reusable dashboard layer on @hanzo/gui: monochrome SVG charts, a videogame-like LivingOverview (count-up KPIs, live sparklines, streaming feed, health), the ProductLanding kit, and a Pipeline deploy animation. Pure (data via props/loaders), typed, reduced-motion-guarded. Extracted from the Hanzo Cloud Console so every Hanzo app composes ONE dashboard system.",
   "exports": {

package/src/charts/Charts.tsx

@@ -24,13 +24,13 @@ import { Text, XStack, YStack, useTheme } from '@hanzo/gui'
 
 /** Distinct hues for categorical series (e.g. spend-by-model donut), dark-tuned. */
 export const CHART_PALETTE = [
-  '#7c5cff',
+  '#e4e4e7',
   '#23c562',
   '#ff9f45',
   '#3aa0ff',
   '#ff5d8f',
   '#16c0c8',
-  '#c084fc',
+  '#a1a1aa',
   '#f4c245',
 ]
 export const CHART_OTHER = '#64748b'

package/src/landing/Hero.tsx

@@ -96,7 +96,7 @@ function HeroGraphic({ size = 170, accent = CHART_PALETTE[0] }: { size?: number;
           <stop offset="100%" stopColor={accent} stopOpacity="0" />
         </radialGradient>
         <linearGradient id="hz-hero-cube" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stopColor="#a78bfa" />
+          <stop offset="0%" stopColor="#e4e4e7" />
           <stop offset="100%" stopColor={accent} />
         </linearGradient>
       </defs>
@@ -106,9 +106,9 @@ function HeroGraphic({ size = 170, accent = CHART_PALETTE[0] }: { size?: number;
       ))}
       <g transform="translate(100 96)">
         <polygon points="0,-34 30,-17 30,17 0,34 -30,17 -30,-17" fill="url(#hz-hero-cube)" fillOpacity="0.9" />
-        <polygon points="0,-34 30,-17 0,0 -30,-17" fill="#c4b5fd" fillOpacity="0.85" />
+        <polygon points="0,-34 30,-17 0,0 -30,-17" fill="#f4f4f5" fillOpacity="0.85" />
         <polygon points="0,0 30,-17 30,17 0,34" fill={accent} fillOpacity="0.7" />
-        <polygon points="0,0 -30,-17 -30,17 0,34" fill="#6d28d9" fillOpacity="0.7" />
+        <polygon points="0,0 -30,-17 -30,17 0,34" fill="#52525b" fillOpacity="0.7" />
       </g>
     </svg>
   )

package/src/overview/Overview.tsx

@@ -35,7 +35,7 @@ const RANGES: { key: OverviewRange; label: string }[] = [
   { key: '30d', label: '30D' },
 ]
 
-export function Overview({ config, allOrgs, isGlobalAdmin = false }: { config: OverviewConfig; allOrgs?: boolean; isGlobalAdmin?: boolean }) {
+export function Overview({ config, allOrgs, superAdmin = false }: { config: OverviewConfig; allOrgs?: boolean; superAdmin?: boolean }) {
   const [range, setRange] = useState<OverviewRange>('24h')
   const [state, setState] = useState<Loadable<OverviewData>>({ s: 'loading' })
   const [refreshing, setRefreshing] = useState(false)
@@ -57,7 +57,7 @@ export function Overview({ config, allOrgs, isGlobalAdmin = false }: { config: O
     const first = state.s === 'loading'
     if (!first) setRefreshing(true)
     config
-      .load({ range, allOrgs, isGlobalAdmin })
+      .load({ range, allOrgs, superAdmin })
       .then((v) => {
         if (id === reqRef.current) setState({ s: 'ready', v })
       })
@@ -74,7 +74,7 @@ export function Overview({ config, allOrgs, isGlobalAdmin = false }: { config: O
         if (id === reqRef.current) setRefreshing(false)
       })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [range, allOrgs, isGlobalAdmin, tick, config])
+  }, [range, allOrgs, superAdmin, tick, config])
 
   const onRange = (k: OverviewRange) => {
     setRange(k)

package/src/overview/config.ts

@@ -142,15 +142,16 @@ export type LiveConfig = {
 /** The context passed to a loader (range + org scope). */
 export type OverviewContext = {
   range: OverviewRange
-  /** Global-admin all-orgs god view. */
+  /** SuperAdmin all-orgs god view. */
   allOrgs?: boolean
   /**
-   * True when the viewer is a global (cross-tenant) admin. Loaders use this to
-   * SKIP admin-only aggregates that a tenant user's browser would only ever get a
-   * 403 from, going straight to the org-scoped source instead — the board renders
-   * the same, minus the console noise.
+   * The host's SuperAdmin verdict (a person whose home org is the reserved `admin`
+   * org, as the server or @hanzo/iam `superAdmin` states it — never derived here).
+   * Loaders use this to SKIP admin-only aggregates that a tenant user's browser
+   * would only ever get a 403 from, going straight to the org-scoped source
+   * instead — the board renders the same, minus the console noise.
    */
-  isGlobalAdmin?: boolean
+  superAdmin?: boolean
 }
 
 export type OverviewRange = '24h' | '7d' | '30d'

package/src/overview/superadmin.test.ts

@@ -0,0 +1,36 @@
+// The dashboard decides no authority. SuperAdmin is the HOST's verdict (the server's
+// `isSuperAdmin`, or @hanzo/iam `superAdmin(claims)` — a person whose home org is the
+// reserved `admin` org), and the overview only carries it to the product's loader
+// under that one name, so a loader can skip a fleet aggregate the viewer would be
+// refused. These hold the package to that: no predicate of its own, one name.
+import { describe, expect, test } from 'bun:test'
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+
+const SRC = join(import.meta.dir, '..')
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const p = join(dir, name)
+    if (statSync(p).isDirectory()) return sources(p)
+    return /\.(ts|tsx)$/.test(name) && !/\.test\.tsx?$/.test(name) ? [p] : []
+  })
+}
+
+describe('SuperAdmin in @hanzo/dashboard', () => {
+  test('the overview hands the loader the host verdict as superAdmin', () => {
+    const overview = readFileSync(join(SRC, 'overview', 'Overview.tsx'), 'utf8')
+    expect(overview).toMatch(/superAdmin = false \}: \{ config: OverviewConfig; allOrgs\?: boolean; superAdmin\?: boolean \}/)
+    expect(overview).toContain('.load({ range, allOrgs, superAdmin })')
+    const config = readFileSync(join(SRC, 'overview', 'config.ts'), 'utf8')
+    expect(config).toMatch(/\n  superAdmin\?: boolean\n/)
+  })
+
+  test('no source decides SuperAdmin itself or names it another way', () => {
+    for (const file of sources(SRC)) {
+      const text = readFileSync(file, 'utf8')
+      expect({ file, hit: /isGlobalAdmin|global[ -]admin/i.test(text) }).toEqual({ file, hit: false })
+      expect({ file, hit: /owner\s*===?\s*['"]admin['"]|orgs\?*\.?\[0\]/.test(text) }).toEqual({ file, hit: false })
+    }
+  })
+})

package/src/pipeline/Pipeline.tsx

@@ -16,7 +16,7 @@ import { useReducedMotion } from '../motion/hooks'
 import type { PipelineStage, StageState } from './stages'
 import { Text, XStack, YStack } from '@hanzo/gui'
 
-const ACCENT = '#7c5cff'
+const ACCENT = '#e4e4e7'
 const GREEN = '#23c562'
 const RED = '#ff5d8f'
 const MUTED = 'rgba(148,163,184,0.28)'
@@ -26,7 +26,7 @@ export interface PipelineProps {
   stages: PipelineStage[]
   /** A short status label shown above the track (e.g. `pipelineModel(...).label`). */
   label?: string
-  /** Accent tone for the filled track + active stage. Defaults by state (green live / red error / purple). */
+  /** Accent tone for the filled track + active stage. Defaults by state (green live / red error / ink). */
   tone?: string
   /** Animate the active leg + pulse. Default true; reduced motion still forces static. */
   animate?: boolean

package/src/pipeline/stages.ts

@@ -151,6 +151,6 @@ export function pipelineModel(status?: string | null, furthestReached = -1): Pip
 }
 
 /** The accent tone for a model: red on failure, green on live, else the accent. */
-export function pipelineTone(model: Pick<PipelineModel, 'live' | 'errored'>, accent = '#7c5cff'): string {
+export function pipelineTone(model: Pick<PipelineModel, 'live' | 'errored'>, accent = '#e4e4e7'): string {
   return model.errored ? '#ff5d8f' : model.live ? '#23c562' : accent
 }