feat: implement Orion client UI design (#1727)

Author: zyd123-cmd

moon/apps/web/components/OrionClient/CapabilitiesBadgeList.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Badge, UIText } from '@gitmono/ui'
+
+export function CapabilitiesBadgeList({ capabilities }: { capabilities?: string | string[] }) {
+  if (!capabilities || (Array.isArray(capabilities) && capabilities.length === 0)) {
+    return <UIText color='text-muted'>—</UIText>
+  }
+
+  const list = Array.isArray(capabilities)
+    ? capabilities
+    : capabilities
+        .split(',')
+        .map((c) => c.trim())
+        .filter(Boolean)
+
+  return (
+    <div className='flex flex-wrap gap-1'>
+      {list.map((cap) => (
+        <Badge key={cap} color='default' className='capitalize'>
+          {cap}
+        </Badge>
+      ))}
+    </div>
+  )
+}

moon/apps/web/components/OrionClient/ClientsTable.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import React from 'react'
+import { DataTable } from '@primer/react/experimental'
+
+import { Select, SelectTrigger, SelectValue, UIText } from '@gitmono/ui'
+
+import { StatusBadge } from './StatusBadge'
+import { deriveStatus, OrionClient, OrionClientStatus } from './types'
+
+interface ClientsTableProps {
+  clients: OrionClient[]
+  isLoading?: boolean
+  statusFilter: OrionClientStatus | 'all'
+  onStatusChange: (v: OrionClientStatus | 'all') => void
+  statusOptions: { value: OrionClientStatus | 'all'; label: string }[]
+  capabilityFilter?: string
+  capabilityOptions?: string[]
+  onCapabilityChange?: (v: string) => void
+}
+
+type Row = OrionClient & { statusDerived: OrionClientStatus }
+type UniqueRow = Row & { id: string }
+
+export function ClientsTable({ clients, isLoading, statusFilter, onStatusChange, statusOptions }: ClientsTableProps) {
+  const rows = React.useMemo<UniqueRow[]>(() => {
+    return clients.map((c) => ({
+      ...c,
+      statusDerived: deriveStatus(c),
+      id: c.client_id
+    }))
+  }, [clients])
+
+  const columns = React.useMemo(
+    () => [
+      {
+        header: 'Client ID',
+        field: 'client_id',
+        rowHeader: true,
+        width: '18%',
+        renderCell: (row: Row) => (
+          <div className='min-w-0'>
+            <UIText weight='font-semibold' className='block truncate text-sm'>
+              {row.client_id}
+            </UIText>
+          </div>
+        )
+      },
+      {
+        header: 'Hostname',
+        field: 'hostname',
+        width: '18%',
+        renderCell: (row: Row) => <div className='min-w-0 truncate'>{row.hostname || '—'}</div>
+      },
+      { header: 'Version', field: 'orion_version', width: '10%' },
+      {
+        header: 'Start Time',
+        field: 'start_time',
+        width: '18%',
+        renderCell: (row: Row) => <div className='whitespace-normal break-words'>{formatDateTime(row.start_time)}</div>
+      },
+      {
+        header: 'Last Heartbeat',
+        field: 'last_heartbeat',
+        width: '22%',
+        renderCell: (row: Row) => (
+          <div className='flex flex-col gap-0.5 leading-tight'>
+            <div className='whitespace-normal break-words'>{formatDateTime(row.last_heartbeat)}</div>
+            <UIText color='text-muted' size='text-xs' className='whitespace-nowrap'>
+              {formatRelative(row.last_heartbeat)}
+            </UIText>
+          </div>
+        )
+      },
+      {
+        header: () => (
+          <Select
+            value={statusFilter}
+            options={statusOptions}
+            onChange={(v) => onStatusChange(v as OrionClientStatus | 'all')}
+          >
+            <SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 border-none bg-transparent p-0 text-[11px] font-semibold uppercase shadow-none ring-0 focus:outline-none focus:ring-0'>
+              <SelectValue placeholder='Status' />
+            </SelectTrigger>
+          </Select>
+        ),
+        field: 'statusDerived',
+        width: '14%',
+        renderCell: (row: Row) => <StatusBadge status={row.statusDerived} />
+      }
+    ],
+    [onStatusChange, statusFilter, statusOptions]
+  )
+
+  if (isLoading) {
+    return (
+      <div className='flex h-40 items-center justify-center'>
+        <UIText color='text-muted'>Loading clients…</UIText>
+      </div>
+    )
+  }
+
+  const isEmpty = !rows || rows.length === 0
+
+  return (
+    <div className='border-border overflow-hidden rounded-md border [&_table]:w-full [&_table]:table-fixed [&_tbody_tr:last-child]:border-b-0 [&_tbody_tr]:border-b [&_td]:py-4 [&_th]:py-4 [&_thead_tr]:border-b'>
+      <DataTable aria-label='Orion clients' data={rows} columns={columns as any} />
+      {isEmpty ? (
+        <div className='border-border flex h-40 items-center justify-center border-t'>
+          <UIText color='text-muted'>No Orion clients</UIText>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function formatDateTime(iso: string) {
+  if (!iso) return '—'
+  const d = new Date(iso)
+
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString()
+}
+
+function formatRelative(iso: string) {
+  const d = new Date(iso)
+  const ts = d.getTime()
+
+  if (Number.isNaN(ts)) return 'invalid'
+
+  const diffMs = Date.now() - ts
+  const diffSec = Math.max(0, Math.floor(diffMs / 1000))
+
+  if (diffSec < 60) return `${diffSec}s ago`
+  const diffMin = Math.floor(diffSec / 60)
+
+  if (diffMin < 60) return `${diffMin}m ago`
+  const diffHour = Math.floor(diffMin / 60)
+
+  if (diffHour < 24) return `${diffHour}h ago`
+  const diffDay = Math.floor(diffHour / 24)
+
+  return `${diffDay}d ago`
+}

moon/apps/web/components/OrionClient/StatusBadge.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Badge } from '@gitmono/ui'
+
+import { OrionClientStatus } from './types'
+
+const STATUS_META: Record<
+  OrionClientStatus,
+  { color: 'default' | 'blue' | 'green' | 'brand' | 'orange' | 'amber'; label: string }
+> = {
+  idle: { color: 'green', label: 'Idle' },
+  busy: { color: 'orange', label: 'Busy ' },
+  running: { color: 'blue', label: 'Running build' },
+  downloading: { color: 'blue', label: 'Downloading source' },
+  preparing: { color: 'blue', label: 'Preparing environment' },
+  uploading: { color: 'blue', label: 'Uploading artifacts' },
+  error: { color: 'brand', label: 'Error ' },
+  offline: { color: 'default', label: 'Lost / Offline' }
+}
+
+export function StatusBadge({ status }: { status: OrionClientStatus }) {
+  const meta = STATUS_META[status] ?? STATUS_META.idle
+
+  return (
+    <Badge className='min-w-[140px] justify-center px-3 py-0.5 text-xs' color={meta.color}>
+      {meta.label}
+    </Badge>
+  )
+}

moon/apps/web/components/OrionClient/index.tsx

@@ -0,0 +1,4 @@
+export * from './types'
+export * from './StatusBadge'
+export * from './CapabilitiesBadgeList'
+export * from './ClientsTable'

moon/apps/web/components/OrionClient/types.ts

@@ -0,0 +1,37 @@
+'use client'
+
+export type OrionClientStatus =
+  | 'idle'
+  | 'busy'
+  | 'running'
+  | 'downloading'
+  | 'preparing'
+  | 'uploading'
+  | 'error'
+  | 'offline'
+
+export interface OrionClient {
+  client_id: string
+  hostname: string
+  instance_id: string
+  orion_version: string
+  start_time: string
+  last_heartbeat: string
+  supported_capabilities?: string | string[]
+  status?: OrionClientStatus
+}
+
+export const OFFLINE_THRESHOLD_SECONDS = 30
+
+export function deriveStatus(client: OrionClient, now: number = Date.now()): OrionClientStatus {
+  if (client.status) return client.status
+
+  const lastHeartbeat = new Date(client.last_heartbeat).getTime()
+  const diffSeconds = (now - lastHeartbeat) / 1000
+
+  if (Number.isFinite(diffSeconds) && diffSeconds > OFFLINE_THRESHOLD_SECONDS) {
+    return 'offline'
+  }
+
+  return 'idle'
+}