From 0050efab68e1cf4d17fe27cb9bf33be439cbc1e3 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:27:38 -0400
Subject: [PATCH 1/8] Update OPSN / LOCAL display in App component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/App.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 335c7fd..cb98cf6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -244,7 +244,9 @@ function App() {
                 <div className="relative min-w-0">
                   <span className="ops-hero-rail-mobile" aria-hidden="true" />
                   <div className="ops-coordinate-strip ops-hero-coordinate-strip">
-                    <span>OPSN / LOCAL</span>
+                    <span className="ops-hero-callsign-plate">
+                      OPSN / LOCAL
+                    </span>
                     <span>READINESS</span>
                     <span>30D</span>
                     <span>5SEC</span>

From 51a9d634e355e4e8e37485f834c6e4722f4ccd3c Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:28:24 -0400
Subject: [PATCH 2/8] Update HeaderTelemetry component structure and styles

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/components/HeaderTelemetry.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/HeaderTelemetry.tsx b/src/components/HeaderTelemetry.tsx
index 48ab464..a23f3aa 100644
--- a/src/components/HeaderTelemetry.tsx
+++ b/src/components/HeaderTelemetry.tsx
@@ -196,6 +196,7 @@ function TelemetryChip({
         <span
           className={[
             'ops-telemetry-value ops-numeric ops-tracking-caption leading-none font-semibold uppercase whitespace-nowrap',
+            'ops-display-value',
             isPrimary
               ? 'ops-telemetry-value-primary'
               : 'ops-telemetry-value-secondary',
@@ -232,6 +233,7 @@ function TelemetryHorizon({ children }: { children: ReactNode }) {
           <p className="ops-tracking-grid mt-1 text-[10px] leading-4 text-ops-text-muted uppercase">
             30-day local picture
           </p>
+          <span className="ops-telemetry-register">STA-30D</span>
         </div>
         <div className="ops-telemetry-grid grid grid-cols-2 lg:grid-cols-[1.55fr_repeat(3,minmax(0,1fr))]">
           {children}

From 44c6f9fb75c49917360b8e52cc7c598d9ed1a0e5 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:29:08 -0400
Subject: [PATCH 3/8] Rename class names for display values in TodayPanel

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/checkin/TodayPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/checkin/TodayPanel.tsx b/src/features/checkin/TodayPanel.tsx
index e23cad6..9d1afbd 100644
--- a/src/features/checkin/TodayPanel.tsx
+++ b/src/features/checkin/TodayPanel.tsx
@@ -75,7 +75,7 @@ function DayCompletionRollup({
       ].join(' ')}
     >
       <div className="ops-rollup-count-plate clip-notched ops-notch-chip min-w-[8rem]">
-        <p className="ops-numeric flex items-baseline gap-1.5 text-2xl leading-none font-semibold text-ops-text-primary">
+        <p className="ops-display-value ops-numeric flex items-baseline gap-1.5 text-2xl leading-none font-semibold text-ops-text-primary">
           <span>{markedCount}</span>
           <span className="text-base text-ops-text-muted">/ {totalCount}</span>
         </p>
@@ -202,7 +202,7 @@ export function TodayPanel({
       emphasis="primary"
       meta={
         <div className="ops-today-meta text-ops-text-primary">
-          <div className="ops-tracking-display text-sm leading-5 font-semibold uppercase sm:text-base">
+          <div className="ops-display-value ops-tracking-display text-sm leading-5 font-semibold uppercase sm:text-base">
             {formatLongDate(todayKey)}
           </div>
           <span

From b437fd8766a031a4baa22c5418867f03c5b27772 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:30:08 -0400
Subject: [PATCH 4/8] Change class name for history detail date header

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/HistoryDetailBrief.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/history/HistoryDetailBrief.tsx b/src/features/history/HistoryDetailBrief.tsx
index 02b42ed..f7b170f 100644
--- a/src/features/history/HistoryDetailBrief.tsx
+++ b/src/features/history/HistoryDetailBrief.tsx
@@ -85,7 +85,7 @@ export function HistoryDetailBrief({
           </div>
           <StatusBadge status={selectedStatus} size="lg" />
         </div>
-        <h3 className="ops-history-detail-date ops-numeric ops-tracking-caption text-2xl leading-none font-semibold text-ops-text-primary uppercase">
+        <h3 className="ops-history-detail-date ops-display-value ops-numeric ops-tracking-caption text-2xl leading-none font-semibold text-ops-text-primary uppercase">
           {selectedDateLabel}
         </h3>
       </div>

From 743770a2db5237675864e0c1933158f3e7f60aa9 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:30:35 -0400
Subject: [PATCH 5/8] Update class names for MobileHistoryGrid component

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/MobileHistoryGrid.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/history/MobileHistoryGrid.tsx b/src/features/history/MobileHistoryGrid.tsx
index f3e25b9..0457d80 100644
--- a/src/features/history/MobileHistoryGrid.tsx
+++ b/src/features/history/MobileHistoryGrid.tsx
@@ -143,7 +143,7 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
               </span>
               <h3
                 id={visibleWeekHeadingId}
-                className="mt-1 text-xs text-ops-text-primary"
+                className="ops-display-value mt-1 text-xs text-ops-text-primary"
               >
                 <span className="block">W{visibleWeekIndex + 1}</span>
                 <span className="mt-0.5 block whitespace-nowrap">
@@ -287,7 +287,7 @@ export function MobileHistoryGrid({ model }: MobileHistoryGridProps) {
                         <span className="block text-[9px] leading-none tracking-[0.08em] text-ops-text-muted uppercase">
                           {formatWeekday(dateKey).slice(0, 1)}
                         </span>
-                        <span className="ops-numeric mt-1.5 block text-base leading-none font-semibold">
+                        <span className="ops-display-value ops-numeric mt-1.5 block text-base leading-none font-semibold">
                           {dayNumber}
                         </span>
                       </button>

From 61a57d76338116abc563857abb4bc6f76ec27fe0 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:31:36 -0400
Subject: [PATCH 6/8] Refactor CSS styles for improved design consistency

Updated styles for various components including adjustments to text shadows, gradients, and dimensions.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/styles/index.css | 208 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 195 insertions(+), 13 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index f1f243a..06a897f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -418,7 +418,7 @@ h3,
   line-height: 1.1;
   letter-spacing: 0;
   text-shadow:
-    0 0 28px rgba(110, 231, 183, 0.16),
+    0 0 20px var(--ops-readout-glow),
     0 1px 0 rgba(0, 0, 0, 0.72);
 }
 
@@ -487,6 +487,14 @@ h3,
   font-variant-numeric: var(--ops-numeric);
 }
 
+.ops-display-value {
+  font-family: var(--font-mono);
+  font-variant-numeric: var(--ops-numeric);
+  text-shadow:
+    0 0 18px var(--ops-readout-glow),
+    0 1px 0 rgba(0, 0, 0, 0.72);
+}
+
 .ops-tracking-eyebrow {
   letter-spacing: var(--ops-tracking-eyebrow);
 }
@@ -532,6 +540,7 @@ h3,
 }
 
 .ops-coordinate-strip > span {
+  position: relative;
   min-height: 1.75rem;
   padding: 0.4rem 0.625rem;
   clip-path: polygon(
@@ -544,6 +553,34 @@ h3,
   );
 }
 
+.ops-hero-coordinate-strip {
+  align-items: stretch;
+  gap: 0.25rem;
+}
+
+.ops-coordinate-strip > .ops-hero-callsign-plate {
+  border-color: color-mix(
+    in srgb,
+    var(--color-ops-accent) 34%,
+    var(--color-ops-panel-border-strong)
+  );
+  background:
+    linear-gradient(90deg, var(--ops-rail-baseline-color), transparent 18%) left
+      top / 100% 1px no-repeat,
+    linear-gradient(180deg, rgba(183, 247, 218, 0.14), transparent 58%),
+    rgba(10, 15, 13, 0.82);
+  box-shadow:
+    inset 2px 0 0 var(--ops-rail-baseline-color),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 0 16px rgba(110, 231, 183, 0.06);
+}
+
+.ops-hero-coordinate-strip > span:not(.ops-hero-callsign-plate) {
+  background:
+    linear-gradient(180deg, rgba(110, 231, 183, 0.09), transparent 58%),
+    rgba(10, 15, 13, 0.62);
+}
+
 .ops-coordinate-chip {
   color: var(--color-ops-accent-muted);
   font-variant-numeric: var(--ops-numeric);
@@ -563,12 +600,12 @@ h3,
 .ops-hero-rail {
   position: relative;
   width: 8px;
-  height: clamp(72px, 8vh, 96px);
+  height: clamp(86px, 10vh, 116px);
   background:
     linear-gradient(180deg, rgba(183, 247, 218, 0.92), rgba(110, 231, 183, 0.5))
-      left top / 2px 62% no-repeat,
-    linear-gradient(180deg, rgba(46, 143, 106, 0.64), rgba(46, 143, 106, 0.18))
-      left bottom / 2px 38% no-repeat,
+      left top / 2px 68% no-repeat,
+    linear-gradient(180deg, var(--ops-rail-baseline-color), transparent) left
+      bottom / 2px 32% no-repeat,
     linear-gradient(
         180deg,
         var(--color-ops-border-struct),
@@ -583,23 +620,42 @@ h3,
 .ops-hero-rail::after {
   content: '';
   position: absolute;
-  top: 62%;
+  top: 68%;
   left: 0;
   width: 8px;
   height: 1px;
-  background: var(--color-ops-accent-border);
+  background: var(--ops-frame-calibration);
 }
 
 .ops-hero-rail-tail {
   width: 1px;
   background: linear-gradient(
     180deg,
-    var(--color-ops-border-struct),
-    rgba(46, 143, 106, 0.18)
+    var(--ops-rail-baseline-color),
+    rgba(46, 143, 106, 0.16),
+    transparent
   );
 }
 
+.ops-hero-rail-mobile {
+  display: block;
+  width: clamp(2.75rem, 28vw, 6rem);
+  height: 2px;
+  margin-bottom: 0.75rem;
+  background: linear-gradient(
+    90deg,
+    var(--color-ops-accent-muted),
+    var(--ops-rail-baseline-color),
+    transparent
+  );
+  box-shadow: 0 0 14px rgba(110, 231, 183, 0.1);
+}
+
 @media (min-width: 640px) {
+  .ops-hero-rail-mobile {
+    display: none;
+  }
+
   .app-shell {
     padding-right: max(1.5rem, var(--ops-safe-right));
     padding-left: max(1.5rem, var(--ops-safe-left));
@@ -856,6 +912,24 @@ h3,
   pointer-events: none;
 }
 
+.ops-section-emphasis-primary::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: clamp(1.25rem, 4vw, 4rem);
+  z-index: 2;
+  width: clamp(3rem, 9vw, 8rem);
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ops-frame-calibration-muted),
+    var(--ops-rail-baseline-color)
+  );
+  opacity: 0.74;
+  pointer-events: none;
+}
+
 .ops-section-emphasis-standard {
   --ops-section-frame-background: linear-gradient(
     180deg,
@@ -872,7 +946,11 @@ h3,
 }
 
 .ops-section-emphasis-support {
-  --ops-section-frame-background: var(--color-ops-panel-border-strong);
+  --ops-section-frame-background: color-mix(
+    in srgb,
+    var(--color-ops-panel-border-strong) 72%,
+    transparent
+  );
   --ops-section-surface-background:
     linear-gradient(
       180deg,
@@ -883,6 +961,7 @@ h3,
     var(--color-ops-surface-base);
   --ops-section-surface-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 2px 0 0 var(--color-ops-border-struct),
     inset 0 0 0 1px var(--color-ops-panel-border-strong),
     inset 0 -28px 44px rgba(10, 15, 13, 0.18),
     0 0 0 1px rgba(255, 255, 255, 0.02);
@@ -1376,7 +1455,7 @@ h3,
       90deg,
       transparent 0,
       transparent calc(100% - 1px),
-      rgba(183, 247, 218, 0.08) calc(100% - 1px)
+      rgba(183, 247, 218, 0.14) calc(100% - 1px)
     )
     left top / 5.25rem 100% repeat-x;
   opacity: 0.18;
@@ -1393,6 +1472,44 @@ h3,
     var(--color-ops-surface-overlay);
 }
 
+.ops-telemetry-horizon-label {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+  background:
+    linear-gradient(90deg, var(--ops-rail-baseline-color), transparent 24%) left
+      top / 100% 1px no-repeat,
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
+    rgba(10, 15, 13, 0.18);
+  box-shadow:
+    inset 2px 0 0 var(--ops-rail-baseline-color),
+    inset 0 -1px 0 var(--color-ops-panel-border);
+}
+
+.ops-telemetry-horizon-label::after {
+  content: '';
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0;
+  left: 0.75rem;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ops-frame-calibration-muted),
+    transparent
+  );
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.ops-telemetry-horizon-label .ops-telemetry-register {
+  display: inline-flex;
+  width: fit-content;
+  margin-top: 0.75rem;
+  margin-left: 0;
+}
+
 .ops-surface-fault-card {
   background:
     linear-gradient(
@@ -2076,10 +2193,17 @@ h3,
   transform: translateY(-1px);
 }
 
+.history-scroll-shell thead tr:first-child th {
+  box-shadow:
+    inset 0 -1px 0 var(--ops-rail-baseline-color),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+
 .ops-history-today-header {
   position: relative;
   background: var(--color-ops-surface-1);
   box-shadow:
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 var(--ops-today-rail),
     inset 0 -1px 0 var(--color-ops-panel-border-strong);
@@ -2107,12 +2231,20 @@ h3,
   box-shadow: inset 1px 0 0 var(--ops-rail-baseline-color);
 }
 
+.history-scroll-shell thead tr:first-child th.ops-history-week-boundary {
+  box-shadow:
+    inset 1px 0 0 var(--ops-rail-baseline-color),
+    inset 0 -1px 0 var(--ops-rail-baseline-color),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035);
+}
+
 .ops-history-week-band {
   background: rgba(255, 255, 255, 0.01);
 }
 
 .ops-history-today-header.ops-history-week-boundary {
   box-shadow:
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 1px 0 0 var(--ops-today-rail),
     inset -1px 0 0 var(--ops-today-rail),
     inset 0 -1px 0 var(--color-ops-panel-border-strong);
@@ -2129,7 +2261,7 @@ h3,
     linear-gradient(180deg, var(--ops-history-selection-bg), transparent 62%),
     var(--ops-history-selection-bg-strong);
   box-shadow:
-    inset 0 2px 0 var(--ops-history-selection-border),
+    inset 0 2px 0 var(--ops-rail-baseline-color),
     inset 1px 0 0 var(--ops-history-selection-border),
     inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }
@@ -2186,6 +2318,9 @@ h3,
     linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
     var(--color-ops-surface-base);
   border-color: var(--color-ops-panel-border-strong);
+  text-shadow:
+    0 0 12px rgba(110, 231, 183, 0.12),
+    0 1px 0 rgba(0, 0, 0, 0.72);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.05),
     inset 0 -1px 0 rgba(0, 0, 0, 0.28);
@@ -2968,6 +3103,39 @@ h3,
     inset 0 0 0 1px var(--color-ops-panel-border-strong);
 }
 
+.ops-footer-boundary .ops-subpanel::before,
+.ops-footer-boundary .ops-subpanel::after {
+  content: '';
+  position: absolute;
+  right: 1rem;
+  left: 1rem;
+  pointer-events: none;
+}
+
+.ops-footer-boundary .ops-subpanel::before {
+  top: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ops-frame-calibration-muted),
+    var(--ops-rail-baseline-color)
+  );
+  opacity: 0.76;
+}
+
+.ops-footer-boundary .ops-subpanel::after {
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    var(--ops-rail-baseline-color),
+    var(--color-ops-panel-border),
+    transparent
+  );
+  opacity: 0.64;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -3008,6 +3176,7 @@ h3,
   .ops-alert-inner-info,
   .ops-alert-inner-warning,
   .ops-alert-inner-danger,
+  .ops-coordinate-strip > span,
   .ops-coordinate-chip,
   .ops-status-frame,
   .ops-domain-glyph,
@@ -3059,8 +3228,11 @@ h3,
   .ops-hero-rail,
   .ops-hero-rail::after,
   .ops-hero-rail-tail,
+  .ops-hero-rail-mobile,
   .ops-rule-hairline,
   .ops-section-primary-tick,
+  .ops-section-emphasis-primary::after,
+  .ops-telemetry-horizon-label::after,
   .ops-rollup-pip-cell::before,
   .ops-rollup-pip-indicator,
   .ops-rollup-divider,
@@ -3077,10 +3249,20 @@ h3,
   .ops-history-sector-row-header::before,
   .ops-history-mobile-sector-label::before,
   .ops-history-edge-left,
-  .ops-history-edge-right {
+  .ops-history-edge-right,
+  .ops-footer-boundary .ops-subpanel::before,
+  .ops-footer-boundary .ops-subpanel::after {
     background: CanvasText;
   }
 
+  .ops-display-value,
+  .ops-headline-h1,
+  .ops-telemetry-value,
+  .ops-history-detail-date,
+  .ops-mobile-week-state-chip {
+    text-shadow: none;
+  }
+
   .ops-status-nominal,
   .ops-status-degraded,
   .ops-status-unmarked {

From 8f6bc115663d0d49b59195182cac1a4290d71630 Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:32:44 -0400
Subject: [PATCH 7/8] Update test timeout for historyGrid test

Increased timeout for a test case to 15000ms.

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 tests/unit/historyGrid.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/historyGrid.test.tsx b/tests/unit/historyGrid.test.tsx
index 778e670..da1ad80 100644
--- a/tests/unit/historyGrid.test.tsx
+++ b/tests/unit/historyGrid.test.tsx
@@ -510,7 +510,7 @@ describe('history helpers and grid behavior', () => {
     expect(
       screen.getByText(`Work or School on ${firstDateLabel} is UNMARKED.`),
     ).toBeVisible();
-  });
+  }, 15000);
 
   it('switches between mobile and desktop history render paths when the viewport query changes', async () => {
     const dateKeys = getTrailingDateKeys(30, new Date(2026, 2, 28));

From 383ea7571e8c19c630804bca1d5a5c72fb12372c Mon Sep 17 00:00:00 2001
From: Bradley Saucier <bradley.saucier@snhu.edu>
Date: Tue, 12 May 2026 11:33:50 -0400
Subject: [PATCH 8/8] Add conditions for mobile week scrolling behavior

Signed-off-by: Bradley Saucier <bradley.saucier@snhu.edu>
---
 src/features/history/useHistoryGridModel.ts | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/features/history/useHistoryGridModel.ts b/src/features/history/useHistoryGridModel.ts
index af15d98..4ab2600 100644
--- a/src/features/history/useHistoryGridModel.ts
+++ b/src/features/history/useHistoryGridModel.ts
@@ -346,8 +346,26 @@ export function useHistoryGridModel({
       }
 
       weekRefs.current.set(weekIndex, element);
+
+      if (
+        isDesktopHistory ||
+        !hasEntries ||
+        hasAlignedInitialMobileWeekRef.current ||
+        weekIndex !== initialSelectedWeekIndex
+      ) {
+        return;
+      }
+
+      const scrollNode = mobileScrollRef.current;
+
+      if (!scrollNode) {
+        return;
+      }
+
+      hasAlignedInitialMobileWeekRef.current = true;
+      scrollWeekIntoContainer(scrollNode, element);
     },
-    [],
+    [hasEntries, initialSelectedWeekIndex, isDesktopHistory],
   );
 
   const focusSelectedCell = useCallback((nextSelection: SelectedCell) => {