@forgeax/interface 0.4.1

package/dist/package/browser/components/Bus/BusAdminPanel.css

@@ -0,0 +1,2425 @@
+/* P2.6d — Bus admin panel styles. Lives in the MainArea slot so the panel
+   fills the same flex column the Preview/Page modes own (vertical
+   scroll, no horizontal bleed). */
+
+.bus-admin {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 18px 22px 32px;
+  background: var(--bg-0);
+  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
+  font-size: 12px;
+}
+
+.ba-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.ba-title {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ba-title-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ba-title-meta {
+  font-size: 11px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  font-family: var(--font-mono);
+}
+
+.ba-refresh {
+  background: rgba(212, 255, 72, 0.08);
+  border: 1px solid rgba(212, 255, 72, 0.25);
+  color: var(--primary);
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.ba-refresh:hover { background: rgba(212, 255, 72, 0.16); }
+
+.ba-error {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: rgba(255, 107, 107, 0.08);
+  border: 1px solid rgba(255, 107, 107, 0.25);
+  color: var(--accent-error);
+  font-size: 11px;
+}
+
+.ba-empty {
+  padding: 18px;
+  text-align: center;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  font-style: italic;
+}
+
+/* P2.6e — kind chip + search filter bar; sits between head and groups. */
+.ba-filterbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+.ba-chips {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.ba-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px 3px 9px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--text-muted, rgba(255, 255, 255, 0.55));
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
+}
+.ba-chip:hover { background: rgba(255, 255, 255, 0.08); }
+/* P3.57 — focus ring on chip for arrow-key roving tabindex. Pixel-mirrors
+   `.ws-icon-btn:focus-visible` (Sidebar P3.51), `.mode-tab:focus-visible`
+   (TopBar P3.53), `.dash-nav-item:focus-visible` (Dashboard P3.54),
+   `.tab:focus-visible` (TabStrip P3.55). Sixth surface in the family. */
+.ba-chip:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.55);
+  outline-offset: -1px;
+  border-radius: 999px;
+}
+/* P3.57 — `←→` key-cap chip in the filter chip row. Pixel-mirrors `.ts-kbd`
+   (P3.55), `.dash-nav-kbd` (P3.54), `.tb-center-kbd` (P3.53),
+   `.ss-header-kbd` (P3.51), `.ss-footer-kbd` (P3.50). Sixth surface in the
+   key-cap family. Sits before the first kind chip so the keyboard contract
+   is visible without any input. */
+.ba-kbd {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0;
+  padding: 0 3px;
+  margin: 0 4px 0 0;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.5;
+  user-select: none;
+  flex-shrink: 0;
+}
+.ba-chip.is-off {
+  opacity: 0.32;
+  filter: grayscale(0.6);
+}
+.ba-chip-count {
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 0.78);
+  font-variant-numeric: tabular-nums;
+}
+
+.ba-chip.k-extension { background: rgba(212, 255, 72, 0.10); border-color: rgba(212, 255, 72, 0.32); color: var(--primary); }
+.ba-chip.k-extension { background: rgba(212, 255, 72, 0.10); border-color: rgba(212, 255, 72, 0.32); color: var(--primary); }
+.ba-chip.k-agent { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); color: var(--color-role-orchestrator); }
+.ba-chip.k-cli-provider { background: rgba(108, 196, 255, 0.10); border-color: rgba(108, 196, 255, 0.34); color: var(--color-kind-cli-provider); }
+.ba-chip.k-model-binding { background: rgba(126, 231, 196, 0.10); border-color: rgba(126, 231, 196, 0.32); color: var(--accent-mint); }
+.ba-chip.k-skill { background: rgba(255, 200, 120, 0.10); border-color: rgba(255, 200, 120, 0.34); color: var(--color-role-narrative); }
+.ba-chip.k-tool { background: rgba(255, 140, 66, 0.10); border-color: rgba(255, 140, 66, 0.34); color: var(--color-role-coding); }
+
+/*
+ * P4.84 — kind glyph prefix on .ba-chip-name (filter bar chip label)
+ *
+ * Mirrors the P4.83 glyph system from .ba-kind-tag::before to the filter
+ * bar chip row, so both kind-identity surfaces — section header (top of
+ * each kind block) and filter chip row (top of the panel) — share the
+ * same 6-glyph alphabet. Player can now scan either surface by
+ * silhouette and the eye trains a single ▦/◆/⌘/◈/★/✦ → kind mapping.
+ *
+ *   extension     ▦  panel/board
+ *   agent         ◆  diamond
+ *   cli-provider  ⌘  command / process
+ *   model-binding ◈  containing diamond
+ *   skill         ★  star
+ *   tool          ✦  pointed star
+ *
+ * Glyph inherits color from .ba-chip.k-* tribe-color (same family as
+ * .ba-kind-tag), opacity 0.8 keeps it recessed against the kind text.
+ * margin-right 4px (vs P4.83's 5px) is one pixel tighter because the
+ * chip pill is more compact than the section header tag.
+ */
+.ba-chip-name::before {
+  display: inline-block;
+  margin-right: 4px;
+  opacity: 0.8;
+  font-weight: 600;
+}
+.ba-chip.k-extension .ba-chip-name::before { content: '▦'; }
+.ba-chip.k-extension .ba-chip-name::before { content: '▦'; }
+.ba-chip.k-agent .ba-chip-name::before { content: '◆'; }
+.ba-chip.k-cli-provider .ba-chip-name::before { content: '⌘'; }
+.ba-chip.k-model-binding .ba-chip-name::before { content: '◈'; }
+.ba-chip.k-skill .ba-chip-name::before { content: '★'; }
+.ba-chip.k-tool .ba-chip-name::before { content: '✦'; }
+
+.ba-search {
+  flex: 1 1 220px;
+  min-width: 180px;
+  max-width: 360px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+  transition: border-color 0.12s, background 0.12s;
+}
+.ba-search::placeholder { color: rgba(255, 255, 255, 0.32); }
+.ba-search:focus {
+  border-color: rgba(212, 255, 72, 0.45);
+  background: rgba(212, 255, 72, 0.04);
+}
+
+.ba-reset {
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: rgba(255, 107, 107, 0.06);
+  border: 1px solid rgba(255, 107, 107, 0.22);
+  color: var(--accent-error);
+  font-family: inherit;
+  font-size: 10px;
+  cursor: pointer;
+}
+.ba-reset:hover { background: rgba(255, 107, 107, 0.14); }
+
+.ba-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.ba-kind {
+  background: var(--bg-1);
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.ba-kind-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.ba-kind-tag {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+  font-family: var(--font-mono);
+}
+.ba-kind-tag.k-extension { background: rgba(212, 255, 72, 0.12); color: var(--primary); }
+.ba-kind-tag.k-extension { background: rgba(212, 255, 72, 0.12); color: var(--primary); }
+.ba-kind-tag.k-agent { background: rgba(168, 85, 247, 0.14); color: var(--color-role-orchestrator); }
+.ba-kind-tag.k-cli-provider { background: rgba(108, 196, 255, 0.12); color: var(--color-kind-cli-provider); }
+.ba-kind-tag.k-model-binding { background: rgba(126, 231, 196, 0.1); color: var(--accent-mint); }
+.ba-kind-tag.k-skill { background: rgba(255, 200, 120, 0.12); color: var(--color-role-narrative); }
+.ba-kind-tag.k-tool { background: rgba(255, 140, 66, 0.12); color: var(--color-role-coding); }
+
+/*
+ * P4.83 — kind glyph prefix on .ba-kind-tag (section header kind label)
+ *
+ * Section headers now show a kind-specific Unicode glyph immediately
+ * before the all-caps kind text. Each of the 6 bus kinds gets a
+ * 1-character visual anchor that reads faster than mono text alone,
+ * letting the player scan kind sections by silhouette rather than by
+ * reading every label. Glyphs are picked from Geometric Shapes /
+ * Misc Symbols Unicode ranges for cross-platform monospace stability:
+ *
+ *   extension     ▦  panel/board
+ *   agent         ◆  diamond
+ *   cli-provider  ⌘  command / process
+ *   model-binding ◈  containing diamond
+ *   skill         ★  star
+ *   tool          ✦  pointed star
+ *
+ * The pseudo inherits its color from the parent .ba-kind-tag.k-* rule,
+ * so the glyph automatically follows the tribe-color of its kind.
+ * opacity 0.85 keeps it subtly recessed against the bolder all-caps
+ * text. margin-right 5px separates the glyph from the existing kind
+ * text without changing the pill's outer padding or layout footprint.
+ */
+.ba-kind-tag::before {
+  display: inline-block;
+  margin-right: 5px;
+  opacity: 0.85;
+  font-weight: 600;
+}
+.ba-kind-tag.k-extension::before { content: '▦'; }
+.ba-kind-tag.k-extension::before { content: '▦'; }
+.ba-kind-tag.k-agent::before { content: '◆'; }
+.ba-kind-tag.k-cli-provider::before { content: '⌘'; }
+.ba-kind-tag.k-model-binding::before { content: '◈'; }
+.ba-kind-tag.k-skill::before { content: '★'; }
+.ba-kind-tag.k-tool::before { content: '✦'; }
+
+/*
+ * P4.85 — 4px tribe-color left strip on .ba-kind-head (section header row).
+ *
+ * Completes the kind-identity stack inside BusAdminPanel:
+ *   - .ba-kind-tag.k-* glyph + color  (P4.83 — pill silhouette)
+ *   - .ba-chip-name::before glyph     (P4.84 — filter row silhouette)
+ *   - .ba-kind-head left strip        (P4.85 — section banding · this rule)
+ *
+ * Detected via :has() rather than adding a class to the <header> element,
+ * so no markup change is required — the same .k-* tribe colors live on
+ * the child .ba-kind-tag and the parent header inherits the identity via
+ * descendant selector. Implemented as inset box-shadow (4px wide) instead
+ * of border-left so the existing padding/layout is unchanged.
+ */
+.ba-kind-head:has(.ba-kind-tag.k-extension) { box-shadow: inset 4px 0 0 var(--primary); }
+.ba-kind-head:has(.ba-kind-tag.k-extension) { box-shadow: inset 4px 0 0 var(--primary); }
+.ba-kind-head:has(.ba-kind-tag.k-agent) { box-shadow: inset 4px 0 0 var(--color-role-orchestrator); }
+.ba-kind-head:has(.ba-kind-tag.k-cli-provider) { box-shadow: inset 4px 0 0 var(--color-kind-cli-provider); }
+.ba-kind-head:has(.ba-kind-tag.k-model-binding) { box-shadow: inset 4px 0 0 var(--accent-mint); }
+.ba-kind-head:has(.ba-kind-tag.k-skill) { box-shadow: inset 4px 0 0 var(--color-role-narrative); }
+.ba-kind-head:has(.ba-kind-tag.k-tool) { box-shadow: inset 4px 0 0 var(--color-role-coding); }
+
+/*
+ * P3.44 — kind-section header tag becomes the 3rd producer of the
+ * pendingSidebarKindFlash store-slot (after P3.38 ba-chip filter row +
+ * P3.43 detail-row .ba-backlink-kind). Click any section header kind tag
+ * → BUS KINDS chip of same kind pulses for 1.5s in Sidebar footer.
+ *
+ * The tag is now a <button>, so we reset native chrome (font/family/cursor)
+ * and layer hover/focus rings on top of the per-kind background+color so
+ * the player gets a visual "I can click this" signal without disturbing
+ * the existing color family lock.
+ */
+button.ba-kind-tag.is-link {
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: transform 110ms ease, border-color 110ms ease, box-shadow 110ms ease, filter 110ms ease;
+  line-height: 1.1;
+}
+button.ba-kind-tag.is-link:hover {
+  filter: brightness(1.18);
+  transform: translateY(-0.5px);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+button.ba-kind-tag.is-link:focus-visible {
+  outline: none;
+  border-color: currentColor;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
+}
+button.ba-kind-tag.is-link:active {
+  transform: translateY(0);
+  filter: brightness(0.95);
+}
+
+/*
+ * P4.96 — detail-row kind tag scoped variant. The kind tag inside the
+ * `.ba-detail-grid` cell shares the .ba-kind-tag.is-link base button chrome
+ * (P3.43) but advertises a different action than the section-header sibling
+ * (section header → setPendingSidebarKindFlash; detail cell → solo-filter
+ * BusAdminPanel via setEnabledKinds). To keep the two visually distinct
+ * without inventing a new tribe color, we layer a subtle 1px inner ring
+ * tinted with currentColor (= kind tribe color, already set by the .k-*
+ * rule above) at static rest, then upgrade to the brighter 0.32 ring on
+ * hover. Net effect: static state shows a faint outlined chip that reads
+ * as "actionable" without flicker, and hover/focus is clearly distinct
+ * from the section-header tag's looser border-color treatment.
+ */
+.ba-detail-kind-link {
+  box-shadow: inset 0 0 0 1px currentColor;
+  opacity: 0.92;
+}
+.ba-detail-kind-link:hover {
+  box-shadow: inset 0 0 0 1px currentColor,   0 0 0 1px currentColor;
+  opacity: 1;
+}
+.ba-detail-kind-link:focus-visible {
+  box-shadow: inset 0 0 0 1px currentColor,   0 0 0 2px rgba(255, 255, 255, 0.18);
+  opacity: 1;
+}
+
+.ba-kind-count {
+  font-size: 11px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  font-family: var(--font-mono);
+}
+
+.ba-kind-desc {
+  font-size: 11px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+}
+
+/* P4.14 — cli-provider section health LED. Lives between .ba-kind-count
+   and .ba-kind-desc, only rendered for kind === 'cli-provider'. Polls
+   /api/cli-providers every 10s; tone classes flip the dot color (lime ok /
+   amber warn / red down / dim loading-pulse). Hover title lists each
+   provider's ok/down line. Mirrors PreviewMode .pt-prov dot family (P4.7)
+   but inlined as a static pill — no click, the section header tag already
+   owns the click behaviour. */
+.ba-kind-prov-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+}
+.ba-kind-prov-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-prov-led.is-ok .ba-kind-prov-dot {
+  background: var(--prim-color-green-400);
+  box-shadow: none;
+}
+.ba-kind-prov-led.is-ok {
+  border-color: rgba(75, 222, 128, 0.35);
+  color: rgba(176, 240, 195, 0.92);
+}
+.ba-kind-prov-led.is-warn .ba-kind-prov-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-prov-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-prov-led.is-down .ba-kind-prov-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-prov-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-prov-led.is-loading .ba-kind-prov-dot {
+  animation: ba-kind-prov-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-prov-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-prov-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* P4.33 — extension section LED. Lives inside the extension KindSection
+   header (between .ba-kind-count and .ba-kind-desc) only. Driven by the
+   parent BusAdminPanel polling /api/bus/ui/surfaces every 10s and joining
+   mounted plugin-layer wb ids against the extension plugin list. Tone
+   classes mirror .ba-kind-prov-led shape but lean on the extension tribe
+   color (lime #d4ff48 — same as .ba-kind-tag.k-extension) so the section
+   header reads as one visual unit. The pulse + warn/down/loading palette
+   stays identical to .ba-kind-prov-led for keyboard muscle memory across
+   sections. */
+.ba-kind-page-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+}
+.ba-kind-page-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-page-led.is-ok .ba-kind-page-dot {
+  background: var(--primary);
+  box-shadow: none;
+}
+.ba-kind-page-led.is-ok {
+  border-color: rgba(212, 255, 72, 0.38);
+  color: rgba(228, 255, 168, 0.95);
+}
+.ba-kind-page-led.is-warn .ba-kind-page-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-page-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-page-led.is-down .ba-kind-page-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-page-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-page-led.is-loading .ba-kind-page-dot {
+  animation: ba-kind-page-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-page-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-page-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* P4.34 — agent section LED. Lives inside the agent KindSection header
+   (between .ba-kind-count and .ba-kind-desc) only. Driven by the parent
+   BusAdminPanel polling listBusPlugins('agent') + dashApi.daemons.list()
+   every 10s. Tone classes mirror .ba-kind-prov-led / .ba-kind-page-led shape
+   but the ok state leans on the agent tribe color (violet #c4a3ff — same
+   as .ba-kind-tag.k-agent / TabStrip .ts-agent-chip / TopBar tb-agent) so
+   the section header reads as one violet visual unit. Warn / down / loading
+   palette stays identical to the prior two LEDs for keyboard muscle
+   memory across sections. */
+.ba-kind-agent-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ba-kind-agent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-agent-led.is-ok .ba-kind-agent-dot {
+  background: var(--color-role-orchestrator);
+  box-shadow: none;
+}
+.ba-kind-agent-led.is-ok {
+  border-color: rgba(196, 163, 255, 0.42);
+  color: rgba(228, 215, 255, 0.95);
+}
+.ba-kind-agent-led.is-warn .ba-kind-agent-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-agent-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-agent-led.is-down .ba-kind-agent-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-agent-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-agent-led.is-loading .ba-kind-agent-dot {
+  animation: ba-kind-agent-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-agent-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-agent-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* P4.35 — model-binding section LED. Lives in the model-binding KindSection
+   header (between .ba-kind-count and .ba-kind-desc). Driven by parent
+   BusAdminPanel polling listBusPlugins('model-binding') + dashApi.providers()
+   every 10s, joined via VENDOR_TO_PROVIDER map. Tone classes mirror the prior
+   3 section LEDs (prov / wb / agent) but ok leans on the model-binding tribe
+   color teal #7be7c4 — identical to .ba-kind-tag.k-model-binding /
+   .ba-chip.k-model-binding / .ba-backlink-kind.k-model-binding so the section
+   header reads as one teal visual unit. Warn / down / loading palette
+   identical to prior LEDs for keyboard muscle memory. */
+.ba-kind-mb-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ba-kind-mb-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-mb-led.is-ok .ba-kind-mb-dot {
+  background: var(--accent-mint);
+  box-shadow: none;
+}
+.ba-kind-mb-led.is-ok {
+  border-color: rgba(123, 231, 196, 0.42);
+  color: rgba(196, 240, 222, 0.95);
+}
+.ba-kind-mb-led.is-warn .ba-kind-mb-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-mb-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-mb-led.is-down .ba-kind-mb-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-mb-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-mb-led.is-loading .ba-kind-mb-dot {
+  animation: ba-kind-mb-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-mb-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-mb-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* P4.36 — skill section LED. Lives in the skill KindSection header (between
+   .ba-kind-count and .ba-kind-desc). Driven by parent BusAdminPanel polling
+   listBusPlugins('skill') every 10s. Tone classes mirror the prior 4 section
+   LEDs (prov / wb / agent / mb) but ok leans on the skill tribe color gold
+   #ffc878 — identical to .ba-kind-tag.k-skill / .ba-chip.k-skill /
+   .ba-backlink-kind.k-skill so the section header reads as one gold visual
+   unit. Warn / down / loading palette identical to prior LEDs for keyboard
+   muscle memory. 5th of 5 BusAdminPanel section LEDs covered today (with
+   `tool` the lone remaining kind for 6/6 ceiling). */
+.ba-kind-skill-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ba-kind-skill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-skill-led.is-ok .ba-kind-skill-dot {
+  background: var(--color-role-narrative);
+  box-shadow: none;
+}
+.ba-kind-skill-led.is-ok {
+  border-color: rgba(255, 200, 120, 0.42);
+  color: rgba(255, 222, 178, 0.95);
+}
+.ba-kind-skill-led.is-warn .ba-kind-skill-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-skill-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-skill-led.is-down .ba-kind-skill-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-skill-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-skill-led.is-loading .ba-kind-skill-dot {
+  animation: ba-kind-skill-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-skill-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-skill-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+/* P4.37 — tool section LED. Closes the BusAdminPanel section-LED grid at
+   6/6 (cli-provider P4.14 + extension P4.33 + agent P4.34 + model-binding
+   P4.35 + skill P4.36 + tool P4.37). Same pill grammar as prior 5 LEDs;
+   ok tone leans on the tool tribe color orange #ff8c42 identical to
+   .ba-kind-tag.k-tool / .ba-chip.k-tool / cb-tl-strip (P3.84) so the
+   section header reads as one orange visual unit. Warn / down / loading
+   palette identical for keyboard muscle memory. */
+.ba-kind-tool-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px 2px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  color: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.03);
+  user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ba-kind-tool-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+}
+.ba-kind-tool-led.is-ok .ba-kind-tool-dot {
+  background: var(--color-role-coding);
+  box-shadow: none;
+}
+.ba-kind-tool-led.is-ok {
+  border-color: rgba(255, 140, 66, 0.42);
+  color: rgba(255, 200, 168, 0.95);
+}
+.ba-kind-tool-led.is-warn .ba-kind-tool-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-kind-tool-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-kind-tool-led.is-down .ba-kind-tool-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-kind-tool-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-kind-tool-led.is-loading .ba-kind-tool-dot {
+  animation: ba-kind-tool-pulse 1.2s ease-in-out infinite;
+}
+.ba-kind-tool-count {
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+@keyframes ba-kind-tool-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+.ba-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.ba-table th,
+.ba-table td {
+  padding: 7px 12px;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.ba-table tr:last-child td { border-bottom: none; }
+.ba-table th {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  background: rgba(255, 255, 255, 0.02);
+}
+.ba-table tr:hover td { background: rgba(255, 255, 255, 0.025); }
+.ba-table tr.is-experimental td { /* subtle stripe for experimental rows */
+  box-shadow: inset 2px 0 0 rgba(255, 200, 120, 0.35);
+}
+
+.ba-table .c-chev { width: 24px; padding-left: 8px; padding-right: 0; }
+.ba-table .c-id { width: 28%; }
+.ba-table .c-name { width: 32%; }
+.ba-table .c-ver { width: 8%; font-family: var(--font-mono); color: var(--text-muted); }
+
+/* P4.62 — bumped-version pill in BusAdminPanel rows.
+   Extends the "purple = bumped past 0.0.x = real version" language from
+   PageMode (P4.58 tile chip / P4.59 strip pill / P4.60 corner ᵛ /
+   P4.61 tile frame) into the 6th surface — the Bus admin table itself.
+   Reuses the #c4a3ff purple family verbatim (0.95 text / 0.10 bg / 0.42 border).
+   Plain (non-bumped) rows get a neutral pill wrapper for vertical rhythm. */
+.ba-table .ba-ver-pill {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 1.3;
+}
+.ba-table .ba-ver-pill.bumped {
+  color: rgba(196, 163, 255, 0.95);
+  background: rgba(196, 163, 255, 0.10);
+  border: 1px solid rgba(196, 163, 255, 0.42);
+  font-weight: 600;
+}
+/* P4.63 — row-level bumped accent. Promotes the P4.62 cell pill to row depth
+   so a scan of the table catches the bumped manifest at a glance (no need to
+   read the version column). Mirrors PageMode P4.61's 2px inset left frame
+   edge with the same #c4a3ff purple family. Composes with is-expanded — the
+   cyan expanded bg is overridden when bumped, keeping the bumped frame the
+   dominant identity signal (the chev still flips so expanded state remains
+   readable from the chevron column). */
+.ba-table tr.is-bumped td {
+  background: rgba(196, 163, 255, 0.035);
+  box-shadow: inset 2px 0 0 rgba(196, 163, 255, 0.55);
+}
+.ba-table tr.is-bumped:hover td {
+  background: rgba(196, 163, 255, 0.075);
+  box-shadow: inset 2px 0 0 rgba(196, 163, 255, 0.75);
+}
+.ba-table tr.is-bumped.is-expanded td {
+  background: rgba(196, 163, 255, 0.085);
+  border-bottom-color: rgba(196, 163, 255, 0.32);
+}
+.ba-table .c-page { width: 22%; }
+.ba-table .c-flags { width: 8%; }
+
+/* P4.64 — column header semantic legend. Under the `version` th, a single-line
+   subtitle spells out the 0.0.x = placeholder ↔ 0.1+ = bumped semantic that
+   P4.58–P4.63 painted purple across 6 surfaces (PageMode tile chip /
+   strip pill / corner ᵛ / tile frame + BusAdminPanel cell pill / row tint).
+   Inline-block second line inside the th so the table header now has 2-axis
+   density (label + meaning) — the player no longer has to remember what the
+   purple pill means: the legend sits one row above each pill. The <em>bumped</em>
+   word is painted in the same #c4a3ff purple family so the legend points back
+   to the pixels it describes. text-transform/letter-spacing reset because the
+   parent th is uppercase; legend stays readable mixed-case. */
+.ba-table th.c-ver { white-space: nowrap; }
+.ba-table th.c-ver .ba-th-sub {
+  display: block;
+  margin-top: 2px;
+  font-size: 9px;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: rgba(255, 255, 255, 0.32);
+  font-family: var(--font-mono);
+}
+.ba-table th.c-ver .ba-th-sub em {
+  font-style: normal;
+  color: rgba(196, 163, 255, 0.78);
+  font-weight: 600;
+}
+
+/* P2.6f — chevron + clickable row + detail row */
+.ba-table tr.is-clickable { cursor: pointer; }
+.ba-table tr.is-clickable:hover td { background: rgba(108, 196, 255, 0.045); }
+.ba-table tr.is-expanded td {
+  background: rgba(108, 196, 255, 0.07);
+  border-bottom-color: rgba(108, 196, 255, 0.22);
+}
+.ba-chev {
+  display: inline-block;
+  width: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  transition: color 0.12s, transform 0.12s;
+  user-select: none;
+}
+.ba-chev.is-open {
+  color: var(--color-kind-cli-provider);
+}
+.ba-table tr.is-clickable:hover .ba-chev { color: var(--color-kind-cli-provider); }
+
+.ba-detail-row td {
+  padding: 0;
+  background: rgba(108, 196, 255, 0.04);
+  border-bottom: 1px solid rgba(108, 196, 255, 0.18);
+  box-shadow: inset 2px 0 0 rgba(108, 196, 255, 0.45);
+}
+.ba-detail {
+  padding: 12px 16px 14px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ba-detail-block {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.ba-detail-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  font-family: var(--font-mono);
+}
+.ba-detail-body {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.55;
+}
+.ba-detail-en {
+  font-style: italic;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
+  font-size: 11px;
+}
+.ba-detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px 18px;
+  margin-top: 2px;
+}
+.ba-detail-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.ba-detail-cell-wide {
+  grid-column: 1 / -1;
+}
+.ba-detail-code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-kind-cli-provider);
+  background: rgba(108, 196, 255, 0.08);
+  padding: 2px 6px;
+  border-radius: 3px;
+  display: inline-block;
+  word-break: break-all;
+  align-self: flex-start;
+}
+/* P4.93 — entry.frontend pill (relative React panel path). Uses the lime
+ * accent family (matches the agent tribe / extension LED) so the player can
+ * tell at a glance "this is the UI source", visually distinct from the cyan
+ * manifest hint pill living in the sibling cell. */
+.ba-detail-entry {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.08);
+  border: 1px solid rgba(212, 255, 72, 0.22);
+}
+/* P4.94 — when the entry.frontend pill is rendered as a deep-link <button>
+ * (extension rows), reset native button chrome and add hover/focus affordances
+ * so the player learns "this lime path is clickable" without breaking the
+ * pill aesthetic. Underline on hover signals the deep-link semantic; bg/border
+ * lift gives tactile feedback. Keeps the lime token, no new colors. */
+button.ba-detail-entry-link {
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
+}
+button.ba-detail-entry-link:hover {
+  background: rgba(212, 255, 72, 0.16);
+  border-color: rgba(212, 255, 72, 0.45);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+button.ba-detail-entry-link:active {
+  transform: translateY(1px);
+}
+button.ba-detail-entry-link:focus-visible {
+  outline: 1px solid rgba(212, 255, 72, 0.7);
+  outline-offset: 2px;
+}
+/* P4.95 — manifest hint cell becomes a click-to-copy button. Sibling pattern
+ * to the lime entry-link from P4.94 but stays in the cyan family that the
+ * .ba-detail-code base already uses for manifest, so the player learns
+ * "cyan = manifest path · lime = panel entry" as paired actionable affordances
+ * without introducing a third color. Hover lifts bg 8%→16% + adds a 1px cyan
+ * border (mirrors entry-link's lift) + underline-2px for the deep-link cue. */
+button.ba-detail-manifest-link {
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  border: 1px solid transparent;
+  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 200ms ease;
+}
+button.ba-detail-manifest-link:hover {
+  background: rgba(108, 196, 255, 0.16);
+  border-color: rgba(108, 196, 255, 0.45);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+button.ba-detail-manifest-link:active {
+  transform: translateY(1px);
+}
+button.ba-detail-manifest-link:focus-visible {
+  outline: 1px solid rgba(108, 196, 255, 0.7);
+  outline-offset: 2px;
+}
+/* Post-click flash: a 1.4s lime-bordered confirmation glow + lime ✓ label.
+ * Uses the lime accent because the entry-link adjacent cell already trained the
+ * player to read lime as "panel/source action complete"; flashing lime here
+ * gives the same "action confirmed" semantic without a new color. */
+button.ba-detail-manifest-link.copied {
+  background: rgba(212, 255, 72, 0.18);
+  border-color: rgba(212, 255, 72, 0.55);
+  box-shadow: 0 0 0 1px rgba(212, 255, 72, 0.25);
+}
+.ba-detail-copy-flash {
+  display: inline-block;
+  margin-left: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--primary);
+  opacity: 0;
+  transform: translateY(-1px);
+  transition: opacity 160ms ease, transform 160ms ease;
+  pointer-events: none;
+}
+.ba-detail-copy-flash.on {
+  opacity: 0.85;
+  transform: translateY(0);
+}
+/* P4.97 — version cell click-to-copy: sibling of P4.95 .ba-detail-manifest-link,
+ * stays in the cyan family (.ba-detail-code base color = cyan) so the player
+ * reads the entire "copy stack" of detail-grid cells as one consistent action
+ * vocabulary. Differs from manifest-link only by being typically a short token
+ * (e.g. "0.1.0") — no break-all needed but inherits it harmlessly. Flash uses
+ * the same lime "action confirmed" cue the manifest-link uses, training the
+ * player on a single "lime flash = copy success" hint across the grid. */
+button.ba-detail-version-link {
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  border: 1px solid transparent;
+  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 200ms ease;
+}
+button.ba-detail-version-link:hover {
+  background: rgba(108, 196, 255, 0.16);
+  border-color: rgba(108, 196, 255, 0.45);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+button.ba-detail-version-link:active {
+  transform: translateY(1px);
+}
+button.ba-detail-version-link:focus-visible {
+  outline: 1px solid rgba(108, 196, 255, 0.7);
+  outline-offset: 2px;
+}
+button.ba-detail-version-link.copied {
+  background: rgba(212, 255, 72, 0.18);
+  border-color: rgba(212, 255, 72, 0.55);
+  box-shadow: 0 0 0 1px rgba(212, 255, 72, 0.25);
+}
+.ba-detail-note {
+  font-size: 10px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.38));
+  font-style: italic;
+  padding-top: 4px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.05);
+}
+
+/* P3.33 — reverse deep-link button bar. Sky-blue family (matches the .ac-bus-pill
+ * forward direction in Sidebar) so the round-trip reads as one consistent
+ * navigation vocabulary. Two button variants share the same shell but vary by
+ * which target kind is in scope: agent → highlight Sidebar card, extension →
+ * switch to Page mode and open that * tab. */
+.ba-backlinks {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.ba-backlink {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: rgba(109, 211, 255, 0.10);
+  border: 1px solid rgba(109, 211, 255, 0.32);
+  color: rgba(109, 211, 255, 0.90);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+.ba-backlink:hover {
+  background: rgba(109, 211, 255, 0.20);
+  border-color: rgba(109, 211, 255, 0.55);
+  transform: translateY(-0.5px);
+}
+.ba-backlink:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(109, 211, 255, 0.55);
+}
+.ba-backlink:active {
+  transform: translateY(0.5px);
+  background: rgba(109, 211, 255, 0.28);
+}
+
+/* P3.43 — kind-flash variant. Each per-kind button is painted in the same
+ * color family as .ba-kind-tag.k-* / .ba-chip.k-* / .ss-kind-chip.k-* so the
+ * player learns "this color = that kind" once and reuses it across the
+ * BusAdmin filter chip row, Sidebar BUS KINDS footer, kind cell tag, AND the
+ * detail-row backlink that flashes them. Replaces the default sky-blue with
+ * per-kind hex by overriding background / border-color / color in turn. */
+.ba-backlink-kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.ba-backlink-kind-dot {
+  font-size: 8px;
+  line-height: 1;
+  opacity: 0.85;
+}
+.ba-backlink-kind.k-cli-provider {
+  background: rgba(108, 196, 255, 0.10);
+  border-color: rgba(108, 196, 255, 0.34);
+  color: var(--color-kind-cli-provider);
+}
+.ba-backlink-kind.k-cli-provider:hover {
+  background: rgba(108, 196, 255, 0.22);
+  border-color: rgba(108, 196, 255, 0.58);
+}
+.ba-backlink-kind.k-cli-provider:focus-visible {
+  box-shadow: 0 0 0 2px rgba(108, 196, 255, 0.55);
+}
+.ba-backlink-kind.k-model-binding {
+  background: rgba(126, 231, 196, 0.10);
+  border-color: rgba(126, 231, 196, 0.36);
+  color: var(--accent-mint);
+}
+.ba-backlink-kind.k-model-binding:hover {
+  background: rgba(126, 231, 196, 0.22);
+  border-color: rgba(126, 231, 196, 0.60);
+}
+.ba-backlink-kind.k-model-binding:focus-visible {
+  box-shadow: 0 0 0 2px rgba(126, 231, 196, 0.55);
+}
+.ba-backlink-kind.k-skill {
+  background: rgba(255, 200, 120, 0.10);
+  border-color: rgba(255, 200, 120, 0.36);
+  color: var(--color-role-narrative);
+}
+.ba-backlink-kind.k-skill:hover {
+  background: rgba(255, 200, 120, 0.22);
+  border-color: rgba(255, 200, 120, 0.60);
+}
+.ba-backlink-kind.k-skill:focus-visible {
+  box-shadow: 0 0 0 2px rgba(255, 200, 120, 0.55);
+}
+.ba-backlink-kind.k-tool {
+  background: rgba(255, 140, 66, 0.10);
+  border-color: rgba(255, 140, 66, 0.36);
+  color: var(--color-role-coding);
+}
+.ba-backlink-kind.k-tool:hover {
+  background: rgba(255, 140, 66, 0.22);
+  border-color: rgba(255, 140, 66, 0.60);
+}
+.ba-backlink-kind.k-tool:focus-visible {
+  box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.55);
+}
+
+.c-id code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-kind-cli-provider);
+  background: rgba(108, 196, 255, 0.06);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.ba-name-zh {
+  font-size: 12px;
+  color: var(--text-primary);
+}
+.ba-desc-zh {
+  font-size: 10px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  margin-top: 3px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ba-page-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.ba-page-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+.ba-page-id {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+}
+.ba-page-pill {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  font-family: var(--font-mono);
+  text-transform: lowercase;
+}
+.ba-page-pill.warn {
+  background: rgba(255, 140, 66, 0.12);
+  color: var(--accent-orange);
+}
+.ba-dim { color: var(--text-muted, rgba(255, 255, 255, 0.3)); }
+
+.ba-flag-pill {
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.ba-flag-pill.exp {
+  background: rgba(255, 200, 120, 0.12);
+  color: var(--color-role-narrative);
+}
+
+.ba-footnote {
+  margin-top: 18px;
+  padding-top: 10px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.06);
+  font-size: 10px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  line-height: 1.6;
+}
+.ba-footnote code {
+  background: rgba(255, 255, 255, 0.06);
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-family: var(--font-mono);
+  color: var(--color-kind-cli-provider);
+}
+
+/* P2.6g — provides.{skills,tools,events,cliProvider} block inside the detail
+   row. Sits between .ba-detail-grid (kind/version/extension cells) and
+   .ba-detail-note (broken[] reminder). Color tokens reuse the existing kind
+   palette so the player keeps the "6 kind = 6 color" muscle memory:
+     - cliProvider → sky-blue (.k-cli-provider)
+     - skill       → amber    (.k-skill)
+     - tool        → orange   (.k-tool)
+     - events      → pink-ish 自定 (no kind=event in PluginKind, so we coin a
+       complementary pink to avoid collision; events are tool-adjacent so a
+       cool tint reads "tool family" without overlapping orange)
+   Capability chips on cliProvider use ●/○ filled/hollow dots so on/off reads
+   at a glance even before color parses. */
+.ba-provides {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 0 4px 0;
+  border-top: 1px dashed rgba(255, 255, 255, 0.06);
+  margin-top: 2px;
+}
+.ba-provides-label {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  font-family: var(--font-mono);
+}
+.ba-provides-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ba-prov-tally {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px dashed rgba(255, 255, 255, 0.06);
+}
+.ba-prov-tally.empty {
+  background: rgba(255, 255, 255, 0.015);
+}
+.ba-prov-tally-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 5px 1px 6px;
+  border-radius: 3px;
+  letter-spacing: 0.04em;
+  border: 1px solid transparent;
+}
+.ba-prov-tally-pill .ba-prov-tally-label {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+}
+.ba-prov-tally-pill .ba-prov-tally-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  font-size: 11px;
+}
+.ba-prov-tally-pill.k-cli-provider {
+  background: rgba(108, 196, 255, 0.14);
+  color: var(--color-kind-cli-provider);
+  border-color: rgba(108, 196, 255, 0.22);
+}
+.ba-prov-tally-pill.k-skill {
+  background: rgba(255, 200, 120, 0.14);
+  color: var(--color-role-narrative);
+  border-color: rgba(255, 200, 120, 0.22);
+}
+.ba-prov-tally-pill.k-tool {
+  background: rgba(255, 140, 66, 0.14);
+  color: var(--color-role-coding);
+  border-color: rgba(255, 140, 66, 0.22);
+}
+.ba-prov-tally-pill.k-event {
+  background: rgba(255, 109, 181, 0.12);
+  color: var(--color-role-design);
+  border-color: rgba(255, 109, 181, 0.20);
+}
+.ba-prov-tally-pill.dim {
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--text-muted, rgba(255, 255, 255, 0.35));
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.ba-prov-tally-pill.dim .ba-prov-tally-count {
+  color: var(--text-muted, rgba(255, 255, 255, 0.3));
+}
+.ba-prov-tally-note {
+  font-size: 10px;
+  font-style: italic;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  margin-left: 4px;
+}
+.ba-prov-block {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 7px 9px 8px 9px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.ba-prov-block.ba-prov-cli {
+  background: rgba(108, 196, 255, 0.05);
+  border-color: rgba(108, 196, 255, 0.18);
+}
+.ba-prov-block.ba-prov-skills {
+  background: rgba(255, 200, 120, 0.05);
+  border-color: rgba(255, 200, 120, 0.18);
+}
+.ba-prov-block.ba-prov-tools {
+  background: rgba(255, 140, 66, 0.05);
+  border-color: rgba(255, 140, 66, 0.18);
+}
+.ba-prov-block.ba-prov-events {
+  background: rgba(255, 109, 181, 0.04);
+  border-color: rgba(255, 109, 181, 0.16);
+}
+.ba-prov-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-height: 18px;
+}
+.ba-prov-tag {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+}
+.ba-prov-tag.k-cli-provider {
+  background: rgba(108, 196, 255, 0.16);
+  color: var(--color-kind-cli-provider);
+}
+.ba-prov-tag.k-skill {
+  background: rgba(255, 200, 120, 0.16);
+  color: var(--color-role-narrative);
+}
+.ba-prov-tag.k-tool {
+  background: rgba(255, 140, 66, 0.16);
+  color: var(--color-role-coding);
+}
+.ba-prov-tag.k-event {
+  background: rgba(255, 109, 181, 0.14);
+  color: var(--color-role-design);
+}
+.ba-prov-id {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-kind-cli-provider);
+  background: rgba(108, 196, 255, 0.08);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.ba-prov-display {
+  font-size: 11px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.ba-prov-count {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 10px;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
+  background: rgba(255, 255, 255, 0.05);
+  padding: 1px 6px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+.ba-prov-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.ba-prov-rowlabel {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  font-family: var(--font-mono);
+  padding-top: 3px;
+  min-width: 78px;
+}
+.ba-prov-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.ba-prov-pill {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 1px 6px;
+  border-radius: 3px;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+}
+.ba-prov-model {
+  color: var(--primary);
+  border-color: rgba(212, 255, 72, 0.20);
+  background: rgba(212, 255, 72, 0.06);
+}
+.ba-prov-skill-id {
+  color: var(--color-role-narrative);
+  border-color: rgba(255, 200, 120, 0.20);
+  background: rgba(255, 200, 120, 0.06);
+}
+.ba-prov-trigger {
+  color: var(--color-kind-cli-provider);
+  border-color: rgba(108, 196, 255, 0.20);
+  background: rgba(108, 196, 255, 0.06);
+}
+.ba-prov-tool-id {
+  color: var(--color-role-coding);
+  border-color: rgba(255, 140, 66, 0.20);
+  background: rgba(255, 140, 66, 0.06);
+}
+.ba-prov-event-name {
+  color: var(--color-role-design);
+  border-color: rgba(255, 109, 181, 0.18);
+  background: rgba(255, 109, 181, 0.05);
+}
+.ba-prov-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.ba-prov-list li {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.ba-prov-sep {
+  color: var(--text-muted, rgba(255, 255, 255, 0.3));
+  font-size: 10px;
+}
+.ba-prov-flag {
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.10);
+  border: 1px solid rgba(212, 255, 72, 0.26);
+  padding: 0px 4px;
+  border-radius: 2px;
+}
+.ba-prov-cap {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+.ba-prov-cap.is-on {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.08);
+  border-color: rgba(212, 255, 72, 0.24);
+}
+.ba-prov-cap.is-off {
+  color: var(--text-muted, rgba(255, 255, 255, 0.32));
+  background: rgba(255, 255, 255, 0.02);
+}
+.ba-prov-cap-dot {
+  font-size: 8px;
+  line-height: 1;
+}
+
+/* P3.21 — cli-provider capability matrix (sits between kind header and table).
+ * 5-col compact grid · lime ● on / dim ○ off · per-col coverage "n/m" pill.
+ * Sky-blue accent borders match .ba-kind-tag.k-cli-provider (#6cc4ff) so the
+ * matrix visually belongs to the cli-provider kind section. Lime ● matches
+ * .ba-prov-cap.is-on so the "on" semantic carries across both surfaces. */
+.ba-cli-matrix {
+  margin: 0 0 12px;
+  padding: 8px 12px 10px;
+  background: rgba(108, 196, 255, 0.04);
+  border-bottom: 1px solid rgba(108, 196, 255, 0.18);
+}
+.ba-cli-matrix-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.ba-cli-matrix-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--color-kind-cli-provider);
+}
+.ba-cli-matrix-meta {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.45));
+  letter-spacing: 0.04em;
+}
+.ba-cli-matrix-table {
+  border-collapse: collapse;
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.ba-cli-matrix-corner {
+  width: 168px;
+  background: transparent;
+}
+.ba-cli-matrix-th {
+  padding: 3px 8px;
+  text-align: center;
+  font-weight: 600;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
+  border-bottom: 1px solid rgba(108, 196, 255, 0.16);
+  vertical-align: bottom;
+}
+.ba-cli-matrix-th-name {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--color-kind-cli-provider);
+  margin-bottom: 2px;
+}
+.ba-cli-matrix-coverage {
+  display: inline-block;
+  font-size: 8px;
+  font-weight: 700;
+  padding: 0 4px;
+  border-radius: 2px;
+  font-variant-numeric: tabular-nums;
+}
+.ba-cli-matrix-coverage.is-full {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.10);
+  border: 1px solid rgba(212, 255, 72, 0.24);
+}
+.ba-cli-matrix-coverage.is-partial {
+  color: var(--color-role-narrative);
+  background: rgba(255, 200, 120, 0.10);
+  border: 1px solid rgba(255, 200, 120, 0.28);
+}
+.ba-cli-matrix-rowname {
+  width: 168px;
+  padding: 4px 8px 4px 0;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
+  white-space: nowrap;
+}
+.ba-cli-matrix-rowname-zh {
+  display: inline-block;
+  font-family: var(--font-base);
+  font-size: 11px;
+  color: var(--text-primary, rgba(255, 255, 255, 0.92));
+  margin-right: 6px;
+}
+.ba-cli-matrix-rowname-id {
+  font-size: 9px;
+  color: var(--text-muted, rgba(255, 255, 255, 0.36));
+  font-family: var(--font-mono);
+}
+.ba-cli-matrix-cell {
+  text-align: center;
+  padding: 4px 8px;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
+  min-width: 52px;
+}
+.ba-cli-matrix-cell.is-on {
+  background: rgba(212, 255, 72, 0.05);
+}
+.ba-cli-matrix-cell.is-on .ba-cli-matrix-dot {
+  color: var(--primary);
+}
+.ba-cli-matrix-cell.is-off .ba-cli-matrix-dot {
+  color: var(--text-muted, rgba(255, 255, 255, 0.22));
+}
+.ba-cli-matrix-dot {
+  font-size: 11px;
+  line-height: 1;
+}
+.ba-cli-matrix-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  padding: 3px 9px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.ba-cli-matrix-summary.is-full {
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.08);
+  border: 1px solid rgba(212, 255, 72, 0.24);
+}
+.ba-cli-matrix-summary.is-partial {
+  color: var(--color-role-narrative);
+  background: rgba(255, 200, 120, 0.08);
+  border: 1px solid rgba(255, 200, 120, 0.28);
+}
+.ba-cli-matrix-summary-dot {
+  font-size: 9px;
+  line-height: 1;
+}
+
+/* P3.58 — `↑↓` key-cap hint bar between the filter bar and the kind sections.
+   Seventh surface in the key-cap chip family (P3.50 footer / P3.51 extension
+   header / P3.53 TopBar mode-tab / P3.54 Dashboard nav / P3.55 ChatPanel
+   TabStrip / P3.57 BusAdmin filter chips ←→ / this bar ↑↓). Sits as a thin
+   row immediately above the kind sections so the keyboard contract is visible
+   without any input. */
+.ba-row-kbd-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px 6px;
+  margin: 2px 0 0;
+  border-top: 1px dashed rgba(255, 255, 255, 0.06);
+  user-select: none;
+}
+.ba-row-kbd-label {
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.42);
+}
+/* P3.58 — keyboard focus ring on table rows. Roving tabindex means at most
+   one row is in the tab order; ↑↓/Home/End move focus internally. Sky-blue
+   2px outline mirrors `.ba-detail-row` accent shadow (same #6cc4ff family),
+   anchoring "focused row" to the same color as "expanded row" so the player
+   reads them as the same axis. */
+.ba-table tr:focus { outline: none; }
+.ba-table tr.is-clickable:focus-visible {
+  outline: 2px solid rgba(108, 196, 255, 0.62);
+  outline-offset: -2px;
+  background: rgba(108, 196, 255, 0.06);
+}
+.ba-table tr.is-clickable:focus-visible td {
+  background: rgba(108, 196, 255, 0.06);
+}
+
+/* P-UI-SURFACES — bus.ui registry strip. Sits between head and filterbar so it
+   reads as a sibling primitive of the plugin table: bus.plugins.list() ↔
+   bus.ui.surfaces.list(). Sky-blue accent (#7dd3fc — same as cli-provider /
+   ChatPanel agent bar) anchors it to the "AI-controllable" theme already
+   established for AI deep-links in the rest of the UI. */
+.ba-ui-surfaces {
+  margin: 0 0 14px 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(125, 211, 252, 0.22);
+  background: rgba(125, 211, 252, 0.05);
+}
+.ba-uis-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+}
+.ba-uis-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-role-art);
+  box-shadow: none;
+}
+.ba-uis-label {
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--color-role-art);
+  font-weight: 600;
+  font-size: 10.5px;
+}
+.ba-uis-count {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: rgba(212, 255, 72, 0.14);
+  border: 1px solid rgba(212, 255, 72, 0.38);
+  color: var(--primary);
+  font: 600 11px/1 var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.ba-uis-sub {
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  font-size: 10.5px;
+}
+.ba-uis-sub code {
+  font: inherit;
+  font-family: var(--font-mono);
+  color: rgba(125, 211, 252, 0.85);
+  background: rgba(125, 211, 252, 0.08);
+  padding: 0 4px;
+  border-radius: 3px;
+}
+.ba-uis-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ba-uis-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  background: rgba(255, 255, 255, 0.03);
+  font-size: 10.5px;
+  line-height: 1.3;
+}
+.ba-uis-chip.is-dim {
+  opacity: 0.55;
+}
+.ba-uis-chip.layer-host {
+  border-color: rgba(212, 255, 72, 0.32);
+  background: rgba(212, 255, 72, 0.06);
+}
+.ba-uis-chip.layer-plugin {
+  border-color: rgba(125, 211, 252, 0.32);
+  background: rgba(125, 211, 252, 0.06);
+}
+.ba-uis-chip.layer-iframe {
+  border-color: rgba(255, 200, 120, 0.32);
+  background: rgba(255, 200, 120, 0.06);
+}
+.ba-uis-layer {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font: 600 9.5px/1 var(--font-mono);
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.32);
+}
+.layer-host .ba-uis-layer { color: var(--primary); }
+.layer-plugin .ba-uis-layer { color: var(--color-role-art); }
+.layer-iframe .ba-uis-layer { color: var(--color-role-narrative); }
+.ba-uis-id {
+  font: 11px/1.3 var(--font-mono);
+  color: var(--text-primary, rgba(255, 255, 255, 0.95));
+}
+.ba-uis-actions {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 3px;
+  font: 10.5px/1 var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+}
+.ba-uis-ai {
+  color: var(--primary);
+  font-weight: 600;
+}
+.ba-uis-sep {
+  color: rgba(255, 255, 255, 0.3);
+}
+.ba-uis-total {
+  color: rgba(255, 255, 255, 0.65);
+}
+.ba-uis-actions-lbl {
+  margin-left: 3px;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: rgba(255, 255, 255, 0.32);
+}
+
+/* Shared capability snapshot. This mirrors the server-side
+   CapabilityDescriptor fields so users can see what crosses kernel boundaries:
+   kind, extension/version, lifecycle and origin/trust. */
+.ba-capability-overview {
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  border: 1px solid rgba(212, 255, 72, 0.20);
+  border-radius: 8px;
+  background: rgba(212, 255, 72, 0.035);
+}
+.ba-capability-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 11px;
+}
+.ba-capability-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--primary);
+  box-shadow: 0 0 8px rgba(212, 255, 72, 0.6);
+}
+.ba-capability-label {
+  color: var(--primary);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+}
+.ba-capability-count,
+.ba-capability-generation {
+  font: 600 10px/1 var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.ba-capability-count {
+  padding: 2px 7px;
+  border: 1px solid rgba(212, 255, 72, 0.35);
+  border-radius: 999px;
+  color: var(--primary);
+  background: rgba(212, 255, 72, 0.12);
+}
+.ba-capability-generation {
+  margin-left: auto;
+  color: rgba(255, 255, 255, 0.40);
+}
+.ba-capability-kinds,
+.ba-capability-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ba-capability-kinds {
+  margin-bottom: 8px;
+}
+.ba-capability-kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 999px;
+  color: rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.03);
+  font: 10px/1 var(--font-mono);
+}
+.ba-capability-kind strong {
+  color: rgba(255, 255, 255, 0.95);
+  font-variant-numeric: tabular-nums;
+}
+.ba-capability-kind-skill { border-color: rgba(255, 200, 120, 0.35); }
+.ba-capability-kind-command { border-color: rgba(125, 211, 252, 0.35); }
+.ba-capability-kind-mcp { border-color: rgba(123, 231, 196, 0.35); }
+.ba-capability-kind-extension { border-color: rgba(196, 163, 255, 0.35); }
+.ba-capability-kind-memory { border-color: rgba(212, 255, 72, 0.35); }
+.ba-capability-kind-tool { border-color: rgba(255, 140, 66, 0.35); }
+.ba-capability-list {
+  max-height: 180px;
+  overflow: auto;
+  padding-top: 2px;
+}
+.ba-capability-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  min-width: 0;
+  padding: 5px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.14);
+  font-size: 10px;
+}
+.ba-capability-type {
+  flex: 0 0 auto;
+  font: 600 9px/1 var(--font-mono);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.ba-capability-id,
+.ba-capability-extension,
+.ba-capability-version,
+.ba-capability-origin,
+.ba-capability-state,
+.ba-capability-restart {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ba-capability-id {
+  flex: 0 1 150px;
+  color: rgba(255, 255, 255, 0.90);
+}
+.ba-capability-extension {
+  flex: 1 1 180px;
+  min-width: 80px;
+  color: rgba(255, 255, 255, 0.50);
+}
+.ba-capability-version,
+.ba-capability-origin {
+  color: rgba(255, 255, 255, 0.42);
+  font: 9px/1 var(--font-mono);
+}
+.ba-capability-state {
+  color: var(--primary);
+  font: 600 9px/1 var(--font-mono);
+}
+.ba-capability-state.is-broken,
+.ba-capability-restart {
+  color: #ff9c8c;
+}
+.ba-capability-restart {
+  padding: 2px 4px;
+  border: 1px solid rgba(255, 156, 140, 0.28);
+  border-radius: 3px;
+  font: 9px/1 var(--font-mono);
+}
+.ba-capability-issues {
+  margin-top: 7px;
+  color: #ffcc80;
+  font-size: 10px;
+}
+
+/* P4.38 — Bus kind mini-dashboard. One horizontal row of 6 colored mini-LED
+   pills sitting between `.ba-head` and `.ba-ui-surfaces` (or `.ba-filterbar`
+   when no UI surfaces are registered). Each pill is a button — clicking solos
+   that kind in the filter (same semantics as ba-chip solo), repeat-click
+   resets to "all on". Tones reuse the 4-state grammar already established by
+   the section LEDs (loading / ok / warn / down) but the is-ok base color is
+   the **per-kind tribe color** (extension lime · agent violet · cli-provider
+   green · model-binding teal · skill gold · tool orange) so the dashboard
+   reads as a rainbow strip when all 6 kinds are healthy and visually alarms
+   amber/red when any kind degrades. `.is-soloed` adds a stronger bg + ring
+   to mark which pill is currently filtering the panel. */
+.ba-mini-dashboard {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.015);
+}
+.ba-md-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.06em;
+  color: rgba(255, 255, 255, 0.4);
+  padding: 0 4px 0 2px;
+  user-select: none;
+}
+.ba-md-led {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px 3px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.025);
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 10.5px;
+  font-family: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: background 120ms ease, border-color 120ms ease,
+    transform 120ms ease, box-shadow 120ms ease;
+}
+.ba-md-led:hover {
+  background: rgba(255, 255, 255, 0.05);
+  transform: translateY(-0.5px);
+}
+.ba-md-led:active {
+  transform: translateY(0.5px);
+}
+.ba-md-led:focus-visible {
+  outline: 2px solid rgba(212, 255, 72, 0.6);
+  outline-offset: 1px;
+}
+.ba-md-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.55);
+  box-shadow: 0 0 0 0 transparent;
+  flex-shrink: 0;
+}
+.ba-md-kind {
+  font-size: 9.5px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.78;
+}
+.ba-md-count {
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+}
+
+/* loading — dim gray pulse */
+.ba-md-led.is-loading .ba-md-dot {
+  animation: ba-md-pulse 1.4s ease-in-out infinite;
+}
+@keyframes ba-md-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 1; }
+}
+
+/* warn — amber (shared across all kinds) */
+.ba-md-led.is-warn {
+  border-color: rgba(245, 178, 67, 0.42);
+  color: rgba(248, 213, 153, 0.95);
+}
+.ba-md-led.is-warn .ba-md-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+
+/* down — red (shared across all kinds) */
+.ba-md-led.is-down {
+  border-color: rgba(255, 107, 107, 0.42);
+  color: rgba(255, 196, 196, 0.95);
+}
+.ba-md-led.is-down .ba-md-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+
+/* is-ok per-kind tribe color — 6 variants */
+.ba-md-k-extension.is-ok {
+  border-color: rgba(212, 255, 72, 0.38);
+  color: rgba(228, 255, 168, 0.95);
+}
+.ba-md-k-extension.is-ok .ba-md-dot {
+  background: var(--primary);
+  box-shadow: none;
+}
+.ba-md-k-agent.is-ok {
+  border-color: rgba(196, 163, 255, 0.42);
+  color: rgba(228, 215, 255, 0.95);
+}
+.ba-md-k-agent.is-ok .ba-md-dot {
+  background: var(--color-role-orchestrator);
+  box-shadow: none;
+}
+.ba-md-k-cli-provider.is-ok {
+  border-color: rgba(75, 222, 128, 0.38);
+  color: rgba(176, 240, 195, 0.95);
+}
+.ba-md-k-cli-provider.is-ok .ba-md-dot {
+  background: var(--prim-color-green-400);
+  box-shadow: none;
+}
+.ba-md-k-model-binding.is-ok {
+  border-color: rgba(123, 231, 196, 0.42);
+  color: rgba(196, 240, 222, 0.95);
+}
+.ba-md-k-model-binding.is-ok .ba-md-dot {
+  background: var(--accent-mint);
+  box-shadow: none;
+}
+.ba-md-k-skill.is-ok {
+  border-color: rgba(255, 200, 120, 0.42);
+  color: rgba(255, 222, 178, 0.95);
+}
+.ba-md-k-skill.is-ok .ba-md-dot {
+  background: var(--color-role-narrative);
+  box-shadow: none;
+}
+.ba-md-k-tool.is-ok {
+  border-color: rgba(255, 140, 66, 0.42);
+  color: rgba(255, 200, 168, 0.95);
+}
+.ba-md-k-tool.is-ok .ba-md-dot {
+  background: var(--color-role-coding);
+  box-shadow: none;
+}
+
+/* soloed — currently filtering the panel. Stronger bg + outer ring. */
+.ba-md-led.is-soloed {
+  background: rgba(255, 255, 255, 0.07);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+.ba-md-k-extension.is-soloed {
+  background: rgba(212, 255, 72, 0.1);
+  box-shadow: 0 0 0 1px rgba(212, 255, 72, 0.32);
+}
+.ba-md-k-agent.is-soloed {
+  background: rgba(196, 163, 255, 0.12);
+  box-shadow: 0 0 0 1px rgba(196, 163, 255, 0.38);
+}
+.ba-md-k-cli-provider.is-soloed {
+  background: rgba(75, 222, 128, 0.1);
+  box-shadow: 0 0 0 1px rgba(75, 222, 128, 0.32);
+}
+.ba-md-k-model-binding.is-soloed {
+  background: rgba(123, 231, 196, 0.12);
+  box-shadow: 0 0 0 1px rgba(123, 231, 196, 0.34);
+}
+.ba-md-k-skill.is-soloed {
+  background: rgba(255, 200, 120, 0.12);
+  box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.34);
+}
+.ba-md-k-tool.is-soloed {
+  background: rgba(255, 140, 66, 0.12);
+  box-shadow: 0 0 0 1px rgba(255, 140, 66, 0.34);
+}
+
+/* P4.39 — per-kind health dot prefix inside `.ba-chip` filter row. Mirrors the
+   4-state grammar (loading / ok / warn / down) of the mini-dashboard LED
+   (P4.38) and section-header LEDs (P4.14–P4.37), but compressed to a 5px round
+   dot so the existing chip layout (6px gap, 10px label, count pill) keeps the
+   same height + cap-line. Each kind paints its own tribe color on `is-ok`
+   (extension lime · agent violet · cli-provider lime-green · model-binding
+   teal · skill gold · tool orange) so the dashboard at the top and the chip
+   row right below it light up the same color on the same 10s tick. */
+.ba-chip-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.32);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.ba-chip-dot.is-loading {
+  background: rgba(255, 255, 255, 0.25);
+  animation: ba-chip-dot-pulse 1.4s ease-in-out infinite;
+}
+@keyframes ba-chip-dot-pulse {
+  0%, 100% { opacity: 0.32; }
+  50%      { opacity: 0.72; }
+}
+.ba-chip-dot.is-warn {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-chip-dot.is-down {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+/* Per-kind tribe color when ok — matches `.ba-md-k-{kind}.is-ok` (P4.38) and
+   `.ba-kind-{kind}-led.is-ok` (P4.14–P4.37) so the eye reads "same kind, same
+   color" across all three Bus admin surfaces. */
+.ba-chip.k-extension .ba-chip-dot.is-ok {
+  background: var(--primary);
+  box-shadow: none;
+}
+.ba-chip.k-agent .ba-chip-dot.is-ok {
+  background: var(--color-role-orchestrator);
+  box-shadow: none;
+}
+.ba-chip.k-cli-provider .ba-chip-dot.is-ok {
+  background: var(--prim-color-green-400);
+  box-shadow: none;
+}
+.ba-chip.k-model-binding .ba-chip-dot.is-ok {
+  background: var(--accent-mint);
+  box-shadow: none;
+}
+.ba-chip.k-skill .ba-chip-dot.is-ok {
+  background: var(--color-role-narrative);
+  box-shadow: none;
+}
+.ba-chip.k-tool .ba-chip-dot.is-ok {
+  background: var(--color-role-coding);
+  box-shadow: none;
+}
+/* When chip is dimmed (is-off), drop the dot's glow so the chip+dot read as a
+   single muted unit instead of "off chip, on dot". */
+.ba-chip.is-off .ba-chip-dot {
+  box-shadow: none;
+  opacity: 0.7;
+}
+
+/* P4.40 — mini-dashboard aggregate summary pill (`.ba-md-summary`). Sits to
+   the right of the 6 `.ba-md-led` pills inside `.ba-mini-dashboard`. Bucket
+   counts `N ✓ · M ⚠ · K ✗` use the same per-tone colors as the LEDs
+   (lime / amber / red) and a small subscript dot before each digit. Outer
+   ring + ring-glow reflect the *worst* tone present (down > warn > ok). The
+   trailing arrow glyph `↺ / ⤺` shifts on `.has-solo` to hint the click will
+   undo the active filter (not just no-op refresh). */
+.ba-md-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  padding: 3px 9px 3px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.025);
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 10.5px;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  user-select: none;
+  transition: background 120ms ease, border-color 120ms ease,
+    transform 120ms ease, box-shadow 120ms ease;
+}
+.ba-md-summary:hover {
+  background: rgba(255, 255, 255, 0.05);
+  transform: translateY(-0.5px);
+}
+.ba-md-summary:active {
+  transform: translateY(0.5px);
+}
+.ba-md-summary:focus-visible {
+  outline: 2px solid rgba(212, 255, 72, 0.6);
+  outline-offset: 1px;
+}
+.ba-md-sum-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+.ba-md-sum-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(180, 180, 180, 0.4);
+  flex-shrink: 0;
+}
+.ba-md-sum-ok .ba-md-sum-dot {
+  background: var(--prim-color-green-400);
+  box-shadow: none;
+}
+.ba-md-sum-warn .ba-md-sum-dot {
+  background: var(--color-status-amber);
+  box-shadow: none;
+}
+.ba-md-sum-down .ba-md-sum-dot {
+  background: var(--accent-error);
+  box-shadow: none;
+}
+.ba-md-sum-ok {
+  color: var(--primary);
+}
+.ba-md-sum-warn {
+  color: var(--color-status-amber);
+}
+.ba-md-sum-down {
+  color: var(--accent-error);
+}
+.ba-md-sum-sep {
+  opacity: 0.32;
+  padding: 0 1px;
+}
+.ba-md-sum-arrow {
+  margin-left: 4px;
+  font-size: 11px;
+  opacity: 0.55;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.ba-md-summary:hover .ba-md-sum-arrow {
+  opacity: 0.95;
+  transform: translateX(-1px);
+}
+.ba-md-summary.has-solo {
+  border-color: rgba(196, 163, 255, 0.45);
+  background: rgba(196, 163, 255, 0.08);
+}
+.ba-md-summary.has-solo .ba-md-sum-arrow {
+  color: var(--color-role-orchestrator);
+  opacity: 0.85;
+}
+.ba-md-summary.is-loading {
+  border-color: rgba(255, 255, 255, 0.06);
+}
+.ba-md-summary.is-loading .ba-md-sum-loading {
+  animation: ba-md-pulse 1.4s ease-in-out infinite;
+  opacity: 0.55;
+}
+.ba-md-summary.is-ok {
+  border-color: rgba(75, 222, 128, 0.4);
+  box-shadow: inset 0 0 0 1px rgba(75, 222, 128, 0.18);
+}
+.ba-md-summary.is-warn {
+  border-color: rgba(245, 178, 67, 0.45);
+  box-shadow: inset 0 0 0 1px rgba(245, 178, 67, 0.18);
+}
+.ba-md-summary.is-down {
+  border-color: rgba(255, 107, 107, 0.55);
+  box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.22);
+}
+
+/* P4.42 — `Σ{N}` total-plugins cell prepended to the summary pill. Quiet
+   white (0.72) so the band doesn't compete with the colored tone cells; the
+   `Σ` glyph is rendered as its own span so it can scale slightly larger than
+   the digit count and pick up a soft glow on hover. `.ba-md-sum-vsep` is a
+   1px vertical hairline that cleanly splits the «total» band from the «tone
+   bucket» band; height clamped to 11px so it doesn't touch the pill edges. */
+.ba-md-sum-total {
+  color: rgba(255, 255, 255, 0.78);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.ba-md-sum-sigma {
+  font-size: 12px;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.62);
+  margin-right: 1px;
+  transition: color 120ms ease, text-shadow 120ms ease;
+}
+.ba-md-summary:hover .ba-md-sum-sigma {
+  color: rgba(212, 255, 72, 0.85);
+  text-shadow: 0 0 4px rgba(212, 255, 72, 0.4);
+}
+.ba-md-sum-vsep {
+  display: inline-block;
+  width: 1px;
+  height: 11px;
+  background: rgba(255, 255, 255, 0.18);
+  margin: 0 3px;
+  flex-shrink: 0;
+}
+.ba-md-summary.is-ok .ba-md-sum-vsep {
+  background: rgba(75, 222, 128, 0.28);
+}
+.ba-md-summary.is-warn .ba-md-sum-vsep {
+  background: rgba(245, 178, 67, 0.32);
+}
+.ba-md-summary.is-down .ba-md-sum-vsep {
+  background: rgba(255, 107, 107, 0.38);
+}