agentworkshop 0.7.39 → 0.7.40

package/app/pages/dcw/index.vue

@@ -619,25 +619,25 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
           </p>
           <div class="tpl-list">
             <div
-              v-for="t in dcw.templates"
-              :key="t.key"
+              v-for="tpl in dcw.templates"
+              :key="tpl.key"
               class="tpl-row"
-              :title="t.semantics ?? ''"
+              :title="tpl.semantics ?? ''"
             >
-              <b>{{ t.name }}</b>
-              <small class="mono dim">{{ t.code }} · {{ t.min }}~{{ t.max }} {{ t.unit }}</small>
+              <b>{{ tpl.name }}</b>
+              <small class="mono dim">{{ tpl.code }} · {{ tpl.min }}~{{ tpl.max }} {{ tpl.unit }}</small>
               <small
-                v-if="t.semantics"
+                v-if="tpl.semantics"
                 class="tpl-sem"
-              >{{ t.semantics.slice(0, 40) }}{{ t.semantics.length > 40 ? '…' : '' }}</small>
+              >{{ tpl.semantics.slice(0, 40) }}{{ tpl.semantics.length > 40 ? '…' : '' }}</small>
               <span
                 class="tpl-tag"
-                :class="{ builtin: t.builtin }"
-              >{{ t.builtin ? $t('dcw.k3x23c054') : $t('dcw.k3t616a058') }}</span>
+                :class="{ builtin: tpl.builtin }"
+              >{{ tpl.builtin ? $t('dcw.k3x23c054') : $t('dcw.k3t616a058') }}</span>
               <button
-                v-if="!t.builtin"
+                v-if="!tpl.builtin"
                 class="mini-btn danger"
-                @click="doRemoveTemplate(t.key)"
+                @click="doRemoveTemplate(tpl.key)"
               >
                 {{ $t('dcw.k3xakp026') }}
               </button>
@@ -768,7 +768,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 /* 状态徽章 = 玻璃芯片:双主题令牌化,浅色不再发白发黄 */
 .badge {
   padding: 3px 10px;
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--ink-faint);
   background: var(--glass-bg);
   border: 1px solid var(--glass-line);
@@ -848,7 +848,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .line-card.idle .lc-name {
   color: var(--ink-faint);
 }
-.lc-head { display: flex; gap: 8px; align-items: center; }
+.lc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .lc-dot {
   width: 10px;
   height: 10px;
@@ -857,18 +857,19 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
   border-radius: 4px;
   box-shadow: 0 0 10px color-mix(in srgb, var(--lc) 70%, transparent);
 }
