import { describe, it, expect } from 'vitest';
import { z } from 'zod';

// Mirror the schema in routes/appointments.ts so the test fails when it drifts.
const appointmentQuerySchema = z.object({
  startDate: z.string().date().optional(),
  endDate: z.string().date().optional(),
  limit: z.coerce.number().min(1).max(2000).optional().default(500),
  offset: z.coerce.number().min(0).optional().default(0),
  doctorId: z.string().uuid().optional(),
});

describe('appointmentQuerySchema (mirror)', () => {
  it('defaults limit to 500 when omitted', () => {
    const parsed = appointmentQuerySchema.parse({});
    expect(parsed.limit).toBe(500);
  });

  it('accepts limit up to 2000', () => {
    const parsed = appointmentQuerySchema.parse({ limit: 2000 });
    expect(parsed.limit).toBe(2000);
  });

  it('rejects limit above 2000', () => {
    expect(() => appointmentQuerySchema.parse({ limit: 2001 })).toThrow();
  });
});

// Query schema for filtering appointments
const appointmentQuerySchema = z.object({
  startDate: z.string().date().optional(),
  endDate: z.string().date().optional(),
  limit: z.coerce.number().min(1).max(100).optional().default(50),
  offset: z.coerce.number().min(0).optional().default(0),
  doctorId: z.string().uuid().optional(),
});

// Query schema for filtering appointments.
// Cap raised from 100 → 2000 so Week/Month calendar views (which fetch up to ~75 days
// at a time) stop dropping the visible window when a clinic does >50 appts/day.
// Default raised 50 → 500 so unmodified callers (older mobile builds) get a sane window.
const appointmentQuerySchema = z.object({
  startDate: z.string().date().optional(),
  endDate: z.string().date().optional(),
  limit: z.coerce.number().min(1).max(2000).optional().default(500),
  offset: z.coerce.number().min(0).optional().default(0),
  doctorId: z.string().uuid().optional(),
});

git add server/src/routes/appointments.ts server/src/routes/__tests__/appointments-limit.test.ts
git commit -m "fix(appointments): raise query cap 100→2000, default 50→500"

import { describe, it, expect } from 'vitest';
import { addDaysToDateStr, midpointDateStr, isValidDateStr } from './date-range';

describe('date-range helpers', () => {
  it('addDaysToDateStr adds days across month boundary', () => {
    expect(addDaysToDateStr('2026-05-30', 3)).toBe('2026-06-02');
  });
  it('addDaysToDateStr supports negative offsets', () => {
    expect(addDaysToDateStr('2026-05-01', -1)).toBe('2026-04-30');
  });
  it('midpointDateStr returns the integer midpoint', () => {
    expect(midpointDateStr('2026-05-01', '2026-05-11')).toBe('2026-05-06');
  });
  it('midpointDateStr returns null when start >= end', () => {
    expect(midpointDateStr('2026-05-10', '2026-05-10')).toBeNull();
    expect(midpointDateStr('2026-05-10', '2026-05-09')).toBeNull();
  });
  it('isValidDateStr rejects malformed input', () => {
    expect(isValidDateStr('2026-05-21')).toBe(true);
    expect(isValidDateStr('2026-13-01')).toBe(false);
    expect(isValidDateStr('not-a-date')).toBe(false);
  });
});

// Pure YYYY-MM-DD string arithmetic, no timezone footguns from Date objects.
// All calendar range math runs through this module so envelopes stay stable
// regardless of the user's local TZ.

const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}$/;

export function isValidDateStr(s: string): boolean {
  if (!ISO_DATE_RE.test(s)) return false;
  const [y, m, d] = s.split('-').map(Number);
  if (m < 1 || m > 12 || d < 1 || d > 31) return false;
  const dt = new Date(Date.UTC(y, m - 1, d));
  return dt.getUTCFullYear() === y && dt.getUTCMonth() === m - 1 && dt.getUTCDate() === d;
}

export function addDaysToDateStr(s: string, days: number): string {
  const [y, m, d] = s.split('-').map(Number);
  const dt = new Date(Date.UTC(y, m - 1, d));
  dt.setUTCDate(dt.getUTCDate() + days);
  const yy = dt.getUTCFullYear().toString().padStart(4, '0');
  const mm = (dt.getUTCMonth() + 1).toString().padStart(2, '0');
  const dd = dt.getUTCDate().toString().padStart(2, '0');
  return `${yy}-${mm}-${dd}`;
}

export function daysBetween(start: string, end: string): number {
  const [y1, m1, d1] = start.split('-').map(Number);
  const [y2, m2, d2] = end.split('-').map(Number);
  const a = Date.UTC(y1, m1 - 1, d1);
  const b = Date.UTC(y2, m2 - 1, d2);
  return Math.round((b - a) / 86400000);
}

