Polish Dream QA morning desk UI

dream_customs/render.py

@@ -53,6 +53,8 @@ def render_today_tip_card(card: TodayTipCard, language: str = "en") -> str:
             if is_zh
             else "MiniCPM-V reads sketches, notes, and image clues; MiniCPM5-1B writes the follow-up question, reflection, and ticket."
         ),
+        "ticket_stamp_label": "今天只带走一张" if is_zh else "Take one note today",
+        "ticket_stamp_title": "贴着梦境细节" if is_zh else "Grounded in the dream",
     }
     tiny_action = (
         f"<section class='dqa-ticket-row'><h3>{labels['tiny_action']}</h3><p>{escape(card.tiny_action)}</p></section>"
@@ -81,6 +83,10 @@ def render_today_tip_card(card: TodayTipCard, language: str = "en") -> str:
       <h2>{labels['page']}</h2>
       <p>{labels['thanks']}</p>
     </div>
+    <div class="dqa-ticket-stamp" aria-hidden="true">
+      <span>{labels['ticket_stamp_label']}</span>
+      <strong>{labels['ticket_stamp_title']}</strong>
+    </div>
   </div>
   <div class="dqa-anchor-chips" aria-label="{labels['anchors']}">{anchor_chips}</div>
   <article class="dqa-morning-ticket">

dream_customs/ui/app.py

@@ -432,7 +432,10 @@ def _question_markdown(view: dict, language: str = DEFAULT_LANGUAGE) -> str:
     anchor_label = "梦境锚点" if language == "zh" else "Dream anchors"
     anchor_chips = "".join(f"<span>{escape(anchor)}</span>" for anchor in anchor_items)
     anchor_strip = (
+        "<div class='dc-question-anchor-wrap'>"
+        f"<span class='dc-question-anchor-label'>{escape(copy['question_anchor_label'])}</span>"
         f"<div class='dc-question-anchor-strip' aria-label='{anchor_label}'>{anchor_chips}</div>"
+        "</div>"
         if anchor_chips
         else ""
     )
@@ -697,6 +700,10 @@ def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
     <div class="dc-sun-mark" aria-hidden="true"></div>
   </div>
   <p class="dc-hero-body">{copy['hero_body']}</p>
+  <div class="dc-hero-ribbon" aria-label="{escape(copy['hero_badge'])}">
+    <span>{escape(copy['hero_badge'])}</span>
+    <small>{escape(copy['hero_mobile_note'])}</small>
+  </div>
   <div class="dc-stepper" aria-label="Dream QA steps">
     {''.join(step_html)}
   </div>
@@ -714,12 +721,13 @@ def _section_title_html(number: int, text: str) -> str:
 
 
 def _demo_chip_intro_html(language: str = DEFAULT_LANGUAGE) -> str:
-    message = (
-        "Or tap the 90-second demo trail:"
-        if normalize_language(language) == "en"
-        else "也可以点一个 90 秒演示线索："
-    )
-    return f'<p class="dc-demo-chip-intro">{escape(message)}</p>'
+    copy = copy_for(language)
+    return f"""
+<div class="dc-demo-chip-intro">
+  <span>{escape(copy['demo_intro_label'])}</span>
+  <strong>{escape(copy['demo_intro_body'])}</strong>
+</div>
+""".strip()
 
 
 def _mic_html(language: str = DEFAULT_LANGUAGE) -> str:
@@ -774,7 +782,13 @@ def _field_tip_html(language: str = DEFAULT_LANGUAGE, view=None) -> str:
             else "梦境记录需要至少一句文字、图片或语音线索，然后再继续。"
         )
         return f'<p class="dc-field-tip is-error" role="alert">{escape(message)}</p>'
-    return f"<p class=\"dc-field-tip\">{escape(copy['field_tip'])}</p>"
+    return f"""
+<div class="dc-field-tip">
+  <span>{escape(copy['desk_rule_label'])}</span>
+  <strong>{escape(copy['desk_rule_title'])}</strong>
+  <p>{escape(copy['field_tip'])}</p>
+</div>
+""".strip()
 
 
 def _processing_html(language: str = DEFAULT_LANGUAGE) -> str:
@@ -783,11 +797,23 @@ def _processing_html(language: str = DEFAULT_LANGUAGE) -> str:
 
 def _side_stamp_html(language: str = DEFAULT_LANGUAGE) -> str:
     copy = copy_for(language)
+    intake_items = "".join(f"<span>{escape(item)}</span>" for item in copy["intake_items"])
     return f"""
-<div class="dc-side-stamp">
-  <span>{escape(copy['side_stamp_label'])}</span>
-  <strong>{escape(copy['side_stamp_title'])}</strong>
-  <small>{escape(copy['side_stamp_body'])}</small>
+<div class="dc-side-stack">
+  <div class="dc-side-stamp">
+    <span>{escape(copy['side_stamp_label'])}</span>
+    <strong>{escape(copy['side_stamp_title'])}</strong>
+    <small>{escape(copy['side_stamp_body'])}</small>
+  </div>
+  <div class="dc-desk-rule">
+    <span>{escape(copy['desk_rule_label'])}</span>
+    <strong>{escape(copy['desk_rule_title'])}</strong>
+    <p>{escape(copy['desk_rule_body'])}</p>
+  </div>
+  <div class="dc-intake-rail" aria-label="{escape(copy['intake_label'])}">
+    <small>{escape(copy['intake_label'])}</small>
+    <div>{intake_items}</div>
+  </div>
 </div>
 """.strip()
 

dream_customs/ui/copy.py

