@linxin666/dsh-remote-web-ui 0.1.17 → 0.1.19

package/lib/types/mobile/mobile-styles.d.ts

@@ -2,5 +2,5 @@
  * Mobile surface stylesheet, shipped as a string and injected at boot (the
  * standalone page has no CSS-module pipeline).
  */
-export declare const mobileCss = "/* Mobile surface chrome: standalone stylesheet (no main-UI design tokens \u2014\n   this page boots without the shell). Light-first palette; the dark palette\n   applies only when the header toggle sets [data-theme='dark']. */\n\n:root {\n  --m-bg: #f3f5f9;\n  --m-bg-raised: #ffffff;\n  --m-bg-input: #ffffff;\n  --m-border: #dfe4ec;\n  --m-text: #1c2333;\n  --m-text-secondary: #4d5768;\n  --m-text-tertiary: #8b95a7;\n  --m-accent: #2f6fed;\n  --m-accent-soft: rgba(47, 111, 237, 0.12);\n  --m-danger: #d64545;\n  --m-success: #1e9e6a;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);\n  --m-shadow-raise: 0 6px 20px rgba(16, 24, 40, 0.1);\n  --m-backdrop: rgba(15, 23, 42, 0.4);\n}\n\n:root[data-theme='dark'] {\n  --m-bg: #111418;\n  --m-bg-raised: #1a1f26;\n  --m-bg-input: #20262e;\n  --m-border: #2b333d;\n  --m-text: #e8eaed;\n  --m-text-secondary: #9aa3ad;\n  --m-text-tertiary: #6b747f;\n  --m-accent: #4f8cff;\n  --m-accent-soft: rgba(79, 140, 255, 0.14);\n  --m-danger: #e5534b;\n  --m-success: #3fb68b;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --m-shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.4);\n  --m-backdrop: rgba(0, 0, 0, 0.55);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;\n  font-size: 15px;\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n}\n\n/* The app fills exactly one viewport: the page itself never scrolls, each\n   view owns its scroll region (chat history, session lists) and the chat\n   composer stays pinned to the bottom of the screen. */\n#root {\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mobile {\n  min-height: 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;\n  background: color-mix(in srgb, var(--m-bg) 88%, transparent);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid var(--m-border);\n}\n\n.mobile-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n.mobile-titleInline {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mobile-back {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 22px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-back:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-back:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle {\n  flex: none;\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-theme-toggle:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-theme-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* \u2500\u2500 lists \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  list-style: none;\n  margin: 0;\n  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);\n}\n\n.mobile-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: calc(100% - 24px);\n  margin: 0 12px 8px;\n  padding: 13px 14px;\n  border: 1px solid var(--m-border);\n  border-radius: 14px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mobile-row:active {\n  background: color-mix(in srgb, var(--m-text) 5%, var(--m-bg-raised));\n}\n\n.mobile-rowMain {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.mobile-rowTitle {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 15px;\n}\n\n.mobile-rowMeta {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.mobile-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 18px;\n}\n\n.mobile-live {\n  margin-left: 6px;\n  color: var(--m-success);\n  font-size: 10px;\n  vertical-align: middle;\n}\n\n/* \u2500\u2500 empty / error states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 32px;\n}\n\n.mobile-muted {\n  margin: 0;\n  color: var(--m-text-tertiary);\n}\n\n.mobile-error {\n  margin: 0;\n  color: var(--m-danger);\n}\n\n.mobile-pad {\n  padding: 8px 16px;\n}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-button {\n  height: 38px;\n  padding: 0 18px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-raised);\n  color: var(--m-text);\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.mobile-button:disabled {\n  opacity: 0.5;\n}\n\n.mobile-block {\n  display: block;\n  width: calc(100% - 32px);\n  margin: 4px 16px;\n}\n\n/* Primary action (create session): accent fill, readable on both themes. */\n.mobile-new {\n  display: block;\n  width: 100%;\n  height: 44px;\n  border: none;\n  border-radius: 12px;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(47, 111, 237, 0.3);\n}\n\n.mobile-new:active {\n  opacity: 0.88;\n}\n\n.mobile-new:disabled {\n  opacity: 0.6;\n}\n\n.mobile-hint {\n  display: block;\n  margin-top: 2px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 chat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.chat-scroll {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.chat-msg {\n  max-width: 88%;\n  padding: 10px 12px;\n  border-radius: var(--m-radius);\n  font-size: 14.5px;\n  line-height: 1.55;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.chat-msg-user {\n  align-self: flex-end;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0 1px 3px rgba(47, 111, 237, 0.28);\n}\n\n.chat-msg-assistant {\n  align-self: flex-start;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom-left-radius: 4px;\n  box-shadow: var(--m-shadow);\n}\n\n.chat-msg-pending .chat-msg-text::after {\n  content: '\u258D';\n  animation: chat-blink 1s steps(2) infinite;\n}\n\n@keyframes chat-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n.chat-msg-failed {\n  border-color: var(--m-danger);\n}\n\n.chat-msg-failtag {\n  display: inline-block;\n  margin-top: 6px;\n  padding: 1px 8px;\n  border: 1px solid var(--m-danger);\n  border-radius: 999px;\n  color: var(--m-danger);\n  font-size: 11px;\n}\n\n.chat-msg-time {\n  display: block;\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 10.5px;\n  line-height: 1.2;\n}\n\n.chat-msg-toggle {\n  display: block;\n  margin-top: 8px;\n  padding: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-accent);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n/* \u2500\u2500 message disclosures (reasoning / tools) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-disclosure {\n  margin-bottom: 8px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--m-bg) 55%, transparent);\n  overflow: hidden;\n}\n\n.chat-disclosure-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 12.5px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.chat-disclosure-caret {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n  line-height: 1;\n  transition: transform 0.15s ease;\n}\n\n.chat-disclosure-open .chat-disclosure-caret {\n  transform: rotate(90deg);\n}\n\n.chat-disclosure-label {\n  flex: none;\n  color: var(--m-text-secondary);\n}\n\n.chat-reasoning[data-pending] .chat-disclosure-label {\n  color: var(--m-accent);\n}\n\n.chat-disclosure-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.chat-disclosure-count {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-disclosure-body {\n  padding: 8px 10px 10px;\n  border-top: 1px dashed var(--m-border);\n  color: var(--m-text-secondary);\n  font-size: 12.5px;\n  line-height: 1.6;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  max-height: 40vh;\n  overflow-y: auto;\n}\n\n.chat-tools-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.chat-tool-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.chat-tool-name {\n  color: var(--m-text);\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.chat-tool-args {\n  margin: 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--m-bg-input);\n  color: var(--m-text-secondary);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n/* \u2500\u2500 composer toolbar (model / permission chips) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-tools {\n  display: flex;\n  gap: 8px;\n  padding: 6px 12px 0;\n}\n\n.chat-chip {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.chat-chip:active {\n  border-color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.chat-chip-label {\n  flex: none;\n  color: var(--m-text-tertiary);\n}\n\n.chat-chip-value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.chat-chip-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n}\n\n/* \u2500\u2500 bottom sheets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  background: var(--m-backdrop);\n  animation: sheet-fade 0.18s ease;\n}\n\n@keyframes sheet-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.sheet {\n  max-height: 74dvh;\n  display: flex;\n  flex-direction: column;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom: none;\n  border-radius: 16px 16px 0 0;\n  box-shadow: var(--m-shadow-raise);\n  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);\n  animation: sheet-up 0.22s ease;\n}\n\n@keyframes sheet-up {\n  from {\n    transform: translateY(40px);\n    opacity: 0.6;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.sheet-handle {\n  flex: none;\n  align-self: center;\n  width: 36px;\n  height: 4px;\n  margin: 8px 0 4px;\n  border-radius: 999px;\n  background: var(--m-border);\n}\n\n.sheet-title {\n  flex: none;\n  padding: 6px 16px 10px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.sheet-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 12px 8px;\n}\n\n.sheet-status {\n  padding: 18px 8px;\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.sheet-status-error {\n  color: var(--m-danger);\n}\n\n.sheet-hint {\n  margin: 0;\n  color: var(--m-text-secondary);\n  font-size: 12px;\n  line-height: 1.5;\n  max-width: 32em;\n}\n\n.sheet-error {\n  margin: 0 0 8px;\n  color: var(--m-danger);\n  font-size: 12.5px;\n}\n\n.sheet-section {\n  margin-bottom: 14px;\n}\n\n.sheet-section-title {\n  padding: 4px 8px 6px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.sheet-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  background: transparent;\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.sheet-option:active {\n  background: var(--m-bg-input);\n}\n\n.sheet-option-selected {\n  border-color: var(--m-accent);\n  background: color-mix(in srgb, var(--m-accent) 12%, transparent);\n}\n\n.sheet-option:disabled {\n  opacity: 0.5;\n}\n\n.sheet-option-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-option-title {\n  font-size: 14px;\n}\n\n.sheet-option-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-option-check {\n  flex: none;\n  color: var(--m-accent);\n  font-size: 15px;\n  font-weight: 700;\n}\n\n.sheet-confirm-desc {\n  margin: 0 4px 14px;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  line-height: 1.6;\n}\n\n.sheet-confirm-actions {\n  display: flex;\n  gap: 10px;\n  padding: 4px;\n}\n\n.sheet-confirm-actions .mobile-button {\n  flex: 1;\n}\n\n.sheet-confirm-danger {\n  flex: 1;\n  height: 38px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-danger);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.sheet-confirm-danger:disabled {\n  opacity: 0.5;\n}\n\n.chat-meta {\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-typing {\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  padding: 4px 2px;\n}\n\n.chat-inputbar {\n  display: flex;\n  gap: 8px;\n  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);\n  border-top: 1px solid var(--m-border);\n  background: var(--m-bg);\n}\n\n.chat-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 40px;\n  max-height: 120px;\n  /* Grow with the content (still bounded by min/max-height); browsers\n     without field-sizing support ignore this line and keep the old size. */\n  field-sizing: content;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 14.5px;\n  resize: none;\n  outline: none;\n}\n\n.chat-input:focus {\n  border-color: var(--m-accent);\n}\n\n.chat-send {\n  flex: none;\n  align-self: flex-end;\n  height: 40px;\n  padding: 0 16px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-accent);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.chat-send:disabled {\n  opacity: 0.5;\n}\n\n.chat-load-older {\n  align-self: center;\n  margin: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  padding: 6px 10px;\n}\n\n/* Touch surfaces have no hover, so keyboard focus must be fully visible.\n   One shared ring keeps every interactive control consistent and readable\n   on both palettes. */\n.mobile-row:focus-visible,\n.mobile-button:focus-visible,\n.mobile-new:focus-visible,\n.chat-send:focus-visible,\n.chat-chip:focus-visible,\n.chat-msg-toggle:focus-visible,\n.chat-load-older:focus-visible,\n.chat-disclosure-head:focus-visible,\n.sheet-option:focus-visible,\n.sheet-confirm-danger:focus-visible,\n.chat-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n/* Accessibility: collapse every interaction/enter animation for\n   reduced-motion users; surface layout itself stays static. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-theme-toggle,\n  .mobile-back,\n  .mobile-row,\n  .mobile-button,\n  .mobile-new,\n  .chat-send,\n  .chat-chip,\n  .chat-msg-toggle,\n  .chat-load-older,\n  .chat-disclosure-head,\n  .chat-disclosure-caret,\n  .chat-msg-pending .chat-msg-text::after,\n  .sheet-backdrop,\n  .sheet,\n  .sheet-option,\n  .sheet-confirm-danger,\n  .chat-input {\n    animation: none;\n    transition: none;\n  }\n}\n";
+export declare const mobileCss = "/* Mobile surface chrome: standalone stylesheet (no main-UI design tokens \u2014\n   this page boots without the shell). Light-first palette; the dark palette\n   applies only when the header toggle sets [data-theme='dark']. */\n\n:root {\n  --m-bg: #f3f5f9;\n  --m-bg-raised: #ffffff;\n  --m-bg-input: #ffffff;\n  --m-border: #dfe4ec;\n  --m-text: #1c2333;\n  --m-text-secondary: #4d5768;\n  --m-text-tertiary: #8b95a7;\n  --m-accent: #2f6fed;\n  --m-accent-soft: rgba(47, 111, 237, 0.12);\n  --m-danger: #d64545;\n  --m-success: #1e9e6a;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);\n  --m-shadow-raise: 0 6px 20px rgba(16, 24, 40, 0.1);\n  --m-backdrop: rgba(15, 23, 42, 0.4);\n}\n\n:root[data-theme='dark'] {\n  --m-bg: #111418;\n  --m-bg-raised: #1a1f26;\n  --m-bg-input: #20262e;\n  --m-border: #2b333d;\n  --m-text: #e8eaed;\n  --m-text-secondary: #9aa3ad;\n  --m-text-tertiary: #6b747f;\n  --m-accent: #4f8cff;\n  --m-accent-soft: rgba(79, 140, 255, 0.14);\n  --m-danger: #e5534b;\n  --m-success: #3fb68b;\n  --m-radius: 12px;\n  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n  --m-shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.4);\n  --m-backdrop: rgba(0, 0, 0, 0.55);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;\n  font-size: 15px;\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n}\n\n/* The app fills exactly one viewport: the page itself never scrolls, each\n   view owns its scroll region (chat history, session lists) and the chat\n   composer stays pinned to the bottom of the screen. */\n#root {\n  height: 100dvh;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mobile {\n  min-height: 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* \u2500\u2500 header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-header {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;\n  background: color-mix(in srgb, var(--m-bg) 88%, transparent);\n  backdrop-filter: blur(10px);\n  border-bottom: 1px solid var(--m-border);\n}\n\n.mobile-title {\n  margin: 0;\n  font-size: 17px;\n  font-weight: 600;\n}\n\n.mobile-titleInline {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mobile-back {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 22px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-back:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-back:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle {\n  flex: none;\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--m-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;\n}\n\n.mobile-theme-toggle:active {\n  background: var(--m-bg-raised);\n}\n\n.mobile-theme-toggle:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n.mobile-theme-toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* \u2500\u2500 lists \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  list-style: none;\n  margin: 0;\n  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);\n}\n\n.mobile-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: calc(100% - 24px);\n  margin: 0 12px 8px;\n  padding: 13px 14px;\n  border: 1px solid var(--m-border);\n  border-radius: 14px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mobile-row:active {\n  background: color-mix(in srgb, var(--m-text) 5%, var(--m-bg-raised));\n}\n\n.mobile-rowMain {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.mobile-rowTitle {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 15px;\n}\n\n.mobile-rowMeta {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.mobile-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 18px;\n}\n\n.mobile-live {\n  margin-left: 6px;\n  color: var(--m-success);\n  font-size: 10px;\n  vertical-align: middle;\n}\n\n/* \u2500\u2500 empty / error states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 32px;\n}\n\n.mobile-muted {\n  margin: 0;\n  color: var(--m-text-tertiary);\n}\n\n.mobile-error {\n  margin: 0;\n  color: var(--m-danger);\n}\n\n.mobile-pad {\n  padding: 8px 16px;\n}\n\n/* \u2500\u2500 buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mobile-button {\n  height: 38px;\n  padding: 0 18px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-raised);\n  color: var(--m-text);\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.mobile-button:disabled {\n  opacity: 0.5;\n}\n\n.mobile-block {\n  display: block;\n  width: calc(100% - 32px);\n  margin: 4px 16px;\n}\n\n/* Primary action (create session): accent fill, readable on both themes. */\n.mobile-new {\n  display: block;\n  width: 100%;\n  height: 44px;\n  border: none;\n  border-radius: 12px;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(47, 111, 237, 0.3);\n}\n\n.mobile-new:active {\n  opacity: 0.88;\n}\n\n.mobile-new:disabled {\n  opacity: 0.6;\n}\n\n.mobile-hint {\n  display: block;\n  margin-top: 2px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n/* \u2500\u2500 chat \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.chat-scroll {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.chat-msg {\n  max-width: 88%;\n  padding: 10px 12px;\n  border-radius: var(--m-radius);\n  font-size: 14.5px;\n  line-height: 1.55;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.chat-msg-user {\n  align-self: flex-end;\n  background: linear-gradient(135deg, var(--m-accent) 0%, #4c8dff 100%);\n  color: #fff;\n  border-bottom-right-radius: 4px;\n  box-shadow: 0 1px 3px rgba(47, 111, 237, 0.28);\n}\n\n.chat-msg-assistant {\n  align-self: flex-start;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom-left-radius: 4px;\n  box-shadow: var(--m-shadow);\n}\n\n.chat-msg-pending .chat-msg-text::after {\n  content: '\u258D';\n  animation: chat-blink 1s steps(2) infinite;\n}\n\n@keyframes chat-blink {\n  50% {\n    opacity: 0;\n  }\n}\n\n.chat-msg-failed {\n  border-color: var(--m-danger);\n}\n\n.chat-msg-failtag {\n  display: inline-block;\n  margin-top: 6px;\n  padding: 1px 8px;\n  border: 1px solid var(--m-danger);\n  border-radius: 999px;\n  color: var(--m-danger);\n  font-size: 11px;\n}\n\n.chat-msg-time {\n  display: block;\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 10.5px;\n  line-height: 1.2;\n}\n\n.chat-msg-toggle {\n  display: block;\n  margin-top: 8px;\n  padding: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-accent);\n  font-size: 13px;\n  cursor: pointer;\n}\n\n/* Assistant markdown content (GFM subset; renderer in markdown.ts). */\n.chat-md {\n  white-space: normal;\n}\n.chat-md-collapsed {\n  max-height: 45vh;\n  overflow: hidden;\n  position: relative;\n}\n.chat-md-collapsed::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 28px;\n  background: linear-gradient(transparent, var(--m-bg-raised));\n  pointer-events: none;\n}\n.chat-md-body p { margin: 0 0 8px; }\n.chat-md-body p:last-child { margin-bottom: 0; }\n.chat-md-body h1, .chat-md-body h2, .chat-md-body h3,\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 {\n  margin: 12px 0 6px;\n  font-weight: 650;\n  line-height: 1.3;\n}\n.chat-md-body h1 { font-size: 1.35em; }\n.chat-md-body h2 { font-size: 1.25em; }\n.chat-md-body h3 { font-size: 1.15em; }\n.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 { font-size: 1.05em; }\n.chat-md-body code {\n  font-family: var(--m-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n  font-size: 0.9em;\n  background: var(--m-accent-soft);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n.chat-md-body pre {\n  margin: 8px 0;\n  padding: 10px;\n  background: #101726;\n  color: #dbe4f5;\n  border-radius: 8px;\n  overflow-x: auto;\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.chat-md-body pre code {\n  background: transparent;\n  padding: 0;\n  color: inherit;\n}\n.chat-md-body ul, .chat-md-body ol { margin: 4px 0 8px; padding-left: 22px; }\n.chat-md-body li { margin: 2px 0; }\n.chat-md-body blockquote {\n  margin: 8px 0;\n  padding: 4px 10px;\n  border-left: 3px solid var(--m-accent);\n  background: var(--m-accent-soft);\n  border-radius: 0 6px 6px 0;\n  color: var(--m-text-secondary);\n}\n.chat-md-body table {\n  margin: 8px 0;\n  border-collapse: collapse;\n  display: block;\n  overflow-x: auto;\n  font-size: 13px;\n}\n.chat-md-body th, .chat-md-body td {\n  border: 1px solid var(--m-border);\n  padding: 4px 8px;\n}\n.chat-md-body th { background: var(--m-accent-soft); }\n.chat-md-body a { color: var(--m-accent); }\n.chat-md-body hr { border: none; border-top: 1px solid var(--m-border); margin: 10px 0; }\n.chat-md-body img { max-width: 100%; border-radius: 8px; }\n\n/* \u2500\u2500 message disclosures (reasoning / tools) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-disclosure {\n  margin-bottom: 8px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--m-bg) 55%, transparent);\n  overflow: hidden;\n}\n\n.chat-disclosure-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--m-text);\n  font-size: 12.5px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.chat-disclosure-caret {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n  line-height: 1;\n  transition: transform 0.15s ease;\n}\n\n.chat-disclosure-open .chat-disclosure-caret {\n  transform: rotate(90deg);\n}\n\n.chat-disclosure-label {\n  flex: none;\n  color: var(--m-text-secondary);\n}\n\n.chat-reasoning[data-pending] .chat-disclosure-label {\n  color: var(--m-accent);\n}\n\n.chat-disclosure-summary {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n}\n\n.chat-disclosure-count {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-disclosure-body {\n  padding: 8px 10px 10px;\n  border-top: 1px dashed var(--m-border);\n  color: var(--m-text-secondary);\n  font-size: 12.5px;\n  line-height: 1.6;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n  max-height: 40vh;\n  overflow-y: auto;\n}\n\n.chat-tools-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.chat-tool-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.chat-tool-name {\n  color: var(--m-text);\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.chat-tool-args {\n  margin: 0;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--m-bg-input);\n  color: var(--m-text-secondary);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  overflow-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n/* \u2500\u2500 composer toolbar (model / permission chips) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-tools {\n  display: flex;\n  gap: 8px;\n  padding: 6px 12px 0;\n}\n\n.chat-chip {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: var(--m-bg-raised);\n  box-shadow: var(--m-shadow);\n  color: var(--m-text);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.chat-chip:active {\n  border-color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.chat-chip-label {\n  flex: none;\n  color: var(--m-text-tertiary);\n}\n\n.chat-chip-value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.chat-chip-chevron {\n  flex: none;\n  color: var(--m-text-tertiary);\n  font-size: 14px;\n}\n\n/* \u2500\u2500 bottom sheets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  background: var(--m-backdrop);\n  animation: sheet-fade 0.18s ease;\n}\n\n@keyframes sheet-fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.sheet {\n  max-height: 74dvh;\n  display: flex;\n  flex-direction: column;\n  background: var(--m-bg-raised);\n  border: 1px solid var(--m-border);\n  border-bottom: none;\n  border-radius: 16px 16px 0 0;\n  box-shadow: var(--m-shadow-raise);\n  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);\n  animation: sheet-up 0.22s ease;\n}\n\n@keyframes sheet-up {\n  from {\n    transform: translateY(40px);\n    opacity: 0.6;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.sheet-handle {\n  flex: none;\n  align-self: center;\n  width: 36px;\n  height: 4px;\n  margin: 8px 0 4px;\n  border-radius: 999px;\n  background: var(--m-border);\n}\n\n.sheet-title {\n  flex: none;\n  padding: 6px 16px 10px;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n.sheet-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 0 12px 8px;\n}\n\n.sheet-status {\n  padding: 18px 8px;\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.sheet-status-error {\n  color: var(--m-danger);\n}\n\n.sheet-hint {\n  margin: 0;\n  color: var(--m-text-secondary);\n  font-size: 12px;\n  line-height: 1.5;\n  max-width: 32em;\n}\n\n.sheet-error {\n  margin: 0 0 8px;\n  color: var(--m-danger);\n  font-size: 12.5px;\n}\n\n.sheet-section {\n  margin-bottom: 14px;\n}\n\n.sheet-section-title {\n  padding: 4px 8px 6px;\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.sheet-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  background: transparent;\n  color: var(--m-text);\n  text-align: left;\n  cursor: pointer;\n}\n\n.sheet-option:active {\n  background: var(--m-bg-input);\n}\n\n.sheet-option-selected {\n  border-color: var(--m-accent);\n  background: color-mix(in srgb, var(--m-accent) 12%, transparent);\n}\n\n.sheet-option:disabled {\n  opacity: 0.5;\n}\n\n.sheet-option-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-option-title {\n  font-size: 14px;\n}\n\n.sheet-option-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-option-check {\n  flex: none;\n  color: var(--m-accent);\n  font-size: 15px;\n  font-weight: 700;\n}\n\n.sheet-confirm-desc {\n  margin: 0 4px 14px;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  line-height: 1.6;\n}\n\n.sheet-confirm-actions {\n  display: flex;\n  gap: 10px;\n  padding: 4px;\n}\n\n.sheet-confirm-actions .mobile-button {\n  flex: 1;\n}\n\n.sheet-confirm-danger {\n  flex: 1;\n  height: 38px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-danger);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.sheet-confirm-danger:disabled {\n  opacity: 0.5;\n}\n\n.chat-meta {\n  margin-top: 4px;\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n}\n\n.chat-typing {\n  color: var(--m-text-tertiary);\n  font-size: 13px;\n  padding: 4px 2px;\n}\n\n.chat-inputbar {\n  display: flex;\n  gap: 8px;\n  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);\n  border-top: 1px solid var(--m-border);\n  background: var(--m-bg);\n}\n\n.chat-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 40px;\n  max-height: 120px;\n  /* Grow with the content (still bounded by min/max-height); browsers\n     without field-sizing support ignore this line and keep the old size. */\n  field-sizing: content;\n  padding: 9px 12px;\n  border: 1px solid var(--m-border);\n  border-radius: 10px;\n  background: var(--m-bg-input);\n  color: var(--m-text);\n  font: inherit;\n  font-size: 14.5px;\n  resize: none;\n  outline: none;\n}\n\n.chat-input:focus {\n  border-color: var(--m-accent);\n}\n\n.chat-send {\n  flex: none;\n  align-self: flex-end;\n  height: 40px;\n  padding: 0 16px;\n  border: none;\n  border-radius: 10px;\n  background: var(--m-accent);\n  color: #fff;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.chat-send:disabled {\n  opacity: 0.5;\n}\n\n.chat-load-older {\n  align-self: center;\n  margin: 4px 0;\n  border: none;\n  background: transparent;\n  color: var(--m-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  padding: 6px 10px;\n}\n\n/* Touch surfaces have no hover, so keyboard focus must be fully visible.\n   One shared ring keeps every interactive control consistent and readable\n   on both palettes. */\n.mobile-row:focus-visible,\n.mobile-button:focus-visible,\n.mobile-new:focus-visible,\n.chat-send:focus-visible,\n.chat-chip:focus-visible,\n.chat-msg-toggle:focus-visible,\n.chat-load-older:focus-visible,\n.chat-disclosure-head:focus-visible,\n.sheet-option:focus-visible,\n.sheet-confirm-danger:focus-visible,\n.sheet-toggle-switch:focus-visible,\n.chat-input:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);\n}\n\n/* \u2500\u2500 chat context usage chip (chat-tools row) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.chat-context {\n  flex: none;\n  align-self: center;\n  padding: 2px 10px;\n  border: 1px solid var(--m-border);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--m-text-tertiary) 10%, transparent);\n  color: var(--m-text-tertiary);\n  font-size: 11px;\n  line-height: 1.6;\n  white-space: nowrap;\n}\n\n.chat-context-warn {\n  border-color: var(--m-danger);\n  background: color-mix(in srgb, var(--m-danger) 14%, transparent);\n  color: var(--m-danger);\n}\n\n/* \u2500\u2500 display sheet toggle rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sheet-toggle-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 8px;\n  border-bottom: 1px solid var(--m-border);\n}\n\n.sheet-toggle-row:last-child {\n  border-bottom: none;\n}\n\n.sheet-toggle-copy {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sheet-toggle-title {\n  font-size: 14px;\n}\n\n.sheet-toggle-desc {\n  color: var(--m-text-tertiary);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.sheet-toggle-switch {\n  position: relative;\n  flex: none;\n  width: 44px;\n  height: 26px;\n  border: none;\n  border-radius: 999px;\n  background: var(--m-border);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.sheet-toggle-switch-on {\n  background: var(--m-accent);\n}\n\n.sheet-toggle-switch-knob {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);\n  transition: transform 0.15s ease;\n}\n\n.sheet-toggle-switch-on .sheet-toggle-switch-knob {\n  transform: translateX(18px);\n}\n\n/* Accessibility: collapse every interaction/enter animation for\n   reduced-motion users; surface layout itself stays static. */\n@media (prefers-reduced-motion: reduce) {\n  .mobile-theme-toggle,\n  .mobile-back,\n  .mobile-row,\n  .mobile-button,\n  .mobile-new,\n  .chat-send,\n  .chat-chip,\n  .chat-msg-toggle,\n  .chat-load-older,\n  .chat-disclosure-head,\n  .chat-disclosure-caret,\n  .chat-msg-pending .chat-msg-text::after,\n  .sheet-backdrop,\n  .sheet,\n  .sheet-option,\n  .sheet-confirm-danger,\n  .sheet-toggle-switch,\n  .sheet-toggle-switch-knob,\n  .chat-input {\n    animation: none;\n    transition: none;\n  }\n}\n";
 //# sourceMappingURL=mobile-styles.d.ts.map

