@kernel-sig/console 0.1.0

package/frontend/src/lib/api-client.ts

@@ -0,0 +1,93 @@
+/**
+ * 统一 API 客户端。
+ *
+ * 错误一律抛 ApiError，携带后端 RFC 7807 的 code / detail / context，
+ * 使调用方能按 code 分支处理（如 unauthorized → 跳登录）。
+ */
+
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    readonly code: string,
+    message: string,
+    readonly context?: Record<string, unknown>,
+  ) {
+    super(message)
+    this.name = 'ApiError'
+  }
+
+  get isUnauthorized(): boolean {
+    return this.status === 401
+  }
+
+  get isForbidden(): boolean {
+    return this.status === 403
+  }
+}
+
+const API_BASE = '/api/v1'
+
+async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
+  let response: Response
+  try {
+    response = await fetch(`${API_BASE}${path}`, {
+      ...init,
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...init.headers,
+      },
+    })
+  } catch (cause) {
+    throw new ApiError(0, 'network_error', '无法连接到服务器，请检查网络或服务状态', {
+      cause: String(cause),
+    })
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+
+  const raw = await response.text()
+  let payload: Record<string, unknown> | null = null
+  if (raw) {
+    try {
+      payload = JSON.parse(raw)
+    } catch {
+      payload = null
+    }
+  }
+
+  if (!response.ok) {
+    throw new ApiError(
+      response.status,
+      (payload?.code as string) ?? 'unknown_error',
+      (payload?.detail as string) ??
+        (payload?.message as string) ??
+        `请求失败（HTTP ${response.status}）`,
+      payload?.context as Record<string, unknown> | undefined,
+    )
+  }
+
+  return payload as T
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>(path),
+  post: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: 'POST',
+      body: body === undefined ? undefined : JSON.stringify(body),
+    }),
+  patch: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: 'PATCH',
+      body: body === undefined ? undefined : JSON.stringify(body),
+    }),
+  put: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: 'PUT',
+      body: body === undefined ? undefined : JSON.stringify(body),
+    }),
+  delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
+}

package/frontend/src/lib/css-color.ts

