Refresh CodeSense interface with flat teal design

docs/superpowers/plans/2026-10-01-flat-ui-refresh.md

@@ -0,0 +1,107 @@
+# CodeSense 纯色界面改版实施计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将 CodeSense 的自有页面改为统一的纯色、轻量、适应窄屏的界面，并修复 AI 编程助手的拥挤排版。
+
+**Architecture:** 继续使用 Flask/Jinja、Bootstrap 和现有 JavaScript。通过共享语义色变量及现有模板宏实现可复用组件；页面局部 CSS 只承担布局和具体内容展示。保持原有路由与数据接口不变。
+
+**Tech Stack:** Flask、Jinja2、CSS、原生 JavaScript、pytest、浏览器视觉检查。
+
+**Spec:** `docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md`
+
+## Global Constraints
+
+- 自有产品 CSS/模板不得保留 `linear-gradient(` 或 `radial-gradient(`；不修改第三方 vendor 文件。
+- 设计色：页面 `#F5F7F8`、表面 `#FFFFFF`、主文字 `#23343D`、次文字 `#64757D`、线条 `#DDE5E6`、操作 `#237B75`、强调浅底 `#EAF4F2`、输入浅底 `#F0F3F3`。
+- 不新增 React 构建或运行时；保持现有服务端渲染及 AI 聊天功能。
+- 重点检查 1440、768、390、320 CSS 像素宽度。
+
+## Review Focus
+
+1. 知识证据为空或检索失败时，紧凑面板仍显示下一步与重试入口。
+2. 长代码、表格、URL 和中文段落在 AI 回复中不撑破侧栏。
+3. 展开证据后来源与引用均可读，键盘可操作。
+4. 流式输出、快捷问题、发送与清空按钮保持可用。
+5. 对比度、焦点样式和减少动画偏好在浅色界面仍清晰。
+
+---
+
+### Task 1: 共享视觉基础
+
+**Files:**
+- Modify: `static/modern.css`
+- Modify: `templates/layout.html`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Produces CSS variables `--cs-bg`, `--cs-surface`, `--cs-ink`, `--cs-muted`, `--cs-line`, `--cs-accent`, `--cs-accent-soft`, `--cs-input` for subsequent page CSS.
+
+- [ ] **Step 1: Write a failing static contract test** in `tests/test_flat_ui_contract.py` that reads `static/modern.css` and asserts the exact semantic variable/value pairs below. Check shared button, focus, surface and body rules reference these variables.
+
+```python
+EXPECTED = {
+    "--cs-bg": "#F5F7F8", "--cs-surface": "#FFFFFF",
+    "--cs-ink": "#23343D", "--cs-muted": "#64757D",
+    "--cs-line": "#DDE5E6", "--cs-accent": "#237B75",
+    "--cs-accent-soft": "#EAF4F2", "--cs-input": "#F0F3F3",
+}
+```
+- [ ] **Step 2: Run** `python -m pytest tests/test_flat_ui_contract.py -q`; expect failure from missing variables.
+- [ ] **Step 3: Implement** the variables in `:root` and replace general navigation, button, card, form and focus colors with semantic variables. Preserve existing layout and semantic error/success states.
+- [ ] **Step 4: Run** the contract test and `python -m pytest tests/test_app.py -q`; inspect failures before proceeding.
+- [ ] **Step 5: Commit** `static/modern.css`, `templates/layout.html`, and the test.
+
+### Task 2: AI 助手和知识证据
+
+**Files:**
+- Modify: `templates/submit_code.html`
+- Modify: `templates/components/knowledge_evidence.html`
+- Modify: `static/css/knowledge-evidence.css`
+- Modify: `static/css/codesense-markdown.css`
+- Test: `tests/test_knowledge_evidence_ui.py`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Consumes Task 1 CSS variables.
+- Keeps `knowledge_evidence_panel(...)` macro signature and existing chat element IDs used by JavaScript.
+
+- [ ] **Step 1: Add a failing UI contract test** asserting the compact knowledge panel contains `<details` and `<summary`, retains `knowledge-evidence-retry`, `knowledge-evidence-citation`, and `knowledge-evidence-detail__source`, and that the submit page retains `id="ai-chat-messages"`, `id="ai-chat-input"`, `id="ai-send-button"`, and `id="clear-chat"`.
+- [ ] **Step 2: Run** `python -m pytest tests/test_knowledge_evidence_ui.py tests/test_flat_ui_contract.py -q`; expect new assertions to fail.
+- [ ] **Step 3: Implement** the flat assistant header, compact evidence summary, full-width assistant messages, restrained prompt buttons, flexible code/editor columns and mobile stacking. Use `min-width: 0`, wrapping and local overflow for code and tables. Leave full evidence mode unchanged.
+- [ ] **Step 4: Run** the two contract suites plus `python -m pytest tests/test_submission_knowledge_views.py -q`.
+- [ ] **Step 5: Check** the page at 1440, 768, 390 and 320 widths in a browser, with evidence expanded and a long AI answer. Repair observed overflow or clipped controls.
+- [ ] **Step 6: Commit** the scoped changes.
+
+### Task 3: 全站纯色迁移
+
+**Files:**
+- Modify: `static/css/action-center.css`, `static/css/thinking.css`, `static/modern.css`
+- Modify: all first-party templates currently containing gradients, as enumerated by `git grep -l -i -E 'linear-gradient\\(|radial-gradient\\(' -- 'static/*.css' 'static/**/*.css' 'templates/*.html'` excluding `static/vendor/`
+- Test: `tests/test_flat_ui_contract.py`
+
+**Interfaces:**
+- Consumes Task 1 CSS variables. No route or JavaScript API changes.
+
+- [ ] **Step 1: Extend the failing contract test** to scan first-party CSS and templates for `linear-gradient(` and `radial-gradient(`, excluding `static/vendor/`; print offending file paths and line numbers. Use `Path.rglob` rooted at `static` and `templates`, and `re.compile(r"(?:linear|radial)-gradient\\(", re.I)`.
+- [ ] **Step 2: Run** `python -m pytest tests/test_flat_ui_contract.py -q`; expect the gradient scan to fail.
+- [ ] **Step 3: Replace** each gradient by a solid semantic color: page sections use `var(--cs-bg)`, cards `var(--cs-surface)`, primary buttons `var(--cs-accent)`, selected or informational sections `var(--cs-accent-soft)`, and input areas `var(--cs-input)`. Handle hover states, overlays, inline styles and pseudo elements. Preserve semantic warning/danger colors. Remove decorative gradient-only pseudo elements instead of substituting an opaque block.
+- [ ] **Step 4: Run** the gradient scan to zero findings, then inspect at least login, student home, teacher home, class detail, feedback and admin profile at desktop and narrow widths.
+- [ ] **Step 5: Commit** first-party CSS/templates and the test.
+
+### Task 4: Final behavior and visual verification
+
+**Files:**
+- Modify only files where verification finds defects.
+
+**Interfaces:**
+- Validates all prior tasks.
+
+- [ ] **Step 1: Run** `git diff --check` and targeted UI suites (`tests/test_flat_ui_contract.py`, `tests/test_knowledge_evidence_ui.py`, `tests/test_submission_knowledge_views.py`, `tests/test_status_recovery_ui.py`).
+- [ ] **Step 2: Inspect** key pages and controls at 1440, 768, 390 and 320 widths. Verify no horizontal overflow, readable text, visible keyboard focus, working evidence expansion and chat interactions.
+- [ ] **Step 3: Compare** the code submission page with the approved Figma desktop and mobile frames; record any deliberate deviations.
+- [ ] **Step 4: Repair concrete defects, rerun only the checks affected by those repairs, and commit the final verified state.
+
+## Handoff
+
+The implementation stays on `codex/flat-ui-refresh` in the isolated worktree. Do not merge, deploy, or overwrite the user's dirty main checkout during this plan.

