@kernel-sig/console 0.1.0

package/frontend/src/app/antd-theme.ts

@@ -0,0 +1,94 @@
+import type { ThemeConfig } from 'antd'
+import { theme } from 'antd'
+
+import { resolveToken } from '@/lib/css-color'
+
+/**
+ * 把设计令牌桥接给 Ant Design。
+ *
+ * 两套东西必须共用同一份颜色：Tailwind 的 `@theme`（全站 522 处
+ * `var(--color-*)` 都读它）与 AntD 的主题 token。各自维护一份色值，
+ * 界面上就会出现"卡片换了皮、下拉还是旧色"这种谁也说不清的偏差。
+ * 因此这里**只读取** globals.css 里已有的令牌，不复制色值。
+ *
+ * 归一化到 sRGB 的缘由写在 `lib/css-color.ts` 里 —— 那是唯一能把
+ * oklch 变回 rgb 的读法，AntD 八级色阶的派生依赖它。
+ */
+
+/**
+ * 字号阶梯。
+ *
+ * 与 `globals.css` 的 `--text-*` 是同一组数值（Tailwind 的 `text-xs`/`text-sm`
+ * 默认就是 12/14）：AntD 组件正文与 Tailwind 的 `text-sm` 必须是同一个数，
+ * 否则 AntD 按钮挨着 Tailwind 标签排版时基线对不上。改一处就要同步另一处。
+ */
+export const TYPE_SCALE = {
+  micro: 11, // globals.css 的 --text-2xs，Tailwind 没有 11px 这一级
+  small: 12, // text-xs
+  body: 14, // text-sm
+  title: 16, // text-base
+} as const
+
+/** 桥接过来的 token。 */
+export function bridgedToken(): ThemeConfig['token'] {
+  return {
+    colorPrimary: resolveToken('--color-accent', '#5b8def'),
+    colorLink: resolveToken('--color-accent', '#5b8def'),
+    colorSuccess: resolveToken('--color-success', '#4ade80'),
+    colorWarning: resolveToken('--color-warning', '#fbbf24'),
+    colorError: resolveToken('--color-danger', '#f87171'),
+    colorInfo: resolveToken('--color-info', '#60a5fa'),
+
+    colorTextBase: resolveToken('--color-text-primary', '#f5f5f5'),
+    colorText: resolveToken('--color-text-primary', '#f5f5f5'),
+    colorTextSecondary: resolveToken('--color-text-secondary', '#c4c4cc'),
+    colorTextTertiary: resolveToken('--color-text-muted', '#8a8a94'),
+    colorTextQuaternary: resolveToken('--color-text-muted', '#8a8a94'),
+
+    // 三层背景必须各自对上：只给 container 不给 elevated 的话，
+    // 下拉、Tooltip、Modal 的浮层底色会和卡片不一致，深色下很显眼。
+    colorBgLayout: resolveToken('--color-surface-0', '#131317'),
+    colorBgContainer: resolveToken('--color-surface-1', '#1c1c22'),
+    colorBgElevated: resolveToken('--color-surface-2', '#26262e'),
+    colorBgSpotlight: resolveToken('--color-surface-3', '#32323c'),
+
+    colorBorder: resolveToken('--color-border-strong', '#5a5a68'),
+    colorBorderSecondary: resolveToken('--color-border-subtle', '#3c3c46'),
+
+    borderRadius: 6,
+    borderRadiusLG: 10,
+
+    fontSize: TYPE_SCALE.body,
+    fontSizeSM: TYPE_SCALE.small,
+    fontSizeLG: TYPE_SCALE.title,
+  }
+}
+
+/**
+ * 完整的 AntD 主题。
+ *
+ * 不做"一键退回默认外观"的开关：它的用途是桥接出问题时能快速回退，
+ * 而这件事由提交边界保证更干净 —— 引入主题的提交不碰任何页面文件，
+ * 出问题整体 revert 即可，代价与翻一个开关相同，却少一个要维护的开关、
+ * 少一条要穿过 Docker 构建参数的 env。
+ */
+export function antdTheme(): ThemeConfig {
+  return {
+    algorithm: theme.darkAlgorithm,
+    // 固定的 key：将来若改用构建期抽取样式，两处必须一致，
+    // 不一致的表现是"刷新时样式闪一下/不生效"，很难查。
+    cssVar: { key: 'ksc' },
+    token: bridgedToken(),
+    components: {
+      Button: {
+        // 小按钮保持 28px，与原来的 h-7 一致。AntD 默认的 24px 配 12px 字，
+        // 比这一版界面的正文（14px）小一档 —— 界面上最密的地方反而字最小，
+        // 正是之前被指出"看着挤"的那类问题。
+        //
+        // 标准尺寸不覆盖，用 AntD 的 32px：原来按钮是 36px 而输入框 32px，
+        // 同一行里本来就对不齐，现在两者同高。
+        controlHeightSM: 28,
+      },
+    },
+  }
+}

