agentworkshop 0.7.39 → 0.7.41

package/app/pages/dcw/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onUnmounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { DCW_DRIVERS, type DcwParamLedger, type DcwTemplateIcon, type LineQueryResult, type RecipeRunData, type RecipeView } from '#shared/dcw-protocol'
-import type { DriverConfigField } from '#shared/daq-protocol'
+import type { DaqDriverCatalogEntry, DriverConfigField } from '#shared/daq-protocol'
 import { useDcwStream } from '~/composables/workshop/useDcwStream'
 import { useDaqStream } from '~/composables/workshop/useDaqStream'
 import { useDeviceTwins } from '~/composables/workshop/useDeviceTwins'
@@ -191,7 +191,11 @@ const addTest = ref<{ ok: boolean, message: string } | null>(null)
 const addSaving = ref(false)
 const addError = ref('')
 
-const addDriverMeta = computed(() => DCW_DRIVERS.find(d => d.kind === addDriver.value))
+// 写驱动目录:server 权威(内置 + 协议插件自描述;REST 未返回时回落静态目录)
+const driverCatalog = computed<DaqDriverCatalogEntry[]>(() => dcw.driverCatalog.length
+  ? dcw.driverCatalog
+  : DCW_DRIVERS.map(d => ({ ...d })))
+const addDriverMeta = computed(() => driverCatalog.value.find(d => d.kind === addDriver.value))
 const addFields = computed<DriverConfigField[]>(() => addDriverMeta.value?.configFields ?? [])
 
 function resetAddCfg(): void {
@@ -872,16 +876,16 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
 
         <div class="tpl-chips">
           <span
-            v-for="t in dcw.templates"
-            :key="t.key"
+            v-for="tpl in dcw.templates"
+            :key="tpl.key"
             class="tpl-chip"
-            :title="`${t.code} · ${t.min}~${t.max} ${t.unit}${t.semantics ? ` · ${t.semantics}` : ''}`"
+            :title="`${tpl.code} · ${tpl.min}~${tpl.max} ${tpl.unit}${tpl.semantics ? ` · ${tpl.semantics}` : ''}`"
           >
-            {{ t.name }} <small class="mono">{{ t.min }}~{{ t.max }}{{ t.unit }}</small>
+            {{ tpl.name }} <small class="mono">{{ tpl.min }}~{{ tpl.max }}{{ tpl.unit }}</small>
             <em
               class="tpl-tag"
-              :class="{ builtin: t.builtin }"
-            >{{ t.builtin ? $t('dcwDetail.k3x23c141') : $t('dcwDetail.k3t616a142') }}</em>
+              :class="{ builtin: tpl.builtin }"
+            >{{ tpl.builtin ? $t('dcwDetail.k3x23c141') : $t('dcwDetail.k3t616a142') }}</em>
           </span>
         </div>
 
@@ -1042,11 +1046,11 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
               class="inp"
             >
               <option
-                v-for="t in dcw.templates"
-                :key="t.key"
-                :value="t.key"
+                v-for="tpl in dcw.templates"
+                :key="tpl.key"
+                :value="tpl.key"
               >
-                {{ t.name }} · {{ t.ch }}({{ t.min }}~{{ t.max }} {{ t.unit }}){{ t.builtin ? '' : $t('dcwDetail.kr45rk9157') }}
+                {{ tpl.name }} · {{ tpl.ch }}({{ tpl.min }}~{{ tpl.max }} {{ tpl.unit }}){{ tpl.builtin ? '' : $t('dcwDetail.kr45rk9157') }}
               </option>
             </select>
           </label>
@@ -1132,11 +1136,11 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
                 class="inp"
               >
                 <option
-                  v-for="d in DCW_DRIVERS.filter(x => x.status !== 'builtin')"
+                  v-for="d in driverCatalog.filter(x => x.status !== 'builtin')"
                   :key="d.kind"
                   :value="d.kind"
                 >
-                  {{ d.label }}
+                  {{ d.label }}{{ d.plugin ? ' ⌁' : '' }}
                 </option>
               </select>
             </label>
@@ -2339,10 +2343,11 @@ function fmtPoint(p: { value?: number, avg?: number } | undefined): string {
 .adopt-list { display: flex; gap: 8px; flex-wrap: wrap; }
 .adopt-chip {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   padding: 4px 8px;
-  font-size: 11px;
+  font-size: 11.5px;
   color: #e8eef8;
   background: rgba(13, 20, 32, 0.7);
   border: 1px solid rgba(60, 80, 110, 0.5);
@@ -2366,35 +2371,36 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-chip);
 }
-.tri-cell small { font-size: 10px; color: var(--ink-faint); }
+.tri-cell small { font-size: 11.5px; color: var(--ink-faint); }
 .tri-cell b { font-size: 17px; color: var(--ink); }
 .ledger-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
-.sec-t { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-faint); }
-.ledger-list { display: flex; flex-direction: column; gap: 3px; max-height: 200px; margin: 0; padding: 0; overflow: auto; font-size: 11px; color: var(--ink-soft); list-style: none; }
+.sec-t { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-faint); }
+.ledger-list { display: flex; flex-direction: column; gap: 3px; max-height: 200px; margin: 0; padding: 0; overflow: auto; font-size: 11.5px; color: var(--ink-soft); list-style: none; }
 .ledger-rec { display: flex; gap: 8px; align-items: center; }
 .rec-st {
   flex: none;
   padding: 0 6px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 11.5px;
   color: var(--ink-faint);
   border: 1px solid var(--line-strong);
   border-radius: 4px;
 }
 .rec-st.open { color: var(--tone-warning-dot); border-color: var(--tone-warning-dot); }