package/lib/types/mobile/mobile-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-styles.d.ts","sourceRoot":"","sources":["../../../src/mobile/mobile-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,SAAS,4nlBAm1BrB,CAAA"}
+{"version":3,"file":"mobile-styles.d.ts","sourceRoot":"","sources":["../../../src/mobile/mobile-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,SAAS,g6tBA0/BrB,CAAA"}

package/lib/types/mobile/mobile-styles.js

@@ -393,6 +393,85 @@ body {
   cursor: pointer;
 }
 
+/* Assistant markdown content (GFM subset; renderer in markdown.ts). */
+.chat-md {
+  white-space: normal;
+}
+.chat-md-collapsed {
+  max-height: 45vh;
+  overflow: hidden;
+  position: relative;
+}
+.chat-md-collapsed::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 28px;
+  background: linear-gradient(transparent, var(--m-bg-raised));
+  pointer-events: none;
+}
+.chat-md-body p { margin: 0 0 8px; }
+.chat-md-body p:last-child { margin-bottom: 0; }
+.chat-md-body h1, .chat-md-body h2, .chat-md-body h3,
+.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 {
+  margin: 12px 0 6px;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.chat-md-body h1 { font-size: 1.35em; }
+.chat-md-body h2 { font-size: 1.25em; }
+.chat-md-body h3 { font-size: 1.15em; }
+.chat-md-body h4, .chat-md-body h5, .chat-md-body h6 { font-size: 1.05em; }
+.chat-md-body code {
+  font-family: var(--m-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.9em;
+  background: var(--m-accent-soft);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+.chat-md-body pre {
+  margin: 8px 0;
+  padding: 10px;
+  background: #101726;
+  color: #dbe4f5;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+.chat-md-body pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+}
+.chat-md-body ul, .chat-md-body ol { margin: 4px 0 8px; padding-left: 22px; }
+.chat-md-body li { margin: 2px 0; }
+.chat-md-body blockquote {
+  margin: 8px 0;
+  padding: 4px 10px;
+  border-left: 3px solid var(--m-accent);
+  background: var(--m-accent-soft);
+  border-radius: 0 6px 6px 0;
+  color: var(--m-text-secondary);
+}
+.chat-md-body table {
+  margin: 8px 0;
+  border-collapse: collapse;
+  display: block;
+  overflow-x: auto;
+  font-size: 13px;
+}
+.chat-md-body th, .chat-md-body td {
+  border: 1px solid var(--m-border);
+  padding: 4px 8px;
+}
+.chat-md-body th { background: var(--m-accent-soft); }
+.chat-md-body a { color: var(--m-accent); }
+.chat-md-body hr { border: none; border-top: 1px solid var(--m-border); margin: 10px 0; }
+.chat-md-body img { max-width: 100%; border-radius: 8px; }
+
 /* ── message disclosures (reasoning / tools) ─────────────────────────── */
 
 .chat-disclosure {
@@ -824,11 +903,97 @@ body {
 .chat-disclosure-head:focus-visible,
 .sheet-option:focus-visible,
 .sheet-confirm-danger:focus-visible,
+.sheet-toggle-switch:focus-visible,
 .chat-input:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--m-bg), 0 0 0 4px var(--m-accent);
 }
 
+/* ── chat context usage chip (chat-tools row) ───────────────────────── */
+
+.chat-context {
+  flex: none;
+  align-self: center;
+  padding: 2px 10px;
+  border: 1px solid var(--m-border);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--m-text-tertiary) 10%, transparent);
+  color: var(--m-text-tertiary);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+
+.chat-context-warn {
+  border-color: var(--m-danger);
+  background: color-mix(in srgb, var(--m-danger) 14%, transparent);
+  color: var(--m-danger);
+}
+
+/* ── display sheet toggle rows ──────────────────────────────────────── */
+
+.sheet-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 8px;
+  border-bottom: 1px solid var(--m-border);
+}
+
+.sheet-toggle-row:last-child {
+  border-bottom: none;
+}
+
+.sheet-toggle-copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sheet-toggle-title {
+  font-size: 14px;
+}
+
+.sheet-toggle-desc {
+  color: var(--m-text-tertiary);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.sheet-toggle-switch {
+  position: relative;
+  flex: none;
+  width: 44px;
+  height: 26px;
+  border: none;
+  border-radius: 999px;
+  background: var(--m-border);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.sheet-toggle-switch-on {
+  background: var(--m-accent);
+}
+
+.sheet-toggle-switch-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
+  transition: transform 0.15s ease;
+}
+
+.sheet-toggle-switch-on .sheet-toggle-switch-knob {
+  transform: translateX(18px);
+}
+
 /* Accessibility: collapse every interaction/enter animation for
    reduced-motion users; surface layout itself stays static. */
 @media (prefers-reduced-motion: reduce) {
@@ -848,6 +1013,8 @@ body {
   .sheet,
   .sheet-option,
   .sheet-confirm-danger,
+  .sheet-toggle-switch,
+  .sheet-toggle-switch-knob,
   .chat-input {
     animation: none;
     transition: none;

package/lib/types/mobile/views/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAIjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAYzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAkT/D"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAKjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAqCzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAgW/D"}

package/lib/types/mobile/views/ChatView.js

@@ -11,11 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - a toolbar above the composer carries the model (+ thinking effort) and
  *   permission pickers, both as bottom sheets.
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { loadHistory, prompt } from "./App.js";
 import { errorText, formatTime, staleHostHint } from "./App.js";
 import { fetchMobilePreferences, models, selectModel, sendCommand } from "../api.js";
 import { foldEvents } from "../messages.js";
+import { renderMarkdown } from "../markdown.js";
 import { ThemeToggle } from "../theme-toggle.js";
 /**
  * Hard cap on live events buffered while the initial history tail page is in
@@ -23,6 +24,31 @@ import { ThemeToggle } from "../theme-toggle.js";
  * history tail re-pull closes the seam.
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500;
+/** localStorage key for the tool-call display toggle (persisted on the /m origin). */
+const SHOW_TOOL_CALLS_KEY = 'dsh.mobile.showToolCalls';
+/** localStorage key for the injected-system-message display toggle. */
+const SHOW_SYSTEM_MESSAGES_KEY = 'dsh.mobile.showSystemMessages';
+/** Read a boolean from localStorage defensively; falls back to the default. */
+function readStoredBoolean(key, fallback) {
+    try {
+        const raw = localStorage.getItem(key);
+        if (raw === null)
+            return fallback;
+        return raw === '1' || raw.toLowerCase() === 'true';
+    }
+    catch {
+        return fallback;
+    }
+}
+/** Persist a boolean toggle; storage failures are ignored (feature stays non-persistent). */
+function writeStoredBoolean(key, value) {
+    try {
+        localStorage.setItem(key, value ? '1' : '0');
+    }
+    catch {
+        /* quota / privacy mode: non-persistent is acceptable */
+    }
+}
 /** Extract the raw event from one history entry (the fold consumes events only). */
 function eventOf(entry) {
     return entry.event;
@@ -101,6 +127,10 @@ export function ChatView({ session, mux, onBack }) {
     const [currentModel, setCurrentModel] = useState(undefined);
     /** Which bottom sheet is open. */
     const [sheet, setSheet] = useState(null);
+    /** Show tool-call disclosures (default on, persisted on the /m origin). */
+    const [showToolCalls, setShowToolCalls] = useState(() => readStoredBoolean(SHOW_TOOL_CALLS_KEY, true));
+    /** Show injected system messages (default off, persisted on the /m origin). */
+    const [showSystemMessages, setShowSystemMessages] = useState(() => readStoredBoolean(SHOW_SYSTEM_MESSAGES_KEY, false));
     /**
      * Composer preference from the plugin's host settings (default true keeps
      * the legacy Enter-to-send behavior until the preference loads).
@@ -292,19 +322,47 @@ export function ChatView({ session, mux, onBack }) {
         ? undefined
         : permissions.options.find(option => option.value === permissions.currentValue)?.name
             ?? displayName(permissions.currentValue);
-    return (_jsxs("div", { className: "chat", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("button", { type: "button", className: "mobile-back", "aria-label": "\u8FD4\u56DE", onClick: onBack, children: "\u2039" }), _jsx("h1", { className: "mobile-title mobile-titleInline", children: session.title }), _jsx(ThemeToggle, {})] }), error !== undefined && _jsx("p", { className: "mobile-error mobile-pad", children: error }), _jsxs("div", { className: "chat-scroll", ref: ref => { scrollRef.current = ref ?? undefined; }, children: [hasOlder && (_jsx("button", { type: "button", className: "chat-load-older", disabled: loading, onClick: () => { void loadOlder(); }, children: loading ? '加载中…' : '加载更早的消息' })), messages.map(message => _jsx(MessageRow, { message: message }, message.id)), loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u52A0\u8F7D\u4E2D\u2026" }), !loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u8FD8\u6CA1\u6709\u6D88\u606F\uFF0C\u53D1\u4E00\u53E5\u8BDD\u5F00\u59CB\u5427" })] }), _jsxs("div", { className: "chat-tools", children: [_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('model'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6A21\u578B" }), _jsx("span", { className: "chat-chip-value", children: modelLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), permissionLabel !== undefined && (_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('permission'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6743\u9650" }), _jsx("span", { className: "chat-chip-value", children: permissionLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }))] }), _jsxs("div", { className: "chat-inputbar", children: [_jsx("textarea", { className: "chat-input", rows: 1, value: input, placeholder: mobileEnterToSend ? '输入消息，Enter 发送…' : '输入消息，Enter 换行，点按钮发送…', enterKeyHint: mobileEnterToSend ? 'send' : 'enter', onChange: (event) => { setInput(event.target.value); }, onKeyDown: (event) => {
+    // Context usage chip: the most recent assistant message carrying both usage and
+    // a positive context window drives the percentage. Scanned from the end so a
+    // newer answer (whose usage may be the last one reported) takes precedence.
+    const contextUsage = useMemo(() => {
+        for (let index = messages.length - 1; index >= 0; index--) {
+            const message = messages[index];
+            const usage = message.usage;
+            if (message.kind !== 'assistant' || usage === undefined)
+                continue;
+            const window = message.contextWindow;
+            if (window === undefined || window <= 0)
+                continue;
+            const tokens = usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0);
+            const pct = Math.round(tokens / window * 100);
+            return { pct };
+        }
+        return undefined;
+    }, [messages]);
+    return (_jsxs("div", { className: "chat", children: [_jsxs("header", { className: "mobile-header", children: [_jsx("button", { type: "button", className: "mobile-back", "aria-label": "\u8FD4\u56DE", onClick: onBack, children: "\u2039" }), _jsx("h1", { className: "mobile-title mobile-titleInline", children: session.title }), _jsx(ThemeToggle, {})] }), error !== undefined && _jsx("p", { className: "mobile-error mobile-pad", children: error }), _jsxs("div", { className: "chat-scroll", ref: ref => { scrollRef.current = ref ?? undefined; }, children: [hasOlder && (_jsx("button", { type: "button", className: "chat-load-older", disabled: loading, onClick: () => { void loadOlder(); }, children: loading ? '加载中…' : '加载更早的消息' })), messages.map(message => (_jsx(MessageRow, { message: message, showToolCalls: showToolCalls, showSystemMessages: showSystemMessages }, message.id))), loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u52A0\u8F7D\u4E2D\u2026" }), !loading && messages.length === 0 && _jsx("p", { className: "chat-typing", children: "\u8FD8\u6CA1\u6709\u6D88\u606F\uFF0C\u53D1\u4E00\u53E5\u8BDD\u5F00\u59CB\u5427" })] }), _jsxs("div", { className: "chat-tools", children: [_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('model'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6A21\u578B" }), _jsx("span", { className: "chat-chip-value", children: modelLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), _jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('display'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u663E\u793A" }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] }), permissionLabel !== undefined && (_jsxs("button", { type: "button", className: "chat-chip", onClick: () => { setSheet('permission'); }, "aria-haspopup": "dialog", children: [_jsx("span", { className: "chat-chip-label", children: "\u6743\u9650" }), _jsx("span", { className: "chat-chip-value", children: permissionLabel }), _jsx("span", { className: "chat-chip-chevron", "aria-hidden": true, children: "\u203A" })] })), contextUsage !== undefined && (_jsxs("div", { className: "chat-context" + (contextUsage.pct >= 80 ? " chat-context-warn" : ""), children: ["\u4E0A\u4E0B\u6587 ", contextUsage.pct, "%"] }))] }), _jsxs("div", { className: "chat-inputbar", children: [_jsx("textarea", { className: "chat-input", rows: 1, value: input, placeholder: mobileEnterToSend ? '输入消息，Enter 发送…' : '输入消息，Enter 换行，点按钮发送…', enterKeyHint: mobileEnterToSend ? 'send' : 'enter', onChange: (event) => { setInput(event.target.value); }, onKeyDown: (event) => {
                             if (mobileEnterToSend && event.key === 'Enter' && !event.shiftKey) {
                                 event.preventDefault();
                                 void send();
                             }
                         } }), _jsx("button", { type: "button", className: "chat-send", disabled: sending || input.trim() === '', onClick: () => { void send(); }, children: sending ? '发送中…' : '发送' })] }), sheet === 'model' && (_jsx(ModelSheet, { sessionId: session.sessionId, current: currentModel, onCurrent: (selection) => { setCurrentModel(selection); }, onClose: () => { setSheet(null); } })), sheet === 'permission' && permissions !== undefined && (_jsx(PermissionSheet, { sessionId: session.sessionId, value: permissions, onChanged: (value) => {
                     setPermissions(previous => previous === undefined ? previous : { ...previous, currentValue: value });
-                }, onClose: () => { setSheet(null); } }))] }));
+                }, onClose: () => { setSheet(null); } })), sheet === 'display' && (_jsx(DisplaySheet, { showToolCalls: showToolCalls, showSystemMessages: showSystemMessages, onToolCalls: (value) => { setShowToolCalls(value); writeStoredBoolean(SHOW_TOOL_CALLS_KEY, value); }, onSystemMessages: (value) => { setShowSystemMessages(value); writeStoredBoolean(SHOW_SYSTEM_MESSAGES_KEY, value); }, onClose: () => { setSheet(null); } }))] }));
 }
 /* ── message rows ─────────────────────────────────────────────────────── */
 /** One rendered message row (user bubble or assistant bubble with folds). */
-function MessageRow({ message }) {
-    return (_jsxs("div", { className: `chat-msg chat-msg-${message.kind}${message.pending === true ? ' chat-msg-pending' : ''}${message.failed === true ? ' chat-msg-failed' : ''}`, children: [message.kind === 'assistant' && message.reasoning !== undefined && message.reasoning !== '' && (_jsx(ReasoningDisclosure, { text: message.reasoning, pending: message.pending === true })), message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (_jsx(ToolDisclosure, { tools: message.tools })), _jsx(CollapsibleText, { text: message.text }), message.failed === true && _jsx("span", { className: "chat-msg-failtag", children: "\u672C\u6B21\u56DE\u590D\u5931\u8D25" }), _jsx("span", { className: "chat-msg-time", children: formatTime(message.time) })] }));
+function MessageRow({ message, showToolCalls, showSystemMessages }) {
+    // Injected user messages (sourceKind defined and not 'user') hide behind
+    // the system-message toggle. Assistant messages are never hidden.
+    if (message.kind === 'user'
+        && message.sourceKind !== undefined
+        && message.sourceKind !== 'user'
+        && !showSystemMessages) {
+        return null;
+    }
+    return (_jsxs("div", { className: `chat-msg chat-msg-${message.kind}${message.pending === true ? ' chat-msg-pending' : ''}${message.failed === true ? ' chat-msg-failed' : ''}`, children: [message.kind === 'assistant' && message.reasoning !== undefined && message.reasoning !== '' && (_jsx(ReasoningDisclosure, { text: message.reasoning, pending: message.pending === true })), showToolCalls && message.kind === 'assistant' && message.tools !== undefined && message.tools.length > 0 && (_jsx(ToolDisclosure, { tools: message.tools })), message.kind === 'assistant'
+                ? _jsx(MarkdownText, { text: message.text })
+                : _jsx(CollapsibleText, { text: message.text }), message.failed === true && _jsx("span", { className: "chat-msg-failtag", children: "\u672C\u6B21\u56DE\u590D\u5931\u8D25" }), _jsx("span", { className: "chat-msg-time", children: formatTime(message.time) })] }));
 }
 /** Collapsed-by-default reasoning disclosure (web-UI Think-row parity). */
 function ReasoningDisclosure({ text, pending }) {
@@ -318,6 +376,20 @@ function ToolDisclosure({ tools }) {
     const names = [...new Set(tools.map(tool => tool.name))].join(' / ');
     return (_jsxs("div", { className: `chat-disclosure chat-tools${open ? ' chat-disclosure-open' : ''}`, children: [_jsxs("button", { type: "button", className: "chat-disclosure-head", "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: [_jsx("span", { className: "chat-disclosure-caret", "aria-hidden": true, children: "\u203A" }), _jsx("span", { className: "chat-disclosure-label", children: "\u5DE5\u5177" }), !open && _jsx("span", { className: "chat-disclosure-summary", children: names }), _jsxs("span", { className: "chat-disclosure-count", children: [tools.length, " \u6B21"] })] }), open && (_jsx("div", { className: "chat-disclosure-body chat-tools-body", children: tools.map((tool, index) => (_jsxs("div", { className: "chat-tool-item", children: [_jsx("span", { className: "chat-tool-name", children: tool.name }), tool.arguments !== undefined && _jsx("pre", { className: "chat-tool-args", children: tool.arguments })] }, `${tool.callId}-${index}`))) }))] }));
 }
+/**
+ * Assistant text rendered as GFM markdown (escape-first, protocol
+ * allow-list — see markdown.ts). Long replies collapse by clamping the
+ * rendered block height instead of slicing the source, so half-cut code
+ * fences or tables never leak malformed markup into the DOM. User
+ * messages stay plain text (CollapsibleText).
+ */
+function MarkdownText({ text }) {
+    const [open, setOpen] = useState(false);
+    const html = useMemo(() => renderMarkdown(text), [text]);
+    const long = text.length > LONG_TEXT_LIMIT;
+    const collapsed = long && !open;
+    return (_jsxs("div", { className: 'chat-msg-text chat-md' + (collapsed ? ' chat-md-collapsed' : ''), children: [_jsx("div", { className: "chat-md-body", dangerouslySetInnerHTML: { __html: html } }), long && (_jsx("button", { type: "button", className: "chat-msg-toggle", onClick: () => { setOpen(value => !value); }, children: open ? '收起' : '展开全文（' + text.length + ' 字）' }))] }));
+}
 /** Long assistant text collapses behind an explicit expand toggle. */
 function CollapsibleText({ text }) {
     const [open, setOpen] = useState(false);
@@ -448,3 +520,7 @@ function PermissionSheet({ sessionId, value, onChanged, onClose }) {
                 return (_jsxs("button", { type: "button", className: `sheet-option${isSelected ? ' sheet-option-selected' : ''}`, disabled: busy, onClick: () => { choose(option.value); }, children: [_jsxs("span", { className: "sheet-option-copy", children: [_jsx("span", { className: "sheet-option-title", children: option.name }), option.description !== undefined && _jsx("span", { className: "sheet-option-desc", children: option.description })] }), isSelected && _jsx("span", { className: "sheet-option-check", "aria-hidden": true, children: "\u221A" })] }, option.value));
             })] }));
 }
+/** The display-options sheet: tool calls and injected system messages toggles. */
+function DisplaySheet({ showToolCalls, showSystemMessages, onToolCalls, onSystemMessages, onClose }) {
+    return (_jsx(Sheet, { title: "\u663E\u793A", onClose: onClose, children: _jsxs("div", { role: "group", "aria-label": "\u663E\u793A\u9009\u9879", children: [_jsxs("div", { className: "sheet-toggle-row", children: [_jsxs("div", { className: "sheet-toggle-copy", children: [_jsx("span", { className: "sheet-toggle-title", children: "\u5DE5\u5177\u8C03\u7528" }), _jsx("span", { className: "sheet-toggle-desc", children: "\u663E\u793A\u52A9\u624B\u4F7F\u7528\u7684\u5DE5\u5177\u8C03\u7528" })] }), _jsx("button", { type: "button", role: "switch", "aria-label": "\u5DE5\u5177\u8C03\u7528", "aria-checked": showToolCalls, className: `sheet-toggle-switch${showToolCalls ? ' sheet-toggle-switch-on' : ''}`, onClick: () => { onToolCalls(!showToolCalls); }, children: _jsx("span", { className: "sheet-toggle-switch-knob", "aria-hidden": true }) })] }), _jsxs("div", { className: "sheet-toggle-row", children: [_jsxs("div", { className: "sheet-toggle-copy", children: [_jsx("span", { className: "sheet-toggle-title", children: "\u7CFB\u7EDF\u63D0\u793A\u8BCD" }), _jsx("span", { className: "sheet-toggle-desc", children: "\u663E\u793A\u6CE8\u5165\u5230\u5BF9\u8BDD\u4E2D\u7684\u7CFB\u7EDF\u6D88\u606F" })] }), _jsx("button", { type: "button", role: "switch", "aria-label": "\u7CFB\u7EDF\u63D0\u793A\u8BCD", "aria-checked": showSystemMessages, className: `sheet-toggle-switch${showSystemMessages ? ' sheet-toggle-switch-on' : ''}`, onClick: () => { onSystemMessages(!showSystemMessages); }, children: _jsx("span", { className: "sheet-toggle-switch-knob", "aria-hidden": true }) })] })] }) }));
+}

package/lib/types/mobile/views/ChatView.test.js

@@ -461,3 +461,108 @@ describe('ChatView scrolling', () => {
         await waitFor(() => { expect(scrollWrites.length).toBe(writesBefore); });
     });
 });
+describe('ChatView display toggles and context usage', () => {
+    /** jsdom in this setup ships a bare localStorage object; install a real fake. */
+    const makeStorage = () => {
+        const map = new Map();
+        return {
+            getItem: (key) => map.get(key) ?? null,
+            setItem: (key, value) => { map.set(key, value); },
+            removeItem: (key) => { map.delete(key); },
+            clear: () => { map.clear(); },
+            key: (index) => [...map.keys()][index] ?? null,
+            get length() { return map.size; },
+        };
+    };
+    /** A user/message whose source.kind is 'plugin' (injected system message). */
+    const systemEvents = () => [
+        makeEntry('user/message', {
+            id: 'u-plugin',
+            role: 'user',
+            content: [{ type: 'text', text: '系统注入消息' }],
+            source: { kind: 'plugin', name: 'react-extension' },
+        }, 0),
+        makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: '普通消息' }] }, 1),
+    ];
+    const toolEvents = () => [
+        makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: '改文件' }] }, 0),
+        makeEntry('assistant/message', {
+            turn: 0,
+            step: 0,
+            message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: '完成' }] },
+        }, 1),
+        makeEntry('tool/call', { turn: 0, step: 0, callId: 'c1', name: 'bash', arguments: '{}' }, 2),
+    ];
+    beforeEach(() => {
+        vi.stubGlobal('localStorage', makeStorage());
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+    it('hides injected user messages by default and reveals them via the display sheet', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(systemEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        // The plugin-injected message is hidden by default; the real user message shows.
+        expect(await screen.findByText('普通消息')).toBeTruthy();
+        expect(screen.queryByText('系统注入消息')).toBeNull();
+        // Open the display sheet and flip the system-message switch on.
+        fireEvent.click(screen.getByRole('button', { name: /显示/ }));
+        const systemSwitch = await screen.findByRole('switch', { name: '系统提示词' });
+        expect(systemSwitch.getAttribute('aria-checked')).toBe('false');
+        fireEvent.click(systemSwitch);
+        expect(await screen.findByText('系统注入消息')).toBeTruthy();
+        // Flip it back off: the injected row disappears again.
+        const systemSwitchAfter = screen.getByRole('switch', { name: '系统提示词' });
+        expect(systemSwitchAfter.getAttribute('aria-checked')).toBe('true');
+        fireEvent.click(systemSwitchAfter);
+        expect(screen.queryByText('系统注入消息')).toBeNull();
+    });
+    it('hides the tool disclosure when the tool-call toggle is off', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(toolEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        // Tool disclosure visible by default.
+        expect(await screen.findByRole('button', { name: /工具/ })).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: /显示/ }));
+        const toolSwitch = await screen.findByRole('switch', { name: '工具调用' });
+        expect(toolSwitch.getAttribute('aria-checked')).toBe('true');
+        fireEvent.click(toolSwitch);
+        // The disclosure is gone while reasoning/text remain.
+        expect(screen.queryByRole('button', { name: /工具/ })).toBeNull();
+        expect(screen.getByText('完成')).toBeTruthy();
+    });
+    it('renders the context usage chip from request/context plus assistant usage', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage([
+            makeEntry('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 100_000 }, 0),
+            makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: 'hi' }] }, 1),
+            makeEntry('assistant/message', {
+                turn: 0,
+                step: 0,
+                message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+                usage: { inputTokens: 30_000, outputTokens: 1_000 },
+            }, 2),
+        ]));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        expect(await screen.findByText('上下文 30%')).toBeTruthy();
+    });
+    it('adds the warn class when context usage is at or above 80%', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage([
+            makeEntry('request/context', { provider: 'fx', model: 'fx-1', contextWindow: 100_000 }, 0),
+            makeEntry('user/message', { id: 'u-1', role: 'user', content: [{ type: 'text', text: 'hi' }] }, 1),
+            makeEntry('assistant/message', {
+                turn: 0,
+                step: 0,
+                message: { id: 'a-1', role: 'assistant', content: [{ type: 'text', text: 'ok' }] },
+                usage: { inputTokens: 80_000, outputTokens: 0 },
+            }, 2),
+        ]));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        const chip = await screen.findByText('上下文 80%');
+        expect(chip.className).toContain('chat-context-warn');
+    });
+    it('renders no context chip when there is no usage/context data', async () => {
+        loadHistoryMock.mockResolvedValue(historyPage(turnEvents()));
+        render(_jsx(ChatView, { session: session, onBack: () => { } }));
+        await screen.findByText('已完成修改');
+        expect(screen.queryByText(/上下文/)).toBeNull();
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Mobile remote control for the dsh web GUI: scan-to-pair QR entry beside the settings button, one-time pairing tokens, live device status, and revocable mobile sessions",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"