package/frontend/src/app/providers.tsx

@@ -0,0 +1,59 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { App as AntApp, ConfigProvider } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import { useState, type ReactNode } from 'react'
+
+import { antdTheme } from '@/app/antd-theme'
+import { ApiError } from '@/lib/api-client'
+
+/**
+ * 全局 Provider。
+ *
+ * AntD 的主题读的是 globals.css 已经生效的 CSS 令牌，所以初始化放在
+ * 首次渲染时（`useState` 的惰性初值只算一次）：那时样式表一定已经注入 ——
+ * main.tsx 的 `import '@/styles/globals.css'` 会在渲染之前完成。
+ *
+ * 暂不挂 `<AntdApp>`：它会在 `#root` 与路由之间插入一个 div，而
+ * `html/body/#root { height: 100% }` 的高度链会就此断掉，整屏布局塌掉。
+ * 等真要弹 message 时再挂，并同时补上高度样式。
+ */
+export function AppProviders({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30_000,
+            refetchOnWindowFocus: false,
+            retry: (failureCount, error) => {
+              // 4xx 是确定性错误，重试无意义
+              if (error instanceof ApiError && error.status < 500) return false
+              return failureCount < 2
+            },
+          },
+        },
+      }),
+  )
+
+  const [antdConfig] = useState(() => antdTheme())
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* autoInsertSpace 关掉：AntD 会在**恰好两个汉字**的按钮文案中间插一个
+          空格（「登 录」「保 存」），那是它为对话框里"确定/取消"这类词做的排版。
+          这个界面里两字按钮与两字标签（「合并冲突」「待评审」）大量并排，只给
+          按钮加空格反而更不齐；而且它一视同仁地改变了按钮的可访问名，
+          按文本定位的地方会全部落空。 */}
+      <ConfigProvider locale={zhCN} theme={antdConfig} button={{ autoInsertSpace: false }}>
+        {/* App 提供 message / modal 的上下文。静态调用 `message.error()`
+            在 React 18+ 的 StrictMode 下会打 error 级告警（找不到 context），
+            而 e2e 把未预期的 console error 一律判为失败。
+
+            它会在 #root 与路由之间插一层 div，所以必须带上 h-full：
+            `html/body/#root { height: 100% }` 这条高度链断掉的话，
+            整屏布局会塌下来。 */}
+        <AntApp className="h-full">{children}</AntApp>
+      </ConfigProvider>
+    </QueryClientProvider>
+  )
+}

package/frontend/src/app/router.tsx

