docs: rebuild README previews from 2x captures

Rework the product preview section around three real screens captured at
deviceScaleFactor 2 instead of the previous 900 px shots taken at a 75%
browser zoom, which read as blurry.

- capture the conversation workspace, the agent customization page and the
  visitor widget, then crop each one to a consistent frame
- drop the tight 480 px widget crop and its leftover gray strip
- restructure the preview section with one lead line and a caption per shot,
  and fold the local start-up steps into a shorter quick start
- keep the browser overlay out of the captures and note the method in the
  asset manifest
- finish the visible ReplyPier rename (sidebar wordmark, widget footer,
  page title, login screen, demo page) so screenshots and UI agree

.github/readme-assets/asset-manifest.json

@@ -1,38 +1,51 @@
 {
   "ui_assets_complete": true,
   "semantic_media_policy": "Use real ReplyPier interface captures; do not substitute generated product mockups.",
+  "capture_notes": "Captured at 100%-equivalent CSS layout through the shared CDP daemon at deviceScaleFactor 2, then downscaled to 1500 px wide (JPEG, quality 93, 4:4:4) for the README. Visible legacy brand strings in the UI (sidebar wordmark, widget footer, site title, page footer) were fixed in source before capture, so no text was rewritten in the browser for the shots.",
   "assets": [
     {
-      "file": "replypier-agent-customization.png",
+      "file": "replypier-conversations.jpg",
-      "role": "AI agent appearance editor and live widget preview",
+      "role": "Agent conversation workspace with a real AI answer, handoff and rating panel",
-      "source": "Saved local ReplyPier interface capture, cropped to the main workspace",
+      "source": "Local ReplyPier build, /conversations, 1600x900 CSS viewport at 2x",
-      "alt": "ReplyPier 客服配置工作台，左侧调整聊天外观，右侧即时预览访客窗口",
+      "alt": "ReplyPier 会话工作台：访客提问、AI 依据知识库作答，转人工后由人工客服接管",
-      "usage": "README product overview"
+      "usage": "README product overview (hero)"
+    },
+    {
+      "file": "replypier-agent-customization.jpg",
+      "role": "AI agent appearance editor with live visitor-widget preview",
+      "source": "Local ReplyPier build, /ai-agents?tab=customization, 1440x900 CSS viewport at 2x, cropped below the save row",
+      "alt": "ReplyPier AI 客服配置页：左侧选择聊天外观，右侧即时预览访客窗口",
+      "usage": "README configuration preview"
     },
     {
       "file": "replypier-visitor-chat.png",
       "role": "Visitor-facing chat widget",
-      "source": "User-provided real widget capture; the avatar marks were updated to the selected paper-boat brand asset",
+      "source": "Local ReplyPier build, widget on /local-demo.html, transparent background capture at 2x, alpha-trimmed",
-      "alt": "ReplyPier 网站客服聊天窗口，纸舟标志显示在客服头像与页脚图标处",
+      "alt": "ReplyPier 网站右下角的访客聊天窗口，纸舟标志显示在客服头像与页脚",
       "usage": "README visitor-side preview"
     }
   ],
   "omitted": [
     {
-      "item": "Generated service-flow illustration and 340 x 280 widget crop",
+      "item": "Previous 900 px wide captures with a 75% browser zoom",
-      "reason": "Replaced with two larger, distinct interface views"
+      "reason": "Soft text and inconsistent crops; replaced with 2x captures and a single framing rule"
     }
   ],
   "qa": [
     {
-      "file": "replypier-agent-customization.png",
+      "file": "replypier-conversations.jpg",
       "status": "passed",
-      "checks": ["chrome controls removed", "live preview visible", "alt text present"]
+      "checks": ["2x text rendering", "three-pane layout fully visible", "browser extension overlay removed from the right edge", "alt text present"]
+    },
+    {
+      "file": "replypier-agent-customization.jpg",
+      "status": "passed",
+      "checks": ["ReplyPier wordmark", "live preview visible", "no cut card edges inside the frame", "alt text present"]
     },
     {
       "file": "replypier-visitor-chat.png",
       "status": "passed",
-      "checks": ["full widget visible", "paper-boat marks applied", "message text preserved", "alt text present"]
+      "checks": ["full widget visible", "paper-boat marks applied", "footer shows ReplyPier", "transparent background", "alt text present"]
     }
   ]
 }

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="frontend/src/assets/logo.svg" width="64" height="48" alt="ReplyPier 纸舟标志" />
+  <img src="frontend/src/assets/logo.svg" width="56" height="42" alt="ReplyPier 纸舟标志" />
   <h1>ReplyPier</h1>
   <p><strong>AI 先答疑，人工接得住；一段会话，服务有始有终。</strong></p>
   <p>面向个人与公司网站的 AI 客服，把知识问答、人工协作和服务评价连在一起。</p>
@@ -13,7 +13,7 @@
   <p>
     <a href="#产品预览">产品预览</a> ·
     <a href="#核心能力">核心能力</a> ·
-    <a href="#本机使用">本机使用</a> ·
+    <a href="#快速开始">快速开始</a> ·
     <a href="#技术结构">技术结构</a> ·
     <a href="AGENT_HANDOFF.md">开发指引</a>
   </p>
@@ -21,24 +21,61 @@
 
 ## 产品预览
 
-先在工作台调整客服外观，再看右侧即时预览；访客侧窗口使用纸舟标志展示同一段对话。
+客服工作台是每天停留最久的一屏：左边是会话列表，中间是完整对话，右边是访客信息、接待状态和服务评价。
-
-![ReplyPier 客服配置工作台，左侧调整聊天外观，右侧即时预览访客窗口](.github/readme-assets/replypier-agent-customization.png)
-
-<p align="center"><strong>访客看到的聊天窗口</strong></p>
 
 <p align="center">
