dsh-config-manager 0.2.4 → 0.3.0

package/src/client/config-manager.module.css

@@ -1086,6 +1086,11 @@ body {
   overflow-y: auto;
   overscroll-behavior: contain;
   min-height: 0;
+  /* 2026-11-01 视觉 pass：滚动条槽固定 + 末行留 4px 呼吸。
+     此前滚动条出现/消失会让整行宽度跳 5px，末行又紧贴底栏的 1px 横线，
+     读起来像「这一行被界面切断了」。 */
+  scrollbar-gutter: stable;
+  padding-bottom: 4px;
 }
 
 /* 空态 / 加载态：与 .artifactList 同一条契约 —— 同样吃掉剩余高度，
@@ -1183,6 +1188,23 @@ body {
   white-space: nowrap;
 }
 
+/* 行内主操作常态是 ghost（2026-11-01 视觉 pass）：八行八颗实心按钮让 accent 变成壁纸，
+   整屏最亮的元素成了 chrome，主色不再表示「哪一行值得动」。悬停该行或展开该行时才升到
+   primary —— 此刻它确实是这一行要做的事。过渡走 --cm-motion-fast，与全站一致。 */
+.artifactActions .rowPrimary {
+  transition:
+    background var(--cm-motion-fast) ease,
+    border-color var(--cm-motion-fast) ease,
+    color var(--cm-motion-fast) ease;
+}
+
+.artifactRowHead:hover .artifactActions .rowPrimary,
+.artifactRow[data-expanded] .artifactActions .rowPrimary {
+  background: var(--cm-primary-fill);
+  border-color: transparent;
+  color: var(--cm-text-on-accent);
+}
+
 /* 徽章与动作 flex:none：标题先被压缩（ellipsis），不允许把按钮挤成两行 */
 .artifactBadges,
 .artifactActions {
@@ -1360,6 +1382,47 @@ body {
   outline-offset: 2px;
 }
 
+/* 「左标题 · 右开关」行（2026-11-01）。设置类开关的标题就是这一行的名字，
+   开关是这一行的值 —— 控件跟在标题后面读起来是「启用 ☑」，用户得先读半句再找方框，
+   而 564px 画布里每行右侧本来就空着。开关统一贴右：勾选框仍在标签内（点标题也能切），
+   但 InfoHint 不放进 label，否则点 ⓘ 会顺手改掉设置。 */
+.toggleRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--cm-fs-base);
+  color: var(--dsw-alias-label-primary);
+}
+
+.toggleLabel {
+  cursor: pointer;
+}
+
+.toggleInput {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  flex: none;
+  accent-color: var(--cm-brand);
+  cursor: pointer;
+}
+
+.toggleInput:focus-visible {
+  outline: var(--cm-focus-width) solid var(--cm-focus-color);
+  outline-offset: 2px;
+}
+
+/* 小节标题行：标题在左、该节的开关贴右（与 .toggleRow 同一口径）。 */
+.subBlockHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.subBlockHead > .groupLabel {
+  margin-bottom: 0;
+}
+
 /* —— 徽章 —— */
 .badge {
   display: inline-flex;
@@ -2832,6 +2895,19 @@ body {
   margin: 0 0 10px;
 }
 
+/* 平分整行的动作行（2026-11-01 同步页）：两个方向按钮各占一半，右边缘与卡内其余行齐平 ——
+   宽度各随文案时，三个按钮排一行会形成左对齐锯齿，且窄的那个看起来更次要（显得随意）。
+   主次靠 primary 底色表达，不靠宽度。 */
+.actionRow[data-split] {
+  flex-wrap: nowrap;
+}
+
+.actionRow[data-split] > .splitBtn {
+  flex: 1 1 0;
+  min-width: 0;
+  justify-content: center;
+}
+
 
 
 /* 上方有说明文案的操作行（如「通道配置」按钮紧跟在 hint 之后）：
@@ -2892,6 +2968,19 @@ body {
   grid-column: 1 / -1;
 }
 
+/* 市场操作行：标题在左、动作在右，同一行（原为一张只有标题 + 两按钮的卡，
+   右侧永远空着 —— 这张卡没有任何独立内容，改成一行即省掉整块死空间）。 */
+.marketRepoRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.marketRepoRow > .groupLabel {
+  margin-bottom: 0;
+}
+
 /* 筛选区下方的元信息行（分区未知提示 + 条目计数徽章） */
 .marketFilterMeta {
   display: flex;
@@ -3120,6 +3209,56 @@ body {
   flex: 1 1 auto;
   min-height: 0;
   max-height: none;
+  /* 2026-11-01：与首页活动列表同一个毛病 —— 卡片已有外框，滚动区再套一层
+     border + radius 就是双圈；它的 bg-base 又比卡面深一档，整块读作「卡片里挖了个洞」
+     （附带的边框线还让表头看起来像一条深色填充带，app-screens §7.2 明令无填充表头带）。
+     卡内滚动区应当是透明的：卡片面连续，只有滚动条提示「内容还没完」。 */
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  padding-right: 2px;
+}
+
+/* 卡片固定高度（420px）下，除明细表外的子项一律不参与压缩（2026-11-01 实测）：
+   内容一多（比如出现「有目录读不到」的提示行）时，flex 会按比例压扁每个子项，
+   .cellMeta 被压到 4px、文字被 overflow:hidden 裁成半个字 —— 读起来像「这行坏了」。
+   设计意图写在上面的注释②：只有明细表滚动，其余恒在视野内。 */
+.diskUsageCard > * {
+  flex-shrink: 0;
+}
+
+.diskUsageCard > .diskUsageScroll {
+  flex-shrink: 1;
+  min-height: 0;
+}
+
+/* 列宽显式给定（2026-11-01）：table-layout: fixed 下不给宽度时浏览器按首行内容分配，
+   Cleanup policy 只剩 ~118px —— "Auto-removed after 7 days"、"Your data / safety net
+   (never auto-removed)" 全被省略号截掉，而这一列恰好是「这块数据能不能删」的唯一答案。 */
+.diskUsageScroll th:nth-child(2) { width: 78px; }
+.diskUsageScroll th:nth-child(3) { width: 86px; }
+.diskUsageScroll th:nth-child(4) { width: 160px; }
+
+/* 数值两列不需要省略号：内容永远是「4.8 KB」「235 file(s)」这种短串，
+   一旦被 .tableFixed 的 ellipsis 截成 "265.0 …" 就完全读不出量级。 */
+.diskUsageScroll td:nth-child(2),
+.diskUsageScroll td:nth-child(3) {
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/* 策略列允许换行（其余列是短标签，保持单行省略） */
+.diskUsageScroll td:nth-child(4) { white-space: normal; }
+
+/* 第一列也允许换行（2026-11-01）：内容列剩 186px，"Sync config & workbook copies" 这类
+   长名字一律被截成「Sync config & work…」—— 而这一列就是「这是哪块数据」的唯一线索。
+   表格行高由 .tableFixed 的 min-height 兜住，换行后仍是两行可读，不会塌成 4px。 */
+.diskUsageScroll td:nth-child(1) { white-space: normal; }
+
+/* 卡内小节之间留出间隔（2026-11-01）：表格滚动区下方紧贴的「Legacy data」分组标签
+   原本与最后一行数据只差 2px，读起来像表格的又一行数据。 */
+.diskUsageCard .groupLabel {
+  margin-top: 10px;
 }
 
 .activityHeader {
@@ -3138,24 +3277,49 @@ body {
 }
 
 .activityRows {
-  /* v3：卡片刻意吃掉首页剩余高度（.fillCard），列表随之伸展并自身内滚 —— 否则首页底部
-     会留出大片空白（用户真机反馈「太空旷」）。min-height:0 是可收缩的前提：没有它，
-     列表的自动最小尺寸 = 内容高度，卡片会被 30 行撑破而不是滚动。 */
-  flex: 1 1 auto;
+  /* v3 曾让卡片吃掉首页剩余高度（.fillCard）并让列表伸展。2026-11-01 改为限高内滚：
+     撑满那一刻，8 行记录下方会空出约 150px 纯背景，读起来是「还在加载」，而不是
+     「这里本来就这么高」（app-screens §4.2 / §10：空得零散像没做完）。
+     现在卡片高度随内容，行数超过上限时本容器内滚 —— 长列表纪律与 .planScroll 一致。 */
+  max-height: 460px;
   min-height: 0;
   overflow-y: auto;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: var(--cm-r-3);
-  background: var(--dsw-alias-bg-base);
+  /* 2026-11-01 视觉 pass：去掉列表自带的 1px 外框与 bg-base 深底。
+     卡已经是 .card（一层 1px 外框 + 表面色），列表再套一层 = 双圈边框；
+     而 bg-base 比卡片表面深一档，8 行记录下方的空余区被读成「表格还没加载完」
+     （app-screens §4.2：卡内 >40px 的空带读作未完成）。现在列表直接坐在卡片表面上，
+     只有行分隔线划分行。滚动条槽固定，避免滚动条出现时整行宽度跳一下。 */
+  scrollbar-gutter: stable;
+}
+
+/* 列头：12px 灰、句首大写、无底色、无下划线（app-screens §7.2：11 张有表头的表里 0 张有
+   填充带，8 张没有标头下划线）。三列与 .activityRow 同一份 grid 定义，否则列头与数据错位。 */
+.activityHead {
+  display: grid;
+  /* 四列：时间 / 动作 / 详情 / 结果。第二列定宽（96px = 最长 kind 文案 "Manual backup"），
+     列头与行是两个独立的 grid 容器，只有定宽才能让表头压在数据上方对齐。 */
+  grid-template-columns: 72px 96px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 0 10px 6px;
+  font-size: var(--cm-fs-table);
+  line-height: 1.25;
+  color: var(--dsw-alias-label-tertiary);
+  border-bottom: 0.5px solid var(--dsw-alias-border-l1);
 }
 
+.activityHead > :last-child {
+  justify-self: end;
+}
 
 .activityRow {
   display: grid;
-  grid-template-columns: 72px minmax(0, 1fr) auto;
+  grid-template-columns: 72px 96px minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
-  padding: 4px 10px;
+  /* 行高 36 → 40（app-screens §7.1：单行数据行 36-53px，中位 45）；
+     密度三件套同动 —— 只抬行高不抬字号，符合 §10「别只缩字号」的反面。 */
+  padding: 10px 10px;
   border-bottom: 0.5px solid var(--dsw-alias-border-l2);
   font-size: var(--cm-fs-table);
   line-height: 1.5;
@@ -3176,11 +3340,13 @@ body {
 }
 
 .activityKind {
-  flex: none;
+  min-width: 0;
   line-height: 1.5;
   color: var(--dsw-alias-label-tertiary);
   font-size: var(--cm-fs-meta);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .activitySummary {
@@ -3220,9 +3386,44 @@ body {
 }
 
 /* —— 备份位置卡：四列事实网格（标签上、值下，tabular-nums 对齐） —— */
+/* 卡内小节分隔（2026-11-01）：同一张卡里的第二块内容不再套 Card，改用顶线 + 上下 10px。
+   0.5px + border-l2 与 css 里既有的 4 处卡内分节一致（DESIGN.md：行分隔 0.5px、外框 1px）。 */
+/* 同步内容选择行（2026-11-01）：原为页面上独立的一张卡，卡内只有「9 selected + Choose…」，
+   右侧整片留白（app-screens §4.2 卡内死空间）。并入动作卡后一行放下：标题 · 计数 · 按钮 · ⓘ。
+   groupLabel 的 8px 块级下边距在这里归零，行内只靠 gap。 */
+.sectionPickerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.sectionPickerRow > .groupLabel {
+  margin-bottom: 0;
+}
+
+/* 「选择」按钮贴右（2026-11-01 用户要求）：整行读成「左描述 / 右按钮」，
+   与设置页其余行（左文案 + 右控件）同构；此前它紧跟在计数后面，行右半是空的。
+   窄到放不下时随 flex-wrap 掉到下一行，仍然靠右。 */
+.sectionPickerRow > .pickerBtn {
+  margin-left: auto;
+}
+
+.syncSubBlock {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+
 .factGrid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  /* 列数跟内容走（2026-11-01）：原来写死 4 列，而事实行实际只有「上次同步 / 可同步分区」
+     两项 —— 内容只占左边一半，右边是一列永远空着的轨道，整张卡被读成「右边还没加载完」。
+     app-screens §4.2 把「grid 不适配数据造成的死空间」列为最常见的版面失败。
+     auto-fit + 最小列宽让两格平分整行；只剩一格时（无 statusInfo）它独占整行也不会挤成窄条。
+     远端 URL 那格仍是 gridColumn: 1 / -1，跨满全部自动列。 */
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 6px 12px;
 }
 
@@ -3248,18 +3449,49 @@ body {
   text-overflow: ellipsis;
 }
 
+/* 上次同步：从事实格移进徽章行行尾（2026-11-01）。删掉「可同步分区」那格之后，
+   事实格首行只剩一格，右侧留出 ~500px 空带（DESIGN §9 #20 panel-void）。
+   单条时间事实跟在徽章后面读起来是一句话，也省掉一整行高度。 */
+.factInline {
+  font-size: var(--cm-fs-meta);
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+/* 卡标题行：标题在左、单条状态事实贴右（2026-11-01）。564px 画布下徽章行已被三枚徽章
+   占满，那条时间事实只能掉成孤零零的第二行；而标题行右侧一直是空的。 */
+.cardTitleRow {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.cardTitleRow > .groupLabel {
+  margin-bottom: 0;
+}
+
 /* —— 分区构成卡：两列网格行（名称 | 条目数 | 体积） ——
    用 auto-fit，窄容器（弹窗内的分区构成）自动退化为单列，
    宽容器（总览「分区构成」卡 / 导出页「本次将导出」数据块）仍是两列。 */
 .sectionGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  /* 每列至少要装得下「分区名 + 计数 + 大小」三个字段（2026-11-01）：
+     原先 210px 的列在两列布局里只剩 ~107px 给名字，11px 等宽下只放得下 16 个字符 ——
+     "Config Manager settings"、"Agent Instructions" 全被截成前半截，
+     而右半边页面下方空着一大片（app-screens §4.2 的死空间）。
+     260px 起跳后 540px 画布上刚好只排一列，名字完整、计数与大小仍共用同一条右边缘。 */
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 0 24px;
 }
 
 .sectionRow {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 56px;
+  /* 计数列定宽（2026-11-01）：原来是 auto —— 每行按自己的内容算宽，
+     于是 "19 item(s)" 与 "941 item(s)" 的右边缘相差 20px，一列数字看起来
+     像没对齐（app-screens §7.4：一列数字共用一条右边缘）。72px 容得下
+     "941 items" 这种最长形态，zh 侧「941 项」更短。 */
+  grid-template-columns: minmax(0, 1fr) 68px 56px;
   align-items: center;
   gap: 10px;
   padding: 4px 0;
@@ -3272,6 +3504,14 @@ body {
   border-bottom: none;
 }
 
+/* 真·空行（条目与体积都为 0）：降权到 tertiary，但**不隐藏** ——
+   「这个分区存在但没有内容」本身是用户要判断的信息（app-screens §13 零值用灰）。 */
+.sectionRowEmpty .sectionName,
+.sectionRowEmpty .sectionCount,
+.sectionRowEmpty .sectionSize {
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .sectionName {
   min-width: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -4103,6 +4343,7 @@ body {
   flex: none;
   display: inline-flex;
   align-items: center;
+  gap: 4px;
 }
 
 /* 导入日志面板 */

package/src/client/environment/EnvironmentPanel.tsx

@@ -440,37 +440,43 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
       {/* —— 运行状态：当前运行中的 profile + 本插件启动的实例（可打开 / 可停止） —— */}
       <Card className={css.card}>
         <div className={css.groupLabel}>{t('profiles.running.title')}</div>
-        <div className={css.kvRow}>
-          <span className={css.kvKey}>{t('profiles.current')}</span>
-          <span className={css.kvValue}>
-            {state.current === null ? '—' : <span className={css.mono}>{state.current}</span>}
-          </span>
-        </div>
-        {/* 空态只给状态，不解释机制：「启动」按钮就在每行，端口/开浏览器属该按钮的 title */}
+        {/* 2026-11-01：原来「当前：web」一行 + 运行行「web · :3277 · 当前实例」把同一个事实
+            说了两遍，而两行的值起点一个在 110px、一个在 12px（kvKey 88px 只在前者生效），
+            左边缘对不齐 —— app-screens §7.4「一个事实只在一处、一个左边缘」。
+            现在只有一种行：kvKey 列放档案名（与空态那格同宽同起点，两种状态边缘一致），
+            kvValue 列放端口与来源。 */}
         {state.running.length === 0 && (
-          <div className={css.actionRow}>
-            <Badge kind="info">{t('profiles.running.none')}</Badge>
+          <div className={css.kvRow}>
+            <span className={css.kvKey}>{t('profiles.current')}</span>
+            <span className={css.kvValue}>
+              {state.current === null ? '—' : <span className={css.mono}>{state.current}</span>}
+              <Badge kind="info">{t('profiles.running.none')}</Badge>
+            </span>
           </div>
         )}
         {state.running.map((record) => (
-          <div key={record.name} className={css.actionRow}>
+          <div key={record.name} className={css.kvRow}>
+            <span className={css.kvKey + ' ' + css.mono} title={record.name}>{record.name}</span>
             <span className={css.kvValue}>
-              <span className={css.mono}>{record.name}</span>
-              {record.port !== null && <>{' · '}{t('profiles.running.port', { port: record.port })}</>}
-              {' · '}{t(record.current ? 'profiles.running.originCurrent' : record.owned ? 'profiles.running.originOwned' : 'profiles.running.originExternal')}
+              {record.port !== null && <>{t('profiles.running.port', { port: record.port })}{' · '}</>}
+              {t(record.current ? 'profiles.running.originCurrent' : record.owned ? 'profiles.running.originOwned' : 'profiles.running.originExternal')}
             </span>
             {record.url !== null && <Button size="sm" href={record.url}>{t('profiles.running.open')}</Button>}
-            {/* 当前实例不能停自己（进程会死在响应途中）：给禁用按钮 + 说明，而不是藏起来 */}
-            <Button
-              size="sm"
-              variant="ghost"
-              disabled={state.stopping !== null || record.current}
-              title={record.current ? t('profiles.stop.currentHint') : record.owned ? t('profiles.stop.hint') : t('profiles.stop.hintExternal')}
-              loading={state.stopping === record.name}
-              onClick={() => { patch({ stopTargetName: record.name, error: null }) }}
-            >
-              {t('profiles.stop')}
-            </Button>
+            {/* 当前实例不能停自己（进程会死在响应途中）：不渲染按钮，也不给禁用按钮。
+                disabled 的按钮在真实数据里只读作「这里有个坏掉的东西」（app-screens §11）；
+                这一行本来已经写着「当前实例」，缺的不是提示而是控件。 */}
+            {!record.current && (
+              <Button
+                size="sm"
+                variant="ghost"
+                disabled={state.stopping !== null}
+                title={record.owned ? t('profiles.stop.hint') : t('profiles.stop.hintExternal')}
+                loading={state.stopping === record.name}
+                onClick={() => { patch({ stopTargetName: record.name, error: null }) }}
+              >
+                {t('profiles.stop')}
+              </Button>
+            )}
           </div>
         ))}
       </Card>
@@ -493,12 +499,14 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
           )}
         </Banner>
       )}
-      {launch !== null && (
-        <Banner kind={launchState(launch) === 'ready' ? 'ok' : 'warn'}>
+      {/* 启动**就绪**只走 toast（2026-11-01 用户要求）：doLaunch 成功那一刻已经发过
+          「已启动档案 X（端口 N）」，而这条横幅把同一句再说一遍，还占掉一整块绿色面板
+          ——「打开 / 停止」在下面「运行状态」卡里本来就有（record.url 的「打开」按钮），
+          日志路径只在**没就绪**时需要，那时才留在横幅里。 */}
+      {launch !== null && launchState(launch) !== 'ready' && (
+        <Banner kind="warn">
           <div>
-            {launchState(launch) === 'ready'
-              ? t('profiles.launch.started', { name: launch.name, port: launch.port })
-              : t('profiles.launch.pending', { name: launch.name, port: launch.port, seconds: Math.round(DSH_PROFILE_LAUNCH_TIMEOUT_MS / 1000) })}
+            {t('profiles.launch.pending', { name: launch.name, port: launch.port, seconds: Math.round(DSH_PROFILE_LAUNCH_TIMEOUT_MS / 1000) })}
           </div>
           <div className={css.kvRow}>
             <span className={css.kvKey}>{t('profiles.launch.log')}</span>
@@ -508,14 +516,6 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
             <div key={warning} className={css.hint}>{t(launchWarningKey(warning))}</div>
           ))}
           <div className={css.actionRow}>
-            {launch.url !== null && (
-              <>
-                <Button size="sm" variant="primary" href={launch.url}>{t('profiles.launch.open')}</Button>
-                <Button size="sm" onClick={() => { copyText(launch.url ?? '', t, 'profiles.launch.copiedUrl') }}>
-                  {t('profiles.launch.copyUrl')}
-                </Button>
-              </>
-            )}
             <Button size="sm" variant="ghost" onClick={() => { patch({ launchResult: null }) }}>{t('common.close')}</Button>
           </div>
         </Banner>
@@ -610,11 +610,18 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
                       <span className={css.profileRowTitle}>
                         <span className={`${css.mono} ${css.profileRowName}`}>{profile.name}</span>
                         <span className={css.badgeRow}>
-                          {profile.isCurrent && <Badge kind="ok">{t('profiles.current')}</Badge>}
-                          {runningRecord !== undefined && (
-                            <Badge kind="info">
-                              {runningRecord.port !== null ? t('profiles.running.badge', { port: runningRecord.port }) : t('profiles.running.badgePlain')}
-                            </Badge>
+                          {/* 2026-11-01：这两个徽章原来并排写着「Running」与「·3277 running」——
+                              同一个词三格内出现两次，还要额外占 60px 宽（正是把行摘要挤到截断的
+                              一部分）。isCurrent 已经由 ok 徽章说清，第二个徽章只需要回答「在哪个
+                              端口上」，所以文案收成 ':3277'。非当前实例（外部/本插件启动）没有
+                              状态徽章，那时保留 'running' 字样。 */}
+                          {profile.isCurrent
+                            ? <Badge kind="ok">{t('profiles.current')}</Badge>
+                            : runningRecord !== undefined && runningRecord.port === null
+                              ? <Badge kind="info">{t('profiles.running.badgePlain')}</Badge>
+                              : null}
+                          {runningRecord !== undefined && runningRecord.port !== null && (
+                            <Badge kind="info">{t('profiles.running.portBadge', { port: runningRecord.port })}</Badge>
                           )}
                           {/* 残留行必须自报「未完成的副本」——不得伪装成普通「自定义」档案（t50）；非残留行走原形态键 */}
                           <Badge kind={incomplete ? 'warn' : 'info'}>{t(profileShapeLabelKey(profile))}</Badge>
@@ -646,9 +653,11 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
                           )
                           : (
                             <>
+                              {/* 2026-11-01：这里原来还跟着「node_modules present · patch hot reload」
+                                  两段 —— 它们与详情弹窗里的同名徽章重复（EnvironmentPanel 详情区），
+                                  而三颗动作按钮已经把这一行压到尾部截断。行摘要只留三个计数，
+                                  那两段在点开详情时仍然逐字可见。 */}
                               {t('profiles.row.summary', { bundles: facts.bundles, patch: facts.patchEntries, deps: facts.deps })}
-                              {' · '}{facts.hasNodeModules ? t('profiles.nodeModules.yes') : t('profiles.nodeModules.no')}
-                              {' · '}{profile.patchReload === 'startup' ? t('profiles.patchReload.startup') : t('profiles.patchReload.live')}
                               {profile.updatedAtMs !== null && ` · ${t('profiles.updatedAt', { time: formatProfileTime(profile.updatedAtMs) })}`}
                             </>
                           )}
@@ -656,9 +665,10 @@ export function EnvironmentPanel({ api, t, recoveryApi, recoveryT, incidentApi }
                     </button>
                     <span className={css.actionRow} data-inline>
                       {/* cross-F3：残留行不给启动/停止那一格（generic 必然 notLaunchable）；删除恒在 */}
-                      {caps.launchOrStop && rowAction === 'current' && (
-                        <Button size="sm" disabled title={t('profiles.stop.currentHint')}>{t('profiles.current')}</Button>
-                      )}
+                      {/* 2026-11-01：原来 current 这一格放一颗 disabled 的「运行中」按钮 —— 标题旁
+                          已经有 ok 徽章写着同一句话，动作区却因此常年挂着一个按不动的方块。
+                          「当前档案没有启动/停止动作」这件事的正确表达是**没有动作**，
+                          不是一颗永远灰着的按钮。reactor: app-screens §11 disabled ≠ 可用提示。 */}
                       {caps.launchOrStop && rowAction === 'stop' && runningRecord !== undefined && (
                         <Button
                           size="sm"

package/src/client/environment/maintenance/DiskUsageCard.tsx

@@ -224,7 +224,9 @@ export function DiskUsageCard({ api, infoHintLabel, onBackupsChanged }: DiskUsag
                   <span className={css.cellMeta}>
                     {row.unreadable ? t('diskUsage.unreadable') : row.size + ' · ' + row.files}
                   </span>
-                  <span className={css.dim}>{t('diskUsage.policy.protected')}</span>
+                  {/* 行尾的 protected 标签已删（2026-11-01）：本组上方的说明文字就是
+                      「no longer read · never auto-deleted · not part of the total above」，
+                      逐行再贴一遍只会把这一行挤到溢出（实测最后一段跑出右边界）。 */}
                 </div>
               ))}
             </>

package/src/client/export/ExportView.tsx

@@ -381,7 +381,9 @@ export function ExportView({ api, t }: ExportViewProps) {
         >
           {t('export.run')}
         </Button>
-        <Button size="sm" loading={invLoading} disabled={running} title={t('picker.title')} onClick={openPicker}>
+        {/* 不再 size="sm"（2026-11-01）：同一工具栏里 28px 与 24px 混排，右边缘参差、
+            基线也对不齐（app-screens §8「同排控件同高」）。次要性由 ghost 承担，不由高度承担。 */}
+        <Button loading={invLoading} disabled={running} title={t('picker.title')} onClick={openPicker}>
           {invLoading ? null : <PreviewIcon size={13} />} {t('picker.title')}
         </Button>
         {/* 工具栏「模式提示」属「机制怎么工作 + 省事提示」（MOVE 类）：收进 ⓘ，

package/src/client/home/HomePanel.tsx

@@ -24,6 +24,7 @@
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import type { ReactNode } from 'react'
 import type { SnapshotMeta } from '../../core/restore.ts'
+import { midEllipsis } from '../../ui/mid-ellipsis.ts'
 import type { BackupScheduleStatus } from '../../ui/backup-schedule.ts'
 import { backupRunOutcome, type BackupSkipReason } from '../../ui/backup-schedule.ts'
 import type { BackupFileMeta } from '../../sync/backup-files.ts'
@@ -432,7 +433,7 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
       {emptyState ? (
         /* 首用空态：只交代顺序（备份 → 导出 → 导入），动作全交给上方工具栏 ——
            此前这里又放了一遍「立即备份 / 远程同步」，等于同一屏两个入口。 */
-        <Card className={`${css.activityCard} ${css.fillCard}`}>
+        <Card className={css.activityCard}>
           <span className={css.groupLabel}>{t('overview.empty.title')}</span>
           <div className={css.emptySteps}>
             <Stepper
@@ -446,8 +447,11 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
         </Card>
       ) : (
         <>
-          {/* 3. 最近活动表（**首页最后一个数据块**：吃掉剩余高度，列表自身内滚） */}
-          <Card className={`${css.activityCard} ${css.fillCard}`}>
+          {/* 3. 最近活动表（**首页最后一个数据块**）。2026-11-01：不再用 .fillCard 撑满视口 ——
+              8 行记录撑到 400px 后，卡内下方留出约 150px 纯空区，被读成「表格还没加载完」
+              （app-screens §4.2：卡内 >40px 空带读作未完成）。现在卡片高度随内容，
+              行数多时由 .activityRows 的 max-height 内滚；页底留白属于页面层级，读起来是完整的。 */}
+          <Card className={css.activityCard}>
             <div className={css.activityHeader}>
               <span className={css.activityTitle}>{t('overview.activity.title')}</span>
             </div>
@@ -458,6 +462,15 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
               : activity.length === 0
                 ? <div className={css.activityEmpty}>{data.history === null ? t('overview.activity.unavailable') : t('overview.activity.empty')}</div>
                 : (
+                <>
+                {/* 列头：14 行记录只有「时间 / 类型·摘要 / 结果」三列，没有名字时
+                    用户不知道右边那一列的绿点是什么（app-screens §7.2：有表头才读得懂列）。 */}
+                <div className={css.activityHead}>
+                  <span>{t('overview.activity.colTime')}</span>
+                  <span>{t('overview.activity.colEvent')}</span>
+                  <span>{t('overview.activity.colDetail')}</span>
+                  <span>{t('overview.activity.colResult')}</span>
+                </div>
                 <div className={css.activityRows}>
                   {activity.map((item, i) => {
                     const atMs = Date.parse(item.at) || 0
@@ -467,10 +480,16 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
                         <span className={css.activityTime} title={atMs > 0 ? new Date(atMs).toLocaleString() : undefined}>
                           {renderRelTime(atMs, t)}
                         </span>
+                        {/* kind 独立成列（2026-11-01）：原先它挤在摘要行里，「Import · 」的
+                            长前缀把真正的区分信息（文件名尾部时间戳）挤出可视宽度，
+                            中段省略再准也被前缀吃掉。 */}
+                        <span className={css.activityKind} title={kindText}>{kindText}</span>
                         <span className={css.activitySummary}>
-                          <span className={css.activityKind}>{kindText} ·</span>
+                          {/* 中段省略而不是尾部（DESIGN.md §9-5）：摘要里的区分信息在尾部
+                              —— 文件名时间戳后缀、项数 —— 尾部截断会让两条记录看起来一样。
+                              52 是 HomePanel 历史上的取值，换实现不改观感。title 保留全文。 */}
                           <span className={css.activitySummaryText} title={displaySummary(item.summary, t)}>
-                            {displaySummary(item.summary, t)}
+                            {midEllipsis(displaySummary(item.summary, t), 34)}
                           </span>
                           <CopyButton text={item.summary} label={t('overview.activity.copy')} t={t} />
                         </span>
@@ -479,6 +498,7 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
                     )
                   })}
                 </div>
+                </>
               )}
           </Card>
         </>

package/src/client/import/ImportWizardView.tsx

@@ -67,7 +67,6 @@ import css from '../config-manager.module.css'
 export interface ImportWizardViewProps {
   api: ConfigManagerApi
   t: TranslateNS<'config-manager'>
-  uiT?: UiT; onOpenForeignImport?: () => void // 可选：外部来源入口（见 SelectStep.foreignEntry）
 }
 
 /* 兼容性等级 → 字典键的映射统一在 ../common/compat-label.ts（同步确认页共用同一份，
@@ -432,7 +431,7 @@ function ResultStep(props: {
   )
 }
 
-function ImportWizardBody({ api, t, uiT, onOpenForeignImport }: ImportWizardViewProps) {
+function ImportWizardBody({ api, t }: ImportWizardViewProps) {
   const {
     imp,
     wizard,
@@ -511,7 +510,6 @@ function ImportWizardBody({ api, t, uiT, onOpenForeignImport }: ImportWizardView
         onReset={resetWizard}
         apiT={api.t}
         t={t}
-        foreignEntry={uiT !== undefined && onOpenForeignImport !== undefined ? { uiT, onOpen: onOpenForeignImport } : undefined}
       />
     )
   }