@@ -0,0 +1,411 @@
+import { useQuery } from '@tanstack/react-query'
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Navigate,
+  Outlet,
+  retainSearchParams,
+  RouterProvider,
+  useRouterState,
+} from '@tanstack/react-router'
+import type { ReactNode } from 'react'
+
+import { authApi } from '@/api/auth'
+import { FACET_KEYS } from '@/api/pulls'
+import { repoOnly, withRepo } from '@/app/search'
+import { AppShell } from '@/components/layout/AppShell'
+import { useCurrentUser } from '@/hooks/use-current-user'
+import { AttentionQueuePage } from '@/pages/attention/AttentionQueuePage'
+import { BranchDetailPage } from '@/pages/branches/BranchDetailPage'
+import { BranchListPage } from '@/pages/branches/BranchListPage'
+import { MeetingDetailPage } from '@/pages/meetings/MeetingDetailPage'
+import { MeetingListPage } from '@/pages/meetings/MeetingListPage'
+import { MembersPage } from '@/pages/members/MembersPage'
+import { DashboardPage } from '@/pages/dashboard/DashboardPage'
+import { IssueListPage } from '@/pages/issues/IssueListPage'
+import { LoginPage } from '@/pages/login/LoginPage'
+import { PullDetailPage } from '@/pages/pulls/PullDetailPage'
+import { PullListPage } from '@/pages/pulls/PullListPage'
+import { AiSettingsPage } from '@/pages/settings/AiSettingsPage'
+import { SettingsPage } from '@/pages/settings/SettingsPage'
+import { SetupPage } from '@/pages/setup/SetupPage'
+
+type PullSearch = {
+  q?: string
+  state?: string
+  /** 只看等待超过 N 天的。首页「超 30 天未评审」卡片据此跳过来。 */
+  waiting_days_gte?: number
+  /** 页码。第一页不写进 URL，免得链接长得没必要地啰嗦。 */
+  page?: number
+  stage?: string[]
+  kind?: string[]
+  branch?: string[]
+  author?: string[]
+  attention?: string[]
+}
+
+/**
+ * 把 URL 里的正整数字符串解析成数字，其余一律当作"没这个条件"。
+ *
+ * 地址栏里的值都是字符串，而 `Number('')` 是 0、`Number('abc')` 是 NaN ——
+ * 直接信任它们会让 `waiting_days_gte=0` 变成"只看到今天为止的所有 PR"，
+ * 看起来像筛选没生效。
+ */
+function positiveInt(value: unknown): number | undefined {
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined
+}
+
+function BootScreen() {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div
+        role="status"
+        aria-label="加载中"
+        className="size-5 animate-spin rounded-full border-2 border-[var(--color-border-strong)] border-t-[var(--color-accent)]"
+      />
+    </div>
+  )
+}
+
+/**
+ * 根布局只负责「是否需要初始化」这一个全局判断。
+ * 登录态校验交给 RequireAuth，避免两处各自等待、互相干扰。
+ *
+ * `/setup` 也是这根布局的子路由，所以**必须把"已经在 /setup 上"排除掉**：
+ * 不排除的话它一直渲染 `<Navigate to="/setup" />`，`<Outlet />` 永远轮不到，
+ * 全新实例打开就是一片空白 —— 而全新实例正是所有人第一次见到它的样子。
+ */
+function RootLayout() {
+  const { data: setup, isLoading } = useQuery({
+    queryKey: ['setup-status'],
+    queryFn: authApi.setupStatus,
+    staleTime: Infinity,
+  })
+  const pathname = useRouterState({ select: (state) => state.location.pathname })
+
+  if (isLoading) return <BootScreen />
+  if (setup?.needs_setup && pathname !== '/setup') return <Navigate to="/setup" />
+
+  return <Outlet />
+}
+
+function RequireAuth({ children }: { children: ReactNode }) {
+  const { user, isLoading } = useCurrentUser()
+
+  // 必须等待会话探测结束再决定去向，
+  // 否则首次渲染时 user 尚为 null，会把已登录用户误弹回登录页。
+  if (isLoading) return <BootScreen />
+  if (!user) return <Navigate to="/login" />
+
+  return <>{children}</>
+}
+
+const rootRoute = createRootRoute({ component: RootLayout })
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <Navigate to="/dashboard" />,
+})
+
+const loginRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/login',
+  component: LoginPage,
+})
+
+const setupRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/setup',
+  component: SetupPage,
+})
+
+const dashboardRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/dashboard',
+  validateSearch: repoOnly,
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <DashboardPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+/**
+ * PR 列表的筛选走 URL 而不是组件内部状态。
+ *
+ * 平台上到处都有指向"某个版本的待处理 PR"、"某个 PR 编号"的链接
+ * （分支页、例会议题、发版说明），它们只能通过 URL 表达筛选条件。
+ * 顺带也就让筛选结果可分享、可收藏、可前进后退。
+ */
+const pullListRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/pulls',
+  validateSearch: withRepo((search: Record<string, unknown>): PullSearch => {
+    const arrays: Partial<PullSearch> = {}
+    for (const key of FACET_KEYS) {
+      const raw = search[key]
+      if (Array.isArray(raw)) arrays[key] = raw.map(String)
+      else if (typeof raw === 'string' && raw) arrays[key] = [raw]
+    }
+    return {
+      q: typeof search.q === 'string' ? search.q : undefined,
+      state: typeof search.state === 'string' ? search.state : undefined,
+      // 这两个必须在这里显式取出来。validateSearch 的返回值就是
+      // useSearch() 能看到的一切，没被列进来的参数会被静默丢掉 ——
+      // 链接的 href 里带着它，读回来却没有，表现为"点了链接但没过滤"。
+      waiting_days_gte: positiveInt(search.waiting_days_gte),
+      page: positiveInt(search.page),
+      ...arrays,
+    }
+  }),
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <PullListPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const pullDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/pulls/$pullId',
+  component: () => {
+    const { pullId } = pullDetailRoute.useParams()
+    return (
+      <RequireAuth>
+        <AppShell>
+          <PullDetailPage pullId={pullId} />
+        </AppShell>
+      </RequireAuth>
+    )
+  },
+})
+
+const issueListRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/issues',
+  validateSearch: repoOnly,
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <IssueListPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/settings/general',
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <SettingsPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const attentionRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/attention',
+  validateSearch: repoOnly,
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <AttentionQueuePage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const aiSettingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/settings/ai',
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <AiSettingsPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const branchListRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/branches',
+  validateSearch: repoOnly,
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <BranchListPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const branchDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/branches/$branch',
+  validateSearch: repoOnly,
+  // 从别的页面点进来时把仓库带上：这一组页面的每一项都属于某个仓库，而调用点
+  // （首页卡片、分支页的"待处理"、关注的"逐条处理"）并不都知道自己在哪个仓库里 ——
+  // 让路由统一保留，比在每个链接上各写一遍可靠，也不会漏。
+  search: { middlewares: [retainSearchParams(['repo'])] },
+  component: () => {
+    const { branch } = branchDetailRoute.useParams()
+    return (
+      <RequireAuth>
+        <AppShell>
+          <BranchDetailPage branch={branch} />
+        </AppShell>
+      </RequireAuth>
+    )
+  },
+})
+
+const meetingListRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/meetings',
+  component: () => (
+    <RequireAuth>
+      <AppShell>
+        <MeetingListPage />
+      </AppShell>
+    </RequireAuth>
+  ),
+})
+
+const meetingDetailRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/meetings/$meetingId',
+  component: () => {
+    const { meetingId } = meetingDetailRoute.useParams()
+    return (
+      <RequireAuth>
+        <AppShell>
+          <MeetingDetailPage meetingId={meetingId} />
+        </AppShell>
+      </RequireAuth>
+    )
+  },
+})
+
+/**
+ * 成员页支持 ``?member=<login>``。
+ *
+ * 分支负责人、贡献排行榜、模块归属都指向人，而这些引用散在各页
+ * （分支页的 keeper、发版说明的贡献者）。没有这个参数的话，
+ * 点过去只能落到一张三百人的名单上，还得自己再搜一遍 ——
+ * 那等于链接没做。
+ */
+const membersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/members',
+  validateSearch: (search: Record<string, unknown>): { member?: string } => ({
+    member: typeof search.member === 'string' && search.member ? search.member : undefined,
+  }),
+  component: () => {
+    const { member } = membersRoute.useSearch()
+    return (
+      <RequireAuth>
+        <AppShell>
+          <MembersPage member={member} />
+        </AppShell>
+      </RequireAuth>
+    )
+  },
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  loginRoute,
+  setupRoute,
+  dashboardRoute,
+  pullListRoute,
+  pullDetailRoute,
+  issueListRoute,
+  attentionRoute,
+  settingsRoute,
+  aiSettingsRoute,
+  branchListRoute,
+  branchDetailRoute,
+  meetingListRoute,
+  meetingDetailRoute,
+  membersRoute,
+])
+
+/**
+ * 查询串的序列化。
+ *
+ * 默认行为是把数组编码成 JSON（`?kind=["cve"]`），而后端的 `list[str]` 查询
+ * 参数按约定是**重复出现**（`?kind=cve&kind=bugfix`）—— 与 FastAPI 一致，
+ * 也与 `api/pulls.ts` 的 `toQuery` 一致。不统一的话，地址栏里的链接贴进
+ * 接口或另一处代码都读不出筛选条件。
+ */
+function stringifySearch(search: Record<string, unknown>): string {
+  const params = new URLSearchParams()
+  for (const [key, value] of Object.entries(search)) {
+    if (value === undefined || value === null || value === '') continue
+    if (Array.isArray(value)) {
+      for (const item of value) params.append(key, String(item))
+    } else {
+      params.set(key, String(value))
+    }
+  }
+  const query = params.toString()
+  return query ? `?${query}` : ''
+}
+
+function parseSearch(searchStr: string): Record<string, string | string[]> {
+  const params = new URLSearchParams(searchStr.startsWith('?') ? searchStr.slice(1) : searchStr)
+  const result: Record<string, string | string[]> = {}
+  for (const key of new Set(params.keys())) {
+    const values = params.getAll(key)
+    result[key] = values.length > 1 ? values : values[0]
+  }
+  return result
+}
+
+export const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  stringifySearch,
+  parseSearch,
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+export function AppRouter() {
+  return <RouterProvider router={router} />
+}

