feature: shader progress (#404)

Author: lukepolo

components/clips/RenderQueuePanel.vue

@@ -139,6 +139,15 @@ const QUEUE_BOOT_STAGES = computed<
     label: t("live_stages.loading_demo_in_cs2"),
     meta: "required",
   },
+  {
+    // Cold-GLCache Vulkan shader compile. Highlights always wait for it
+    // (SHADER_PRECACHE), and it's the usual reason a render sits "queued"
+    // for minutes — surface it as its own progress-tracked step. Skipped
+    // once the cache is warm.
+    key: "processing_shaders",
+    label: t("live_stages.processing_shaders"),
+    meta: "conditional",
+  },
   {
     key: "connecting_to_game",
     label: t("live_stages.queuing_demo"),
@@ -864,7 +873,15 @@ const queueStatus = computed<{
     if (s.total_gpu_nodes === 0) {
       return { key: "no_gpu_registered", tone: "danger" };
     }
-    if (s.free_gpu_nodes === 0) {
+    // Only flag a problem when NO GPU can take a batch render. If any node is
+    // batch-claimable (free_gpu_nodes_for_batch > 0), a render can run even
+    // when a match is live on a different node — fall through to idle/waiting.
+    if (s.free_gpu_nodes_for_batch === 0) {
+      // A GPU may be idle yet unclaimable because a live match is running on it
+      // and pause_renders_during_active_match is on.
+      if (s.renders_paused_for_active_match) {
+        return { key: "paused_active_match", tone: "amber" };
+      }
       if (s.live_in_progress) return { key: "blocked_live", tone: "amber" };
       if (s.demo_in_progress) return { key: "blocked_demo", tone: "amber" };
       return { key: "no_gpu_free", tone: "amber" };
@@ -913,7 +930,13 @@ const queueStatus = computed<{
             v-if="queueStatus.key === 'rendering'"
             class="h-3 w-3 animate-spin"
           />
-          <Pause v-else-if="queueStatus.key === 'paused'" class="h-3 w-3" />
+          <Pause
+            v-else-if="
+              queueStatus.key === 'paused' ||
+              queueStatus.key === 'paused_active_match'
+            "
+            class="h-3 w-3"
+          />
           <AlertCircle
             v-else-if="queueStatus.tone === 'danger'"
             class="h-3 w-3"

components/match/DemoPlayer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
@@ -54,6 +54,12 @@ const DEMO_STAGES = computed(() => [
     label: t("live_stages.launching_cs2"),
     meta: "required" as const,
   },
+  {
+    // Cold-cache Vulkan shader compile. Skipped once the cache is warm.
+    key: "processing_shaders",
+    label: t("live_stages.processing_shaders"),
+    meta: "conditional" as const,
+  },
   {
     key: "connecting_to_game",
     label: t("live_stages.loading_demo_into_cs2"),
@@ -72,9 +78,16 @@ defineProps<{
   isOrganizer: boolean;
 }>();
 
-const { store } = useDemoPlayback();
+const { store, skipShaders } = useDemoPlayback();
 const editor = useClipEditor();
 const authStore = useAuthStore();
+
+const skippingShaders = ref(false);
+function onSkipShaders() {
+  if (skippingShaders.value) return;
+  skippingShaders.value = true;
+  skipShaders();
+}
 // Boot pipeline is operator info — gate the stepper to streamer+.
 // (`/stream-deck/*` already has middleware/streamer.ts; the demo page
 // has no middleware, so we gate inline.)
@@ -129,6 +142,9 @@ function closeWindow() {
             :status-history="store.sessionRow?.status_history || []"
             :stages="DEMO_STAGES"
             header-label="Demo session boot"
+            :can-skip="canSeeBoot"
+            :skipping="skippingShaders"
+            @skip="onSkipShaders"
           />
           <Button
             v-if="store.isErrored || store.localStatus === 'error'"

components/match/LiveStreamPlayer.vue

@@ -82,6 +82,13 @@ const LIVE_STAGES = computed(() => [
     label: t("live_stages.launching_cs2"),
     meta: "required" as const,
   },
+  {
+    // Only fires when the GLCache is cold and the pod waits out the Vulkan
+    // shader compile (SHADER_PRECACHE). Skipped on a warm cache.
+    key: "processing_shaders",
+    label: t("live_stages.processing_shaders"),
+    meta: "conditional" as const,
+  },
   {
     key: "connecting_to_game",
     label: t("live_stages.connecting_to_game"),

components/match/MatchMaps.vue

@@ -160,7 +160,9 @@ import cleanMapName from "~/utilities/cleanMapName";
               size="xs"
               variant="ghost"
               class="h-6 w-6 p-0 text-white/70 hover:text-white"
-              v-if="matchMap.demos_total_size || (matchMap.demos?.length ?? 0) > 0"
+              v-if="
+                matchMap.demos_total_size || (matchMap.demos?.length ?? 0) > 0
+              "
             >
               <Download class="w-3.5 h-3.5" />
             </Button>

components/match/StreamSessionProgress.vue

@@ -6,7 +6,11 @@ import {
   Loader2,
   AlertCircle,
   Minus,
+  FastForward,
 } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 // Stepper for a streamer-pod session boot.
 //
@@ -43,13 +47,21 @@ const props = withDefaults(
       progress?: number;
       progress_stage?: string;
     }>;
+    // Operator-only: show a "Skip shaders" affordance while the pod is
+    // still booting (the parent gates this on role + not-yet-live).
+    canSkip?: boolean;
+    skipping?: boolean;
   }>(),
   {
     headerLabel: "Session boot",
     statusHistory: () => [],
+    canSkip: false,
+    skipping: false,
   },
 );
 
+const emit = defineEmits<{ (e: "skip"): void }>();
+
 const firedStatuses = computed(() => {
   const set = new Set<string>(props.statusHistory.map((h) => h.status));
   // status push may race ahead of history fan-out.
@@ -147,6 +159,29 @@ function durationFor(stageKey: string): string {
   if (!next) return "";
   return fmt(new Date(next.at).getTime() - start);
 }
+
+// The shader compile is the one stage with rich progress — once a
+// percentage lands it gets a dedicated bar+count block instead of the
+// cramped inline meta every other stage uses.
+function shaderActive(stageKey: string, index: number): boolean {
+  return (
+    stageKey === "processing_shaders" &&
+    stateOf(index) === "current" &&
+    props.status !== "errored" &&
+    progressFor(stageKey) !== null
+  );
+}
+
+// "(26824 / 731082)" → "26,824 / 731,082". Falls back to the raw
+// string (sans wrapping parens) when it isn't an a/b count.
+function formatShaderCount(raw: string | null | undefined): string {
+  if (!raw) return "";
+  const m = raw.match(/(\d[\d,]*)\s*\/\s*(\d[\d,]*)/);
+  if (!m) return raw.replace(/^\(|\)$/g, "");
+  const done = Number(m[1].replace(/,/g, "")).toLocaleString();
+  const total = Number(m[2].replace(/,/g, "")).toLocaleString();
+  return `${done} / ${total}`;
+}
 </script>
 
 <template>
@@ -162,7 +197,7 @@ function durationFor(stageKey: string): string {
       <li
         v-for="{ stage, index } in visibleStages"
         :key="stage.key"
-        class="flex items-center gap-2.5 text-xs transition-colors"
+        class="text-xs transition-colors"
         :class="{
           'text-muted-foreground/60': stateOf(index) === 'pending',
           'text-muted-foreground/40 line-through decoration-muted-foreground/30':
@@ -174,52 +209,104 @@ function durationFor(stageKey: string): string {
             stateOf(index) === 'current' && status === 'errored',
         }"
       >
-        <span class="w-4 h-4 inline-flex items-center justify-center shrink-0">
-          <Check v-if="stateOf(index) === 'done'" class="w-3.5 h-3.5" />
-          <Loader2
-            v-else-if="stateOf(index) === 'current' && status !== 'errored'"
-            class="w-3.5 h-3.5 animate-spin"
-          />
-          <AlertCircle
-            v-else-if="stateOf(index) === 'current' && status === 'errored'"
-            class="w-3.5 h-3.5"
-          />
-          <Minus
-            v-else-if="stateOf(index) === 'skipped'"
-            class="w-3.5 h-3.5 opacity-50"
-          />
-          <CircleDashed v-else class="w-3.5 h-3.5 opacity-50" />
-        </span>
-        <span class="flex-1">{{ stage.label }}</span>
-        <span
-          v-if="stateOf(index) === 'current' && progressFor(stage.key) !== null"
-          class="font-mono text-[0.65rem] tabular-nums opacity-80"
+        <div class="flex items-center gap-2.5">
+          <span class="w-4 h-4 inline-flex items-center justify-center shrink-0">
+            <Check v-if="stateOf(index) === 'done'" class="w-3.5 h-3.5" />
+            <Loader2
+              v-else-if="stateOf(index) === 'current' && status !== 'errored'"
+              class="w-3.5 h-3.5 animate-spin"
+            />
+            <AlertCircle
+              v-else-if="stateOf(index) === 'current' && status === 'errored'"
+              class="w-3.5 h-3.5"
+            />
+            <Minus
+              v-else-if="stateOf(index) === 'skipped'"
+              class="w-3.5 h-3.5 opacity-50"
+            />
+            <CircleDashed v-else class="w-3.5 h-3.5 opacity-50" />
+          </span>
+          <span class="flex-1 min-w-0 truncate">{{ stage.label }}</span>
+
+          <!-- Inline meta for every stage except the active shader compile,
+               which moves its numbers into the progress block below so the
+               label never has to wrap. -->
+          <template v-if="!shaderActive(stage.key, index)">
+            <span
+              v-if="
+                stateOf(index) === 'current' && progressFor(stage.key) !== null
+              "
+              class="font-mono text-[0.65rem] tabular-nums opacity-80"
+            >
+              {{ progressFor(stage.key)!.percent.toFixed(1) }}%
+            </span>
+            <span
+              v-if="stateOf(index) === 'current' && elapsedOnCurrent"
+              class="font-mono text-[0.65rem] tabular-nums opacity-70"
+            >
+              {{ elapsedOnCurrent }}
+            </span>
+            <span
+              v-else-if="stateOf(index) === 'done' && durationFor(stage.key)"
+              class="font-mono text-[0.65rem] tabular-nums opacity-60"
+            >
+              {{ durationFor(stage.key) }}
+            </span>
+            <span
+              v-else-if="stateOf(index) === 'skipped'"
+              class="font-mono text-[0.6rem] uppercase tracking-wider opacity-50"
+            >
+              skipped
+            </span>
+          </template>
+
+          <!-- Operator-only skip, pinned to the right of the shader row. -->
+          <button
+            v-if="
+              canSkip &&
+              stage.key === 'processing_shaders' &&
+              stateOf(index) === 'current'
+            "
+            type="button"
+            :disabled="skipping"
+            class="ml-1 inline-flex shrink-0 items-center gap-1 rounded border border-border/60 bg-card/60 px-1.5 py-0.5 font-mono text-[0.6rem] font-medium uppercase tracking-wider text-muted-foreground transition-colors hover:bg-card hover:text-foreground disabled:opacity-50 cursor-pointer"
+            @click.stop="emit('skip')"
+          >
+            <Loader2 v-if="skipping" class="w-2.5 h-2.5 animate-spin" />
+            <FastForward v-else class="w-2.5 h-2.5" />
+            {{ t("live_stages.skip_shaders") }}
+          </button>
+        </div>
+
+        <!-- Shader compile detail: thin progress bar + count and elapsed,
+             aligned under the label (icon width + gap = 1.625rem). -->
+        <div
+          v-if="shaderActive(stage.key, index)"
+          class="mt-1.5 ml-[1.625rem] flex flex-col gap-1"
         >
-          {{ progressFor(stage.key)!.percent.toFixed(1) }}%<span
-            v-if="progressFor(stage.key)!.stage"
-            class="opacity-60"
+          <div
+            class="h-1 w-full overflow-hidden rounded-full bg-muted-foreground/15"
           >
-            ({{ progressFor(stage.key)!.stage }})</span
+            <div
+              class="h-full rounded-full bg-[hsl(var(--tac-amber))] transition-[width] duration-500 ease-out"
+              :style="{ width: `${progressFor(stage.key)!.percent}%` }"
+            />
+          </div>
+          <div
+            class="flex items-center justify-between gap-2 font-mono text-[0.6rem] tabular-nums text-muted-foreground"
           >
-        </span>
-        <span
-          v-if="stateOf(index) === 'current' && elapsedOnCurrent"
-          class="font-mono text-[0.65rem] tabular-nums opacity-70"
-        >
-          {{ elapsedOnCurrent }}
-        </span>
-        <span
-          v-else-if="stateOf(index) === 'done' && durationFor(stage.key)"
-          class="font-mono text-[0.65rem] tabular-nums opacity-60"
-        >
-          {{ durationFor(stage.key) }}
-        </span>
-        <span
-          v-else-if="stateOf(index) === 'skipped'"
-          class="font-mono text-[0.6rem] uppercase tracking-wider opacity-50"
-        >
-          skipped
-        </span>
+            <span class="truncate">
+              <span class="text-foreground/80"
+                >{{ progressFor(stage.key)!.percent.toFixed(1) }}%</span
+              ><span v-if="progressFor(stage.key)!.stage" class="opacity-60">
+                · {{ formatShaderCount(progressFor(stage.key)!.stage) }}</span
+              >
+            </span>
+            <span v-if="elapsedOnCurrent" class="shrink-0 opacity-70">{{
+              elapsedOnCurrent
+            }}</span>
+          </div>
+        </div>
       </li>
     </ul>
 

composables/useDemoPlayback.ts

@@ -403,7 +403,8 @@ export function useDemoPlayback() {
       | "hud-sides"
       | "demoui"
       | "autodirector"
-      | "scoreboard",
+      | "scoreboard"
+      | "skip-shaders",
     payload: Record<string, unknown> = {},
   ) {
     if (!store.matchMapId) {
@@ -416,6 +417,13 @@ export function useDemoPlayback() {
     });
   }
 
+  // Operator "Skip shaders" during demo boot — dismisses the Vulkan
+  // shader compile so cs2 starts now (shaders compile on-demand). Rides
+  // the same demo-session control socket as pause/seek.
+  function skipShaders() {
+    control("skip-shaders");
+  }
+
   // Optimistic wrappers: update the store immediately so the UI feels
   // responsive, then fire the WS event. The next match_demo_sessions
   // subscription tick is the source of truth for status/activity; we
@@ -656,6 +664,7 @@ export function useDemoPlayback() {
     togglePause,
     seek,
     skip,
+    skipShaders,
     setSpeed,
     jumpToRound,
     jumpToNextKill,