+.tri-cell b { overflow-wrap: anywhere; }
 .rec-st.judged { color: var(--tone-warning-dot); border-color: var(--tone-warning-dot); opacity: 0.85; }
 .rec-st.rolled-back, .rec-st.judged-keep { color: var(--tone-success-dot); border-color: var(--tone-success-dot); }
 .sub { margin: 0; font-size: 12.5px; opacity: 0.6; }
 .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 .dim { opacity: 0.55; }
 .badges { display: flex; gap: 8px; }
-.badge { padding: 3px 10px; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
+.badge { padding: 3px 10px; font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
 
 .ctrl-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 18px; margin-bottom: 14px; }
 .ctrl-left { display: flex; gap: 14px; align-items: center; }
 .aw-pill.running { background: var(--accent); }
 .ctrl-right { display: flex; gap: 12px; align-items: center; }
-.ctrl-metrics { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); }
+.ctrl-metrics { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); }
 .ctrl-metrics .sep { opacity: 0.4; }
 .ctrl-metrics .warn { color: var(--tone-warning-dot); }
 .add-btn { padding: 8px 16px; font-size: 13px; }
@@ -2408,14 +2414,14 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .nodes-table th, .nodes-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--divider-hair); }
 .nodes-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line-strong); }
 .nodes-table td b { margin-left: 8px; }
-.ch { display: block; margin-top: 2px; font-size: 10px; color: var(--ink-faint); }
+.ch { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }
 .right { text-align: right; }
 .val { font-size: 13px; }
 .val small { margin-left: 3px; color: var(--ink-faint); }
 .read-stale { color: var(--tone-danger-dot, #e05a5a); text-decoration: underline dotted; text-underline-offset: 3px; }
 .read-btn { margin-left: 8px; }
 
-.st-pill { display: inline-block; padding: 2px 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; border-radius: var(--radius-pill); }
+.st-pill { display: inline-block; padding: 3px 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; border-radius: var(--radius-pill); }
 .st-pill.ok { color: var(--tone-success-dot); background: var(--tone-success-bg); }
 .st-pill.writing { color: var(--ink); background: var(--hover-tint); }
 .st-pill.error, .st-pill.alarm { color: var(--tone-danger-dot); background: var(--tone-danger-bg); }
@@ -2434,10 +2440,12 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 
 /* 模板弹窗 */
 .tpl-hint { margin: 0 0 10px; font-size: 12px; }
+.recipe-hd { flex-wrap: wrap; }
+.recipe-actions { flex-wrap: wrap; }
 .tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
-.tpl-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; font-size: 11.5px; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
+.tpl-chip { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 9px; font-size: 11.5px; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
 .tpl-chip small { color: var(--ink-faint); }
-.tpl-tag { padding: 1px 6px; font-size: 10px; font-style: normal; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-pill); }
+.tpl-tag { padding: 1px 6px; font-size: 11.5px; font-style: normal; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-pill); }
 .tpl-tag.builtin { color: var(--ink-faint); border-color: var(--line-strong); }
 
 .write-row { display: flex; gap: 6px; align-items: center; }
@@ -2455,9 +2463,11 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 @keyframes linePulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-success-dot) 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone-success-dot) 8%, transparent); } }
 .line-info b { font-size: 14px; }
 .line-info small { display: block; margin-top: 2px; font-size: 11px; }