@@ -0,0 +1,60 @@
+/**
+ * 读取 globals.css 里的 CSS 令牌。
+ *
+ * 零依赖：AntD 的主题与 ECharts 的图表配置都要用它，而从任何一方
+ * 引入都会把对方拖进自己的 chunk（ECharts 是 539KB 的独立块，
+ * 被静态拖回主包就白拆了）。
+ */
+
+/** 读取令牌原文，取不到返回空串。 */
+export function cssVar(name: string): string {
+  if (typeof document === 'undefined') return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+const canvas = typeof document === 'undefined' ? null : document.createElement('canvas')
+if (canvas) {
+  canvas.width = 1
+  canvas.height = 1
+}
+const context = canvas?.getContext('2d', { willReadFrequently: true }) ?? null
+const OPAQUE = 255
+
+/**
+ * 把令牌归一化成 sRGB 的 `rgb(r, g, b)`。
+ *
+ * 存在的理由是 Ant Design：它要从种子色派生出 hover / active / border
+ * 一共八级色阶，而这件事用 `oklch(...)` 做不了。麻烦在于浏览器**不会**
+ * 替你转换 —— 实测（Chrome 153）下面三种读法都原样吐回 oklch 字符串：
+ * `getComputedStyle(el).color`、`computedStyleMap().get('color')`，
+ * 以及 canvas 的 `ctx.fillStyle` 读回值。
+ *
+ * 唯一可靠的是**画一个像素再读它**：落进帧缓冲的一定是 sRGB。
+ * 这与 `chart-theme.ts` 里那条注记是同一条认知的两面 —— 那边是
+ * "canvas 拿不到 CSS 变量"，这边是"用 canvas 把 CSS 变量变成画布认得的形状"。
+ *
+ * 取不到或解析不了时返回 fallback：拿不到令牌本身不该让界面崩掉。
+ */
+export function resolveToken(name: string, fallback: string): string {
+  if (!context) return fallback
+  const raw = cssVar(name)
+  if (!raw) return fallback
+
+  // 先把填充色置为透明：颜色若不被识别，canvas 会**保留上一个值**，
+  // 于是这次填充什么也画不出来，像素 alpha 为 0 —— 据此判定"没认出来"。
+  context.clearRect(0, 0, 1, 1)
+  context.fillStyle = 'transparent'
+  context.fillStyle = raw
+  context.fillRect(0, 0, 1, 1)
+  const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data
+
+  if (a !== OPAQUE) {
+    // 解析失败时 AntD 会悄悄退回它自己的默认蓝：界面看着"有点不对"，
+    // 而代码读起来完全正确 —— 和图表"所有柱子同一个灰"是同一个失败模式。
+    if (import.meta.env.DEV) {
+      throw new Error(`令牌 ${name} 无法解析为色值：${raw}`)
+    }
+    return fallback
+  }
+  return `rgb(${r}, ${g}, ${b})`
+}

package/frontend/src/lib/utils.ts

@@ -0,0 +1,45 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/** 合并 Tailwind 类名，后写的同类工具类覆盖先写的。 */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/** 相对时间描述，用于"最后活动"这类信息展示。 */
+export function formatRelativeTime(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const then = new Date(iso).getTime()
+  if (Number.isNaN(then)) return '—'
+
+  const diffSeconds = Math.round((Date.now() - then) / 1000)
+  if (diffSeconds < 60) return '刚刚'
+  const minutes = Math.floor(diffSeconds / 60)
+  if (minutes < 60) return `${minutes} 分钟前`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours} 小时前`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days} 天前`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months} 个月前`
+  return `${Math.floor(months / 12)} 年前`
+}
+
+/** 绝对时间，精确到分钟，使用本地时区。 */
+export function formatDateTime(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+/** 千分位数字，用于统计面板。 */
+export function formatNumber(value: number): string {
+  return new Intl.NumberFormat('zh-CN').format(value)
+}

package/frontend/src/main.tsx

@@ -0,0 +1,22 @@
+// 全局样式必须先于任何组件模块求值：AntD 的主题令牌是从这些
+// CSS 变量里读出来的，顺序反了会在开发期直接抛错（见 antd-theme.ts 的护栏）。
+import '@/styles/globals.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { AppProviders } from '@/app/providers'
+import { AppRouter } from '@/app/router'
+
+const container = document.getElementById('root')
+if (!container) {
+  throw new Error('找不到 #root 挂载点')
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <AppProviders>
+      <AppRouter />
+    </AppProviders>
+  </StrictMode>,
+)

package/frontend/src/pages/attention/AttentionQueuePage.tsx

@@ -0,0 +1,316 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { Select } from 'antd'
+import { ChevronDown, Settings2 } from 'lucide-react'
+import { useState } from 'react'
+
+import {
+  SEVERITY_META,
+  attentionApi,
+  attentionQueueApi,
+  type AttentionGroup,
+  type AttentionSample,
+} from '@/api/attention'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardBody } from '@/components/ui/card'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useCurrentUser } from '@/hooks/use-current-user'
+import { cn, formatNumber } from '@/lib/utils'
+import { RuleSettingsPanel } from '@/pages/attention/RuleSettingsPanel'
+
+/**
+ * 关注队列。
+ *
+ * 页面的核心是**收敛**：一条规则一行，而不是每个命中对象一行。
+ * 未收敛时有 4780 条，其中 63% 是陈旧 Issue —— 那个列表没有人会翻第二页。
+ * 收敛之后是十几行，每行给出条数、最久等待、集中在哪些分支与少量样例；
+ * 要逐条处理就点进对应的列表。
+ *
+ * 每一行都写明"在提醒什么"和"该做什么"。只列问题不给出路，
+ * 队列就只是噪音来源 —— 那正是它此前最大的问题。
+ */
+export function AttentionQueuePage() {
+  const [scope, setScope] = useState<'all' | 'pull_request' | 'issue'>('all')
+  const [showSettings, setShowSettings] = useState(false)
+
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data: groups, isLoading } = useQuery({
+    queryKey: ['attention-queue', repository?.id, scope],
+    queryFn: () =>
+      attentionQueueApi.queue(
+        repository!.id,
+        scope === 'all' ? undefined : (scope as 'pull_request' | 'issue'),
+      ),
+    enabled: Boolean(repository),
+  })
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+  if (!repository) return <EmptyState title="尚未纳管仓库" />
+
+  const total = (groups ?? []).reduce((sum, group) => sum + group.count, 0)
+
+  return (
+    <div className="space-y-5">
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">关注队列</h1>
+          <p className="mt-1 max-w-3xl text-sm leading-relaxed text-[var(--color-text-secondary)]">
+            按规则聚合的待办，
+            <span className="text-[var(--color-text-primary)]">一条规则一行</span>
+            。逐条列出会把「需要关注」变成「全部清单」：
+            {groups && groups.length > 0
+              ? `当前 ${formatNumber(total)} 个对象收敛为 ${groups.length} 组。`
+              : ''}
+            要逐个处理，用每组右侧的「逐条处理」。规则与阈值见「关注设置」。
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select
+            aria-label="范围"
+            value={scope}
+            options={[
+              { value: 'all', label: '全部对象' },
+              { value: 'pull_request', label: '仅 PR' },
+              { value: 'issue', label: '仅 Issue' },
+            ]}
+            onChange={(value) => setScope(value as typeof scope)}
+          />
+          <Button
+            variant={showSettings ? 'primary' : 'ghost'}
+            size="sm"
+            onClick={() => setShowSettings((value) => !value)}
+          >
+            <Settings2 className="size-3.5" aria-hidden />
+            关注设置
+          </Button>
+        </div>
+      </header>
+
+      {showSettings && <RuleSettingsPanel repositoryId={repository.id} />}
+
+      {isLoading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Skeleton key={index} className="h-20 w-full" />
+          ))}
+        </div>
+      ) : !groups || groups.length === 0 ? (
+        <EmptyState
+          title="关注队列为空"
+          description="可能是各规则的阈值都未触发，也可能是规则被全部关闭 —— 可在「关注设置」中查看。"
+        />
+      ) : (
+        <div className="space-y-3">
+          {groups.map((group) => (
+            <GroupCard key={group.rule} group={group} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function GroupCard({ group }: { group: AttentionGroup }) {
+  const queryClient = useQueryClient()
+  const { user } = useCurrentUser()
+  const [expanded, setExpanded] = useState(false)
+  const severity = SEVERITY_META[group.severity]
+  const critical = group.severity === 'critical' || group.severity === 'blocker'
+
+  const claim = useMutation({
+    mutationFn: ({ itemId, release }: { itemId: string; release: boolean }) =>
+      release ? attentionApi.release(itemId) : attentionApi.acknowledge(itemId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['attention-queue'] })
+      queryClient.invalidateQueries({ queryKey: ['attention-rule-settings'] })
+    },
+  })
+
+  // CVE 相关的规则点进去只看 CVE —— 否则"逐条处理"会把使用者丢回全量列表
+  const search =
+    group.subject === 'issue'
+      ? undefined
+      : group.rule === 'cve_aging'
+        ? { state: 'open' as const, kind: ['cve'] }
+        : { state: 'open' as const }
+
+  return (
+    <Card
+      className={cn(
+        critical &&
+          'border-[color-mix(in_oklch,var(--color-danger)_26%,var(--color-border-subtle))]',
+      )}
+    >
+      <CardBody>
+        <div className="flex flex-wrap items-start gap-x-4 gap-y-2">
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge tone={severity?.tone as never}>{severity?.label}</Badge>
+              <span className="text-sm font-medium">{group.label}</span>
+              <span className="font-mono text-sm tabular-nums">
+                {formatNumber(group.count)}
+              </span>
+              <Badge tone="neutral" className="font-normal">
+                {group.subject === 'issue' ? 'Issue' : 'PR'}
+              </Badge>
+              {group.oldest_days !== null && (
+                <span className="text-xs text-[var(--color-text-muted)]">
+                  最久已等 {group.oldest_days} 天
+                </span>
+              )}
+              {group.acknowledged_count > 0 && (
+                <span className="text-xs text-[var(--color-text-muted)]">
+                  已认领 {group.acknowledged_count}
+                </span>
+              )}
+            </div>
+
+            <p className="mt-1.5 text-sm leading-relaxed text-[var(--color-text-secondary)]">
+              {group.meaning}
+            </p>
+            <p className="mt-1 text-xs leading-relaxed text-[var(--color-accent)]">
+              建议：{group.action}
+            </p>
+
+            {group.themes.length > 0 && (
+              <div className="mt-2 flex flex-wrap items-center gap-1.5">
+                <span className="text-2xs text-[var(--color-text-muted)]">集中在</span>
+                {group.themes.slice(0, 6).map((theme) => (
+                  <span
+                    key={theme.name}
+                    className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 text-2xs"
+                  >
+                    <span className="font-mono">{theme.name}</span>
+                    <span className="tabular-nums text-[var(--color-text-muted)]">
+                      {theme.count}
+                    </span>
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="flex shrink-0 items-center gap-2">
+            {group.subject === 'issue' ? (
+              <Link
+                to="/issues"
+                className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] px-2.5 py-1 text-xs hover:border-[var(--color-border-strong)]"
+              >
+                逐条处理
+              </Link>
+            ) : (
+              <Link
+                to="/pulls"
+                search={search}
+                className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] px-2.5 py-1 text-xs hover:border-[var(--color-border-strong)]"
+              >
+                逐条处理
+              </Link>
+            )}
+            <button
+              type="button"
+              onClick={() => setExpanded((value) => !value)}
+              aria-expanded={expanded}
+              className="inline-flex items-center gap-1 rounded-[var(--radius-control)] px-2.5 py-1 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-2)]"
+            >
+              样例 {group.samples.length}
+              <ChevronDown
+                className={cn(
+                  'size-3.5 transition-transform duration-150',
+                  expanded && 'rotate-180',
+                )}
+                aria-hidden
+              />
+            </button>
+          </div>
+        </div>
+
+        {expanded && (
+          <ul className="mt-3 space-y-1 border-t border-[var(--color-border-subtle)] pt-3">
+            {group.samples.map((sample) => (
+              <SampleRow
+                key={sample.item_id}
+                sample={sample}
+                currentUserId={user?.id ?? null}
+                busy={claim.isPending && claim.variables?.itemId === sample.item_id}
+                onToggle={() =>
+                  claim.mutate({
+                    itemId: sample.item_id,
+                    release: sample.acknowledged_by !== null,
+                  })
+                }
+              />
+            ))}
+          </ul>
+        )}
+      </CardBody>
+    </Card>
+  )
+}
+
+const SAMPLE_ROW =
+  'flex min-w-0 flex-1 items-center gap-3 rounded-[var(--radius-control)] px-1.5 py-1 hover:bg-[var(--color-surface-2)]'
+
+function SampleRow({
+  sample,
+  currentUserId,
+  busy,
+  onToggle,
+}: {
+  sample: AttentionSample
+  currentUserId: string | null
+  busy: boolean
+  onToggle: () => void
+}) {
+  const mine = sample.acknowledged_by !== null && sample.acknowledged_by === currentUserId
+  const claimedByOther = sample.acknowledged_by !== null && !mine
+
+  const inner = (
+    <>
+      <span className="w-16 shrink-0 font-mono text-xs tabular-nums text-[var(--color-text-muted)]">
+        #{sample.number}
+      </span>
+      <span className="min-w-0 flex-1 truncate text-sm">{sample.title}</span>
+      {sample.age_days !== null && (
+        <span className="shrink-0 font-mono text-2xs tabular-nums text-[var(--color-text-muted)]">
+          {sample.age_days} 天
+        </span>
+      )}
+    </>
+  )
+
+  return (
+    <li className="flex items-center gap-2">
+      {sample.subject_type === 'pull_request' ? (
+        <Link to="/pulls/$pullId" params={{ pullId: sample.subject_id }} className={SAMPLE_ROW}>
+          {inner}
+        </Link>
+      ) : sample.url ? (
+        <a href={sample.url} target="_blank" rel="noreferrer noopener" className={SAMPLE_ROW}>
+          {inner}
+        </a>
+      ) : (
+        <span className={SAMPLE_ROW}>{inner}</span>
+      )}
+
+      {claimedByOther ? (
+        <Badge tone="info" className="shrink-0 font-normal">
+          已认领
+        </Badge>
+      ) : (
+        <button
+          type="button"
+          onClick={onToggle}
+          disabled={busy}
+          className="shrink-0 rounded-[var(--radius-control)] px-2 py-0.5 text-2xs text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-2)] hover:text-[var(--color-accent)] disabled:opacity-50"
+        >
+          {mine ? '交还' : '认领'}
+        </button>
+      )}
+    </li>
+  )
+}