aigen/components/AppHeader.vue

<template>
  <header class="sticky top-0 z-20 border-b border-white/5 bg-zinc-950/90 sm:bg-zinc-950/80 sm:backdrop-blur-md">
    <div
      class="mx-auto flex items-center justify-between px-4 py-4 sm:px-6"
      :class="wide ? 'max-w-[90rem]' : 'max-w-7xl'"
    >
      <div class="relative flex items-center gap-3">
        <NuxtLink
          to="/"
          class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-400 font-display font-extrabold text-zinc-950"
        >A</NuxtLink>
        <div>
          <button
            type="button"
            class="flex items-center gap-1.5 text-left"
            :aria-expanded="menuOpen"
            aria-haspopup="menu"
            @click.stop="toggleMenu"
          >
            <span class="font-display text-xl font-bold leading-none">{{ instanceName }}</span>
            <svg class="h-4 w-4 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path
                fill-rule="evenodd"
                d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <p class="hidden text-[11px] uppercase tracking-[0.22em] text-zinc-500 sm:block">{{ subtitle }}</p>
        </div>
        <div
          v-if="menuOpen"
          class="absolute left-0 top-full z-30 mt-2 w-52 rounded-2xl border border-white/10 bg-zinc-950/95 p-1 shadow-xl shadow-black/40"
          role="menu"
          @click.stop
        >
          <NuxtLink
            v-if="current !== 'studio'"
            to="/"
            class="block rounded-xl px-3 py-2 text-sm text-zinc-200 hover:bg-white/5 hover:text-white"
            role="menuitem"
            @click="menuOpen = false"
          >Studio</NuxtLink>
          <NuxtLink
            to="/library"
            class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
            :class="current === 'library' ? 'text-amber-100' : 'text-zinc-200'"
            role="menuitem"
            @click="menuOpen = false"
          >Library</NuxtLink>
          <NuxtLink
            to="/director"
            class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
            :class="current === 'director' ? 'text-amber-100' : 'text-zinc-200'"
            role="menuitem"
            @click="menuOpen = false"
          >Director</NuxtLink>
          <NuxtLink
            to="/music"
            class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
            :class="current === 'music' ? 'text-amber-100' : 'text-zinc-200'"
            role="menuitem"
            @click="menuOpen = false"
          >Music</NuxtLink>
          <button
            type="button"
            class="block w-full rounded-xl px-3 py-2 text-left text-sm hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50"
            :class="gpuWaking ? 'text-amber-100' : 'text-zinc-200 hover:text-white'"
            :disabled="gpuWaking || gpuSleeping"
            :title="gpuError || 'Start Comfy on the GPU'"
            role="menuitem"
            @click="pokeGpu"
          >{{ gpuWaking ? 'Poking…' : 'Poke' }}</button>
          <button
            type="button"
            class="block w-full rounded-xl px-3 py-2 text-left text-sm hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50"
            :class="gpuSleeping ? 'text-amber-100' : 'text-zinc-200 hover:text-white'"
            :disabled="gpuSleeping || gpuWaking || gpuForceResetting"
            :title="gpuError || (gpuBusy ? 'Cancel the running job first' : 'Stop Comfy on the GPU to free VRAM. Does not shut the PC down.')"
            role="menuitem"
            @click="sleepGpu"
          >{{ gpuSleeping ? 'Sleeping…' : 'Sleep' }}</button>
          <button
            type="button"
            class="block w-full rounded-xl px-3 py-2 text-left text-sm text-red-200 hover:bg-white/5 hover:text-red-100 disabled:cursor-not-allowed disabled:opacity-50"
            :disabled="gpuForceResetting || gpuSleeping || gpuWaking"
            title="Clear stuck Studio/music/shot jobs and kill Comfy even if a generation is wedged"
            role="menuitem"
            @click="forceResetGpu"
          >{{ gpuForceResetting ? 'Force resetting…' : 'Force reset' }}</button>
          <div class="my-1 border-t border-white/10" />
          <NuxtLink
            to="/settings"
            class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
            :class="current === 'settings' ? 'text-amber-100' : 'text-zinc-200'"
            role="menuitem"
            @click="menuOpen = false"
          >Settings</NuxtLink>
          <a
            v-if="authEnabled"
            href="/api/auth/logout"
            class="block rounded-xl px-3 py-2 text-sm text-zinc-400 hover:bg-white/5 hover:text-white"
            role="menuitem"
          >Sign out</a>
          <p v-if="gpuError" class="px-3 py-1.5 text-[11px] text-red-300">{{ gpuError }}</p>
        </div>
      </div>
      <div class="flex items-center gap-3 text-sm">
        <span
          class="hidden items-center gap-2 rounded-full border px-3 py-1 sm:inline-flex"
          :class="rigBadge.className"
          :title="rigBadge.title"
        >
          <span class="h-2 w-2 rounded-full" :class="rigBadge.dot" />
          {{ rigBadge.label }}
        </span>
        <NuxtLink
          to="/queue"
          class="rounded-full border px-3 py-1 hover:border-amber-300/50 hover:text-white"
          :class="current === 'queue' || queueCount
            ? 'border-amber-300/40 text-amber-100'
            : 'border-white/10 text-zinc-300'"
        >
          Queue<span v-if="queueCount" class="ml-1.5 text-amber-200">{{ queueCount }}</span>
        </NuxtLink>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  subtitle: string
  current?: 'studio' | 'library' | 'director' | 'queue' | 'settings' | 'music'
  wide?: boolean
  queueCount?: number
}>(), {
  current: 'studio',
  wide: false,
  queueCount: 0
})