export function midpointDateStr(start: string, end: string): string | null {
  const span = daysBetween(start, end);
  if (span <= 0) return null;
  return addDaysToDateStr(start, Math.floor(span / 2));
}

/** YYYY-MM-DD for any Date in local TZ. */
export function localDateStr(date: Date): string {
  const yy = date.getFullYear().toString().padStart(4, '0');
  const mm = (date.getMonth() + 1).toString().padStart(2, '0');
  const dd = date.getDate().toString().padStart(2, '0');
  return `${yy}-${mm}-${dd}`;
}

git add ui/src/lib/date-range.ts ui/src/lib/date-range.test.ts
git commit -m "feat(ui): add date-range string helpers for TZ-safe envelope math"

import { describe, it, expect, vi, beforeEach } from 'vitest';

const fetchWithAuthMock = vi.fn();
vi.mock('./serverComm', async (importOriginal) => {
  const actual: any = await importOriginal();
  return {
    ...actual,
    // Override only the internal fetch helper — keep getAppointments real.
    fetchWithAuth: fetchWithAuthMock,
  };
});

import { getAppointments } from './serverComm';

function makeRow(id: string, date: string) {
  return { id, appointmentDate: date, appointmentTime: '09:00' };
}

beforeEach(() => {
  fetchWithAuthMock.mockReset();
});

describe('getAppointments', () => {
  it('passes limit=2000 in the URL', async () => {
    fetchWithAuthMock.mockResolvedValue({
      ok: true,
      json: async () => ({ data: [makeRow('a', '2026-05-21')] }),
    });
    await getAppointments('2026-05-20', '2026-05-22');
    const url = fetchWithAuthMock.mock.calls[0][0] as string;
    expect(url).toContain('startDate=2026-05-20');
    expect(url).toContain('endDate=2026-05-22');
    expect(url).toContain('limit=2000');
  });

  it('returns the data array on a normal call', async () => {
    fetchWithAuthMock.mockResolvedValue({
      ok: true,
      json: async () => ({ data: [makeRow('a', '2026-05-21')] }),
    });
    const result = await getAppointments('2026-05-20', '2026-05-22');
    expect(result.map((r: any) => r.id)).toEqual(['a']);
  });

  it('splits the range and dedupes when API returns exactly 2000 rows', async () => {
    const fullPage = Array.from({ length: 2000 }, (_, i) => makeRow(`e${i}`, '2026-05-21'));
    fetchWithAuthMock
      .mockResolvedValueOnce({ ok: true, json: async () => ({ data: fullPage }) })
      .mockResolvedValueOnce({ ok: true, json: async () => ({ data: [makeRow('e0', '2026-05-21'), makeRow('left-extra', '2026-05-21')] }) })
      .mockResolvedValueOnce({ ok: true, json: async () => ({ data: [makeRow('right-extra', '2026-05-22')] }) });
    const result = await getAppointments('2026-05-20', '2026-05-22');
    // 2000 from initial + 1 new from left half + 1 from right half = 2002 unique
    const ids = new Set(result.map((r: any) => r.id));
    expect(ids.has('left-extra')).toBe(true);
    expect(ids.has('right-extra')).toBe(true);
    expect(result.length).toBe(ids.size); // no duplicates
  });

  it('does NOT split when start === end even at cap', async () => {
    const fullPage = Array.from({ length: 2000 }, (_, i) => makeRow(`e${i}`, '2026-05-21'));
    fetchWithAuthMock.mockResolvedValueOnce({ ok: true, json: async () => ({ data: fullPage }) });
    const result = await getAppointments('2026-05-21', '2026-05-21');
    expect(result.length).toBe(2000);
    expect(fetchWithAuthMock).toHaveBeenCalledTimes(1);
  });
});

export async function getAppointments(startDate: string, endDate: string): Promise<Appointment[]> {
  const response = await fetchWithAuth(
    `/api/v1/protected/appointments?startDate=${startDate}&endDate=${endDate}`
  );
  const result = await response.json();
  return result.data || [];
}

import { midpointDateStr, addDaysToDateStr } from './date-range';

/**
 * Fetch appointments in a date range. Calendar surfaces fan this out for
 * windows up to ~75 days (month view). The server caps per-request rows at
 * 2000; if a window ever hits the cap, we split the range in half and recurse
 * — bounded by O(log2(rangeDays)) ≤ 7 calls for any realistic envelope.
 */
