@kernel-sig/console 0.1.0

package/frontend/src/components/layout/AppShell.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+import { Sidebar } from './Sidebar'
+import { TopBar } from './TopBar'
+
+export function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-full">
+      <Sidebar />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <TopBar />
+        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/layout/AuthLayout.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react'
+
+export function AuthLayout({
+  title,
+  description,
+  children,
+}: {
+  title: string
+  description: string
+  children: ReactNode
+}) {
+  return (
+    <div className="flex min-h-full items-center justify-center p-6">
+      <div className="w-full max-w-[380px]">
+        <div className="mb-7">
+          <div className="mb-5 flex items-center gap-2.5">
+            <div
+              aria-hidden
+              className="grid size-8 place-items-center rounded-[var(--radius-control)] bg-[var(--color-accent)] text-base font-bold text-white"
+            >
+              K
+            </div>
+            <span className="text-sm font-semibold tracking-tight">Kernel SIG Console</span>
+          </div>
+          <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
+          <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{description}</p>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}

package/frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,223 @@
+import { Link, useNavigate } from '@tanstack/react-router'
+import { Select } from 'antd'
+import {
+  Activity,
+  BarChart3,
+  Bot,
+  CalendarDays,
+  GitPullRequest,
+  GitBranch,
+  LayoutDashboard,
+  ListChecks,
+  ScrollText,
+  Settings,
+  ShieldCheck,
+  Users,
+  type LucideIcon,
+} from 'lucide-react'
+
+import type { Permission } from '@/api/auth'
+import { repoKey, type Repository } from '@/api/repositories'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { can, useCurrentUser } from '@/hooks/use-current-user'
+import { cn } from '@/lib/utils'
+
+interface NavItem {
+  /** 已实现的模块指向具体路由；未实现的留空并置 soon。 */
+  to?:
+    | '/dashboard'
+    | '/pulls'
+    | '/issues'
+    | '/attention'
+    | '/branches'
+    | '/meetings'
+    | '/members'
+    | '/settings/general'
+    | '/settings/ai'
+  label: string
+  icon: LucideIcon
+  permission?: Permission
+  soon?: boolean
+  /** 属于当前仓库的视图：这些页面把仓库带在地址里，切换器只管它们。 */
+  repoScoped?: boolean
+}
+
+interface NavSection {
+  title?: string
+  items: NavItem[]
+}
+
+const SECTIONS: NavSection[] = [
+  {
+    // 这一组的每一项都属于**当前仓库**。分出来是有意的：纳管两个仓库之后，
+    // "这条 PR 是哪个仓库的"必须先有答案，而这些页面正是答案的那一半。
+    title: '仓库视图',
+    items: [
+      { to: '/dashboard', label: '总览', icon: LayoutDashboard, repoScoped: true },
+      { to: '/pulls', label: 'PR', icon: GitPullRequest, repoScoped: true },
+      { to: '/issues', label: 'Issue', icon: ListChecks, repoScoped: true },
+      { to: '/attention', label: '关注队列', icon: Activity, repoScoped: true },
+      { to: '/branches', label: '版本与分支', icon: GitBranch, repoScoped: true },
+      { label: '评审中心', icon: ShieldCheck, soon: true },
+      { label: '统计', icon: BarChart3, soon: true },
+    ],
+  },
+  {
+    // SIG 的事务与仓库无关：例会纪要和成员名单都来自 community 仓库的
+    // sig/Kernel 文档，换仓库不会换出另一份名单。
+    title: 'SIG',
+    items: [
+      { to: '/meetings', label: 'SIG 例会', icon: CalendarDays },
+      { to: '/members', label: '成员与归属', icon: Users },
+    ],
+  },
+  {
+    title: '管理',
+    items: [
+      { label: '用户', icon: Users, permission: 'manage_users', soon: true },
+      {
+        to: '/settings/ai',
+        label: 'AI 对接',
+        icon: Bot,
+        permission: 'manage_credentials',
+      },
+      {
+        to: '/settings/general',
+        label: '仓库与同步',
+        icon: Settings,
+        permission: 'manage_repository',
+      },
+      { label: '审计日志', icon: ScrollText, permission: 'view_audit_log', soon: true },
+    ],
+  },
+]
+
+export function Sidebar() {
+  const { user } = useCurrentUser()
+  const { repository, repositories, key: repo } = useCurrentRepository()
+
+  return (
+    <aside className="flex w-56 shrink-0 flex-col border-r border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
+      <div className="flex h-14 items-center gap-2.5 border-b border-[var(--color-border-subtle)] px-4">
+        <div
+          aria-hidden
+          className="grid size-7 place-items-center rounded-[var(--radius-control)] bg-[var(--color-accent)] text-sm font-bold text-white"
+        >
+          K
+        </div>
+        <span className="text-sm font-semibold tracking-tight">Kernel SIG</span>
+      </div>
+
+      <RepositorySwitcher repository={repository} repositories={repositories} />
+
+      <nav className="flex-1 overflow-y-auto p-2">
+        {SECTIONS.map((section, index) => {
+          const visible = section.items.filter(
+            (item) => !item.permission || can(user, item.permission),
+          )
+          if (visible.length === 0) return null
+
+          return (
+            <div key={section.title ?? `section-${index}`} className={cn(index > 0 && 'mt-4')}>
+              {section.title && (
+                <div className="px-2.5 pb-1.5 text-2xs font-medium tracking-wide text-[var(--color-text-muted)]">
+                  {section.title}
+                </div>
+              )}
+              <ul className="space-y-0.5">
+                {visible.map((item) => (
+                  <li key={item.label}>
+                    <NavEntry item={item} repo={repo} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}
+
+const entryClass =
+  'flex items-center gap-2.5 rounded-[var(--radius-control)] px-2.5 py-1.5 text-sm font-medium transition-colors duration-150'
+
+function NavEntry({ item, repo }: { item: NavItem; repo: string | undefined }) {
+  const Icon = item.icon
+
+  if (item.soon || !item.to) {
+    return (
+      <div
+        aria-disabled="true"
+        title="尚未开放"
+        className={cn(entryClass, 'cursor-default text-[var(--color-text-muted)] opacity-60')}
+      >
+        <Icon className="size-4 shrink-0" aria-hidden />
+        <span className="flex-1">{item.label}</span>
+        <span className="text-2xs tracking-tight">即将开放</span>
+      </div>
+    )
+  }
+
+  return (
+    <Link
+      to={item.to}
+      // 仓库维度的页面把仓库带在地址里，点进去才不会掉回"第一个仓库"
+      search={item.repoScoped && repo ? { repo } : undefined}
+      activeProps={{
+        className: 'bg-[var(--color-surface-2)] text-[var(--color-text-primary)]',
+      }}
+      inactiveProps={{
+        className:
+          'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text-primary)]',
+      }}
+      className={entryClass}
+    >
+      <Icon className="size-4 shrink-0" aria-hidden />
+      {item.label}
+    </Link>
+  )
+}
+
+/**
+ * 仓库切换器。
+ *
+ * 放在侧栏最上方、紧挨着"仓库视图"那组，是为了回答一个随时会出现的问题：
+ * 我现在看的这些数字是哪个仓库的。纳管两个仓库之后，"第一个仓库"已经不是
+ * 一个使用者能理解的概念了。
+ *
+ * 切换时只换地址里的 repo，停在当前页面 —— 在 PR 列表里比较两个仓库是常事。
+ * 若当前页面在新仓库里不成立（比如那个分支名不存在），页面自己会说明。
+ */
+function RepositorySwitcher({
+  repository,
+  repositories,
+}: {
+  repository: Repository | undefined
+  repositories: Repository[]
+}) {
+  const navigate = useNavigate()
+
+  // 只有一个仓库时不占位置：那时候没有可切的，放个下拉只是噪音
+  if (repositories.length < 2) return null
+
+  return (
+    <div className="border-b border-[var(--color-border-subtle)] p-2">
+      <Select
+        aria-label="当前仓库"
+        className="w-full"
+        size="small"
+        value={repository ? repoKey(repository) : undefined}
+        options={repositories.map((item) => ({
+          value: repoKey(item),
+          label: item.display_name ?? repoKey(item),
+        }))}
+        onChange={(value) =>
+          // 相对当前路由，只换 repo：在 PR 列表里比较两个仓库是常事，
+          // 跳到别处反而丢了上下文
+          navigate({ to: '.', search: (prev) => ({ ...prev, repo: value }) })
+        }
+      />
+    </div>
+  )
+}

package/frontend/src/components/layout/TopBar.tsx

@@ -0,0 +1,47 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { LogOut } from 'lucide-react'
+
+import { authApi } from '@/api/auth'
+import { Button } from '@/components/ui/button'
+import { useCurrentUser } from '@/hooks/use-current-user'
+
+export function TopBar() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const { user } = useCurrentUser()
+
+  const logout = useMutation({
+    mutationFn: authApi.logout,
+    onSuccess: async () => {
+      // 清空缓存让会话探测重新执行；此时 /auth/me 会返回 401，
+      // RequireAuth 随即把用户送回登录页。
+      queryClient.clear()
+      await navigate({ to: '/login' })
+    },
+  })
+
+  return (
+    <header className="flex h-14 shrink-0 items-center justify-end gap-3 border-b border-[var(--color-border-subtle)] px-4">
+      {user && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-[var(--color-text-secondary)]">
+            {user.display_name}
+          </span>
+          <span className="rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 text-2xs text-[var(--color-text-muted)]">
+            {user.role}
+          </span>
+        </div>
+      )}
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => logout.mutate()}
+        loading={logout.isPending}
+        aria-label="退出登录"
+      >
+        <LogOut className="size-4" aria-hidden />
+      </Button>
+    </header>
+  )
+}

package/frontend/src/components/pulls/DiscussionTimeline.tsx

@@ -0,0 +1,145 @@
+import { useMemo } from 'react'
+
+import type { PRComment, ReviewEvent } from '@/api/pulls'
+import { Badge, type BadgeTone } from '@/components/ui/badge'
+import { EmptyState } from '@/components/ui/empty-state'
+import { cn, formatDateTime } from '@/lib/utils'
+
+const EVENT_LABELS: Record<string, { label: string; tone: BadgeTone }> = {
+  lgtm: { label: 'LGTM', tone: 'success' },
+  approve: { label: 'Approved', tone: 'success' },
+  ack: { label: 'Acked', tone: 'info' },
+  reject: { label: 'NACK', tone: 'danger' },
+  ci_pass: { label: 'CI 通过', tone: 'success' },
+  ci_fail: { label: 'CI 失败', tone: 'danger' },
+  ci_running: { label: 'CI 进行中', tone: 'info' },
+  cla_signed: { label: 'CLA 通过', tone: 'success' },
+  cla_denied: { label: 'CLA 未通过', tone: 'danger' },
+}
+
+type Entry =
+  | { key: string; at: string; kind: 'event'; event: ReviewEvent }
+  | { key: string; at: string; kind: 'comment'; comment: PRComment }
+
+/**
+ * 讨论时间线。
+ *
+ * 评审事件与评论原文合成一条时间线 —— 事件本来就是从评论（``/lgtm``、
+ * ``/approve`` 等指令）里推导出来的，分成两个标签页反而要求使用者在
+ * "谁怎么说的"和"系统算出了什么"之间来回对照。
+ *
+ * 评论正文一律按纯文本渲染。上游正文含 HTML 表格与 ``<a href>``，
+ * 交给 innerHTML 就是一个注入面。
+ */
+export function DiscussionTimeline({
+  events,
+  comments,
+}: {
+  events: ReviewEvent[]
+  comments: PRComment[]
+}) {
+  const entries = useMemo<Entry[]>(() => {
+    const merged: Entry[] = [
+      ...events.map((event, index) => ({
+        key: `event-${index}`,
+        at: event.occurred_at,
+        kind: 'event' as const,
+        event,
+      })),
+      ...comments.map((comment) => ({
+        key: `comment-${comment.comment_id}`,
+        at: comment.atomgit_created_at ?? '',
+        kind: 'comment' as const,
+        comment,
+      })),
+    ]
+    // 时间缺失的记录排在最后，而不是被空串顶到最前面
+    return merged.sort((a, b) => (a.at || '9999').localeCompare(b.at || '9999'))
+  }, [events, comments])
+
+  if (entries.length === 0) {
+    return (
+      <EmptyState
+        title="尚无讨论"
+        description="评论与评审事件都来自上游。若确实有评论，可能是详情尚未同步 —— 可在「设置 → 仓库与同步」手动触发一次。"
+      />
+    )
+  }
+
+  return (
+    <ol className="space-y-3">
+      {entries.map((entry) =>
+        entry.kind === 'event' ? (
+          <li key={entry.key} className="flex items-center gap-3 px-1">
+            <EventBadge eventType={entry.event.event_type} />
+            <span className="text-sm">{entry.event.actor_login || '（无特定人）'}</span>
+            <span className="ml-auto text-xs text-[var(--color-text-muted)]">
+              {formatDateTime(entry.at)}
+            </span>
+          </li>
+        ) : (
+          <li key={entry.key}>
+            <CommentCard comment={entry.comment} />
+          </li>
+        ),
+      )}
+    </ol>
+  )
+}
+
+export function EventBadge({ eventType }: { eventType: string }) {
+  const meta = EVENT_LABELS[eventType] ?? { label: eventType, tone: 'neutral' as BadgeTone }
+  return <Badge tone={meta.tone}>{meta.label}</Badge>
+}
+
+/**
+ * 单条评论。
+ *
+ * 机器人评论默认折叠：openEuler 的机器人会为每个 PR 贴欢迎语、受保护分支表格
+ * 与 CI 提示，一个 PR 动辄十几条。全展开会把人写的评审意见挤到几屏之外，
+ * 而人写的才是要看的。折叠而非隐藏，是为了不丢掉原文。
+ */
+function CommentCard({ comment }: { comment: PRComment }) {
+  const header = (
+    <>
+      <span className="text-sm font-medium">{comment.author_login}</span>
+      {comment.is_bot && (
+        <Badge tone="neutral" className="font-normal">
+          机器人
+        </Badge>
+      )}
+      <span className="ml-auto shrink-0 text-xs text-[var(--color-text-muted)]">
+        {formatDateTime(comment.atomgit_created_at)}
+      </span>
+    </>
+  )
+
+  const body = (
+    <p
+      className={cn(
+        'comment-body mt-2 border-t border-[var(--color-border-subtle)] pt-2',
+        'text-sm leading-relaxed text-[var(--color-text-secondary)]',
+      )}
+    >
+      {comment.body}
+    </p>
+  )
+
+  if (comment.is_bot) {
+    return (
+      <details className="rounded-[var(--radius-card)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)]">
+        <summary className="flex cursor-pointer items-center gap-2 px-4 py-3 text-[var(--color-text-secondary)] marker:text-[var(--color-text-muted)]">
+          {header}
+        </summary>
+        <div className="px-4 pb-3">{body}</div>
+      </details>
+    )
+  }
+
+  return (
+    <div className="rounded-[var(--radius-card)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)] px-4 py-3">
+      <div className="flex items-center gap-2">{header}</div>
+      {body}
+    </div>
+  )
+}

package/frontend/src/components/pulls/FacetRail.tsx

@@ -0,0 +1,199 @@
+import { Link } from '@tanstack/react-router'
+import { Checkbox } from 'antd'
+import { X } from 'lucide-react'
+
+import { RULE_LABELS, type AttentionRule } from '@/api/attention'
+import { GATE_STAGE_META, type GateStage } from '@/api/pulls'
+import { KIND_META, type PRKind } from '@/api/classification'
+import type { Facet, FacetValue } from '@/api/pulls'
+import { cn } from '@/lib/utils'
+
+/**
+ * 分面栏。
+ *
+ * 与普通筛选器的区别只有一条，但它决定这套东西能不能用：**每一栏的计数
+ * 是把该栏自身的筛选去掉后算出来的**。勾上 CVE 之后，分支栏仍然给出各分支
+ * 的真实数量，于是使用者可以在已有选择上继续收紧或放宽；若计数被自身筛选
+ * 压窄，那一栏就只剩已选项非零，除了全部清空没有别的出路。
+ *
+ * 另外两条来自同一考虑：
+ * - 计数为零的取值保留并置灰。一个勾选框就重排一次的列表是点不准的。
+ * - 已勾选但计数为零的取值同样保留，否则只能靠手改地址栏来取消它。
+ */
+export function FacetRail({
+  facets,
+  selected,
+  onToggle,
+  onClear,
+  total,
+}: {
+  facets: Facet[]
+  selected: Record<string, string[]>
+  onToggle: (key: string, value: string) => void
+  onClear: (key?: string) => void
+  total: number
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-baseline justify-between">
+        <span className="text-xs text-[var(--color-text-muted)]">筛选</span>
+        <span className="font-mono text-xs tabular-nums">{total}</span>
+      </div>
+
+      {Object.values(selected).some((values) => values.length > 0) && (
+        <ActiveFilters selected={selected} onClear={onClear} />
+      )}
+
+      {facets.map((facet) => (
+        <div key={facet.key}>
+          <div className="mb-1.5 flex items-baseline justify-between">
+            <span className="text-2xs uppercase tracking-wide text-[var(--color-text-muted)]">
+              {facet.label}
+            </span>
+            {(selected[facet.key]?.length ?? 0) > 0 && (
+              <button
+                type="button"
+                onClick={() => onClear(facet.key)}
+                className="text-2xs text-[var(--color-accent)] hover:underline"
+              >
+                清除
+              </button>
+            )}
+          </div>
+          <ul className="space-y-0.5">
+            {facet.values.map((value) => (
+              <FacetRow
+                key={value.value}
+                facetKey={facet.key}
+                value={value}
+                onToggle={onToggle}
+              />
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * 一个可选值。
+ *
+ * 用 AntD 的 Checkbox 而不是自绘的方块加 `<button aria-pressed>`：
+ * 多选在语义上就是复选框，读屏器会念"已选中/未选中"并支持空格键切换，
+ * 而按钮只会被念成按钮。选中态的背景色由 className 落在 wrapper 上，
+ * 整行仍然可点（点文字即可勾选，这是 Checkbox 内建的行为）。
+ */
+function FacetRow({
+  facetKey,
+  value,
+  onToggle,
+}: {
+  facetKey: string
+  value: FacetValue
+  onToggle: (key: string, value: string) => void
+}) {
+  const empty = value.count === 0 && !value.selected
+  return (
+    <li>
+      <Checkbox
+        checked={value.selected}
+        disabled={empty}
+        onChange={() => onToggle(facetKey, value.value)}
+        className={cn(
+          'flex w-full items-center gap-2 rounded-[var(--radius-control)] px-1.5 py-1 text-xs transition-colors duration-150',
+          '[&_.ant-checkbox+span]:flex [&_.ant-checkbox+span]:min-w-0 [&_.ant-checkbox+span]:flex-1',
+          '[&_.ant-checkbox+span]:items-center [&_.ant-checkbox+span]:gap-2',
+          value.selected
+            ? 'bg-[color-mix(in_oklch,var(--color-accent)_16%,transparent)] text-[var(--color-text-primary)]'
+            : 'hover:bg-[var(--color-surface-2)]',
+          empty && 'cursor-default opacity-40',
+        )}
+      >
+        <FacetLabel facetKey={facetKey} value={value.value} />
+        <span className="ml-auto shrink-0 font-mono text-2xs tabular-nums text-[var(--color-text-muted)]">
+          {value.count}
+        </span>
+      </Checkbox>
+    </li>
+  )
+}
+
+/** 取值的中文名。后端只下发原始值，展示名在这一处统一处理。 */
+function FacetLabel({ facetKey, value }: { facetKey: string; value: string }) {
+  if (facetKey === 'stage') {
+    return <span className="truncate">{GATE_STAGE_META[value as GateStage]?.label ?? value}</span>
+  }
+  if (facetKey === 'kind') {
+    const meta = KIND_META[value as PRKind]
+    return (
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span
+          aria-hidden
+          className="size-1.5 shrink-0 rounded-full"
+          style={{ backgroundColor: meta?.color ?? 'var(--color-text-muted)' }}
+        />
+        <span className="truncate">{meta?.label ?? value}</span>
+      </span>
+    )
+  }
+  if (facetKey === 'attention') {
+    return <span className="truncate">{RULE_LABELS[value as AttentionRule] ?? value}</span>
+  }
+  return <span className="truncate font-mono">{value}</span>
+}
+
+/** 已选条件。可逐个删除，也要能一次清空。 */
+function ActiveFilters({
+  selected,
+  onClear,
+}: {
+  selected: Record<string, string[]>
+  onClear: (key?: string) => void
+}) {
+  const chips = Object.entries(selected).flatMap(([key, values]) =>
+    values.map((value) => ({ key, value })),
+  )
+  return (
+    <div className="flex flex-wrap gap-1">
+      {chips.map(({ key, value }) => (
+        <span
+          key={`${key}:${value}`}
+          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-strong)] px-1.5 py-0.5 text-2xs"
+        >
+          <FacetLabel facetKey={key} value={value} />
+          <button
+            type="button"
+            onClick={() => onClear(`${key}:${value}`)}
+            aria-label={`移除 ${value}`}
+            className="text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
+          >
+            <X className="size-3" aria-hidden />
+          </button>
+        </span>
+      ))}
+      {chips.length > 1 && (
+        <button
+          type="button"
+          onClick={() => onClear()}
+          className="px-1.5 py-0.5 text-2xs text-[var(--color-accent)] hover:underline"
+        >
+          全部清除
+        </button>
+      )}
+    </div>
+  )
+}
+
+/** 分面里的分支取值链接到版本页 —— 从"筛出某版本的 PR"到"看该版本全貌"只需一次点击。 */
+export function BranchFacetLink({ branch }: { branch: string }) {
+  return (
+    <Link
+      to="/branches/$branch"
+      params={{ branch }}
+      className="text-2xs text-[var(--color-accent)] hover:underline"
+    >
+      版本页 →
+    </Link>
+  )
+}