+/* 名称不再用 ellipsis 硬裁:窄屏改用换行,长名不消失(审计的 text-clipped 根因) */
 .lc-name {
-  overflow: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
   font-size: 14.5px;
   color: var(--ink);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 .lc-state {
   margin-left: auto;
   flex: none;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 .lc-state.on { color: var(--tone-success-dot); }
@@ -899,14 +900,15 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .lc-act:hover { color: var(--tone-info-dot); background: var(--tone-info-bg); }
 .lc-act.danger:hover { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
 .lc-act:active { transform: scale(0.9); }
-.lc-run { font-size: 10.5px; color: var(--tone-info-dot); }
+.lc-run { font-size: 11.5px; color: var(--tone-info-dot); }
 .lc-run.dim { color: var(--ink-faint); }
 /* 无描述时的兜底提示进一步退后(77 张卡同文反复出现即是噪音;不压到 0.55 以下,保浅色可读) */
 .lc-run.dim.ph { opacity: 0.75; }
 .lc-stats {
   display: flex;
-  gap: 14px;
-  font-size: 10.5px;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 .lc-stats b { color: var(--ink); font-weight: 600; }
@@ -945,7 +947,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
   cursor: pointer;
 }
 .new-card:hover { color: var(--tone-success-dot); border-color: var(--tone-success-dot); transform: none; }
-.new-card small { font-weight: 400; font-size: 10px; color: var(--ink-faint); }
+.new-card small { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
 
 .banner { padding: 8px 12px; font-size: 12px; border-radius: 10px; }
 .banner.bad { color: var(--tone-danger-dot); background: var(--tone-danger-bg); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); }
@@ -1008,7 +1010,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .m-actions { display: flex; gap: 8px; justify-content: flex-end; }
 .m-err { font-size: 11px; color: var(--tone-danger-dot); }
 .dim { color: var(--ink-faint); }
-.sec-label { font-size: 10px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.16em; }
+.sec-label { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.14em; }
 /* 删除确认:摘要行 + 级联勾选 */
 .del-summary { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
 .del-purge { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink); cursor: pointer; }
@@ -1034,7 +1036,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .tpl-tag {
   padding: 1px 8px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 11.5px;
   color: var(--tone-info-dot);
   border: 1px solid color-mix(in srgb, var(--tone-info-dot) 40%, transparent);
   border-radius: 5px;
@@ -1043,4 +1045,62 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .tpl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .tpl-sem { flex: 1; color: var(--ink-faint); }
 textarea.inp { height: auto; padding: 6px 9px; font-size: 11.5px; resize: vertical; }
+
+/* ══ 窄屏自适应层(≤900 手持/平板竖,≤640 单列)════════════════════════════
+   本页 375px 下的三类实测缺陷:可点元素 <40px(每张卡一个主操作)、
+   卡片微标签 10~10.5px、卡片头把长产线名硬裁成省略号。 */
+@media (max-width: 900px) {
+  /* 1. 触摸目标:手持命中区 ≥40px(与 main.css 的 coarse-pointer 地板同值,
+        但那层只认 pointer:coarse,窄视口下也必须成立) */
+  .line-card .pill-btn,
+  .fleet-filter .aw-seg button,
+  .badge.tpl-btn,
+  .m-actions .pill-btn,
+  .m-actions .mini-btn,
+  .tpl-row .mini-btn,
+  .lc-ctl .inp,
+  .fleet-search {
+    min-height: 40px;
+  }
+
+  /* 卡片头的编辑/删除原本只在 hover 才显形 —— 触屏没有 hover,等于功能消失 */
+  .lc-act {
+    width: 40px;
+    height: 40px;
+    font-size: 16px;
+    opacity: 1;
+  }
+
+  .lc-ctl { flex-wrap: wrap; }
+  .lc-ctl .inp { flex: 1 1 150px; }
+  .lc-ctl .pill-btn { flex: 1 1 auto; }
+
+  /* 「产线管理 →」是 <a>:17px 行高在触屏上点不中,给它一条 40px 的整行命中区 */
+  .lc-manage {
+    display: inline-flex;
+    align-items: center;
+    min-height: 40px;
+  }
+
+  /* 弹窗内的可点色块/勾选同样抬到 40 命中 */
+  .color-row { flex-wrap: wrap; }
+  .color-dot { width: 40px; height: 40px; }
+  .del-purge input { width: 20px; height: 20px; }
+  .modal { width: min(440px, calc(100vw - 20px)); padding: 14px; }
+  .modal.wide { width: min(640px, calc(100vw - 20px)); }
+  .tpl-form { grid-template-columns: 1fr; }
+  .tpl-row { flex-wrap: wrap; }
+  .m-actions { flex-wrap: wrap; }
+  .m-actions > * { flex: 1 1 auto; }
+
+  /* 筛选条:分段可横扫,搜索占满整行 */
+  .fleet-filter { gap: 10px; }
+  .fleet-search { flex: 1 1 100%; width: 100%; margin-left: 0; }
+}
+
+/* 2. 窄屏产线网格:显式单列(不再依赖 auto-fill 的隐式收敛) */
+@media (max-width: 640px) {
+  .line-grid { grid-template-columns: 1fr; }
+  .line-card { padding: 12px; }
+}
 </style>

package/app/pages/index.vue

@@ -47,6 +47,21 @@ onMounted(() => {
 // ---------- Harness 可用性(引擎 CLI 环境探测;服务端 30s 探测缓存,随兜底节拍刷新) ----------
 const api = useWorkshopApi()
 const harnesses = ref<HarnessMetaDto[]>([])
+
+/**
+ * 引擎卡片第二行的命令名。
+ * 返回空串表示"这一行没有新信息":标签已经以命令名开头时
+ * (omp(真实 LLM) / omp、opencode / opencode、codex / codex…),
+ * 再写一遍只是把同一件事讲两遍 —— 实测 14 张卡里有 9 张是重复的。
+ * 真正有信息量的只有:不可用状态、in-process、以及与标签不同的真实二进制名。
+ */
+const harnessCmd = (h: HarnessMetaDto): string => {
+  if (h.available === false) return t('home.harness.missing')
+  if (h.inprocess) return 'in-process'
+  const cmd = String(h.command ?? '')
+  if (!cmd) return ''
+  return h.label.startsWith(cmd) ? '' : cmd
+}
 const loadHarnesses = async (): Promise<void> => {
   try {
     const res = await api.listHarnesses()
@@ -427,7 +442,10 @@ const fleetOverflow = computed(() => Math.max(lineCards.value.length - FLEET_CAP
         >
           <span class="h-dot" />
           <span class="h-name">{{ h.label }}</span>
-          <span class="h-cmd mono">{{ h.available === false ? t('home.harness.missing') : (h.inprocess ? 'in-process' : h.command) }}</span>
+          <span
+            v-if="harnessCmd(h)"
+            class="h-cmd mono"
+          >{{ harnessCmd(h) }}</span>
           <span
             v-if="h.available === false && h.homepage"
             class="h-go"
@@ -901,7 +919,23 @@ const fleetOverflow = computed(() => Math.max(lineCards.value.length - FLEET_CAP
 .h-item.off .h-dot { background: var(--tone-danger-dot, #c25a4e); }
 .h-name { font-weight: 600; color: var(--ink); }
 .h-item.off .h-name { color: var(--ink-soft); }
+/* 引擎命令名是"铭牌"级信息:桌面 10px 尚可,手持档必须让位给可读性
+   * (实测 / 在 390 下稳定报出 54 条 <11px,全部来自这里与 .aw-gauge-label) */
 .h-cmd { font-size: 10px; color: var(--ink-faint); }
+
+/* 手持档字号地板:本页所有"铭牌级"微字(引擎命令名、产线状态、产线指标行、
+   跳转箭头)统一抬到 11.5px。它们在桌面是仪器铭牌语言,在手机上就是读不了的小字。 */
+@media (max-width: 900px) {
+  .h-cmd,
+  .h-go,
+  .lc-state,
+  .lc-run small,
+  .lc-meta,
+  .lc-meta span,
+  .fleet-all small {
+    font-size: 11.5px;
+  }
+}
 /* 全部产线入口:虚线幽灵卡,聚合清单外的余量 */
 .fleet-all {
   display: flex;

package/app/pages/logs/index.vue

@@ -243,7 +243,10 @@
               </td>
             </tr>
             <!-- 详情行内展开:紧贴事件行,点击即见(不再沉到表尾) -->
-            <tr v-if="expandedId === row.id">
+            <tr
+              v-if="expandedId === row.id"
+              class="log-detail-row"
+            >
               <td
                 colspan="7"
                 class="detail-td"
@@ -252,7 +255,7 @@
               </td>
             </tr>
           </template>
-          <tr>
+          <tr class="log-empty-row">
             <td
               v-if="opsLog.results.length === 0"
               colspan="7"
@@ -519,7 +522,7 @@ export default { name: 'OpsLogsPage' }
 <style scoped>
 .page { display: flex; flex-direction: column; gap: 12px; }
 .head-actions { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
-.sub { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
+.sub { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
 .live-dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--tone-success-dot);
@@ -531,7 +534,7 @@ export default { name: 'OpsLogsPage' }
   70% { box-shadow: 0 0 0 8px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
 }
-.live-txt { font-size: 11px; color: var(--ink-faint); }
+.live-txt { font-size: 11.5px; color: var(--ink-faint); }
 
 .filter-card {
   display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
@@ -541,10 +544,27 @@ export default { name: 'OpsLogsPage' }
   border-radius: 10px;
   backdrop-filter: var(--aurora-blur) saturate(1.15);
 }
+/* 窄屏:6 个筛选维度从"一行一个"改成两列网格。
+ * 单列时筛选区独占整整一屏,用户要滚过 6 个下拉才看到第一条日志(实测 390)。 */
+@media (max-width: 640px) {
+  .filter-card {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    align-items: end;
+  }
+
+  /* 关键词是"宽输入",跨两列;两个动作按钮也跨两列,各自成行 */
+  .filter-card .flt-grow,
+  .filter-card > button {
+    grid-column: 1 / -1;
+  }
+}
+
 .flt { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .flt-grow { flex: 1 1 180px; }
 .inp-sel {
-  min-width: 0; padding: 6px 9px; font-size: 12.5px; color: var(--ink);
+  min-width: 0; padding: 6px 9px; font-size: 13px; color: var(--ink);
   background: var(--frost-bg);
   border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
 }
@@ -557,8 +577,8 @@ export default { name: 'OpsLogsPage' }
   overflow: hidden;
   backdrop-filter: var(--aurora-blur) saturate(1.15);
 }
-.err { margin: 0; padding: 8px 14px; font-size: 12px; color: var(--tone-danger-dot); }
-.log-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
+.err { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--tone-danger-dot); }
+.log-table { width: 100%; font-size: 13px; border-collapse: collapse; }
 .log-table th {
   position: sticky; top: 0; z-index: 1;
   padding: 8px 10px; text-align: left; font-weight: 600; color: var(--ink-soft);
@@ -573,10 +593,10 @@ export default { name: 'OpsLogsPage' }
 .th-time, .th-src, .th-kind { white-space: nowrap; }
 .th-detail { width: 72px; }
 .actor { white-space: nowrap; }
-.summary .action { display: block; font-size: 10px; color: var(--ink-faint); }
+.summary .action { display: block; font-size: 11.5px; color: var(--ink-faint); }
 .scope { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
 .scope-chip {
-  padding: 1px 7px; font-size: 10.5px; color: var(--ink-soft);
+  padding: 1px 7px; font-size: 11.5px; color: var(--ink-soft);
   background: var(--frost-bg); border-radius: 99px; white-space: nowrap;
 }
 .detail-cell { white-space: nowrap; }
@@ -585,17 +605,17 @@ export default { name: 'OpsLogsPage' }
 .detail-td { padding: 0 !important; }
 .detail-box {
   max-height: 260px; margin: 0; padding: 10px 14px; overflow: auto;
-  font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
+  font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
   background: var(--paper-deep); border-top: 1px solid var(--glass-line);
 }
 .src-badge {
-  display: inline-block; padding: 1px 8px; font-size: 10.5px;
+  display: inline-block; padding: 1px 8px; font-size: 11.5px;
   border: 1px solid var(--glass-line); border-radius: 99px; color: var(--ink-faint);
 }
 .src-badge.agent { color: var(--tone-info-dot); border-color: color-mix(in srgb, var(--tone-info-dot) 40%, transparent); }
 .src-badge.user { color: var(--tone-success-dot); border-color: color-mix(in srgb, var(--tone-success-dot) 40%, transparent); }
 .kind-chip {
-  display: inline-block; padding: 1px 7px; font-size: 10.5px;
+  display: inline-block; padding: 1px 7px; font-size: 11.5px;
   color: var(--ink-soft); background: var(--frost-bg); border-radius: 5px; white-space: nowrap;
 }
 .kind-chip.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
@@ -621,11 +641,125 @@ export default { name: 'OpsLogsPage' }
 }
 .m-f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .m-f textarea, .m-f .inp-sel {
-  padding: 7px 9px; font-size: 12.5px; color: var(--ink);
+  padding: 7px 9px; font-size: 13px; color: var(--ink);
   background: var(--frost-bg); border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
   font-family: inherit; resize: vertical;
 }
 .m-f textarea:focus, .m-f .inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
 .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
 .m-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
+
+/* ══ 窄屏(≤899px):7 列表格在 375px 上被卡片裁掉四列(实测只剩"时间/来源/操作者"),
+   每行高达 154px,字号被压到 10px。窄屏不再横向拖动"账页",
+   而是把每行折成一张事件卡 —— 三段堆叠,一条日志一眼读完:
+     ① 时间戳 · 来源徽标 · 分类 chip · [展开]
+     ② 消息摘要(整行,可换行,13px)
+     ③ 操作者 + 归属维度(产线/产品/Recipe)
+   表格语义(thead)在窄屏隐藏,列身份由"位置 + chip 颜色"承担。 */
+@media (max-width: 899px) {
+  .log-table {
+    display: block;
+    font-size: 13px;
+  }
+
+  .log-table thead {
+    display: none;
+  }
+
+  .log-table tbody {
+    display: block;
+  }
+
+  .log-table tr {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid color-mix(in srgb, var(--glass-line) 55%, transparent);
+  }
+
+  .log-table td {
+    display: block;
+    max-width: 100%;
+    padding: 0;
+    border-bottom: 0;
+  }
+
+  .log-table td.mono.dim {
+    order: 1;
+    font-size: 11.5px;
+  }
+
+  .log-table td:nth-child(2) { order: 2; }
+
+  .log-table td:nth-child(4) { order: 3; }
+
+  .log-table td.actor {
+    order: 4;
+    font-size: 11.5px;
+    color: var(--ink-faint);
+  }
+
+  .log-table td.detail-cell {
+    order: 5;
+    margin-left: auto;
+    white-space: normal;
+  }
+
+  .log-table td.summary {
+    order: 6;
+    flex: 1 1 100%;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .log-table td.scope {
+    order: 7;
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+
+  /* 详情行 / 空态行不参与"事件卡"排布 */
+  .log-table tr.log-detail-row {
+    display: block;
+    padding: 0;
+  }
+
+  .log-table tr.log-detail-row td {
+    display: block;
+  }
+
+  .log-table tr.log-empty-row td,
+  .log-table td.empty {
+    flex: 1 1 100%;
+    width: 100%;
+    text-align: center;
+  }
+
+  /* 手指命中区:表格内的 mini-btn 原始高度只有 ~24px */
+  .log-table .mini-btn,
+  .filter-card .mini-btn,
+  .filter-card .pill-btn,
+  .head-actions .pill-btn,
+  .m-actions .pill-btn,
+  .m-actions .ghost-btn {
+    min-height: 40px;
+    padding: 8px 14px;
+  }
+
+  /* 筛选条:窄屏一项一行,不再两列互挤 */
+  .filter-card {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .flt,
+  .flt-grow,
+  .flt .inp-sel {
+    flex: 1 1 100%;
+    width: 100%;
+    min-width: 0;
+  }
+}
 </style>

package/app/pages/monitor.vue

@@ -580,19 +580,34 @@ const processColumns = computed(() => [
   align-items: center;
 }
 
+/* 前三张是"一个数"的量规;第四张「服务进程」内容是 PID + 时长 + ISO 快照时间,
+ * 等宽 4 列时它只有 ~200px,文案折成三行(实测 1440)。给它两列 ——
+ * 列宽按**内容长度**分,不是按卡片数量平均分。 */
 .stat-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 14px;
   margin-bottom: 16px;
 }
 
+.stat-grid > :last-child {
+  grid-column: span 2;
+}
+
 @media (max-width: 1100px) {
   .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
+/* 窄屏两列:前三张是"一个数"的量规(标签 + 大字),单列会让每张卡
+ * 占掉 ~150px 高、四张卡吃掉整整一屏(实测)。第四张「服务进程」内容是长字符串,
+ * 让它独自跨两列 —— 这是按**内容**分的列,不是按数量硬凑。 */
 @media (max-width: 640px) {
-  .stat-grid { grid-template-columns: 1fr; }
+  .stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .stat-grid > :last-child { grid-column: 1 / -1; }
 }
 
 .stat {
@@ -602,10 +617,10 @@ const processColumns = computed(() => [
 .stat-label {
   margin: 0 0 6px;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11.5px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: var(--ink-soft, rgba(120, 112, 96, 0.8));
+  color: var(--ink-soft);
 }
 
 .stat-value {
@@ -619,17 +634,20 @@ const processColumns = computed(() => [
   font-size: 17px;
 }
 
+/* 实测:opacity 0.6 会把 11px 的说明文字压到 4.5:1 之下,
+   改为直接使用 ink-faint(两套主题实测均 ≥5.4:1),不再靠透明度降级。 */
 .stat-updated {
   margin: 6px 0 0;
-  font-size: 11px;
-  opacity: 0.6;
+  font-size: 11.5px;
+  color: var(--ink-faint);
+  overflow-wrap: anywhere;
 }
 
 .orphan-badge {
   margin-left: 6px;
   padding: 1px 6px;
   font-family: var(--font-mono);
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--tone-warning-dot);
   background: rgb(250 140 22 / 12%);
   border-radius: var(--radius-chip);
@@ -638,32 +656,58 @@ const processColumns = computed(() => [
 .agent-sub {
   display: block;
   margin-top: 2px;
-  font-size: 10px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
 .scope-tag {
   margin-left: 10px;
-  font-size: 11px;
+  font-size: 11.5px;
   vertical-align: 3px;
 }
 
 /* 卡片右上角计数:tabular mono 数据(非眉题) */
 .count-extra {
-  font-size: 11px;
+  font-size: 11.5px;
   color: var(--ink-faint);
 }
 
 .toggle-label {
-  font-size: 12px;
+  font-size: 12.5px;
   color: var(--ink-soft);
 }
 
 .small {
-  font-size: 12px;
+  font-size: 12.5px;
 }
 
 .aw-panel + .aw-panel {
   margin-top: 16px;
 }
+
+/* ══ 窄屏(≤899px)═══════════════════════════════════════════════════════
+   概要卡在 ≤640 已是单列(见上方 .stat-grid);这里只处理行内文字的收边:
+   说明句长(时间 + 版本)在 375px 会顶到卡片右缘,允许它断行。 */
+/* 空表占位行:antd 会给固定列单元格加 position: sticky,而 scroll.x=980
+   让整行宽 980px —— 在 375px 视口里它就成了"视口外的固定元素"(实测
+   td.ant-table-cell 暂无数据 left=47 right=1027)。占位单元格没有固定列语义,
+   取消 sticky 即可(有数据时固定列行为不变)。 */
+.monitor :deep(.ant-table-placeholder > td) {
+  position: static !important;
+}
+
+@media (max-width: 899px) {
+  .stat-updated {
+    line-height: 1.5;
+  }
+
+  .head-right {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toggle-label {
+    font-size: 13px;
+  }
+}
 </style>

package/app/pages/permissions/index.vue

@@ -331,4 +331,38 @@ onMounted(load)
 .matrix .row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
   padding: 8px 12px; border: 1px solid var(--aw-border, rgba(128, 152, 199, .25)); border-radius: 10px; }
 .line-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ══ 窄屏(v9):页面收边 / 搜索框占满行 / 矩阵表横向卷轴 + 首列可读 ═══════ */
+@media (max-width: 900px) {
+  .perm-page {
+    max-width: 100%;
+    padding: 16px 12px 40px;
+  }
+
+  .aw-page-head :deep(.ant-input-search) {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .perm-page :deep(.ant-table-content) table { min-width: 820px; }
+
+  .perm-page :deep(.ant-table-thead > tr > th:first-child),
+  .perm-page :deep(.ant-table-tbody > tr > td:first-child) { min-width: 120px; }
+
+  /* 抽屉里的授权矩阵:窄屏"线名 — 三态"必须上下堆叠,否则线名被压成竖排 */
+  .matrix .row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .line-name { white-space: normal; }
+  .detail dd { overflow-wrap: anywhere; }
+}
+
+@media (max-width: 640px) {
+  .perm-page { padding: 12px 8px 40px; }
+  .pg-sub { font-size: 11.5px; line-height: 1.5; }
+  .hint { font-size: 11.5px; }
+}
 </style>