feedBack/plugins/capability_inspector/screen.html

<style>
  .capability-inspector [data-endpoint-icon] {
    display: inline-block !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    flex: 0 0 0.75rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-sizing: border-box;
  }

  .capability-inspector [data-endpoint-icon="command"] {
    background: #fb923c !important;
    border-color: #fed7aa !important;
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.65) !important;
  }

  .capability-inspector [data-endpoint-icon="operation"] {
    background: #c084fc !important;
    border-color: #e9d5ff !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.65) !important;
  }

  .capability-inspector [data-endpoint-icon="event"] {
    background: #60a5fa !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.65) !important;
  }

  .capability-inspector [data-endpoint-flow="provider-command"] {
    background: #c084fc !important;
    border-color: #e9d5ff !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.65) !important;
  }

  .capability-inspector [data-endpoint-flow="provider-operation"] {
    background: #d8b4fe !important;
    border-color: #f3e8ff !important;
    box-shadow: 0 0 12px rgba(216, 180, 254, 0.65) !important;
  }

  .capability-inspector [data-endpoint-flow="provider-event"] {
    background: #ddd6fe !important;
    border-color: #ede9fe !important;
    box-shadow: 0 0 12px rgba(221, 214, 254, 0.6) !important;
  }

  .capability-inspector [data-graph-provider-group],
  .capability-inspector [data-graph-participant-group] {
    padding-top: 1rem !important;
  }

  .capability-inspector [data-toggle-graph-group] {
    min-height: 1.75rem !important;
    gap: 0.625rem !important;
    padding-block: 0.125rem !important;
  }

  .capability-inspector [data-graph-provider-group] [data-toggle-graph-group] {
    padding-right: 0.5rem !important;
  }

  .capability-inspector [data-graph-participant-group] [data-toggle-graph-group] {
    padding-left: 0.5rem !important;
  }

  .capability-inspector [data-graph-provider-endpoint-row] {
    padding-right: 0.5rem !important;
  }

  .capability-inspector [data-graph-participant-endpoint-row] {
    padding-left: 0.5rem !important;
  }

  .capability-inspector [data-role-icon],
  .capability-inspector [data-origin-icon],
  .capability-inspector [data-availability-icon] {
    width: 2.125rem !important;
    height: 2.125rem !important;
    flex: 0 0 2.125rem !important;
    border-radius: 0.375rem !important;
  }

  .capability-inspector [data-role-icon] svg,
  .capability-inspector [data-origin-icon] svg,
  .capability-inspector [data-availability-icon] svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  .capability-inspector [data-role-icon] + [data-origin-icon],
  .capability-inspector [data-origin-icon] + [data-role-icon],
  .capability-inspector [data-origin-icon] + [data-availability-icon] {
    margin-left: 0.5rem !important;
  }

  .capability-inspector [data-domain-owner-footer] {
    margin-top: auto !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(31, 41, 55, 0.75) !important;
  }

  .capability-inspector [data-domain-owner-description] {
    display: block !important;
    margin-top: 0.125rem !important;
    line-height: 1.45 !important;
    color: #9ca3af !important;
  }

  .capability-inspector [data-domain-graph-filter] {
    border: 1px solid #374151 !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.625rem !important;
    color: #d1d5db !important;
    background: rgba(31, 41, 55, 0.72) !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
  }

  .capability-inspector [data-domain-graph-filter]:hover {
    color: #ffffff !important;
    border-color: #6b7280 !important;
    background: rgba(55, 65, 81, 0.86) !important;
  }

  .capability-inspector [data-domain-graph-filter][aria-pressed="true"] {
    color: #ffffff !important;
    border-color: rgba(192, 132, 252, 0.7) !important;
    background: rgba(126, 34, 206, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(216, 180, 254, 0.18) !important;
  }

  .capability-inspector [data-legend-icon] {
    display: inline-block !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    flex: 0 0 0.75rem !important;
    box-sizing: border-box;
  }

  .capability-inspector [data-legend-icon="command"] {
    background: #fb923c !important;
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.55) !important;
  }

  .capability-inspector [data-legend-icon="operation"] {
    background: #c084fc !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.55) !important;
  }

  .capability-inspector [data-legend-icon="event"] {
    background: #60a5fa !important;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.55) !important;
  }

  .capability-inspector [data-legend-line] {
    display: inline-flex !important;
    width: 2rem !important;
    height: 2px !important;
    flex: 0 0 2rem !important;
    border: 0 !important;
  }

  .capability-inspector [data-legend-line="command"] {
    background: #fb923c !important;
  }

  .capability-inspector [data-legend-line="operation"] {
    background: #c084fc !important;
  }

  .capability-inspector [data-legend-line="provider-operation"] {
    background: #d8b4fe !important;
  }

  .capability-inspector [data-legend-line="provider-command"] {
    background: #c084fc !important;
  }

  .capability-inspector [data-legend-line="event"] {
    background: #60a5fa !important;
  }

  .capability-inspector [data-legend-line="provider-event"] {
    background: #ddd6fe !important;
  }

  .capability-inspector [data-legend-line="shimmed"] {
    height: 0 !important;
    border-top: 2px dashed #9ca3af !important;
    background: transparent !important;
  }

  .capability-inspector [data-summary-dashboard] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  .capability-inspector [data-summary-card] {
    min-height: 4.5rem !important;
    border: 1px solid #1f2937 !important;
    border-radius: 0.5rem !important;
    background: rgba(17, 24, 39, 0.72) !important;
    padding: 1rem 1.25rem !important;
  }

  .capability-inspector [data-summary-card][data-tone="clean"] {
    border-color: rgba(52, 211, 153, 0.55) !important;
    background: rgba(16, 185, 129, 0.08) !important;
  }

  .capability-inspector [data-summary-card][data-tone="warning"] {
    border-color: rgba(251, 191, 36, 0.55) !important;
    background: rgba(245, 158, 11, 0.08) !important;
  }

  .capability-inspector [data-summary-card][data-tone="conflict"] {
    border-color: rgba(248, 113, 113, 0.58) !important;
    background: rgba(239, 68, 68, 0.08) !important;
  }

  .capability-inspector [data-summary-card][data-tone="used"] {
    border-color: rgba(232, 192, 64, 0.58) !important;
    background: rgba(232, 192, 64, 0.08) !important;
  }

  .capability-inspector [data-summary-row] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1rem !important;
  }

  .capability-inspector [data-summary-label] {
    color: #8b93a7 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  .capability-inspector [data-summary-value] {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .capability-inspector [data-summary-status-value] {
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.65) !important;
    border-radius: 0.375rem !important;
    background: rgba(16, 185, 129, 0.12) !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  .capability-inspector [data-summary-status-value][data-tone="warning"] {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.65) !important;
    background: rgba(245, 158, 11, 0.12) !important;
  }

  .capability-inspector [data-summary-status-value][data-tone="conflict"] {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.7) !important;
    background: rgba(239, 68, 68, 0.12) !important;
  }

  @media (max-width: 900px) {
    .capability-inspector [data-summary-dashboard] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 560px) {
    .capability-inspector [data-summary-dashboard] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (min-width: 1024px) {
    .capability-inspector [data-domain-graph-fallback] {
      display: flex !important;
      align-items: stretch;
      justify-content: space-between;
      gap: 4rem;
    }

    .capability-inspector [data-domain-provider-card],
    .capability-inspector [data-domain-participant-lane] {
      flex: 0 0 24rem;
      width: 24rem;
      max-width: 24rem;
    }

    .capability-inspector [data-domain-graph-cy] {
      display: block !important;
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
    }

    .capability-inspector [data-graph-capability-port] {
      position: absolute;
      right: -1.75rem;
      top: 50%;
      transform: translateY(-50%);
    }

    .capability-inspector [data-graph-participant-port] {
      position: absolute;
      left: -1.75rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  @media (min-width: 1280px) {
    .capability-inspector [data-domain-graph-fallback] {
      gap: 6rem;
    }
  }
</style>
<div class="max-w-7xl mx-auto px-6 pt-24 pb-16 capability-inspector">
  <div class="mb-6" data-inspector-header>
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <h2 class="text-3xl font-bold text-white">Capability Inspector</h2>
      <div class="flex items-center gap-2">
        <select id="capability-inspector-filter" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 outline-none">
          <option value="">All domains</option>
        </select>
        <button id="capability-inspector-refresh" class="bg-accent hover:bg-accent-light text-white px-4 py-2 rounded-lg text-sm transition">Refresh</button>
      </div>
    </div>
    <div id="capability-inspector-summary"></div>
  </div>
  <div id="capability-inspector-empty" class="hidden text-gray-400 border border-gray-800 rounded-lg p-4 bg-dark-800/60"></div>
  <div id="capability-inspector-content" class="grid gap-4"></div>
</div>