feat(dashboard): dismissible system notice banner for every signed-in user (#2464)

* feat(dashboard): dismissible system notice banner for every signed-in user

Operator-set banner ("high load right now, some pages may respond slowly
or fail") rendered under the dashboard chrome for every signed-in user
while NEXT_PUBLIC_SYSTEM_NOTICE_UNTIL (ISO timestamp with offset) is in
the future. Closing it stores the deadline in localStorage, so each
browser sees it once; the banner hides itself at the deadline in open
tabs and is not rendered at all after it.

Why the problem occurred: there was no way to tell every user something
about the system itself. The existing banners are all per-company state
(sandbox, seat grace), so an operator notice had no home.

What was removed or simplified instead: no notices table, no migration,
no admin UI. One public env var carries both the on/off switch and the
expiry, and the same value is the dismiss key, so a later notice re-shows
once without any code change. No DB read, which matters because the
first use is a DB restart window.

Why this over the proposed shape: the request was a banner "until 23:00
tonight". Hardcoding that in code would need a second PR to switch off
or reuse; a DB-backed notice would read the database that is about to
go down. The env var expires on its own, and unset means gone.

Fixes #2463

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fs9PfHL7KpdidvUdxVkHXF

* fix(dashboard): system notice survives long deadlines, blocked storage, and every layout shell

Skeptic findings on 839a255f3:
- setTimeout clamps delays above 2^31-1 ms to ~1 ms, so a deadline more
  than 24.8 days out hid the banner instantly. Wait in bounded steps and
  re-check the clock.
- window.localStorage is a throwing property access when a browser blocks
  site data; read it behind a try so the dashboard never crashes over a
  notice.
- The close button was a hand-rolled 22px icon button; design.md requires
  the shadcn icon Button (40px target).
- The byrå-consultant shell and the stale-cookie shell rendered no banner,
  so "every signed-in user" was not true. The banner is now computed once,
  before the shell branches, and mounted in all three.

Refs #2463

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fs9PfHL7KpdidvUdxVkHXF

* fix(dashboard): system notice deadline requires a UTC offset

A date-time without Z or a numeric offset parses as local time, which is
UTC on Vercel and the operator's zone locally, so the same value would
mean different instants. Reject it instead (CodeRabbit on #2464).

Declined: scoping the dismissal key by user id. The notice is about the
system, not the account; per-browser dismissal is the sandbox banner's
semantics and keeps identity out of layout chrome.

Refs #2463

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fs9PfHL7KpdidvUdxVkHXF

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

.env.example

@@ -50,6 +50,11 @@ GOOGLE_MAIL_CONNECT_COMPANY_IDS=
 # NEXT_PUBLIC_SESSION_TIMEOUT_FORCE_ALL=false
 # SESSION_TIMEOUT_SECRET=
 
+# One-off system notice ("high load right now") shown once per browser to
+# every signed-in user until this ISO timestamp (include the UTC offset).
+# Unset or past: no banner. A new timestamp shows the banner once again.
+# NEXT_PUBLIC_SYSTEM_NOTICE_UNTIL=2026-09-10T23:00:00+02:00
+
 # Self-hosted only: set to true when public signup is turned off in your
 # GoTrue/Supabase auth config (GOTRUE_DISABLE_SIGNUP / "Allow new users to
 # sign up" off). GoTrue offers no clean server-side read of that setting, so

app/(dashboard)/layout.tsx

@@ -11,6 +11,8 @@ import LazyCommandPalette from '@/components/common/LazyCommandPalette'
 import { SettingsHotkey } from '@/components/settings/SettingsHotkey'
 import { SessionTimeoutController } from '@/components/auth/SessionTimeoutController'
 import { SandboxBanner } from '@/components/dashboard/SandboxBanner'
+import { SystemNoticeBanner } from '@/components/dashboard/SystemNoticeBanner'
+import { parseSystemNoticeUntil } from '@/components/dashboard/system-notice'
 import TrialExpiredDialog from '@/components/billing/TrialExpiredDialog'
 import MultiUserGraceBanner from '@/components/billing/MultiUserGraceBanner'
 import { resolveDormantCompanyIds } from '@/lib/company/active-company'
@@ -124,6 +126,14 @@ export default async function DashboardLayout({
     pathname.startsWith(p)
   )
 
+  // Operator-set system notice (NEXT_PUBLIC_SYSTEM_NOTICE_UNTIL): null when
+  // unset or expired, so the banner is not even rendered outside its window.
+  // Computed before the shell branches below so every signed-in user sees it,
+  // byrå consultants and stale-cookie sessions included.
+  const systemNoticeUntil = parseSystemNoticeUntil(process.env.NEXT_PUBLIC_SYSTEM_NOTICE_UNTIL)
+  const systemNoticeBanner =
+    systemNoticeUntil !== null ? <SystemNoticeBanner until={systemNoticeUntil} /> : null
+
   // Team now carries `kind` directly (types/index.ts, WL-08).
   const membershipRows = teamMemberships
   const byraMembership = membershipRows.find((m) => m.teams?.kind === 'byra') ?? null
@@ -214,6 +224,7 @@ export default async function DashboardLayout({
         <AgentSheetProvider>
           <CompanyTabSync />
           <div className="min-h-dvh bg-frame md:flex md:flex-col">
+            {systemNoticeBanner}
             <DashboardNav
               companyName={getBranding().appName.toLowerCase()}
               entityType="enskild_firma"
@@ -372,6 +383,7 @@ export default async function DashboardLayout({
         <AgentSheetProvider>
           <CompanyTabSync />
           <div className="min-h-dvh bg-frame md:flex md:flex-col">
+            {systemNoticeBanner}
             <DashboardNav
               companyName={getBranding().appName.toLowerCase()}
               entityType="enskild_firma"
@@ -584,6 +596,7 @@ export default async function DashboardLayout({
             Hoppa till innehåll
           </a>
           {isSandbox && <SandboxBanner />}
+          {systemNoticeBanner}
           {graceBanner && (
             <MultiUserGraceBanner
               graceEndsAt={graceBanner.graceEndsAt}

components/dashboard/SystemNoticeBanner.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { X } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import {
+  dismissSystemNotice,
+  isSystemNoticeDismissed,
+} from '@/components/dashboard/system-notice'
+
+/**
+ * setTimeout clamps anything above 2^31-1 ms to ~1 ms, so a deadline more
+ * than 24.8 days out would hide the banner instantly. Wait in bounded steps
+ * and re-check the clock at each step instead.
+ */
+const MAX_TIMER_MS = 2_147_483_647
+
+/**
+ * localStorage is a throwing property access when a browser blocks site
+ * data, not just a null; read it behind a try so the dashboard never
+ * crashes over a notice.
+ */
+function safeStorage(): Storage | null {
+  try {
+    return window.localStorage
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Operator-set system notice, shown once per browser until the deadline.
+ * Same chrome treatment as SandboxBanner: environment notice on secondary,
+ * never a warning fill (status colors are data, not chrome).
+ *
+ * Visibility is computed in an effect so server and client markup agree at
+ * hydration, and a timer hides the banner at the deadline in tabs that stay
+ * open past it.
+ */
+export function SystemNoticeBanner({ until }: { until: number }) {
+  const t = useTranslations('system_notice')
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const tick = () => {
+      if (isSystemNoticeDismissed(safeStorage(), until)) {
+        setVisible(false)
+        return
+      }
+      const msLeft = until - Date.now()
+      if (msLeft <= 0) {
+        setVisible(false)
+        return
+      }
+      setVisible(true)
+      timer = setTimeout(tick, Math.min(msLeft, MAX_TIMER_MS))
+    }
+    tick()
+    return () => {
+      if (timer !== undefined) clearTimeout(timer)
+    }
+  }, [until])
+
+  if (!visible) return null
+
+  function handleDismiss() {
+    dismissSystemNotice(safeStorage(), until)
+    setVisible(false)
+  }
+
+  return (
+    <div
+      role="status"
+      className="relative z-50 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-b border-border bg-secondary py-2 pl-4 pr-12 text-sm text-secondary-foreground"
+    >
+      <span className="text-center text-xs font-medium sm:text-sm">{t('high_load')}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        onClick={handleDismiss}
+        className="absolute right-1 top-1/2 -translate-y-1/2"
+        aria-label={t('dismiss')}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}

components/dashboard/__tests__/system-notice.test.ts

@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest'
+import {
+  SYSTEM_NOTICE_STORAGE_KEY,
+  dismissSystemNotice,
+  isSystemNoticeDismissed,
+  parseSystemNoticeUntil,
+} from '../system-notice'
+
+const NOW = Date.parse('2026-09-10T12:00:00+02:00')
+
+function memoryStorage(initial: Record<string, string> = {}) {
+  const map = new Map(Object.entries(initial))
+  return {
+    getItem: (k: string) => map.get(k) ?? null,
+    setItem: (k: string, v: string) => {
+      map.set(k, v)
+    },
+    map,
+  }
+}
+
+describe('parseSystemNoticeUntil', () => {
+  it('returns the deadline while it is in the future', () => {
+    expect(parseSystemNoticeUntil('2026-09-10T23:00:00+02:00', NOW)).toBe(
+      Date.parse('2026-09-10T23:00:00+02:00'),
+    )
+    expect(parseSystemNoticeUntil('  2026-09-10T23:00:00+02:00  ', NOW)).not.toBeNull()
+  })
+
+  it('returns null once the deadline has passed, or at the exact instant', () => {
+    expect(parseSystemNoticeUntil('2026-09-10T11:00:00+02:00', NOW)).toBeNull()
+    expect(parseSystemNoticeUntil('2026-09-10T12:00:00+02:00', NOW)).toBeNull()
+  })
+
+  it('accepts Z and compact offsets, rejects a date-time without any offset', () => {
+    expect(parseSystemNoticeUntil('2026-09-10T21:00:00Z', NOW)).toBe(
+      Date.parse('2026-09-10T23:00:00+02:00'),
+    )
+    expect(parseSystemNoticeUntil('2026-09-10T23:00:00+0200', NOW)).toBe(
+      Date.parse('2026-09-10T23:00:00+02:00'),
+    )
+    // Local-time parse would differ between Vercel (UTC) and a laptop.
+    expect(parseSystemNoticeUntil('2026-09-10T23:00:00', NOW)).toBeNull()
+    expect(parseSystemNoticeUntil('2026-09-10', NOW)).toBeNull()
+  })
+
+  it('returns null for unset, blank, or unparseable values', () => {
+    expect(parseSystemNoticeUntil(undefined, NOW)).toBeNull()
+    expect(parseSystemNoticeUntil(null, NOW)).toBeNull()
+    expect(parseSystemNoticeUntil('', NOW)).toBeNull()
+    expect(parseSystemNoticeUntil('   ', NOW)).toBeNull()
+    expect(parseSystemNoticeUntil('tonight', NOW)).toBeNull()
+  })
+})
+
+describe('dismissal', () => {
+  const until = Date.parse('2026-09-10T23:00:00+02:00')
+
+  it('is not dismissed until the user closes it, then stays closed for that deadline', () => {
+    const storage = memoryStorage()
+    expect(isSystemNoticeDismissed(storage, until)).toBe(false)
+    dismissSystemNotice(storage, until)
+    expect(storage.map.get(SYSTEM_NOTICE_STORAGE_KEY)).toBe(String(until))
+    expect(isSystemNoticeDismissed(storage, until)).toBe(true)
+  })
+
+  it('shows a later notice again: the dismissal is keyed by deadline', () => {
+    const storage = memoryStorage({ [SYSTEM_NOTICE_STORAGE_KEY]: String(until) })
+    expect(isSystemNoticeDismissed(storage, until + 86_400_000)).toBe(false)
+  })
+
+  it('treats missing or throwing storage as not dismissed', () => {
+    expect(isSystemNoticeDismissed(null, until)).toBe(false)
+    const throwing = {
+      getItem: () => {
+        throw new Error('blocked')
+      },
+      setItem: () => {
+        throw new Error('blocked')
+      },
+    }
+    expect(isSystemNoticeDismissed(throwing, until)).toBe(false)
+    expect(() => dismissSystemNotice(throwing, until)).not.toThrow()
+  })
+})

components/dashboard/system-notice.ts

@@ -0,0 +1,58 @@
+/**
+ * System notice window: a one-off, operator-set banner ("high load right
+ * now") shown to every signed-in user until a fixed point in time.
+ *
+ * The switch is NEXT_PUBLIC_SYSTEM_NOTICE_UNTIL, an ISO timestamp with an
+ * explicit offset (e.g. 2026-09-10T23:00:00+02:00). The value doubles as the
+ * dismiss key: closing the banner stores the timestamp in localStorage, so a
+ * later notice with a new timestamp shows once again while the old dismissal
+ * stays inert. No DB read: the notice must survive the DB being unavailable.
+ */
+
+export const SYSTEM_NOTICE_STORAGE_KEY = 'Accounted:system-notice-dismissed'
+
+/**
+ * A date-time without Z or a numeric offset is parsed as the runtime's local
+ * time, which is UTC on Vercel and whatever the operator's laptop is locally.
+ * Require the offset so the deadline means the same instant everywhere.
+ */
+const HAS_UTC_OFFSET = /(?:Z|[+-]\d{2}:?\d{2})$/i
+
+/**
+ * Parse the raw env value into an epoch ms deadline. Returns null when the
+ * value is missing, has no UTC offset, is unparseable, or is already in the
+ * past, so callers render nothing without a second check.
+ */
+export function parseSystemNoticeUntil(
+  raw: string | undefined | null,
+  now: number = Date.now(),
+): number | null {
+  const trimmed = raw?.trim()
+  if (!trimmed) return null
+  if (!HAS_UTC_OFFSET.test(trimmed)) return null
+  const until = new Date(trimmed).getTime()
+  if (!Number.isFinite(until)) return null
+  return until > now ? until : null
+}
+
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>
+
+export function isSystemNoticeDismissed(
+  storage: StorageLike | null | undefined,
+  until: number,
+): boolean {
+  try {
+    return storage?.getItem(SYSTEM_NOTICE_STORAGE_KEY) === String(until)
+  } catch {
+    return false
+  }
+}
+
+export function dismissSystemNotice(storage: StorageLike | null | undefined, until: number): void {
+  try {
+    storage?.setItem(SYSTEM_NOTICE_STORAGE_KEY, String(until))
+  } catch {
+    // Private mode or blocked storage: the banner closes for this page
+    // load and may show again next time, which is the acceptable fallback.
+  }
+}

messages/en.json

@@ -6101,6 +6101,10 @@
     "banner_affected": "Your access to {companyName} will be paused in {days, plural, =1 {1 day} other {# days}} unless the company upgrades.",
     "banner_cta": "Upgrade"
   },
+  "system_notice": {
+    "high_load": "The system is under high load right now. Some pages may respond slowly or fail temporarily. We are on it.",
+    "dismiss": "Close"
+  },
   "paused": {
     "title": "Your account is paused",
     "body_single": "Your account is paused in {companyName}. Only one person can work in the company without a paid plan.",

messages/sv.json

@@ -6101,6 +6101,10 @@
     "banner_affected": "Din åtkomst till {companyName} pausas om {days, plural, =1 {1 dag} other {# dagar}} om företaget inte uppgraderar.",
     "banner_cta": "Uppgradera"
   },
+  "system_notice": {
+    "high_load": "Just nu är det hög belastning i systemet. Vissa sidor kan svara långsamt eller tillfälligt ge fel. Vi jobbar på det.",
+    "dismiss": "Stäng"
+  },
   "paused": {
     "title": "Ditt konto är pausat",
     "body_single": "Ditt konto är pausat i {companyName}. Endast en person kan arbeta i företaget utan betald plan.",