botmux 3.12.0 → 3.12.1

package/dist/dashboard-web/style.css

@@ -2579,7 +2579,7 @@ button.primary {
   animation: board-led-pulse 1.6s ease-in-out infinite;
 }
 
-.session-board-starting {
+.session-board-todo {
   --col-signal: var(--warning);
 }
 
@@ -2920,6 +2920,163 @@ button.primary {
   margin-left: 0;
 }
 
+/* 任务态徽标：告诉人「这张卡为什么在待办列」——机器空闲但还有未完成 TODO。
+   琥珀色区别于运行态 status（灰/蓝/绿），hasInProgress 时加脉冲圆点。 */
+/* 待办徽标：柔和描边 + 透明底（信息态，不喧宾夺主）。色调用偏红的橙红，
+   比原来的黄橙更有"该处理"的提示感，又不像红色报错。 */
+.session-todo-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  color: #c2410c;
+  background: color-mix(in srgb, #ea580c 12%, transparent);
+  border: 1px solid color-mix(in srgb, #ea580c 36%, transparent);
+  position: relative;
+  cursor: help;
+}
+
+.session-todo-badge.pinned {
+  color: #c2410c;
+  background: color-mix(in srgb, #ea580c 22%, transparent);
+  border-color: color-mix(in srgb, #ea580c 55%, transparent);
+  cursor: pointer;
+}
+
+.session-todo-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ea580c;
+  animation: todo-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes todo-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* 悬浮浮层：列出每条 TODO 的状态字形 + 文字。portal 到 body、fixed 定位（卡片/列
+   都是 overflow:hidden，绝对定位会被裁）。JS 控制挂载，位置由行内 left/top 给。
+   两态：hover 悬浮预览（移开即关）；pinned 点击固定（不自动消失，文字可选中复制）。 */
+.session-todo-pop {
+  position: fixed;
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 220px;
+  max-width: 360px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md, 8px);
+  background: var(--surface-raised, #1b1f2a);
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+  color: var(--fg, #18202a);
+  font-family: var(--sans, inherit);
+  font-weight: 400;
+  letter-spacing: 0;
+  white-space: normal;
+  animation: todo-pop-in 0.12s ease;
+  user-select: none;
+}
+
+/* 固定态：文字可选中复制，边框更实以区分「已锁定」。 */
+.session-todo-pop.pinned {
+  user-select: text;
+  border-color: color-mix(in srgb, var(--warning, #f5a623) 45%, var(--border, rgba(255, 255, 255, 0.12)));
+}
+
+@keyframes todo-pop-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.session-todo-pop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--muted, #9aa3b2);
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+}
+
+.session-todo-pop-title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.session-todo-pop-hint {
+  flex: none;
+  font-weight: 500;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+.session-todo-pop-copy {
+  flex: none;
+  cursor: pointer;
+  font-family: var(--sans, inherit);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--warning, #f5a623);
+  background: color-mix(in srgb, var(--warning, #f5a623) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warning, #f5a623) 40%, transparent);
+  border-radius: var(--radius-sm, 5px);
+  padding: 2px 8px;
+  line-height: 1.4;
+  transition: background 0.1s ease;
+}
+
+.session-todo-pop-copy:hover {
+  background: color-mix(in srgb, var(--warning, #f5a623) 24%, transparent);
+}
+
+.session-todo-pop-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.session-todo-pop-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.session-todo-pop-glyph {
+  flex: none;
+  width: 14px;
+  text-align: center;
+  font-family: var(--mono);
+  font-weight: 700;
+}
+
+/* 完成项最浅（灰+删除线），未完成项更深、进行中最深加粗——让「还没做的」在视觉上更突出。
+   注意用 --fg / --faint（本主题真实存在的 token）；早前误用未定义的 --text/--text-secondary，
+   会回退到近白色 #e6e8ee，在浅色模式下几乎看不清。 */
+.session-todo-pop-item.st-completed { color: var(--faint, #7b8798); }
+.session-todo-pop-item.st-completed .session-todo-pop-text { text-decoration: line-through; }
+.session-todo-pop-item.st-completed .session-todo-pop-glyph { color: var(--success, #15803d); }
+.session-todo-pop-item.st-in-progress { color: var(--fg, #18202a); font-weight: 700; }
+.session-todo-pop-item.st-in-progress .session-todo-pop-glyph { color: var(--warning, #b7791f); }
+.session-todo-pop-item.st-pending { color: var(--fg, #18202a); }
+.session-todo-pop-item.st-pending .session-todo-pop-glyph { color: var(--muted, #627084); }
+
 .session-signal {
   display: inline-flex;
   align-items: center;
@@ -10096,7 +10253,7 @@ button.contrast:hover { background: var(--danger-soft); border-color: var(--dang
 .session-board-count { border-radius: var(--radius-full); font-family: inherit; }
 .session-board-needs-you { --col-signal: var(--warning); }
 .session-board-needs-you { background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
-.session-board-starting { --col-signal: var(--info); }
+.session-board-todo { --col-signal: var(--info); }
 .session-board-working { --col-signal: var(--accent); }
 .session-board-idle { --col-signal: var(--success); }
 :root[data-theme="dark"] .session-board-needs-you {
@@ -10871,6 +11028,11 @@ button.contrast:hover { background: var(--danger-soft); border-color: var(--dang
   position: relative;
 }
 
+.skills-install-anchor {
+  min-width: 0;
+  scroll-margin-top: 18px;
+}
+
 .skills-install-title {
   position: relative;
   display: inline-flex;
@@ -10883,6 +11045,34 @@ button.contrast:hover { background: var(--danger-soft); border-color: var(--dang
   margin: 0;
 }
 
+.skills-inline-target {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 12px;
+  padding: 9px 11px;
+  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border-soft));
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.skills-inline-target button {
+  flex: none;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
 .skills-card-head {
   display: flex;
   align-items: flex-end;
@@ -11006,19 +11196,12 @@ button.contrast:hover { background: var(--danger-soft); border-color: var(--dang
   line-height: 1.35;
 }
 
-.skills-source-help {
-  display: grid;
-  gap: 7px;
-  min-width: 0;
-}
-
-.skills-source-help > span {
-  display: block;
-}
-
-.skills-source-help strong {
-  color: var(--fg);
-  font-weight: 750;
+.skills-install-field-wide > small {
+  margin-top: -3px;
+  color: var(--faint);
+  font-size: 10.5px;
+  font-weight: 600;
+  line-height: 1.35;
 }
 
 .skills-install-grid input,
@@ -11041,12 +11224,71 @@ button.contrast:hover { background: var(--danger-soft); border-color: var(--dang
 
 .skills-install-bottom-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
   gap: 10px;
   align-items: center;
   min-width: 0;
 }
 
+.skills-install-bottom-row > .skills-local-discovery-panel {
+  grid-column: auto;
+}
+
+.skills-scan-strategy {
+  display: grid;
+  gap: 4px;
+  min-height: var(--button-height);
+  padding: 8px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--surface-muted) 55%, transparent);
+}
+
+.skills-scan-toggle {
+  display: flex !important;
+  align-items: flex-start;
+  gap: 9px !important;
+  color: var(--fg) !important;
+  cursor: pointer;
+}
+
+.skills-install-grid .skills-scan-toggle > input[type="checkbox"] {
+  width: 16px !important;
+  min-width: 16px !important;
+  max-width: 16px !important;
+  height: 16px !important;
+  min-height: 16px !important;
+  max-height: 16px !important;
+  margin: 1px 0 0 !important;
+  padding: 0 !important;
+  border-radius: 4px !important;
+  accent-color: var(--accent);
+}
+
+.skills-scan-toggle > span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.skills-scan-toggle strong {
+  color: var(--fg);
+  font-size: 11.5px;
+}
+
+.skills-scan-toggle small,
+.skills-scan-strategy > p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 10.5px;
+  line-height: 1.35;
+}
+
+.skills-scan-strategy > p {
+  padding-left: 25px;
+  color: var(--faint);
+}
+
 .skills-advanced-options {
   display: grid;
   gap: 0;
@@ -16704,7 +16946,7 @@ form.dashboard-toolbar > input[type="text"]:focus {
   display: grid;
   grid-column: 1 / -1;
   grid-row: 3;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
   gap: 10px;
   align-items: center;
   min-width: 0;
@@ -16739,6 +16981,67 @@ form.dashboard-toolbar > input[type="text"]:focus {
   margin: 8px 0 0;
 }
 
+.skills-source-feedback {
+  display: grid;
+  gap: 2px;
+  margin-top: 7px;
+  padding: 7px 9px;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+}
+
+.skills-source-feedback strong {
+  color: var(--accent-strong);
+  font-size: 11px;
+}
+
+.skills-source-feedback span {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.skills-source-feedback.is-unknown {
+  border-color: color-mix(in srgb, var(--warning) 35%, var(--border-soft));
+  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
+}
+
+.skills-source-feedback.is-unknown strong {
+  color: var(--warning);
+}
+
+.skills-install-diagnostic {
+  display: grid;
+  gap: 3px;
+  margin-top: 8px;
+  padding: 9px 11px;
+  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-soft));
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
+}
+
+.skills-install-diagnostic strong {
+  color: var(--warning);
+  font-size: 12px;
+}
+
+.skills-install-diagnostic span {
+  color: var(--fg-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+@media (max-width: 980px) {
+  .skills-page .skills-install-panel .skills-install-bottom-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .skills-inline-target {
+    align-items: flex-start;
+  }
+}
+
 .skills-defaults-panel .bd-section-title {
   margin: 0;
 }
@@ -17947,7 +18250,7 @@ form.dashboard-toolbar > input[type="text"]:focus {
 
 .connector-topic-message-options {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
 }
 
@@ -17987,6 +18290,13 @@ form.dashboard-toolbar > input[type="text"]:focus {
   font-weight: 600;
 }
 .connector-topic-message-input > small span { color: var(--faint); font-variant-numeric: tabular-nums; }
+.connector-topic-message-extractors {
+  min-height: 148px;
+  resize: vertical;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
 
 .connector-topic-message-preview {
   margin: 0;
@@ -25585,27 +25895,542 @@ button.ui-refresh-button.is-loading .ui-action-icon {
   overflow-wrap: anywhere;
 }
 
-@media (max-width: 620px) {
-  .skills-installed-block > .sect-head {
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
-  .skills-installed-block > .sect-head .sect-head-hint {
-    display: none;
-  }
-
-  .skills-installed-header-actions {
-    margin-left: auto;
-  }
-
-  .skills-library-toolbar {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .skills-installed-search {
-    grid-column: 1 / -1;
-  }
+/* Skill Pack grid */
+.skills-pack-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.skills-pack-create-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 140px;
+  border: 2px dashed var(--border);
+  border-radius: 12px;
+  background: transparent;
+  color: var(--muted, #999);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 14px;
+}
+.skills-pack-create-tile:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.skills-pack-create-plus {
+  font-size: 28px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.skills-pack-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid var(--border, #333);
+  border-radius: 12px;
+  background: var(--surface-raised);
+  transition: border-color 0.15s ease;
+}
+.skills-pack-card:hover {
+  border-color: var(--accent);
+}
+
+.skills-pack-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.skills-pack-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.skills-pack-title strong {
+  font-size: 15px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.skills-pack-id {
+  font-size: 11px;
+  color: var(--muted);
+  background: var(--surface-muted);
+  padding: 1px 6px;
+  border-radius: 4px;
+  align-self: flex-start;
+}
+
+.skills-pack-health {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+}
+.skills-pack-health-complete {
+  background: rgba(46, 204, 113, 0.15);
+  color: #2ecc71;
+}
+.skills-pack-health-missing {
+  background: rgba(231, 76, 60, 0.15);
+  color: #e74c3c;
+}
+.skills-pack-health-unassigned {
+  background: rgba(241, 196, 15, 0.15);
+  color: #f1c40f;
+}
+
+.skills-pack-desc {
+  font-size: 13px;
+  color: var(--muted, #aaa);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.skills-pack-meta {
+  display: flex;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--muted, #999);
+}
+.skills-pack-meta-item strong {
+  color: var(--fg);
+  font-size: 14px;
+  margin-right: 2px;
+}
+
+.skills-pack-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.skills-pack-tag {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--surface-muted);
+  color: var(--muted, #aaa);
+}
+
+.skills-pack-refs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.skills-pack-ref-chip {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.skills-pack-missing {
+  font-size: 12px;
+  color: #e74c3c;
+  background: rgba(231, 76, 60, 0.08);
+  padding: 6px 10px;
+  border-radius: 6px;
+}
+
+.skills-pack-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 4px;
+}
+.skills-pack-actions .bd-button.small {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 12px;
+}
+
+/* Bot assignment drag-and-drop */
+.skills-bot-assign-layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 860px) {
+  .skills-bot-assign-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.skills-bot-palette {
+  position: sticky;
+  top: 12px;
+  padding: 14px;
+  border: 1px solid var(--border, #333);
+  border-radius: 12px;
+  background: var(--surface-raised);
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.skills-bot-palette-hint {
+  font-size: 12px;
+  color: var(--muted, #999);
+  margin: 0 0 12px;
+  line-height: 1.4;
+}
+.skills-bot-palette-group {
+  margin-bottom: 14px;
+}
+.skills-bot-palette-group:last-child {
+  margin-bottom: 0;
+}
+.skills-bot-palette-label {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted, #888);
+  margin-bottom: 6px;
+}
+.skills-bot-palette-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.skills-draggable-chip {
+  cursor: grab;
+  user-select: none;
+  transition: transform 0.1s ease, opacity 0.1s ease;
+}
+.skills-draggable-chip:hover {
+  transform: translateY(-1px);
+}
+.skills-draggable-chip:active {
+  cursor: grabbing;
+  opacity: 0.7;
+}
+
+.skills-bot-row.drag-over {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 2px var(--accent);
+}
+.skills-bot-row.drag-over td {
+  border-color: var(--accent);
+}
+
+.skills-unassign-dropzone {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 9px;
+  align-items: center;
+  margin: -2px 0 14px;
+  padding: 10px 11px;
+  border: 1px dashed color-mix(in srgb, var(--danger) 58%, var(--border-soft));
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--danger) 7%, var(--surface-raised));
+  color: var(--danger);
+  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+}
+.skills-unassign-dropzone.is-active {
+  border-color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 14%, var(--surface-raised));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent);
+  transform: translateY(-1px);
+}
+.skills-unassign-dropzone > span:last-child {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+}
+.skills-unassign-dropzone strong {
+  color: var(--danger);
+  font-size: 12px;
+}
+.skills-unassign-dropzone small {
+  color: var(--muted);
+  font-size: 10.5px;
+  line-height: 1.35;
+}
+.skills-unassign-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.skills-assigned-draggable {
+  display: inline-flex;
+  max-width: 100%;
+  margin: 1px 3px 1px 0;
+  border-radius: var(--radius-full);
+  cursor: grab;
+  user-select: none;
+  vertical-align: middle;
+  transition: box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
+}
+.skills-assigned-draggable:hover {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
+  transform: translateY(-1px);
+}
+.skills-assigned-draggable:active,
+.skills-assigned-draggable > button:active {
+  cursor: grabbing;
+}
+.skills-assigned-draggable.is-dragging {
+  opacity: 0.45;
+}
+.skills-assigned-draggable > button {
+  cursor: grab;
+}
+
+.skills-bot-row-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: max-content;
+}
+.skills-duplicate-feedback {
+  max-width: 180px;
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skills-unassign-dropzone,
+  .skills-assigned-draggable {
+    transition: none !important;
+    transform: none !important;
+  }
+}
+
+/* Skill pack editor: truncate descriptions, make list scrollable */
+.skills-pack-skill-list {
+  max-height: 320px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.skills-pack-skill-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px 8px;
+  align-items: start;
+  padding: 6px 8px;
+  border-radius: 6px;
+  transition: background 0.1s;
+}
+.skills-pack-skill-item:hover {
+  background: var(--accent-soft);
+}
+.skills-pack-skill-item input {
+  margin-top: 3px;
+}
+.skills-pack-skill-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+.skills-pack-skill-desc {
+  grid-column: 2;
+  font-size: 11px;
+  color: var(--muted, #999);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+}
+
+/* Skill library cards: truncate description for even grid */
+.skills-installed-card .skill-desc,
+.skills-library-card p {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Skill / Pack chips */
+.skills-pack-chip,
+.skills-skill-chip {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  background: var(--surface-muted);
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+.skills-pack-chip {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+/* Draggable chips in palette */
+.skills-draggable-chip {
+  padding: 4px 12px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface-raised);
+  cursor: grab;
+}
+.skills-draggable-chip.skills-pack-chip {
+  border-color: rgba(108, 140, 255, 0.3);
+}
+.skills-draggable-chip:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+/* Bot palette: drag hint, search, tag filters */
+.skills-bot-palette-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: rgba(108, 140, 255, 0.08);
+  border: 1px solid rgba(108, 140, 255, 0.2);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--fg);
+  margin: 0 0 14px;
+  line-height: 1.4;
+}
+.skills-drag-icon {
+  font-size: 18px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.skills-bot-palette-search {
+  width: 100%;
+  padding: 6px 10px;
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-muted);
+  color: var(--fg);
+  font-size: 12px;
+}
+.skills-bot-palette-search:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.skills-bot-palette-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.skills-tag-filter {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted, #999);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+.skills-tag-filter:hover {
+  border-color: var(--accent);
+  color: var(--fg);
+}
+.skills-tag-filter.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+/* Skill pack editor: search + select all */
+.skills-pack-include-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.skills-pack-include-head label {
+  font-weight: 600;
+  white-space: nowrap;
+}
+.skills-pack-skill-search {
+  flex: 1;
+  max-width: 240px;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-muted);
+  color: var(--fg);
+  font-size: 12px;
+}
+.skills-pack-skill-search:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.skills-pack-select-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted, #999);
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+/* Wider dialog for pack editor */
+.skills-pack-editor {
+  width: min(560px, 92vw);
+}
+
+@media (max-width: 620px) {
+  .skills-installed-block > .sect-head {
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  .skills-installed-block > .sect-head .sect-head-hint {
+    display: none;
+  }
+
+  .skills-installed-header-actions {
+    margin-left: auto;
+  }
+
+  .skills-library-toolbar {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .skills-installed-search {
+    grid-column: 1 / -1;
+  }
 
   .skills-select-all-results {
     grid-column: 1 / -1;
@@ -25805,179 +26630,567 @@ button.ui-refresh-button.is-loading .ui-action-icon {
     grid-template-rows: none;
   }
 
-  main:has(.groups-page) .groups-matrix-section {
-    height: min(70dvh, 640px);
-    min-height: 320px;
-  }
+  main:has(.groups-page) .groups-matrix-section {
+    height: min(70dvh, 640px);
+    min-height: 320px;
+  }
+}
+
+/* ── Schedule create/edit form modal ─────────────────────────────────────── */
+.schedule-form-overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 24px;
+}
+
+.schedule-form-dialog {
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  box-shadow: 0 16px 48px color-mix(in srgb, #000 28%, transparent);
+  width: min(560px, 100%);
+  max-height: 90dvh;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.schedule-form-dialog h2 {
+  margin: 0 0 16px;
+  font-size: 18px;
+}
+
+.schedule-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.schedule-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.schedule-form-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.schedule-form-field input[type="text"],
+.schedule-form-field textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.schedule-form-field textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.schedule-form-help {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.schedule-form-help-with-count {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.schedule-form-help-with-count span {
+  flex: none;
+}
+
+.schedule-form-radio-group {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.schedule-form-radio-group label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.schedule-form-placement {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 9px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--surface-muted) 46%, transparent);
+}
+
+.schedule-form-placement strong {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.schedule-form-toggle {
+  flex-direction: row !important;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.schedule-form-toggle > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.schedule-form-error {
+  color: var(--danger);
+  font-size: 12px;
+  margin: 0;
+}
+
+.schedule-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.schedule-form-cancel,
+.schedule-form-submit {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--border-soft);
+}
+
+.schedule-form-cancel {
+  background: transparent;
+  color: var(--text);
+}
+
+.schedule-form-submit {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.schedule-form-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.schedule-edit-button,
+.schedule-delete-button {
+  min-width: 56px !important;
+}
+
+.schedule-delete-button {
+  color: var(--danger) !important;
+  border-color: color-mix(in srgb, var(--danger) 48%, var(--border-soft)) !important;
+}
+
+/* --- Skills page: cross-link chips, issue strip, focus highlights --- */
+/* Chips rendered as <button> for click-through navigation: strip default button chrome */
+button.skills-pack-chip,
+button.skills-skill-chip,
+button.skills-pack-ref-chip,
+.skills-usage-chip,
+.skills-missing-skill-chip {
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+}
+button.skills-pack-chip:hover:not(:disabled),
+button.skills-skill-chip:hover:not(:disabled),
+button.skills-pack-ref-chip:hover:not(:disabled),
+.skills-usage-chip:hover:not(:disabled) {
+  filter: brightness(1.2);
+  text-decoration: underline;
+}
+button.skills-pack-chip:disabled,
+button.skills-skill-chip:disabled,
+button.skills-pack-ref-chip:disabled,
+.skills-usage-chip:disabled {
+  cursor: default;
+  opacity: 0.7;
+  text-decoration: none;
+}
+.skills-chip-missing {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.skills-usage-chips {
+  display: inline-flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+.skills-usage-chip {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--surface-muted);
+  color: var(--muted);
+}
+
+.skills-missing-skill-chip {
+  font-size: 11px;
+  padding: 1px 8px;
+  margin: 0 2px;
+  border-radius: 10px;
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+.skills-missing-skill-chip:hover:not(:disabled) {
+  background: var(--danger-soft);
+  text-decoration: underline;
 }
 
-/* ── Schedule create/edit form modal ─────────────────────────────────────── */
-.schedule-form-overlay {
-  position: fixed;
-  inset: 0;
-  background: color-mix(in srgb, var(--bg) 72%, transparent);
-  backdrop-filter: blur(3px);
-  display: flex;
+.skills-issue-strip {
+  display: inline-flex;
+  gap: 8px;
   align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 24px;
+  flex-wrap: wrap;
 }
-
-.schedule-form-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border-soft);
+.skills-issue-badge {
+  font-size: 12px;
+  padding: 3px 10px;
   border-radius: 12px;
-  box-shadow: 0 16px 48px color-mix(in srgb, #000 28%, transparent);
-  width: min(560px, 100%);
-  max-height: 90dvh;
-  overflow-y: auto;
-  padding: 24px;
+  border: none;
+  font-family: inherit;
+  white-space: nowrap;
 }
-
-.schedule-form-dialog h2 {
-  margin: 0 0 16px;
-  font-size: 18px;
+button.skills-issue-badge {
+  cursor: pointer;
 }
-
-.schedule-form {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+button.skills-issue-badge:hover {
+  filter: brightness(1.2);
+  text-decoration: underline;
+}
+.skills-issue-warn {
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+.skills-issue-info {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.skills-issue-ok {
+  background: var(--success-soft);
+  color: var(--success);
 }
 
-.schedule-form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.skills-bot-row-focus {
+  background: var(--accent-soft);
+  outline: 1px solid rgba(108, 140, 255, 0.35);
 }
 
-.schedule-form-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
+.skills-wizard-target-hint {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: var(--accent-soft);
+  color: var(--accent);
 }
 
-.schedule-form-field input[type="text"],
-.schedule-form-field textarea {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--border-soft);
-  border-radius: 6px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: 13px;
+/* Review round: pack card highlight + library name-filter chip */
+.skills-pack-card-focus {
+  outline: 1px solid rgba(108, 140, 255, 0.5);
+  background: var(--accent-soft);
+}
+.skills-library-filter-chip {
+  font-size: 12px;
+  padding: 2px 10px;
+  border: none;
+  border-radius: 12px;
   font-family: inherit;
+  cursor: pointer;
+  background: var(--accent-soft);
+  color: var(--accent);
+  white-space: nowrap;
+}
+.skills-library-filter-chip:hover {
+  filter: brightness(1.2);
+  text-decoration: underline;
 }
 
-.schedule-form-field textarea {
-  resize: vertical;
-  min-height: 80px;
+/* Unknown pack-health state (pack API never loaded) */
+.skills-health-unknown {
+  background: var(--surface-muted);
+  color: var(--muted);
 }
 
-.schedule-form-help {
-  font-size: 11px;
-  color: var(--text-dim);
+/* Neutral chip for unresolvable pack refs (pack data not loaded) */
+.skills-chip-unknown {
+  background: var(--surface-muted);
+  color: var(--muted);
 }
 
-.schedule-form-help-with-count {
+/* Actionable rows for referenced-but-not-installed skills under a filter */
+.skills-missing-list {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
 }
-
-.schedule-form-help-with-count span {
-  flex: none;
+.skills-missing-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.skills-missing-row-name {
+  font-weight: 600;
+}
+.skills-missing-row button {
+  margin-left: auto;
+  font-size: 12px;
+  padding: 2px 10px;
 }
 
-.schedule-form-radio-group {
+/* --- Skills dialogs (install wizard / pack editor / post-install) ---------
+   These class names shipped with the pack redesign but never had any CSS, so
+   the dialogs rendered as raw UA-styled markup. Styled here against the real
+   design tokens so they match the rest of the dashboard in both themes. */
+.bd-dialog {
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  color: var(--fg);
+  padding: 0;
+  max-width: min(560px, calc(100vw - 32px));
+  width: 100%;
+  box-shadow: var(--modal-shadow);
+}
+.bd-dialog::backdrop {
+  background: var(--modal-backdrop);
+}
+.bd-dialog > form {
   display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 14px;
+  padding: 20px 22px;
+  margin: 0;
 }
-
-.schedule-form-radio-group label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+.bd-dialog h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 650;
+}
+.bd-dialog label {
+  display: block;
   font-size: 13px;
-  cursor: pointer;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.bd-dialog input[type="text"],
+.bd-dialog input:not([type]),
+.bd-dialog textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--fg);
+  font: inherit;
+}
+.bd-dialog input:focus-visible,
+.bd-dialog textarea:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.bd-dialog input:disabled {
+  background: var(--surface-muted);
+  color: var(--muted);
 }
 
-.schedule-form-placement {
+/* Wizard step rail: was rendering as run-together text "1.选择来源2.填写详情" */
+.skills-wizard-steps {
   display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 9px 10px;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--muted);
+}
+.skills-wizard-steps span {
+  padding: 3px 10px;
+  border-radius: var(--radius-full);
+  background: var(--surface-muted);
   border: 1px solid var(--border-soft);
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--surface-muted) 46%, transparent);
+  white-space: nowrap;
 }
-
-.schedule-form-placement strong {
-  color: var(--text);
-  font-size: 13px;
+.skills-wizard-steps span.active {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
   font-weight: 600;
 }
+.skills-wizard-source-hint small,
+.skills-wizard-summary {
+  display: block;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.6;
+}
+.skills-wizard-summary p {
+  margin: 2px 0;
+}
 
-.schedule-form-toggle {
-  flex-direction: row !important;
-  align-items: flex-start;
+.skills-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
   gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-soft);
+  margin-top: 2px;
+}
+.skills-dialog-actions button,
+.bd-button {
+  height: var(--button-compact-height);
+  padding: 0 var(--button-padding-x);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+  color: var(--fg);
+  font: inherit;
+  cursor: pointer;
+}
+.skills-dialog-actions button:hover:not(:disabled),
+.bd-button:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.skills-dialog-actions button.primary,
+.bd-button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.skills-dialog-actions button.primary:hover:not(:disabled),
+.bd-button.primary:hover:not(:disabled) {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+.skills-dialog-actions button.danger,
+.bd-button.danger {
+  color: var(--danger);
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+.skills-dialog-actions button:disabled,
+.bd-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.bd-button.small {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
 }
 
-.schedule-form-toggle > span {
+/* Candidate / member pick lists inside dialogs */
+.skills-pack-skill-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  max-height: 260px;
+  overflow: auto;
+  padding: 6px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
 }
-
-.schedule-form-error {
-  color: var(--danger, #e5484d);
-  font-size: 12px;
-  margin: 0;
+.skills-pack-skill-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 0;
+  color: var(--fg);
+  cursor: pointer;
+}
+.skills-pack-skill-item:hover {
+  background: var(--accent-soft);
+}
+.skills-pack-skill-name {
+  font-weight: 600;
+}
+.skills-pack-skill-desc {
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-
-.schedule-form-actions {
+.skills-pack-include-head {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
   gap: 10px;
-  margin-top: 8px;
+  justify-content: space-between;
 }
-
-.schedule-form-cancel,
-.schedule-form-submit {
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 13px;
-  cursor: pointer;
-  border: 1px solid var(--border-soft);
+.skills-pack-skill-search {
+  max-width: 220px;
 }
-
-.schedule-form-cancel {
-  background: transparent;
-  color: var(--text);
+.skills-pack-select-all {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  margin: 6px 0;
 }
-
-.schedule-form-submit {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
+.skills-resolved-preview {
+  max-height: 180px;
+  overflow: auto;
+  font-size: 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  background: var(--surface-muted);
 }
-
-.schedule-form-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.skills-resolved-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 2px 0;
 }
-
-.schedule-edit-button,
-.schedule-delete-button {
-  min-width: 56px !important;
+.skills-install-selection-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
 }
 
-.schedule-delete-button {
-  color: var(--danger, #e5484d) !important;
-  border-color: color-mix(in srgb, var(--danger, #e5484d) 48%, var(--border-soft)) !important;
+/* Empty states (pack grid / unavailable) */
+.skills-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 28px 16px;
+  color: var(--muted);
+  text-align: center;
 }
 .feed-group-auth-overlay {
   position: fixed;
@@ -26136,3 +27349,253 @@ button.ui-refresh-button.is-loading .ui-action-icon {
   background: var(--accent-soft);
   color: var(--accent-strong);
 }
+
+/* --- 安装 Skill 表单：主输入优先，高级项折叠 ------------------------------
+   旧布局用两列 grid，左列堆 4 个区块、右列只有「仓库内路径」，主按钮被挤到
+   右列中部，视觉上与任何字段都不相关。改为单列：来源输入是主角，路径/Ref/
+   扫描深度收进折叠区，操作按钮回到表单底部。 */
+.skills-install-panel .skills-install-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.skills-install-panel .skills-source-label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.skills-install-panel .skills-source-control input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 来源说明：默认收起，保留主输入的留白；点击问号后再展开完整格式。 */
+.skills-source-heading {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 18px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.skills-source-heading > label {
+  font-weight: 700;
+}
+.skills-source-help-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-height: 16px;
+  padding: 0;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--muted) 7%, transparent);
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+}
+.skills-source-help-trigger:hover,
+.skills-source-help-trigger:focus-visible,
+.skills-source-help-trigger[aria-expanded="true"] {
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft));
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  color: var(--accent);
+  outline: none;
+}
+.skills-source-help-trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+}
+.skills-source-help-popover {
+  position: absolute;
+  left: 0;
+  top: calc(100% + 8px);
+  z-index: 1500;
+  box-sizing: border-box;
+  width: min(580px, calc(100vw - 72px));
+  padding: 16px 18px 16px 24px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-xl);
+  background: var(--surface-raised);
+  box-shadow: var(--modal-shadow);
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.skills-source-help-popover::before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 16px;
+  bottom: 16px;
+  width: 3px;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+}
+.skills-source-help-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-soft);
+}
+.skills-source-help-head > div {
+  display: grid;
+  gap: 2px;
+}
+.skills-source-help-head strong {
+  color: var(--fg);
+  font-size: 13px;
+}
+.skills-source-help-head span {
+  color: var(--muted);
+}
+.skills-source-help-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+.skills-source-help-close:hover,
+.skills-source-help-close:focus-visible {
+  background: var(--surface-muted);
+  color: var(--fg);
+  outline: none;
+}
+.skills-source-help-list {
+  display: grid;
+  gap: 12px;
+  padding-top: 12px;
+}
+.skills-source-help-list section {
+  display: grid;
+  gap: 3px;
+}
+.skills-source-help-list section > strong {
+  color: var(--fg);
+  font-size: 12.5px;
+}
+.skills-source-help-list section > span {
+  color: var(--muted);
+}
+.skills-source-help-list code {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin-top: 2px;
+  padding: 4px 7px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+/* 高级选项折叠区 */
+.skills-install-advanced {
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+}
+.skills-install-advanced > summary {
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: var(--muted);
+  list-style-position: inside;
+}
+.skills-install-advanced[open] > summary {
+  border-bottom: 1px solid var(--border-soft);
+  color: var(--fg);
+}
+.skills-install-advanced-body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+  padding: 12px;
+}
+.skills-install-advanced-body .skills-install-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+}
+.skills-install-advanced-body .skills-install-field input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--fg);
+  font: inherit;
+}
+.skills-install-advanced-body small {
+  color: var(--muted);
+  font-size: 11.5px;
+}
+.skills-scan-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+}
+.skills-scan-toggle > span {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* 操作行：次要入口在左，主操作在右下 */
+.skills-install-panel .skills-install-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding-top: 2px;
+}
+.skills-local-discovery-link {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 13px;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+}
+.skills-install-panel .skills-install-actions .primary {
+  height: var(--button-compact-height);
+  padding: 0 var(--button-padding-x);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: inherit;
+  cursor: pointer;
+}
+.skills-install-panel .skills-install-actions .primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}