package/frontend/src/app/search.ts

@@ -0,0 +1,30 @@
+/**
+ * 地址栏里的仓库标识。
+ *
+ * 仓库是**上下文**而不是筛选条件：`/branches/openEuler-24.03-LTS-SP4` 这个
+ * 路径在两个仓库里都成立，指的是两件不同的事。只有把仓库放进 URL 才说得清，
+ * 也才让链接可以安全地转给别人。
+ */
+export type RepoSearch = { repo?: string }
+
+const readRepo = (search: Record<string, unknown>): string | undefined =>
+  typeof search.repo === 'string' && search.repo ? search.repo : undefined
+
+/**
+ * 只解析 repo 的路由用它。
+ *
+ * 每个需要仓库上下文的页面都要在 `validateSearch` 里声明它：那个函数的
+ * 返回值就是 `useSearch()` 能看到的一切，没被列进去的参数会被静默丢掉 ——
+ * 表现为"点了链接却停在原来那个仓库"，而地址栏里明明写着另一个。
+ */
+export const repoOnly = (search: Record<string, unknown>): RepoSearch => ({
+  repo: readRepo(search),
+})
+
+/** 把 repo 并进已有的解析逻辑。 */
+export function withRepo<T extends object>(parse: (search: Record<string, unknown>) => T) {
+  return (search: Record<string, unknown>): T & RepoSearch => ({
+    ...parse(search),
+    repo: readRepo(search),
+  })
+}