export async function getAppointments(startDate: string, endDate: string): Promise<Appointment[]> {
  const LIMIT = 2000;
  const response = await fetchWithAuth(
    `/api/v1/protected/appointments?startDate=${startDate}&endDate=${endDate}&limit=${LIMIT}`
  );
  const result = await response.json();
  const rows: Appointment[] = result.data || [];

  if (rows.length < LIMIT) return rows;
  if (startDate === endDate) return rows; // can't split a single day; accept truncation

  const mid = midpointDateStr(startDate, endDate);
  if (!mid || mid === startDate) return rows;

  const [left, right] = await Promise.all([
    getAppointments(startDate, mid),
    getAppointments(addDaysToDateStr(mid, 1), endDate),
  ]);

  // Dedupe by id — recursion windows can overlap at the boundary day.
  const seen = new Set<string>();
  const out: Appointment[] = [];
  for (const a of [...left, ...right]) {
    if (seen.has(a.id)) continue;
    seen.add(a.id);
    out.push(a);
  }
  return out;
}

git add ui/src/lib/serverComm.ts ui/src/lib/getAppointments.test.ts
git commit -m "fix(calendar): getAppointments passes limit=2000 with recursive split safety net"

import { describe, it, expect } from 'vitest';
import { renderHook } from '@testing-library/react';
import { useDayIndex } from './use-day-index';
import type { Event } from '@/types';

function ev(id: string, dateIso: string, hour: number, doctorId?: string, status?: string): Event {
  const start = new Date(dateIso);
  start.setHours(hour, 0, 0, 0);
  const end = new Date(start.getTime() + 30 * 60_000);
  return {
    id, title: id, startDate: start, endDate: end,
    variant: 'primary', doctorId, status: status as any,
  } as Event;
}

describe('useDayIndex', () => {
  it('groups events by YYYY-MM-DD', () => {
    const events = [ev('a', '2026-05-21', 9), ev('b', '2026-05-21', 14), ev('c', '2026-05-22', 9)];
    const { result } = renderHook(() => useDayIndex(events, null, null));
    expect(result.current.byDate.get('2026-05-21')?.length).toBe(2);
    expect(result.current.byDate.get('2026-05-22')?.length).toBe(1);
  });

  it('counts events per hour per day', () => {
    const events = [ev('a', '2026-05-21', 9), ev('b', '2026-05-21', 9), ev('c', '2026-05-21', 14)];
    const { result } = renderHook(() => useDayIndex(events, null, null));
    expect(result.current.byDateByHour.get('2026-05-21')?.get(9)).toBe(2);
    expect(result.current.byDateByHour.get('2026-05-21')?.get(14)).toBe(1);
  });

  it('respects doctor filter', () => {
    const events = [ev('a', '2026-05-21', 9, 'd1'), ev('b', '2026-05-21', 9, 'd2')];
    const { result } = renderHook(() => useDayIndex(events, 'd1', null));
    expect(result.current.byDate.get('2026-05-21')?.map(e => e.id)).toEqual(['a']);
  });

  it('respects status filter', () => {
    const events = [ev('a', '2026-05-21', 9, undefined, 'confirmed'), ev('b', '2026-05-21', 9, undefined, 'cancelled')];
    const { result } = renderHook(() => useDayIndex(events, null, 'confirmed'));
    expect(result.current.byDate.get('2026-05-21')?.map(e => e.id)).toEqual(['a']);
  });

  it('returns stable identity when inputs are referentially equal', () => {
    const events = [ev('a', '2026-05-21', 9)];
    const { result, rerender } = renderHook(({ e }) => useDayIndex(e, null, null), { initialProps: { e: events } });
    const first = result.current;
    rerender({ e: events });
    expect(result.current).toBe(first);
  });
});

import { useMemo } from 'react';
import type { Event } from '@/types';
import { localDateStr } from '@/lib/date-range';

export interface DayIndex {
  /** YYYY-MM-DD → events on that local-TZ day, sorted by start time. */
  byDate: Map<string, Event[]>;
  /** YYYY-MM-DD → (0-23 hour → count of events whose START hour matches). */
  byDateByHour: Map<string, Map<number, number>>;
}

const EMPTY_INDEX: DayIndex = {
  byDate: new Map(),
  byDateByHour: new Map(),
};