docs/superpowers/specs/2026-10-01-flat-ui-refresh-design.md

@@ -0,0 +1,57 @@
+# CodeSense 纯色界面改版设计
+
+日期：2026-10-01
+Figma 草图：https://www.figma.com/design/NKLZ19BDlAbwveKe6tHV6k
+
+## 目标
+
+将 CodeSense 的产品界面统一为简洁、舒适、灵活的纯色视觉语言，重点解决代码提交页 AI 编程助手在窄屏上知识卡过高、回复正文过窄、引用内容挤压的问题。保留现有功能、文案语义和服务端渲染方式。
+
+## 范围
+
+- 产品自有 CSS 和 Jinja 模板中的蓝紫色系、渐变背景及相关悬停状态；不修改 Bootstrap、Monaco 等第三方资源。
+- 共用导航、按钮、卡片、表单、提示、状态标签与 AI 消息的颜色、边框、间距和焦点状态。
+- 代码提交页的桌面与窄屏助手布局，以及知识证据面板的紧凑展示。
+- 已存在渐变的登录、注册、个人资料、学生与教师首页、班级、帮助、反馈、分析等页面。按同一视觉规则调整，避免只修截图中的一页。
+
+当前 `origin/main` 中自有样式约有 57 处渐变声明，分布于 27 个文件。这是基线清单，实施时重新扫描并逐一处理。
+
+## 视觉基础
+
+| 用途 | 颜色 |
+| --- | --- |
+| 页面背景 | `#F5F7F8` |
+| 内容表面 | `#FFFFFF` |
+| 主文字 | `#23343D` |
+| 次文字 | `#64757D` |
+| 分隔线 | `#DDE5E6` |
+| 主要操作 | `#237B75` |
+| 强调浅底 | `#EAF4F2` |
+| 输入浅底 | `#F0F3F3` |
+
+保留语义性成功、警告、错误颜色，但降低饱和度并保证对比度。主要操作使用青绿色纯色；信息层级主要通过字号、留白、细边框和文字重量表达。中文正文优先使用系统可用的无衬线字族，代码继续使用等宽字族。按钮和卡片采用适度圆角，不使用大面积阴影或装饰性渐变。交互状态以纯色、边框和清晰的键盘焦点体现。
+
+## 页面与组件
+
+1. 在共享样式中定义语义化视觉变量，并让通用控件引用变量。页面局部样式可以扩展，但不再各自发明主色和渐变。
+2. 保持 Flask/Jinja、Bootstrap 和现有 JavaScript 架构。复用现有模板宏与 CSS 组件；不为视觉改版引入 React 运行时或重写路由。
+3. 代码提交页桌面布局保留编辑器与助手并列，助手提供足够阅读宽度；较窄视口改为顺序布局，避免侧栏被压到无法阅读。
+4. AI 助手顶部使用简洁标题栏。知识焦点默认显示短摘要和证据数量，证据列表可展开；回复正文占可用宽度，长词、代码、表格、引用均不得造成横向溢出。输入区在助手底部保持可见。
+5. 知识证据在其他页面仍维持完整展示；紧凑模式只改变代码提交页的呈现，不删减证据数据或来源。
+
+## 适配与可访问性
+
+- 在 1440、768、390 和约 320 CSS 像素宽度检查关键页面；内容可换行，操作按钮有足够点击面积。
+- 保持焦点可见、文字与控件对比度充足；尊重减少动画偏好。
+- 证据展开状态有语义化控件和可访问名称；现有快捷提问、发送、清空、流式消息和证据重试继续可用。
+
+## 验收
+
+- 产品自有 CSS/模板不再出现 `linear-gradient(` 或 `radial-gradient(` 声明；第三方静态资源除外。
+- AI 助手在窄屏不出现截图中的三列挤压和横向滚动，知识列表展开后可完整阅读。
+- 全站共用控件和至少登录、学生首页、教师首页、代码提交四个代表性页面视觉一致。
+- 现有相关行为测试通过；浏览器检查桌面与窄屏，确认布局和交互状态。
+
+## 发布
+
+先在独立工作区完成代码与验证，再将变更并入主分支。线上部署需要单独验证静态资源缓存和真实页面显示；Figma 是设计参照，不替代浏览器验收。

