feat: node info, build info and acrylic web theme

Squash of recent dev work: return_session login, backend switcher, line
detail timeline, overview strips, node platform/country/ISP info with flags
and icons, build info (version, tag, time) behind site.show_build, and the
acrylic display theme.

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>
     </>
   )