const emit = defineEmits<{
  gpu: []
}>()

const runtimeConfig = useRuntimeConfig()
const instanceName = ref(String(runtimeConfig.public.instanceName || 'AIGen'))
const authEnabled = ref(false)
const menuOpen = ref(false)
const gpuWaking = ref(false)
const gpuSleeping = ref(false)
const gpuForceResetting = ref(false)
const gpuError = ref('')
const comfyOk = ref(false)
const imageOk = ref(false)
const comfyBusy = ref(false)
const imageBusy = ref(false)
const comfyAsleep = ref(false)
let healthTimer: ReturnType<typeof setInterval> | null = null

const gpuBusy = computed(() => comfyBusy.value || imageBusy.value)
const rigBadge = computed(() => {
  if (gpuSleeping.value) {
    return {
      label: 'Stopping…',
      className: 'border-amber-400/40 text-amber-200',
      dot: 'bg-amber-400 animate-pulse',
      title: 'Stopping Comfy on the GPU'
    }
  }
  if (gpuWaking.value) {
    return {
      label: 'Starting…',
      className: 'border-amber-400/40 text-amber-200',
      dot: 'bg-amber-400 animate-pulse',
      title: 'Starting Comfy Desktop on the GPU'
    }
  }
  if (!comfyOk.value && !imageOk.value) {
    return {
      label: 'Offline',
      className: 'border-red-400/30 text-red-300',
      dot: 'bg-red-400',
      title: comfyAsleep.value
        ? 'Desktop GPU is asleep. Open the menu and click Poke, or generate to start Comfy.'
        : 'Desktop GPU is unreachable'
    }
  }
  if (gpuBusy.value) {
    return {
      label: 'Live',
      className: 'border-amber-400/40 text-amber-200',
      dot: 'bg-amber-400 animate-pulse',
      title: 'Desktop GPU is rendering'
    }
  }
  return {
    label: 'Ready',
    className: 'border-emerald-400/30 text-emerald-300',
    dot: 'bg-emerald-400',
    title: 'Desktop GPU is free'
  }
})

function toggleMenu() {
  menuOpen.value = !menuOpen.value
}

function closeMenu() {
  menuOpen.value = false
}