static/css/action-center.css

@@ -1,12 +1,10 @@
 .action-center-page {
     max-width: 980px;
     margin: 0 auto;
-    color: #e8eefc;
-    --action-navy: #0b1530;
-    --action-panel: #111e3e;
-    --action-line: #4ea1ff;
-    --action-muted: #a8b6d2;
-    --action-soft: rgba(78, 161, 255, 0.12);
+    color: var(--cs-ink, #23343D);
+    --action-line: #DDE5E6;
+    --action-muted: #5B6E70;
+    --action-soft: #EAF4F2;
 }
 
 .action-center-header {
@@ -16,21 +14,21 @@
     gap: 1.5rem;
     padding: 2.2rem clamp(1.25rem, 4vw, 3rem);
     border-radius: 1.25rem;
-    background: linear-gradient(120deg, var(--action-navy), #172a54 70%, #1d3a71);
-    box-shadow: 0 1rem 2.5rem rgba(13, 31, 70, 0.18);
+    background: #F1F7F5;
+    border: 1px solid var(--action-line);
 }
 
 .action-center-eyebrow {
     margin: 0 0 0.7rem;
-    color: var(--action-line);
+    color: #237B75;
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.16em;
 }
 
 .action-center-header h1 {
     margin: 0;
-    color: #fff;
+    color: var(--cs-ink, #23343D);
     font-size: clamp(2rem, 5vw, 3.2rem);
     letter-spacing: -0.04em;
 }
@@ -46,22 +44,22 @@
     display: grid;
     min-width: 8rem;
     padding: 0.9rem 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid var(--action-line);
     border-radius: 0.9rem;
     color: var(--action-muted);
     text-align: right;
 }
 
 .action-center-totals strong {
-    color: #fff;
+    color: var(--cs-ink, #23343D);
     font-size: 2rem;
     line-height: 1;
 }
 
 .action-center-status {
     margin: 1.1rem 0 0;
     padding: 0.75rem 1rem;
-    border-left: 3px solid var(--action-line);
+    border-left: 3px solid #237B75;
     color: #334155;
     background: var(--action-soft);
 }
@@ -77,16 +75,16 @@
     padding: 0.5rem 0.8rem;
     border: 1px solid #cbd5e1;
     border-radius: 999px;
-    color: #1e3a8a;
+    color: #23343D;
     background: #fff;
     text-decoration: none;
 }
 
 .action-center-filter:hover,
 .action-center-filter[aria-current="page"] {
-    border-color: var(--action-line);
-    color: #08204d;
-    background: #dbeafe;
+    border-color: #237B75;
+    color: #1C625D;
+    background: #EAF4F2;
 }
 
 .action-center-filter:focus-visible,
@@ -105,7 +103,7 @@
 
 .action-center-item {
     overflow: hidden;
-    border: 1px solid #dbe4f0;
+    border: 1px solid #DDE5E6;
     border-radius: 0.9rem;
     background: #fff;
     box-shadow: 0 0.4rem 1rem rgba(15, 23, 42, 0.06);
@@ -116,7 +114,7 @@
     grid-template-columns: 0.35rem minmax(0, 1fr) auto;
     align-items: stretch;
     min-height: 5.5rem;
-    color: #172554;
+    color: #23343D;
     text-decoration: none;
 }
 
@@ -129,7 +127,7 @@
 }
 
 .action-center-item--next .action-center-item-rail {
-    background: var(--action-line);
+    background: #237B75;
 }
 
 .action-center-item-body {
@@ -152,7 +150,7 @@
 }
 
 .action-center-item-priority {
-    color: #1d4ed8;
+    color: #1C625D;
     font-weight: 800;
 }
 
@@ -163,7 +161,7 @@
 .action-center-item-arrow {
     align-self: center;
     padding: 0 1rem;
-    color: #2563eb;
+    color: #237B75;
     font-size: 1.4rem;
 }
 

static/css/code-editor.css

@@ -28,7 +28,7 @@
 
 .editor-language {
     font-weight: 600;
-    color: #3b82f6;
+    color: #2E8E86;
     display: flex;
     align-items: center;
 }
@@ -65,8 +65,8 @@
 }
 
 .editor-btn.active {
-    background-color: #dbeafe;
-    color: #2563eb;
+    background-color: #EAF4F2;
+    color: #237B75;
 }
 
 /* 下拉菜单 */
@@ -155,7 +155,7 @@
     height: 40px;
     border: 3px solid #e5e7eb;
     border-radius: 50%;
-    border-top-color: #3b82f6;
+    border-top-color: #2E8E86;
     animation: spin 1s linear infinite;
 }
 
@@ -228,8 +228,8 @@
 }
 
 .code-editor.dark-theme .editor-btn.active {
-    background-color: #1e3a8a;
-    color: #60a5fa;
+    background-color: #23343D;
+    color: #78ADA6;
 }
 
 .code-editor.dark-theme .editor-textarea {
@@ -256,7 +256,7 @@
 
 .code-editor.dark-theme .spinner {
     border-color: #374151;
-    border-top-color: #60a5fa;
+    border-top-color: #78ADA6;
 }
 
 .code-editor.dark-theme .loading-text {