FabledCurator/frontend/src/components/settings/MaintenancePanel.vue

<template>
  <div class="fc-maint">
    <p class="fc-muted text-body-2 mb-5">
      Processing, tagging and storage tools, grouped by system. Heads train
      nightly and auto-apply earned tags. Click a tile to open it.
    </p>

    <section class="fc-section">
      <h3 class="fc-section__title">Ingestion &amp; filters</h3>
      <p class="fc-section__hint">
        What gets imported — dedup sensitivity, size/transparency/solid-color
        filters. Applies to downloads and folder imports alike.
      </p>
      <div class="fc-tile-stack">
        <ImportFiltersForm />
        <TranslationCard />
        <DiscordGroupingCard />
        <DiscordRepairCard />
        <PostAssociationsCard />
        <MembershipRosterCard />
        <MembershipSuggestionsCard />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">GPU agent &amp; embeddings</h3>
      <p class="fc-section__hint">
        The desktop agent that does the heavy lifting, its failure triage, and
        the CPU fallback.
      </p>
      <div class="fc-tile-stack">
        <VideoEmbeddingCard />
        <GpuAgentCard />
        <GpuTriageCard />
        <MLBackfillCard />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">Tagging</h3>
      <p class="fc-section__hint">
        Suggestion thresholds, trained heads and tag aliases.
      </p>
      <div class="fc-tile-stack">
        <CropProposersCard />
        <HeadsCard />
        <AliasTable />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">Library health</h3>
      <p class="fc-section__hint">
        Self-healing and repair: missing files, thumbnails, database upkeep.
      </p>
      <div class="fc-tile-grid">
        <MissingFileRepairCard />
        <ThumbnailBackfillCard />
        <DbMaintenanceCard />
        <ArchiveReextractCard />
      </div>
    </section>

    <section class="fc-section">
      <h3 class="fc-section__title">Storage</h3>
      <p class="fc-section__hint">Database + image backups and restore.</p>
      <div class="fc-tile-stack">
        <BackupCard />
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

import ImportFiltersForm from './ImportFiltersForm.vue'
import TranslationCard from './TranslationCard.vue'
import MLBackfillCard from './MLBackfillCard.vue'
import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
import ArchiveReextractCard from './ArchiveReextractCard.vue'
import MissingFileRepairCard from './MissingFileRepairCard.vue'
import GpuTriageCard from './GpuTriageCard.vue'
import DbMaintenanceCard from './DbMaintenanceCard.vue'
import VideoEmbeddingCard from './VideoEmbeddingCard.vue'
import CropProposersCard from './CropProposersCard.vue'
import HeadsCard from './HeadsCard.vue'
import DiscordGroupingCard from './DiscordGroupingCard.vue'
import DiscordRepairCard from './DiscordRepairCard.vue'
import MembershipRosterCard from './MembershipRosterCard.vue'
import MembershipSuggestionsCard from './MembershipSuggestionsCard.vue'
import PostAssociationsCard from './PostAssociationsCard.vue'
import GpuAgentCard from './GpuAgentCard.vue'
import AliasTable from './AliasTable.vue'
import BackupCard from './BackupCard.vue'
import { useSystemActivityStore } from '../../stores/systemActivity.js'

// Poll queue depths so each task tile's QueueStatusBar shows live pending
// counts — the operator can see a backfill is already queued/running before
// re-triggering it.
const activity = useSystemActivityStore()
let qTimer = null
onMounted(() => {
  activity.loadQueues()
  qTimer = setInterval(() => {
    if (!document.hidden) activity.loadQueues()
  }, 4000)
})
onUnmounted(() => {
  if (qTimer) { clearInterval(qTimer); qTimer = null }
})
</script>

<style scoped>
.fc-section { margin-bottom: 24px; }
.fc-section__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--v-theme-accent));
  margin-bottom: 2px;
}
.fc-section__hint {
  font-size: 0.8rem;
  color: rgb(var(--v-theme-on-surface-variant));
  margin-bottom: 12px;
}
.fc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
.fc-tile-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>