npm - beadcyte - Versions diffs - 0.4.0 - Mend

beadcyte 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/CHANGELOG.md +73 -0
package/LICENSE +661 -0
package/README.md +386 -0
package/THIRD_PARTY_NOTICES.md +56 -0
package/bin/beadcyte.mjs +60 -0
package/package.json +77 -0
package/src/changelog-cli.mjs +105 -0
package/src/changelog.mjs +196 -0
package/src/cli.mjs +577 -0
package/src/estimator.mjs +314 -0
package/src/format.mjs +22 -0
package/src/history-walk.mjs +170 -0
package/src/index.mjs +5 -0
package/src/mutate.mjs +193 -0
package/src/projects.mjs +120 -0
package/src/provenance.mjs +75 -0
package/src/review-hours.mjs +117 -0
package/src/roster-path.mjs +24 -0
package/src/scheduler.mjs +424 -0
package/src/serve.mjs +411 -0
package/src/server-state.mjs +105 -0
package/src/ship.mjs +178 -0
package/src/stage-waits.mjs +69 -0
package/src/start.mjs +111 -0
package/src/stop.mjs +66 -0
package/src/velocity.mjs +209 -0
package/src/web/App.vue +691 -0
package/src/web/app.css +54 -0
package/src/web/assets/favicon.svg +12 -0
package/src/web/avatar.ts +53 -0
package/src/web/bead-detail.ts +240 -0
package/src/web/changelog-view.ts +41 -0
package/src/web/components/BeadDrawer.vue +1883 -0
package/src/web/components/BeadSubGraph.vue +326 -0
package/src/web/components/BeadSubGraphOverlay.vue +192 -0
package/src/web/components/BeadTooltip.vue +516 -0
package/src/web/components/BeadcyteMark.vue +64 -0
package/src/web/components/BeadsGantt.vue +2125 -0
package/src/web/components/BeadsGrid.vue +468 -0
package/src/web/components/BeadsIncytes.vue +567 -0
package/src/web/components/BeadsMine.vue +325 -0
package/src/web/components/BeadsTable.vue +335 -0
package/src/web/components/ChangelogOverlay.vue +198 -0
package/src/web/components/ContextMenu.vue +386 -0
package/src/web/components/ControlsPanel.vue +476 -0
package/src/web/components/CostTrend.vue +206 -0
package/src/web/components/FilterPopover.vue +245 -0
package/src/web/components/GroupProgress.vue +274 -0
package/src/web/components/LoadMeter.vue +144 -0
package/src/web/components/MineRow.vue +28 -0
package/src/web/components/OptionsMenu.vue +825 -0
package/src/web/components/PriorityChip.vue +105 -0
package/src/web/components/ScoreStrip.vue +131 -0
package/src/web/components/SearchPalette.vue +210 -0
package/src/web/components/ShipTrend.vue +510 -0
package/src/web/components/ShortcutsOverlay.vue +164 -0
package/src/web/components/Term.vue +177 -0
package/src/web/components/Toast.vue +50 -0
package/src/web/components/TriageMeters.vue +426 -0
package/src/web/components/TypeChip.vue +96 -0
package/src/web/components/Walkthrough.vue +209 -0
package/src/web/components/WhatIfPanel.vue +206 -0
package/src/web/components/WipBullets.vue +191 -0
package/src/web/components/filter-option.ts +9 -0
package/src/web/composables/url-codec.ts +136 -0
package/src/web/composables/useBeadTooltip.ts +148 -0
package/src/web/composables/useKeyboard.ts +97 -0
package/src/web/composables/useLiveRefresh.ts +69 -0
package/src/web/composables/useTheme.ts +125 -0
package/src/web/composables/useUrlState.ts +208 -0
package/src/web/controls-scope.ts +83 -0
package/src/web/cost.ts +251 -0
package/src/web/dep-headings.ts +62 -0
package/src/web/economics.ts +440 -0
package/src/web/env.d.ts +85 -0
package/src/web/frontier.ts +208 -0
package/src/web/gantt-viewport.ts +99 -0
package/src/web/highlights.ts +124 -0
package/src/web/index.html +46 -0
package/src/web/insights.ts +107 -0
package/src/web/keybindings.ts +200 -0
package/src/web/load-meter.ts +72 -0
package/src/web/main.ts +20 -0
package/src/web/markdown.ts +14 -0
package/src/web/mine.ts +137 -0
package/src/web/mutations.ts +21 -0
package/src/web/person.ts +102 -0
package/src/web/projects-text.ts +15 -0
package/src/web/projects.ts +188 -0
package/src/web/refresh.ts +47 -0
package/src/web/search.ts +50 -0
package/src/web/shortcuts.ts +113 -0
package/src/web/status-filter.ts +48 -0
package/src/web/store.ts +1378 -0
package/src/web/style-audit.mjs +346 -0
package/src/web/styles-alt.css +111 -0
package/src/web/styles-ported.css +270 -0
package/src/web/subgraph.ts +362 -0
package/src/web/table.ts +201 -0
package/src/web/theme.ts +88 -0
package/src/web/tokens.css +168 -0
package/src/web/triage.ts +914 -0
package/src/web/view-model.ts +717 -0
package/src/web/walkthrough.ts +133 -0
package/src/web/watchlist.ts +47 -0
package/src/web/whatif.ts +291 -0
package/src/web/window.ts +73 -0
package/src/web/wip.ts +83 -0

