From e6734e99c3ed64b543364c4393fce779f979e864 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Oct 2026 13:43:59 +0000
Subject: [PATCH 1/3] Open shifts: mark urgent shifts with the shared amber dot

The calendar, its key and the shift rows used a warning triangle, which in
Work mode now means a date has passed. Urgent shifts take the amber dot, the
shared shape for needing attention soon, beside the word or spoken label.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CZwGiwt7eXkD4fwyFM83gY
---
 .../open-shifts/open-shifts-browse-page.tsx   |  5 ++--
 .../open-shifts/open-shifts-calendar.tsx      | 16 ++++++-------
 src/components/open-shifts/open-shifts-ui.tsx | 23 +++++++++++++------
 src/components/open-shifts/urgent-dot.tsx     | 14 +++++++++++
 tests/open-shifts-calendar.dom.test.tsx       |  4 ++++
 5 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 src/components/open-shifts/urgent-dot.tsx

diff --git a/src/components/open-shifts/open-shifts-browse-page.tsx b/src/components/open-shifts/open-shifts-browse-page.tsx
index 38219a61c8..c00c69d5ba 100644
--- a/src/components/open-shifts/open-shifts-browse-page.tsx
+++ b/src/components/open-shifts/open-shifts-browse-page.tsx
@@ -20,6 +20,7 @@ import { rosterCoveredUntil } from "@/lib/open-shifts/roster-check";
 import { perthDateOf, perthTimeOf } from "@/lib/roster/shifts/perth-time";
 
 import { OpenShiftsCalendar } from "./open-shifts-calendar";
+import { UrgentDot } from "./urgent-dot";
 import { OpenShiftsFitsYou, OpenShiftsRequestsStrip, fitsYou } from "./open-shifts-for-you";
 import { clearSavedFilters, readSavedFilters, saveFilters } from "./open-shifts-saved-filters";
 import { useSignedOut } from "@/components/mode-kit/use-signed-out-sample";
@@ -315,9 +316,9 @@ export function OpenShiftsBrowsePage() {
                 <li className="inline-flex items-center gap-1.5">
                   <span
                     aria-hidden="true"
-                    className="inline-flex h-[0.9375rem] min-w-[1.375rem] items-center justify-center rounded-full border border-[color:var(--warning-border)] text-[color:var(--warning-text)]"
+                    className="inline-flex h-[0.9375rem] min-w-[1.375rem] items-center justify-center rounded-full bg-[color:var(--mode-identity-soft)]"
                   >
-                    <TriangleAlert aria-hidden="true" strokeWidth={2.2} className="size-2.5" />
+                    <UrgentDot />
                   </span>
                   Includes an urgent shift
                 </li>
diff --git a/src/components/open-shifts/open-shifts-calendar.tsx b/src/components/open-shifts/open-shifts-calendar.tsx
index fa80baf1e3..83d59a969b 100644
--- a/src/components/open-shifts/open-shifts-calendar.tsx
+++ b/src/components/open-shifts/open-shifts-calendar.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import { ChevronLeft, ChevronRight, TriangleAlert } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useState } from "react";
 
+import { UrgentDot } from "./urgent-dot";
 import { cn } from "@/components/ui-primitives";
 import { addDaysToDate } from "@/lib/roster/shifts/perth-time";
 
 /**
  * The month on Browse. Each date in the 14-day window carries the number of
  * shifts that match the filters (the same rows as the list below it); a date
- * with an urgent one carries a small warning mark, and a ring on the date
+ * with an urgent one carries a small amber dot, and a ring on the date
  * means the reader is rostered that day. Past dates and dates outside the
  * window carry no number.
  *
  * Drawn like the Roster month (mockup `.rost-mc rost-oc`, work-mode redesign
- * 6 Oct 2026): a filled tile for the chosen day, a count pill per day (amber,
- * with the warning mark, when it includes an urgent shift) and a ring on the
+ * 6 Oct 2026): a filled tile for the chosen day, a count pill per day (with an
+ * amber dot, the shared "needs attention" shape, when it includes an urgent shift) and a ring on the
  * date when you're rostered. The meanings never rest on colour alone: the
  * mark, the number and each day's spoken label carry them too.
  */