export function useDayIndex(
  events: Event[] | undefined,
  filterDoctorId: string | null,
  filterStatus: string | null,
): DayIndex {
  return useMemo(() => {
    if (!events || events.length === 0) return EMPTY_INDEX;

    const byDate = new Map<string, Event[]>();
    const byDateByHour = new Map<string, Map<number, number>>();

    for (const event of events) {
      if (filterDoctorId && event.doctorId && event.doctorId !== filterDoctorId) continue;
      if (filterStatus && (event.status || 'scheduled') !== filterStatus) continue;

      const start = event.startDate instanceof Date ? event.startDate : new Date(event.startDate);
      if (isNaN(start.getTime())) continue;

      const key = localDateStr(start);
      let bucket = byDate.get(key);
      if (!bucket) { bucket = []; byDate.set(key, bucket); }
      bucket.push(event);

      let hourMap = byDateByHour.get(key);
      if (!hourMap) { hourMap = new Map(); byDateByHour.set(key, hourMap); }
      const hour = start.getHours();
      hourMap.set(hour, (hourMap.get(hour) || 0) + 1);
    }

    // Sort each bucket by start time once
    for (const bucket of byDate.values()) {
      bucket.sort((a, b) => {
        const aT = (a.startDate instanceof Date ? a.startDate : new Date(a.startDate)).getTime();
        const bT = (b.startDate instanceof Date ? b.startDate : new Date(b.startDate)).getTime();
        return aT - bT;
      });
    }

    return { byDate, byDateByHour };
  }, [events, filterDoctorId, filterStatus]);
}

/** Module-level frozen empty array used to keep referential equality across renders. */
export const EMPTY_EVENTS: readonly Event[] = Object.freeze([]) as readonly Event[];

git add ui/src/hooks/use-day-index.ts ui/src/hooks/use-day-index.test.tsx
git commit -m "feat(calendar): useDayIndex hook — O(1) per-day lookups for calendar views"

import { describe, it, expect } from 'vitest';
import { statusToClasses, statusToDot } from './status-style';

describe('statusToClasses', () => {
  it('returns a ribbon + tint class for known statuses', () => {
    expect(statusToClasses('confirmed').ribbon).toMatch(/emerald/);
    expect(statusToClasses('cancelled').ribbon).toMatch(/rose/);
    expect(statusToClasses('completed').ribbon).toMatch(/slate/);
    expect(statusToClasses('no_show').ribbon).toMatch(/orange/);
    expect(statusToClasses('in_progress').ribbon).toMatch(/violet/);
    expect(statusToClasses('requested').ribbon).toMatch(/amber/);
    expect(statusToClasses('scheduled').ribbon).toMatch(/blue/);
  });
  it('falls back to scheduled style for unknown', () => {
    const s = statusToClasses('unknown' as any);
    expect(s.ribbon).toMatch(/blue/);
  });
  it('statusToDot returns a dot color class', () => {
    expect(statusToDot('confirmed')).toMatch(/emerald/);
  });
});

export type AppointmentStatus =
  | 'scheduled' | 'confirmed' | 'in_progress' | 'completed'
  | 'cancelled' | 'no_show' | 'requested';

export interface StatusClasses {
  /** 4px left ribbon background. */
  ribbon: string;
  /** Card surface tint (very subtle). */
  surface: string;
  /** Text accent (for time/status pill). */
  accent: string;
  /** Border for hover/selection. */
  border: string;
}

const TABLE: Record<AppointmentStatus, StatusClasses> = {
  scheduled:   { ribbon: 'bg-blue-500',     surface: 'bg-blue-500/5',     accent: 'text-blue-700 dark:text-blue-300',     border: 'border-blue-500/30'  },
  confirmed:   { ribbon: 'bg-emerald-500',  surface: 'bg-emerald-500/5',  accent: 'text-emerald-700 dark:text-emerald-300', border: 'border-emerald-500/30'},
  in_progress: { ribbon: 'bg-violet-500',   surface: 'bg-violet-500/5',   accent: 'text-violet-700 dark:text-violet-300',   border: 'border-violet-500/30'},
  completed:   { ribbon: 'bg-slate-500',    surface: 'bg-slate-500/5',    accent: 'text-slate-700 dark:text-slate-300',     border: 'border-slate-500/30' },
  cancelled:   { ribbon: 'bg-rose-500',     surface: 'bg-rose-500/5',     accent: 'text-rose-700 dark:text-rose-300',       border: 'border-rose-500/30'  },
  no_show:     { ribbon: 'bg-orange-500',   surface: 'bg-orange-500/5',   accent: 'text-orange-700 dark:text-orange-300',   border: 'border-orange-500/30'},
  requested:   { ribbon: 'bg-amber-500',    surface: 'bg-amber-500/5',    accent: 'text-amber-700 dark:text-amber-300',     border: 'border-amber-500/30' },
};

export function statusToClasses(s: AppointmentStatus | string | undefined): StatusClasses {
  return TABLE[(s as AppointmentStatus) || 'scheduled'] ?? TABLE.scheduled;
}

export function statusToDot(s: AppointmentStatus | string | undefined): string {
  return statusToClasses(s).ribbon;
}

git add ui/src/components/schedule/_components/v2/status-style.ts ui/src/components/schedule/_components/v2/status-style.test.ts
git commit -m "feat(calendar): status-style — accessible status hue table for v2 components"

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { EventCard } from './EventCard';
import type { Event } from '@/types';

