diff --git a/apps/web/src/oj/ai/analysis.vue b/apps/web/src/oj/ai/analysis.vue
index abc8d59..a8e366b 100644
--- a/apps/web/src/oj/ai/analysis.vue
+++ b/apps/web/src/oj/ai/analysis.vue
@@ -1,107 +1,343 @@
-<template>
-  <n-spin class="oj-page" :show="aiStore.loading.fetching" :delay="50">
-    <n-flex vertical :size="20">
-      <n-flex align="center" justify="space-between">
-        <h2 class="title">请选择时间范围，智能分析学习情况</h2>
-        <n-flex align="center">
-          <n-input
-            v-if="userStore.isTeacherOrAbove"
-            v-model:value="urlUsername"
-            placeholder="查看指定用户"
-            clearable
-            style="width: 140px"
-            @change="onUsernameChange"
-            @clear="onUsernameChange"
-          />
-          <n-select style="width: 140px" :options="options" v-model:value="urlDuration" />
-        </n-flex>
-      </n-flex>
-
-      <Overview />
-      <Heatmap />
-      <DurationChart />
-      <!-- 用弹性排布而不是两列网格：知识点分布在没有标签时整张卡不渲染，
-           固定两列会空掉一半；flex 下剩的那张自动占满整行 -->
-      <n-flex class="pair" :size="20">
-        <DifficultyGradeChart />
-        <TagsChart />
-      </n-flex>
-      <n-flex class="pair" :size="20">
-        <ErrorTypeChart />
-        <AttemptsChart />
-      </n-flex>
-      <n-flex class="pair" :size="20">
-        <TimeActivityHeatmap />
-        <FlowchartScoreChart />
-      </n-flex>
-      <SolvedTable />
-      <AI />
-    </n-flex>
-  </n-spin>
-</template>
 <script setup lang="ts">
-import { formatISO, sub, type Duration } from "date-fns"
+import {
+  LEARNING_PERIOD_LABELS,
+  learningPeriodSchema,
+  type LearningPeriod,
+  type LearningReport,
+} from "@oj2/contract"
 import { useRouteQuery } from "@vueuse/router"
-import DifficultyGradeChart from "./components/DifficultyGradeChart.vue"
-import TagsChart from "./components/TagsChart.vue"
-import ErrorTypeChart from "./components/ErrorTypeChart.vue"
-import AttemptsChart from "./components/AttemptsChart.vue"
-import FlowchartScoreChart from "./components/FlowchartScoreChart.vue"
-import TimeActivityHeatmap from "./components/TimeActivityHeatmap.vue"
-import Overview from "./components/Overview.vue"
-import Heatmap from "./components/Heatmap.vue"
-import DurationChart from "./components/DurationChart.vue"
-import AI from "./components/AI.vue"
-import SolvedTable from "./components/SolvedTable.vue"
-import { useAIStore } from "../store/ai"
+import { useThemeVars } from "naive-ui"
+import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
-import { DURATION_OPTIONS } from "utils/constants"
-import { durationFromValue } from "utils/functions"
+import UserName from "shared/components/UserName.vue"
+import { classLabel } from "oj/submission/utils"
+import { parseTime } from "utils/functions"
+import { getLearningReport } from "../api"
+import AiSummary from "./components/AiSummary.vue"
+import ErrorsCard from "./components/ErrorsCard.vue"
+import KnowledgeCard from "./components/KnowledgeCard.vue"
+import LessonDays from "./components/LessonDays.vue"
+import StatStrip from "./components/StatStrip.vue"
+import UnsolvedCard from "./components/UnsolvedCard.vue"
+import { dayLabel, isDone } from "./utils"
 
-const aiStore = useAIStore()
+const theme = useThemeVars()
 const userStore = useUserStore()
-const options = [...DURATION_OPTIONS]
+const { isDesktop } = useBreakpoints()
 
 const urlUsername = useRouteQuery<string>("username", "")
-const urlDuration = useRouteQuery<string>("duration", "months:6")
+const urlPeriod = useRouteQuery<string>("period", "term")
+const period = computed<LearningPeriod>(() => {
+  const parsed = learningPeriodSchema.safeParse(urlPeriod.value)
+  return parsed.success ? parsed.data : "term"
+})
+const PERIODS = Object.entries(LEARNING_PERIOD_LABELS) as [LearningPeriod, string][]
 
