app: rebuild interface base on scificn-ui Mission Control layout (placeholder content)
CI / build + unit + e2e (pull_request) Failing after 13m21s
CI / build + unit + e2e (pull_request) Failing after 13m21s
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type BarChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
|
||||
|
||||
export interface BarChartEntry {
|
||||
label: string
|
||||
value: number
|
||||
}
|
||||
|
||||
export interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
data: BarChartEntry[]
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
variant?: BarChartVariant
|
||||
title?: string
|
||||
showValues?: boolean
|
||||
/** Override the max value for scaling. Defaults to max(data). */
|
||||
max?: number
|
||||
}
|
||||
|
||||
const VERTICAL_CHART_HEIGHT = 144 // px — 9rem
|
||||
|
||||
const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
data,
|
||||
orientation = 'horizontal',
|
||||
variant = 'ACTIVE',
|
||||
title,
|
||||
showValues = true,
|
||||
max,
|
||||
style,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const computedMax = max ?? Math.max(...data.map((d) => d.value), 1)
|
||||
|
||||
const accentColor =
|
||||
variant === 'ACTIVE' ? 'var(--color-green)' :
|
||||
variant === 'WARNING' ? 'var(--color-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--color-red)' :
|
||||
'var(--text-secondary)'
|
||||
|
||||
const accentGlow =
|
||||
variant === 'ACTIVE' ? 'var(--glow-green)' :
|
||||
variant === 'WARNING' ? 'var(--glow-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--glow-red)' :
|
||||
'none'
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(className)}
|
||||
style={{
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--surface)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
overflow: 'hidden',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{/* Title bar */}
|
||||
{title && (
|
||||
<div
|
||||
style={{
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
background: 'var(--surface-raised)',
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{orientation === 'horizontal' ? (
|
||||
/* ── Horizontal bars ── */
|
||||
<div
|
||||
style={{
|
||||
padding: '0.75rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5rem',
|
||||
}}
|
||||
>
|
||||
{data.map((entry, i) => {
|
||||
const pct = Math.max((entry.value / computedMax) * 100, 0)
|
||||
return (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
|
||||
{/* Label */}
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
width: 'clamp(3rem, 20%, 7rem)',
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{entry.label}
|
||||
</span>
|
||||
|
||||
{/* Track */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
height: '0.65rem',
|
||||
background: 'var(--surface-raised)',
|
||||
border: '1px solid var(--border)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
width: `${pct}%`,
|
||||
background: accentColor,
|
||||
boxShadow: accentGlow,
|
||||
opacity: 0.85,
|
||||
transition: 'width 0.4s ease',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
{showValues && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: accentColor,
|
||||
letterSpacing: '0.04em',
|
||||
width: '3rem',
|
||||
textAlign: 'right',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{entry.value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
/* ── Vertical bars ── */
|
||||
<div>
|
||||
{/* Bar area */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
gap: '0.4rem',
|
||||
height: VERTICAL_CHART_HEIGHT,
|
||||
padding: '0.75rem 0.75rem 0',
|
||||
}}
|
||||
>
|
||||
{data.map((entry, i) => {
|
||||
const pct = Math.max((entry.value / computedMax) * 100, 0)
|
||||
const barPx = Math.round((pct / 100) * VERTICAL_CHART_HEIGHT)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: VERTICAL_CHART_HEIGHT,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '0.2rem',
|
||||
}}
|
||||
>
|
||||
{/* Value above bar */}
|
||||
{showValues && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.5rem',
|
||||
color: accentColor,
|
||||
letterSpacing: '0.04em',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{entry.value}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Bar */}
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: barPx > 0 ? barPx : 0,
|
||||
minHeight: entry.value > 0 ? 2 : 0,
|
||||
background: accentColor,
|
||||
boxShadow: accentGlow,
|
||||
opacity: 0.85,
|
||||
flexShrink: 0,
|
||||
transition: 'height 0.4s ease',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Labels row */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.4rem',
|
||||
padding: '0.25rem 0.75rem 0.75rem',
|
||||
borderTop: '1px solid var(--border)',
|
||||
marginTop: '0.25rem',
|
||||
}}
|
||||
>
|
||||
{data.map((entry, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
fontSize: '0.5rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{entry.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
BarChart.displayName = 'BarChart'
|
||||
|
||||
export { BarChart }
|
||||
@@ -0,0 +1,312 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type LineChartVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
|
||||
|
||||
export interface LineChartSeries {
|
||||
id: string
|
||||
label: string
|
||||
data: number[]
|
||||
variant?: LineChartVariant
|
||||
}
|
||||
|
||||
export interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
series: LineChartSeries[]
|
||||
labels: string[]
|
||||
title?: string
|
||||
height?: number
|
||||
min?: number
|
||||
max?: number
|
||||
showDots?: boolean
|
||||
showArea?: boolean
|
||||
showGrid?: boolean
|
||||
showLegend?: boolean
|
||||
animated?: boolean
|
||||
}
|
||||
|
||||
const LEFT = 40
|
||||
const RIGHT = 8
|
||||
const TOP = 8
|
||||
const BOTTOM = 24
|
||||
|
||||
const SERIES_COLORS = [
|
||||
'var(--color-green)',
|
||||
'var(--color-amber)',
|
||||
'var(--color-red)',
|
||||
'var(--color-blue)',
|
||||
]
|
||||
|
||||
const VARIANT_COLORS: Record<LineChartVariant, string> = {
|
||||
DEFAULT: 'var(--text-secondary)',
|
||||
ACTIVE: 'var(--color-green)',
|
||||
WARNING: 'var(--color-amber)',
|
||||
CRITICAL: 'var(--color-red)',
|
||||
}
|
||||
|
||||
function seriesColor(s: LineChartSeries, idx: number): string {
|
||||
if (s.variant) return VARIANT_COLORS[s.variant]
|
||||
return SERIES_COLORS[idx % SERIES_COLORS.length]
|
||||
}
|
||||
|
||||
const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
series,
|
||||
labels,
|
||||
title,
|
||||
height = 160,
|
||||
min,
|
||||
max,
|
||||
showDots = true,
|
||||
showArea = false,
|
||||
showGrid = true,
|
||||
showLegend,
|
||||
animated = true,
|
||||
style,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const containerRef = React.useRef<HTMLDivElement>(null)
|
||||
const [svgW, setSvgW] = React.useState(500)
|
||||
const [drawn, setDrawn] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!containerRef.current) return
|
||||
const ro = new ResizeObserver(entries => {
|
||||
setSvgW(entries[0].contentRect.width)
|
||||
})
|
||||
ro.observe(containerRef.current)
|
||||
return () => ro.disconnect()
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
const id = requestAnimationFrame(() => setDrawn(true))
|
||||
return () => cancelAnimationFrame(id)
|
||||
}, [])
|
||||
|
||||
const allValues = series.flatMap(s => s.data)
|
||||
const dataMin = allValues.length > 0 ? Math.min(...allValues) : 0
|
||||
const dataMax = allValues.length > 0 ? Math.max(...allValues) : 100
|
||||
const minV = min ?? dataMin
|
||||
const maxV = max ?? dataMax
|
||||
const range = Math.max(maxV - minV, 1)
|
||||
|
||||
const plotW = svgW - LEFT - RIGHT
|
||||
const plotH = height - TOP - BOTTOM
|
||||
const n = labels.length
|
||||
|
||||
function xPos(i: number) {
|
||||
return LEFT + (n <= 1 ? plotW / 2 : (i / (n - 1)) * plotW)
|
||||
}
|
||||
|
||||
function yPos(v: number) {
|
||||
return TOP + (1 - (v - minV) / range) * plotH
|
||||
}
|
||||
|
||||
function buildLinePath(data: number[]): string {
|
||||
return data
|
||||
.map((v, i) => `${i === 0 ? 'M' : 'L'} ${xPos(i).toFixed(1)} ${yPos(v).toFixed(1)}`)
|
||||
.join(' ')
|
||||
}
|
||||
|
||||
function buildAreaPath(data: number[]): string {
|
||||
if (data.length === 0) return ''
|
||||
const line = buildLinePath(data)
|
||||
const firstX = xPos(0).toFixed(1)
|
||||
const lastX = xPos(data.length - 1).toFixed(1)
|
||||
const bottomY = (TOP + plotH).toFixed(1)
|
||||
return `${line} L ${lastX} ${bottomY} L ${firstX} ${bottomY} Z`
|
||||
}
|
||||
|
||||
const gridFracs = [0, 1 / 3, 2 / 3, 1]
|
||||
const showLeg = showLegend ?? series.length > 1
|
||||
const step = Math.max(1, Math.ceil(n / 8))
|
||||
|
||||
const shouldAnimate = animated
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(className)}
|
||||
style={{
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--surface)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
overflow: 'hidden',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{title && (
|
||||
<div
|
||||
style={{
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
background: 'var(--surface-raised)',
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={containerRef} style={{ width: '100%', height: `${height}px` }}>
|
||||
<svg width={svgW} height={height} style={{ display: 'block' }}>
|
||||
{/* Grid */}
|
||||
{showGrid && gridFracs.map((f, gi) => {
|
||||
const y = TOP + f * plotH
|
||||
const val = minV + (1 - f) * range
|
||||
return (
|
||||
<g key={gi}>
|
||||
<line
|
||||
x1={LEFT}
|
||||
y1={y.toFixed(1)}
|
||||
x2={(LEFT + plotW).toFixed(1)}
|
||||
y2={y.toFixed(1)}
|
||||
stroke="var(--border)"
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<text
|
||||
x={LEFT - 4}
|
||||
y={y}
|
||||
textAnchor="end"
|
||||
dominantBaseline="middle"
|
||||
fontSize={9}
|
||||
fill="var(--text-muted)"
|
||||
fontFamily="var(--font-mono)"
|
||||
>
|
||||
{val.toFixed(0)}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* X-axis labels */}
|
||||
{labels.map((label, i) => {
|
||||
if (i % step !== 0 && i !== n - 1) return null
|
||||
return (
|
||||
<text
|
||||
key={i}
|
||||
x={xPos(i)}
|
||||
y={TOP + plotH + 14}
|
||||
textAnchor="middle"
|
||||
fontSize={9}
|
||||
fill="var(--text-muted)"
|
||||
fontFamily="var(--font-mono)"
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Series */}
|
||||
{series.map((s, si) => {
|
||||
if (s.data.length === 0) return null
|
||||
const color = seriesColor(s, si)
|
||||
const linePath = buildLinePath(s.data)
|
||||
const areaPath = buildAreaPath(s.data)
|
||||
|
||||
return (
|
||||
<g key={s.id}>
|
||||
{/* Area fill */}
|
||||
{showArea && (
|
||||
<path d={areaPath} fill={color} opacity={0.1} />
|
||||
)}
|
||||
|
||||
{/* Glow layer */}
|
||||
<path
|
||||
d={linePath}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={6}
|
||||
opacity={0.12}
|
||||
pathLength={100}
|
||||
strokeDasharray={100}
|
||||
strokeDashoffset={shouldAnimate ? (drawn ? 0 : 100) : 0}
|
||||
style={shouldAnimate ? { transition: 'stroke-dashoffset 0.8s ease' } : undefined}
|
||||
/>
|
||||
|
||||
{/* Main line */}
|
||||
<path
|
||||
d={linePath}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={1.5}
|
||||
pathLength={100}
|
||||
strokeDasharray={100}
|
||||
strokeDashoffset={shouldAnimate ? (drawn ? 0 : 100) : 0}
|
||||
style={shouldAnimate ? { transition: 'stroke-dashoffset 0.8s ease' } : undefined}
|
||||
/>
|
||||
|
||||
{/* Dots */}
|
||||
{showDots && s.data.map((v, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
cx={xPos(i)}
|
||||
cy={yPos(v)}
|
||||
r={3}
|
||||
fill={color}
|
||||
opacity={shouldAnimate ? (drawn ? 1 : 0) : 1}
|
||||
style={shouldAnimate ? { transition: 'opacity 0.8s ease 0.4s' } : undefined}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
{showLeg && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.75rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
borderTop: '1px solid var(--border)',
|
||||
background: 'var(--surface-raised)',
|
||||
}}
|
||||
>
|
||||
{series.map((s, si) => {
|
||||
const color = seriesColor(s, si)
|
||||
return (
|
||||
<div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '0.5rem',
|
||||
height: '0.5rem',
|
||||
borderRadius: '50%',
|
||||
background: color,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.06em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
LineChart.displayName = 'LineChart'
|
||||
|
||||
export { LineChart }
|
||||
@@ -0,0 +1,158 @@
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type ProgressRingVariant = 'DEFAULT' | 'ACTIVE' | 'WARNING' | 'CRITICAL'
|
||||
|
||||
export interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
value: number
|
||||
size?: number
|
||||
strokeWidth?: number
|
||||
label?: string
|
||||
showValue?: boolean
|
||||
variant?: ProgressRingVariant
|
||||
}
|
||||
|
||||
const ProgressRing = React.forwardRef<HTMLDivElement, ProgressRingProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
value = 0,
|
||||
size = 120,
|
||||
strokeWidth = 6,
|
||||
label,
|
||||
showValue = true,
|
||||
variant = 'DEFAULT',
|
||||
style,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const pct = Math.min(Math.max(value, 0), 100)
|
||||
const cx = size / 2
|
||||
const cy = size / 2
|
||||
const r = (size - strokeWidth) / 2
|
||||
const circ = 2 * Math.PI * r
|
||||
const offset = circ * (1 - pct / 100)
|
||||
|
||||
const accentColor =
|
||||
variant === 'ACTIVE' ? 'var(--color-green)' :
|
||||
variant === 'WARNING' ? 'var(--color-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--color-red)' :
|
||||
'var(--text-secondary)'
|
||||
|
||||
const textGlow =
|
||||
variant === 'ACTIVE' ? 'var(--text-glow-green)' :
|
||||
variant === 'WARNING' ? 'var(--text-glow-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--text-glow-red)' :
|
||||
'none'
|
||||
|
||||
const isSmall = size < 80
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(className)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: size,
|
||||
height: size,
|
||||
fontFamily: 'var(--font-mono)',
|
||||
flexShrink: 0,
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
style={{ position: 'absolute', inset: 0 }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Track ring */}
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r}
|
||||
fill="none"
|
||||
stroke="var(--border)"
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
|
||||
{/* Glow layer — wider, low opacity */}
|
||||
{pct > 0 && (
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r}
|
||||
fill="none"
|
||||
stroke={accentColor}
|
||||
strokeWidth={strokeWidth + 8}
|
||||
strokeDasharray={circ}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="butt"
|
||||
transform={`rotate(-90 ${cx} ${cy})`}
|
||||
opacity={0.12}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Main arc */}
|
||||
<circle
|
||||
cx={cx} cy={cy} r={r}
|
||||
fill="none"
|
||||
stroke={accentColor}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circ}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="butt"
|
||||
transform={`rotate(-90 ${cx} ${cy})`}
|
||||
style={{ transition: 'stroke-dashoffset 0.4s ease' }}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Center label */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.1rem',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{showValue && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: isSmall ? '0.7rem' : '1.2rem',
|
||||
fontWeight: 700,
|
||||
color: accentColor,
|
||||
textShadow: textGlow,
|
||||
lineHeight: 1,
|
||||
letterSpacing: '-0.02em',
|
||||
}}
|
||||
>
|
||||
{Math.round(pct)}%
|
||||
</span>
|
||||
)}
|
||||
{label && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: isSmall ? '0.45rem' : '0.55rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
textAlign: 'center',
|
||||
maxWidth: r * 1.2,
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
ProgressRing.displayName = 'ProgressRing'
|
||||
|
||||
export { ProgressRing }
|
||||
@@ -0,0 +1,146 @@
|
||||
import * as React from 'react'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const statCardVariants = cva(
|
||||
[
|
||||
'relative flex flex-col font-mono',
|
||||
'border border-solid rounded-none',
|
||||
],
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
DEFAULT: ['border-[var(--border)]'],
|
||||
ACTIVE: ['border-[var(--color-green)]'],
|
||||
WARNING: ['border-[var(--color-amber)]'],
|
||||
CRITICAL: ['border-[var(--color-red)]'],
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: 'DEFAULT' },
|
||||
}
|
||||
)
|
||||
|
||||
export interface StatCardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof statCardVariants> {
|
||||
label: string
|
||||
value: string | number
|
||||
/** Delta text, e.g. "+2.3%" */
|
||||
delta?: string
|
||||
/** true = positive (▲ green), false = negative (▼ red), undefined = neutral */
|
||||
deltaPositive?: boolean
|
||||
/** Small status line shown at the bottom of the card */
|
||||
sublabel?: string
|
||||
}
|
||||
|
||||
const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
variant = 'DEFAULT',
|
||||
label,
|
||||
value,
|
||||
delta,
|
||||
deltaPositive,
|
||||
sublabel,
|
||||
style,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const accentColor =
|
||||
variant === 'ACTIVE' ? 'var(--color-green)' :
|
||||
variant === 'WARNING' ? 'var(--color-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--color-red)' :
|
||||
'var(--text-secondary)'
|
||||
|
||||
const accentGlow =
|
||||
variant === 'ACTIVE' ? 'var(--text-glow-green)' :
|
||||
variant === 'WARNING' ? 'var(--text-glow-amber)' :
|
||||
variant === 'CRITICAL' ? 'var(--text-glow-red)' :
|
||||
'none'
|
||||
|
||||
const deltaColor =
|
||||
deltaPositive === true ? 'var(--color-green)' :
|
||||
deltaPositive === false ? 'var(--color-red)' :
|
||||
'var(--text-muted)'
|
||||
|
||||
const deltaSymbol =
|
||||
deltaPositive === true ? '▲ ' :
|
||||
deltaPositive === false ? '▼ ' :
|
||||
'— '
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(statCardVariants({ variant }), className)}
|
||||
style={{
|
||||
padding: '1rem',
|
||||
gap: '0.4rem',
|
||||
background: 'var(--surface)',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{/* Label */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: '2rem',
|
||||
fontWeight: 700,
|
||||
color: accentColor,
|
||||
textShadow: accentGlow,
|
||||
lineHeight: 1,
|
||||
letterSpacing: '-0.02em',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
|
||||
{/* Delta */}
|
||||
{delta !== undefined && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.7rem',
|
||||
color: deltaColor,
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
{deltaSymbol}{delta}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sublabel */}
|
||||
{sublabel && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
marginTop: 'auto',
|
||||
paddingTop: '0.6rem',
|
||||
borderTop: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{sublabel}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
StatCard.displayName = 'StatCard'
|
||||
|
||||
export { StatCard, statCardVariants }
|
||||
@@ -0,0 +1,158 @@
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type SystemStatus = 'ACTIVE' | 'OFFLINE' | 'WARNING' | 'CRITICAL' | 'SCANNING'
|
||||
|
||||
export interface SystemEntry {
|
||||
name: string
|
||||
status: SystemStatus
|
||||
/** Optional secondary text shown beside the name */
|
||||
detail?: string
|
||||
}
|
||||
|
||||
export interface StatusGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
systems: SystemEntry[]
|
||||
title?: string
|
||||
columns?: 1 | 2 | 3
|
||||
}
|
||||
|
||||
function statusColor(s: SystemStatus): string {
|
||||
switch (s) {
|
||||
case 'ACTIVE': return 'var(--color-green)'
|
||||
case 'OFFLINE': return 'var(--text-muted)'
|
||||
case 'WARNING': return 'var(--color-amber)'
|
||||
case 'CRITICAL': return 'var(--color-red)'
|
||||
case 'SCANNING': return 'var(--color-green)'
|
||||
}
|
||||
}
|
||||
|
||||
function statusGlow(s: SystemStatus): string {
|
||||
switch (s) {
|
||||
case 'ACTIVE': return 'var(--glow-green)'
|
||||
case 'SCANNING': return 'var(--glow-green)'
|
||||
case 'WARNING': return 'var(--glow-amber)'
|
||||
case 'CRITICAL': return 'var(--glow-red)'
|
||||
default: return 'none'
|
||||
}
|
||||
}
|
||||
|
||||
const StatusGrid = React.forwardRef<HTMLDivElement, StatusGridProps>(
|
||||
({ className, systems, title, columns = 1, style, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(className)}
|
||||
style={{
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--surface)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
overflow: 'hidden',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{/* Header */}
|
||||
{title && (
|
||||
<div
|
||||
style={{
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
background: 'var(--surface-raised)',
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Grid of rows */}
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
||||
}}
|
||||
>
|
||||
{systems.map((system, i) => {
|
||||
const color = statusColor(system.status)
|
||||
const glow = statusGlow(system.status)
|
||||
const isScanning = system.status === 'SCANNING'
|
||||
|
||||
// border logic: no bottom border on last row(s), no right on last column
|
||||
const totalRows = Math.ceil(systems.length / columns)
|
||||
const rowIndex = Math.floor(i / columns)
|
||||
const colIndex = i % columns
|
||||
const isLastRow = rowIndex === totalRows - 1
|
||||
const isLastCol = colIndex === columns - 1
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr auto',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
borderBottom: isLastRow ? 'none' : '1px solid var(--border)',
|
||||
borderRight: isLastCol ? 'none' : '1px solid var(--border)',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
{/* Name + optional detail */}
|
||||
<span
|
||||
style={{
|
||||
minWidth: 0,
|
||||
fontSize: '0.7rem',
|
||||
color: 'var(--text-secondary)',
|
||||
letterSpacing:'0.06em',
|
||||
textTransform:'uppercase',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{system.name}
|
||||
{system.detail && (
|
||||
<span style={{ color: 'var(--text-muted)', marginLeft: '0.5rem', textTransform: 'none' }}>
|
||||
{system.detail}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{/* Status dot + label */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
borderRadius: '50%',
|
||||
background: color,
|
||||
boxShadow: glow,
|
||||
animation: isScanning ? 'blink-cursor 1s step-end infinite' : undefined,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color,
|
||||
letterSpacing: '0.08em',
|
||||
}}
|
||||
>
|
||||
{system.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
StatusGrid.displayName = 'StatusGrid'
|
||||
|
||||
export { StatusGrid }
|
||||
@@ -0,0 +1,72 @@
|
||||
import * as React from 'react'
|
||||
import * as TabsPrimitive from '@radix-ui/react-tabs'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
const TabsGroup = TabsPrimitive.List // alias
|
||||
|
||||
/* ── List ── */
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-end',
|
||||
'border-b border-[var(--border)]',
|
||||
'w-full gap-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
|
||||
/* ── Trigger ── */
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center',
|
||||
'px-4 py-2',
|
||||
'text-[0.7rem] font-mono font-medium uppercase tracking-widest',
|
||||
'border-b-2 border-transparent',
|
||||
'-mb-px',
|
||||
'text-[var(--text-muted)]',
|
||||
'cursor-pointer',
|
||||
'outline-none',
|
||||
'transition-all duration-150',
|
||||
'hover:text-[var(--text-secondary)]',
|
||||
'data-[state=active]:text-[var(--color-green)]',
|
||||
'data-[state=active]:border-b-[var(--color-green)]',
|
||||
'data-[state=active]:[text-shadow:var(--text-glow-green)]',
|
||||
'disabled:pointer-events-none disabled:opacity-40',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
|
||||
/* ── Content ── */
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'mt-4',
|
||||
'focus-visible:outline-none',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
|
||||
export { Tabs, TabsGroup, TabsList, TabsTrigger, TabsContent }
|
||||
@@ -0,0 +1,187 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export type TerminalLineType = 'input' | 'output' | 'warn' | 'error' | 'system'
|
||||
|
||||
export interface TerminalLine {
|
||||
type?: TerminalLineType
|
||||
text: string
|
||||
timestamp?: string
|
||||
}
|
||||
|
||||
export interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
lines?: TerminalLine[]
|
||||
prompt?: string
|
||||
title?: string
|
||||
height?: string | number
|
||||
blinkCursor?: boolean
|
||||
}
|
||||
|
||||
function lineColor(type: TerminalLineType = 'output'): string {
|
||||
switch (type) {
|
||||
case 'input': return 'var(--color-green)'
|
||||
case 'output': return 'var(--text-secondary)'
|
||||
case 'warn': return 'var(--color-amber)'
|
||||
case 'error': return 'var(--color-red)'
|
||||
case 'system': return 'var(--text-muted)'
|
||||
}
|
||||
}
|
||||
|
||||
function linePrefix(type: TerminalLineType = 'output'): string {
|
||||
switch (type) {
|
||||
case 'input': return '>'
|
||||
case 'output': return ' '
|
||||
case 'warn': return '⚠'
|
||||
case 'error': return '✕'
|
||||
case 'system': return '#'
|
||||
}
|
||||
}
|
||||
|
||||
const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
lines = [],
|
||||
prompt = '>',
|
||||
title = 'TERMINAL',
|
||||
height = '16rem',
|
||||
blinkCursor = true,
|
||||
style,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const bodyRef = React.useRef<HTMLDivElement>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (bodyRef.current) {
|
||||
bodyRef.current.scrollTop = bodyRef.current.scrollHeight
|
||||
}
|
||||
}, [lines])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(className)}
|
||||
style={{
|
||||
border: '1px solid var(--border)',
|
||||
background: 'var(--surface)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
...style,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{/* Title bar */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderBottom: '1px solid var(--border)',
|
||||
background: 'var(--surface-raised)',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6rem',
|
||||
color: 'var(--text-muted)',
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
{/* Status dot */}
|
||||
<span
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--color-green)',
|
||||
boxShadow: 'var(--glow-green)',
|
||||
animation: 'blink-cursor 2s step-end infinite',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Output body */}
|
||||
<div
|
||||
ref={bodyRef}
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
padding: '0.75rem',
|
||||
height,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.2rem',
|
||||
}}
|
||||
>
|
||||
{lines.map((line, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.5rem',
|
||||
fontSize: '0.75rem',
|
||||
lineHeight: 1.6,
|
||||
color: lineColor(line.type),
|
||||
}}
|
||||
>
|
||||
{line.timestamp && (
|
||||
<span
|
||||
style={{
|
||||
color: 'var(--text-muted)',
|
||||
flexShrink: 0,
|
||||
fontSize: '0.65rem',
|
||||
}}
|
||||
>
|
||||
{line.timestamp}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ flexShrink: 0, opacity: 0.5, userSelect: 'none' }}>
|
||||
{linePrefix(line.type)}
|
||||
</span>
|
||||
<span style={{ wordBreak: 'break-all' }}>{line.text}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Blinking cursor */}
|
||||
{blinkCursor && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: '0.75rem',
|
||||
marginTop: '0.1rem',
|
||||
gap: '0.25rem',
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--text-muted)', userSelect: 'none' }}>{prompt}</span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '0.55rem',
|
||||
height: '1em',
|
||||
background: 'var(--color-green)',
|
||||
boxShadow: 'var(--glow-green)',
|
||||
animation: 'blink-cursor 1s step-end infinite',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
Terminal.displayName = 'Terminal'
|
||||
|
||||
export { Terminal }
|
||||
Reference in New Issue
Block a user