@@ -970,6 +983,7 @@ import {
isUnresolved,
formatOnCallInstant,
isDeletedTeam,
+ pagePhrase,
pageState,
promoteSeverityFloor,
promoteSeverityOptions,
@@ -982,10 +996,21 @@ import { formatTimestampInTimezone } from "@/utils/date";
const HOLD_RECHECK_MS = 10_000;
/// Re-reads of a lapsed rung before giving up: a minute at HOLD_RECHECK_MS.
const LAPSE_RECHECKS = 6;
+// Every verb inline takes about 56rem, which below this leaves the title a few letters wide.
+const INLINE_VERBS_QUERY = "(min-width: 96rem)";
const { t } = useI18nTyped();
const { nameOf, tooltipOf } = useOrgUserNames();
const { lgUp } = useBreakpoint();
+const inlineVerbsMql =
+ typeof window !== "undefined" && typeof window.matchMedia === "function"
+ ? window.matchMedia(INLINE_VERBS_QUERY)
+ : null;
+const wideHeader = ref(inlineVerbsMql?.matches ?? true);
+const onWideHeader = (e: MediaQueryListEvent) => (wideHeader.value = e.matches);
+inlineVerbsMql?.addEventListener?.("change", onWideHeader);
+onBeforeUnmount(() => inlineVerbsMql?.removeEventListener?.("change", onWideHeader));
+const inlineVerbs = computed(() => lgUp.value && wideHeader.value);
const nowMicros = useOnCallClock();
const store = useStore();
const route = useRoute();
@@ -1258,6 +1283,20 @@ const headerReachedStep = computed(() =>
),
);
+/// The subtitle's separator waits for a phrase, so an unanswered ladder leaves no dangling dot.
+const headerPhraseKind = computed(() =>
+ response.value
+ ? pagePhrase({
+ record: response.value,
+ progress: escalation.value,
+ progressLoaded: escalationLoaded.value,
+ totalRungs: totalRungs.value,
+ reachedStep: headerReachedStep.value,
+ nowMicros: nowMicros.value,
+ }).kind
+ : "unknown",
+);
+
// The same progress decides the header tag; the time is the last step's, which the record's flag lags.
const exhaustedAtClock = computed(() => {
const r = response.value;