-.line-ctl { display: flex; gap: 10px; align-items: flex-end; }
+.line-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
 .ctl-sel { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-faint); }
 .ctl-sel .inp { min-width: 150px; }
+/* 配方参数行:窄屏不再按 5 列硬分,否则数值列被压成竖排字 */
+.param-chip { overflow-wrap: anywhere; }
 .pill-btn.stop { background: var(--tone-danger-dot); border-color: var(--tone-danger-dot); }
 .product-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
 .prod-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; font-size: 12px; cursor: pointer; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
@@ -2465,6 +2475,8 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .prod-del { color: var(--tone-danger-dot); font-weight: 700; }
 .query-card { padding: 14px 18px; margin-bottom: 14px; }
 .q-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; }
+/* 配方网格:minmax(320px) 在 355px 画布(减去卡片内边距)里会溢出 1px,用 min() 兜住 */
+.recipe-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
 .q-grid .f { font-size: 11px; color: var(--ink-faint); }
 .q-actions { justify-content: flex-end; }
 .q-result { margin-top: 12px; overflow-x: auto; }
@@ -2472,7 +2484,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .recipe-card { padding: 16px 18px; margin-bottom: 14px; }
 .recipe-hd { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
 .recipe-hd h3 { margin: 0; font-size: 16px; }
-.panel-tag { padding: 2px 8px; font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
+.panel-tag { padding: 2px 8px; font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
 .recipe-sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-faint); }
 .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
 .recipe-item { padding: 12px 14px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--radius-chip); }
@@ -2480,14 +2492,14 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .recipe-name small { margin-left: 8px; }
 .desc { margin: 4px 0; font-size: 12px; }
 .recipe-params { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-.param-chip { padding: 2px 8px; font-size: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-chip); }
+.param-chip { padding: 2px 8px; font-size: 11.5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-chip); }
 .recipe-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
 /* ---------- 配方版本历史 ---------- */
 .ver-row { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--divider-hair); border-radius: 10px; }
 .ver-row.cur { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
 .ver-head { display: flex; gap: 10px; align-items: center; }
 .ver-v { font-weight: 700; font-size: 13px; }
-.ver-src { padding: 1px 8px; font-size: 10.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
+.ver-src { padding: 1px 8px; font-size: 11.5px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
 .ver-src.agent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
 .ver-src.user { color: var(--ink-soft); }
 .ver-src.system { color: var(--ink-faint); }
@@ -2511,7 +2523,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .param-del { margin-bottom: 2px; }
 .f { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-faint); }
 .f em { margin-left: 3px; font-style: normal; }
-.hint { font-size: 10px; color: var(--ink-faint); }
+.hint { font-size: 11.5px; color: var(--ink-faint); }
 .test-row { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; }
 .test-result { font-family: var(--font-mono); font-size: 11px; }
 .test-result.good { color: var(--tone-success-dot); }
@@ -2520,12 +2532,85 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .m-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
 /* 失效配方参数:灰化 + 徽标 */
 .param-chip.stale { color: var(--ink-faint); background: color-mix(in srgb, var(--ink) 5%, transparent); border-color: var(--divider-hair); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faint) 60%, transparent); }
