From 571f434014d6697d22e133dae59ee7c750cc4266 Mon Sep 17 00:00:00 2001
From: WaylandYang <wayland0916@gmail.com>
Date: Wed, 9 Sep 2026 20:18:12 +0800
Subject: [PATCH] A conversation reads at reading size

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Signed-off-by: WaylandYang <wayland0916@gmail.com>
---
 web/DESIGN.md          | 4 ++--
 web/src/pages/Chat.tsx | 7 +++++--
 web/src/styles.css     | 4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/DESIGN.md b/web/DESIGN.md
index dc67a1581..924d98445 100644
--- a/web/DESIGN.md
+++ b/web/DESIGN.md
@@ -8,8 +8,8 @@ Utopia's chrome is neutral dark glass: Geist for text, Marcellus for the wordmar
 |---|---|---|
 | `text-fine` | 11 / 16 | metadata, chip text, table headers, hints under a control |
 | `text-small` | 12 / 18 | secondary text, dense rows, captions |
-| `text-body` | 13 / 20 | everything else: prose, controls, menus |
-| `text-title` | 15 / 22 | section and dialog titles |
+| `text-body` | 14 / 22 | everything else: prose, controls, menus |
+| `text-title` | 16 / 24 | section and dialog titles; chat reads at this step |
 | `text-display` | 20 / 28 | the page title, and only that |
 
 No `text-xs`/`text-sm`, no `text-[11px]`. If a size between two steps seems necessary, the step is wrong for the element, not the scale for the size. Weight is `font-medium` for controls and titles, `font-semibold` only on the primary button; `font-bold` is not used in chrome. Numbers in chrome are Geist with `u-num` (tabular figures), never monospace; `font-mono` is for keys, ids, code and URLs.
diff --git a/web/src/pages/Chat.tsx b/web/src/pages/Chat.tsx
index 3210d5ded..90e34d33c 100644
--- a/web/src/pages/Chat.tsx
+++ b/web/src/pages/Chat.tsx
@@ -748,7 +748,10 @@ function TurnView({ turn, live }: { turn: Turn; live?: boolean }) {
   if (turn.role === "user") {
     return (
       <div className="flex justify-end">
-        <div className="u-bubble-user max-w-[85%] rounded-panel px-4 py-2 text-body whitespace-pre-wrap text-ink">
+        {/* **对话按 title 那一档读**（16/24，不是正文的 14/22）。这一页是这个
+            产品里唯一一块拿来"读"的长文本，其余都是表格、清单、面板里的字段，
+            14px 在那些地方是对的，成段读就偏小了。仍在五档之内，不新增字号 */}
+        <div className="u-bubble-user max-w-[85%] rounded-panel px-4 py-2 text-title whitespace-pre-wrap text-ink">
           {turn.content}
         </div>
       </div>
@@ -761,7 +764,7 @@ function TurnView({ turn, live }: { turn: Turn; live?: boolean }) {
   return (
     <div className="max-w-[95%]">
       {/* agent 回复无气泡：正文直接落在画布上（用户消息保留气泡以区分角色） */}
-      <div className="py-1 text-body text-ink leading-relaxed">
+      <div className="py-1 text-title text-ink leading-relaxed">
         {/* **轨迹按发生的顺序穿在正文里。**
             模型是边说边查的：说一句、调一次、再说一句。把调用整块提到最前面，
             读起来就成了「先查七次再一口气说完」——那不是它做的事，而且相邻两次
diff --git a/web/src/styles.css b/web/src/styles.css
index 105239076..899303cea 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -998,9 +998,11 @@ select.input-dark option {
 }
 
 /* ---- interactive accents ---- */
+/* 自己发的那条。**只有一块底，没有描边**：这一屏上带框的东西都是可以操作的
+   （输入框、控件、卡片），一条已经说完的话不是其中之一，给它描边就是在暗示
+   还能点。角色靠这块 8% 的底区分就够了 */
 .u-bubble-user {
   background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.14);
 }
 .u-highlight {
   border-color: rgba(255, 255, 255, 0.45) !important;