package/src/web/components/Term.vue ADDED Viewed

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+// Term.vue — an explainable term (bp-67g.47).
+//
+// Every derived number in the drawer can explain itself. This is the ONE
+// mechanism for that, decided once so it does not vary field by field:
+//
+//   - The term is drawn with a dotted underline and is focusable
+//     (tabindex 0, role button), so the explanation is reachable by keyboard
+//     and announced through aria-describedby while it is shown.
+//   - Hover shows the note; so does focus (Tab lands on it).
+//   - Click, tap, Enter or Space PIN it, so it survives the pointer leaving
+//     and works on touch, where there is no hover. A second click, Escape,
+//     a tap or click anywhere else, or any scroll dismisses it.
+//   - The note is teleported to <body> and fixed to the viewport, placed
+//     under the term (above it when the viewport runs out), so a scrolling
+//     drawer cannot clip it. Scroll dismisses rather than re-anchors, because
+//     a note pointing at where a term used to be is worse than none.
+//
+// A `title` attribute would have been cheaper and is unreachable by keyboard
+// and on touch; that is why this exists. The sentence itself must come from
+// the module that computes the figure (see triage.ts explainSignal,
+// bead-detail.ts explainFinish, economics.ts PHASE_EXPLANATIONS), never be
+// typed here, so a formula change cannot leave a stale description behind.
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+const props = defineProps<{ note: string }>();
+const id = `term-note-${Math.random().toString(36).slice(2, 9)}`;
+const termEl = ref<HTMLElement | null>(null);
+const noteEl = ref<HTMLElement | null>(null);
+const hover = ref(false);
+const focused = ref(false);
+const pinned = ref(false);
+const visible = computed(() => hover.value || focused.value || pinned.value);
+const pos = ref({ left: "0px", top: "0px" });
+async function place() {
+  await nextTick();
+  const t = termEl.value?.getBoundingClientRect();
+  const n = noteEl.value;
+  if (!t || !n) return;
+  const pad = 12;
+  const gap = 6;
+  const w = n.offsetWidth;
+  const h = n.offsetHeight;
+  const left = Math.min(Math.max(pad, t.left), window.innerWidth - w - pad);
+  let top = t.bottom + gap;
+  if (top + h + pad > window.innerHeight) top = Math.max(pad, t.top - gap - h);
+  pos.value = { left: `${left}px`, top: `${top}px` };
+}
+function dismiss() {
+  hover.value = false;
+  focused.value = false;
+  pinned.value = false;
+}
+function onOutside(e: Event) {
+  const target = e.target as Node | null;
+  if (target && (termEl.value?.contains(target) || noteEl.value?.contains(target))) return;
+  dismiss();
+}
+function onClick() {
+  if (pinned.value) dismiss();
+  else pinned.value = true;
+}
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    if (!visible.value) return;
+    // Ours, not the drawer's: one Escape closes the note, the next closes
+    // the drawer.
+    e.stopPropagation();
+    dismiss();
+    termEl.value?.blur();
+  } else if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    onClick();
+  }
+}
+function listen(on: boolean) {
+  const m = on ? document.addEventListener : document.removeEventListener;
+  m.call(document, "scroll", dismiss, { capture: true, passive: true } as AddEventListenerOptions);
+  m.call(document, "pointerdown", onOutside, true);
+}
+watch(visible, (v) => {
+  listen(v);
+  if (v) void place();
+});
+onBeforeUnmount(() => listen(false));
+</script>
+<template>
+  <span class="term-wrap">
+    <span
+      ref="termEl"
+      class="term"
+      :class="{ 'is-open': visible }"
+      tabindex="0"
+      role="button"
+      :aria-expanded="visible"
+      :aria-describedby="visible ? id : undefined"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @focus="focused = true"
+      @blur="focused = false"
+      @click="onClick"
+      @keydown="onKeydown"
+    ><slot /></span>
+    <Teleport to="body">
+      <span
+        v-if="visible"
+        ref="noteEl"
+        :id="id"
+        class="term-note"
+        role="tooltip"
+        :style="{ left: pos.left, top: pos.top }"
+      >{{ props.note }}</span>
+    </Teleport>
+  </span>
+</template>
+<style>
+.term {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--c-dim-bright);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  cursor: help;
+  border-radius: 2px;
+}
+.term:hover,
+.term.is-open {
+  text-decoration-color: var(--c-accent);
+}
+.term:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 1px;
+}
+/* The note resets every inherited text style: a term inside an uppercase,
+   letter-spaced <dt> must not produce an uppercase, letter-spaced sentence. */
+.term-note {
+  position: fixed;
+  z-index: 9998;
+  display: block;
+  max-width: 300px;
+  padding: 8px 10px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 6px;
+  box-shadow: var(--shadow-pop);
+  font-size: 12px;
+  line-height: 1.45;
+  font-weight: 400;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  text-align: left;
+  white-space: normal;
+  font-family:
+    ui-sans-serif,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+  pointer-events: none;
+}
+</style>