function ev(over: Partial<Event> = {}): Event {
  const start = new Date('2026-05-21T09:00:00');
  const end = new Date('2026-05-21T09:30:00');
  return {
    id: 'e1', title: 'Smith, Jane', startDate: start, endDate: end,
    variant: 'primary', patientName: 'Smith, Jane', doctorName: 'Dr. Khan',
    status: 'confirmed' as any, roomName: 'Op 1',
    ...over,
  } as Event;
}

describe('EventCard', () => {
  it('renders patient name and time', () => {
    render(<EventCard event={ev()} />);
    expect(screen.getByText('Smith, Jane')).toBeInTheDocument();
    expect(screen.getByText(/09:00/)).toBeInTheDocument();
  });
  it('renders doctor chip on normal/wide width', () => {
    render(<EventCard event={ev()} width="normal" />);
    expect(screen.getByText(/Khan/)).toBeInTheDocument();
  });
  it('hides doctor chip on narrow width', () => {
    render(<EventCard event={ev()} width="narrow" />);
    expect(screen.queryByText(/Khan/)).toBeNull();
  });
  it('renders compact variant on one line', () => {
    const { container } = render(<EventCard event={ev()} variant="compact" />);
    expect(container.textContent).toContain('09:00');
    expect(container.textContent).toContain('Smith, Jane');
  });
  it('applies confirmed status ribbon class', () => {
    const { container } = render(<EventCard event={ev()} />);
    expect(container.querySelector('[data-status-ribbon]')?.className).toMatch(/emerald/);
  });
});

import React from 'react';
import clsx from 'clsx';
import type { Event } from '@/types';
import { statusToClasses } from './status-style';
import { useClinicTimeFormat } from '@/lib/useClinicTimeFormat';
import { formatClockTime } from '@/lib/datetime';

export interface EventCardProps {
  event: Event;
  variant?: 'normal' | 'compact';
  /** Controls which meta lines are shown. */
  width?: 'narrow' | 'normal' | 'wide';
  onClick?: (event: Event) => void;
  isSelected?: boolean;
  className?: string;
}

function initialsOf(name: string | undefined): string {
  if (!name) return '?';
  const parts = name.trim().split(/[,\s]+/).filter(Boolean);
  if (parts.length === 0) return '?';
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[1][0]).toUpperCase();
}

export function EventCard({
  event,
  variant = 'normal',
  width = 'normal',
  onClick,
  isSelected = false,
  className,
}: EventCardProps) {
  const timeFormat = useClinicTimeFormat();
  const start = event.startDate instanceof Date ? event.startDate : new Date(event.startDate);
  const end = event.endDate instanceof Date ? event.endDate : new Date(event.endDate);
  const status = (event.status as string) || 'scheduled';
  const s = statusToClasses(status);
  const name = (event.patientName || event.title || '').toString();
  const startStr = formatClockTime(start, timeFormat);
  const endStr = formatClockTime(end, timeFormat);

  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick?.(event);
  };

  if (variant === 'compact') {
    return (
      <button
        type="button"
        onClick={handleClick}
        title={`${startStr} — ${name}`}
        className={clsx(
          'group flex w-full items-center gap-2 rounded-md border-l-2 bg-card px-2 py-1 text-left text-xs',
          'transition-colors hover:bg-muted/50',
          s.border,
          status === 'cancelled' && 'line-through opacity-70',
          isSelected && 'ring-2 ring-primary',
          className,
        )}
      >
        <span data-status-ribbon className={clsx('h-2 w-2 shrink-0 rounded-full', s.ribbon)} />
        <span className="font-medium tabular-nums opacity-80">{startStr}</span>
        <span className="truncate">{name}</span>
      </button>
    );
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      title={`${startStr} → ${endStr} — ${name}`}
      className={clsx(
        'group relative flex h-full w-full flex-col overflow-hidden rounded-md border bg-card text-left',
        'shadow-sm transition-all duration-150 hover:shadow-md',
        s.border,
        status === 'cancelled' && 'opacity-70',
        isSelected && 'ring-2 ring-primary',
        className,
      )}
    >
      <span data-status-ribbon className={clsx('absolute inset-y-0 left-0 w-1', s.ribbon)} />
      <div className="flex h-full flex-col gap-0.5 px-2 py-1.5 pl-3">
        <div className="flex items-center gap-1.5">
          <span className={clsx('text-xs font-semibold tabular-nums', s.accent)}>
            {startStr}<span className="text-muted-foreground"> → </span>{endStr}
          </span>
        </div>
        <div className={clsx('truncate text-sm font-semibold', status === 'cancelled' && 'line-through')}>
          {name}
        </div>
        {(width !== 'narrow') && event.doctorName && (
          <div className="truncate text-[11px] text-muted-foreground">{event.doctorName}</div>
        )}
        {width === 'wide' && event.roomName && (
          <div className="mt-auto truncate text-[10px] text-muted-foreground/80">{event.roomName}</div>
        )}
      </div>
      {width === 'wide' && (
        <div className="absolute right-2 top-1.5 grid h-6 w-6 place-items-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
          {initialsOf(name)}
        </div>
      )}
    </button>
  );
}