function applyHealth(health: {
  comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }
  imageComfy?: { ok?: boolean; busy?: boolean }
} | null | undefined) {
  const nextComfy = Boolean(health?.comfy?.ok)
  const nextImage = Boolean(health?.imageComfy?.ok)
  comfyOk.value = nextComfy
  imageOk.value = nextImage
  comfyBusy.value = Boolean(nextComfy && health?.comfy?.busy)
  imageBusy.value = Boolean(nextImage && health?.imageComfy?.busy)
  comfyAsleep.value = Boolean(health?.comfy?.asleep) && !nextComfy && !nextImage
}

async function pollHealth() {
  const health = await $fetch<{
    comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }
    imageComfy?: { ok?: boolean; busy?: boolean }
  }>('/api/health').catch(() => ({ comfy: { ok: false, busy: false } }))
  applyHealth(health)
}

async function pokeGpu() {
  if (gpuWaking.value || gpuSleeping.value || gpuForceResetting.value) return
  gpuWaking.value = true
  gpuError.value = ''
  try {
    await $fetch('/api/comfy/wake', { method: 'POST' })
    const deadline = Date.now() + 180_000
    while (Date.now() < deadline) {
      await pollHealth()
      emit('gpu')
      if (comfyOk.value || imageOk.value) return
      await new Promise(resolve => setTimeout(resolve, 3000))
    }
    gpuError.value = 'Started Comfy but it is not answering yet. If the instance picker is showing, open ComfyUI (1).'
  } catch (error: any) {
    gpuError.value = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Could not wake the GPU.'
  } finally {
    gpuWaking.value = false
    emit('gpu')
  }
}

async function sleepGpu() {
  if (gpuSleeping.value || gpuWaking.value || gpuForceResetting.value || gpuBusy.value) return
  gpuSleeping.value = true
  gpuError.value = ''
  try {
    await $fetch('/api/comfy/sleep', { method: 'POST' })
    comfyOk.value = false
    imageOk.value = false
    comfyAsleep.value = true
    await pollHealth()
  } catch (error: any) {
    gpuError.value = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Could not stop Comfy.'
  } finally {
    gpuSleeping.value = false
    emit('gpu')
  }
}

async function forceResetGpu() {
  if (gpuForceResetting.value || gpuSleeping.value || gpuWaking.value) return
  const ok = window.confirm(
    'Force reset cancels every running/waiting Studio and music job, wipes shot batches, and kills Comfy even if wedged. Continue?'
  )
  if (!ok) return
  menuOpen.value = false
  gpuForceResetting.value = true
  gpuError.value = ''
  try {
    await $fetch('/api/comfy/force-reset', { method: 'POST' })
    comfyOk.value = false
    imageOk.value = false
    comfyBusy.value = false
    imageBusy.value = false
    comfyAsleep.value = true
    await pollHealth()
  } catch (error: any) {
    gpuError.value = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Could not force-reset Comfy.'
  } finally {
    gpuForceResetting.value = false
    emit('gpu')
  }
}

function onWindowClick() {
  closeMenu()
}

function onKey(event: KeyboardEvent) {
  if (event.key === 'Escape') closeMenu()
}

onMounted(async () => {
  window.addEventListener('click', onWindowClick)
  window.addEventListener('keydown', onKey)
  const [health, me] = await Promise.all([
    $fetch<{ comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }; imageComfy?: { ok?: boolean; busy?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false, busy: false } })),
    $fetch<{ authEnabled?: boolean; instanceName?: string }>('/api/auth/me').catch(() => ({}))
  ])
  applyHealth(health)
  authEnabled.value = Boolean(me.authEnabled)
  if (me.instanceName) instanceName.value = me.instanceName
  healthTimer = setInterval(() => {
    if (typeof document !== 'undefined' && document.hidden) return
    void pollHealth()
  }, 15000)
})

onBeforeUnmount(() => {
  window.removeEventListener('click', onWindowClick)
  window.removeEventListener('keydown', onKey)
  if (healthTimer) clearInterval(healthTimer)
  healthTimer = null
})
</script>