@kernel-sig/console 0.1.0

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

@@ -0,0 +1,449 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { App as AntApp, Popconfirm, Select } from 'antd'
+import { useState, type FormEvent } from 'react'
+
+import {
+  aiApi,
+  TASK_META,
+  type AITask,
+  type LLMProvider,
+  type ProviderTestResult,
+} from '@/api/ai'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { Alert } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input, Label } from '@/components/ui/input'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ApiError } from '@/lib/api-client'
+import { formatNumber, formatRelativeTime } from '@/lib/utils'
+
+const TASKS: AITask[] = ['classify', 'summarize', 'risk_review', 'backport_verify']
+
+/**
+ * 模型端点预设。
+ *
+ * base_url 少写或多写一段 /v1 是配置模型时最常见的错误，
+ * 而且报错信息往往只是一句 404 —— 给出预设比让使用者查文档省事得多。
+ */
+const PRESETS = [
+  { value: 'https://api.deepseek.com/v1', label: 'DeepSeek' },
+  { value: 'https://dashscope.aliyuncs.com/compatible-mode/v1', label: '通义千问' },
+  { value: 'https://open.bigmodel.cn/api/paas/v4', label: '智谱 GLM' },
+  { value: 'https://api.moonshot.cn/v1', label: 'Kimi' },
+  { value: 'https://api.openai.com/v1', label: 'OpenAI' },
+  { value: 'http://localhost:11434/v1', label: '本地 Ollama' },
+]
+
+export function AiSettingsPage() {
+  const queryClient = useQueryClient()
+  // 走上下文而不是 `message.xxx` 静态方法：后者在 StrictMode 下拿不到
+  // ConfigProvider 的 context，React 会打 error 级告警。
+  const { message } = AntApp.useApp()
+
+  const { data: providers, isLoading } = useQuery({
+    queryKey: ['ai-providers'],
+    queryFn: aiApi.providers,
+  })
+  const { data: routing } = useQuery({
+    queryKey: ['ai-routing'],
+    queryFn: aiApi.routing,
+  })
+  const { data: usage } = useQuery({
+    queryKey: ['ai-usage'],
+    queryFn: () => aiApi.usage(30),
+  })
+
+  const [name, setName] = useState('deepseek')
+  const [baseUrl, setBaseUrl] = useState(PRESETS[0].value)
+  const [model, setModel] = useState('deepseek-chat')
+  const [apiKey, setApiKey] = useState('')
+  const [testResults, setTestResults] = useState<Record<string, ProviderTestResult>>({})
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: ['ai-providers'] })
+    queryClient.invalidateQueries({ queryKey: ['ai-routing'] })
+  }
+
+  const createProvider = useMutation({
+    mutationFn: () =>
+      aiApi.createProvider({
+        name,
+        base_url: baseUrl,
+        model,
+        api_key: apiKey || undefined,
+        is_default: !providers?.length,
+      }),
+    onSuccess: async () => {
+      // 明文 key 不应在界面上停留
+      setApiKey('')
+      invalidate()
+    },
+  })
+
+  const deleteProvider = useMutation({
+    mutationFn: (id: string) => aiApi.deleteProvider(id),
+    onSuccess: invalidate,
+    // 删除会被后端拒绝（端点仍被任务路由引用时返回冲突）。没有这一句的话，
+    // 使用者点了确认、浮层关掉、页面上什么都不变 —— 看上去像按钮坏了，
+    // 而真正该做的是去改那几条路由。后端的说明本身就把该做什么讲清楚了，
+    // 原样透出即可。
+    onError: (cause) =>
+      message.error(cause instanceof Error ? cause.message : '删除失败，请稍后重试'),
+  })
+
+  const setDefault = useMutation({
+    mutationFn: (id: string) => aiApi.updateProvider(id, { is_default: true }),
+    onSuccess: invalidate,
+  })
+
+  const testProvider = useMutation({
+    mutationFn: (id: string) => aiApi.testProvider(id),
+    onSuccess: (result, id) => {
+      setTestResults((current) => ({ ...current, [id]: result }))
+      invalidate()
+    },
+  })
+
+  const upsertRouting = useMutation({
+    mutationFn: ({ task, providerId }: { task: AITask; providerId: string }) =>
+      aiApi.upsertRouting(task, { provider_id: providerId }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['ai-routing'] }),
+  })
+
+  const deleteRouting = useMutation({
+    mutationFn: (task: AITask) => aiApi.deleteRouting(task),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['ai-routing'] }),
+  })
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault()
+    createProvider.mutate()
+  }
+
+  const hasProvider = Boolean(providers?.length)
+  // 「使用默认端点」是一个**真选项**（空串），不是占位文案：选中它意味着
+  // 删掉这条路由，而占位文案在 AntD 的浮层里点不了。原来靠原生 select
+  // 把 placeholder 渲染成一个可选项来达到同样的效果。
+  const providerOptions = [
+    { value: '', label: hasProvider ? '使用默认端点' : '请先添加端点' },
+    ...(providers ?? []).map((provider) => ({
+      value: provider.id,
+      label: `${provider.name} · ${provider.model}`,
+    })),
+  ]
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <div>
+        <h1 className="text-base font-semibold tracking-tight">AI 对接</h1>
+        <p className="mt-1 text-sm text-[var(--color-text-secondary)]">
+          接入 OpenAI 兼容协议的模型端点。平台按任务分配模型 —— 分类这类轻任务用便宜模型，
+          代码风险审查才用强模型，全部走大模型会让成本失控。
+        </p>
+      </div>
+
+      <Alert tone="info">
+        AI 调用是本平台唯一按次计费的开销。内容未变时不重复调用，
+        定时批量补判也有限流；用量见下方统计。
+      </Alert>
+
+      {/* ---- 用量 ---- */}
+      {usage && usage.analyses > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>近 30 天用量</CardTitle>
+          </CardHeader>
+          <CardContent className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <Stat label="调用次数" value={formatNumber(usage.analyses)} />
+            <Stat label="成功" value={formatNumber(usage.succeeded)} />
+            <Stat label="失败" value={formatNumber(usage.failed)} />
+            <Stat
+              label="累计 token"
+              value={formatNumber(usage.prompt_tokens + usage.completion_tokens)}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* ---- 模型端点 ---- */}
+      <Card>
+        <CardHeader>
+          <CardTitle>模型端点</CardTitle>
+          <CardDescription>
+            API Key 与 AtomGit token 一样加密存储（AES-256-GCM），界面不提供明文回显。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {isLoading ? (
+            <Skeleton className="h-16 w-full" />
+          ) : hasProvider ? (
+            <ul className="space-y-2">
+              {providers!.map((provider) => (
+                <ProviderRow
+                  key={provider.id}
+                  provider={provider}
+                  testResult={testResults[provider.id]}
+                  testing={testProvider.isPending && testProvider.variables === provider.id}
+                  onTest={() => testProvider.mutate(provider.id)}
+                  onSetDefault={() => setDefault.mutate(provider.id)}
+                  onDelete={() => deleteProvider.mutate(provider.id)}
+                />
+              ))}
+            </ul>
+          ) : (
+            <EmptyState
+              title="尚未配置模型端点"
+              description="添加一个 OpenAI 兼容端点后，规则判不出来的分类可交由模型补判。"
+            />
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-3 border-t border-[var(--color-border-subtle)] pt-4">
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div>
+                <Label htmlFor="provider-name">名称</Label>
+                <Input
+                  id="provider-name"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  required
+                />
+              </div>
+              <div>
+                <Label htmlFor="provider-model">模型名</Label>
+                <Input
+                  id="provider-model"
+                  value={model}
+                  onChange={(event) => setModel(event.target.value)}
+                  placeholder="deepseek-chat"
+                  required
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="provider-url">Base URL</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="provider-url"
+                  value={baseUrl}
+                  onChange={(event) => setBaseUrl(event.target.value)}
+                  placeholder="https://api.deepseek.com/v1"
+                  required
+                />
+                {/* 这里是个动作菜单而不是选择框：选完就把值填进上面的输入框，
+                    value 恒为 null，于是浮层上永远显示占位文案而不是刚选中的项。 */}
+                <Select
+                  aria-label="常见供应商"
+                  className="w-36 shrink-0"
+                  options={PRESETS}
+                  value={null}
+                  placeholder="预设…"
+                  onChange={(value) => value && setBaseUrl(value)}
+                />
+              </div>
+              <p className="mt-1.5 text-xs text-[var(--color-text-muted)]">
+                需包含版本段（通常以 <code>/v1</code> 结尾），平台会在此之后再拼
+                <code> /chat/completions</code>。本地 vLLM / Ollama 无需填 Key。
+              </p>
+            </div>
+
+            <div>
+              <Label htmlFor="provider-key">API Key</Label>
+              <Input
+                id="provider-key"
+                type="password"
+                autoComplete="off"
+                value={apiKey}
+                onChange={(event) => setApiKey(event.target.value)}
+                placeholder="留空表示该端点无需鉴权"
+              />
+            </div>
+
+            {createProvider.error instanceof ApiError && (
+              <Alert tone="danger">{createProvider.error.message}</Alert>
+            )}
+
+            <Button type="submit" size="sm" loading={createProvider.isPending}>
+              添加端点
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* ---- 任务路由 ---- */}
+      <Card>
+        <CardHeader>
+          <CardTitle>任务路由</CardTitle>
+          <CardDescription>
+            未配置路由的任务回落到默认端点。上线初期可以只配一条，
+            等成本数据出来再细分。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {TASKS.map((task) => {
+            const current = routing?.find((item) => item.task === task)
+            return (
+              <div
+                key={task}
+                className="flex flex-wrap items-center gap-3 rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-2)] px-3 py-2.5"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">{TASK_META[task].label}</div>
+                  <div className="mt-0.5 text-xs text-[var(--color-text-muted)]">
+                    {TASK_META[task].purpose}
+                  </div>
+                </div>
+                <Select
+                  aria-label={`${TASK_META[task].label} 使用的模型`}
+                  className="w-52"
+                  options={providerOptions}
+                  disabled={!hasProvider}
+                  value={current?.provider_id ?? ''}
+                  onChange={(value) => {
+                    if (value) {
+                      upsertRouting.mutate({ task, providerId: value })
+                    } else {
+                      deleteRouting.mutate(task)
+                    }
+                  }}
+                />
+              </div>
+            )
+          })}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>补判规则判不出的分类</CardTitle>
+          <CardDescription>
+            内核补丁标题描述的是「改了什么」而非「属于哪一类」，因此相当一部分条目
+            规则无法定性。这些条目会交给模型补判 —— 单次限量，避免误点产生意外账单。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ClassifyMissingButton disabled={!hasProvider} />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function ProviderRow({
+  provider,
+  testResult,
+  testing,
+  onTest,
+  onSetDefault,
+  onDelete,
+}: {
+  provider: LLMProvider
+  testResult?: ProviderTestResult
+  testing: boolean
+  onTest: () => void
+  onSetDefault: () => void
+  onDelete: () => void
+}) {
+  return (
+    <li className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] bg-[var(--color-surface-2)] px-3 py-2.5">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm font-medium">{provider.name}</span>
+        {provider.is_default && <Badge tone="accent">默认</Badge>}
+        {!provider.enabled && <Badge tone="neutral">已停用</Badge>}
+        {provider.credential_id ? (
+          <Badge tone="success">已配置 Key</Badge>
+        ) : (
+          <Badge tone="neutral">无需鉴权</Badge>
+        )}
+        <div className="ml-auto flex items-center gap-1.5">
+          <Button variant="ghost" size="sm" onClick={onTest} loading={testing}>
+            测试
+          </Button>
+          {!provider.is_default && (
+            <Button variant="ghost" size="sm" onClick={onSetDefault}>
+              设为默认
+            </Button>
+          )}
+          {/* 删除要二次确认。这一条之前点了就执行：端点连同它的 Key 一起没了，
+              而配一个端点要填四项、还要重新填一遍 Key。删错一次的成本，
+              远高于每次删除多点一下。 */}
+          <Popconfirm
+            title="删除这个端点？"
+            description="它的访问密钥会一并删除。若仍有任务路由指向它，删除会被拒绝 —— 需要先把那些路由改到别的端点。"
+            okText="删除"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+            onConfirm={onDelete}
+          >
+            <Button variant="ghost" size="sm">
+              删除
+            </Button>
+          </Popconfirm>
+        </div>
+      </div>
+
+      <div className="mt-1 flex flex-wrap items-center gap-x-3 text-xs text-[var(--color-text-muted)]">
+        <code>{provider.base_url}</code>
+        <span>模型 {provider.model}</span>
+        {provider.last_used_at && <span>最近使用 {formatRelativeTime(provider.last_used_at)}</span>}
+      </div>
+
+      {testResult && (
+        <Alert tone={testResult.ok ? 'success' : 'danger'} className="mt-2">
+          {testResult.ok
+            ? `端点可用（${testResult.latency_ms} ms，模型回显：${testResult.model}）`
+            : `连接失败：${testResult.detail}`}
+        </Alert>
+      )}
+      {provider.last_error && !testResult && (
+        <Alert tone="danger" className="mt-2">
+          上次调用失败：{provider.last_error}
+        </Alert>
+      )}
+    </li>
+  )
+}
+
+function ClassifyMissingButton({ disabled }: { disabled: boolean }) {
+  const [message, setMessage] = useState<string | null>(null)
+  // 补判是**针对某个仓库**的动作（"这个仓库里还有 5 条没分类"），
+  // 所以它跟随地址栏里的仓库，而不是随便挑一个
+  const { repository } = useCurrentRepository()
+
+  const mutation = useMutation({
+    mutationFn: (repositoryId: string) => aiApi.classifyMissing(repositoryId, 5),
+    onSuccess: (result) => setMessage(result.message),
+  })
+
+  if (!repository) return null
+
+  return (
+    <div className="space-y-2">
+      <Button
+        variant="secondary"
+        size="sm"
+        disabled={disabled}
+        loading={mutation.isPending}
+        onClick={() => mutation.mutate(repository.id)}
+      >
+        立即补判 5 条
+      </Button>
+      {message && <p className="text-xs text-[var(--color-text-secondary)]">{message}</p>}
+      {mutation.error instanceof ApiError && (
+        <Alert tone="danger">{mutation.error.message}</Alert>
+      )}
+    </div>
+  )
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-xs text-[var(--color-text-muted)]">{label}</div>
+      <div className="mt-0.5 font-mono text-lg tabular-nums">{value}</div>
+    </div>
+  )
+}