dsh-remote-panel 0.1.0 → 0.2.2

package/lib/client.js

@@ -19,6 +19,8 @@ window.__ModuleLoader__.load({
 		const API = '/remote-panel/api'
 		const TOKEN_GLOBAL = '__DSH_REMOTE_PANEL__'
 		const TOKEN_HEADER = 'x-dsh-remote-panel'
+		// HMR 时新模块实例接手旧实例的内容增强（同一页面只允许一个 Observer）
+		const CONTENT_CLEANUP_KEY = '__DSH_REMOTE_PANEL_CONTENT_ENHANCEMENTS__'
 		const stroke = 'var(--dsw-elevation-stroke-color, rgba(128,128,128,.24))'
 
 		const styles = {
@@ -35,6 +37,7 @@ window.__ModuleLoader__.load({
 			title: { fontSize: 14, fontWeight: 600, margin: 0 },
 			muted: { opacity: 0.62, margin: 0 },
 			hint: { fontSize: 11, opacity: 0.5 },
+			link: { color: '#4d7dfe', textDecoration: 'underline', cursor: 'pointer' },
 			row: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' },
 			grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 10 },
 			field: { display: 'flex', flexDirection: 'column', gap: 4 },
@@ -280,7 +283,7 @@ window.__ModuleLoader__.load({
 												jsx(Dot, { ok: check.state === 'ok' }),
 												jsx('span', {
 													style: { ...styles.hint, minWidth: 78, opacity: 0.75 },
-													children: check.id,
+													children: check.label ?? check.id,
 												}),
 												jsx('span', { style: styles.hint, children: check.detail }),
 											],
@@ -409,6 +412,20 @@ window.__ModuleLoader__.load({
 							),
 						),
 					}),
+					jsxs('label', {
+						style: { ...styles.row, marginTop: 8, fontSize: 12 },
+						children: [
+							jsx('input', {
+								type: 'checkbox',
+								checked: form.tls === true,
+								onChange: (event) => setForm((current) => ({ ...current, tls: event.target.checked })),
+							}),
+							jsx('span', {
+								style: styles.muted,
+								children: '启用 HTTPS（Caddy 内部 CA；手机需先装根证书，见「远程访问 → 手机全屏」里的下载链接）',
+							}),
+						],
+					}),
 					jsxs('div', {
 						style: styles.row,
 						children: [
@@ -524,7 +541,7 @@ window.__ModuleLoader__.load({
 
 		// ---------------------------------------------------------------- 第二幕
 
-		function StatusCard({ state, version, onRedeploy }) {
+		function StatusCard({ state, version, scheme, onRedeploy }) {
 			const [probe, setProbe] = useState(null)
 			const [rejects, setRejects] = useState([])
 			const [busy, setBusy] = useState(false)
@@ -545,11 +562,16 @@ window.__ModuleLoader__.load({
 				refresh()
 			}, [refresh])
 
+			const cert = probe?.cert
+			const certHours = typeof cert?.hoursLeft === 'number' ? Math.round(cert.hoursLeft * 10) / 10 : null
 			const lights = [
 				['EasyTier', probe?.easytier],
 				['Caddy', probe?.caddy],
 				['healthz', probe?.healthz],
 				['上游 DSH', probe?.upstream],
+				// 内部 CA 的叶子证书只有 12 小时，续签失败时探活照样握手成功（rejectUnauthorized:false），
+				// 所以单独看它：剩余不足 2 小时或 SAN 不匹配都算红灯
+				[certHours === null ? '证书' : `证书 ${certHours}h`, cert === undefined ? undefined : { ok: cert.ok === true }],
 			]
 
 			return jsxs(Card, {
@@ -559,7 +581,7 @@ window.__ModuleLoader__.load({
 						children: [
 							jsx(Dot, { ok: probe?.ok }),
 							jsx('strong', { style: styles.title, children: '运行状态' }),
-							jsx('span', { style: styles.muted, children: `http://${state.ip}:${state.port}/` }),
+							jsx('span', { style: styles.muted, children: `${scheme ?? (window.location?.protocol ?? 'http:').replace(':', '')}://${state.ip}:${state.port}/` }),
 							jsx('button', {
 								type: 'button',
 								style: styles.button,
@@ -569,6 +591,12 @@ window.__ModuleLoader__.load({
 							}),
 						],
 					}),
+					cert !== undefined && cert.ok !== true
+						? jsx('p', {
+								style: { ...styles.hint, color: '#f2b8b5' },
+								children: `证书告警：${cert.reason ?? '不可用'}${certHours === null ? '' : `（剩余 ${certHours} 小时）`}`,
+							})
+						: null,
 					jsx('div', {
 						style: styles.row,
 						children: lights.map(([label, item]) =>
@@ -651,12 +679,19 @@ window.__ModuleLoader__.load({
 
 		function PairCard() {
 			const [state, setState] = useState({ kind: 'loading' })
+			const [round, setRound] = useState(0)
+
+			// DSH 每次重启都会换令牌；面板开着时自动刷新，避免扫到过期的码
+			useEffect(() => {
+				const timer = setInterval(() => setRound((value) => value + 1), 60000)
+				return () => clearInterval(timer)
+			}, [])
 
 			useEffect(() => {
 				callApi('/pair')
 					.then((data) => setState({ kind: 'ok', data }))
 					.catch((error) => setState({ kind: 'error', message: error.message }))
-			}, [])
+			}, [round])
 
 			const data = state.kind === 'ok' ? state.data : null
 			return jsxs(Card, {
@@ -667,6 +702,7 @@ window.__ModuleLoader__.load({
 							jsx(Dot, { ok: data?.found === true }),
 							jsx('strong', { style: styles.title, children: '手机配对' }),
 							jsx('span', { style: styles.muted, children: state.kind === 'loading' ? '读取中…' : data?.found ? '扫码即可' : '未找到令牌' }),
+							jsx('button', { type: 'button', style: styles.button, onClick: () => setRound((value) => value + 1), children: '刷新' }),
 						],
 					}),
 					state.kind === 'error' && jsx('p', { style: styles.muted, children: state.message }),
@@ -685,20 +721,40 @@ window.__ModuleLoader__.load({
 								jsxs('div', {
 									style: { display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minWidth: 210 },
 									children: [
-										jsx('span', { style: styles.hint, children: '① 门禁（一年）' }),
+										jsx('span', { style: styles.hint, children: '扫这一张即可：先种门禁（一年），再自动跳到令牌' }),
+										// 二维码编的就是这条组合链接，显示同一个值，别再换成别的
 										jsx('code', {
-											style: { ...styles.code, maxHeight: 56 },
-											children: data.urls.gate ?? '（回填码未含口令）',
+											style: { ...styles.code, maxHeight: 72 },
+											children: data.urls.combo ?? data.urls.token,
 										}),
-										jsx('span', { style: styles.hint, children: '② 令牌（30 天 Cookie）' }),
-										jsx('code', { style: { ...styles.code, maxHeight: 56 }, children: data.urls.token }),
 										jsxs('div', {
 											style: styles.row,
 											children: [
-												jsx(CopyButton, { text: data.urls.token, label: '复制令牌链接' }),
-												data.urls.gate
-													? jsx(CopyButton, { text: data.urls.gate, label: '复制门禁链接' })
-													: null,
+												jsx(CopyButton, { text: data.urls.combo ?? data.urls.token, label: '复制配对链接' }),
+											],
+										}),
+										jsx('details', {
+											children: [
+												jsx('summary', { style: styles.hint, children: '手动备用（门禁 / 令牌分开用）' }),
+												jsxs('div', {
+													style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 6 },
+													children: [
+														jsx('code', {
+															style: { ...styles.code, maxHeight: 56 },
+															children: data.urls.gate ?? '（回填码未含口令）',
+														}),
+														jsx('code', { style: { ...styles.code, maxHeight: 56 }, children: data.urls.token }),
+														jsxs('div', {
+															style: styles.row,
+															children: [
+																jsx(CopyButton, { text: data.urls.token, label: '复制令牌链接' }),
+																data.urls.gate
+																	? jsx(CopyButton, { text: data.urls.gate, label: '复制门禁链接' })
+																	: null,
+															],
+														}),
+													],
+												}),
 											],
 										}),
 									],
@@ -837,16 +893,108 @@ window.__ModuleLoader__.load({
 
 		// ---------------------------------------------------------------- 总装
 
+		/** 手机 App 化：全屏按钮 + 添加到主屏幕的指引（iOS 靠 A2HS，Android 靠 PWA/全屏 API）。 */
+		function AppCard() {
+			const [full, setFull] = useState(false)
+			useEffect(() => {
+				const sync = () => setFull(document.fullscreenElement != null)
+				document.addEventListener('fullscreenchange', sync)
+				sync()
+				return () => document.removeEventListener('fullscreenchange', sync)
+			}, [])
+			const standalone =
+				typeof window !== 'undefined' &&
+				(window.matchMedia?.('(display-mode: standalone)')?.matches === true || window.navigator?.standalone === true)
+			const secure = typeof window !== 'undefined' && window.location?.protocol === 'https:'
+			const [ping, setPing] = useState(() => {
+				try {
+					return localStorage.getItem('dsh-remote-panel:attention') !== 'off'
+				} catch {
+					return true
+				}
+			})
+			const togglePing = () => {
+				const next = !ping
+				setPing(next)
+				try {
+					localStorage.setItem('dsh-remote-panel:attention', next ? 'on' : 'off')
+				} catch {
+					/* 隐私模式忽略 */
+				}
+			}
+			const supported = typeof document !== 'undefined' && document.fullscreenEnabled === true
+			const enter = () => {
+				document.documentElement.requestFullscreen?.().catch((error) => {
+					console.warn('[remote-panel] fullscreen failed', error)
+				})
+			}
+			return jsxs(Card, {
+				children: [
+					jsx('div', { style: styles.head, children: jsx('p', { style: styles.title, children: '手机 App' }) }),
+					jsx('p', {
+						style: styles.muted,
+						children: standalone
+							? '✓ 已经在独立窗口里运行，没有地址栏。'
+							: secure
+								? '把它装到主屏幕：装完后从图标打开就是独立窗口，不再有浏览器 UI。'
+								: '当前是 http，装不成独立应用；先用下面的按钮进全屏（或按 README 开启 HTTPS 再装）。',
+					}),
+					standalone || !secure
+						? null
+						: jsx('p', {
+							style: styles.hint,
+							children: 'Android：浏览器菜单 → 安装应用 / 添加到主屏幕；iPhone：分享 → 添加到主屏幕。',
+						}),
+					jsx('p', {
+						style: styles.hint,
+						children: [
+							'第一次装之前要先信任 Caddy 根证书：',
+							jsx('a', {
+								href: '/remote-panel/app/ca.crt',
+								download: 'dsh-caddy-root.crt',
+								style: styles.link,
+								children: ' 下载根证书 ',
+							}),
+							'（Android：设置 → 安全 → 加密与凭据 → 安装证书；iOS：下载后到「设置 → 通用 → 关于本机 → 证书信任设置」打开信任）。',
+						],
+					}),
+					supported && !standalone && !full
+						? jsx('div', {
+							style: styles.row,
+							children: jsx('button', {
+								type: 'button',
+								style: styles.primary,
+								onClick: enter,
+								children: '进入全屏',
+							}),
+						})
+						: null,
+					jsxs('label', {
+						style: { ...styles.row, marginTop: 10, fontSize: 12 },
+						children: [
+							jsx('input', { type: 'checkbox', checked: ping, onChange: togglePing }),
+							jsx('span', {
+								style: styles.muted,
+								children: '任务跑完 / 需要确认时震动并闪标题（页面在后台时）',
+							}),
+						],
+					}),
+				],
+			})
+		}
+
 		function Panel() {
 			const [stage, setStage] = useState('loading')
 			const [state, setState] = useState(null)
 			const [version, setVersion] = useState(null)
+			const [scheme, setScheme] = useState(null)
 			const [showWizard, setShowWizard] = useState(false)
 
 			const load = useCallback(async () => {
 				try {
 					const status = await callApi('/status')
 					setVersion(status.version)
+					setScheme(status.scheme ?? null)
 					const current = (await callApi('/state')).state
 					setState(current)
 					setStage(current === null ? 'fresh' : 'running')
@@ -890,7 +1038,7 @@ window.__ModuleLoader__.load({
 						}),
 						state === null
 							? null
-							: jsx(StatusCard, { state, version, onRedeploy: () => setShowWizard(false) }),
+							: jsx(StatusCard, { state, version, scheme, onRedeploy: () => setShowWizard(false) }),
 						state === null ? null : jsx(PairCard, {}),
 					],
 				})
@@ -900,9 +1048,10 @@ window.__ModuleLoader__.load({
 				style: styles.wrap,
 				children: [
 					jsx(StaleBanner, {}),
-					jsx(StatusCard, { state, version, onRedeploy: () => setShowWizard(true) }),
+					jsx(StatusCard, { state, version, scheme, onRedeploy: () => setShowWizard(true) }),
 					jsx(PairCard, {}),
 					jsx(AccessCard, {}),
+					jsx(AppCard, {}),
 				],
 			})
 		}
@@ -910,6 +1059,7 @@ window.__ModuleLoader__.load({
 		// ---------------------------------------------------------------- 外壳
 
 		const SHELL_CSS = `
+/* 手机外壳：结构（主题无关） */
 @media (max-width: 1023px) {
   [class*="_frame"] { grid-template-columns: minmax(0, 1fr) 0 0 !important; }
   [class*="_sidebarCol"]:has([class*="_collapsed"]) { display: none !important; }
@@ -919,20 +1069,732 @@ window.__ModuleLoader__.load({
     height: auto !important;
     z-index: 900;
     padding-bottom: env(safe-area-inset-bottom, 0px);
-    box-shadow: 0 0 32px rgba(0,0,0,.32);
+    border-radius: 0 16px 16px 0 !important;
+    box-shadow: 0 0 28px rgba(0, 0, 0, .32) !important;
+  }
+  /* 独立窗口里别再有下拉刷新 / 橡皮筋 */
+  body { overscroll-behavior: none; }
+
+  /* 顶栏：52px；刘海屏/独立窗口把状态栏让出来 */
+  .wSkVaW_header {
+    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
+    padding: calc(11px + env(safe-area-inset-top, 0px)) 60px 0 10px !important;
+  }
+  .wSkVaW_headerSessionless { padding-top: calc(11px + env(safe-area-inset-top, 0px)) !important; }
+  .wSkVaW_headerCorner { display: none !important; }
+  /* 手机的「用文件管理器打开」是桌面动作，收掉 */
+  .OMoRSG_split { display: none !important; }
+
+  /* 会话内顶栏瘦身（只影响手机）：
+     原生在标题右边依次摆「子智能体 / 后台任务」动作条和「更多操作（导出会话日志）」。
+     390 下这两组固定件只给标题留下约 104px。这里：
+       1) 「更多操作」整组收掉（桌面仍可导出）；
+       2) 子智能体只留 spinner + 箭头，后台任务只留数字角标；
+       3) 标题允许吃满剩余宽度。
+     ☰ 和右下角的 ＋（新建对话）都不动。 */
+  .wSkVaW_headerUtilities { display: none !important; }
+  .wSkVaW_titleCluster { gap: 4px !important; }
+  .wSkVaW_headerActions { gap: 4px !important; }
+  .wSkVaW_crumbCurrent { max-width: 100% !important; }
+  .ZKlsPq_trigger { padding: 2px !important; gap: 3px !important; }
+  /* 子智能体：只留 spinner + 展开箭头（文字收进 aria-label / 弹层） */
+  .ZKlsPq_trigger > span:not([class]) { display: none !important; }
+  /* 后台任务：数字收成角标（data-rp-jobs 由脚本从原文案里提取） */
+  .QsffPG_trigger { gap: 2px !important; padding: 2px !important; }
+  .QsffPG_count { display: none !important; }
+  .QsffPG_trigger::after {
+    content: attr(data-rp-jobs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 3px;
+    border-radius: 999px;
+    background: rgba(128, 128, 128, .18);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* 工作区 chip 右侧的 ×：回到原生「请选择工作区」空态（不发明新会话状态） */
+  .dsh-mobile-clear-workspace {
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 22px;
+    height: 22px;
+    margin-left: 2px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: rgba(255, 255, 255, .62);
+    cursor: pointer;
+  }
+  .dsh-mobile-clear-workspace:hover { background: rgba(255, 255, 255, .12); color: #fff; }
+  .dsh-mobile-hamburger { display: inline-flex !important; align-items: center; justify-content: center; height: 40px; padding: 0 !important; }
+  .dsh-mobile-newchat,
+  .dsh-mobile-clear-workspace { display: inline-flex !important; }
+  /* 已经回到「请选择工作区」空态时没有可清空的对象 */
+  .dsh-mobile-clear-workspace[data-none="true"] { display: none !important; }
+  /* 抽屉/遮罩打开时顶栏按钮让位 */
+  html.dsh-drawer-open .dsh-mobile-newchat { display: none !important; }
+
+  /* 空态：鱼标按原型放大并竖排到标题上方；标题 22/650，收掉「预览版」角标 */
+  .pXSMma_headline { flex-direction: column !important; align-items: center !important; gap: 14px !important; }
+  .pXSMma_fish, .pXSMma_fishHitbox { width: 112px !important; height: 82.4px !important; }
+  .pXSMma_fish { color: #4d7dfe !important; }
+  .pXSMma_titleGroup { justify-content: center !important; }
+  .pXSMma_titleGroup,
+  .pXSMma_titleGroup > * { font-size: 22px !important; font-weight: 650 !important; letter-spacing: -.02em !important; }
+  .pXSMma_previewBadge { display: none !important; }
+  /* 原生把「问候语 + 输入条」一起居中；手机按原型拆开：
+     问候语留在屏幕中间（原生居中），输入条钉到底部 */
+  .wSkVaW_composerHero .uV2eYG_root {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: max(18px, env(safe-area-inset-bottom, 0px));
+    z-index: 55;
+  }
+
+  /* 工作区 chip：从空态 hero 行提到顶栏中间；只在空态存在，会话里不出现 */
+  .wSkVaW_composerHero .wSkVaW_heroWorkspaceRow {
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 60;
+    top: env(safe-area-inset-top, 0px);
+    height: 52px;
+    margin: 0;
+    padding: 0 64px;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+  .wSkVaW_heroWorkspaceRow > * { pointer-events: auto; }
+  .wSkVaW_heroWorkspaceRow > :not([class*="_workspace"]):not(.dsh-mobile-clear-workspace) { display: none !important; }
+  .pXSMma_workspace {
+    height: 30px !important;
+    padding: 0 10px 0 9px !important;
+    border-radius: 999px !important;
+    gap: 6px !important;
+  }
+  .pXSMma_workspaceLabel { font-size: 13px !important; font-weight: 600 !important; max-width: 160px; }
+  .pXSMma_workspace svg { width: 14px; height: 14px; }
+
+  /* 输入条：一整块圆角卡片。按钮行保留原生全套（+ / 权限 / GenUI / 模型 / 发送） */
+  .uV2eYG_card { border: 0 !important; border-radius: 26px !important; }
+  .uV2eYG_scroll { padding: 10px 14px 0 !important; }
+  .uV2eYG_input, .uV2eYG_placeholder { font-size: 15px !important; }
+  .uV2eYG_row { padding: 6px 10px 10px !important; }
+
+  /* 抽屉：工作区列表置顶，面板入口退到列表下面，删掉品牌行与「新会话」行 */
+  .hHd-Xa_root { display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px) !important; }
+  .hHd-Xa_logoRow, .hHd-Xa_newSession { display: none !important; }
+  .hHd-Xa_regionArea { order: 1; }
+  /* 手机上的 DSH = 对话 + 改动 + 余额：只留「工作区 Git」，其余面板入口全收 */
+  .hHd-Xa_panelList { order: 2; margin: 0 8px 4px !important; }
+  .hHd-Xa_panelRow[aria-label="插件"],
+  .hHd-Xa_panelRow[aria-label="自动化任务"],
+  .hHd-Xa_panelRow[aria-label="命令面板"],
+  .hHd-Xa_panelRow[aria-label="MCP连接器"],
+  .hHd-Xa_panelRow[aria-label="更多"] { display: none !important; }
+  .hHd-Xa_footArea { order: 3; border-top: 0 !important; }
+  .bhn1Oq_sectionHeader { height: 32px !important; }
+  .bhn1Oq_sectionLabel { font-size: 13px !important; }
+  .YDXeBa_projectRow { height: 35px !important; border-radius: 12px !important; margin: 1px 10px !important; }
+  .YDXeBa_sessionRow { height: 42px !important; border-radius: 12px !important; margin: 1px 10px !important; padding: 0 6px 0 10px !important; }
+  .YDXeBa_sessionRow .YDXeBa_title { font-size: 13px !important; }
+
+  /* 搜索展开：抽屉整屏、盖掉面板入口与账号区（原型里搜索是一整页） */
+  html.dsh-search-open [class*="_sidebarCol"]:not(:has([class*="_collapsed"])) {
+    width: 100% !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+  html.dsh-search-open .hHd-Xa_panelList,
+  html.dsh-search-open .hHd-Xa_footArea { display: none !important; }
+  html.dsh-search-open .bhn1Oq_searchExpanded { height: 40px !important; border-radius: 16px !important; }
+  html.dsh-search-open .bhn1Oq_searchInput { height: 38px !important; }
+
+  /* 点遮罩关抽屉：原生窄屏没有这层，补一个（抽屉之下、正文之上） */
+  html.dsh-drawer-open .dsh-mobile-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 899;
+    background: rgba(0, 0, 0, .35);
+  }
+  .dsh-mobile-scrim { display: none; }
+
+  /* 会话内容：代码块 / 表格 / 图片 / 附件在手机上不撑破页面 */
+  .md-code-block { max-width: 100%; }
+  .md-code-block pre,
+  ._markdown_1ypvv_5 pre {
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    /* 原生 11px 在手机上太小；长 token 不再从中间断词，改为块内横向滚动 */
+    font-size: 13px !important;
+    line-height: 20px !important;
+    word-break: normal;
+  }
+  .md-code-block pre code,
+  ._markdown_1ypvv_5 pre code,
+  .md-code-block pre .line {
+    font-size: 13px !important;
+    line-height: 20px !important;
+  }
+  /* 原生 11px 的「复制」太小，手机上换成脚本注入的 28px 按钮 */
+  .md-code-block [class*="_copyButton_"] { display: none !important; }
+  .dsh-code-copy {
+    box-sizing: border-box;
+    min-width: 48px;
+    min-height: 28px;
+    padding: 2px 10px;
+    border: 1px solid rgba(128, 128, 128, .28);
+    border-radius: 8px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 12px;
+    line-height: 20px;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .dsh-code-copy[data-done="true"] { opacity: .6; }
+  .dsh-code-copy--float {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 2;
+    background: var(--dsw-alias-bg-base, rgba(0, 0, 0, .4));
+  }
+  ._tableScroll_1ypvv_192 {
+    max-width: 100%;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+  ._markdown_1ypvv_5 img { max-width: 100% !important; height: auto !important; }
+  /* 附件行：文件卡片 / 图片缩略图都不横向溢出 */
+  .Sixlwa_attachmentRow {
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .Sixlwa_fileCard { flex: 0 1 240px; max-width: 100%; min-width: 0; }
+  .R_Yw7q_gallery { max-width: 100%; min-width: 0; }
+
+}
+
+/* 手机外壳：深色配色（浅色主题保持原生配色，只换骨架） */
+@media (max-width: 1023px) {
+  body[data-ds-dark-theme] { background: #000 !important; }
+  body[data-ds-dark-theme] [class*="_frame"],
+  body[data-ds-dark-theme] [class*="_centerCol"] { background: #000 !important; }
+  body[data-ds-dark-theme] [class*="_sidebarCol"] {
+    background: #000 !important;
+    border: 0 !important;
+    box-shadow: 0 0 32px rgba(0, 0, 0, .45);
+  }
+  body[data-ds-dark-theme] .hHd-Xa_root { background: #000 !important; }
+  body[data-ds-dark-theme] .wSkVaW_header { border-bottom: 0 !important; background: transparent !important; }
+  body[data-ds-dark-theme] .uV2eYG_card {
+    background: #141416 !important;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
+  }
+  body[data-ds-dark-theme] .pXSMma_workspace { background: rgba(255, 255, 255, .07) !important; }
+  /* 列表底部的滚动渐隐原本渐到 #1b1b1c，在纯黑抽屉上会显出一条灰条 */
+  body[data-ds-dark-theme] .bhn1Oq_fade {
+    background-image: linear-gradient(rgba(0, 0, 0, 0), #000) !important;
   }
-  [class*="_centerCol"] { padding-bottom: 56px; box-sizing: border-box; }
-  html.dsh-drawer-open .dsh-mobile-bar { display: none; }
-  .dsh-mobile-hamburger { display: inline-flex !important; align-items: center; }
 }
 
 @media (min-width: 1024px) {
-  .dsh-mobile-bar { display: none !important; }
-  .dsh-mobile-hamburger { display: none !important; }
+  .dsh-mobile-hamburger, .dsh-mobile-newchat, .dsh-mobile-clear-workspace { display: none !important; }
 }
+  /* 断线胶囊：连续两次探活失败才出现，恢复即消失（任何宽度都显示） */
+  .dsh-mobile-offline {
+    position: fixed;
+    top: calc(env(safe-area-inset-top, 0px) + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 80;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 12px;
+    line-height: 1.2;
+    color: #f2b8b5;
+    background: rgba(40, 40, 44, .94);
+    border: 1px solid rgba(242, 184, 181, .25);
+    pointer-events: none;
+  }
+  .dsh-mobile-offline::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #f2b8b5;
+  }
+
+
+  /* 设置弹窗：原生是「左导航 188 + 右内容」，到 390 内容列只剩 154。
+     这里把导航改成顶部一条可横滑的标签条，内容占满宽度；只匹配「有导航列的 dialog」。 */
+  [role="dialog"]:has(> [class*="_nav"]) {
+    flex-direction: column !important;
+    width: calc(100vw - 16px) !important;
+    max-width: none !important;
+    max-height: calc(100dvh - 24px);
+  }
+  [role="dialog"] > [class*="_nav"] {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    height: auto !important;
+    padding: 4px 8px 0 !important;
+    border-right: 0 !important;
+    border-bottom: 1px solid rgba(255, 255, 255, .08);
+  }
+  [role="dialog"] > [class*="_nav"] > [class*="_navTitle"] { display: none !important; }
+  [role="dialog"] > [class*="_nav"] [class*="_navList"] {
+    flex-direction: row !important;
+    height: auto !important;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 2px;
+    padding-bottom: 4px;
+    scrollbar-width: none;
+  }
+  [role="dialog"] > [class*="_nav"] [class*="_navList"]::-webkit-scrollbar { height: 0; }
+  [role="dialog"] > [class*="_nav"] [class*="_navCell"] {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    height: 34px !important;
+    padding: 0 10px !important;
+    white-space: nowrap;
+  }
+  [role="dialog"] > [class*="_content"] {
+    flex: 1 1 auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
+  }
+
+  /* 长会话滚动：离屏的 markdown 块不参与布局/绘制。
+     DSH 不虚拟化消息，几百轮之后节点全在文档里；content-visibility 让浏览器跳过离屏块，
+     滚动时只画视口附近的内容。只在窄屏生效，桌面保持原样。 */
+  @media (max-width: 1023px) {
+    [class*="_markdown"] {
+      content-visibility: auto;
+      contain-intrinsic-size: auto 320px;
+    }
+    [class*="_scrollBody"] {
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
 `
+		/**
+		 * 工作区 chip 右侧的 ×。
+		 * 宿主没有「无工作区草稿」——所以这里只做一件原生已有的事：
+		 * 取消当前选中（uiWorkspace.clearMain），回到「请选择工作区」的空态。
+		 */
+		function installWorkspaceClear(ctx) {
+			if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			const tag = `rp-${Math.random().toString(36).slice(2, 8)}`
+			// 没有选中会话（原生「请选择工作区」空态）时不该出现 ×
+			const isEmpty = () => ctx.get('uiWorkspace')?.mainReference === undefined
+			const ensure = () => {
+				const row = document.querySelector('.wSkVaW_heroWorkspaceRow')
+				if (!row) return
+				const existing = row.querySelector('.dsh-mobile-clear-workspace')
+				if (existing && existing.dataset.rp === tag) {
+					existing.dataset.none = String(isEmpty())
+					return
+				}
+				if (existing) existing.remove()
+				const clear = document.createElement('button')
+				clear.type = 'button'
+				clear.className = 'dsh-mobile-clear-workspace'
+				clear.title = '重新选择工作区'
+				clear.setAttribute('aria-label', '重新选择工作区')
+				clear.dataset.rp = tag
+				clear.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>'
+				clear.addEventListener('click', (event) => {
+					event.preventDefault()
+					event.stopPropagation()
+					try {
+						ctx.get('uiWorkspace')?.clearMain?.()
+					} catch (error) {
+						console.warn('[remote-panel] clear selection failed', error)
+					}
+				})
+				clear.dataset.none = String(isEmpty())
+				row.appendChild(clear)
+			}
+			const observer = new MutationObserver(ensure)
+			observer.observe(document.body, { subtree: true, childList: true })
+			ensure()
+			return () => {
+				observer.disconnect()
+				document.querySelector('.dsh-mobile-clear-workspace')?.remove()
+			}
+		}
+
+		/**
+		 * 手机返回键：抽屉打开时接管，先收起抽屉而不是退出应用。
+		 * 做法是打开时 push 一条带标记的历史，关闭时只回退自己那一条。
+		 */
+		function installBackGesture(layout) {
+			if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			const query = window.matchMedia?.('(max-width: 1023px)')
+			const isOpen = () => document.documentElement.classList.contains('dsh-drawer-open')
+			let pushed = false
+			const onPop = () => {
+				if (isOpen()) layout?.toggleSidebar?.()
+			}
+			const observer = new MutationObserver(() => {
+				if (query && !query.matches) return
+				const open = isOpen()
+				if (open && !pushed) {
+					pushed = true
+					try {
+						history.pushState({ dshDrawer: true }, '')
+					} catch {
+						/* 某些 WebView 禁 pushState，忽略 */
+					}
+				} else if (!open && pushed) {
+					pushed = false
+					if (history.state !== null && history.state.dshDrawer === true) history.back()
+				}
+			})
+			observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+			window.addEventListener('popstate', onPop)
+			return () => {
+				observer.disconnect()
+				window.removeEventListener('popstate', onPop)
+			}
+		}
+
+		/**
+		 * 本机反馈：任务跑完 / 等你确认时，如果页面在后台，闪一下标题 + 震动。
+		 * 不依赖推送服务（v1 不做推送），也不需要服务端配合。
+		 */
+		function installAttention() {
+			if (typeof window === 'undefined' || typeof document === 'undefined') return () => {}
+			const KEY = 'dsh-remote-panel:attention'
+			let timer = 0
+			let flashTimer = 0
+			let flashing = false
+			let wasRunning = false
+			let wasWaiting = false
+
+			const enabled = () => {
+				try {
+					return localStorage.getItem(KEY) !== 'off'
+				} catch {
+					return true
+				}
+			}
+			const stopFlash = () => {
+				if (flashTimer !== 0) {
+					clearInterval(flashTimer)
+					flashTimer = 0
+				}
+				if (flashing) {
+					flashing = false
+					document.title = baseTitle
+				}
+			}
+			let baseTitle = document.title
+			const flash = (label) => {
+				if (typeof document.hidden === 'boolean' && !document.hidden && document.hasFocus?.()) return
+				baseTitle = document.title
+				if (flashing) return
+				flashing = true
+				let on = false
+				flashTimer = setInterval(() => {
+					on = !on
+					document.title = on ? label : baseTitle
+				}, 900)
+				notifyVibrate()
+				window.setTimeout(stopFlash, 20000)
+			}
+			const notifyVibrate = () => {
+				try {
+					navigator.vibrate?.([120, 60, 120])
+				} catch {
+					/* 不支持震动就算了 */
+				}
+			}
+			const isRunning = () => {
+				const button = document.querySelector('.uV2eYG_primary')
+				const aria = button?.getAttribute('aria-label') ?? ''
+				// 空闲时是「发送消息」，生成中会换成「停止…」
+				return aria !== '' && !aria.includes('发送')
+			}
+			const isWaiting = () => {
+				const dialog = document.querySelector('[role="dialog"], [class*="_dialog"], [class*="_modal"]')
+				if (dialog === null) return false
+				return /允许|批准|拒绝|确认执行/.test(dialog.innerText ?? '')
+			}
+			const tick = () => {
+				if (!enabled()) return
+				const running = isRunning()
+				const waiting = isWaiting()
+				if (wasRunning && !running) flash('✔ 已完成 · DSH')
+				if (!wasWaiting && waiting) flash('● 待确认 · DSH')
+				wasRunning = running
+				wasWaiting = waiting
+			}
+			const onVisible = () => {
+				if (!document.hidden) {
+					stopFlash()
+					tick()
+				}
+			}
+			timer = window.setInterval(tick, 1500)
+			document.addEventListener('visibilitychange', onVisible)
+			window.addEventListener('focus', stopFlash)
+			return () => {
+				if (timer !== 0) clearInterval(timer)
+				document.removeEventListener('visibilitychange', onVisible)
+				window.removeEventListener('focus', stopFlash)
+				stopFlash()
+			}
+		}
+
+		/**
+		 * 会话内容增强（只在 ≤1023px 生效）：
+		 *  - 代码块：注入 28px 的「复制」按钮；原生 11px 的复制按钮由 CSS 隐藏；
+		 *  - 后台任务 chip：把「N 个后台任务」收成数字角标（data-rp-jobs + CSS ::after）；
+		 *  - markdown 图片：原生已有点击看原图时让给原生，其余兜底新标签打开原图。
+		 * 所有注入幂等（Observer 反复执行不叠加），返回 cleanup；HMR / 切换会话都安全。
+		 */
+		function installContentEnhancements() {
+			if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			if (document.body === null) return () => {}
+			// HMR：上一个模块实例如果还活着，先让它自清理，避免 Observer / 按钮叠加
+			try {
+				globalThis[CONTENT_CLEANUP_KEY]?.()
+			} catch {
+				/* 旧实例清理失败不阻塞新实例 */
+			}
+			const query = window.matchMedia?.('(max-width: 1023px)')
+			const tag = `rp-${Math.random().toString(36).slice(2, 8)}`
+			const copyTimers = new Set()
+			const zoomImages = new Map()
+
+			const isNarrow = () => (query === undefined ? window.innerWidth < 1024 : query.matches)
+
+			const writeClipboard = (text) => {
+				// 失败静默：不弹窗、不 alert
+				try {
+					if (navigator.clipboard?.writeText) {
+						return navigator.clipboard.writeText(text).then(
+							() => true,
+							() => false,
+						)
+					}
+				} catch {
+					/* 非安全上下文 / 旧 WebView：静默 */
+				}
+				return Promise.resolve(false)
+			}
+
+			const makeCopyButton = (pre, block) => {
+				const button = document.createElement('button')
+				button.type = 'button'
+				button.className = 'dsh-code-copy'
+				button.dataset.rp = tag
+				button.textContent = '复制'
+				button.setAttribute('aria-label', '复制代码')
+				button.addEventListener('click', (event) => {
+					event.preventDefault()
+					event.stopPropagation()
+					// 流式输出时 React 可能换掉 pre：点击时重新解析当前节点
+					const target = pre.isConnected ? pre : block?.querySelector('pre')
+					if (!target) return
+					// 用 textContent：折叠在「思考」里的代码块 innerText 会是空串
+					const text = target.textContent ?? ''
+					writeClipboard(text).then((ok) => {
+						if (!ok) return
+						button.dataset.done = 'true'
+						button.textContent = '已复制'
+						const timer = window.setTimeout(() => {
+							copyTimers.delete(timer)
+							button.dataset.done = 'false'
+							button.textContent = '复制'
+						}, 1200)
+						copyTimers.add(timer)
+					})
+				})
+				return button
+			}
+
+			const enhanceCodeBlocks = () => {
+				for (const block of document.querySelectorAll('.md-code-block')) {
+					const action = block.querySelector('[data-code-block-banner] [class*="_action_"]')
+					const pre = block.querySelector('pre')
+					if (!action || !pre) continue
+					if (action.querySelector('.dsh-code-copy') !== null) continue
+					action.appendChild(makeCopyButton(pre, block))
+				}
+				// 没有 banner 的 pre（少见）：浮在右上角，父节点临时 position: relative
+				for (const pre of document.querySelectorAll('pre')) {
+					if (pre.closest('.md-code-block') !== null) continue
+					const parent = pre.parentElement
+					if (!parent || parent.querySelector('.dsh-code-copy') !== null) continue
+					if (getComputedStyle(parent).position === 'static') {
+						parent.dataset.rpPosition = tag
+						parent.dataset.rpPrevPosition = parent.style.position
+						parent.style.position = 'relative'
+					}
+					const button = makeCopyButton(pre, null)
+					button.classList.add('dsh-code-copy--float')
+					parent.appendChild(button)
+				}
+			}
+
+			const enhanceJobsBadge = () => {
+				for (const trigger of document.querySelectorAll('[class*="QsffPG_trigger"]')) {
+					const label = trigger.getAttribute('aria-label') ?? trigger.textContent ?? ''
+					const value = label.match(/\d+/)?.[0]
+					if (value !== undefined && trigger.dataset.rpJobs !== value) trigger.dataset.rpJobs = value
+				}
+			}
+
+			const enhanceImages = () => {
+				for (const img of document.querySelectorAll('._markdown_1ypvv_5 img')) {
+					if (zoomImages.has(img)) continue
+					// 原生 markdown 图片已经包在 button 里（点击打开内置大图查看），不重复接管
+					if (img.closest('button, a') !== null) continue
+					const handler = () => {
+						const src = img.currentSrc || img.src
+						if (!src || src.startsWith('data:')) return
+						window.open(src, '_blank', 'noopener,noreferrer')
+					}
+					img.addEventListener('click', handler)
+					img.dataset.rpZoom = tag
+					zoomImages.set(img, handler)
+				}
+			}
+
+			const removeOwned = () => {
+				for (const button of document.querySelectorAll(`.dsh-code-copy[data-rp="${tag}"]`)) button.remove()
+				for (const timer of copyTimers) clearTimeout(timer)
+				copyTimers.clear()
+				for (const [img, handler] of zoomImages) {
+					img.removeEventListener('click', handler)
+					delete img.dataset.rpZoom
+				}
+				zoomImages.clear()
+				for (const parent of document.querySelectorAll(`[data-rp-position="${tag}"]`)) {
+					parent.style.position = parent.dataset.rpPrevPosition ?? ''
+					delete parent.dataset.rpPosition
+					delete parent.dataset.rpPrevPosition
+				}
+				for (const trigger of document.querySelectorAll('[data-rp-jobs]')) delete trigger.dataset.rpJobs
+			}
+
+			let scheduled = 0
+			const enhance = () => {
+				if (!isNarrow()) {
+					removeOwned()
+					return
+				}
+				enhanceCodeBlocks()
+				enhanceJobsBadge()
+				enhanceImages()
+			}
+			const observer = new MutationObserver(() => {
+				if (scheduled !== 0) return
+				scheduled = requestAnimationFrame(() => {
+					scheduled = 0
+					enhance()
+				})
+			})
+			observer.observe(document.body, { subtree: true, childList: true })
+			const onQueryChange = () => enhance()
+			query?.addEventListener?.('change', onQueryChange)
+			enhance()
+
+			let disposed = false
+			const cleanup = () => {
+				if (disposed) return
+				disposed = true
+				if (scheduled !== 0) cancelAnimationFrame(scheduled)
+				observer.disconnect()
+				query?.removeEventListener?.('change', onQueryChange)
+				removeOwned()
+				if (globalThis[CONTENT_CLEANUP_KEY] === cleanup) delete globalThis[CONTENT_CLEANUP_KEY]
+			}
+			globalThis[CONTENT_CLEANUP_KEY] = cleanup
+			return cleanup
+		}
+
+		/**
+		 * 断线重连提示：DSH 前端没有「连接断开」的可见反馈，网络一抖页面只是不动了。
+		 * 每 10s 打一次面板自己的 /status，连续两次失败才显示，恢复后自动消失。
+		 */
+		function installConnectivity() {
+			if (typeof window === 'undefined' || typeof fetch !== 'function') return () => {}
+			let failures = 0
+			let timer = 0
+			let banner = null
+			const show = () => {
+				if (banner !== null) return
+				banner = document.createElement('div')
+				banner.className = 'dsh-mobile-offline'
+				banner.setAttribute('role', 'status')
+				banner.textContent = '连接已断开，正在重连…'
+				document.body.appendChild(banner)
+			}
+			const hide = () => {
+				banner?.remove()
+				banner = null
+			}
+			const probe = async () => {
+				try {
+					await callApi('/status')
+					failures = 0
+					hide()
+				} catch {
+					failures += 1
+					if (failures >= 2) show()
+				}
+			}
+			const onOnline = () => {
+				failures = 0
+				probe()
+			}
+			timer = window.setInterval(() => {
+				if (!document.hidden) probe()
+			}, 10000)
+			window.addEventListener('online', onOnline)
+			window.addEventListener('offline', show)
+			probe()
+			return () => {
+				if (timer !== 0) clearInterval(timer)
+				window.removeEventListener('online', onOnline)
+				window.removeEventListener('offline', show)
+				hide()
+			}
+		}
 
-		function installShellCss() {
+		function installShellCss(layout) {
 			if (typeof document === 'undefined') return () => {}
 			const style = document.createElement('style')
 			style.id = 'dsh-remote-panel-shell'
@@ -946,6 +1808,11 @@ window.__ModuleLoader__.load({
 					const column = document.querySelector('[class*="_sidebarCol"]')
 					const open = column !== null && column.querySelector('[class*="_collapsed"]') === null
 					document.documentElement.classList.toggle('dsh-drawer-open', open)
+					// 搜索展开时抽屉整屏（原生只是把输入框在 280px 抽屉里拉长）
+					document.documentElement.classList.toggle(
+						'dsh-search-open',
+						open && document.querySelector('[class*="_searchExpanded"]') !== null,
+					)
 				})
 			}
 			const observer = new MutationObserver(sync)
@@ -958,71 +1825,116 @@ window.__ModuleLoader__.load({
 				}
 			}, 4000)
 
+			// 窄屏：点遮罩关抽屉；选中会话 / 面板后也自动收起（桌面保持原样，不参与）
+			const narrow = window.matchMedia('(max-width: 1023px)')
+			const scrim = document.createElement('div')
+			scrim.className = 'dsh-mobile-scrim'
+			scrim.addEventListener('click', () => {
+				if (!narrow.matches) return
+				try {
+					layout?.toggleSidebar?.()
+				} catch (error) {
+					console.warn('[remote-panel] close drawer failed', error)
+				}
+			})
+			document.body.appendChild(scrim)
+
+			const onDocumentClick = (event) => {
+				if (!narrow.matches) return
+				if (!document.documentElement.classList.contains('dsh-drawer-open')) return
+				const target = event.target
+				if (!(target instanceof Element)) return
+				if (!target.closest('[class*="_sidebarCol"]')) return
+				if (!target.closest('[class*="_sessionRow"], [class*="_panelRow"]')) return
+				setTimeout(() => {
+					try {
+						layout?.toggleSidebar?.()
+					} catch (error) {
+						console.warn('[remote-panel] close drawer failed', error)
+					}
+				}, 0)
+			}
+			document.addEventListener('click', onDocumentClick, true)
+
+			// 抽屉开着时 ESC 收起（宿主窄屏没有这个键位）
+			const onKeyDown = (event) => {
+				if (event.key !== 'Escape' || !narrow.matches) return
+				if (!document.documentElement.classList.contains('dsh-drawer-open')) return
+				event.preventDefault()
+				try {
+					layout?.toggleSidebar?.()
+				} catch (error) {
+					console.warn('[remote-panel] close drawer failed', error)
+				}
+			}
+			document.addEventListener('keydown', onKeyDown)
+
 			return () => {
 				clearTimeout(canary)
 				cancelAnimationFrame(frame)
 				observer.disconnect()
+				document.removeEventListener('click', onDocumentClick, true)
+				document.removeEventListener('keydown', onKeyDown)
+				scrim.remove()
 				style.remove()
-				document.documentElement.classList.remove('dsh-drawer-open')
+				document.documentElement.classList.remove('dsh-drawer-open', 'dsh-search-open')
 			}
 		}
 
-		function MobileBar(props) {
-			const layout = props?.layout
-			const bar = {
-				position: 'fixed',
-				left: 0,
-				right: 0,
-				bottom: 0,
-				height: 56,
-				display: 'flex',
-				alignItems: 'stretch',
-				background: 'color-mix(in srgb, Canvas 92%, transparent)',
-				borderTop: `1px solid ${stroke}`,
-				paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-				zIndex: 2147483000,
-				pointerEvents: 'auto',
-				backdropFilter: 'blur(12px)',
-			}
-			const item = {
-				flex: 1,
-				font: 'inherit',
-				fontSize: 12,
-				border: 0,
-				background: 'transparent',
-				color: 'CanvasText',
-				cursor: 'pointer',
-			}
-			const act = (fn) => () => {
+		function NewChatButton(props) {
+			// 宿主没有顶栏「新建」；这里复用 uiWorkspace 的落点规则：
+			// 当前会话所在工作区 → 最近工作区；都没有就回到空态（由工作区 chip 接手）。
+			const run = () => {
 				try {
-					fn?.()
+					const ui = props?.uiWorkspace
+					if (ui && typeof ui.startSession === 'function') {
+						ui.startSession()
+						return
+					}
+					props?.layout?.selectPanel?.('chat')
 				} catch (error) {
-					console.warn('[remote-panel] shell action failed', error)
+					console.warn('[remote-panel] new chat failed', error)
 				}
 			}
-			return jsxs('div', {
-				className: 'dsh-mobile-bar',
-				style: bar,
-				children: [
-					jsx('button', {
-						type: 'button',
-						style: item,
-						onClick: act(() => layout?.toggleSidebar?.()),
-						children: '会话',
-					}),
-					jsx('button', {
-						type: 'button',
-						style: item,
-						onClick: act(() => layout?.selectPanel?.('chat')),
-						children: '对话',
-					}),
-					jsx('button', {
-						type: 'button',
-						style: item,
-						onClick: act(() => layout?.selectPanel?.('plugins')),
-						children: '插件',
-					}),
-				],
+			return jsx('button', {
+				type: 'button',
+				'aria-label': '新建对话',
+				title: '新建对话',
+				className: 'dsh-mobile-newchat',
+				onClick: run,
+				style: {
+					display: 'none',
+					position: 'fixed',
+					top: 6,
+					right: 10,
+					zIndex: 70,
+					alignItems: 'center',
+					justifyContent: 'center',
+					width: 40,
+					height: 40,
+					padding: 0,
+					border: 0,
+					borderRadius: 12,
+					background: 'transparent',
+					color: 'inherit',
+					cursor: 'pointer',
+					font: 'inherit',
+				},
+				children: jsx('svg', {
+					width: 18,
+					height: 18,
+					viewBox: '0 0 16 16',
+					fill: 'none',
+					'aria-hidden': 'true',
+					children: [
+						jsx('path', {
+							d: 'M2.37091 11.2501C1.58745 9.89288 1.32067 8.29835 1.61969 6.76006C1.91872 5.22177 2.76342 3.8433 3.99826 2.87846C5.2331 1.91362 6.77494 1.42737 8.33988 1.50925C9.90482 1.59113 11.3875 2.23562 12.5149 3.32406C13.6425 4.41269 14.3387 5.87206 14.4754 7.4334C14.612 8.99474 14.18 10.5529 13.2587 11.8209C12.3375 13.0888 10.9891 13.9813 9.46194 14.3337C8.18691 14.628 6.85895 14.5294 5.64989 14.0605C5.1712 13.8748 4.76962 13.4932 4.26534 13.3967C3.67413 13.2835 2.95257 13.5598 2.03794 14.3337',
+							stroke: 'currentColor',
+						}),
+						jsx('path', { d: 'M8 5V11', stroke: 'currentColor' }),
+						jsx('path', { d: 'M5 8H11', stroke: 'currentColor' }),
+					],
+				}),
 			})
 		}
 
@@ -1047,25 +1959,48 @@ window.__ModuleLoader__.load({
 					background: 'transparent',
 					color: 'inherit',
 					cursor: 'pointer',
+					width: 40,
+					height: 40,
 					padding: '0 8px',
 				},
-				children: '☰',
+				children: jsx('svg', {
+					width: 18,
+					height: 12,
+					viewBox: '0 0 18 12',
+					fill: 'none',
+					'aria-hidden': 'true',
+					children: [
+						jsx('path', { d: 'M1 1h16', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' }),
+						jsx('path', { d: 'M1 9h11', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' }),
+					],
+				}),
 			})
 		}
 
 		function apply(ctx) {
-			const cleanup = installShellCss()
+			const cleanup = installShellCss(ctx.layout)
+			const cleanupClear = installWorkspaceClear(ctx)
+			const cleanupBack = installBackGesture(ctx.layout)
+			const cleanupAttention = installAttention()
+			const cleanupContent = installContentEnhancements()
+			const cleanupNet = installConnectivity()
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupClear, 'remote-panel: workspace clear')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupBack, 'remote-panel: back gesture')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupAttention, 'remote-panel: attention')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupContent, 'remote-panel: content enhancements')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupNet, 'remote-panel: connectivity')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanup, 'remote-panel: mobile shell css')
 
 			ctx.slots.inject('shell.overlay', () =>
 				ctx.slots.register(
 					{
 						name: 'shell.overlay',
-						id: 'remote-panel.mobile-bar',
+						id: 'remote-panel.new-chat',
 						order: 100,
-						inject: () => ({ layout: ctx.layout }),
+						// uiWorkspace 只在 web 端由 dsh-client-ui-workspace 提供；拿不到时退回切面板
+						inject: () => ({ layout: ctx.layout, uiWorkspace: ctx.get('uiWorkspace') }),
 					},
-					MobileBar,
+					NewChatButton,
 				),
 			)
 
@@ -1085,7 +2020,7 @@ window.__ModuleLoader__.load({
 		return {
 			inject: ['slots', 'layout'],
 			apply,
-			components: { Panel, DeployWizard, StatusCard, PairCard, AccessCard, StaleBanner },
+			components: { Panel, DeployWizard, StatusCard, PairCard, AccessCard, StaleBanner, AppCard },
 		}
 	},
 })