@@ -173,13 +174,10 @@ export function OpenShiftsCalendar({
                       <span
                         aria-hidden="true"
                         className={cn(
-                          "nums inline-flex h-[0.9375rem] min-w-[1.375rem] items-center justify-center gap-0.5 rounded-full px-1 text-3xs font-extrabold leading-none",
-                          urgent
-                            ? "border border-[color:var(--warning-border)] text-[color:var(--warning-text)]"
-                            : "bg-[color:var(--mode-identity-soft)] text-[color:var(--mode-identity)]",
+                          "nums inline-flex h-[0.9375rem] min-w-[1.375rem] items-center justify-center gap-0.5 rounded-full bg-[color:var(--mode-identity-soft)] px-1 text-3xs font-extrabold leading-none text-[color:var(--mode-identity)]",
                         )}
                       >
-                        {urgent ? <TriangleAlert aria-hidden="true" strokeWidth={2.2} className="size-2.5" /> : null}
+                        {urgent ? <UrgentDot /> : null}
                         {count ? count : null}
                       </span>
                     ) : (
diff --git a/src/components/open-shifts/open-shifts-ui.tsx b/src/components/open-shifts/open-shifts-ui.tsx
index ccaa004660..7bccfb3cbb 100644
--- a/src/components/open-shifts/open-shifts-ui.tsx
+++ b/src/components/open-shifts/open-shifts-ui.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ChevronRight, CircleHelp, CircleX, Info, TriangleAlert } from "lucide-react";
+
 import Link from "next/link";
 import type { ReactNode } from "react";
 
@@ -17,6 +18,8 @@ import {
 import type { RosterCheck } from "@/lib/open-shifts/roster-check";
 import { MONTHS, WEEKDAYS, perthDateOf, perthTimeOf } from "@/lib/roster/shifts/perth-time";
 import { zonedDateOf } from "@/lib/work-time/format";
+
+import { UrgentDot } from "./urgent-dot";
 import { currentWorkTimeZone } from "@/lib/work-time/current-zone";
 import { WorkPageBack } from "@/components/work-frame/work-page-back";
 
@@ -181,12 +184,7 @@ export function ShiftRow({
   status?: ReactNode;
 }) {
   const hours = hoursBetween(listing.startsAt, listing.endsAt);
-  const meta = [
-    endsNextDay(listing.startsAt, listing.endsAt) ? "Ends next day" : null,
-    listing.urgent ? "Urgent" : null,
-  ]
-    .filter(Boolean)
-    .join(" · ");
+  const meta = endsNextDay(listing.startsAt, listing.endsAt) ? "Ends next day" : null;
   return (
     <li className={modeInsetHairline}>
       <Link
@@ -205,7 +203,18 @@ export function ShiftRow({
             {shiftTitle(listing)}
           </span>
           <span className="text-2xs text-[color:var(--text-muted)]">{shiftPlace(listing)}</span>
-          {meta ? <span className="text-2xs text-[color:var(--text-muted)]">{meta}</span> : null}
+          {meta || listing.urgent ? (
+            <span className="inline-flex items-center gap-1 text-2xs text-[color:var(--text-muted)]">
+              {listing.urgent ? (
+                <>
+                  <UrgentDot />
+                  Urgent
+                </>
+              ) : null}
+              {meta && listing.urgent ? " · " : null}
+              {meta}
+            </span>
+          ) : null}
           {status ?? (check ? <span className="mt-1.5">{<CheckLine check={check} />}</span> : null)}
         </span>
         <ChevronRight
diff --git a/src/components/open-shifts/urgent-dot.tsx b/src/components/open-shifts/urgent-dot.tsx
new file mode 100644
index 0000000000..11c1d8cbe0
--- /dev/null
+++ b/src/components/open-shifts/urgent-dot.tsx
@@ -0,0 +1,14 @@
+/**
+ * The urgent marker on Open shifts: the shared amber dot, the Work mode shape for "needs attention
+ * soon" (Ward Flow review, 12 Oct 2026). A red triangle means a date has passed, which an urgent shift
+ * has not. Always beside a word or a spoken label, so the meaning never rests on the colour.
+ */
+export function UrgentDot() {
+  return (
+    <i
+      aria-hidden="true"
+      data-mark="dot"
+      className="inline-block size-1.5 shrink-0 rounded-full bg-[color:var(--warning)] forced-colors:bg-[CanvasText]"
+    />
+  );
+}
diff --git a/tests/open-shifts-calendar.dom.test.tsx b/tests/open-shifts-calendar.dom.test.tsx
index 3ae1629e02..712de3f4bc 100644
--- a/tests/open-shifts-calendar.dom.test.tsx
+++ b/tests/open-shifts-calendar.dom.test.tsx
@@ -35,6 +35,10 @@ describe("Open shifts Browse calendar", () => {
         name: "Friday 9 October, 3 shifts match, includes an urgent shift",
       }),
     ).toBeTruthy();
+    // The urgent day carries the shared amber dot, never the overdue triangle.
+    const urgentDay = screen.getByRole("button", { name: /^Friday 9 October/ });
+    expect(urgentDay.querySelector('[data-mark="dot"]')).not.toBeNull();
+    expect(urgentDay.querySelector("svg.lucide-triangle-alert")).toBeNull();
     expect(screen.getByRole("button", { name: "Monday 12 October, you're rostered" })).toBeTruthy();
     // A past rostered day is not called rostered.
     expect(screen.getByRole("button", { name: "Thursday 1 October" })).toBeTruthy();

From 3cf35f191b8f182114b11fa785d419854ce96e0a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Oct 2026 14:26:52 +0000
Subject: [PATCH 2/3] Open shifts: the urgent dot carries the text it sits
 beside

The design check counts a bare status-coloured dot as colour-only. Every use
already sits beside words or a spoken label; the dot now renders that text
itself so the pairing is visible in one place.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CZwGiwt7eXkD4fwyFM83gY
---
 .../open-shifts/open-shifts-calendar.tsx      |  3 +--
 src/components/open-shifts/open-shifts-ui.tsx |  7 +------
 src/components/open-shifts/urgent-dot.tsx     | 20 ++++++++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/open-shifts/open-shifts-calendar.tsx b/src/components/open-shifts/open-shifts-calendar.tsx
index 83d59a969b..96312cc08f 100644
--- a/src/components/open-shifts/open-shifts-calendar.tsx
+++ b/src/components/open-shifts/open-shifts-calendar.tsx
@@ -177,8 +177,7 @@ export function OpenShiftsCalendar({
                           "nums inline-flex h-[0.9375rem] min-w-[1.375rem] items-center justify-center gap-0.5 rounded-full bg-[color:var(--mode-identity-soft)] px-1 text-3xs font-extrabold leading-none text-[color:var(--mode-identity)]",
                         )}
                       >
-                        {urgent ? <UrgentDot /> : null}
-                        {count ? count : null}
+                        {urgent ? <UrgentDot>{count || null}</UrgentDot> : count || null}
                       </span>
                     ) : (
                       <i aria-hidden="true" className="block h-[0.9375rem]" />
diff --git a/src/components/open-shifts/open-shifts-ui.tsx b/src/components/open-shifts/open-shifts-ui.tsx
index 7bccfb3cbb..aa8f1346cc 100644
--- a/src/components/open-shifts/open-shifts-ui.tsx
+++ b/src/components/open-shifts/open-shifts-ui.tsx
@@ -205,12 +205,7 @@ export function ShiftRow({
           <span className="text-2xs text-[color:var(--text-muted)]">{shiftPlace(listing)}</span>
           {meta || listing.urgent ? (
             <span className="inline-flex items-center gap-1 text-2xs text-[color:var(--text-muted)]">
-              {listing.urgent ? (
-                <>
-                  <UrgentDot />
-                  Urgent
-                </>
-              ) : null}
+              {listing.urgent ? <UrgentDot>Urgent</UrgentDot> : null}
               {meta && listing.urgent ? " · " : null}
               {meta}
             </span>
diff --git a/src/components/open-shifts/urgent-dot.tsx b/src/components/open-shifts/urgent-dot.tsx
index 11c1d8cbe0..2b8826fdd1 100644
--- a/src/components/open-shifts/urgent-dot.tsx
+++ b/src/components/open-shifts/urgent-dot.tsx
@@ -1,14 +1,20 @@
+import type { ReactNode } from "react";
+
 /**
  * The urgent marker on Open shifts: the shared amber dot, the Work mode shape for "needs attention
  * soon" (Ward Flow review, 12 Oct 2026). A red triangle means a date has passed, which an urgent shift
- * has not. Always beside a word or a spoken label, so the meaning never rests on the colour.
+ * has not. The dot leads the text it sits beside (the word "Urgent", or the day's count), and every
+ * place without visible text carries a spoken label, so the meaning never rests on the colour.
  */
-export function UrgentDot() {
+export function UrgentDot({ children }: { children?: ReactNode }) {
   return (
-    <i
-      aria-hidden="true"
-      data-mark="dot"
-      className="inline-block size-1.5 shrink-0 rounded-full bg-[color:var(--warning)] forced-colors:bg-[CanvasText]"
-    />
+    <>
+      <i
+        aria-hidden="true"
+        data-mark="dot"
+        className="inline-block size-1.5 shrink-0 rounded-full bg-[color:var(--warning)] forced-colors:bg-[CanvasText]"
+      />
+      {children}
+    </>
   );
 }

From 8ec2c65c323c0d556cea335571aa255e5aed1d10 Mon Sep 17 00:00:00 2001
From: "qodo-code-review[bot]"
 <151058649+qodo-code-review[bot]@users.noreply.github.com>
Date: Mon, 12 Oct 2026 17:09:58 +0000
Subject: [PATCH 3/3] fix: Cover urgent markers across browse renderings

---
 tests/open-shifts-browse-sample.dom.test.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/tests/open-shifts-browse-sample.dom.test.tsx b/tests/open-shifts-browse-sample.dom.test.tsx
index 2ea4d56c56..8bcc458a97 100644
--- a/tests/open-shifts-browse-sample.dom.test.tsx
+++ b/tests/open-shifts-browse-sample.dom.test.tsx
@@ -69,6 +69,19 @@ describe("Open shifts, signed-out preview", () => {
     ).toBeTruthy();
   });
 
+  it("marks urgent rows and the calendar key with the shared dot", () => {
+    render(<OpenShiftsBrowsePage />);
+
+    const legend = screen.getByRole("list", { name: "Calendar key" });
+    expect(legend.querySelector('[data-mark="dot"]')).not.toBeNull();
+    expect(legend.querySelector("svg.lucide-triangle-alert")).toBeNull();
+
+    const urgentRow = screen.getAllByRole("listitem").find((row) => row.textContent?.includes("Urgent"));
+    expect(urgentRow).toBeDefined();
+    expect(urgentRow?.querySelector('[data-mark="dot"]')).not.toBeNull();
+    expect(urgentRow?.querySelector("svg.lucide-triangle-alert")).toBeNull();
+  });
+
   it("marks the days the example roster has the doctor working", () => {
     render(<OpenShiftsBrowsePage />);
     // Mon 5 Oct: on call tonight, off Tuesday, day shifts Wednesday to Friday.