package/src/web/components/Toast.vue ADDED Viewed

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// Toast.vue — one line at the bottom of the screen for the outcome of a
+// write (bp-ocs): what happened, or what failed and why. Announced as a status,
+// dismissed by its own timer or a click.
+import { useBeadsStore } from "../store";
+const store = useBeadsStore();
+</script>
+<template>
+  <Teleport to="body">
+    <div v-if="store.notice" class="toast" :class="`is-${store.notice.kind}`" role="status" @click="store.clearNotice()">
+      <span class="toast-text">{{ store.notice.text }}</span>
+    </div>
+  </Teleport>
+</template>
+<style>
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 9995;
+  max-width: min(720px, calc(100vw - 32px));
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-border-strong);
+  box-shadow: var(--shadow-pop);
+  font-size: 12px;
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  cursor: pointer;
+}
+.toast.is-error {
+  border-color: var(--c-danger);
+}
+.toast .toast-cmd {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/src/web/components/TriageMeters.vue ADDED Viewed

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+// TriageMeters.vue — the eight triage signals as contribution meters.
+//
+// Replaces the four-decimal breakdown table (bp-67g.27). The table is still
+// here, behind a disclosure, because no value should be reachable only by
+// reading a bar.
+//
+// The encoding is the whole point, and it is what bp-67g.16 rejected a
+// PolarChart radar in favour of:
+//
+//   TRACK   the signal's declared weight, scaled against the largest. An
+//           axis that can only ever reach 0.05 gets a quarter of the width
+//           of one that can reach 0.22.
+//   CARVE   the part of the weight the signal can NEVER spend, where its
+//           norm is capped below 1 (bp-67g.23). risk declares 0.10 and can
+//           reach 0.002, so 98% of its track is cut away.
+//   FILL    what this bead actually contributed.
+//   P90     where the 90th percentile of the open population sits, so a
+//           fill can be read against what "high" means on this repo. The
+//           absolute scales are meaningful but narrow in practice —
+//           nothing healthy is 30 days stale — so without this marker
+//           every bar looks empty and the panel says nothing.
+//
+// The carve-out started life as a notch at the achievable ceiling and was
+// invisible: both capped signals have norms that sit AT their maximum, so
+// the notch landed exactly on the fill edge every time. Removing the
+// unreachable region instead makes it an area rather than a line, and one
+// that cannot coincide with anything.
+//
+// A radar cannot express any of that: it has one magnitude domain, so it
+// plots the norm and makes a full-radius staleness spike (weight 0.05) look
+// identical to a full-radius pagerank spike (weight 0.22) while the two
+// contribute 4.4x different amounts.
+//
+// Rows are in fixed weight order, never sorted by this bead's own values —
+// fixed order is what lets two beads be compared by glancing down the same
+// rows, and weight order puts the signals that could move the score first.
+import { computed } from "vue";
+import {
+  TRIAGE_WEIGHTS,
+  SIGNAL_FIDELITY,
+  achievableContribution,
+  type SignalPopulation,
+  type TriageBreakdown,
+  type TriageSignal,
+  explainSignal,
+} from "../triage";
+import Term from "./Term.vue";
+const props = defineProps<{
+  breakdown: TriageBreakdown;
+  /** Spread across the open population, for the flat markers. */
+  population: SignalPopulation[];
+}>();
+const LABELS: Record<TriageSignal, string> = {
+  pagerank: "PageRank",
+  betweenness: "Betweenness",
+  blocker_ratio: "Blocker ratio",
+  priority_boost: "Priority",
+  time_to_impact: "Time to impact",
+  urgency: "Urgency",
+  staleness: "Staleness",
+  risk: "Risk",
+};
+const maxWeight = computed(() =>
+  Math.max(...Object.values(TRIAGE_WEIGHTS)),
+);
+interface MeterRow {
+  signal: TriageSignal;
+  label: string;
+  norm: number;
+  weight: number;
+  contribution: number;
+  /** Contribution as a share of this bead's whole score. */
+  share: number;
+  /** Fill width, as a percentage OF THE TRACK. */
+  fillPct: number;
+  /** Notch position, as a percentage of the track. 100 = no cap. */
+  ceilingPct: number;
+  capped: boolean;
+  fidelity: string;
+  note?: string;
+  degenerate: boolean;
+  /** Population p90 as a percentage of the track. Null when flat. */
+  p90Pct: number | null;
+}
+const rows = computed<MeterRow[]>(() => {
+  const byName = new Map(props.population.map((p) => [p.signal, p] as const));
+  const score = Object.keys(TRIAGE_WEIGHTS).reduce(
+    (a, k) => a + props.breakdown[k as TriageSignal],
+    0,
+  );
+  return (Object.keys(TRIAGE_WEIGHTS) as TriageSignal[])
+    .map((signal) => {
+      const weight = TRIAGE_WEIGHTS[signal];
+      const ceiling = achievableContribution(signal);
+      const contribution = props.breakdown[signal];
+      const fid = SIGNAL_FIDELITY[signal];
+      return {
+        signal,
+        label: LABELS[signal],
+        norm: props.breakdown[`${signal}_norm` as keyof TriageBreakdown],
+        weight,
+        contribution,
+        share: score > 0 ? contribution / score : 0,
+        // Against the WEIGHT, not the ceiling: a fill that cannot leave the
+        // left edge of a full-width track is the shape of a signal whose
+        // declared weight it can never spend.
+        fillPct: weight > 0 ? Math.min(100, (contribution / weight) * 100) : 0,
+        ceilingPct: weight > 0 ? Math.min(100, (ceiling / weight) * 100) : 100,
+        capped: fid.max < 1,
+        fidelity: fid.fidelity,
+        note: fid.note,
+        degenerate: byName.get(signal)?.degenerate ?? false,
+        // Skip the marker on a flat signal: with no spread, p90 sits on top
+        // of everything else and the marker would imply a comparison the
+        // data cannot support.
+        p90Pct: (() => {
+          const pop = byName.get(signal);
+          return pop && !pop.degenerate ? Math.min(100, pop.p90 * 100) : null;
+        })(),
+      };
+    })
+    .sort((a, b) => b.weight - a.weight);
+});
+const flatCount = computed(() => rows.value.filter((r) => r.degenerate).length);
+const cappedCount = computed(() => rows.value.filter((r) => r.capped).length);
+const populationSize = computed(() => props.population[0]?.nonzero ?? 0);
+/** The one signal that contributed most — the answer to "why this rank". */
+const topContributor = computed(() =>
+  rows.value.reduce((a, r) => (r.contribution > a.contribution ? r : a), rows.value[0]),
+);
+const fmt4 = (v: number) => v.toFixed(4);
+const byNameP90 = (signal: TriageSignal) =>
+  props.population.find((p) => p.signal === signal)?.p90;
+const fmtWeight = (v: number) => v.toFixed(2).slice(1);
+</script>
+<template>
+  <div class="meters-wrap">
+    <p class="meters-lede">
+      Track is the signal's weight; the fill is what this bead contributed.
+      <template v-if="topContributor">
+        Most of this score is
+        <strong>{{ topContributor.label.toLowerCase() }}</strong>
+        ({{ Math.round(topContributor.share * 100) }}%).
+      </template>
+      <template v-if="cappedCount">
+        A cut-off track is weight the signal cannot reach.
+      </template>
+      The tick is this repo's p90 — what a high value looks like here.
+    </p>
+    <ul class="meters">
+      <li
+        v-for="r in rows"
+        :key="r.signal"
+        :class="{ 'is-flat': r.degenerate, 'is-caveated': r.fidelity !== 'faithful' }"
+      >
+        <!-- Each name explains what it measures, from triage.ts itself
+             (bp-67g.47); the flat marker uses the same mechanism. -->
+        <span class="m-label">
+          <Term :note="explainSignal(r.signal)">{{ r.label }}</Term>
+          <Term
+            v-if="r.degenerate"
+            class="flat"
+            note="Three or fewer distinct values across the open beads in this repo — this axis is not separating anything here"
+          >flat</Term>
+        </span>
+        <span class="m-weight" :title="`weight ${fmt4(r.weight)}`">
+          {{ fmtWeight(r.weight) }}
+        </span>
+        <span
+          class="m-track"
+          :style="{ width: `${(r.weight / maxWeight) * 100}%` }"
+        >
+          <i class="m-fill" :style="{ width: `${r.fillPct}%` }" />
+          <!-- The weight this signal cannot spend, cut out of the track. -->
+          <!-- What a high value looks like on this repo. -->
+          <i
+            v-if="r.p90Pct !== null"
+            class="m-p90"
+            :style="{ left: `${r.p90Pct}%` }"
+            :title="`p90 of the open population is ${fmt4((byNameP90(r.signal) ?? 0))} — this bar is read against that`"
+          />
+          <i
+            v-if="r.capped"
+            class="m-unreachable"
+            :style="{ left: `${r.ceilingPct}%` }"
+            :title="`can only reach ${fmt4(achievableContribution(r.signal))} of its ${fmt4(r.weight)} weight — the rest is unspendable`"
+          />
+        </span>
+        <span class="m-value">{{ fmt4(r.contribution) }}</span>
+      </li>
+    </ul>
+    <!-- No longer claims urgency is staleness x priority: bp-67g.37
+         replaced that formula with urgency labels plus an age decay, so it
+         is an independent axis now. -->
+    <p v-if="flatCount" class="meters-note">
+      {{ flatCount }} of {{ rows.length }} signals are flat across this
+      repo's open beads, so they separate nothing here regardless of their
+      weight — usually because the dependency graph is too shallow to give
+      them anything to measure.
+    </p>
+    <details class="meters-table">
+      <summary>Table — norm, weight, ceiling and contribution</summary>
+      <table>
+        <thead>
+          <tr>
+            <th>Signal</th>
+            <th class="num">Norm</th>
+            <th class="num">Weight</th>
+            <th class="num">Max</th>
+            <th class="num">Contrib</th>
+            <th>vs bv</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="r in rows" :key="r.signal" :class="{ 'is-flat': r.degenerate }">
+            <td>{{ r.label }}</td>
+            <td class="num">{{ fmt4(r.norm) }}</td>
+            <td class="num">{{ fmt4(r.weight) }}</td>
+            <td class="num" :class="{ 'is-capped': r.capped }">
+              {{ fmt4(achievableContribution(r.signal)) }}
+            </td>
+            <td class="num">{{ fmt4(r.contribution) }}</td>
+            <td class="fid" :title="r.note">{{ r.fidelity }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </details>
+  </div>
+</template>
+<style scoped>
+.meters-lede,
+.meters-note {
+  font-size: 10px;
+  line-height: 1.5;
+  color: var(--c-dim);
+  margin: 0 0 10px;
+}
+.meters-lede strong {
+  color: var(--c-text);
+  font-weight: 600;
+}
+.meters-note {
+  margin: 10px 0 0;
+}
+.meters-note code {
+  font-family: var(--font-mono);
+}
+.meters {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.meters li {
+  display: grid;
+  grid-template-columns: 96px 24px 1fr 52px;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+.m-label {
+  font-size: 11px;
+  color: var(--c-text);
+  white-space: nowrap;
+}
+.meters li.is-flat .m-label {
+  color: var(--c-dim);
+}
+.m-label .flat {
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-warning-strong);
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  padding: 0 2px;
+  margin-left: 4px;
+  text-decoration: none;
+  cursor: help;
+  vertical-align: 1px;
+}
+.m-weight {
+  font-size: 10px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+/* The track IS the weight. Width is set inline per row, so a 0.05 signal is
+   visibly a quarter the reach of a 0.22 one before any value is read. */
+.m-track {
+  display: block;
+  height: 12px;
+  background: var(--c-dim-wash);
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+  min-width: 3px;
+}
+.m-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 12px;
+  background: var(--c-accent);
+  border-radius: 2px 0 0 2px;
+  display: block;
+  /* A hairline of surface where a full fill meets the track end, so 100%
+     still reads as a fill rather than as a recoloured track. */
+  min-width: 1px;
+}
+/* The 90th percentile of the open population. Sits ON the fill rather than
+   beside it, because the comparison being made is "how far along this track
+   compared with a high bead", and two separate bars would be a chart of two
+   different things. */
+.m-p90 {
+  position: absolute;
+  top: -2px;
+  width: 1px;
+  height: 16px;
+  background: var(--c-dim-bright);
+  transform: translateX(-0.5px);
+  display: block;
+  z-index: 1;
+}
+.meters li.is-flat .m-p90 {
+  display: none;
+}
+/* Weight the signal cannot spend, carved back out of the track: the panel
+   shows through, with a hairline where capacity stops. Not a stroke around
+   a mark — the track's own absence is the encoding. */
+.m-unreachable {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 12px;
+  background: var(--c-panel);
+  border-left: 1px solid var(--c-warning-strong);
+  display: block;
+}
+.m-value {
+  font-size: 10px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+/* ── table view ───────────────────────────────────────────────────────── */
+.meters-table {
+  margin-top: 12px;
+  font-size: 10px;
+}
+.meters-table summary {
+  cursor: pointer;
+  color: var(--c-dim);
+  padding: 2px 0;
+}
+.meters-table table {
+  border-collapse: collapse;
+  margin-top: 6px;
+  width: 100%;
+}
+.meters-table th,
+.meters-table td {
+  text-align: left;
+  padding: 2px 6px 2px 0;
+  border-bottom: 1px solid var(--c-border);
+  white-space: nowrap;
+}
+.meters-table thead th {
+  color: var(--c-dim);
+  font-weight: 600;
+}
+.meters-table .num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.meters-table td.is-capped {
+  color: var(--c-warning-strong);
+}
+.meters-table td.fid {
+  color: var(--c-dim);
+  cursor: help;
+}
+.meters-table tr.is-flat td {
+  color: var(--c-dim);
+}
+</style>