FabledCurator/frontend/src/components/subscriptions/SourceHealthDot.vue

<template>
  <v-tooltip location="top" open-delay="200">
    <template #activator="{ props: tipProps }">
      <span
        v-bind="tipProps"
        :class="['fc-health-dot', `fc-health-dot--${level}`]"
        :aria-label="ariaLabel"
      />
    </template>
    <div class="fc-health-tip">
      <div>Last checked: {{ lastCheckedText }}</div>
      <div v-if="nextCheckText">Next check: {{ nextCheckText }}</div>
      <div v-if="noAccess" class="fc-health-tip__gated">{{ noAccessText }}</div>
      <div v-if="(source.consecutive_failures || 0) > 0">
        Failures: {{ source.consecutive_failures }}
      </div>
      <div v-if="source.last_error" class="fc-health-tip__err">
        {{ truncatedError }}
      </div>
    </div>
  </v-tooltip>
</template>

<script setup>
import { computed } from 'vue'
import { formatRelative } from '../../utils/date.js'

const props = defineProps({
  source: { type: Object, required: true },
  warningThreshold: { type: Number, default: 5 },
})

const noAccess = computed(() => props.source.error_type === 'tier_limited')

const level = computed(() => {
  if (!props.source.last_checked_at) return 'unchecked'
  const f = props.source.consecutive_failures || 0
  // No-access outranks 'healthy' but is NOT a failure grade: the walk worked,
  // the content simply isn't ours. Checked after failures so a source that is
  // genuinely erroring still reads as erroring.
  if (f === 0) return noAccess.value ? 'no-access' : 'healthy'
  if (f < props.warningThreshold) return 'warning'
  return 'critical'
})

// The count comes from the last walk's run_stats and is only joined in by the
// list endpoint, so it can legitimately be absent — say the state without it
// rather than printing a fabricated zero.
const noAccessText = computed(() => {
  const n = props.source.tier_gated_count
  return n
    ? `${n} post${n === 1 ? '' : 's'} you don't have access to`
    : "Some posts are behind a tier you don't hold"
})

const ariaLabel = computed(() => `source health: ${level.value}`)

const lastCheckedText = computed(() => formatRelative(props.source.last_checked_at))

const nextCheckText = computed(() =>
  props.source.next_check_at
    ? formatRelative(props.source.next_check_at, { future: true })
    : null,
)

const truncatedError = computed(() => {
  const e = props.source.last_error || ''
  return e.length > 120 ? e.slice(0, 117) + '…' : e
})
</script>

<style scoped>
.fc-health-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-health-dot--unchecked { background-color: rgb(var(--v-theme-on-surface-variant)); opacity: 0.5; }
.fc-health-dot--healthy   { background-color: rgb(var(--v-theme-success, 76 175 80)); }
/* Matches the 'info' severity FailingSourcesCard already assigns tier_limited —
   deliberately not a warning/error hue: nothing is broken. */
.fc-health-dot--no-access { background-color: rgb(var(--v-theme-info, 33 150 243)); }
.fc-health-dot--warning   { background-color: rgb(var(--v-theme-warning, 255 167 38)); }
.fc-health-dot--critical  { background-color: rgb(var(--v-theme-error, 244 67 54)); }

.fc-health-tip {
  font-size: 0.85rem;
  line-height: 1.4;
}
.fc-health-tip__gated {
  color: rgb(var(--v-theme-info, 33 150 243));
}
.fc-health-tip__err {
  margin-top: 0.25rem;
  color: rgb(var(--v-theme-error, 244 67 54));
  white-space: pre-wrap;
  max-width: 32rem;
}
</style>