feat(web,server): servers table row visual redesign with tags

apps/web/src/components/dashboard/dashboard-switcher.tsx

@@ -97,15 +97,23 @@ export function DashboardSwitcher({ dashboards, currentId, onSelect, isAdmin }:
         <SelectContent>
           {dashboards.map((d) => (
             <SelectItem key={d.id} value={d.id}>
-              {d.is_default && <Star className="mr-1 inline size-3 text-amber-500" />}
-              {d.name}
+              <span className="flex items-center gap-1.5">
+                {d.is_default && <Star className="size-3 shrink-0 text-amber-500" />}
+                <span>{d.name}</span>
+              </span>
             </SelectItem>
           ))}
         </SelectContent>
       </Select>
 
       {isAdmin && !isDefault && (
-        <Button onClick={handleSetDefault} size="sm" title={t('set_default')} variant="ghost">
+        <Button
+          aria-label={t('set_default')}
+          onClick={handleSetDefault}
+          size="icon-sm"
+          title={t('set_default')}
+          variant="ghost"
+        >
           <Star className="size-4" />
         </Button>
       )}
@@ -125,7 +133,13 @@ export function DashboardSwitcher({ dashboards, currentId, onSelect, isAdmin }:
       )}
 
       {isAdmin && !isDefault && (
-        <Button onClick={() => setDeleteDialogOpen(true)} size="sm" variant="ghost">
+        <Button
+          aria-label={t('delete_dashboard')}
+          onClick={() => setDeleteDialogOpen(true)}
+          size="icon-sm"
+          title={t('delete_dashboard')}
+          variant="ghost"
+        >
           <TrashIcon className="size-4 text-destructive" />
         </Button>
       )}

apps/web/src/components/dashboard/widgets/stat-number.test.tsx

@@ -42,6 +42,8 @@ function makeServer(id: string, overrides: Partial<ServerMetrics> = {}): ServerM
     swap_total: 0,
     disk_used: 20_000_000_000,
     disk_total: 40_000_000_000,
+    disk_read_bytes_per_sec: 0,
+    disk_write_bytes_per_sec: 0,
     net_in_speed: 1024,
     net_out_speed: 2048,
     net_in_transfer: 1,

apps/web/src/components/server/server-card.test.tsx