git add ui/src/components/schedule/_components/v2/EventCard.tsx ui/src/components/schedule/_components/v2/EventCard.test.tsx
git commit -m "feat(calendar): EventCard v2 — spacious card with status ribbon + compact variant"

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UtilizationBar, UtilizationRing } from './Utilization';

describe('Utilization components', () => {
  it('UtilizationBar shows aria-valuenow', () => {
    render(<UtilizationBar bookedMinutes={30} operatingMinutes={60} count={2} />);
    const bar = screen.getByRole('progressbar');
    expect(bar).toHaveAttribute('aria-valuenow', '50');
    expect(bar).toHaveAttribute('aria-valuemax', '100');
  });
  it('UtilizationBar caps at 100%', () => {
    render(<UtilizationBar bookedMinutes={120} operatingMinutes={60} count={5} />);
    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
  });
  it('UtilizationRing renders count inside when showCount', () => {
    render(<UtilizationRing bookedMinutes={30} operatingMinutes={60} count={7} showCount />);
    expect(screen.getByText('7')).toBeInTheDocument();
  });
  it('returns null elements when operatingMinutes is 0', () => {
    const { container } = render(<UtilizationBar bookedMinutes={0} operatingMinutes={0} count={0} />);
    expect(container.firstChild).toBeNull();
  });
});

import React from 'react';
import clsx from 'clsx';

export interface UtilizationProps {
  bookedMinutes: number;
  operatingMinutes: number;
  count: number;
  className?: string;
}

export interface UtilizationRingProps extends UtilizationProps {
  showCount?: boolean;
  size?: number;
}

function percent(bookedMinutes: number, operatingMinutes: number): number {
  if (operatingMinutes <= 0) return 0;
  const raw = (bookedMinutes / operatingMinutes) * 100;
  return Math.max(0, Math.min(100, Math.round(raw)));
}

function hueClass(pct: number, target: 'bar' | 'ring'): string {
  if (pct < 30) return target === 'bar' ? 'bg-emerald-500' : 'stroke-emerald-500';
  if (pct < 70) return target === 'bar' ? 'bg-amber-500'    : 'stroke-amber-500';
  return target === 'bar' ? 'bg-rose-500' : 'stroke-rose-500';
}

export function UtilizationBar({ bookedMinutes, operatingMinutes, count, className }: UtilizationProps) {
  if (operatingMinutes <= 0) return null;
  const pct = percent(bookedMinutes, operatingMinutes);
  return (
    <div
      role="progressbar"
      aria-valuenow={pct}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-label={`${count} appointments, ${pct}% booked`}
      className={clsx('relative h-1 w-full overflow-hidden rounded-full bg-muted/40', className)}
    >
      <div className={clsx('h-full rounded-full transition-all duration-300', hueClass(pct, 'bar'))} style={{ width: `${pct}%` }} />
    </div>
  );
}

export function UtilizationRing({
  bookedMinutes, operatingMinutes, count,
  showCount = false, size = 24, className,
}: UtilizationRingProps) {
  if (operatingMinutes <= 0 && count === 0) return null;
  const pct = percent(bookedMinutes, operatingMinutes);
  const stroke = 2.5;
  const radius = (size - stroke) / 2;
  const circumference = 2 * Math.PI * radius;
  const dash = (pct / 100) * circumference;
  return (
    <div
      role="progressbar"
      aria-valuenow={pct}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-label={`${count} appointments, ${pct}% booked`}
      className={clsx('relative inline-flex items-center justify-center', className)}
      style={{ width: size, height: size }}
    >
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={radius} fill="none" strokeWidth={stroke} className="stroke-muted/40" />
        <circle
          cx={size / 2} cy={size / 2} r={radius} fill="none" strokeWidth={stroke}
          strokeLinecap="round" strokeDasharray={`${dash} ${circumference}`}
          className={clsx(hueClass(pct, 'ring'), 'transition-all duration-300')}
        />
      </svg>
      {showCount && (
        <span className="absolute text-[10px] font-semibold tabular-nums">{count}</span>
      )}
    </div>
  );
}

git add ui/src/components/schedule/_components/v2/Utilization.tsx ui/src/components/schedule/_components/v2/Utilization.test.tsx
git commit -m "feat(calendar): UtilizationBar + UtilizationRing primitives"

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { HourHeatStrip } from './HourHeatStrip';