-// Initialize store synchronously from URL params before watch fires
-aiStore.targetUsername = urlUsername.value
-aiStore.duration = urlDuration.value
-
-const subOptions = computed<Duration>(
-  () => durationFromValue(aiStore.duration) ?? durationFromValue(DURATION_OPTIONS[0].value)!,
+/** 老师看别人。学生在地址栏写了别人的名字，后端也只会给他自己的 */
+const viewing = computed(() =>
+  userStore.isTeacherOrAbove && urlUsername.value && urlUsername.value !== userStore.user?.username
+    ? urlUsername.value
+    : undefined,
 )
 
-const start = computed(() => formatISO(sub(new Date(), subOptions.value)))
-const end = computed(() => formatISO(new Date()))
+const report = ref<LearningReport | null>(null)
+const loading = ref(false)
+const notFound = ref(false)
+/** 这段时间一道没交时，再拿一份「全部」的，说说上一节课和还差的题 */
+const before = ref<LearningReport | null>(null)
 
-function onUsernameChange() {
-  aiStore.targetUsername = urlUsername.value
-  aiStore.fetchHeatmapData()
-  aiStore.fetchAnalysisData(start.value, end.value, aiStore.duration)
+async function load() {
+  const want = { period: period.value, username: viewing.value }
+  loading.value = true
+  notFound.value = false
+  before.value = null
+  try {
+    const data = await getLearningReport(want.period, want.username)
+    if (want.period !== period.value || want.username !== viewing.value) return
+    report.value = data
+    if (!data.days.length && want.period !== "all")
+      before.value = await getLearningReport("all", want.username)
+  } catch {
+    report.value = null
+    notFound.value = true
+  } finally {
+    loading.value = false
+  }
 }
 
-onMounted(() => {
-  aiStore.fetchHeatmapData()
+watch([period, viewing], load, { immediate: true })
+
+const span = computed(() => {
+  const r = report.value
+  if (!r) return ""
+  if (!r.start) return ""
+  const from = parseTime(r.start, "M月D日")
+  const to = parseTime(r.end, "M月D日")
+  return from === to ? from : `${from} – ${to}`
 })
 
-watch(
-  () => urlDuration.value,
-  (val) => {
-    aiStore.duration = val
-    aiStore.fetchAnalysisData(start.value, end.value, val)
-  },
-  { immediate: true },
-)
+const emptyHint = computed(() => {
+  const last = before.value?.days.find((day) => day.lesson.length)
+  if (!last) return ""
+  const { date, weekday } = dayLabel(last.day)
+  return `上一节课是 ${date} ${weekday}，做对了 ${last.lesson.filter(isDone).length} / ${last.lesson.length} 道`
+})
+const longer = computed(() => PERIODS.slice(PERIODS.findIndex(([key]) => key === period.value) + 1))
+
+const searchName = ref("")
+watch(viewing, (value) => (searchName.value = value ?? ""), { immediate: true })
+function goStudent(username: string | null | undefined) {
+  if (username) urlUsername.value = username
+}
 </script>
+
+<template>
+  <div class="oj-page ai-page">
+    <div class="toolbar" :class="{ single: !isDesktop }">
+      <h2>智能分析</h2>
+      <div v-if="viewing" class="who">
+        <n-button
+          :disabled="!report?.neighbors?.prev"
+          aria-label="上一个学生"
+          @click="goStudent(report?.neighbors?.prev)"
+        >
+          ‹
+        </n-button>
+        <n-input
+          v-model:value="searchName"
+          class="who-input"
+          placeholder="用户名"
+          @keyup.enter="goStudent(searchName.trim())"
+        />
+        <n-button
+          :disabled="!report?.neighbors?.next"
+          aria-label="下一个学生"
+          @click="goStudent(report?.neighbors?.next)"
+        >
+          ›
+        </n-button>
+        <span v-if="report?.className" class="muted">{{ classLabel(report.className) }}</span>
+      </div>
+      <div class="seg" role="group" aria-label="时间">
+        <button
+          v-for="[key, label] in PERIODS"
+          :key="key"
+          :class="{ on: period === key }"
+          @click="urlPeriod = key"
+        >
+          {{ label }}
+        </button>
+      </div>
+      <span v-if="isDesktop && span" class="muted">{{ span }}</span>
+      <span class="grow"></span>
+      <router-link
+        v-if="viewing"
+        :to="{ path: '/submission', query: { username: viewing, exactUsername: '1' } }"
+        class="link"
+      >
+        看<UserName :username="viewing" />的提交 ›
+      </router-link>
+    </div>
+
+    <n-spin :show="loading" :delay="150">
+      <n-empty v-if="notFound" description="没有这个用户" class="blank" />
+
+      <template v-else-if="report && !report.days.length">
+        <section class="card blank">
+          <b>{{ LEARNING_PERIOD_LABELS[period] }}{{ viewing ? "他" : "" }}还没交过题</b>
+          <span v-if="emptyHint" class="muted">{{ emptyHint }}</span>
+          <div class="actions">
+            <n-button v-for="[key, label] in longer" :key="key" @click="urlPeriod = key">
+              看{{ label }}
+            </n-button>
+          </div>
+        </section>
+        <section v-if="!viewing && before?.unsolved.length" class="card hint">
+          <b>还有 {{ before.unsolved.length }} 道差一点的</b>
+          <span class="muted names">{{
+            before.unsolved.map((item) => item.title).join("、")
+          }}</span>
+          <a href="#" class="link" @click.prevent="urlPeriod = 'all'">去看看 ›</a>
+        </section>
+      </template>
+
+      <div v-else-if="report" class="body">
+        <StatStrip :report="report" :teacher="!!viewing" :compact="!isDesktop" />
+        <div v-if="isDesktop" class="main">
+          <div class="column">
+            <LessonDays :days="report.days" :class-name="report.className" :username="viewing" />
+            <AiSummary :period="period" :username="viewing" />
+          </div>
+          <div class="column">
+            <UnsolvedCard
+              v-if="report.unsolved.length"
+              :items="report.unsolved"
+              :username="viewing"
+            />
+            <ErrorsCard v-if="report.errors.length" :errors="report.errors" />
+            <KnowledgeCard :knowledge="report.knowledge" />
+          </div>
+        </div>
+        <template v-else>
+          <UnsolvedCard
+            v-if="report.unsolved.length"
+            :items="report.unsolved"
+            :username="viewing"
+          />
+          <LessonDays
+            :days="report.days"
+            :class-name="report.className"
+            :username="viewing"
+            compact
+          />
+          <ErrorsCard v-if="report.errors.length" :errors="report.errors" />
+          <KnowledgeCard :knowledge="report.knowledge" />
+          <AiSummary :period="period" :username="viewing" compact />
+        </template>
+      </div>
+    </n-spin>
+  </div>
+</template>
+
 <style scoped>
-.title {
+.ai-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.toolbar h2 {
   margin: 0;
   font-size: var(--oj-fs-title);
 }
 
-.pair > :deep(.n-card) {
-  flex: 1 1 320px;
+.toolbar.single {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.toolbar.single .seg button {
+  flex: 1;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.who-input {
+  width: 160px;
+}
+
+.seg {
+  display: inline-flex;
+  height: var(--oj-ctrl-h);
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.seg button {
+  padding: 0 14px;
+  border: 0;
+  border-left: 1px solid v-bind("theme.borderColor");
+  background: v-bind("theme.cardColor");
+  color: v-bind("theme.textColor2");
+  font: inherit;
+  font-size: var(--oj-fs-sec);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.seg button:first-child {
+  border-left: 0;
+}
+
+.seg button.on {
+  background: rgba(24, 160, 88, 0.12);
+  color: #18a058;
+  font-weight: 600;
+}
+
+.grow {
+  flex: 1;
+}
+
+.muted {
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor3");
+}
+
+.link {
+  font-size: var(--oj-fs-sec);
+  color: #18a058;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.body,
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 16px;
+  align-items: start;
+}
+
+.card {
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+.blank {
+  padding: 40px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.blank b {
+  font-size: 18px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.hint {
+  margin-top: 16px;
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-color: rgba(240, 160, 32, 0.4);
+  background: rgba(240, 160, 32, 0.06);
+  font-size: var(--oj-fs-sec);
+}
+
+.names {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
diff --git a/apps/web/src/oj/ai/components/AI.vue b/apps/web/src/oj/ai/components/AI.vue
deleted file mode 100644
index 0a0cd75..0000000
--- a/apps/web/src/oj/ai/components/AI.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <n-card size="small">
-    <template #header>
-      <div class="cool-title">
-        <span class="title-text">AI 帮你分析</span>
-      </div>
-    </template>
-    <n-spin :show="aiStore.loading.ai" :delay="50">
-      <n-flex align="center" justify="center" class="container">
-        <n-button
-          v-if="!aiStore.mdContent && !aiStore.loading.ai"
-          type="primary"
-          size="large"
-          :loading="aiStore.loading.fetching"
-          @click="handleAnalyze"
-        >
-          <template #icon>
-            <Icon icon="ph:sparkle" />
-          </template>
-          开始分析
-        </n-button>
-        <Markdown v-else :content="aiStore.mdContent" />
-      </n-flex>
-    </n-spin>
-  </n-card>
-</template>
-<script setup lang="ts">
-import { useAIStore } from "oj/store/ai"
-import Markdown from "shared/components/Markdown.vue"
-import { Icon } from "@iconify/vue"
-
-const aiStore = useAIStore()
-
-async function handleAnalyze() {
-  if (aiStore.loading.fetching || aiStore.loading.ai) {
-    return
-  }
-  if (aiStore.pinnedReport) {
-    await aiStore.simulatePinnedStream()
-  } else {
-    await aiStore.fetchAIAnalysis()
-  }
-}
-
-onMounted(async () => {
-  if (!aiStore.targetUsername) {
-    await aiStore.fetchPinnedReport()
-  }
-})
-</script>
-<style scoped>
-.cool-title {
-  position: relative;
-  padding: 8px 0;
-}
-
-.title-text {
-  font-size: 16px;
-  font-weight: 700;
-  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  letter-spacing: 0.8px;
-  position: relative;
-  z-index: 2;
-  animation: gradient-flow 3s ease infinite;
-}
-
-@keyframes gradient-flow {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
-/* 只按钮那一屏的时候别留一大片空白；出内容后高度由内容自己撑，
-   这里只是给加载中的 spin 一点地方 */
-.container {
-  min-height: 120px;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/AiSummary.vue b/apps/web/src/oj/ai/components/AiSummary.vue
new file mode 100644
index 0000000..32b6bb6
--- /dev/null
+++ b/apps/web/src/oj/ai/components/AiSummary.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { LearningPeriod } from "@oj2/contract"
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import Markdown from "shared/components/Markdown.vue"
+import { parseTime } from "utils/functions"
+import { streamAI } from "utils/stream"
+import { getLatestAnalysis } from "../../api"
+
+/**
+ * AI 小结。进来先拿这个时间段上次生成的那份（老师钉住的优先），没有才出按钮 ——
+ * 一份小结要等十几秒、也要花钱，不在进页面时自动生成。
+ */
+const props = defineProps<{
+  period: LearningPeriod
+  username?: string
+  /** 手机：默认只露前几行 */
+  compact?: boolean
+}>()
+
+const theme = useThemeVars()
+const content = ref("")
+const createdAt = ref("")
+const pinned = ref(false)
+const generating = ref(false)
+const waiting = ref(false)
+const failed = ref("")
+const expanded = ref(false)
+let controller: AbortController | null = null
+
+async function load() {
+  controller?.abort()
+  generating.value = false
+  failed.value = ""
+  expanded.value = false
+  const period = props.period
+  const username = props.username
+  const record = await getLatestAnalysis(period, username).catch(() => null)
+  if (period !== props.period || username !== props.username) return
+  content.value = record?.analysis ?? ""
+  createdAt.value = record?.createTime ?? ""
+  pinned.value = record?.isPinned ?? false
+}
+
+watch(() => [props.period, props.username], load, { immediate: true })
+onBeforeUnmount(() => controller?.abort())
+
+async function generate() {
+  controller?.abort()
+  const current = new AbortController()
+  controller = current
+  generating.value = true
+  waiting.value = true
+  failed.value = ""
+  content.value = ""
+  pinned.value = false
+  expanded.value = true
+  try {
+    await streamAI(
+      "ai/analysis",
+      { period: props.period, username: props.username || undefined },
+      {
+        signal: current.signal,
+        onDelta(delta) {
+          waiting.value = false
+          content.value += delta
+        },
+      },
+    )
+    createdAt.value = new Date().toISOString()
+  } catch (error) {
+    if (current.signal.aborted) return
+    failed.value = (error as Error).message || "AI 服务暂时不可用，请稍后再试"
+  } finally {
+    if (controller === current) {
+      generating.value = false
+      waiting.value = false
+    }
+  }
+}
+
+const folded = computed(() => props.compact && !expanded.value && !generating.value)
+</script>
+
+<template>
+  <section class="card">
+    <h3><Icon icon="ph:sparkle" />AI 帮你分析</h3>
+    <template v-if="content">
+      <div class="body" :class="{ folded }">
+        <Markdown :content="content" />
+      </div>
+      <div v-if="!generating" class="foot">
+        <a v-if="folded" href="#" @click.prevent="expanded = true">展开全文 ▾</a>
+        <span v-if="createdAt"
+          >{{ parseTime(createdAt, "M月D日") }} 生成{{ pinned ? " · 老师置顶" : "" }}</span
+        >
+        <a href="#" @click.prevent="generate">重新分析</a>
+      </div>
+    </template>
+    <n-spin v-else-if="waiting" size="small">
+      <div class="waiting">正在看{{ username ? "他" : "你" }}的做题记录…</div>
+    </n-spin>
+    <div v-else class="empty">
+      <p>让 AI 按这些数据，写一段{{ username ? "给他" : "给你" }}的小结和下一步建议</p>
+      <n-button type="primary" @click="generate">
+        <template #icon><Icon icon="ph:sparkle" /></template>
+        AI 帮我分析
+      </n-button>
+    </div>
+    <p v-if="failed" class="failed">{{ failed }}</p>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid rgba(107, 71, 194, 0.3);
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--oj-fs-h2);
+  color: #7c5cd0;
+}
+
+.body.folded {
+  max-height: 150px;
+  overflow: hidden;
+  /* Chrome 105 只认带前缀的，不带前缀的到 120 才有 */
+  -webkit-mask-image: linear-gradient(#000 60%, transparent);
+  mask-image: linear-gradient(#000 60%, transparent);
+}
+
+.foot {
+  display: flex;
+  gap: 12px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.foot a {
+  color: #18a058;
+  text-decoration: none;
+}
+
+.waiting {
+  height: 60px;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.empty p,
+.failed {
+  margin: 0;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor2");
+}
+
+.failed {
+  color: v-bind("theme.errorColor");
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/AttemptsChart.vue b/apps/web/src/oj/ai/components/AttemptsChart.vue
deleted file mode 100644
index 19afdee..0000000
--- a/apps/web/src/oj/ai/components/AttemptsChart.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <n-card title="几次做对" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px"> 通过前提交了几次，看有没有在死磕 </n-text>
-    </template>
-    <div class="chart">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartOptions } from "chart.js"
-import { Bar } from "vue-chartjs"
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip } from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-// detailsData.attempts 是后端算的「每道题到首次通过为止的提交次数」，分档放在前端，
-// 想调档位不用改契约。逐题的题名不在这里 —— 明细是分页拿的，别为了 tooltip 把全量拉回来
-const BUCKETS = [
-  { label: "一次过", color: "#18A058", min: 1, max: 1 },
-  { label: "2-3 次", color: "#2080F0", min: 2, max: 3 },
-  { label: "4-6 次", color: "#F0A020", min: 4, max: 6 },
-  { label: "7 次以上", color: "#D03050", min: 7, max: Infinity },
-]
-
-const buckets = computed(() =>
-  BUCKETS.map((bucket) => ({
-    ...bucket,
-    count: aiStore.detailsData.attempts.filter(
-      (value) => value >= bucket.min && value <= bucket.max,
-    ).length,
-  })),
-)
-
-const show = computed(() => aiStore.detailsData.attempts.length > 0)
-
-const data = computed(() => ({
-  labels: buckets.value.map((bucket) => bucket.label),
-  datasets: [
-    {
-      label: "题目数量",
-      data: buckets.value.map((bucket) => bucket.count),
-      backgroundColor: buckets.value.map((bucket) => bucket.color),
-      borderColor: buckets.value.map((bucket) => bucket.color),
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 64,
-    },
-  ],
-}))
-
-const options = computed<ChartOptions<"bar">>(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: { grid: { display: false } },
-    y: {
-      beginAtZero: true,
-      ticks: { stepSize: 1, precision: 0 },
-      title: { display: true, text: "题目数量" },
-    },
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      callbacks: {
-        label: (ctx) => {
-          const value = Number(ctx.parsed.y)
-          const total = aiStore.detailsData.attempts.length
-          const percent = total ? (value / total) * 100 : 0
-          return `${value} 道题（占 ${percent.toFixed(0)}%）`
-        },
-      },
-    },
-  },
-}))
-</script>
-<style scoped>
-.chart {
-  height: 300px;
-  width: 100%;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/DifficultyGradeChart.vue b/apps/web/src/oj/ai/components/DifficultyGradeChart.vue
deleted file mode 100644
index ae5926d..0000000
--- a/apps/web/src/oj/ai/components/DifficultyGradeChart.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <n-card title="难度分布" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px"> 看看简单题和难题各做了多少 </n-text>
-    </template>
-    <div style="height: 300px">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import type { ChartOptions } from "chart.js"
-import { Bar } from "vue-chartjs"
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip } from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-// 难度和等级的顺序（后端返回的是中文）
-const difficultyOrder = ["简单", "中等", "困难"]
-const difficultyColors = ["#18A058", "#F0A020", "#D03050"]
-
-// 只按难度分。原来还往里叠了一层 S/A/B/C 等级，3×4 十二个格子，
-// 学生两个月做十来道题的话大部分格子恒为 0；等级信息在下面的解题表格里逐题都有。
-// 直接读后端的 difficulty 聚合 —— 逐题列表现在是分页拿的，前端手上没有全量
-const counts = computed(() =>
-  difficultyOrder.map((name) => aiStore.detailsData.difficulty[name] ?? 0),
-)
-
-const show = computed(() => aiStore.detailsData.solvedCount > 0)
-
-const data = computed(() => ({
-  labels: difficultyOrder,
-  datasets: [
-    {
-      label: "完成题目数",
-      data: counts.value,
-      backgroundColor: difficultyColors,
-      borderColor: difficultyColors,
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 64,
-    },
-  ],
-}))
-
-const options = computed<ChartOptions<"bar">>(() => ({
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: { grid: { display: false } },
-    y: {
-      beginAtZero: true,
-      ticks: { stepSize: 1, precision: 0 },
-      title: { display: true, text: "题目数量" },
-    },
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      callbacks: {
-        label: (ctx) => `完成 ${ctx.parsed.y} 道题`,
-      },
-    },
-  },
-}))
-</script>
diff --git a/apps/web/src/oj/ai/components/DurationChart.vue b/apps/web/src/oj/ai/components/DurationChart.vue
deleted file mode 100644
index df23b14..0000000
--- a/apps/web/src/oj/ai/components/DurationChart.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <n-card :title="title" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px"> 做题量和提交质量的变化 </n-text>
-    </template>
-    <div class="chart">
-      <Chart type="bar" :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartData, ChartOptions, TooltipItem } from "chart.js"
-import { Chart } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Legend,
-  Colors,
-  LineController,
-  BarController,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-import { parseTime } from "utils/functions"
-
-// 注册混合图表（Bar + Line）所需的 Chart.js 组件
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Legend,
-  Colors,
-  LineController,
-  BarController,
-)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-const title = computed(() => {
-  if (aiStore.duration === "months:2") {
-    return "过去两个月的每周情况"
-  } else if (aiStore.duration === "months:6") {
-    return "过去半年的每月情况"
-  } else if (aiStore.duration === "years:1") {
-    return "过去一年的每月情况"
-  } else {
-    return "过去四周的情况"
-  }
-})
-
-const show = computed(() => aiStore.durationData.length > 0)
-
-// 这一张顶掉了原来的三张（进步曲线 / 提交效率 / 周期综合）—— 它们读的是同一个
-// durationData，半年视图统共就 6 个桶、四个字段，没有必要摊成三张卡六条曲线。
-// 等级放进 tooltip 不再单独占一条轴：S/A/B/C 是四档离散值，连成折线读不出东西，
-// 而且逐题的等级在下面的解题表格里本来就有
-const data = computed<ChartData<"bar" | "line">>(() => ({
-  labels: aiStore.durationData.map((duration) =>
-    [parseTime(duration.start, "M月D日"), parseTime(duration.end, "M月D日")].join("～"),
-  ),
-  datasets: [
-    {
-      type: "bar",
-      label: "完成题目数",
-      data: aiStore.durationData.map((duration) => duration.problemCount),
-      yAxisID: "y",
-      order: 2,
-    },
-    {
-      type: "bar",
-      label: "总提交次数",
-      data: aiStore.durationData.map((duration) => duration.submissionCount),
-      yAxisID: "y",
-      order: 2,
-    },
-    {
-      type: "line",
-      label: "AC率",
-      // 没有提交的周期给 null 而不是 0，配合 spanGaps: false 断开，
-      // 否则空档会被画成「AC率 0%」，看着像交了一堆全错
-      data: aiStore.durationData.map((duration) =>
-        duration.submissionCount > 0
-          ? (duration.acceptedCount / duration.submissionCount) * 100
-          : null,
-      ),
-      spanGaps: false,
-      tension: 0.4,
-      yAxisID: "y1",
-      order: 1,
-      borderWidth: 2,
-      pointRadius: 4,
-      pointHoverRadius: 6,
-    },
-  ],
-}))
-
-const options = computed<ChartOptions<"bar" | "line">>(() => ({
-  interaction: {
-    intersect: false,
-    mode: "index",
-  },
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      grid: { display: false },
-    },
-    y: {
-      ticks: { stepSize: 1, precision: 0 },
-      title: { display: true, text: "数量" },
-      beginAtZero: true,
-    },
-    y1: {
-      type: "linear",
-      position: "right",
-      min: 0,
-      max: 100,
-      ticks: { callback: (v) => `${Number(v).toFixed(0)}%` },
-      title: { display: true, text: "AC率" },
-      grid: { display: false },
-    },
-  },
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom",
-      labels: {
-        boxWidth: 12,
-        padding: 8,
-        font: { size: 11 },
-      },
-    },
-    title: { display: false },
-    tooltip: {
-      callbacks: {
-        label: (ctx: TooltipItem<"bar" | "line">) => {
-          const dsLabel = ctx.dataset.label || ""
-          if (ctx.dataset.label === "AC率") {
-            return `${dsLabel}: ${Number(ctx.parsed.y).toFixed(1)}%`
-          }
-          return `${dsLabel}: ${ctx.formattedValue}`
-        },
-        footer: (items: TooltipItem<"bar" | "line">[]) => {
-          const index = items[0]?.dataIndex
-          const bucket = index === undefined ? undefined : aiStore.durationData[index]
-          if (!bucket) return ""
-          const lines = [`本期等级: ${bucket.grade || "无"}`]
-          if (bucket.submissionCount > 0) {
-            lines.push(`通过 ${bucket.acceptedCount} 次 / 共提交 ${bucket.submissionCount} 次`)
-          }
-          return lines
-        },
-      },
-    },
-  },
-}))
-</script>
-<style scoped>
-.chart {
-  height: 320px;
-  width: 100%;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/ErrorTypeChart.vue b/apps/web/src/oj/ai/components/ErrorTypeChart.vue
deleted file mode 100644
index 43f67b4..0000000
--- a/apps/web/src/oj/ai/components/ErrorTypeChart.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <n-card title="错在哪里" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">没通过的提交都是什么错</n-text>
-    </template>
-    <div class="chart">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartOptions } from "chart.js"
-import { Bar } from "vue-chartjs"
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip } from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-import { JUDGE_STATUS } from "utils/constants"
-import type { SUBMISSION_RESULT } from "utils/types"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-// 判题状态码是落库的值，名字统一从 JUDGE_STATUS 取，不在这里另抄一份中文
-const COLORS: Record<string, string> = {
-  "-2": "#F0A020", // 编译失败
-  "-1": "#D03050", // 答案错误
-  "1": "#7C4DFF", // 运行超时
-  "2": "#7C4DFF",
-  "3": "#2080F0", // 内存超限
-  "4": "#E88080", // 运行错误
-  "5": "#909399", // 系统错误
-  "8": "#18A058", // 部分正确
-}
-
-// 同一个中文名可能对应多个状态码（1 和 2 都叫「运行超时」），按名字合并
-const grouped = computed(() => {
-  const byName = new Map<string, { count: number; color: string }>()
-  for (const item of aiStore.detailsData.errors) {
-    const name =
-      JUDGE_STATUS[String(item.result) as unknown as SUBMISSION_RESULT]?.name ??
-      `状态 ${item.result}`
-    const seen = byName.get(name)
-    if (seen) seen.count += item.count
-    else
-      byName.set(name, {
-        count: item.count,
-        color: COLORS[String(item.result)] ?? "#909399",
-      })
-  }
-  return [...byName].sort((a, b) => b[1].count - a[1].count)
-})
-
-const show = computed(() => grouped.value.length > 0)
-
-const data = computed(() => ({
-  labels: grouped.value.map(([name]) => name),
-  datasets: [
-    {
-      label: "提交次数",
-      data: grouped.value.map(([, item]) => item.count),
-      backgroundColor: grouped.value.map(([, item]) => item.color),
-      borderColor: grouped.value.map(([, item]) => item.color),
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 28,
-    },
-  ],
-}))
-
-const total = computed(() => grouped.value.reduce((sum, [, item]) => sum + item.count, 0))
-
-const options = computed<ChartOptions<"bar">>(() => ({
-  indexAxis: "y",
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      beginAtZero: true,
-      ticks: { stepSize: 1, precision: 0 },
-      title: { display: true, text: "提交次数" },
-    },
-    y: { grid: { display: false } },
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      callbacks: {
-        label: (ctx) => {
-          const value = Number(ctx.parsed.x)
-          const percent = total.value ? (value / total.value) * 100 : 0
-          return `${value} 次（占没通过的 ${percent.toFixed(0)}%）`
-        },
-      },
-    },
-  },
-}))
-</script>
-<style scoped>
-.chart {
-  height: 300px;
-  width: 100%;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/ErrorsCard.vue b/apps/web/src/oj/ai/components/ErrorsCard.vue
new file mode 100644
index 0000000..b509288
--- /dev/null
+++ b/apps/web/src/oj/ai/components/ErrorsCard.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { LearningReport } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import { statusName } from "../utils"
+
+/** 没通过的提交按结果分；错得最多的那种下面给一个检查办法 */
+const props = defineProps<{ errors: LearningReport["errors"] }>()
+
+const theme = useThemeVars()
+
+/** 两个超时码合成一行 */
+const rows = computed(() => {
+  const merged = new Map<string, number>()
+  for (const item of props.errors) {
+    const name = statusName(item.result) || "其他"
+    merged.set(name, (merged.get(name) ?? 0) + item.count)
+  }
+  return [...merged].sort((a, b) => b[1] - a[1]).map(([name, count]) => ({ name, count }))
+})
+const total = computed(() => rows.value.reduce((sum, row) => sum + row.count, 0))
+const top = computed(() => rows.value[0]?.count ?? 1)
+
+const COLORS: Record<string, string> = { 答案错误: "#d03050", 编译失败: "#e7a33e" }
+
+const TIPS: Record<string, string> = {
+  答案错误: "先拿题目里的例子自己跑一遍，输出要和例子一字不差",
+  编译失败: "看报错指的是第几行，多半是括号、冒号、引号没配对",
+  运行时错误: "看报错说的是第几行、什么错，再回到那一行",
+  运行超时: "看看循环能不能停下来",
+}
+const tip = computed(() => TIPS[rows.value[0]?.name ?? ""])
+</script>
+
+<template>
+  <section class="card">
+    <h3>
+      错在哪<small>没通过的 {{ total }} 次</small>
+    </h3>
+    <div v-for="row in rows" :key="row.name" class="row">
+      <span class="name">{{ row.name }}</span>
+      <span class="track">
+        <span
+          class="bar"
+          :style="{
+            width: `${(row.count / top) * 100}%`,
+            background: COLORS[row.name] ?? '#9aa3ad',
+          }"
+        ></span>
+      </span>
+      <span class="count">{{ row.count }} 次</span>
+    </div>
+    <div v-if="tip" class="tip">{{ tip }}</div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--oj-fs-h2);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+h3 small {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--oj-fs-sec);
+}
+
+.name {
+  width: 74px;
+  flex-shrink: 0;
+}
+
+.track {
+  flex: 1;
+  height: 10px;
+  border-radius: 2px 5px 5px 2px;
+  background: v-bind("theme.actionColor");
+  overflow: hidden;
+}
+
+.bar {
+  display: block;
+  height: 100%;
+  min-width: 3px;
+  border-radius: 2px 5px 5px 2px;
+}
+
+.count {
+  width: 52px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.tip {
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: v-bind("theme.actionColor");
+  font-size: var(--oj-fs-sec);
+  line-height: 22px;
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/FlowchartScoreChart.vue b/apps/web/src/oj/ai/components/FlowchartScoreChart.vue
deleted file mode 100644
index 5eb2403..0000000
--- a/apps/web/src/oj/ai/components/FlowchartScoreChart.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <n-card title="流程图得分" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">每题的最高分和平均分</n-text>
-    </template>
-    <div class="chart">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartOptions } from "chart.js"
-import { Bar } from "vue-chartjs"
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-// detailsData.flowcharts 早就在下发了，但全页一张图都没有，只在解题表格的
-// 第二个 tab 里列成表格。这里直接画出来，不用改后端和契约
-const items = computed(() =>
-  [...aiStore.detailsData.flowcharts].sort(
-    (a, b) => b.bestScore - a.bestScore || a.problemId.localeCompare(b.problemId),
-  ),
-)
-
-const show = computed(() => items.value.length > 0)
-
-const data = computed(() => ({
-  labels: items.value.map((item) => `${item.problemId} ${item.problemTitle}`),
-  datasets: [
-    {
-      label: "最高分",
-      data: items.value.map((item) => item.bestScore),
-      backgroundColor: "#18A058",
-      borderColor: "#18A058",
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 22,
-    },
-    {
-      label: "平均分",
-      data: items.value.map((item) => item.avgScore),
-      backgroundColor: "rgba(99, 102, 241, 0.75)",
-      borderColor: "rgb(99, 102, 241)",
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 22,
-    },
-  ],
-}))
-
-const options = computed<ChartOptions<"bar">>(() => ({
-  indexAxis: "y",
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      beginAtZero: true,
-      max: 100,
-      title: { display: true, text: "得分" },
-    },
-    y: { grid: { display: false } },
-  },
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom",
-      labels: { boxWidth: 12, padding: 8, font: { size: 11 } },
-    },
-    tooltip: {
-      callbacks: {
-        afterBody: (ctx) => {
-          const item = items.value[ctx[0]!.dataIndex]
-          if (!item) return ""
-          return `提交 ${item.submissionCount} 次${item.bestGrade ? `，最好等级 ${item.bestGrade}` : ""}`
-        },
-      },
-    },
-  },
-}))
-</script>
-<style scoped>
-.chart {
-  height: 300px;
-  width: 100%;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/Grade.vue b/apps/web/src/oj/ai/components/Grade.vue
deleted file mode 100644
index 19ee246..0000000
--- a/apps/web/src/oj/ai/components/Grade.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div align="center" style="display: inline-flex; margin: 0 10px">
-    <img src="/S.png" alt="S Grade" v-if="props.grade === 'S'" />
-    <img src="/A.png" alt="A Grade" v-if="props.grade === 'A'" />
-    <img src="/B.png" alt="B Grade" v-if="props.grade === 'B'" />
-    <img src="/C.png" alt="C Grade" v-if="props.grade === 'C'" />
-    <n-tooltip trigger="hover">
-      <template #trigger>
-        <n-icon size="16" style="cursor: help">
-          <svg viewBox="0 0 24 24" fill="currentColor">
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-            />
-          </svg>
-        </n-icon>
-      </template>
-      <div style="max-width: 300px; line-height: 1.4">
-        <div style="font-weight: bold; margin-bottom: 8px">等级计算说明</div>
-        <div>使用加权平均方法计算综合等级：</div>
-        <div>• S级 = 4分，A级 = 3分，B级 = 2分，C级 = 1分</div>
-        <div>• 根据平均分数确定最终等级：</div>
-        <div>- S级：≥3.5分</div>
-        <div>- A级：2.5-3.5分</div>
-        <div>- B级：1.5-2.5分</div>
-        <div>- C级：<1.5分</div>
-      </div>
-    </n-tooltip>
-  </div>
-</template>
-<script setup lang="ts">
-import type { Grade } from "utils/types"
-const props = defineProps<{
-  // 空串是「无评级」，四张图都不渲染 —— 后端没有可用数据时会下发它
-  grade: Grade
-}>()
-</script>
-<style scoped>
-img {
-  animation: shake 0.5s infinite;
-  width: 30px;
-  height: 30px;
-}
-
-@keyframes shake {
-  0% {
-    transform: translateY(0) scale(1);
-  }
-  50% {
-    transform: translateY(-10px) scale(1.1);
-  }
-  100% {
-    transform: translateY(0) scale(1);
-  }
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/Heatmap.vue b/apps/web/src/oj/ai/components/Heatmap.vue
deleted file mode 100644
index 408280f..0000000
--- a/apps/web/src/oj/ai/components/Heatmap.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <n-card title="过去一年的提交热力图" size="small">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px"> 每格一周，激励持续学习 </n-text>
-    </template>
-    <n-spin :show="aiStore.loading.heatmap" :delay="50">
-      <div
-        class="heatmap-container"
-        ref="containerRef"
-        :style="{
-          '--cell-stroke': cellStroke,
-          '--cell-stroke-hover': cellStrokeHover,
-        }"
-      >
-        <svg
-          :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
-          preserveAspectRatio="xMinYMin meet"
-          class="heatmap-svg"
-        >
-          <g v-for="label in monthLabels" :key="`${label.text}-${label.x}`">
-            <text :x="label.x" :y="10" class="label" font-size="10">
-              {{ label.text }}
-            </text>
-          </g>
-
-          <g :transform="`translate(0, ${MONTH_HEIGHT})`">
-            <rect
-              v-for="(cell, i) in cells"
-              :key="i"
-              :x="cell.x"
-              :y="0"
-              :width="CELL_SIZE"
-              :height="CELL_HEIGHT"
-              :fill="cell.color"
-              class="cell"
-              rx="3"
-              @mouseenter="(e) => showTooltip(e, cell)"
-              @mouseleave="hideTooltip"
-            />
-          </g>
-        </svg>
-
-        <div v-if="tooltip" class="tooltip" :style="tooltipStyle">
-          <div class="tooltip-date">{{ tooltip.date }}</div>
-          <div class="tooltip-count" :class="{ active: tooltip.count > 0 }">
-            {{ tooltip.text }}
-          </div>
-        </div>
-      </div>
-    </n-spin>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useAIStore } from "oj/store/ai"
-import { parseTime, zonedParts } from "utils/functions"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-const aiStore = useAIStore()
-const { isDark } = useChartTheme()
-const containerRef = useTemplateRef<HTMLElement>("containerRef")
-
-const CELL_SIZE = 22
-// 一格一周之后只剩一行，格子做成竖长条，卡片不至于扁成一条缝
-const CELL_HEIGHT = 34
-const CELL_GAP = 4
-const CELL_TOTAL = CELL_SIZE + CELL_GAP
-const MONTH_HEIGHT = 18
-const RIGHT_PADDING = 5
-
-// 深色下空格子不能再用接近白的 #ebedf0，整张图会变成一片发亮的方块
-const LIGHT_COLORS = ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127"]
-const DARK_COLORS = ["#22272e", "#0e4429", "#006d32", "#26a641", "#39d353"]
-
-const COLORS = computed(() => (isDark.value ? DARK_COLORS : LIGHT_COLORS))
-const cellStroke = computed(() =>
-  isDark.value ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.05)",
-)
-const cellStrokeHover = computed(() =>
-  isDark.value ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.3)",
-)
-
-// 阈值按「一周」定，不是按一天。按天的老阈值（>7 就到顶）放到周上，
-// 稍微认真做几天题就全是最深的一档，看不出差别
-const getColor = (count: number) => {
-  const palette = COLORS.value
-  if (count === 0) return palette[0]
-  if (count <= 3) return palette[1]
-  if (count <= 8) return palette[2]
-  if (count <= 15) return palette[3]
-  return palette[4]
-}
-
-// 一格一周，横向铺开。原来是一格一天、7 行 53 列，中职学生一年也就二三十天有提交，
-// 365 格里三百多格空着，整张图看着像没用过。
-//
-// 服务端给的 timestamp 是**东八区某个周一**的 UTC 零点，年月日按东八区取（`zonedParts`），
-// 不用浏览器本地的 `getMonth()` / `getDate()`。东八区没有夏令时，周日就是加 6 天。
-const cells = computed(() =>
-  aiStore.heatmapData.map((item, i) => {
-    const start = new Date(item.timestamp)
-    const parts = zonedParts(start)
-    return {
-      start,
-      end: new Date(start.getTime() + 6 * 86_400_000),
-      month: parts?.month ?? 1,
-      day: parts?.day ?? 1,
-      count: item.value,
-      color: getColor(item.value),
-      x: i * CELL_TOTAL,
-    }
-  }),
-)
-
-const monthLabels = computed(() => {
-  const labels: { text: string; x: number }[] = []
-  let lastMonth = -1
-  cells.value.forEach((cell, i) => {
-    const month = cell.month
-    if (month !== lastMonth) {
-      // 第一格所在的月往往只露出小半个月，标签会和下一个月挤在一起，跳过
-      if (i > 0 || cell.day <= 7) {
-        labels.push({ text: `${month}月`, x: cell.x })
-      }
-      lastMonth = month
-    }
-  })
-  return labels
-})
-
-const svgWidth = computed(() => cells.value.length * CELL_TOTAL + RIGHT_PADDING)
-const svgHeight = computed(() => MONTH_HEIGHT + CELL_HEIGHT)
-
-interface Cell {
-  start: Date
-  end: Date
-  count: number
-  color: string
-  x: number
-}
-
-const tooltip = ref<{
-  x: number
-  y: number
-  date: string
-  text: string
-  count: number
-} | null>(null)
-
-const tooltipStyle = computed(() => ({
-  left: `${tooltip.value?.x}px`,
-  top: `${tooltip.value?.y}px`,
-}))
-
-const getTooltipText = (count: number) => (count === 0 ? "这周没有提交" : `这周提交了 ${count} 次`)
-
-const showTooltip = (e: MouseEvent, cell: Cell) => {
-  const rect = (e.target as HTMLElement).getBoundingClientRect()
-  const containerRect = containerRef.value?.getBoundingClientRect()
-
-  if (containerRect) {
-    tooltip.value = {
-      x: rect.left - containerRect.left + rect.width / 2,
-      y: rect.top - containerRect.top - 10,
-      date: `${parseTime(cell.start, "M月D日")} ～ ${parseTime(cell.end, "M月D日")}`,
-      text: getTooltipText(cell.count),
-      count: cell.count,
-    }
-  }
-}
-
-const hideTooltip = () => {
-  tooltip.value = null
-}
-</script>
-
-<style scoped>
-.heatmap-container {
-  width: 100%;
-  padding: 10px 0;
-  position: relative;
-}
-
-.heatmap-svg {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.label {
-  fill: currentColor;
-  opacity: 0.7;
-}
-
-.cell {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  stroke: var(--cell-stroke);
-  stroke-width: 0.5;
-}
-
-.cell:hover {
-  stroke: var(--cell-stroke-hover);
-  stroke-width: 1.5;
-  filter: brightness(0.9);
-}
-
-.tooltip {
-  position: absolute;
-  transform: translate(-50%, -100%);
-  background: rgba(0, 0, 0, 0.9);
-  color: white;
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.5;
-  pointer-events: none;
-  z-index: 1000;
-  white-space: nowrap;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  animation: fade-in 0.2s ease;
-}
-
-.tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 6px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.9);
-}
-
-.tooltip-date {
-  font-weight: 500;
-  margin-bottom: 2px;
-}
-
-.tooltip-count {
-  opacity: 0.6;
-}
-
-.tooltip-count.active {
-  color: #7bc96f;
-  opacity: 0.9;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, calc(-100% - 5px));
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -100%);
-  }
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/KnowledgeCard.vue b/apps/web/src/oj/ai/components/KnowledgeCard.vue
new file mode 100644
index 0000000..453964b
--- /dev/null
+++ b/apps/web/src/oj/ai/components/KnowledgeCard.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { LearningReport } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+
+/** 全部知识点：做对过的标绿写几道，做过没做对的写「还没做对」，没碰过的虚线。点进题目列表按它筛 */
+const props = defineProps<{ knowledge: LearningReport["knowledge"] }>()
+
+const theme = useThemeVars()
+const touched = computed(() => props.knowledge.filter((item) => item.tried).length)
+</script>
+
+<template>
+  <section class="card">
+    <h3>
+      知识点<small>做过 {{ touched }} / {{ knowledge.length }} 个</small>
+    </h3>
+    <div class="grid">
+      <router-link
+        v-for="item in knowledge"
+        :key="item.name"
+        :to="{ path: '/problem', query: { tag: item.name } }"
+        class="cell"
+        :class="item.solved ? 'solved' : item.tried ? 'tried' : 'untouched'"
+      >
+        <span class="name">{{ item.name }}</span>
+        <span class="sub">
+          {{ item.solved ? `做对 ${item.solved} 道` : item.tried ? "还没做对" : "还没做过" }}
+        </span>
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--oj-fs-h2);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+h3 small {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.cell {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  text-decoration: none;
+  color: v-bind("theme.textColor1");
+  min-width: 0;
+}
+
+.name {
+  font-size: var(--oj-fs-sec);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sub {
+  font-size: 12px;
+}
+
+.solved {
+  background: rgba(24, 160, 88, 0.12);
+}
+
+.solved .name {
+  font-weight: 600;
+}
+
+.solved .sub {
+  color: #18a058;
+}
+
+.tried {
+  background: rgba(240, 160, 32, 0.12);
+}
+
+.tried .sub {
+  color: #b86e00;
+}
+
+.untouched {
+  border: 1px dashed v-bind("theme.borderColor");
+  color: v-bind("theme.textColor3");
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/LessonDays.vue b/apps/web/src/oj/ai/components/LessonDays.vue
new file mode 100644
index 0000000..637803b
--- /dev/null
+++ b/apps/web/src/oj/ai/components/LessonDays.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { LearningDay } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import { classLabel } from "oj/submission/utils"
+import ProblemChip from "./ProblemChip.vue"
+import { dayLabel, isDone } from "../utils"
+
+/** 一天一行，新的在前：先是班上这节课的题，再是这天自己练的 */
+const props = defineProps<{
+  days: LearningDay[]
+  className: string | null
+  username?: string
+  /** 手机：日期单独一行，题目块在下面折行 */
+  compact?: boolean
+}>()
+
+const theme = useThemeVars()
+
+/** 一天自己练的超过这么多就先收起来；做得多的学生一天能自己刷二十几道 */
+const OWN_CAP = 10
+/** 「全部」能有上百天，先列这么多天 */
+const DAY_CAP = 12
+
+const openOwn = ref(new Set<string>())
+const showAll = ref(false)
+watch(
+  () => props.days,
+  () => {
+    openOwn.value = new Set()
+    showAll.value = false
+  },
+)
+
+const shown = computed(() => (showAll.value ? props.days : props.days.slice(0, DAY_CAP)))
+const you = computed(() => (props.username ? "他" : "你"))
+const subtitle = computed(() =>
+  props.className
+    ? `${classLabel(props.className)}课上做的题，加上${you.value}自己练的`
+    : `${you.value}做过的题`,
+)
+
+function ownOf(day: LearningDay) {
+  return openOwn.value.has(day.day) ? day.own : day.own.slice(0, OWN_CAP)
+}
+
+function expand(day: string) {
+  openOwn.value = new Set([...openOwn.value, day])
+}
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <h3>
+      每节课<small>{{ subtitle }}</small>
+    </h3>
+    <div v-for="day in shown" :key="day.day" class="day">
+      <div class="when">
+        <b>{{ dayLabel(day.day).date }}</b>
+        <span>{{ dayLabel(day.day).weekday }}</span>
+        <span v-if="compact && day.lesson.length" class="done">
+          做对 {{ day.lesson.filter(isDone).length }}/{{ day.lesson.length }}
+        </span>
+      </div>
+      <div class="groups">
+        <div v-if="day.lesson.length" class="chips">
+          <ProblemChip
+            v-for="item in day.lesson"
+            :key="item.displayId"
+            :item="item"
+            in-lesson
+            :username="username"
+          />
+        </div>
+        <div v-if="day.own.length" class="chips">
+          <span class="own">自己练</span>
+          <ProblemChip
+            v-for="item in ownOf(day)"
+            :key="item.displayId"
+            :item="item"
+            :in-lesson="false"
+            :username="username"
+          />
+          <button
+            v-if="day.own.length > OWN_CAP && !openOwn.has(day.day)"
+            class="more"
+            @click="expand(day.day)"
+          >
+            还有 {{ day.own.length - OWN_CAP }} 道 ▾
+          </button>
+        </div>
+      </div>
+      <div v-if="!compact" class="done">
+        <template v-if="day.lesson.length">
+          做对 {{ day.lesson.filter(isDone).length }}/{{ day.lesson.length }}
+        </template>
+      </div>
+    </div>
+    <button v-if="!showAll && days.length > DAY_CAP" class="earlier" @click="showAll = true">
+      更早的 {{ days.length - DAY_CAP }} 天 ▾
+    </button>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 20px 6px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0 0 8px;
+  font-size: var(--oj-fs-h2);
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+h3 small {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+}
+
+.day {
+  display: flex;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.when {
+  width: 92px;
+  flex-shrink: 0;
+  line-height: 30px;
+  white-space: nowrap;
+}
+
+.when b {
+  font-size: var(--oj-fs-body);
+  margin-right: 4px;
+}
+
+.when span {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.groups {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.own {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+  margin-right: 2px;
+}
+
+.done {
+  width: 72px;
+  flex-shrink: 0;
+  text-align: right;
+  line-height: 30px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.more,
+.earlier {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px dashed v-bind("theme.borderColor");
+  border-radius: 6px;
+  background: transparent;
+  color: #18a058;
+  font: inherit;
+  font-size: var(--oj-fs-meta);
+  cursor: pointer;
+}
+
+.earlier {
+  width: 100%;
+  margin: 4px 0 10px;
+}
+
+.compact {
+  padding: 12px 14px 4px;
+}
+
+.compact .day {
+  flex-direction: column;
+  gap: 6px;
+}
+
+.compact .when {
+  width: auto;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  line-height: 22px;
+}
+
+.compact .when .done {
+  margin-left: auto;
+  width: auto;
+  line-height: 22px;
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/Overview.vue b/apps/web/src/oj/ai/components/Overview.vue
deleted file mode 100644
index e61e998..0000000
--- a/apps/web/src/oj/ai/components/Overview.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <n-alert :show-icon="false" type="success" v-if="aiStore.detailsData.solvedCount">
-    <span>{{ durationLabel }}，</span>
-    <span>你一共解决 </span>
-    <b class="charming"> {{ aiStore.detailsData.solvedCount }} </b>
-    <span> 道题</span>
-    <span v-if="aiStore.detailsData.contestCount > 0">
-      ，并且参加
-      <b class="charming"> {{ aiStore.detailsData.contestCount }} </b>
-      次比赛
-    </span>
-    <span>，综合评价给到</span>
-    <Grade :grade="aiStore.detailsData.grade" />
-    <span>{{ greeting }}</span>
-  </n-alert>
-  <n-alert v-else type="error" title="你还没有完成任何题目">
-    开始解题，看看你的学习能力吧！
-  </n-alert>
-</template>
-<script lang="ts" setup>
-import Grade from "./Grade.vue"
-import { parseTime } from "utils/functions"
-import { useAIStore } from "oj/store/ai"
-
-const aiStore = useAIStore()
-
-const durationLabel = computed(() => {
-  if (aiStore.duration.includes("hours")) {
-    return `在 ${parseTime(aiStore.detailsData.start, "HH:mm")} - ${parseTime(aiStore.detailsData.end, "HH:mm")} 期间`
-  } else if (aiStore.duration.includes("days")) {
-    return `在 ${parseTime(aiStore.detailsData.end, "MM月DD日")}`
-  } else if (aiStore.duration.includes("weeks") || aiStore.duration.includes("months")) {
-    return `在 ${parseTime(aiStore.detailsData.start, "MM月DD日")} - ${parseTime(aiStore.detailsData.end, "MM月DD日")} 期间`
-  } else {
-    return `在 ${parseTime(aiStore.detailsData.start, "YYYY年MM月DD日")} - ${parseTime(aiStore.detailsData.end, "YYYY年MM月DD日")} 期间`
-  }
-})
-
-const greeting = computed(() => {
-  return {
-    "": "还没有足够的数据来评级",
-    S: "要不试试高难度题目？",
-    A: "你很棒，继续保持！",
-    B: "请再接再厉！",
-    C: "你还需要努力！",
-  }[aiStore.detailsData.grade]
-})
-</script>
-<style scoped>
-.charming {
-  font-size: 1.2rem;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/ProblemChip.vue b/apps/web/src/oj/ai/components/ProblemChip.vue
new file mode 100644
index 0000000..605ca00
--- /dev/null
+++ b/apps/web/src/oj/ai/components/ProblemChip.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { LearningItem } from "@oj2/contract"
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { statusName } from "../utils"
+
+/**
+ * 一道题一块：绿勾一次就对、黄色交几次才对、红色没做对、虚线没交。
+ * 指上去看细节（班上第几个做对、最后一次错在哪），点进去学生是做题、老师是看提交。
+ */
+const props = defineProps<{
+  item: LearningItem
+  /** 课上的题才说「班上第几个做对」；自己练的题同学大多没做，排第几没意义 */
+  inLesson: boolean
+  /** 老师在看这个学生：称呼用「他」，点进去看他的提交 */
+  username?: string
+}>()
+
+const theme = useThemeVars()
+const you = computed(() => (props.username ? "他" : "你"))
+
+const problemLink = computed(() => `/problem/${props.item.displayId}`)
+const submissionLink = computed(() => ({
+  path: "/submission",
+  query: props.username
+    ? { problem: props.item.displayId, username: props.username, exactUsername: "1" }
+    : { problem: props.item.displayId, myself: "1" },
+}))
+
+const detail = computed(() => {
+  const item = props.item
+  const rank =
+    props.inLesson && item.rank && item.classSolved
+      ? `班上第 ${item.rank} 个做对（${item.classSolved} 人做对）`
+      : ""
+  if (item.status === "first") return ["一次就对", rank]
+  if (item.status === "tries") return [`交了 ${item.attempts} 次才对`, rank]
+  if (item.status === "fail") {
+    const last = statusName(item.lastResult)
+    return [`交了 ${item.attempts} 次还没做对`, last ? `最后一次${last}` : ""]
+  }
+  return [
+    `这节课的题，${you.value}还没交`,
+    item.classSolved ? `班上 ${item.classSolved} 人做对` : "",
+  ]
+})
+</script>
+
+<template>
+  <n-popover trigger="hover" :delay="200" :show-arrow="false" placement="bottom-start">
+    <template #trigger>
+      <router-link :to="username ? submissionLink : problemLink" class="chip" :class="item.status">
+        <Icon
+          v-if="item.status === 'first'"
+          icon="ph:check-bold"
+          class="check"
+          aria-label="一次就对"
+        />
+        <span class="title">{{ item.title }}</span>
+        <span v-if="item.status === 'tries'" class="count">交 {{ item.attempts }} 次</span>
+        <span v-else-if="item.status === 'fail'" class="count"
+          >没做对 · {{ item.attempts }} 次</span
+        >
+        <span v-else-if="item.status === 'none'" class="count">没交</span>
+      </router-link>
+    </template>
+    <div class="tip">
+      <span>{{ detail.filter(Boolean).join(" · ") }}</span>
+      <router-link v-if="item.status !== 'none'" :to="submissionLink"
+        >看{{ you }}的提交 ›</router-link
+      >
+      <router-link v-else-if="!username" :to="problemLink">去做 ›</router-link>
+    </div>
+  </n-popover>
+</template>
+
+<style scoped>
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 30px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.textColor1");
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.count {
+  flex-shrink: 0;
+  font-size: var(--oj-fs-meta);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.check {
+  flex-shrink: 0;
+  color: #18a058;
+}
+
+.first {
+  background: rgba(24, 160, 88, 0.12);
+}
+
+.tries {
+  background: rgba(240, 160, 32, 0.15);
+}
+
+.tries .count {
+  color: #b86e00;
+}
+
+.fail {
+  background: rgba(208, 48, 80, 0.09);
+  border-color: rgba(208, 48, 80, 0.3);
+}
+
+.fail .count {
+  color: #c0283f;
+}
+
+.none {
+  border: 1px dashed v-bind("theme.borderColor");
+  color: v-bind("theme.textColor3");
+}
+
+.chip:hover {
+  filter: brightness(0.97);
+}
+
+.tip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--oj-fs-meta);
+}
+
+.tip a {
+  color: #18a058;
+  text-decoration: none;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/SolvedTable.vue b/apps/web/src/oj/ai/components/SolvedTable.vue
deleted file mode 100644
index 8e4ae5b..0000000
--- a/apps/web/src/oj/ai/components/SolvedTable.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <n-tabs animated v-if="hasSolved && flowcharts.length">
-    <n-tab-pane name="代码提交">
-      <n-data-table
-        remote
-        striped
-        :data="aiStore.solvedRows"
-        :columns="columns"
-        :loading="aiStore.loading.solved"
-        :pagination="solvedPagination"
-        @update:page="aiStore.fetchSolved"
-      />
-    </n-tab-pane>
-    <n-tab-pane name="流程图提交">
-      <n-data-table
-        striped
-        :data="flowcharts"
-        :columns="flowchartsColumns"
-        :pagination="paginationFor(flowcharts)"
-      />
-    </n-tab-pane>
-  </n-tabs>
-  <n-data-table
-    v-else-if="hasSolved"
-    remote
-    striped
-    :data="aiStore.solvedRows"
-    :columns="columns"
-    :loading="aiStore.loading.solved"
-    :pagination="solvedPagination"
-    @update:page="aiStore.fetchSolved"
-  />
-  <n-data-table
-    v-else-if="flowcharts.length"
-    striped
-    :data="flowcharts"
-    :columns="flowchartsColumns"
-    :pagination="paginationFor(flowcharts)"
-  />
-</template>
-
-<script lang="ts" setup>
-import { NButton, NTooltip } from "naive-ui"
-import TagTitle from "./TagTitle.vue"
-import type { FlowchartSummary, SolvedProblem } from "utils/types"
-import { useAIStore } from "oj/store/ai"
-import { parseTime } from "utils/functions"
-
-const router = useRouter()
-const aiStore = useAIStore()
-
-const hasSolved = computed(() => aiStore.detailsData.solvedCount > 0)
-const flowcharts = computed(() => aiStore.detailsData.flowcharts)
-
-// 代码提交这张走服务端分页：翻页只拉一页，不把整年的题一次发给浏览器。
-// 流程图那张仍然是全量下发的（一个 OJ 的流程图题就那么几道），本地分页即可。
-// 行数不够一页时不显示分页器，和 ExerciseAttempts.vue 一致
-const solvedPagination = computed(() =>
-  aiStore.solvedTotal > aiStore.solvedPageSize
-    ? {
-        page: aiStore.solvedPage,
-        pageSize: aiStore.solvedPageSize,
-        itemCount: aiStore.solvedTotal,
-      }
-    : false,
-)
-function paginationFor(rows: unknown[]) {
-  const pageSize = aiStore.solvedPageSize
-  return rows.length > pageSize ? { pageSize } : false
-}
-const columns: DataTableColumn<SolvedProblem>[] = [
-  {
-    title: "完成的题目",
-    key: "problem.title",
-    render: (row) =>
-      h(
-        NButton,
-        {
-          text: true,
-          onClick: () => {
-            if (row.problem.contestId) {
-              router.push("/contest/" + row.problem.contestId + "/problem/" + row.problem.displayId)
-            } else {
-              router.push("/problem/" + row.problem.displayId)
-            }
-          },
-        },
-        () => {
-          if (row.problem.contestId) {
-            return h(TagTitle, { problem: row.problem })
-          } else {
-            return row.problem.displayId + " " + row.problem.title
-          }
-        },
-      ),
-  },
-  {
-    // 用后端下发的 rankScope，不要看 className 有没有值：班里只有一个人时
-    // 后端会回退到全服排名，那种学生原来看到的是「班级排名」配全服数据
-    title: () => (aiStore.detailsData.rankScope === "class" ? "班级排名" : "全服排名"),
-    key: "rank",
-    width: 100,
-    align: "center",
-    render: (row) => row.rank + " / " + row.acCount,
-  },
-  {
-    title: "同期排名",
-    key: "period_rank",
-    width: 100,
-    align: "center",
-    render: (row) => row.periodRank + " / " + row.periodAcCount,
-  },
-  {
-    title: () =>
-      h(NTooltip, null, {
-        trigger: () => h("span", { style: "cursor:help; border-bottom: 1px dashed" }, "等级"),
-        default: () =>
-          h("div", null, [
-            h("div", null, "基于同时段排名的百分位："),
-            h("div", null, "S — 前 10%"),
-            h("div", null, "A — 前 35%"),
-            h("div", null, "B — 前 75%"),
-            h("div", null, "C — 其余"),
-          ]),
-      }),
-    key: "grade",
-    width: 100,
-    align: "center",
-  },
-]
-
-const flowchartsColumns: DataTableColumn<FlowchartSummary>[] = [
-  {
-    title: "完成的题目",
-    key: "problem_title",
-    width: 300,
-    render: (row) =>
-      h(
-        NButton,
-        {
-          text: true,
-          onClick: () => {
-            router.push("/problem/" + row.problemId)
-          },
-        },
-        () => `${row.problemId} ${row.problemTitle}`,
-      ),
-  },
-  { title: "提交次数", key: "submissionCount", width: 100, align: "center" },
-  {
-    title: "最高分",
-    key: "best",
-    width: 100,
-    align: "center",
-    render: (row) => `${row.bestScore} (${row.bestGrade})`,
-  },
-  {
-    title: "最新提交时间",
-    key: "latest_submission_time",
-    width: 200,
-    align: "center",
-    render: (row) => parseTime(row.latestSubmissionTime),
-  },
-  { title: "平均分", key: "avgScore", width: 100, align: "center" },
-]
-</script>
diff --git a/apps/web/src/oj/ai/components/StatStrip.vue b/apps/web/src/oj/ai/components/StatStrip.vue
new file mode 100644
index 0000000..11513d8
--- /dev/null
+++ b/apps/web/src/oj/ai/components/StatStrip.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { LearningReport } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+
+/** 顶上一排数：做对几道、一次就对、上了几节课、差一点的；老师看时最前面多一格「班上第几」 */
+const props = defineProps<{ report: LearningReport; teacher: boolean; compact?: boolean }>()
+
+const theme = useThemeVars()
+
+interface Cell {
+  big: number
+  unit: string
+  sub: string
+  warn?: boolean
+}
+
+const cells = computed(() => {
+  const r = props.report
+  const c = r.classStats
+  const percent = r.solved ? Math.round((r.firstTry / r.solved) * 100) : 0
+  const firstSub = `一次就对 · 占 ${percent}%`
+  const list: Cell[] = [
+    { big: r.solved, unit: "道", sub: c ? `做对 · 班上中间那位 ${c.medianSolved} 道` : "做对" },
+    {
+      big: r.firstTry,
+      unit: "道",
+      sub: c && !props.compact ? `${firstSub}，班上中间那位 ${c.medianFirstPercent}%` : firstSub,
+    },
+    { big: r.lessonCount, unit: "节课", sub: `交了 ${r.submissionCount} 次` },
+  ]
+  if (r.unsolved.length)
+    list.push({ big: r.unsolved.length, unit: "道", sub: "差一点 · 交过还没做对", warn: true })
+  if (props.teacher && c)
+    list.unshift({ big: c.rank, unit: `/ ${c.size}`, sub: "班上按做对题数排第几" })
+  return list
+})
+</script>
+
+<template>
+  <div class="strip" :class="{ compact }">
+    <div v-for="cell in cells" :key="cell.sub" class="cell">
+      <div class="num">
+        <b :class="{ warn: cell.warn }">{{ cell.big }}</b>
+        <span>{{ cell.unit }}</span>
+      </div>
+      <div class="sub">{{ cell.sub }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.strip {
+  display: flex;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+.cell {
+  flex: 1;
+  min-width: 0;
+  padding: 14px 20px;
+  border-left: 1px solid v-bind("theme.dividerColor");
+}
+
+.cell:first-child {
+  border-left: 0;
+}
+
+.num {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.num b {
+  font-size: 30px;
+  line-height: 38px;
+  font-variant-numeric: tabular-nums;
+}
+
+.num b.warn {
+  color: #c27c0e;
+}
+
+.num span {
+  font-size: var(--oj-fs-body);
+}
+
+.sub {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.compact {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.compact .cell {
+  padding: 10px 12px;
+  border-left: 0;
+}
+
+.compact .num b {
+  font-size: 26px;
+  line-height: 32px;
+}
+</style>
diff --git a/apps/web/src/oj/ai/components/TagTitle.vue b/apps/web/src/oj/ai/components/TagTitle.vue
deleted file mode 100644
index 08ec43c..0000000
--- a/apps/web/src/oj/ai/components/TagTitle.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <n-flex vertical align="start">
-    <n-flex align="center">
-      <n-tag type="info" size="small" :bordered="false">比赛</n-tag>
-      <span>{{ problem.contestTitle }}</span>
-    </n-flex>
-    <span>{{ problem.displayId }} {{ problem.title }}</span>
-  </n-flex>
-</template>
-<script setup lang="ts">
-import type { SolvedProblem } from "utils/types"
-interface Props {
-  problem: SolvedProblem["problem"]
-}
-
-const props = defineProps<Props>()
-</script>
diff --git a/apps/web/src/oj/ai/components/TagsChart.vue b/apps/web/src/oj/ai/components/TagsChart.vue
deleted file mode 100644
index 9989edc..0000000
--- a/apps/web/src/oj/ai/components/TagsChart.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <n-card title="知识点分布" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px">看看做过哪几类题</n-text>
-    </template>
-    <div class="chart">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-<script setup lang="ts">
-import type { ChartOptions } from "chart.js"
-import { Bar } from "vue-chartjs"
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip } from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-// 横向条形而不是雷达图：只有 3~5 个类目，雷达对「比较大小」是最差的形式之一，
-// 而且原来还把值归一化成「占最多标签的百分比」，第一名恒为 100%，等于只画了个排序。
-// 这里直接画真实题数。后端 topTags 已经截到前 5，不需要再截
-const entries = computed(() =>
-  Object.entries(aiStore.detailsData.tags).sort(([, a], [, b]) => b - a),
-)
-
-const show = computed(() => entries.value.length > 0)
-
-const data = computed(() => ({
-  labels: entries.value.map(([label]) => label),
-  datasets: [
-    {
-      label: "完成题目数",
-      data: entries.value.map(([, value]) => value),
-      backgroundColor: "rgba(99, 102, 241, 0.75)",
-      borderColor: "rgb(99, 102, 241)",
-      borderWidth: 1,
-      borderRadius: 4,
-      maxBarThickness: 28,
-    },
-  ],
-}))
-
-const options = computed<ChartOptions<"bar">>(() => ({
-  indexAxis: "y",
-  responsive: true,
-  maintainAspectRatio: false,
-  scales: {
-    x: {
-      beginAtZero: true,
-      ticks: { stepSize: 1, precision: 0 },
-      title: { display: true, text: "题目数量" },
-    },
-    y: {
-      grid: { display: false },
-    },
-  },
-  plugins: {
-    legend: { display: false },
-    tooltip: {
-      callbacks: {
-        label: (ctx) => `完成 ${ctx.parsed.x} 道题`,
-      },
-    },
-  },
-}))
-</script>
-<style scoped>
-.chart {
-  height: 300px;
-  width: 100%;
-}
-</style>
diff --git a/apps/web/src/oj/ai/components/TimeActivityHeatmap.vue b/apps/web/src/oj/ai/components/TimeActivityHeatmap.vue
deleted file mode 100644
index c914c1f..0000000
--- a/apps/web/src/oj/ai/components/TimeActivityHeatmap.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <n-card title="时间活跃度分析" size="small" v-if="show">
-    <template #header-extra>
-      <n-text depth="3" style="font-size: 12px"> 基于全部提交，发现做题高峰时段 </n-text>
-    </template>
-    <div style="height: 300px">
-      <Bar :key="chartKey" :data="data" :options="options" />
-    </div>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { Bar } from "vue-chartjs"
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js"
-import { useAIStore } from "oj/store/ai"
-import { useChartTheme } from "shared/composables/chartTheme"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
-
-const aiStore = useAIStore()
-const { chartKey } = useChartTheme()
-
-const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
-const TIME_PERIODS = [
-  { label: "凌晨(0-6)", start: 0, end: 6 },
-  { label: "上午(6-12)", start: 6, end: 12 },
-  { label: "下午(12-18)", start: 12, end: 18 },
-  { label: "晚上(18-24)", start: 18, end: 24 },
-]
-
-// 直接用后端聚合好的 activity（按全部提交、按东八区切好的 7×4）。
-// 原来是拿 solved 里的 acTime 在浏览器本地时区现算 —— 只统计 AC，
-// 28 个格子里能落进去的点太少；时区也和后端的热力图对不上
-const activityMatrix = computed(() => {
-  const matrix: { [weekday: number]: { [period: number]: number } } = {}
-  for (let i = 0; i < 7; i++) {
-    matrix[i] = {}
-    for (let j = 0; j < TIME_PERIODS.length; j++) {
-      matrix[i][j] = 0
-    }
-  }
-  aiStore.detailsData.activity.forEach((item) => {
-    const row = matrix[item.weekday]
-    if (row && item.period in row) row[item.period] += item.count
-  })
-  return matrix
-})
-
-const show = computed(() => aiStore.detailsData.activity.some((item) => item.count > 0))
-
-// 为每个时间段准备数据集
-const data = computed(() => {
-  const datasets = TIME_PERIODS.map((period, periodIndex) => {
-    return {
-      label: period.label,
-      data: WEEKDAYS.map((_, weekday) => activityMatrix.value[weekday][periodIndex]),
-      backgroundColor: getTimePeriodColor(periodIndex),
-      borderColor: getTimePeriodColor(periodIndex),
-      borderWidth: 1,
-    }
-  })
-
-  return {
-    labels: WEEKDAYS,
-    datasets,
-  }
-})
-
-// 根据时间段返回对应的颜色
-function getTimePeriodColor(periodIndex: number): string {
-  const colors = [
-    "#9D9D9D", // 凌晨 - 灰色
-    "#FFD700", // 上午 - 金色
-    "#4ECDC4", // 下午 - 青色
-    "#5B5F97", // 晚上 - 深蓝紫
-  ]
-  return colors[periodIndex] || "#999"
-}
-
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  interaction: {
-    intersect: false,
-    mode: "index" as const,
-  },
-  scales: {
-    x: {
-      stacked: true,
-      grid: {
-        display: false,
-      },
-    },
-    y: {
-      stacked: true,
-      ticks: {
-        stepSize: 1,
-      },
-      title: {
-        display: true,
-        text: "提交次数",
-      },
-    },
-  },
-  plugins: {
-    legend: {
-      display: true,
-      position: "bottom" as const,
-      labels: {
-        boxWidth: 12,
-        padding: 8,
-        font: {
-          size: 11,
-        },
-      },
-    },
-    title: {
-      display: false,
-    },
-    tooltip: {
-      callbacks: {
-        footer: (items: any[]) => {
-          const total = items.reduce((sum, item) => sum + item.parsed.y, 0)
-          return `当天总计: ${total} 次提交`
-        },
-      },
-    },
-  },
-}
-</script>
diff --git a/apps/web/src/oj/ai/components/UnsolvedCard.vue b/apps/web/src/oj/ai/components/UnsolvedCard.vue
new file mode 100644
index 0000000..9e040dc
--- /dev/null
+++ b/apps/web/src/oj/ai/components/UnsolvedCard.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { LearningItem } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import { statusName } from "../utils"
+
+/** 交过还没做对的题。学生「接着做」，老师「看提交」 */
+const props = defineProps<{ items: LearningItem[]; username?: string }>()
+
+const theme = useThemeVars()
+const router = useRouter()
+
+function submissions(item: LearningItem) {
+  return {
+    path: "/submission",
+    query: { problem: item.displayId, username: props.username, exactUsername: "1" },
+  }
+}
+</script>
+
+<template>
+  <section class="card">
+    <h3>差一点的</h3>
+    <div v-for="item in items" :key="item.displayId" class="row">
+      <div class="text">
+        <div class="title">
+          <span class="pid">{{ item.displayId }}</span
+          >{{ item.title }}
+        </div>
+        <div class="meta">
+          交了 {{ item.attempts }} 次<template v-if="statusName(item.lastResult)">
+            · 最后一次{{ statusName(item.lastResult) }}</template
+          >
+        </div>
+      </div>
+      <router-link v-if="username" :to="submissions(item)" class="link">看提交 ›</router-link>
+      <n-button
+        v-else
+        type="primary"
+        size="small"
+        @click="router.push(`/problem/${item.displayId}`)"
+      >
+        接着做
+      </n-button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 16px 18px 8px;
+  border: 1px solid rgba(240, 160, 32, 0.4);
+  border-radius: var(--oj-radius);
+  background: rgba(240, 160, 32, 0.06);
+}
+
+h3 {
+  margin: 0 0 6px;
+  font-size: var(--oj-fs-h2);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-top: 1px solid rgba(240, 160, 32, 0.22);
+}
+
+.text {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: var(--oj-fs-body);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pid {
+  margin-right: 6px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.meta {
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.link {
+  font-size: var(--oj-fs-meta);
+  color: #18a058;
+  text-decoration: none;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web/src/oj/ai/utils.ts b/apps/web/src/oj/ai/utils.ts
new file mode 100644
index 0000000..945c9c9
--- /dev/null
+++ b/apps/web/src/oj/ai/utils.ts
@@ -0,0 +1,20 @@
+import type { LearningItem } from "@oj2/contract"
+import { JUDGE_STATUS } from "utils/constants"
+
+const WEEKDAY = "日一二三四五六"
+
+/** `2026-09-18` → 9月18日 / 周五。日历日本身就是东八区的，直接拆字符串，不经 Date */
+export function dayLabel(day: string) {
+  const [year, month, date] = day.split("-").map(Number) as [number, number, number]
+  const weekday = new Date(Date.UTC(year, month - 1, date)).getUTCDay()
+  return { date: `${month}月${date}日`, weekday: `周${WEEKDAY[weekday]}` }
+}
+
+export function statusName(result: number | null) {
+  if (result === null) return ""
+  return JUDGE_STATUS[result as keyof typeof JUDGE_STATUS]?.name ?? ""
+}
+
+export function isDone(item: LearningItem) {
+  return item.status === "first" || item.status === "tries"
+}
diff --git a/apps/web/src/oj/api.ts b/apps/web/src/oj/api.ts
index d81200a..b6ec85f 100644
--- a/apps/web/src/oj/api.ts
+++ b/apps/web/src/oj/api.ts
@@ -1,5 +1,7 @@
 import {
   type AiAnalysisRecord,
+  type LearningPeriod,
+  type LearningReport,
   type AiHintFeedbackRequest,
   type Contest,
   type ContestAccess,
@@ -35,10 +37,6 @@ import {
   type FlowchartScores,
   type FlowchartList,
   type FlowchartSubmission,
-  type AiDetail,
-  type DurationData,
-  type HeatmapItem,
-  type SolvedList,
   type ProblemSet,
   type ProblemSetClassView,
   type ProblemSetList,
@@ -409,38 +407,20 @@ export function getTutorials(type: "python" | "c") {
   return api.get<TutorialSummary[]>("tutorials", { params: { type } })
 }
 
-export function getAIDetailData(start: string, end: string, username?: string) {
-  return api.get<AiDetail>("ai/detail", { params: { start, end, username } })
-}
-
-export function getAISolved(
-  start: string,
-  end: string,
-  offset: number,
-  limit: number,
-  username?: string,
-) {
-  return api.get<SolvedList>("ai/solved", {
-    params: { start, end, offset, limit, username },
+/** 智能分析整页的数据。username 只有老师传才生效，学生传了也只会拿到自己 */
+export function getLearningReport(period: LearningPeriod, username?: string) {
+  return api.get<LearningReport>("ai/report", {
+    params: { period, username: username || undefined },
   })
 }
 
-export function getAIDurationData(end: string, duration: string, username?: string) {
-  return api.get<DurationData[]>("ai/duration", {
-    params: { end, duration, username },
+/** 这个时间段上次生成的 AI 小结（老师钉住的优先），没有为 null */
+export function getLatestAnalysis(period: LearningPeriod, username?: string) {
+  return api.get<AiAnalysisRecord | null>("ai/analysis/latest", {
+    params: { period, username: username || undefined },
   })
 }
 
-export function getAIHeatmapData(username?: string) {
-  return api.get<HeatmapItem[]>("ai/heatmap", {
-    params: username ? { username } : {},
-  })
-}
-
-export function getAIPinnedReport() {
-  return api.get<AiAnalysisRecord | null>("ai/pinned")
-}
-
 /** 学生评价一条 AI 提示。id 来自 /ai/hint 流的 done 事件，可以改票 */
 export function submitHintFeedback(hintId: number, helpful: boolean) {
   return api.post<null>(`ai/hint/${hintId}/feedback`, {
diff --git a/apps/web/src/oj/rank/components/RankMe.vue b/apps/web/src/oj/rank/components/RankMe.vue
index 078d43f..fa385f6 100644
--- a/apps/web/src/oj/rank/components/RankMe.vue
+++ b/apps/web/src/oj/rank/components/RankMe.vue
@@ -196,7 +196,7 @@ function threatNote(me: RankRow, behind: RankRow) {
       >
         <path d="M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8z" />
       </svg>
-      看我的智能分析：哪类题卡得多、哪段时间最常做题 ›
+      看我的智能分析：每节课做得怎样、哪几道还差一点 ›
     </router-link>
   </div>
 </template>
diff --git a/apps/web/src/oj/store/ai.ts b/apps/web/src/oj/store/ai.ts
deleted file mode 100644
index 01ceff4..0000000
--- a/apps/web/src/oj/store/ai.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import type { DetailsData, DurationData, SolvedProblem } from "utils/types"
-import { streamAI } from "utils/stream"
-import {
-  getAIDetailData,
-  getAIDurationData,
-  getAIHeatmapData,
-  getAIPinnedReport,
-  getAISolved,
-} from "../api"
-
-export const useAIStore = defineStore("ai", () => {
-  const duration = ref("months:6")
-  const targetUsername = ref("")
-  // 生成 AI 分析时要把同一段时间原样报给后端（数据由后端重算，前端只报范围）
-  const rangeStart = ref("")
-  const rangeEnd = ref("")
-  const durationData = ref<DurationData[]>([])
-  const detailsData = reactive<DetailsData>({
-    username: "",
-    start: "",
-    end: "",
-    grade: "",
-    className: null,
-    tags: {},
-    difficulty: {},
-    contestCount: 0,
-    solvedCount: 0,
-    attempts: [],
-    flowcharts: [],
-    activity: [],
-    errors: [],
-    rankScope: "global",
-  })
-  const heatmapData = ref<{ timestamp: number; value: number }[]>([])
-
-  // 解题明细走服务端分页：一个活跃学生一年几百道题，整份跟着 detail 一起下发没必要
-  const solvedRows = ref<SolvedProblem[]>([])
-  const solvedTotal = ref(0)
-  const solvedPage = ref(1)
-  const solvedPageSize = ref(20)
-
-  const loading = reactive({
-    fetching: false, // 合并 details 和 duration 的 loading
-    ai: false,
-    heatmap: false,
-    solved: false,
-  })
-
-  const mdContent = ref("")
-  const pinnedReport = ref<{ analysis: string } | null>(null)
-
-  async function fetchDetailsData(start: string, end: string) {
-    const res = await getAIDetailData(start, end, targetUsername.value || undefined)
-    detailsData.start = res.start
-    detailsData.end = res.end
-    detailsData.grade = res.grade
-    detailsData.className = res.className
-    detailsData.tags = res.tags
-    detailsData.difficulty = res.difficulty
-    detailsData.contestCount = res.contestCount
-    detailsData.solvedCount = res.solvedCount
-    detailsData.attempts = res.attempts
-    detailsData.activity = res.activity
-    detailsData.errors = res.errors
-    detailsData.rankScope = res.rankScope
-    detailsData.flowcharts = res.flowcharts
-  }
-
-  async function fetchDurationData(end: string, duration: string) {
-    const res = await getAIDurationData(end, duration, targetUsername.value || undefined)
-    durationData.value = res
-  }
-
-  async function fetchSolved(page = solvedPage.value) {
-    if (!rangeStart.value || !rangeEnd.value) return
-    loading.solved = true
-    try {
-      const res = await getAISolved(
-        rangeStart.value,
-        rangeEnd.value,
-        (page - 1) * solvedPageSize.value,
-        solvedPageSize.value,
-        targetUsername.value || undefined,
-      )
-      solvedRows.value = res.results
-      solvedTotal.value = res.total
-      solvedPage.value = page
-    } finally {
-      loading.solved = false
-    }
-  }
-
-  async function fetchHeatmapData() {
-    loading.heatmap = true
-    const res = await getAIHeatmapData(targetUsername.value || undefined)
-    heatmapData.value = res
-    loading.heatmap = false
-  }
-
-  async function fetchAnalysisData(start: string, end: string, duration: string) {
-    rangeStart.value = start
-    rangeEnd.value = end
-    // 换时间范围就回到第一页，否则停在第 5 页但新范围只有两页
-    solvedPage.value = 1
-    loading.fetching = true
-    try {
-      await Promise.all([
-        fetchDetailsData(start, end),
-        fetchDurationData(end, duration),
-        fetchSolved(1),
-      ])
-    } finally {
-      loading.fetching = false
-    }
-  }
-
-  let aiController: AbortController | null = null
-
-  // 不用 useAIStream：store 没有会卸载的作用域，而且 loading.ai 要和其它几个
-  // loading 放在同一个 reactive 里给页面用
-  async function fetchAIAnalysis() {
-    aiController?.abort()
-    const controller = new AbortController()
-    aiController = controller
-
-    loading.ai = true
-    mdContent.value = ""
-
-    try {
-      await streamAI(
-        "ai/analysis",
-        {
-          start: rangeStart.value,
-          end: rangeEnd.value,
-          duration: duration.value,
-          username: targetUsername.value || undefined,
-        },
-        {
-          signal: controller.signal,
-          onDelta(content) {
-            loading.ai = false
-            mdContent.value += content
-          },
-        },
-      )
-    } catch (error) {
-      if (controller.signal.aborted) return
-      mdContent.value = `生成失败：${(error as Error).message}`
-    } finally {
-      if (aiController === controller) {
-        aiController = null
-        loading.ai = false
-      }
-    }
-  }
-
-  async function fetchPinnedReport() {
-    const res = await getAIPinnedReport()
-    pinnedReport.value = res
-  }
-
-  async function simulatePinnedStream() {
-    if (!pinnedReport.value) return
-    const text = pinnedReport.value.analysis
-    mdContent.value = ""
-    const CHUNK = 6
-    const DELAY = 18
-    await new Promise<void>((resolve) => {
-      let i = 0
-      function step() {
-        if (i >= text.length) {
-          resolve()
-          return
-        }
-        mdContent.value += text.slice(i, i + CHUNK)
-        i += CHUNK
-        setTimeout(step, DELAY)
-      }
-      step()
-    })
-  }
-
-  return {
-    fetchAnalysisData,
-    fetchHeatmapData,
-    fetchSolved,
-    solvedRows,
-    solvedTotal,
-    solvedPage,
-    solvedPageSize,
-    fetchAIAnalysis,
-    fetchPinnedReport,
-    simulatePinnedStream,
-    durationData,
-    detailsData,
-    heatmapData,
-    duration,
-    targetUsername,
-    loading,
-    mdContent,
-    pinnedReport,
-  }
-})
diff --git a/apps/web/src/oj/user/index.vue b/apps/web/src/oj/user/index.vue
index b3a4e73..a646e38 100644
--- a/apps/web/src/oj/user/index.vue
+++ b/apps/web/src/oj/user/index.vue
@@ -171,7 +171,7 @@ onMounted(() => {
       @click="
         router.push({
           name: 'ai',
-          query: { username: profile.user.username, duration: 'months:6' },
+          query: { username: profile.user.username },
         })
       "
     >
diff --git a/apps/web/src/utils/types.ts b/apps/web/src/utils/types.ts
index 5d898da..53eb81a 100644
--- a/apps/web/src/utils/types.ts
+++ b/apps/web/src/utils/types.ts
@@ -9,7 +9,6 @@ import type {
   UserProfile,
   EmbeddedSubmission as ContractEmbeddedSubmission,
   Message as ContractMessage,
-  Grade,
   ProblemDifficulty,
   JudgeStatus,
   AstRules,
@@ -465,16 +464,7 @@ export type Exercise = Omit<AdminExercise, "data"> & {
     | ExerciseGroupData
 }
 
-export type {
-  DurationData,
-  FlowchartSummary,
-  SolvedProblem,
-  SolvedList,
-  AiDetail as DetailsData,
-} from "@oj2/contract"
-
-// 评级。空串是「无评级」，后端在没有可用数据时真会下发，见契约 gradeSchema
-export type { Grade, ProblemDifficulty }
+export type { ProblemDifficulty }
 
 // ==================== 成就相关类型 ====================