@kernel-sig/console 0.1.0 → 0.1.1

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

@@ -141,6 +141,7 @@ export function PullDetailPage({ pullId }: { pullId: string }) {
 
         <aside className="space-y-4">
           <GatePanel pull={pull} />
+          <LinkedIssuesPanel pull={pull} />
           <LabelsPanel pull={pull} />
           <ClassificationPanel pull={pull} />
           <MetaPanel pull={pull} />
@@ -150,6 +151,56 @@ export function PullDetailPage({ pullId }: { pullId: string }) {
   )
 }
 
+/**
+ * 关联 Issue。
+ *
+ * 两个来源分开标注，不合并成一句"已关联 N 个 Issue"：上游显式登记的可信，
+ * 正文里写的链接只是作者自己写的，两者混起来的代价是评审人以为某个 Issue
+ * 已经被正式关联上了。
+ *
+ * 没有关联时不渲染 —— 空面板占着侧栏位置，只说明"没东西"。
+ */
+function LinkedIssuesPanel({ pull }: { pull: PullDetail }) {
+  if (pull.linked_issues.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>关联 Issue</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2.5">
+        {pull.linked_issues.map((issue) => (
+          <div key={issue.number}>
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span className="font-mono text-xs text-[var(--color-text-muted)]">
+                #{issue.number}
+              </span>
+              {issue.issue_state && <Badge tone="neutral">{issue.issue_state}</Badge>}
+              <span className="text-2xs text-[var(--color-text-muted)]">
+                {issue.source === 'atomgit_link' ? '上游登记' : '正文声明'}
+              </span>
+            </div>
+            <p className="mt-0.5 text-xs leading-relaxed text-[var(--color-text-secondary)]">
+              {issue.title ?? '该 Issue 尚未同步，只有编号'}
+            </p>
+            {issue.html_url && (
+              <a
+                href={issue.html_url}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="mt-0.5 inline-flex items-center gap-1 text-2xs text-[var(--color-accent)] hover:underline"
+              >
+                在 AtomGit 打开
+                <ExternalLink className="size-2.5" aria-hidden />
+              </a>
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
 /** 标题旁的分类标签。分类是"这是什么"的第一印象，放在标题行最省事。 */
 function HeaderClassification({ pullId }: { pullId: string }) {
   const { data } = useQuery({
@@ -161,21 +212,122 @@ function HeaderClassification({ pullId }: { pullId: string }) {
 }
 
 function OverviewTab({ pull }: { pull: PullDetail }) {
-  if (!pull.body?.trim()) {
-    return (
-      <EmptyState
-        title="该 PR 没有描述内容"
-        description="openEuler 的 PR 模板要求填写功能描述与关联 Issue，缺失描述会增加评审成本。"
-      />
-    )
-  }
+  return (
+    <div className="space-y-3">
+      <ReviewPanel pull={pull} />
+      {pull.body?.trim() ? (
+        <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>
+      ) : (
+        <EmptyState
+          title="该 PR 没有描述内容"
+          description="openEuler 的 PR 模板要求填写功能描述与关联 Issue，缺失描述会增加评审成本。"
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * 评审情况。
+ *
+ * 会做三件事：谁表了态、谁提了意见、还该找谁。侧栏的「合并门禁」只报
+ * 门禁状态，人名与意见集中在这里 —— 同一个名单在两处各渲染一遍，迟早
+ * 会一处更新一处不更新。
+ */
+function ReviewPanel({ pull }: { pull: PullDetail }) {
+  const summary = pull.review_summary
+  if (!summary) return null
+
+  const empty =
+    summary.supported.length === 0 &&
+    summary.commenters.length === 0 &&
+    summary.pending.length === 0
+  if (empty) return null
+
   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>
+      <CardHeader>
+        <CardTitle>评审情况</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <section>
+          <p className="mb-1.5 text-xs text-[var(--color-text-muted)]">
+            已表态支持
+            {summary.committer_support > 0 && ` · 其中 Committer ${summary.committer_support} 人`}
+          </p>
+          {summary.supported.length === 0 ? (
+            <p className="text-sm text-[var(--color-warning)]">还没有人给出 LGTM</p>
+          ) : (
+            <ul className="flex flex-wrap gap-1.5">
+              {summary.supported.map((actor) => (
+                <li key={actor.login}>
+                  <Badge tone={actor.is_committer ? 'success' : 'neutral'}>
+                    {actor.login}
+                    {actor.is_committer && ' · Committer'}
+                    {actor.events > 1 && ` ×${actor.events}`}
+                  </Badge>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {summary.pending.length > 0 && (
+          <section>
+            <p className="mb-1.5 text-xs text-[var(--color-text-muted)]">
+              还需评审
+              {summary.subsystems.length > 0 && ` · 负责 ${summary.subsystems.join('、')} 的 Committer`}
+            </p>
+            <ul className="flex flex-wrap gap-1.5">
+              {summary.pending.map((actor) => (
+                <li key={actor.login}>
+                  <Badge tone="warning">{actor.login}</Badge>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {summary.commenters.length > 0 && (
+          <section>
+            <p className="mb-1.5 text-xs text-[var(--color-text-muted)]">提过意见</p>
+            <ul className="space-y-2">
+              {summary.commenters.map((commenter) => (
+                <li
+                  key={commenter.login}
+                  className="rounded-[var(--radius-control)] bg-[var(--color-surface-2)] p-2.5"
+                >
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-medium">{commenter.login}</span>
+                    <span className="text-2xs text-[var(--color-text-muted)]">
+                      {commenter.comments} 条
+                    </span>
+                    {commenter.last_at && (
+                      <span className="ml-auto text-2xs text-[var(--color-text-muted)]">
+                        {formatRelativeTime(commenter.last_at)}
+                      </span>
+                    )}
+                  </div>
+                  {commenter.latest_excerpt && (
+                    <p className="mt-1 text-xs leading-relaxed text-[var(--color-text-secondary)]">
+                      {commenter.latest_excerpt}
+                    </p>
+                  )}
+                </li>
+              ))}
+            </ul>
+            <p className="mt-1.5 text-2xs text-[var(--color-text-muted)]">
+              这里只给最新一条的摘要，完整讨论在「讨论」页签。
+            </p>
+          </section>
+        )}
+      </CardContent>
     </Card>
   )
 }
@@ -189,8 +341,32 @@ function CommitsTab({ pull }: { pull: PullDetail }) {
       />
     )
   }
+
+  // 提交级的增删行数上游只按单提交给，同步时按需取；这里的合计用文件级数据，
+  // 两者口径不同（文件级是 PR 终态，提交级是逐个补丁），所以分开显示。
+  const additions = pull.files.reduce((sum, file) => sum + file.additions, 0)
+  const deletions = pull.files.reduce((sum, file) => sum + file.deletions, 0)
+
   return (
     <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[var(--color-text-muted)]">
+        <span>
+          <span className="font-mono tabular-nums">{pull.commits.length}</span> 个提交
+        </span>
+        {pull.files.length > 0 && (
+          <>
+            <span>
+              <span className="font-mono tabular-nums">{pull.files.length}</span> 个文件
+            </span>
+            <span className="font-mono tabular-nums">
+              <span className="text-[var(--color-success)]">+{additions}</span>
+              <span className="mx-0.5">/</span>
+              <span className="text-[var(--color-danger)]">-{deletions}</span>
+            </span>
+          </>
+        )}
+      </div>
+
       {pull.commits.map((commit: PRCommit) => (
         <Card key={commit.sha}>
           <CardBody>
@@ -199,12 +375,31 @@ function CommitsTab({ pull }: { pull: PullDetail }) {
                 {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="flex flex-wrap items-baseline gap-x-2">
+                  <p className="text-sm font-medium">{commit.subject}</p>
+                  {commit.additions !== null && commit.deletions !== null && (
+                    <span className="font-mono text-2xs tabular-nums">
+                      <span className="text-[var(--color-success)]">+{commit.additions}</span>
+                      <span className="mx-0.5 text-[var(--color-text-muted)]">/</span>
+                      <span className="text-[var(--color-danger)]">-{commit.deletions}</span>
+                    </span>
+                  )}
+                </div>
                 <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>
+
+                {/* 完整提交信息。评审真正要看的是正文里的 `bugzilla:` /
+                    `CVE:` / `Reference:` 这些行 —— 只给标题等于把评审人
+                    赶回 AtomGit 页面。首行就是 subject，不再重复渲染。 */}
+                {commit.message.trim().split('\n').length > 1 && (
+                  <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-[var(--radius-control)] bg-[var(--color-surface-2)] p-2.5 font-mono text-2xs leading-relaxed text-[var(--color-text-secondary)]">
+                    {commit.message.trim().split('\n').slice(1).join('\n').trim()}
+                  </pre>
+                )}
+
                 {commit.signed_off_bys && commit.signed_off_bys.length === 0 && (
                   <Badge tone="warning" className="mt-2">
                     缺少 Signed-off-by
@@ -486,20 +681,21 @@ function ClassificationPanel({ pull }: { pull: PullDetail }) {
 // 下拉选项与列表筛选共用同一份顺序定义，避免两处手工维护后漂移
 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 }),
-)
+// 展示顺序按实际阅读顺序排，不按枚举顺序
+const TASK_ORDER: AITask[] = ['summarize', 'risk_review', 'backport_verify', 'classify']
 
 /**
  * AI 分析面板。
  *
- * 只展示已有结果，不自动触发 —— 每次调用都要花钱，
- * 让"什么时候分析"成为使用者的显式决定。
+ * 四类任务平铺，各自独立触发 —— 用一个下拉选任务的话，看完摘要要切一次、
+ * 看完风险再切回来，来回点，而且一眼看不出哪些跑过、哪些没跑。
+ *
+ * 不自动触发：每次调用都要花钱，让"什么时候分析"成为使用者的显式决定。
  */
 function AiTab({ pull }: { pull: PullDetail }) {
   const queryClient = useQueryClient()
-  const [task, setTask] = useState<AITask>('summarize')
   const [error, setError] = useState<string | null>(null)
+  const [busyTask, setBusyTask] = useState<AITask | null>(null)
 
   const { data, isLoading } = useQuery({
     queryKey: ['pull-analyses', pull.id],
@@ -507,89 +703,107 @@ function AiTab({ pull }: { pull: PullDetail }) {
   })
 
   const analyze = useMutation({
-    mutationFn: (force: boolean) => aiApi.analyzePull(pull.id, task, force),
+    mutationFn: ({ task, force }: { task: AITask; force: boolean }) =>
+      aiApi.analyzePull(pull.id, task, force),
+    onMutate: ({ task }) => setBusyTask(task),
     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 : '分析失败'),
+    onSettled: () => setBusyTask(null),
   })
 
+  // 一个对象每个任务只有一行（唯一约束保证），所以按任务取即可
+  const byTask = new Map((data ?? []).map((analysis) => [analysis.task, analysis]))
+
   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>
+      <p className="text-2xs leading-relaxed text-[var(--color-text-muted)]">
+        内容未变时不会重复调用模型，「强制重跑」才绕开该检查；AI 调用按次计费，所以不自动执行。
+        风险审查与 Backport 核对需要已同步的补丁内容，否则结论不可信。
+      </p>
 
       {error && <Alert tone="danger">{error}</Alert>}
 
-      {isLoading ? (
-        <Skeleton className="h-32 w-full" />
-      ) : !data || data.length === 0 ? (
-        <EmptyState
-          title="尚无分析结果"
-          description="选择任务后点击「分析」。AI 调用按次计费，因此不自动执行。"
+      {TASK_ORDER.map((task) => (
+        <TaskAnalysisCard
+          key={task}
+          task={task}
+          analysis={byTask.get(task)}
+          loading={isLoading}
+          busy={busyTask === task}
+          onRun={(force) => analyze.mutate({ task, force })}
         />
-      ) : (
-        data.map((analysis) => <AnalysisCard key={analysis.id} analysis={analysis} />)
-      )}
+      ))}
     </div>
   )
 }
 
-function AnalysisCard({ analysis }: { analysis: AIAnalysis }) {
-  const status = STATUS_META[analysis.status]
+function TaskAnalysisCard({
+  task,
+  analysis,
+  loading,
+  busy,
+  onRun,
+}: {
+  task: AITask
+  analysis: AIAnalysis | undefined
+  loading: boolean
+  busy: boolean
+  onRun: (force: boolean) => void
+}) {
+  const meta = TASK_META[task]
+  const status = analysis ? STATUS_META[analysis.status] : null
+
   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 && (
+          <CardTitle className="text-sm">{meta.label}</CardTitle>
+          {status ? (
+            <Badge tone={status.tone}>{status.label}</Badge>
+          ) : (
+            <Badge tone="neutral">未分析</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 className="ml-auto flex items-center gap-2">
+            {analysis && (
+              <span className="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>
+            )}
+            <Button size="sm" variant="secondary" onClick={() => onRun(false)} loading={busy}>
+              <Sparkles className="size-3.5" aria-hidden />
+              {analysis ? '重跑' : '分析'}
+            </Button>
+            {analysis && (
+              <Button variant="ghost" size="sm" onClick={() => onRun(true)} loading={busy}>
+                强制重跑
+              </Button>
+            )}
           </span>
         </div>
+        <p className="mt-1 text-2xs text-[var(--color-text-muted)]">{meta.purpose}</p>
       </CardHeader>
       <CardBody className="pt-0">
-        {analysis.error && <Alert tone="danger">{analysis.error}</Alert>}
-        {analysis.result && <AnalysisResult task={analysis.task} result={analysis.result} />}
+        {loading ? (
+          <Skeleton className="h-12 w-full" />
+        ) : !analysis ? (
+          <p className="text-xs text-[var(--color-text-muted)]">尚未分析。</p>
+        ) : (
+          <>
+            {analysis.error && <Alert tone="danger">{analysis.error}</Alert>}
+            {analysis.result && <AnalysisResult task={analysis.task} result={analysis.result} />}
+          </>
+        )}
       </CardBody>
     </Card>
   )
@@ -787,18 +1001,9 @@ function GatePanel({ pull }: { pull: PullDetail }) {
           <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>
   )

package/frontend/src/pages/settings/SettingsPage.tsx

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Select } from 'antd'
 import { useState, type FormEvent } from 'react'
 
 import { credentialsApi, repositoriesApi } from '@/api/repositories'
@@ -65,6 +66,20 @@ export function SettingsPage() {
     },
   })
 
+  // 把已有凭据挂到已有仓库上。没有这一步的话，先启动、后加凭据的人会卡死：
+  // 仓库是启动引导建的（那时还没有凭据），而「纳管仓库」按钮只在仓库列表为
+  // 空时出现 —— 仓库已经在了，按钮永远不出现，界面上再无第二个入口。
+  const attachCredential = useMutation({
+    mutationFn: ({
+      repositoryId,
+      credentialId,
+    }: {
+      repositoryId: string
+      credentialId: string
+    }) => repositoriesApi.update(repositoryId, { credential_id: credentialId }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['repositories'] }),
+  })
+
   function handleCredentialSubmit(event: FormEvent) {
     event.preventDefault()
     if (!tokenValue.trim()) return
@@ -232,10 +247,40 @@ export function SettingsPage() {
                       界面上就是一个永远 0 条的仓库，没人知道该去配凭据。 */}
                   {!repository.credential_id && (
                     <Alert tone="warning" className="mt-2">
-                      未配置凭据，同步不会运行。请在上方「访问凭据」中添加 AtomGit token。
+                      这个仓库还没关联凭据，同步不会运行。选一条凭据即可开始。
                     </Alert>
                   )}
 
+                  {attachCredential.error instanceof ApiError &&
+                    attachCredential.variables?.repositoryId === repository.id && (
+                      <Alert tone="danger" className="mt-2">
+                        {attachCredential.error.message}
+                      </Alert>
+                    )}
+
+                  {credentials && credentials.length > 0 && (
+                    <div className="mt-2.5 flex flex-wrap items-center gap-2">
+                      <span className="text-xs text-[var(--color-text-muted)]">使用凭据</span>
+                      <Select
+                        aria-label="使用凭据"
+                        className="w-56"
+                        size="small"
+                        placeholder="未选择"
+                        value={repository.credential_id ?? undefined}
+                        options={credentials.map((item) => ({
+                          value: item.id,
+                          label: item.name,
+                        }))}
+                        onChange={(credentialId) =>
+                          attachCredential.mutate({
+                            repositoryId: repository.id,
+                            credentialId,
+                          })
+                        }
+                      />
+                    </div>
+                  )}
+
                   {repository.last_sync_error && (
                     <Alert tone="danger" className="mt-2">
                       {repository.last_sync_error}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@kernel-sig/console",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "openEuler Kernel SIG 的 PR/Issue 管理平台：一条命令在本机起一整套实例",
   "bin": {
-    "ksc": "./cli/index.js"
+    "ksc": "cli/index.js"
   },
   "files": [
     "cli/",

package/scripts/e2e-verify.py

@@ -500,6 +500,18 @@ def verify_settings(page: Page, token: str | None) -> None:
     # 计数来自接口，不硬编码具体数值，避免数据变化后误报
     check("显示 PR 与 Issue 计数", "PR" in body and "Issue" in body)
 
+    # 每个仓库卡片上都得有凭据选择器。少了它，"启动引导先把仓库建好、之后
+    # 才补凭据"的人就再也挂不上凭据 —— 仓库已经存在，「纳管仓库」按钮只在
+    # 仓库列表为空时才出现，界面上再无第二个入口。这条断言盯的是入口存在，
+    # 不是某个仓库当下的关联状态（那个会随环境变）。
+    repos = page.request.get(f"{BASE}/api/v1/repositories").json()
+    pickers = page.get_by_label("使用凭据").count()
+    check(
+        "每个仓库卡片都有凭据选择器",
+        len(repos) > 0 and pickers == len(repos),
+        f"{pickers} 个选择器 / {len(repos)} 个仓库",
+    )
+
     if token:
         leaked = token in page.content()
         check("页面无凭据明文泄漏", not leaked)