omarchy/plugins/io.github.x3me.nexthop/design/Main.dc.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap">
  <style>
    body { margin: 0; background: #0e0e14; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
    a { color: #7aa2f7; } a:hover { color: #b4bee6; }
  </style>
</helmet>

<div style="display: flex; flex-direction: column; gap: 0; width: 560px; background: #1a1b26; border: 2px solid #7aa2f7; box-sizing: border-box; padding: 18px; color: #a9b1d6;">

  <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
    <div style="display: flex; align-items: flex-start; gap: 10px;">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="{{d.tone}}" stroke-width="1.6" stroke-linecap="round" style="margin-top: 2px;">
        <path d="M2 8.5a15 15 0 0 1 20 0"></path>
        <path d="M5 12.2a10.5 10.5 0 0 1 14 0"></path>
        <path d="M8.2 15.9a6 6 0 0 1 7.6 0"></path>
        <circle cx="12" cy="19.3" r="1.1" fill="{{d.tone}}" stroke="none"></circle>
      </svg>
      <div style="display: flex; flex-direction: column; gap: 3px;">
        <div style="font-size: 16px; font-weight: 700; color: #c0caf5; letter-spacing: 0.01em;">Excitel</div>
        <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">{{d.verdict}} &middot; {{d.uptime}}</div>
      </div>
    </div>
    <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 1px;">
      <div style="font-size: 30px; font-weight: 700; line-height: 1; color: {{d.tone}};">{{d.index}}</div>
      <div style="font-size: 10px; letter-spacing: 0.12em; color: #565f89;">EXPERIENCE</div>
    </div>
  </div>

  <div style="display: flex; gap: 6px; margin-top: 16px;">
    <div style="flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #c0caf5; background: rgba(169,177,214,0.18); border: 1px solid transparent;">Overview</div>
    <div style="flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a9b1d6; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4);">Latency</div>
    <div style="flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a9b1d6; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4);">Speed</div>
    <div style="flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a9b1d6; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4);">Wi-Fi</div>
    <div style="flex-grow: 1; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #a9b1d6; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4);">Events</div>
  </div>

  <div style="height: 1px; background: rgba(169,177,214,0.12); margin: 16px 0 14px 0;"></div>

  <div style="font-size: 10px; letter-spacing: 0.12em; color: #565f89; margin-bottom: 12px;">PATH</div>

  <div style="display: flex; align-items: center; gap: 0;">
    <div style="display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px;">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c0caf5" stroke-width="1.5" stroke-linejoin="round">
        <rect x="4" y="5" width="16" height="11" rx="1"></rect>
        <path d="M2 19h20"></path>
      </svg>
      <div style="font-size: 10px; color: #c0caf5;">This laptop</div>
      <div style="font-size: 10px; color: #565f89;">wlan0</div>
    </div>

    <div style="flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-bottom: 26px;">
      <div style="font-size: 11px; color: {{d.localTone}}; font-weight: 500;">{{d.localMs}} ms</div>
      <div style="width: 100%; height: 2px; background: {{d.localTone}};"></div>
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">LOCAL LEG</div>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px;">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#c0caf5" stroke-width="1.5" stroke-linejoin="round">
        <rect x="3" y="13" width="18" height="7" rx="1"></rect>
        <path d="M7.5 16.5h.01M11 16.5h.01"></path>
        <path d="M12 13V9"></path>
        <path d="M8.5 6.5a5 5 0 0 1 7 0"></path>
      </svg>
      <div style="font-size: 10px; color: #c0caf5;">Router</div>
      <div style="font-size: 10px; color: #565f89;">10.10.0.1</div>
    </div>

    <div style="flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-bottom: 26px;">
      <div style="font-size: 11px; color: {{d.wanTone}}; font-weight: 500;">{{d.wanMs}} ms</div>
      <div style="width: 100%; height: 2px; background: {{d.wanTone}};"></div>
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">WAN LEG</div>
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px;">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="{{d.tone}}" stroke-width="1.5">
        <circle cx="12" cy="12" r="8.5"></circle>
        <path d="M3.5 12h17"></path>
        <path d="M12 3.5c2.6 2.6 2.6 14.4 0 17c-2.6-2.6-2.6-14.4 0-17z"></path>
      </svg>
      <div style="font-size: 10px; color: #c0caf5;">Internet</div>
      <div style="font-size: 10px; color: #565f89;">AS17754</div>
    </div>
  </div>

  <div style="display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(169,177,214,0.12);">
    <div class="capx" style="font-size: 10px; letter-spacing: 0.12em; color: #565f89;">LAG</div>
    <div style="font-size: 10px; color: #565f89;">best {{d.lagBest}} ms &nbsp;&middot;&nbsp; typical <span style="color: #c0caf5; font-size: 11px;">{{d.lagTypical}} ms</span> &nbsp;&middot;&nbsp; worst {{d.lagWorst}} ms</div>
  </div>

  <div style="height: 1px; background: rgba(169,177,214,0.12); margin: 14px 0 14px 0;"></div>

  <div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;">
    <div style="display: flex; flex-direction: column; gap: 6px;">
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">RESPONSIVENESS</div>
      <div style="font-size: 22px; font-weight: 700; line-height: 1; color: {{d.respTone}};">{{d.resp}}</div>
      <div style="height: 3px; background: rgba(169,177,214,0.12);">
        <div style="height: 3px; width: {{d.respPct}}; background: {{d.respTone}};"></div>
      </div>
      <div style="font-size: 10px; color: #565f89;">{{d.respNote}}</div>
    </div>
    <div style="display: flex; flex-direction: column; gap: 6px;">
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">RELIABILITY</div>
      <div style="font-size: 22px; font-weight: 700; line-height: 1; color: {{d.relTone}};">{{d.rel}}</div>
      <div style="height: 3px; background: rgba(169,177,214,0.12);">
        <div style="height: 3px; width: {{d.relPct}}; background: {{d.relTone}};"></div>
      </div>
      <div style="font-size: 10px; color: #565f89;">{{d.relNote}}</div>
    </div>
    <div style="display: flex; flex-direction: column; gap: 6px;">
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">SPEED</div>
      <div style="font-size: 22px; font-weight: 700; line-height: 1; color: {{d.spdTone}};">{{d.spd}}</div>
      <div style="height: 3px; background: rgba(169,177,214,0.12);">
        <div style="height: 3px; width: {{d.spdPct}}; background: {{d.spdTone}};"></div>
      </div>
      <div style="font-size: 10px; color: #565f89;">{{d.spdNote}}</div>
    </div>
  </div>

  <sc-if value="{{d.hasRec}}" hint-placeholder-val="{{ true }}">
    <div style="display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 10px 12px; background: rgba(224,175,104,0.07); border: 1px solid rgba(224,175,104,0.35); box-sizing: border-box;">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e0af68" stroke-width="1.7" stroke-linecap="round" style="flex-shrink: 0; margin-top: 1px;">
        <circle cx="12" cy="12" r="9"></circle><path d="M12 8.2v4.6"></path><circle cx="12" cy="16" r="0.9" fill="#e0af68" stroke="none"></circle>
      </svg>
      <div style="font-size: 11px; color: #a9b1d6; line-height: 1.65;">{{d.rec}}</div>
    </div>
  </sc-if>

  <div style="height: 1px; background: rgba(169,177,214,0.12); margin: 16px 0 12px 0;"></div>

  <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px;">
    <div style="font-size: 10px; letter-spacing: 0.12em; color: #565f89;">LATENCY &middot; LAST 30 MIN</div>
    <div style="font-size: 10px; color: #565f89;">{{d.stats}}</div>
  </div>

  <svg width="524" height="104" viewBox="0 0 524 104" style="display: block;">
    <line x1="0" y1="95.5" x2="524" y2="95.5" stroke="rgba(169,177,214,0.15)" stroke-width="1"></line>
    <path d="{{chart.wanArea}}" fill="rgba(122,162,247,0.20)"></path>
    <path d="{{chart.wanLine}}" fill="none" stroke="#7aa2f7" stroke-width="1.5" stroke-linejoin="round"></path>
    <path d="{{chart.localArea}}" fill="rgba(86,95,137,0.55)"></path>
    <path d="{{chart.localLine}}" fill="none" stroke="#565f89" stroke-width="1" stroke-linejoin="round"></path>
    <sc-for list="{{chart.loss}}" as="tick" hint-placeholder-count="2">
      <rect x="{{tick.x}}" y="88" width="2" height="8" fill="#f7768e"></rect>
    </sc-for>
  </svg>

  <div style="display: flex; align-items: center; gap: 16px; margin-top: 6px;">
    <div style="display: flex; align-items: center; gap: 6px;">
      <div style="width: 10px; height: 2px; background: #7aa2f7;"></div>
      <div style="font-size: 10px; color: #565f89;">wan leg</div>
    </div>
    <div style="display: flex; align-items: center; gap: 6px;">
      <div style="width: 10px; height: 2px; background: #565f89;"></div>
      <div style="font-size: 10px; color: #565f89;">local leg</div>
    </div>
    <div style="display: flex; align-items: center; gap: 6px;">
      <div style="width: 2px; height: 8px; background: #f7768e;"></div>
      <div style="font-size: 10px; color: #565f89;">packet loss</div>
    </div>
  </div>

  <div style="height: 1px; background: rgba(169,177,214,0.12); margin: 14px 0 12px 0;"></div>

  <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
    <div style="display: flex; flex-direction: column; gap: 4px;">
      <div style="font-size: 10px; letter-spacing: 0.1em; color: #565f89;">LAST SPEED TEST &middot; {{d.testAge}}</div>
      <div style="display: flex; align-items: baseline; gap: 12px;">
        <div style="display: flex; align-items: baseline; gap: 5px;">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#7aa2f7" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(1px);"><path d="M12 4v14M6 13l6 6 6-6"></path></svg>
          <span style="font-size: 15px; font-weight: 700; color: #c0caf5;">{{d.down}}</span>
          <span style="font-size: 10px; color: #565f89;">Mbps</span>
        </div>
        <div style="display: flex; align-items: baseline; gap: 5px;">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#f7cf7a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="transform: translateY(1px);"><path d="M12 20V6M6 11l6-6 6 6"></path></svg>
          <span style="font-size: 15px; font-weight: 700; color: #c0caf5;">{{d.up}}</span>
          <span style="font-size: 10px; color: #565f89;">Mbps</span>
        </div>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; background: rgba(169,177,214,0.04); border: 1px solid rgba(169,177,214,0.4); color: #c0caf5; font-size: 11px;">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#c0caf5" stroke-width="1.6" stroke-linecap="round">
        <path d="M4 18a9 9 0 1 1 16 0"></path>
        <path d="M12 14.5 16.5 9"></path>
      </svg>
      Run test
    </div>
  </div>

  <div style="height: 1px; background: rgba(169,177,214,0.12); margin: 14px 0 10px 0;"></div>

  <div style="display: flex; align-items: center; justify-content: space-between;">
    <div style="font-size: 10px; color: #565f89;">{{d.outages}}</div>
    <div style="font-size: 10px; color: #565f89;">monitoring used 3.1 MB today</div>
  </div>

</div>
</x-dc>

<script data-dc-script data-props='{"state":{"editor":"enum","options":["healthy","degraded","outage"],"default":"healthy","section":"Data"},"accent":{"editor":"color","default":"#7aa2f7","options":["#7aa2f7","#9ece6a","#e0af68","#bb9af7"],"section":"Theme"},"$preview":{"width":560,"height":720}}'>
class Component extends DCLogic {
  rng(seed) {
    let s = seed >>> 0
    return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296 }
  }

  series(state) {
    var N = 72, rand = this.rng(20260824)
    var localBase = state === 'outage' ? 2.4 : (state === 'degraded' ? 2.1 : 1.2)
    var wanBase = state === 'outage' ? 120 : (state === 'degraded' ? 46 : 8.4)
    var local = [], wan = [], loss = []
    for (var i = 0; i < N; i++) {
      var l = localBase + rand() * localBase * 0.5
      var w = wanBase * (0.82 + rand() * 0.36)
      if (state === 'healthy' && (i === 23 || i === 24)) w = wanBase * 4.6
      if (state === 'degraded' && i % 11 === 4) w = wanBase * 2.2
      if (state === 'outage' && i > 46 && i < 60) { w = wanBase * 2.4; loss.push(i) }
      if (state === 'degraded' && (i === 31 || i === 52)) loss.push(i)
      local.push(l); wan.push(w)
    }
    return { local: local, wan: wan, loss: loss, N: N }
  }

  chartFor(state) {
    var s = this.series(state)
    var W = 524, H = 96, top = 4
    var peak = 0
    for (var i = 0; i < s.N; i++) peak = Math.max(peak, s.local[i] + s.wan[i])
    peak = peak * 1.12
    var xAt = function (i) { return (i * (W - 1) / (s.N - 1)).toFixed(1) }
    var yAt = function (v) { return (H - (H - top) * v / peak).toFixed(1) }

    var localLine = '', wanLine = '', totalPts = [], localPts = []
    for (var j = 0; j < s.N; j++) {
      var lp = xAt(j) + ',' + yAt(s.local[j])
      var tp = xAt(j) + ',' + yAt(s.local[j] + s.wan[j])
      localPts.push(lp); totalPts.push(tp)
      localLine += (j === 0 ? 'M' : 'L') + lp
      wanLine += (j === 0 ? 'M' : 'L') + tp
    }
    var localArea = 'M0,' + H + 'L' + localPts.join('L') + 'L' + W + ',' + H + 'Z'
    var wanArea = 'M' + totalPts.join('L') + 'L' + localPts.slice().reverse().join('L') + 'Z'
    var ticks = s.loss.map(function (i) { return { x: xAt(i) } })
    return { localLine: localLine, wanLine: wanLine, localArea: localArea, wanArea: wanArea, loss: ticks }
  }

  renderVals() {
    var accent = this.props.accent ?? '#7aa2f7'
    var state = this.props.state ?? 'healthy'
    var GOOD = '#9ece6a', WARN = '#e0af68', BAD = '#f7768e'
    var table = {
      healthy: {
        index: 94, verdict: 'EXCELLENT', tone: GOOD, uptime: 'ONLINE 4H 12M',
        localMs: '1.2', wanMs: '8.4', localTone: GOOD, wanTone: GOOD,
        lagBest: '7', lagTypical: '11', lagWorst: '41', hasRec: false, rec: '',
        resp: 96, respTone: GOOD, respPct: '96%', respNote: 'lag 11 ms typical',
        rel: 99, relTone: GOOD, relPct: '99%', relNote: 'no disruptions in 24 h',
        spd: 88, spdTone: GOOD, spdPct: '88%', spdNote: '92% of your 450/50 plan',
        stats: 'p50 9 ms  ·  p95 14 ms  ·  jitter 1.8 ms',
        down: '412', up: '48', testAge: '2 H AGO', outages: 'no outages today'
      },
      degraded: {
        index: 61, verdict: 'DEGRADED', tone: WARN, uptime: 'ONLINE 41M',
        localMs: '2.1', wanMs: '46', localTone: GOOD, wanTone: WARN,
        lagBest: '34', lagTypical: '58', lagWorst: '210', hasRec: true,
        rec: 'Your local leg is clean at 2 ms \u2014 the 46 ms is upstream of the router, so moving the laptop or changing channel will not help. Lag has been above 40 ms for 26 minutes; this is worth raising with Excitel.',
        resp: 44, respTone: BAD, respPct: '44%', respNote: 'lag 58 ms typical',
        rel: 82, relTone: WARN, relPct: '82%', relNote: '2 disruptions today',
        spd: 71, spdTone: WARN, spdPct: '71%', spdNote: '318 Mbps, below plan',
        stats: 'p50 48 ms  ·  p95 121 ms  ·  jitter 19 ms',
        down: '318', up: '41', testAge: '18 MIN AGO', outages: '2 brief outages today'
      },
      outage: {
        index: 12, verdict: 'NO INTERNET', tone: BAD, uptime: 'WAN DOWN 2M 14S',
        localMs: '2.4', wanMs: '--', localTone: GOOD, wanTone: BAD,
        lagBest: '--', lagTypical: '--', lagWorst: '--', hasRec: true,
        rec: 'The router answers in 2.4 ms but nothing past it replies. Your Wi-Fi is fine \u2014 the fault is on the Excitel side or the line itself. Started 2 min 14 s ago.',
        resp: 0, respTone: BAD, respPct: '4%', respNote: 'no reply past the router',
        rel: 21, relTone: BAD, relPct: '21%', relNote: 'outage in progress',
        spd: 0, spdTone: BAD, spdPct: '3%', spdNote: 'last known 412 Mbps',
        stats: 'router reachable  ·  wan unreachable',
        down: '412', up: '48', testAge: '3 H AGO', outages: '1 outage today, ongoing'
      }
    }
    var d = table[state] || table.healthy
    return { d: d, accent: accent, chart: this.chartFor(state) }
  }
}
</script>
</body>
</html>