@@ -12,6 +12,8 @@ APP_COPY = {
         "hero_title": "What did the dream leave you asking?",
         "subtitle": "Record the dream, answer one gentle question, and leave with a grounded Morning Ticket.",
         "hero_body": "A small-model dream desk for the first few minutes after waking. It gathers concrete details, asks before interpreting, and writes one note for today.",
+        "hero_badge": "Text + image + voice intake",
+        "hero_mobile_note": "Made for the half-awake minute",
         "brand_subtitle": "Dream Customs",
         "steps": ["Record", "One Question", "Today Tip"],
         "notice_record": "Write one dream fragment, then use a demo chip if you want the 90-second judge path.",
@@ -40,11 +42,14 @@ APP_COPY = {
         "image_label": "Image clue",
         "image_upload": "Upload image",
         "image_paste": "Paste from Clipboard",
+        "demo_intro_label": "Dream slips",
+        "demo_intro_body": "Pick one if you want the fast judge path.",
         "question_kicker": "Question",
         "question_title": "One question before the ticket",
         "question_body": "Answer in one or two lines, or skip and let the existing anchors carry the ticket.",
         "question_speaker": "Morning Question Desk",
         "question_note": "This step makes the tip more specific. It is not diagnosis.",
+        "question_anchor_label": "Sticky details already on the desk",
         "answer_label": "Your answer",
         "answer_placeholder": "Write one answer, or leave it blank and skip.",
         "answer_button": "Send answer",
@@ -59,6 +64,11 @@ APP_COPY = {
         "side_stamp_label": "90-second demo",
         "side_stamp_title": "Elevator, floor 14, first sentence",
         "side_stamp_body": "The strongest path ends with a tiny action tied to a real overdue email.",
+        "desk_rule_label": "Morning desk rule",
+        "desk_rule_title": "Do not solve the whole dream.",
+        "desk_rule_body": "Catch the strange object, name the feeling, ask one useful question.",
+        "intake_label": "One intake",
+        "intake_items": ["Text", "Image", "Voice"],
         "language_label": "Language",
         "runtime_help": "Advanced controls for demos and development. Most visitors can leave these unchanged.",
         "debug_title": "Debug",
@@ -73,6 +83,8 @@ APP_COPY = {
         "hero_title": "这个梦，醒来后把什么问题留给了你？",
         "subtitle": "记录梦境，回答一个温和追问，最后拿到一张贴着梦境细节的清晨小票。",
         "hero_body": "一个适合刚醒来几分钟使用的小模型问讯台：先捡起具体细节，再问一个好问题，最后只给今天的一张小纸条。",
+        "hero_badge": "文字 + 图片 + 语音统一入口",
+        "hero_mobile_note": "适合半醒时的一分钟",
         "brand_subtitle": "Dream Customs",
         "steps": ["记录", "一个追问", "清晨小票"],
         "notice_record": "写一个梦境片段；想走 90 秒演示路径，也可以直接点示例 chip。",
@@ -101,11 +113,14 @@ APP_COPY = {
         "image_label": "图片线索",
         "image_upload": "上传图片",
         "image_paste": "从剪贴板粘贴",
+        "demo_intro_label": "梦境纸片",
+        "demo_intro_body": "想快速演示，可以先抽一张。",
         "question_kicker": "追问",
         "question_title": "出票前，只问这一个问题",
         "question_body": "回答一两句就好；也可以跳过，让已有锚点直接生成小票。",
         "question_speaker": "清晨问讯室",
         "question_note": "这个步骤是为了让最终建议更贴近你的梦，不是问诊。",
+        "question_anchor_label": "桌面上已经留下的细节",
         "answer_label": "你的回答",
         "answer_placeholder": "写一句回答，或留空后选择跳过。",
         "answer_button": "发送回答",
@@ -120,6 +135,11 @@ APP_COPY = {
         "side_stamp_label": "90 秒演示",
         "side_stamp_title": "电梯、14 楼、第一句话",
         "side_stamp_body": "最稳的演示路径会把梦境锚点落到一封迟迟没写的邮件。",
+        "desk_rule_label": "清晨桌面规则",
+        "desk_rule_title": "不要解完整个梦。",
+        "desk_rule_body": "先抓住奇怪的物件，说出醒来的感受，再问一个今天能用的问题。",
+        "intake_label": "同一个入口",
+        "intake_items": ["文字", "图片", "语音"],
         "language_label": "语言",
         "runtime_help": "高级演示与开发控制。普通体验保持默认即可。",
         "debug_title": "调试",

dream_customs/ui/styles.py

@@ -1199,6 +1199,445 @@ a.built-with[href*="gradio.app"] {
 }
 """
 
+CSS += """
+/* Reference-space polish: soft PawMap spacing, case-file step clarity, paper-note tactility. */
+:root {
+  --dqa-dawn: #eef6f1;
+  --dqa-desk: #f7eddc;
+  --dqa-paper-warm: #fffaf0;
+  --dqa-pencil: #2c3734;
+  --dqa-sage-2: #5f8f68;
+  --dqa-rose: #d67b67;
+  --dqa-brass: #d7a842;
+  --dqa-paper-line: rgba(95, 143, 104, 0.16);
+  --dqa-table-shadow: 0 18px 44px rgba(52, 66, 55, 0.14);
+  --dqa-paper-shadow: 5px 6px 0 rgba(44, 55, 52, 0.08);
+}
+
+html,
+body,
+.gradio-container {
+  background:
+    linear-gradient(90deg, rgba(95, 143, 104, 0.045) 0 1px, transparent 1px 80px),
+    linear-gradient(180deg, #eef7f2 0%, #fffaf0 45%, #f6ead8 100%) !important;
+}
+
+.dc-shell {
+  max-width: 1320px;
+}
+
+.dc-hero {
+  background:
+    linear-gradient(180deg, rgba(247, 251, 246, 0.84), rgba(255, 250, 240, 0.96)),
+    url("https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&w=1600&q=80") center 55% / cover !important;
+  border-bottom: 1px solid rgba(95, 143, 104, 0.18);
+  min-height: clamp(280px, 36vw, 460px);
+  padding-bottom: clamp(30px, 5vw, 58px);
+}
+
+.dc-hero-top {
+  align-items: start;
+}
+
+.dc-hero-ribbon {
+  align-items: center;
+  background: rgba(255, 250, 240, 0.86);
+  border: 1px solid rgba(95, 143, 104, 0.22);
+  border-radius: 8px;
+  box-shadow: 3px 4px 0 rgba(44, 55, 52, 0.07);
+  color: var(--dqa-pencil);
+  display: inline-flex;
+  gap: 12px;
+  justify-self: center;
+  margin-top: 8px;
+  max-width: min(100%, 680px);
+  padding: 9px 12px;
+}
+
+.dc-hero-ribbon span {
+  color: var(--dqa-sage-deep);
+  font-size: 0.84rem;
+  font-weight: 780;
+}
+
+.dc-hero-ribbon small {
+  color: #65746e;
+  font-size: 0.82rem;
+  font-weight: 650;
+}
+
+.dc-workspace-grid {
+  gap: 20px !important;
+  grid-template-columns: minmax(0, 1fr) minmax(288px, 334px) !important;
+  margin-top: -20px;
+}
+
+.dc-stage,
+.dc-side-panel,
+.dc-debug-panel {
+  border-radius: 8px !important;
+  box-shadow: var(--dqa-table-shadow);
+}
+
+.dc-stage {
+  background:
+    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(250, 241, 227, 0.98)),
+    var(--dqa-desk) !important;
+  overflow: hidden;
+  position: relative;
+}
+
+.dc-stage::after {
+  background: linear-gradient(90deg, rgba(95, 143, 104, 0.24), rgba(214, 123, 103, 0.2), rgba(215, 168, 66, 0.2));
+  content: "";
+  height: 5px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.dc-stage .dc-composer {
+  padding-top: 8px !important;
+}
+
+.dc-stage .dc-dream-text textarea {
+  background:
+    linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(255, 253, 248, 0.98)),
+    repeating-linear-gradient(180deg, transparent 0 31px, var(--dqa-paper-line) 31px 32px) !important;
+  border-color: rgba(95, 143, 104, 0.2) !important;
+  border-radius: 8px !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.78),
+    var(--dqa-paper-shadow) !important;
+  color: var(--dqa-pencil) !important;
+  min-height: 350px !important;
+  padding-left: 72px !important;
+}
+
+.dc-stage .dc-dream-text textarea:focus {
+  border-color: rgba(95, 143, 104, 0.54) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.78),
+    0 0 0 3px rgba(95, 143, 104, 0.14),
+    var(--dqa-paper-shadow) !important;
+}
+
+.dc-field-tip {
+  background: #fff7df;
+  border: 1px solid rgba(215, 168, 66, 0.34);
+  border-radius: 8px;
+  box-shadow: 3px 4px 0 rgba(111, 92, 48, 0.08);
+  display: grid;
+  gap: 5px;
+  margin: 16px 0 0;
+  padding: 13px 15px;
+}
+
+.dc-field-tip span {
+  color: #8c6733;
+  font-size: 0.74rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.dc-field-tip strong {
+  color: var(--dqa-pencil);
+  font-size: 1rem;
+  line-height: 1.25;
+}
+
+.dc-field-tip p {
+  color: #6f746c;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dc-field-tip.is-error {
+  display: block;
+}
+
+.dc-demo-chip-intro {
+  align-items: baseline;
+  color: var(--dqa-muted);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 18px 0 0;
+}
+
+.dc-demo-chip-intro span {
+  color: var(--dqa-sage-deep);
+  font-size: 0.78rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.dc-demo-chip-intro strong {
+  color: #59675f;
+  font-size: 0.92rem;
+  font-weight: 650;
+}
+
+.dc-demo-chip-row .dc-demo-chip button {
+  background: var(--dqa-paper-warm) !important;
+  border: 1px solid rgba(95, 143, 104, 0.22) !important;
+  border-radius: 8px !important;
+  box-shadow: 4px 4px 0 rgba(44, 55, 52, 0.08) !important;
+  min-height: 58px !important;
+  padding: 10px 12px !important;
+  white-space: normal !important;
+}
+
+.dc-demo-chip-row .dc-demo-chip button:hover,
+.dc-demo-chip-row .dc-demo-chip button:focus-visible {
+  background: #eef7e9 !important;
+  border-color: rgba(95, 143, 104, 0.45) !important;
+}
+
+.dc-side-panel {
+  background: rgba(255, 253, 248, 0.98) !important;
+  gap: 14px;
+}
+
+.dc-side-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.dc-side-stamp,
+.dc-desk-rule,
+.dc-intake-rail {
+  border-radius: 8px;
+  box-shadow: 3px 4px 0 rgba(44, 55, 52, 0.06);
+}
+
+.dc-side-stamp {
+  background: linear-gradient(180deg, #fff8e2, #fffdf8) !important;
+  border-color: rgba(215, 168, 66, 0.32) !important;
+}
+
+.dc-desk-rule {
+  background: #eff7ee;
+  border: 1px solid rgba(95, 143, 104, 0.24);
+  color: var(--dqa-pencil);
+  display: grid;
+  gap: 6px;
+  padding: 16px;
+}
+
+.dc-desk-rule span,
+.dc-intake-rail small {
+  color: var(--dqa-sage-deep);
+  font-size: 0.74rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.dc-desk-rule strong {
+  color: var(--dqa-pencil);
+  font-size: 1.06rem;
+  line-height: 1.25;
+}
+
+.dc-desk-rule p {
+  color: #607169;
+  font-size: 0.92rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dc-intake-rail {
+  background: #fffdf8;
+  border: 1px solid rgba(217, 226, 220, 0.92);
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+}
+
+.dc-intake-rail div {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.dc-intake-rail span {
+  background: #f4faf2;
+  border: 1px solid rgba(95, 143, 104, 0.2);
+  border-radius: 999px;
+  color: var(--dqa-sage-deep);
+  font-size: 0.78rem;
+  font-weight: 760;
+  padding: 7px 6px;
+  text-align: center;
+}
+
+.dc-question-card {
+  background:
+    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 245, 222, 0.98)),
+    repeating-linear-gradient(180deg, transparent 0 30px, rgba(215, 168, 66, 0.12) 30px 31px) !important;
+  border-color: rgba(215, 168, 66, 0.36);
+  border-radius: 8px;
+  box-shadow: var(--dqa-paper-shadow);
+  position: relative;
+}
+
+.dc-question-card::before {
+  background: rgba(95, 143, 104, 0.16);
+  border: 1px solid rgba(95, 143, 104, 0.16);
+  content: "";
+  height: 28px;
+  left: 50%;
+  position: absolute;
+  top: -14px;
+  transform: translateX(-50%) rotate(-2deg);
+  width: 104px;
+}
+
+.dc-question-anchor-wrap {
+  background: rgba(255, 253, 248, 0.62);
+  border: 1px dashed rgba(95, 143, 104, 0.28);
+  border-radius: 8px;
+  margin: 16px 0 8px;
+  padding: 12px;
+}
+
+.dc-question-anchor-label {
+  color: var(--dqa-sage-deep);
+  display: block;
+  font-size: 0.76rem;
+  font-weight: 820;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+.dc-question-anchor-strip {
+  margin: 0;
+}
+
+.dc-question-original {
+  background: rgba(255, 253, 248, 0.7);
+  border-left-color: var(--dqa-brass);
+  border-radius: 0 8px 8px 0;
+  padding: 11px 12px;
+}
+
+.dqa-tip-page {
+  border-radius: 8px;
+}
+
+.dqa-tip-hero {
+  border-radius: 8px 8px 0 0;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) minmax(140px, 190px);
+  position: relative;
+}
+
+.dqa-ticket-stamp {
+  align-self: start;
+  background: rgba(255, 250, 240, 0.9);
+  border: 2px solid rgba(95, 143, 104, 0.36);
+  border-radius: 8px;
+  box-shadow: 3px 4px 0 rgba(44, 55, 52, 0.08);
+  color: var(--dqa-sage-deep);
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  padding: 13px 12px;
+  text-align: center;
+  transform: rotate(3deg);
+}
+
+.dqa-ticket-stamp span {
+  font-size: 0.72rem;
+  font-weight: 820;
+  text-transform: uppercase;
+}
+
+.dqa-ticket-stamp strong {
+  color: var(--dqa-pencil);
+  font-size: 0.96rem;
+  line-height: 1.2;
+}
+
+.dqa-morning-ticket {
+  border-radius: 8px;
+  position: relative;
+}
+
+.dqa-morning-ticket::after {
+  background: linear-gradient(180deg, rgba(215, 168, 66, 0.18), rgba(95, 143, 104, 0.18));
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 6px;
+}
+
+.dqa-ticket-row.is-primary-tip {
+  background:
+    linear-gradient(90deg, rgba(239, 247, 238, 0.96), rgba(255, 248, 226, 0.96)),
+    repeating-linear-gradient(180deg, transparent 0 34px, rgba(95, 143, 104, 0.1) 34px 35px);
+}
+
+.dqa-safety-note,
+.dqa-care-note,
+.dqa-qa-history,
+.dqa-small-model-note {
+  border-radius: 8px;
+}
+
+@media (max-width: 900px) {
+  .dc-workspace-grid {
+    margin-top: -14px;
+  }
+
+  .dc-hero-ribbon {
+    justify-self: stretch;
+  }
+
+  .dc-stage .dc-dream-text textarea {
+    min-height: 320px !important;
+  }
+
+  .dqa-tip-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .dqa-ticket-stamp {
+    justify-self: start;
+    transform: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .dc-hero {
+    min-height: 430px;
+  }
+
+  .dc-hero-ribbon {
+    align-items: flex-start;
+    display: grid;
+  }
+
+  .dc-stage .dc-dream-text textarea {
+    padding-left: 58px !important;
+  }
+
+  .dc-intake-rail div {
+    grid-template-columns: 1fr;
+  }
+
+  .dc-question-card::before {
+    left: 24px;
+    transform: rotate(-2deg);
+  }
+}
+"""
+
 CSS += """
 .dc-hero {
   align-content: end;

tests/test_render.py

@@ -99,6 +99,8 @@ def test_today_tip_card_prioritizes_tip_before_interpretation():
     assert "Morning Ticket" in html
     assert "Because your dream kept returning to" in html
     assert "dqa-anchor-chips" in html
+    assert "dqa-ticket-stamp" in html
+    assert "Take one note today" in html
     assert "floor 14" in html
     assert "How this was made small" in html
 

tests/test_ui_actions.py

@@ -103,6 +103,8 @@ def test_hero_subtitle_explains_app_instead_of_legacy_name():
     assert "The Morning Question Desk" in hero_html
     assert "What did the dream leave you asking?" in hero_html
     assert "grounded Morning Ticket" in hero_html
+    assert "dc-hero-ribbon" in hero_html
+    assert "Text + image + voice intake" in hero_html
     assert "Dream Customs" not in hero_html
 
 
@@ -115,6 +117,23 @@ def test_composer_has_three_real_demo_chips():
     assert "_example_floor14" in source
     assert "_example_melting" in source
     assert ".dc-demo-chip-row" in CSS
+    assert "Dream slips" in ui_app._demo_chip_intro_html("en")
+    assert "梦境纸片" in ui_app._demo_chip_intro_html("zh")
+
+
+def test_side_panel_frames_the_morning_desk_rule():
+    html = ui_app._side_stamp_html("en")
+    zh_html = ui_app._side_stamp_html("zh")
+
+    assert "dc-side-stack" in html
+    assert "dc-desk-rule" in html
+    assert "Do not solve the whole dream." in html
+    assert "dc-intake-rail" in html
+    assert "Text" in html
+    assert "Image" in html
+    assert "Voice" in html
+    assert "清晨桌面规则" in zh_html
+    assert "文字" in zh_html
 
 
 def test_side_panel_dropdown_hover_stays_readable():
@@ -183,6 +202,8 @@ def test_question_stage_shows_anchor_chips_before_the_question():
     )
 
     assert "dc-question-anchor-strip" in html
+    assert "dc-question-anchor-label" in html
+    assert "Sticky details already on the desk" in html
     assert html.index("elevator") < html.index("Morning Question Desk")
     assert "floor 14" in html
     assert "melting button" in html