package/frontend/src/components/ClassificationBadge.tsx

@@ -0,0 +1,58 @@
+import { KIND_META, type Classification, type PRKind } from '@/api/classification'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+/**
+ * 类型标签。
+ *
+ * 不确定的判定要能被一眼看出：AI 补判与人工指定加一个上标，
+ * 未判定的降低不透明度。把三者渲染成同一个样子，
+ * 使用者就无法判断"这个结论有多可信"。
+ */
+export function ClassificationBadge({
+  kind,
+  source,
+  className,
+}: {
+  kind: PRKind
+  source?: Classification['source']
+  className?: string
+}) {
+  const meta = KIND_META[kind]
+  const uncertain = kind === 'unknown'
+
+  return (
+    <Badge
+      // 类别色来自 globals.css 的 kind 色板，不走 Badge 的 tone ——
+      // 十几种类别无法映射到 6 个语义 tone 上，硬映射会让
+      // "CVE" 和 "危险" 撞成同一个颜色。
+      style={{
+        color: meta.color,
+        backgroundColor: `color-mix(in oklch, ${meta.color} 16%, transparent)`,
+        borderColor: `color-mix(in oklch, ${meta.color} 35%, transparent)`,
+      }}
+      className={cn(className, uncertain && 'opacity-70')}
+      title={
+        source === 'manual'
+          ? '维护者人工指定'
+          : source === 'ai'
+            ? '规则未命中，由模型判定'
+            : undefined
+      }
+    >
+      {meta.label}
+      {source === 'ai' && <span className="text-[9px] leading-none">AI</span>}
+      {source === 'manual' && <span className="text-[9px] leading-none">人工</span>}
+    </Badge>
+  )
+}
+
+/** 子系统标签。与类型并列展示，构成"这是什么、改的哪里"两个维度。 */
+export function SubsystemBadge({ label }: { label: string | null | undefined }) {
+  if (!label) return null
+  return (
+    <Badge tone="neutral" className="font-normal">
+      {label}
+    </Badge>
+  )
+}

package/frontend/src/components/GateBadge.tsx

@@ -0,0 +1,13 @@
+import { GATE_STAGE_META, type GateStage } from '@/api/pulls'
+import { Badge } from '@/components/ui/badge'
+
+/**
+ * 门禁阶段徽章。
+ *
+ * 阶段取值与语义色的映射集中在 api/pulls.ts，此处只做渲染。
+ * 后端下发 gate_stage，前端不复刻门禁规则 —— 规则只有一份。
+ */
+export function GateBadge({ stage }: { stage: GateStage }) {
+  const meta = GATE_STAGE_META[stage] ?? { label: stage, tone: 'neutral' as const }
+  return <Badge tone={meta.tone}>{meta.label}</Badge>
+}

package/frontend/src/components/SeverityBadge.tsx

@@ -0,0 +1,20 @@
+import { SEVERITY_META, type AttentionSeverity } from '@/api/attention'
+import { Badge } from '@/components/ui/badge'
+
+/**
+ * 关注项严重程度标签。
+ *
+ * blocker 额外加一个实心圆点：它是唯一"必须处理才能推进"的一档，
+ * 与 critical 只靠颜色深浅区分不够 —— 色觉障碍使用者看不出差别。
+ */
+export function SeverityBadge({ severity }: { severity: AttentionSeverity }) {
+  const meta = SEVERITY_META[severity]
+  return (
+    <Badge tone={meta.tone}>
+      {severity === 'blocker' && (
+        <span aria-hidden className="size-1.5 rounded-full bg-current" />
+      )}
+      {meta.label}
+    </Badge>
+  )
+}