@kernel-sig/console 0.1.0

package/frontend/src/pages/pulls/PullDetailPage.tsx

@@ -0,0 +1,833 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { Select, Tabs } from 'antd'
+import { ArrowLeft, ExternalLink, Sparkles } from 'lucide-react'
+import { useState } from 'react'
+
+import { aiApi, STATUS_META, TASK_META, type AIAnalysis, type AITask } from '@/api/ai'
+import { attentionApi } from '@/api/attention'
+import {
+  classificationApi,
+  KIND_META,
+  KIND_ORDER,
+  SOURCE_META,
+  type PRKind,
+} from '@/api/classification'
+import { pullsApi, type PRCommit, type PRFile, type PullDetail } from '@/api/pulls'
+import { ClassificationBadge } from '@/components/ClassificationBadge'
+import { GateBadge } from '@/components/GateBadge'
+import { DiscussionTimeline } from '@/components/pulls/DiscussionTimeline'
+import { LabelChips } from '@/components/pulls/LabelChips'
+import { SeverityBadge } from '@/components/SeverityBadge'
+import { Alert } from '@/components/ui/alert'
+import { Badge, type BadgeTone } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardBody, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn, formatDateTime, formatRelativeTime } from '@/lib/utils'
+
+type Tab = 'overview' | 'commits' | 'files' | 'discussion' | 'ai'
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: 'overview', label: '概览' },
+  { key: 'commits', label: '提交' },
+  { key: 'files', label: '文件变更' },
+  { key: 'discussion', label: '讨论' },
+  { key: 'ai', label: 'AI 分析' },
+]
+
+/** 页签上的条数角标。0 不显示，缺省时也不显示。 */
+function tabCount(key: Tab, pull: PullDetail): number {
+  if (key === 'commits') return pull.commits.length
+  if (key === 'files') return pull.files.length
+  if (key === 'discussion') return pull.comments.length
+  return 0
+}
+
+function tabPane(key: Tab, pull: PullDetail) {
+  switch (key) {
+    case 'overview':
+      return <OverviewTab pull={pull} />
+    case 'commits':
+      return <CommitsTab pull={pull} />
+    case 'files':
+      return <FilesTab pull={pull} />
+    case 'discussion':
+      return <DiscussionTimeline events={pull.review_events} comments={pull.comments} />
+    case 'ai':
+      return <AiTab pull={pull} />
+  }
+}
+
+export function PullDetailPage({ pullId }: { pullId: string }) {
+  const [tab, setTab] = useState<Tab>('overview')
+
+  const { data: pull, isLoading } = useQuery({
+    queryKey: ['pull', pullId],
+    queryFn: () => pullsApi.detail(pullId),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-7 w-2/3" />
+        <Skeleton className="h-40 w-full" />
+      </div>
+    )
+  }
+
+  if (!pull) return <EmptyState title="PR 不存在" />
+
+  return (
+    <div className="space-y-4">
+      <Link
+        to="/pulls"
+        search={{}}
+        className="inline-flex items-center gap-1.5 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
+      >
+        <ArrowLeft className="size-3.5" aria-hidden />
+        返回列表
+      </Link>
+
+      <header className="space-y-2">
+        <h1 className="text-base font-semibold leading-snug tracking-tight">{pull.title}</h1>
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-[var(--color-text-secondary)]">
+          <span className="font-mono text-[var(--color-text-muted)]">#{pull.number}</span>
+          <GateBadge stage={pull.gate_stage} />
+          <HeaderClassification pullId={pull.id} />
+          <span>
+            {pull.author_login ?? '未知作者'} → <code>{pull.target_branch}</code>
+          </span>
+          <span className="text-[var(--color-text-muted)]">
+            创建于 {formatDateTime(pull.atomgit_created_at)}
+          </span>
+          {pull.html_url && (
+            <a
+              href={pull.html_url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="inline-flex items-center gap-1 text-[var(--color-accent)] hover:underline"
+            >
+              在 AtomGit 打开
+              <ExternalLink className="size-3" aria-hidden />
+            </a>
+          )}
+        </div>
+      </header>
+
+      <div className="grid gap-4 lg:grid-cols-[1fr_280px]">
+        <div className="min-w-0">
+          <Tabs
+            activeKey={tab}
+            onChange={(key) => setTab(key as Tab)}
+            items={TABS.map((item) => ({
+              key: item.key,
+              label: (
+                <span className="inline-flex items-center gap-1.5">
+                  {item.label}
+                  {tabCount(item.key, pull) > 0 && (
+                    <span className="font-mono text-2xs text-[var(--color-text-muted)]">
+                      {tabCount(item.key, pull)}
+                    </span>
+                  )}
+                </span>
+              ),
+              children: tabPane(item.key, pull),
+            }))}
+          />
+        </div>
+
+        <aside className="space-y-4">
+          <GatePanel pull={pull} />
+          <LabelsPanel pull={pull} />
+          <ClassificationPanel pull={pull} />
+          <MetaPanel pull={pull} />
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+/** 标题旁的分类标签。分类是"这是什么"的第一印象，放在标题行最省事。 */
+function HeaderClassification({ pullId }: { pullId: string }) {
+  const { data } = useQuery({
+    queryKey: ['pull-classification', pullId],
+    queryFn: () => classificationApi.forPull(pullId),
+  })
+  if (!data) return null
+  return <ClassificationBadge kind={data.kind} source={data.source} />
+}
+
+function OverviewTab({ pull }: { pull: PullDetail }) {
+  if (!pull.body?.trim()) {
+    return (
+      <EmptyState
+        title="该 PR 没有描述内容"
+        description="openEuler 的 PR 模板要求填写功能描述与关联 Issue，缺失描述会增加评审成本。"
+      />
+    )
+  }
+  return (
+    <Card>
+      <CardBody>
+        <pre className="whitespace-pre-wrap break-words font-sans text-sm leading-relaxed text-[var(--color-text-secondary)]">
+          {pull.body}
+        </pre>
+      </CardBody>
+    </Card>
+  )
+}
+
+function CommitsTab({ pull }: { pull: PullDetail }) {
+  if (pull.commits.length === 0) {
+    return (
+      <EmptyState
+        title="尚未同步提交信息"
+        description="补丁列表需要拉取详情，可在「设置 → 仓库与同步」中手动触发一次同步。"
+      />
+    )
+  }
+  return (
+    <div className="space-y-2">
+      {pull.commits.map((commit: PRCommit) => (
+        <Card key={commit.sha}>
+          <CardBody>
+            <div className="flex items-start gap-3">
+              <span className="mt-0.5 font-mono text-2xs text-[var(--color-text-muted)]">
+                {String(commit.sequence).padStart(4, '0')}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">{commit.subject}</p>
+                <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-[var(--color-text-muted)]">
+                  <code>{commit.sha.slice(0, 12)}</code>
+                  {commit.author_name && <span>{commit.author_name}</span>}
+                  {commit.committed_at && <span>{formatDateTime(commit.committed_at)}</span>}
+                </div>
+                {commit.signed_off_bys && commit.signed_off_bys.length === 0 && (
+                  <Badge tone="warning" className="mt-2">
+                    缺少 Signed-off-by
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+function FilesTab({ pull }: { pull: PullDetail }) {
+  if (pull.files.length === 0) {
+    return <EmptyState title="尚未同步文件变更" description="需要拉取 PR 详情。" />
+  }
+  return (
+    <div className="space-y-2">
+      {pull.files.map((file: PRFile) => (
+        <Card key={file.filename}>
+          <CardHeader className="p-4 pb-2">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <code className="break-all text-xs">{file.filename}</code>
+              <div className="flex items-center gap-2">
+                {file.is_binary && <Badge tone="danger">二进制文件</Badge>}
+                {file.too_large && <Badge tone="warning">diff 过大</Badge>}
+                <span className="font-mono text-xs tabular-nums">
+                  <span className="text-[var(--color-success)]">+{file.additions}</span>
+                  <span className="mx-0.5 text-[var(--color-text-muted)]">/</span>
+                  <span className="text-[var(--color-danger)]">-{file.deletions}</span>
+                </span>
+              </div>
+            </div>
+          </CardHeader>
+          {file.diff && (
+            <CardContent className="p-0">
+              <pre className="max-h-80 overflow-auto border-t border-[var(--color-border-subtle)] p-3 text-xs leading-relaxed">
+                {file.diff.split('\n').map((line: string, index: number) => (
+                  <div
+                    key={index}
+                    className={cn(
+                      'whitespace-pre-wrap break-all',
+                      line.startsWith('+') && !line.startsWith('+++') && 'text-[var(--color-success)]',
+                      line.startsWith('-') && !line.startsWith('---') && 'text-[var(--color-danger)]',
+                      line.startsWith('@@') && 'text-[var(--color-info)]',
+                    )}
+                  >
+                    {line || ' '}
+                  </div>
+                ))}
+              </pre>
+            </CardContent>
+          )}
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * 标签面板。
+ *
+ * 标签是上游门禁的载体 —— approved / lgtm / ci_successful / openeuler-cla/yes
+ * 这些取值直接决定 PR 能不能合入，因此按原色展示，不重新着色。
+ */
+function LabelsPanel({ pull }: { pull: PullDetail }) {
+  if (pull.labels.length === 0) return null
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>标签</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <LabelChips labels={pull.labels} />
+      </CardContent>
+    </Card>
+  )
+}
+
+/**
+ * 分类面板。
+ *
+ * 三项信息缺一不可：判成了什么、凭什么这么判、能不能改。
+ * 只显示结论的话，分类错了维护者只能干看着 —— 而自动分类一定会有错的时候。
+ */
+function ClassificationPanel({ pull }: { pull: PullDetail }) {
+  const queryClient = useQueryClient()
+  const [editing, setEditing] = useState(false)
+  const [kind, setKind] = useState<PRKind>('unknown')
+  const [subsystem, setSubsystem] = useState('')
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['pull-classification', pull.id],
+    queryFn: () => classificationApi.forPull(pull.id),
+  })
+
+  const { data: attention } = useQuery({
+    queryKey: ['pull-attention', pull.id],
+    queryFn: () => attentionApi.forPull(pull.id),
+  })
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ['pull-classification', pull.id] })
+    queryClient.invalidateQueries({ queryKey: ['classifications'] })
+  }
+
+  const saveOverride = useMutation({
+    mutationFn: () => classificationApi.override(data!.id, kind, subsystem || null),
+    onSuccess: () => {
+      setEditing(false)
+      invalidate()
+    },
+  })
+
+  const clearOverride = useMutation({
+    mutationFn: () => classificationApi.clearOverride(data!.id),
+    onSuccess: invalidate,
+  })
+
+  const recompute = useMutation({
+    mutationFn: () => classificationApi.recompute(pull.repository_id),
+    onSuccess: invalidate,
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>分类</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {isLoading ? (
+          <Skeleton className="h-10 w-full" />
+        ) : data ? (
+          <>
+            <div className="flex flex-wrap items-center gap-2">
+              <ClassificationBadge kind={data.kind} source={data.source} />
+              {data.subsystem && (
+                <span className="text-sm text-[var(--color-text-secondary)]">
+                  {data.subsystem_label ?? data.subsystem}
+                </span>
+              )}
+              {data.confidence < 1 && (
+                <span className="font-mono text-2xs text-[var(--color-text-muted)]">
+                  置信度 {Math.round(data.confidence * 100)}%
+                </span>
+              )}
+            </div>
+
+            {data.reason && (
+              <p className="text-xs leading-relaxed text-[var(--color-text-muted)]">
+                {data.reason}
+                {SOURCE_META[data.source] && `（${SOURCE_META[data.source].hint}）`}
+              </p>
+            )}
+
+            {data.cve_ids && data.cve_ids.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {data.cve_ids.map((cve) => (
+                  <Badge key={cve} tone="danger">
+                    {cve}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {data.related_subsystems && data.related_subsystems.length > 0 && (
+              <p className="text-xs text-[var(--color-text-muted)]">
+                相关子系统：{data.related_subsystems.join('、')}
+              </p>
+            )}
+
+            {editing ? (
+              <div className="space-y-2 border-t border-[var(--color-border-subtle)] pt-3">
+                {/* optionFilterProp 默认按 value 过滤，而 value 是 driver_update
+                    这类英文标识 —— 使用者记得住的是「驱动更新」。13 个类别配搜索
+                    才有用，配了却搜不到中文就等于没有。 */}
+                <Select
+                  aria-label="类型"
+                  className="w-full"
+                  showSearch
+                  optionFilterProp="label"
+                  options={KIND_OPTIONS}
+                  value={kind}
+                  onChange={(value) => setKind(value as PRKind)}
+                />
+                <Input
+                  aria-label="子系统"
+                  placeholder="子系统标识，如 net / mm"
+                  value={subsystem}
+                  onChange={(event) => setSubsystem(event.target.value)}
+                />
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    onClick={() => saveOverride.mutate()}
+                    loading={saveOverride.isPending}
+                  >
+                    保存
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => setEditing(false)}>
+                    取消
+                  </Button>
+                </div>
+                <p className="text-2xs text-[var(--color-text-muted)]">
+                  人工指定后，规则重算与 AI 补判都不会再改写这条记录。
+                </p>
+              </div>
+            ) : (
+              <div className="flex gap-2 border-t border-[var(--color-border-subtle)] pt-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setKind(data.kind)
+                    setSubsystem(data.subsystem ?? '')
+                    setEditing(true)
+                  }}
+                >
+                  修改
+                </Button>
+                {data.is_override && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => clearOverride.mutate()}
+                    loading={clearOverride.isPending}
+                  >
+                    撤销人工指定
+                  </Button>
+                )}
+                {!data.is_override && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => recompute.mutate()}
+                    loading={recompute.isPending}
+                  >
+                    重算
+                  </Button>
+                )}
+              </div>
+            )}
+          </>
+        ) : (
+          <p className="text-sm text-[var(--color-text-muted)]">
+            尚未分类。分类由定时任务执行，可在「设置 → 仓库与同步」触发同步后重试。
+          </p>
+        )}
+
+        {attention && attention.length > 0 && (
+          <div className="border-t border-[var(--color-border-subtle)] pt-3">
+            <p className="mb-1.5 text-xs text-[var(--color-text-muted)]">
+              该 PR 在关注队列中
+            </p>
+            <ul className="space-y-1.5">
+              {attention.map((item) => (
+                <li key={item.id} className="flex items-start gap-2">
+                  <SeverityBadge severity={item.severity} />
+                  <div className="min-w-0">
+                    <div className="text-xs">{item.title}</div>
+                    {item.detail && (
+                      <div className="text-2xs text-[var(--color-text-muted)]">
+                        {item.detail}
+                      </div>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+// 下拉选项与列表筛选共用同一份顺序定义，避免两处手工维护后漂移
+const KIND_OPTIONS = KIND_ORDER.map((value) => ({ value, label: KIND_META[value].label }))
+
+const TASK_OPTIONS = (['summarize', 'risk_review', 'backport_verify', 'classify'] as AITask[]).map(
+  (value) => ({ value, label: TASK_META[value].label }),
+)
+
+/**
+ * AI 分析面板。
+ *
+ * 只展示已有结果，不自动触发 —— 每次调用都要花钱，
+ * 让"什么时候分析"成为使用者的显式决定。
+ */
+function AiTab({ pull }: { pull: PullDetail }) {
+  const queryClient = useQueryClient()
+  const [task, setTask] = useState<AITask>('summarize')
+  const [error, setError] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['pull-analyses', pull.id],
+    queryFn: () => aiApi.analyses('pull_request', pull.id),
+  })
+
+  const analyze = useMutation({
+    mutationFn: (force: boolean) => aiApi.analyzePull(pull.id, task, force),
+    onSuccess: async (analysis) => {
+      setError(analysis.error)
+      await queryClient.invalidateQueries({ queryKey: ['pull-analyses', pull.id] })
+      await queryClient.invalidateQueries({ queryKey: ['pull-classification', pull.id] })
+    },
+    onError: (cause) => setError(cause instanceof Error ? cause.message : '分析失败'),
+  })
+
+  return (
+    <div className="space-y-3">
+      <Card>
+        <CardBody className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Select
+              aria-label="分析任务"
+              className="w-44"
+              options={TASK_OPTIONS}
+              value={task}
+              onChange={(value) => setTask(value as AITask)}
+            />
+            <Button size="sm" onClick={() => analyze.mutate(false)} loading={analyze.isPending}>
+              <Sparkles className="size-3.5" aria-hidden />
+              分析
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => analyze.mutate(true)}
+              loading={analyze.isPending}
+            >
+              强制重跑
+            </Button>
+            <span className="text-xs text-[var(--color-text-muted)]">
+              {TASK_META[task].purpose}
+            </span>
+          </div>
+          <p className="text-2xs leading-relaxed text-[var(--color-text-muted)]">
+            内容未变时不会重复调用模型；「强制重跑」才会绕开该检查。
+            风险审查与 Backport 核对需要已同步的补丁内容，否则结论不可信。
+          </p>
+        </CardBody>
+      </Card>
+
+      {error && <Alert tone="danger">{error}</Alert>}
+
+      {isLoading ? (
+        <Skeleton className="h-32 w-full" />
+      ) : !data || data.length === 0 ? (
+        <EmptyState
+          title="尚无分析结果"
+          description="选择任务后点击「分析」。AI 调用按次计费，因此不自动执行。"
+        />
+      ) : (
+        data.map((analysis) => <AnalysisCard key={analysis.id} analysis={analysis} />)
+      )}
+    </div>
+  )
+}
+
+function AnalysisCard({ analysis }: { analysis: AIAnalysis }) {
+  const status = STATUS_META[analysis.status]
+  return (
+    <Card>
+      <CardHeader className="p-4 pb-2">
+        <div className="flex flex-wrap items-center gap-2">
+          <CardTitle className="text-sm">{TASK_META[analysis.task].label}</CardTitle>
+          <Badge tone={status.tone}>{status.label}</Badge>
+          {analysis.model && (
+            <span className="font-mono text-2xs text-[var(--color-text-muted)]">
+              {analysis.provider_name}/{analysis.model}
+            </span>
+          )}
+          <span className="ml-auto text-2xs text-[var(--color-text-muted)]">
+            {formatRelativeTime(analysis.created_at)}
+            {analysis.prompt_tokens + analysis.completion_tokens > 0 &&
+              ` · ${analysis.prompt_tokens + analysis.completion_tokens} tokens`}
+          </span>
+        </div>
+      </CardHeader>
+      <CardBody className="pt-0">
+        {analysis.error && <Alert tone="danger">{analysis.error}</Alert>}
+        {analysis.result && <AnalysisResult task={analysis.task} result={analysis.result} />}
+      </CardBody>
+    </Card>
+  )
+}
+
+/** 按任务渲染结构化结果。每种任务的输出形状不同，统一渲染只会两边都难看。 */
+function AnalysisResult({ task, result }: { task: AITask; result: Record<string, unknown> }) {
+  if (task === 'summarize') {
+    const changes = asStringArray(result.changes)
+    const risks = asStringArray(result.risk_areas)
+    return (
+      <div className="space-y-2.5">
+        {typeof result.summary === 'string' && (
+          <p className="text-sm leading-relaxed text-[var(--color-text-secondary)]">
+            {result.summary}
+          </p>
+        )}
+        {changes.length > 0 && <BulletList title="主要变更" items={changes} />}
+        {risks.length > 0 && <BulletList title="需重点看" items={risks} tone="warning" />}
+      </div>
+    )
+  }
+
+  if (task === 'risk_review') {
+    const risks = (result.risks as Record<string, unknown>[] | undefined) ?? []
+    const questions = asStringArray(result.questions)
+    const formatIssues = asStringArray(result.patch_format_issues)
+    const kabi = result.kabi_impact as Record<string, unknown> | undefined
+
+    return (
+      <div className="space-y-3">
+        {typeof result.summary === 'string' && (
+          <p className="text-sm leading-relaxed text-[var(--color-text-secondary)]">
+            {result.summary}
+          </p>
+        )}
+
+        {kabi?.breaking === true && (
+          <Alert tone="danger">KABI 兼容性：{String(kabi.detail ?? '存在破坏性变更')}</Alert>
+        )}
+
+        {risks.length === 0 ? (
+          <p className="text-sm text-[var(--color-text-muted)]">未发现具体缺陷。</p>
+        ) : (
+          <ul className="space-y-2">
+            {risks.map((risk, index) => (
+              <li
+                key={index}
+                className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] p-3"
+              >
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge tone={severityTone(String(risk.severity))}>
+                    {String(risk.severity ?? '提示')}
+                  </Badge>
+                  <code className="text-xs text-[var(--color-text-secondary)]">
+                    {String(risk.file ?? '')}
+                  </code>
+                  {typeof risk.location === 'string' && risk.location && (
+                    <span className="text-xs text-[var(--color-text-muted)]">
+                      {risk.location}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-1.5 text-sm">{String(risk.issue ?? '')}</p>
+                {typeof risk.rationale === 'string' && (
+                  <p className="mt-1 text-xs text-[var(--color-text-muted)]">
+                    {risk.rationale}
+                  </p>
+                )}
+                {typeof risk.suggestion === 'string' && (
+                  <p className="mt-1 text-xs text-[var(--color-info)]">
+                    建议：{risk.suggestion}
+                  </p>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {questions.length > 0 && <BulletList title="需作者澄清" items={questions} tone="info" />}
+        {formatIssues.length > 0 && (
+          <BulletList title="补丁格式问题" items={formatIssues} tone="warning" />
+        )}
+      </div>
+    )
+  }
+
+  if (task === 'classify') {
+    return (
+      <div className="flex flex-wrap items-center gap-2 text-sm">
+        <ClassificationBadge kind={String(result.kind ?? 'unknown') as PRKind} source="ai" />
+        {typeof result.subsystem === 'string' && result.subsystem && (
+          <span className="text-[var(--color-text-secondary)]">
+            {result.subsystem}
+          </span>
+        )}
+        {typeof result.confidence === 'number' && (
+          <span className="font-mono text-2xs text-[var(--color-text-muted)]">
+            置信度 {Math.round(result.confidence * 100)}%
+          </span>
+        )}
+      </div>
+    )
+  }
+
+  // backport_verify 及其他：原样展示结构化 JSON，胜过用一套通用模板强行套
+  return (
+    <pre className="overflow-auto rounded-[var(--radius-control)] bg-[var(--color-surface-2)] p-3 text-xs leading-relaxed">
+      {JSON.stringify(result, null, 2)}
+    </pre>
+  )
+}
+
+function BulletList({
+  title,
+  items,
+  tone,
+}: {
+  title: string
+  items: string[]
+  tone?: 'warning' | 'info'
+}) {
+  return (
+    <div>
+      <div className="mb-1 text-xs text-[var(--color-text-muted)]">{title}</div>
+      <ul className="space-y-1">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-start gap-2 text-sm">
+            <span
+              aria-hidden
+              className={cn(
+                'mt-1.5 size-1.5 shrink-0 rounded-full',
+                tone === 'warning'
+                  ? 'bg-[var(--color-warning)]'
+                  : tone === 'info'
+                    ? 'bg-[var(--color-info)]'
+                    : 'bg-[var(--color-text-muted)]',
+              )}
+            />
+            <span className="text-[var(--color-text-secondary)]">{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function asStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value.filter((item): item is string => typeof item === 'string')
+}
+
+function severityTone(severity: string): BadgeTone {
+  switch (severity) {
+    case 'blocker':
+    case 'critical':
+      return 'danger'
+    case 'warning':
+      return 'warning'
+    default:
+      return 'neutral'
+  }
+}
+
+function GatePanel({ pull }: { pull: PullDetail }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>合并门禁</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-center gap-2">
+          <GateBadge stage={pull.gate_stage} />
+          {pull.ready_to_merge && (
+            <span className="text-xs text-[var(--color-success)]">可合入</span>
+          )}
+        </div>
+
+        {pull.blocking_reasons.length > 0 ? (
+          <ul className="space-y-1.5">
+            {pull.blocking_reasons.map((reason: string) => (
+              <li
+                key={reason}
+                className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)]"
+              >
+                <span
+                  aria-hidden
+                  className="size-1.5 shrink-0 rounded-full bg-[var(--color-warning)]"
+                />
+                {reason}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-sm text-[var(--color-success)]">门禁条件均已满足</p>
+        )}
+
+        {pull.lgtm_actors.length > 0 && (
+          <div className="border-t border-[var(--color-border-subtle)] pt-3">
+            <p className="mb-1.5 text-xs text-[var(--color-text-muted)]">已 LGTM 的评审人</p>
+            <div className="flex flex-wrap gap-1.5">
+              {pull.lgtm_actors.map((actor: string) => (
+                <Badge key={actor} tone="success">
+                  {actor}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function MetaPanel({ pull }: { pull: PullDetail }) {
+  const rows: [string, React.ReactNode][] = [
+    ['状态', pull.state === 'open' ? '待处理' : pull.state === 'merged' ? '已合并' : '已关闭'],
+    ['源分支', <code key="s">{pull.source_branch ?? '—'}</code>],
+    ['目标分支', <code key="t">{pull.target_branch ?? '—'}</code>],
+    ['变更行数', `${pull.added_lines} / ${pull.removed_lines}`],
+    ['变更文件', pull.changed_files || '—'],
+    ['评论数', pull.comments_count],
+    ['合并冲突', pull.merge_conflict ? '是' : '否'],
+    ['最后更新', formatRelativeTime(pull.atomgit_updated_at)],
+  ]
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>元信息</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {rows.map(([label, value]) => (
+          <div key={label} className="flex items-center justify-between gap-3 text-sm">
+            <span className="text-[var(--color-text-muted)]">{label}</span>
+            <span className="text-right text-[var(--color-text-secondary)]">{value}</span>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}