@@ -63,6 +63,8 @@ function makeServer(overrides: Partial<Parameters<typeof ServerCard>[0]['server'
     mem_total: 8_589_934_592,
     disk_used: 21_474_836_480,
     disk_total: 53_687_091_200,
+    disk_read_bytes_per_sec: 0,
+    disk_write_bytes_per_sec: 0,
     swap_used: 536_870_912,
     swap_total: 2_147_483_648,
     load1: 0.72,

apps/web/src/components/server/server-card.tsx

@@ -11,6 +11,7 @@ import type { ServerMetrics } from '@/hooks/use-servers-ws'
 import { useTrafficOverview } from '@/hooks/use-traffic-overview'
 import { getLatencyBarColor, isLatencyFailure } from '@/lib/network-latency-constants'
 import { latencyColorClass } from '@/lib/network-types'
+import { computeTrafficQuota } from '@/lib/traffic'
 import { countryCodeToFlag, formatBytes, formatSpeed, formatUptime } from '@/lib/utils'
 import { useUpgradeJobsStore } from '@/stores/upgrade-jobs-store'
 import { buildServerCardNetworkState, type ServerCardMetricPoint } from './server-card-network-data'
@@ -105,8 +106,6 @@ function formatLoad(load: number): string {
   return load.toFixed(2)
 }
 
-const DEFAULT_TRAFFIC_LIMIT_BYTES = 1024 ** 4 // 1 TiB fallback when no quota configured
-
 function averageLossRatio(point: ServerCardMetricPoint): number | null {
   if (point.targets.length === 0) {
     return null
@@ -184,15 +183,15 @@ const ServerCardInner = ({ server }: ServerCardProps) => {
   )
 
   const trafficEntry = trafficOverview?.find((entry) => entry.server_id === server.id)
-  const trafficUsed = trafficEntry
-    ? trafficEntry.cycle_in + trafficEntry.cycle_out
-    : server.net_in_transfer + server.net_out_transfer
-  const trafficLimit =
-    trafficEntry?.traffic_limit != null && trafficEntry.traffic_limit > 0
-      ? trafficEntry.traffic_limit
-      : DEFAULT_TRAFFIC_LIMIT_BYTES
-  const trafficRawPct = trafficLimit > 0 ? (trafficUsed / trafficLimit) * 100 : 0
-  const trafficRingPct = Math.min(trafficRawPct, 100)
+  const {
+    used: trafficUsed,
+    limit: trafficLimit,
+    pct: trafficRingPct
+  } = computeTrafficQuota({
+    entry: trafficEntry,
+    netInTransfer: server.net_in_transfer,
+    netOutTransfer: server.net_out_transfer
+  })
   const trafficDaysRemaining = trafficEntry?.days_remaining ?? null
 
   return (
@@ -277,12 +276,12 @@ const ServerCardInner = ({ server }: ServerCardProps) => {
         <CompactMetric
           className="items-center"
           label={t('card_disk_read')}
-          value={formatSpeed(server.disk_read_bytes_per_sec ?? 0)}
+          value={formatSpeed(server.disk_read_bytes_per_sec)}
         />
         <CompactMetric
           className="items-center"
           label={t('card_disk_write')}
-          value={formatSpeed(server.disk_write_bytes_per_sec ?? 0)}
+          value={formatSpeed(server.disk_write_bytes_per_sec)}
         />
         <CompactMetric
           className="items-center"

apps/web/src/components/server/server-edit-dialog.tsx

@@ -7,9 +7,39 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useServerTags, useUpdateServerTags } from '@/hooks/use-server-tags'
 import { api } from '@/lib/api-client'
 import type { ServerGroup, ServerResponse, UpdateServerInput } from '@/lib/api-schema'
 
+const TAG_SPLIT_RE = /[\s,]+/
+const TAG_VALID_RE = /^[A-Za-z0-9_.-]+$/
+
+function parseTagsInput(raw: string): { tags: string[]; error: string | null } {
+  const parts = raw
+    .split(TAG_SPLIT_RE)
+    .map((t) => t.trim())
+    .filter(Boolean)
+  const seen = new Set<string>()
+  const deduped: string[] = []
+  for (const tag of parts) {
+    if (tag.length > 16) {
+      return { tags: [], error: 'tags_validation_too_long' }
+    }
+    if (!TAG_VALID_RE.test(tag)) {
+      return { tags: [], error: 'tags_validation_invalid_char' }
+    }
+    if (seen.has(tag)) {
+      continue
+    }
+    seen.add(tag)
+    deduped.push(tag)
+  }
+  if (deduped.length > 8) {
+    return { tags: [], error: 'tags_validation_too_many' }
+  }
+  return { tags: deduped.sort(), error: null }
+}
+
 interface ServerEditDialogProps {
   onClose: () => void
   open: boolean
@@ -34,6 +64,8 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
   )
   const [trafficLimitType, setTrafficLimitType] = useState(server.traffic_limit_type ?? 'sum')
   const [billingStartDay, setBillingStartDay] = useState(server.billing_start_day?.toString() ?? '')
+  const [tagsInput, setTagsInput] = useState('')
+  const [tagsDirty, setTagsDirty] = useState(false)
 
   const { data: groups } = useQuery<ServerGroup[]>({
     queryKey: ['server-groups'],
@@ -42,6 +74,9 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
     enabled: open
   })
 
+  const { data: initialTags } = useServerTags(server.id, open)
+  const tagsMutation = useUpdateServerTags(server.id)
+
   useEffect(() => {
     if (open) {
       setName(server.name)
@@ -60,6 +95,13 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
     }
   }, [open, server])
 
+  useEffect(() => {
+    if (open && initialTags) {
+      setTagsInput(initialTags.join(', '))
+      setTagsDirty(false)
+    }
+  }, [open, initialTags])
+
   const mutation = useMutation({
     mutationFn: (payload: UpdateServerInput) => api.put<ServerResponse>(`/api/servers/${server.id}`, payload),
     onSuccess: (data) => {
@@ -68,32 +110,53 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
     }
   })
 
-  const handleSubmit = (e: FormEvent) => {
+  const buildPayload = (): UpdateServerInput => ({
+    name,
+    weight,
+    hidden,
+    group_id: groupId || null,
+    remark: remark || null,
+    public_remark: publicRemark || null,
+    price: price ? Number.parseFloat(price) : null,
+    billing_cycle: billingCycle || null,
+    currency: currency || null,
+    expired_at: expiredAt ? `${expiredAt}T00:00:00Z` : null,
+    traffic_limit: trafficLimit ? Math.round(Number.parseFloat(trafficLimit) * 1024 ** 3) : null,
+    traffic_limit_type: trafficLimitType || null,
+    billing_start_day: billingStartDay ? Number.parseInt(billingStartDay, 10) : null
+  })
+
+  const saveTags = async (tags: string[]): Promise<boolean> => {
+    try {
+      await tagsMutation.mutateAsync(tags)
+      return true
+    } catch (err) {
+      if (initialTags) {
+        setTagsInput(initialTags.join(', '))
+      }
+      toast.error(err instanceof Error ? err.message : t('tags_save_failed'))
+      return false
+    }
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault()
-    const payload: UpdateServerInput = {
-      name,
-      weight,
-      hidden,
-      group_id: groupId || null,
-      remark: remark || null,
-      public_remark: publicRemark || null,
-      price: price ? Number.parseFloat(price) : null,
-      billing_cycle: billingCycle || null,
-      currency: currency || null,
-      expired_at: expiredAt ? `${expiredAt}T00:00:00Z` : null,
-      traffic_limit: trafficLimit ? Math.round(Number.parseFloat(trafficLimit) * 1024 ** 3) : null,
-      traffic_limit_type: trafficLimitType || null,
-      billing_start_day: billingStartDay ? Number.parseInt(billingStartDay, 10) : null
+    const parsed = parseTagsInput(tagsInput)
+    if (parsed.error) {
+      toast.error(t(parsed.error))
+      return
     }
-    mutation.mutate(payload, {
-      onSuccess: () => {
-        toast.success(t('edit_success', { defaultValue: 'Server updated successfully' }))
-        onClose()
-      },
-      onError: (err) => {
-        toast.error(err instanceof Error ? err.message : t('edit_failed'))
-      }
-    })
+    try {
+      await mutation.mutateAsync(buildPayload())
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t('edit_failed'))
+      return
+    }
+    if (tagsDirty && !(await saveTags(parsed.tags))) {
+      return
+    }
+    toast.success(t('edit_success', { defaultValue: 'Server updated successfully' }))
+    onClose()
   }
 
   return (
@@ -187,6 +250,20 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
                 value={publicRemark}
               />
             </Field>
+            <Field label={t('tags_label')}>
+              <Input
+                aria-label={t('tags_label')}
+                name="tags"
+                onChange={(e) => {
+                  setTagsInput(e.target.value)
+                  setTagsDirty(true)
+                }}
+                placeholder={t('tags_placeholder')}
+                type="text"
+                value={tagsInput}
+              />
+              <p className="mt-1 text-[11px] text-muted-foreground">{t('tags_hint')}</p>
+            </Field>
           </fieldset>
 
           {/* Billing */}
@@ -316,8 +393,8 @@ export function ServerEditDialog({ server, open, onClose }: ServerEditDialogProp
             <Button onClick={onClose} type="button" variant="outline">
               {t('common:cancel')}
             </Button>
-            <Button disabled={mutation.isPending} type="submit">
-              {mutation.isPending ? t('common:saving') : t('common:save')}
+            <Button disabled={mutation.isPending || tagsMutation.isPending} type="submit">
+              {mutation.isPending || tagsMutation.isPending ? t('common:saving') : t('common:save')}
             </Button>
           </div>
         </form>

apps/web/src/components/server/status-dot.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { StatusDot } from './status-dot'
+
+const ANIMATE_PULSE_RE = /animate-pulse/
+const BG_EMERALD_RE = /bg-emerald-500/
+const BG_MUTED_RE = /bg-muted-foreground/
+
+describe('StatusDot', () => {
+  it('renders pulsing emerald dot when online', () => {
+    const { container } = render(<StatusDot online />)
+    const el = container.querySelector('[data-slot="status-dot"]')
+    expect(el?.className).toMatch(ANIMATE_PULSE_RE)
+    expect(el?.className).toMatch(BG_EMERALD_RE)
+  })
+
+  it('renders muted dot without pulse when offline', () => {
+    const { container } = render(<StatusDot online={false} />)
+    const el = container.querySelector('[data-slot="status-dot"]')
+    expect(el?.className).not.toMatch(ANIMATE_PULSE_RE)
+    expect(el?.className).toMatch(BG_MUTED_RE)
+  })
+})

apps/web/src/components/server/status-dot.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils'
+
+interface StatusDotProps {
+  className?: string
+  online: boolean
+}
+
+export function StatusDot({ online, className }: StatusDotProps) {
+  return (
+    <span
+      aria-label={online ? 'online' : 'offline'}
+      className={cn(
+        'inline-block size-2 rounded-full',
+        online ? 'animate-pulse bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.18)]' : 'bg-muted-foreground/60',
+        className
+      )}
+      data-slot="status-dot"
+      role="img"
+    />
+  )
+}

apps/web/src/components/server/tag-chip.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { TagChipRow } from './tag-chip'
+
+describe('TagChipRow', () => {
+  it('renders nothing when tags is empty', () => {
+    const { container } = render(<TagChipRow tags={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders nothing when tags is undefined', () => {
+    const { container } = render(<TagChipRow tags={undefined} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders a chip per tag', () => {
+    render(<TagChipRow tags={['prod', 'web']} />)
+    expect(screen.getByText('prod')).toBeDefined()
+    expect(screen.getByText('web')).toBeDefined()
+  })
+
+  it('assigns the same palette color to the same tag across renders', () => {
+    const { container, rerender } = render(<TagChipRow tags={['prod']} />)
+    const first = container.querySelector('[data-slot="tag-chip"]')?.className
+    rerender(<TagChipRow tags={['prod']} />)
+    const second = container.querySelector('[data-slot="tag-chip"]')?.className
+    expect(first).toBe(second)
+  })
+
+  it('adds title attr on the chip element for tooltip / truncate fallback', () => {
+    render(<TagChipRow tags={['long-tag-value']} />)
+    const chip = screen.getByText('long-tag-value')
+    expect(chip.getAttribute('title')).toBe('long-tag-value')
+  })
+})