feat(web): acrylic theme, node flags and icons, build info

Acrylic cards and topbar over a blurred background, country flags, ISP and
OS icons, per-node version tags, a build info footer and an admin versions
tab. Overview cards drop the sparkline and widen the hover area.

web/admin/src/pages/Agents.tsx

@@ -5,6 +5,7 @@ import { api } from '@shared/api/client'
 import type { AgentDto, CreatedJoinTokenDto, JoinTokenDto, Page } from '@shared/api/types'
 import { fmtAgo, fmtTime } from '@shared/format'
 import { useQuery } from '@shared/hooks'
+import { NodeTag, useNodeInfos } from '@shared/nodes'
 import { Chip, CommandTabs, Confirm, CopyButton, Dialog, Dot, Empty, ErrorNotice, Field, guessPlatform, Segmented, Spinner, useAction } from '@shared/ui'
 
 export const STATUS: Record<string, { label: string; tone: 'ok' | 'warn' | 'bad' }> = {
@@ -136,6 +137,7 @@ function AddAgentDialog({ onClose, onCreated }: { onClose: () => void; onCreated
 export function Agents() {
   const navigate = useNavigate()
   const agents = useQuery(() => api.get<Page<AgentDto>>('/api/admin/agents'), [], 10_000)
+  const infos = useNodeInfos()
   const tokens = useQuery(() => api.get<Page<JoinTokenDto>>('/api/admin/join-tokens'), [])
   const [filter, setFilter] = useState<'all' | 'pending' | 'disabled'>('all')
   const [adding, setAdding] = useState(false)
@@ -193,7 +195,12 @@ export function Agents() {
                     <td>
                       <AgentStatus agent={a} />
                     </td>
-                    <td style={{ fontWeight: 600 }}>{a.name}</td>
+                    <td style={{ fontWeight: 600 }}>
+                      <span className="row" style={{ gap: 8 }}>
+                        {a.name}
+                        <NodeTag info={infos.get(a.id)} />
+                      </span>
+                    </td>
                     <td className="mono muted">{a.public_host || '—'}</td>
                     <td className="muted">{a.agent_version ?? '—'}</td>
                     <td>

web/admin/src/pages/Probes.tsx

@@ -5,6 +5,7 @@ import { api } from '@shared/api/client'
 import type { Page, ProbeDto, ProbeIdentityDto } from '@shared/api/types'
 import { fmtAgo, fmtTime } from '@shared/format'
 import { useQuery } from '@shared/hooks'
+import { NodeTag, useNodeInfos } from '@shared/nodes'
 import { Chip, Confirm, CopyButton, Dialog, downloadText, Empty, ErrorNotice, Field, Spinner, useAction } from '@shared/ui'
 
 /** probe.json 只在创建和轮换密钥时返回一次：这里让管理员马上下载或复制。 */
@@ -84,6 +85,7 @@ type Pending = { kind: 'rotate' | 'revoke' | 'delete'; probe: ProbeDto }
 
 export function Probes() {
   const probes = useQuery(() => api.get<Page<ProbeDto>>('/api/admin/probes'), [], 8000)
+  const infos = useNodeInfos()
   const { run } = useAction()
   const [creating, setCreating] = useState(false)
   const [renaming, setRenaming] = useState<ProbeDto>()
@@ -123,6 +125,7 @@ export function Probes() {
           <div key={p.id} className="card">
             <div className="row wrap">
               <span style={{ fontSize: 18, fontWeight: 700 }}>{p.name}</span>
+              <NodeTag info={infos.get(p.id)} />
               {p.revoked ? <Chip tone="bad">已吊销</Chip> : <Chip tone={p.connections.length > 0 ? 'ok' : ''}>{p.connections.length > 0 ? `连着 ${p.connections.length} 个 Agent` : '没有连接'}</Chip>}
               <span className="mono faint">{p.id}</span>
               <span className="right row wrap">

web/admin/src/pages/System.tsx

@@ -1,13 +1,14 @@
 import { Download, KeyRound, Plus, Trash2 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { api } from '@shared/api/client'
-import type { ApiTokenDto, CreatedApiTokenDto, EventDto, Page, RawChunkMetaDto, RecomputeDto, SettingDto, UserDto } from '@shared/api/types'
+import type { AgentDto, ApiTokenDto, BuildInfoDto, CreatedApiTokenDto, EventDto, Page, ProbeDto, RawChunkMetaDto, RecomputeDto, SettingDto, UserDto } from '@shared/api/types'
+import { fmtBuiltAt, frontendBuild } from '@shared/buildInfo'
 import { fmtNum, fmtTime } from '@shared/format'
 import { translateSetting } from '@shared/i18n'
 import { useQuery } from '@shared/hooks'
 import { Chip, Confirm, CopyButton, Dialog, Empty, ErrorNotice, Field, Segmented, Spinner, useAction } from '@shared/ui'
 
-type Tab = 'settings' | 'tokens' | 'users' | 'events' | 'raw' | 'analysis'
+type Tab = 'settings' | 'versions' | 'tokens' | 'users' | 'events' | 'raw' | 'analysis'
 
 function Settings() {
   const settings = useQuery(() => api.get<Page<SettingDto>>('/api/admin/settings'), [])
@@ -76,6 +77,77 @@ function Settings() {
   )
 }
 
+/** 一行：名字、类型、版本、tag、提交、构建时间、系统。没有的写「—」。 */
+function BuildRow({ name, kind, version, tag, commit, builtAt, platform }: { name: string; kind: string; version?: string | null; tag?: string | null; commit?: string | null; builtAt?: string | null; platform?: string }) {
+  const dash = <span className="faint">—</span>
+  return (
+    <tr>
+      <td style={{ fontWeight: 600 }}>{name}</td>
+      <td>
+        <Chip>{kind}</Chip>
+      </td>
+      <td className="mono">{version || dash}</td>
+      <td className="mono">{tag || dash}</td>
+      <td className="mono">{commit || dash}</td>
+      <td className="muted">{fmtBuiltAt(builtAt) || dash}</td>
+      <td className="muted">{platform || dash}</td>
+    </tr>
+  )
+}
+
+/** 每个程序的版本：后端、前端、每个 Agent 和 Probe 自己上报的（它们没升级就能看出来）。 */
+function Versions() {
+  const info = useQuery(() => api.get<BuildInfoDto>('/api/admin/build-info'), [], 15_000)
+  const agents = useQuery(() => api.get<Page<AgentDto>>('/api/admin/agents'), [], 30_000)
+  const probes = useQuery(() => api.get<Page<ProbeDto>>('/api/admin/probes'), [], 30_000)
+  const names = new Map<string, string>([...(agents.data?.items ?? []).map((a) => [a.id, a.name] as const), ...(probes.data?.items ?? []).map((p) => [p.id, p.name] as const)])
+  const back = info.data?.backend
+  const nodes = info.data?.nodes ?? []
+  // 以后端的版本为准，节点的版本不一样就标出来（升级了一半的时候一眼能看到）
+  const mismatch = (v?: string | null) => Boolean(v && back && v !== back.version)
+  return (
+    <div className="card">
+      <ErrorNotice error={info.error} />
+      <table className="table">
+        <thead>
+          <tr>
+            <th>名称</th>
+            <th>类型</th>
+            <th>版本</th>
+            <th>tag</th>
+            <th>提交</th>
+            <th>构建时间</th>
+            <th>系统</th>
+          </tr>
+        </thead>
+        <tbody>
+          {back ? <BuildRow name="后端" kind="backend" version={back.version} tag={back.tag} commit={back.commit} builtAt={back.built_at} /> : null}
+          <BuildRow name="前端" kind="web" version={frontendBuild.version} tag={frontendBuild.tag} commit={frontendBuild.commit} builtAt={frontendBuild.builtAt} />
+          {nodes.map((n) => (
+            <tr key={n.id}>
+              <td style={{ fontWeight: 600 }}>{names.get(n.id) ?? n.id}</td>
+              <td>
+                <Chip>{n.kind}</Chip>
+              </td>
+              <td className="mono">
+                {n.version ? mismatch(n.version) ? <Chip tone="warn">{n.version}</Chip> : n.version : <span className="faint">—</span>}
+              </td>
+              <td className="mono">{n.tag || <span className="faint">—</span>}</td>
+              <td className="mono">{n.commit || <span className="faint">—</span>}</td>
+              <td className="muted">{fmtBuiltAt(n.built_at) || <span className="faint">—</span>}</td>
+              <td className="muted">{[n.os_name, n.arch].filter(Boolean).join(' / ') || <span className="faint">—</span>}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {nodes.length === 0 && !info.loading ? <Empty>还没有节点上报过版本</Empty> : null}
+      <p className="muted" style={{ marginTop: 12 }}>
+        版本、tag 和构建时间是各个程序自己上报的。设置里打开「site.show_build」之后，展示页底部和节点卡片上才会给访客显示（提交号只在这里显示）。
+      </p>
+    </div>
+  )
+}
+
 function Tokens() {
   const tokens = useQuery(() => api.get<Page<ApiTokenDto>>('/api/admin/api-tokens'), [])
   const { run } = useAction()
@@ -418,6 +490,7 @@ export function System() {
         <Segmented
           options={[
             { value: 'settings' as const, label: '设置' },
+            { value: 'versions' as const, label: '版本' },
             { value: 'tokens' as const, label: 'API 令牌' },
             { value: 'users' as const, label: '用户' },
             { value: 'events' as const, label: '事件' },
@@ -427,7 +500,7 @@ export function System() {
           value={tab}
           onChange={setTab}
         />
-        {tab === 'settings' ? <Settings /> : tab === 'tokens' ? <Tokens /> : tab === 'users' ? <Users /> : tab === 'events' ? <Events /> : tab === 'raw' ? <Raw /> : <Analysis />}
+        {tab === 'settings' ? <Settings /> : tab === 'versions' ? <Versions /> : tab === 'tokens' ? <Tokens /> : tab === 'users' ? <Users /> : tab === 'events' ? <Events /> : tab === 'raw' ? <Raw /> : <Analysis />}
       </div>
     </>
   )