describe('HourHeatStrip', () => {
  it('renders one bar per hour in the window', () => {
    const byHour = new Map<number, number>([[10, 3]]);
    const { container } = render(<HourHeatStrip byHour={byHour} windowStart={9} windowEnd={18} />);
    expect(container.querySelectorAll('[data-heat-bar]').length).toBe(9);
  });
  it('labels each bar with hour and count', () => {
    const byHour = new Map<number, number>([[10, 3]]);
    render(<HourHeatStrip byHour={byHour} windowStart={9} windowEnd={11} />);
    expect(screen.getByLabelText(/10:00, 3 appointments/)).toBeInTheDocument();
    expect(screen.getByLabelText(/9:00, 0 appointments/)).toBeInTheDocument();
  });
  it('renders nothing when window is empty', () => {
    const { container } = render(<HourHeatStrip byHour={undefined} windowStart={9} windowEnd={9} />);
    expect(container.firstChild).toBeNull();
  });
});

import React, { useMemo } from 'react';
import clsx from 'clsx';

export interface HourHeatStripProps {
  byHour: Map<number, number> | undefined;
  windowStart: number;
  windowEnd: number;
  className?: string;
}

/**
 * Renders one thin vertical bar per hour in [windowStart, windowEnd).
 * Intensity scales against the max count in the window so a day always looks
 * "hot" relative to itself — useful for shape-recognition across months.
 */
export function HourHeatStrip({ byHour, windowStart, windowEnd, className }: HourHeatStripProps) {
  const hours = useMemo(() => {
    const out: number[] = [];
    for (let h = windowStart; h < windowEnd; h++) out.push(h);
    return out;
  }, [windowStart, windowEnd]);

  const max = useMemo(() => {
    if (!byHour) return 0;
    let m = 0;
    for (const v of byHour.values()) if (v > m) m = v;
    return m;
  }, [byHour]);

  if (hours.length === 0) return null;

  return (
    <div className={clsx('flex h-6 w-full items-end gap-[2px]', className)}>
      {hours.map(h => {
        const count = byHour?.get(h) ?? 0;
        const intensity = max > 0 ? count / max : 0;
        const height = max === 0 ? 4 : Math.max(2, Math.round(intensity * 22));
        const tint =
          intensity === 0 ? 'bg-muted/40' :
          intensity < 0.34 ? 'bg-emerald-500/60' :
          intensity < 0.67 ? 'bg-amber-500/70' :
          'bg-rose-500/80';
        return (
          <div
            key={h}
            data-heat-bar
            role="img"
            aria-label={`${h}:00, ${count} appointments`}
            className={clsx('flex-1 rounded-sm transition-all', tint)}
            style={{ height: `${height}px` }}
          />
        );
      })}
    </div>
  );
}

git add ui/src/components/schedule/_components/v2/HourHeatStrip.tsx ui/src/components/schedule/_components/v2/HourHeatStrip.test.tsx
git commit -m "feat(calendar): HourHeatStrip primitive for month-cell density"

import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { OverflowPill } from './OverflowPill';
import type { Event } from '@/types';

function ev(id: string, hour: number): Event {
  const s = new Date('2026-05-21T00:00:00'); s.setHours(hour, 0, 0, 0);
  const e = new Date(s.getTime() + 30 * 60_000);
  return { id, title: id, startDate: s, endDate: e, variant: 'primary' } as Event;
}

describe('OverflowPill', () => {
  it('renders count and band', () => {
    render(<OverflowPill events={[ev('a', 10), ev('b', 10)]} band={{ startHour: 10, endHour: 11 }} />);
    expect(screen.getByText(/\+2/)).toBeInTheDocument();
    expect(screen.getByText(/10:00/)).toBeInTheDocument();
  });
  it('opens a popover with the events on click', () => {
    render(<OverflowPill events={[ev('a', 10), ev('b', 10)]} band={{ startHour: 10, endHour: 11 }} />);
    fireEvent.click(screen.getByRole('button'));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
    expect(screen.getAllByText(/^a$|^b$/)).toHaveLength(2);
  });
});

import React, { useState, useCallback } from 'react';
import clsx from 'clsx';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import type { Event } from '@/types';
import { EventCard } from './EventCard';

export interface OverflowPillProps {
  events: Event[];
  band: { startHour: number; endHour: number };
  onSelect?: (event: Event) => void;
  className?: string;
}

function fmtHour(h: number): string {
  return `${h.toString().padStart(2, '0')}:00`;
}