-.chip-stale-tag { margin-left: 5px; padding: 0 5px; font-size: 9.5px; font-style: normal; color: var(--tone-danger-dot); background: color-mix(in srgb, var(--tone-danger-dot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); text-decoration: none; }
-.row-stale { flex: none; padding: 1px 7px; font-size: 10.5px; color: var(--tone-danger-dot); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); }
+.chip-stale-tag { margin-left: 5px; padding: 0 5px; font-size: 11.5px; font-style: normal; color: var(--tone-danger-dot); background: color-mix(in srgb, var(--tone-danger-dot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); text-decoration: none; }
+.row-stale { flex: none; padding: 1px 7px; font-size: 11.5px; color: var(--tone-danger-dot); border: 1px solid color-mix(in srgb, var(--tone-danger-dot) 30%, transparent); border-radius: var(--radius-chip); }
 .m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
 .aw-pill.outline { color: var(--ink); background: var(--paper-raised); border-color: var(--line-strong); }
 .err { margin-top: 14px; font-size: 13px; color: var(--tone-danger-dot); }
 @media (prefers-reduced-motion: no-preference) {
   .nodes-table tbody tr:hover { background: var(--hover-tint); }
 }
+
+/* ══ 窄屏自适应层(≤900 手持/平板竖,≤640 单列)════════════════════════════
+   375px 下本页的三类实测缺陷:网关总控条右侧三件套不换行(整块顶出画布)、
+   运行控制行的两个 150px 选择器 + 按钮并排超宽、微标签 9~10.5px。 */
+@media (max-width: 900px) {
+  .ctrl-card { gap: 12px; padding: 12px; }
+  .ctrl-right { flex-wrap: wrap; gap: 8px 10px; width: 100%; }
+  .ctrl-metrics { width: 100%; }
+  .line-card { gap: 12px; padding: 12px; }
+  .line-status { min-width: 0; }
+  .line-ctl { width: 100%; }
+  .ctl-sel { flex: 1 1 140px; min-width: 0; }
+  .ctl-sel .inp { min-width: 0; width: 100%; }
+  .line-ctl .pill-btn { flex: 1 1 120px; }
+
+  /* 控制节点表:保留列语义,给一条可横扫的卷轴 + 首列钉住 */
+  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .nodes-table { min-width: 1080px; }
+  .nodes-table th,
+  .nodes-table td { white-space: nowrap; }
+  .nodes-table thead > tr > th:first-child,
+  .nodes-table tbody > tr > td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+    background: var(--paper-raised);
+    box-shadow: 1px 0 0 var(--line);
+  }
+
+  .adopt-card { padding: 12px; }
+  .ledger-card,
+  .recipe-card,
+  .query-card { padding: 12px; }
+  .ledger-cols { grid-template-columns: 1fr; }
+  .ledger-tri { flex-wrap: wrap; }
+
+  /* 触摸目标:手持命中区 ≥40px(main.css 只在 pointer:coarse 下兜底) */
+  .mini-btn,
+  .pill-btn,
+  .aw-pill,
+  .ctrl-toggle,
+  .inp,
+  .write-inp,
+  .prod-chip,
+  .tpl-chip {
+    min-height: 40px;
+  }
+
+  .write-inp { width: 100%; min-width: 90px; }
+  .write-row { flex-wrap: wrap; }
+
+  /* 弹窗表单:两列/三列在窄屏一律落成一列,否则标签被压成竖排字 */
+  .f-grid,
+  .driver-form,
+  .cal-form { grid-template-columns: 1fr; }
+  .q-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .param-row { grid-template-columns: 1fr 1fr; }
+  .modal {
+    width: calc(100vw - 20px);
+    max-width: calc(100vw - 20px);
+    padding: 16px 14px;
+  }
+  .seg { padding: 10px 0; min-height: 40px; }
+  .m-actions { flex-wrap: wrap; }
+  .m-actions > * { flex: 1 1 auto; }
+  .recipe-hd .pill-btn,
+  .recipe-hd .mini-btn { min-height: 40px; }
+}
+
+@media (max-width: 640px) {
+  h1 { font-size: 22px; }
+  .q-grid { grid-template-columns: 1fr; }
+}
 </style>

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;