-  <img src=".github/readme-assets/replypier-visitor-chat.png" width="480" alt="ReplyPier 网站客服聊天窗口，纸舟标志显示在客服头像与页脚图标处" />
+  <img src=".github/readme-assets/replypier-conversations.jpg" width="860" alt="ReplyPier 会话工作台：访客提问、AI 依据知识库作答，转人工后由人工客服接管" />
+</p>
+
+<p align="center">
+  <sub>会话工作台 · AI 依据知识库作答 → 转人工保留上下文 → 接待结束邀请访客评价</sub>
+</p>
+
+AI 客服的外观、知识与接待方式都在同一页配置，右侧预览与访客看到的窗口一致。
+
+<p align="center">
+  <img src=".github/readme-assets/replypier-agent-customization.jpg" width="860" alt="ReplyPier AI 客服配置页：左侧选择聊天外观，右侧即时预览访客窗口" />
+</p>
+
+<p align="center">
+  <sub>AI 客服配置 · 左侧挑选聊天外观，右侧即时预览访客窗口</sub>
+</p>
+
+访客侧只在网站右下角露出一枚悬浮按钮，点开就是带纸舟标志的聊天窗口。
+
+<p align="center">
+  <img src=".github/readme-assets/replypier-visitor-chat.png" width="320" alt="ReplyPier 网站右下角的访客聊天窗口，纸舟标志显示在客服头像与页脚" />
+</p>
+
+<p align="center">
+  <sub>访客窗口 · 悬浮展开，纸舟标志贯穿头像与页脚</sub>
 </p>
 
 ## 核心能力
 
-- **知识库问答**：为 AI 客服关联知识资料，并在 Widget 中展示回答来源。
+- **知识库问答**：为 AI 客服关联知识资料，回答时在 Widget 中展示来源。
-- **同会话转人工**：保留聊天上下文，支持客服组接待、人工接管与授权转交。
+- **同会话转人工**：保留完整聊天上下文，支持客服组接待、人工接管与授权转交。
 - **评价与回看**：收集星级和文字反馈，管理员可查看完整会话与接待情况。
 - **多客服协作**：按角色、组织、分组和会话可见范围控制访问。
 - **可配置 Agent 与 Widget**：管理 AI 客服、知识关联、外观和网站嵌入。
-- **知识任务与工作流**：处理知识导入，并编排客服消息处理步骤。
+- **知识任务与工作流**：处理知识导入，并编排客服消息的处理步骤。
+
+## 快速开始
+
+本机已具备 PostgreSQL + pgvector、Redis、Python 3.12 与 Node 环境时，在项目根目录执行：
+
+```bash
+./deploy/local/local.sh setup   # 首次运行：安装依赖并构建前端
+./deploy/local/local.sh up      # 启动数据库、后端与前端
+./deploy/local/local.sh status  # 查看各服务状态
+```
+
+启动后可访问：
+
+- [客服工作台](http://127.0.0.1:3018/)：登录后处理会话、配置 AI 客服。
+- [悬浮客服演示页](http://127.0.0.1:3018/local-demo.html)：从访客视角提问、转人工并提交评价。
+
+账号、构建、日志、数据恢复与公网接入条件见 [LOCAL_DEPLOY.md](LOCAL_DEPLOY.md)。
 
 ## 技术结构
 
@@ -57,20 +94,6 @@ e2e/               端到端测试
 deploy/local/      本机环境与启停脚本
 ```
 
-## 本机使用
-
-在项目根目录执行：
-
-```bash
-./deploy/local/local.sh up
-./deploy/local/local.sh status
-```
-
-- [客服工作台](http://127.0.0.1:3018/)
-- [悬浮客服演示页](http://127.0.0.1:3018/local-demo.html)
-
-账号、构建、日志、数据恢复及公网接入条件见 [LOCAL_DEPLOY.md](LOCAL_DEPLOY.md)。
-
 ## 开发检查
 
 - 后端测试位于 `backend/tests/`。

deploy/local/demo.template.html

@@ -24,7 +24,7 @@
   <main>
     <div class="eyebrow">REPLYPIER · 本机测试</div>
     <h1>你的网页，接入 AI 与人工客服。</h1>
-    <p>点击右下角悬浮按钮展开对话。这里连接的是本机部署的 ReplyPier 和你配置的 DeepSeek。</p>
+    <p>点击右下角悬浮按钮展开对话。这里连接的是本机部署的 ReplyPier 和你配置的模型。</p>
     <section>
       <h2>按这个顺序试一遍</h2>
       <ol>

frontend/src/components/layout/AppSidebar.vue

@@ -67,7 +67,7 @@ const initial = computed(() => (props.userName || '·').trim().slice(0, 1))
         <div class="brand">
             <BrandMark :size="34" />
             <div v-if="!isCollapsed" class="brand-text">
-                <span class="wordmark">Chatter<i>Mate</i></span>
+                <span class="wordmark">Reply<i>Pier</i></span>
                 <span class="brand-sub">智能客服工作台</span>
             </div>
             <SidebarToggle :isCollapsed="isCollapsed" @toggle="emit('toggle')" />

frontend/src/views/LoginView.vue

@@ -287,7 +287,7 @@ const handleVerifyAndResetPassword = async () => {
         <section class="form-col">
             <div class="form-top reveal" style="--i: 0">
                 <BrandMark :size="34" />
-                <span class="wordmark" style="font-size: 21px">Chatter<i>Mate</i></span>
+                <span class="wordmark" style="font-size: 21px">Reply<i>Pier</i></span>
                 <button
                     class="icon-btn"
                     @click="toggleTheme"