export function OverflowPill({ events, band, onSelect, className }: OverflowPillProps) {
  const [open, setOpen] = useState(false);

  const handleSelect = useCallback((event: Event) => {
    setOpen(false);
    onSelect?.(event);
  }, [onSelect]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          className={clsx(
            'inline-flex items-center gap-1 rounded-full border bg-card px-2 py-0.5 text-[11px] font-medium',
            'shadow-sm transition-colors hover:bg-muted/60',
            className,
          )}
          aria-label={`+${events.length} appointments at ${fmtHour(band.startHour)}`}
        >
          <span className="font-semibold">+{events.length}</span>
          <span className="text-muted-foreground">at {fmtHour(band.startHour)}</span>
        </button>
      </PopoverTrigger>
      <PopoverContent role="dialog" align="start" className="w-72 p-2">
        <div className="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
          {fmtHour(band.startHour)}–{fmtHour(band.endHour)} · {events.length} appointments
        </div>
        <div className="max-h-80 space-y-1 overflow-y-auto">
          {events.map(ev => (
            <EventCard key={ev.id} event={ev} variant="compact" onClick={handleSelect} />
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}

git add ui/src/components/schedule/_components/v2/OverflowPill.tsx ui/src/components/schedule/_components/v2/OverflowPill.test.tsx ui/src/components/ui/popover.tsx
git commit -m "feat(calendar): OverflowPill — '+N at HH:00' popover for dense bands"

import { describe, it, expect, vi } from 'vitest';
import { render, screen, act } from '@testing-library/react';
import { NowLine } from './NowLine';

describe('NowLine', () => {
  it('places the line at the correct top for a known time', () => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-05-21T10:30:00'));
    render(<NowLine startHour={9} endHour={18} pxPerHour={120} />);
    const line = screen.getByRole('presentation');
    // 90 minutes after start at 120px/hour → 180px
    expect((line as HTMLElement).style.top).toBe('180px');
    vi.useRealTimers();
  });
  it('renders nothing outside the visible window', () => {
    vi.useFakeTimers();
    vi.setSystemTime(new Date('2026-05-21T05:00:00'));
    const { container } = render(<NowLine startHour={9} endHour={18} pxPerHour={120} />);
    expect(container.firstChild).toBeNull();
    vi.useRealTimers();
  });
});

import React, { useState, useEffect } from 'react';

export interface NowLineProps {
  startHour: number;
  endHour: number;
  pxPerHour: number;
}

export function NowLine({ startHour, endHour, pxPerHour }: NowLineProps) {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 60_000);
    return () => clearInterval(id);
  }, []);

  const hour = now.getHours();
  const minute = now.getMinutes();
  if (hour < startHour || hour >= endHour) return null;

  const top = (hour - startHour) * pxPerHour + (minute / 60) * pxPerHour;
  const label = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;

  return (
    <div
      role="presentation"
      className="pointer-events-none absolute left-0 right-0 z-30 h-px bg-primary/80"
      style={{ top: `${top}px` }}
    >
      <span className="absolute -left-1 -top-2.5 inline-flex items-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold leading-none text-primary-foreground shadow-sm">
        {label}
      </span>
    </div>
  );
}

git add ui/src/components/schedule/_components/v2/NowLine.tsx ui/src/components/schedule/_components/v2/NowLine.test.tsx
git commit -m "feat(calendar): NowLine primitive — minute-ticking timeline indicator"

import { describe, it, expect } from 'vitest';
import { operatingMinutesFor, bookedMinutesFor } from './use-operating-minutes';
import type { Event } from '@/types';

function ev(startIso: string, endIso: string): Event {
  return { id: startIso, title: 't', startDate: new Date(startIso), endDate: new Date(endIso), variant: 'primary' } as Event;
}

describe('operatingMinutesFor', () => {
  it('uses operatingHours when enabled', () => {
    const hours: any = { monday: { enabled: true, open: '09:00', close: '17:00' } };
    expect(operatingMinutesFor(new Date('2026-05-25T00:00:00'), hours)).toBe(8 * 60);
  });
  it('returns 0 when day is disabled', () => {
    const hours: any = { sunday: { enabled: false } };
    expect(operatingMinutesFor(new Date('2026-05-24T00:00:00'), hours)).toBe(0);
  });
  it('falls back to 8h default when missing', () => {
    expect(operatingMinutesFor(new Date('2026-05-21T00:00:00'), null)).toBe(8 * 60);
  });
});

describe('bookedMinutesFor', () => {
  it('sums event durations', () => {
    const list = [
      ev('2026-05-21T09:00:00', '2026-05-21T09:30:00'),
      ev('2026-05-21T10:00:00', '2026-05-21T11:00:00'),
    ];
    expect(bookedMinutesFor(list)).toBe(90);
  });
  it('returns 0 for empty list', () => {
    expect(bookedMinutesFor([])).toBe(0);
  });
});