@agent-native/core 0.159.1 → 0.159.3

package/corpus/templates/clips/actions/search-meetings.ts

@@ -0,0 +1,277 @@
+/**
+ * Search meetings by title, AI summary, user notes, attendee, or the linked
+ * recording's transcript.
+ *
+ * `list-meetings` is a lifecycle list — it answers "what happened around this
+ * date". This answers "which call was the one where we talked about X", which
+ * is the only way to reach a meeting older than the visible history window.
+ *
+ * Scope: every source is joined through `accessFilter(meetings, meetingShares)`
+ * in the query itself, so a transcript match can never surface a meeting the
+ * caller cannot already open.
+ */
+
+import { defineAction } from "@agent-native/core";
+import { accessFilter } from "@agent-native/core/sharing";
+import { and, desc, eq, inArray, isNull, sql } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import { booleanParam } from "./lib/cli-params.js";
+import { buildCaseInsensitiveSearchPattern } from "./search-recordings-utils.js";
+
+const SNIPPET_RADIUS = 90;
+
+/** Columns every match source selects, so results have one uniform shape. */
+const MEETING_COLUMNS = {
+  id: schema.meetings.id,
+  title: schema.meetings.title,
+  scheduledStart: schema.meetings.scheduledStart,
+  scheduledEnd: schema.meetings.scheduledEnd,
+  actualStart: schema.meetings.actualStart,
+  actualEnd: schema.meetings.actualEnd,
+  createdAt: schema.meetings.createdAt,
+  recordingId: schema.meetings.recordingId,
+  transcriptStatus: schema.meetings.transcriptStatus,
+  summaryMd: schema.meetings.summaryMd,
+  userNotesMd: schema.meetings.userNotesMd,
+  source: schema.meetings.source,
+  platform: schema.meetings.platform,
+  trashedAt: schema.meetings.trashedAt,
+} as const;
+
+type MeetingRow = Pick<
+  typeof schema.meetings.$inferSelect,
+  keyof typeof MEETING_COLUMNS
+>;
+
+type MeetingMatchType =
+  | "title"
+  | "summary"
+  | "notes"
+  | "participant"
+  | "transcript";
+
+/** Most specific match wins when one meeting matches several ways. */
+const MATCH_PRECEDENCE: MeetingMatchType[] = [
+  "transcript",
+  "summary",
+  "notes",
+  "participant",
+  "title",
+];
+
+function buildSnippet(
+  text: string | null | undefined,
+  query: string,
+): string | null {
+  if (!text || !query) return null;
+  const idx = text.toLowerCase().indexOf(query.toLowerCase());
+  if (idx === -1) return null;
+  const start = Math.max(0, idx - SNIPPET_RADIUS);
+  const end = Math.min(text.length, idx + query.length + SNIPPET_RADIUS);
+  const prefix = start > 0 ? "…" : "";
+  const suffix = end < text.length ? "…" : "";
+  return `${prefix}${text.slice(start, end).replace(/\s+/g, " ").trim()}${suffix}`;
+}
+
+export default defineAction({
+  description:
+    "Search meetings by title, AI summary, user notes, attendee name/email, or the transcript of the linked recording. Returns each match with a snippet showing why it matched. Use this to find an older call by what was said in it — list-meetings only filters by date.",
+  schema: z.object({
+    query: z.string().min(1).describe("Search text"),
+    limit: z.coerce.number().int().min(1).max(100).default(30),
+    includeTrashed: booleanParam
+      .default(false)
+      .describe("Include meetings that have been moved to trash."),
+  }),
+  http: { method: "GET" },
+  run: async (args) => {
+    const db = getDb();
+    const pattern = buildCaseInsensitiveSearchPattern(args.query);
+
+    const visible = () => {
+      const clauses = [accessFilter(schema.meetings, schema.meetingShares)];
+      if (!args.includeTrashed) {
+        clauses.push(isNull(schema.meetings.trashedAt));
+      }
+      return and(...clauses);
+    };
+
+    // Shared with list-meetings' non-forward-looking sort: most-recent-first,
+    // falling back through actualStart -> scheduledStart -> createdAt. Applied
+    // as an ORDER BY before every LIMIT below, so a source with more matches
+    // than `limit` truncates to its most recent rows instead of an arbitrary
+    // DB-chosen subset that could skip the meeting the user is actually after.
+    const recencyExpr = sql`COALESCE(${schema.meetings.actualStart}, ${schema.meetings.scheduledStart}, ${schema.meetings.createdAt})`;
+    const recencyOrder = desc(recencyExpr);
+
+    const [ownRows, participantMeetingIds, transcriptRows] = await Promise.all([
+      db
+        .select(MEETING_COLUMNS)
+        .from(schema.meetings)
+        .where(
+          and(
+            visible(),
+            sql`(lower(${schema.meetings.title}) LIKE ${pattern} ESCAPE '\\' OR lower(${schema.meetings.summaryMd}) LIKE ${pattern} ESCAPE '\\' OR lower(${schema.meetings.userNotesMd}) LIKE ${pattern} ESCAPE '\\')`,
+          ),
+        )
+        .orderBy(recencyOrder)
+        .limit(args.limit),
+      // meeting_participants has one row per attendee, so limiting attendee
+      // rows directly could let one large meeting's matching attendees fill
+      // the whole quota and hide every other matching meeting. Limit distinct
+      // meeting ids instead, then fetch their participant rows unbounded.
+      //
+      // PostgreSQL requires every ORDER BY expression on a SELECT DISTINCT to
+      // also appear in the select list (SQLite has no such rule, which is why
+      // this passed locally against SQLite but fails on Postgres in prod) —
+      // so `recency` is selected here as its own column, not just ordered by.
+      // It's safe to include: every row for a given meetingId shares the same
+      // recency value (it comes from the joined meetings row), so adding it
+      // to the DISTINCT projection can't create spurious per-meeting duplicates.
+      db
+        .selectDistinct({
+          meetingId: schema.meetingParticipants.meetingId,
+          recency: recencyExpr,
+        })
+        .from(schema.meetingParticipants)
+        .innerJoin(
+          schema.meetings,
+          eq(schema.meetingParticipants.meetingId, schema.meetings.id),
+        )
+        .where(
+          and(
+            visible(),
+            sql`(lower(${schema.meetingParticipants.email}) LIKE ${pattern} ESCAPE '\\' OR lower(${schema.meetingParticipants.name}) LIKE ${pattern} ESCAPE '\\')`,
+          ),
+        )
+        .orderBy(recencyOrder)
+        .limit(args.limit),
+      db
+        .select({
+          ...MEETING_COLUMNS,
+          fullText: schema.recordingTranscripts.fullText,
+        })
+        .from(schema.meetings)
+        .innerJoin(
+          schema.recordingTranscripts,
+          eq(
+            schema.meetings.recordingId,
+            schema.recordingTranscripts.recordingId,
+          ),
+        )
+        .where(
+          and(
+            visible(),
+            sql`lower(${schema.recordingTranscripts.fullText}) LIKE ${pattern} ESCAPE '\\'`,
+          ),
+        )
+        .orderBy(recencyOrder)
+        .limit(args.limit),
+    ]);
+
+    const participantMeetingIdList = participantMeetingIds.map(
+      (row) => row.meetingId,
+    );
+    const participantRows = participantMeetingIdList.length
+      ? await db
+          .select({
+            ...MEETING_COLUMNS,
+            participantName: schema.meetingParticipants.name,
+            participantEmail: schema.meetingParticipants.email,
+          })
+          .from(schema.meetingParticipants)
+          .innerJoin(
+            schema.meetings,
+            eq(schema.meetingParticipants.meetingId, schema.meetings.id),
+          )
+          .where(
+            and(
+              inArray(
+                schema.meetingParticipants.meetingId,
+                participantMeetingIdList,
+              ),
+              sql`(lower(${schema.meetingParticipants.email}) LIKE ${pattern} ESCAPE '\\' OR lower(${schema.meetingParticipants.name}) LIKE ${pattern} ESCAPE '\\')`,
+            ),
+          )
+      : [];
+
+    const merged = new Map<
+      string,
+      MeetingRow & { matchType: MeetingMatchType; snippet: string | null }
+    >();
+
+    const record = (
+      meeting: MeetingRow,
+      matchType: MeetingMatchType,
+      snippet: string | null,
+    ) => {
+      const existing = merged.get(meeting.id);
+      if (
+        existing &&
+        MATCH_PRECEDENCE.indexOf(existing.matchType) <=
+          MATCH_PRECEDENCE.indexOf(matchType)
+      ) {
+        return;
+      }
+      merged.set(meeting.id, { ...meeting, matchType, snippet });
+    };
+
+    for (const { fullText, ...meeting } of transcriptRows) {
+      record(meeting, "transcript", buildSnippet(fullText, args.query));
+    }
+    for (const row of ownRows) {
+      const summarySnippet = buildSnippet(row.summaryMd, args.query);
+      if (summarySnippet) {
+        record(row, "summary", summarySnippet);
+        continue;
+      }
+      const notesSnippet = buildSnippet(row.userNotesMd, args.query);
+      if (notesSnippet) {
+        record(row, "notes", notesSnippet);
+        continue;
+      }
+      record(row, "title", null);
+    }
+    for (const row of participantRows) {
+      const { participantName, participantEmail, ...meeting } = row;
+      record(
+        meeting,
+        "participant",
+        participantName?.trim() || participantEmail,
+      );
+    }
+
+    const ids = Array.from(merged.keys());
+    const participants = ids.length
+      ? await db
+          .select()
+          .from(schema.meetingParticipants)
+          .where(inArray(schema.meetingParticipants.meetingId, ids))
+      : [];
+    const participantsByMeeting = new Map<string, typeof participants>();
+    for (const participant of participants) {
+      const list = participantsByMeeting.get(participant.meetingId) ?? [];
+      list.push(participant);
+      participantsByMeeting.set(participant.meetingId, list);
+    }
+
+    const meetings = Array.from(merged.values())
+      .map((meeting) => ({
+        ...meeting,
+        participants: participantsByMeeting.get(meeting.id) ?? [],
+      }))
+      .sort((a, b) => {
+        const aStart = Date.parse(a.actualStart ?? a.scheduledStart ?? "");
+        const bStart = Date.parse(b.actualStart ?? b.scheduledStart ?? "");
+        return (
+          (Number.isNaN(bStart) ? 0 : bStart) -
+          (Number.isNaN(aStart) ? 0 : aStart)
+        );
+      })
+      .slice(0, args.limit);
+
+    return { meetings, query: args.query };
+  },
+});

package/corpus/templates/clips/app/components/meetings/agenda-card.tsx

@@ -0,0 +1,273 @@
+/**
+ * <AgendaCard /> — the Meetings tab's rolling agenda.
+ *
+ * Independent per-meeting cards, not a grid of tiles — see
+ * `desktop/design-refs/granola-ux.md` §2. It is a Zoom-style rolling window
+ * rather than a strict future list: `view=agenda` reaches 24h back, so the
+ * calls you already had today stay on your day, with a "now" marker between
+ * what has happened and what has not. Anything older falls out to the Past tab.
+ *
+ * Each meeting renders as its own bordered Card rather than a shared row
+ * inside one frame — per @shawnmcclelland's review, the "now" marker only
+ * reads cleanly as a divider when it sits between two independent elements;
+ * inside a single shared card (our first pass) it visually collided with the
+ * day-number column. That independence is also why the marker is confined to
+ * a single day (see `nowMarkerIndex`): between the last meeting of a mostly-
+ * finished day and the first of tomorrow is a day boundary, not a "now" — the
+ * day header already marks that transition, so a second marker there just
+ * reads as one more ambiguous boundary line (the "limbo" feel Shawn called
+ * out from Zoom's own equivalent).
+ *
+ * Recording is a desktop gesture, so a row never offers a web "record" button
+ * that cannot work; the imminent row offers Join and Open notes instead.
+ */
+import { useT } from "@agent-native/core/client/i18n";
+import { IconExternalLink } from "@tabler/icons-react";
+import { Fragment } from "react";
+import { NavLink } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+import { AttendeeStack, type AttendeeStackParticipant } from "./attendee-stack";
+import { groupByCalendarDay } from "./day-grouped-card";
+import { DayHeader, formatDayLabel } from "./day-header";
+
+export interface AgendaMeeting {
+  id: string;
+  title: string;
+  scheduledStart: string;
+  scheduledEnd?: string | null;
+  actualStart?: string | null;
+  actualEnd?: string | null;
+  joinUrl?: string | null;
+  participants?: AttendeeStackParticipant[];
+}
+
+type Translate = (key: string, params?: Record<string, unknown>) => string;
+
+/**
+ * Whether a meeting has actually finished. Agenda intentionally keeps
+ * already-ended meetings (see module doc), so "is this over" has to be its
+ * own check — `relativeStartLabel`'s `soon` only looks at scheduledStart and
+ * stays true for up to 2h after start regardless of whether the call ended.
+ */
+export function meetingHasEnded(
+  meeting: Pick<AgendaMeeting, "actualEnd" | "scheduledEnd" | "scheduledStart">,
+  nowMs: number = Date.now(),
+): boolean {
+  const endMs = Date.parse(
+    meeting.actualEnd ?? meeting.scheduledEnd ?? meeting.scheduledStart,
+  );
+  return !Number.isNaN(endMs) && endMs < nowMs;
+}
+
+function formatTime(iso?: string | null): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+
+/**
+ * Index of the first meeting that has not finished yet — where the "now"
+ * marker goes. Returns -1 when every meeting is still ahead, so a day that
+ * hasn't started yet doesn't get a marker pinned above its first row.
+ */
+export function nowMarkerIndex(
+  meetings: AgendaMeeting[],
+  nowMs: number,
+): number {
+  const firstUnfinished = meetings.findIndex((m) => {
+    const endMs = Date.parse(m.actualEnd ?? m.scheduledEnd ?? m.scheduledStart);
+    return Number.isNaN(endMs) || endMs >= nowMs;
+  });
+  return firstUnfinished > 0 ? firstUnfinished : -1;
+}
+
+/** Human "now" / "in 5 min" / "in 2 hr" label for an upcoming row. */
+export function relativeStartLabel(
+  iso: string,
+  t: Translate,
+): { text: string; soon: boolean } {
+  const start = Date.parse(iso);
+  if (Number.isNaN(start)) return { text: "", soon: false };
+  const diffMin = Math.round((start - Date.now()) / 60000);
+  if (diffMin <= 0 && diffMin > -120)
+    return { text: t("meetingCard.now"), soon: true };
+  if (diffMin <= 0) return { text: t("meetingCard.started"), soon: false };
+  if (diffMin < 60)
+    return {
+      text: t("meetingCard.inMinutes", { count: diffMin }),
+      soon: diffMin <= 5,
+    };
+  const hrs = Math.round(diffMin / 60);
+  return { text: t("meetingCard.inHours", { count: hrs }), soon: false };
+}
+
+function AgendaRow({ meeting }: { meeting: AgendaMeeting }) {
+  const t = useT();
+  const isLive = !!(meeting.actualStart && !meeting.actualEnd);
+  const hasEnded = meetingHasEnded(meeting);
+  const { text: whenText, soon } = relativeStartLabel(
+    meeting.scheduledStart,
+    t,
+  );
+  const active = isLive || (soon && !hasEnded);
+  const start = formatTime(meeting.scheduledStart);
+  const end = formatTime(meeting.scheduledEnd);
+
+  return (
+    // Wraps rather than compressing: at ~375px the title, avatars and both
+    // buttons cannot share a line, and a nowrap row silently slides the
+    // buttons on top of the title instead of pushing them down.
+    <Card className="flex flex-wrap items-center gap-x-3 gap-y-2 p-3">
+      <div className="flex min-w-0 flex-1 basis-48 items-center gap-3">
+        <span
+          aria-hidden
+          className={cn(
+            "w-0.5 self-stretch rounded-full",
+            active ? "bg-foreground/40" : "bg-border",
+          )}
+        />
+        <NavLink
+          to={`/meetings/${meeting.id}`}
+          className="min-w-0 flex-1 rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <div className="truncate text-sm font-medium text-foreground">
+            {meeting.title || t("meetingDetail.untitledMeeting")}
+          </div>
+          <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums text-muted-foreground">
+            {isLive ? (
+              <span className="inline-flex items-center gap-1 font-medium text-destructive">
+                <span className="relative flex h-1.5 w-1.5">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-60" />
+                  <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-destructive" />
+                </span>
+                {t("meetingCard.live")}
+              </span>
+            ) : whenText && !hasEnded ? (
+              <span className={cn(soon && "font-medium text-foreground")}>
+                {whenText}
+              </span>
+            ) : null}
+            {(isLive || whenText) && start ? <span>·</span> : null}
+            {start ? <span>{end ? `${start} – ${end}` : start}</span> : null}
+          </div>
+        </NavLink>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <span className="hidden sm:inline-flex">
+          <AttendeeStack participants={meeting.participants ?? []} size="xs" />
+        </span>
+        {active ? (
+          <div className="flex shrink-0 items-center gap-1.5">
+            {meeting.joinUrl ? (
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className="h-7 gap-1 px-2 text-xs cursor-pointer"
+              >
+                <a
+                  href={meeting.joinUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <IconExternalLink className="h-3.5 w-3.5" />
+                  {t("meetingCard.join")}
+                </a>
+              </Button>
+            ) : null}
+            <Button
+              asChild
+              size="sm"
+              className="h-7 px-2.5 text-xs cursor-pointer"
+            >
+              <NavLink to={`/meetings/${meeting.id}`}>
+                {t("meetingCard.openNotes")}
+              </NavLink>
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    </Card>
+  );
+}
+
+/** Zoom's orange current-time rule: what is behind you, and what is not. */
+function NowMarker() {
+  const t = useT();
+  return (
+    <div className="my-1 flex items-center gap-2" aria-hidden>
+      <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+      <span className="text-[10px] font-medium uppercase tracking-[0.08em] text-primary">
+        {t("meetingsRoute.now", { defaultValue: "Now" })}
+      </span>
+      <span className="h-px flex-1 bg-primary/40" />
+    </div>
+  );
+}
+
+export function AgendaCard({ meetings }: { meetings: AgendaMeeting[] }) {
+  if (meetings.length === 0) return null;
+  const days = groupByCalendarDay(
+    meetings,
+    (m) => m.scheduledStart,
+    (a, b) => Date.parse(a.scheduledStart) - Date.parse(b.scheduledStart) || 0,
+  );
+  // The marker is computed over the flat, already-sorted list, then matched
+  // back per day below — a day group cannot know how many meetings preceded
+  // it on its own.
+  const markerIndex = nowMarkerIndex(meetings, Date.now());
+
+  let flatIndex = 0;
+  return (
+    <div className="space-y-6">
+      {days.map(([key, items]) => {
+        const dayStartIndex = flatIndex;
+        flatIndex += items.length;
+        // Restrict the marker to strictly within this day's own rows. At
+        // `dayStartIndex` exactly, the marker would fall right where the day
+        // header already sits — a day boundary, not a live current-time mark —
+        // so it renders as a second, redundant, ambiguous divider. See the
+        // module doc.
+        // Boolean expression, not a visible string.
+        const withinThisDay =
+          markerIndex > dayStartIndex && markerIndex < flatIndex; // i18n-ignore
+        const dayMarkerIndex = withinThisDay ? markerIndex : -1;
+        return (
+          <div key={key} className="space-y-2">
+            <DayHeader label={formatDayLabel(items[0]!.scheduledStart)} />
+            {items.map((m, i) => (
+              <Fragment key={m.id}>
+                {dayStartIndex + i === dayMarkerIndex ? <NowMarker /> : null}
+                <AgendaRow meeting={m} />
+              </Fragment>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function AgendaCardSkeleton() {
+  return (
+    <div className="space-y-2">
+      <div className="h-3 w-16 animate-pulse rounded bg-muted/70" />
+      {Array.from({ length: 2 }).map((_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 rounded-lg border border-border bg-card p-3"
+        >
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="h-4 w-2/5 animate-pulse rounded bg-muted" />
+            <div className="h-3 w-24 animate-pulse rounded bg-muted/70" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/corpus/templates/clips/app/components/meetings/day-grouped-card.tsx

@@ -0,0 +1,113 @@
+/**
+ * <DayGroupedCard /> — the shared day-column shell behind both the Agenda
+ * card and the Past history list. Per @shawnmcclelland's review on #2887:
+ * Past used a bare `DayHeader` label over a flat row list while Agenda used
+ * a bordered card with a day-number column; reusing one shell keeps the two
+ * tabs reading as the same surface instead of two different UI languages.
+ */
+import type { ReactNode } from "react";
+import { Fragment } from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+
+export interface DayParts {
+  dayNumber: string;
+  month: string;
+  weekday: string;
+}
+
+export function dayParts(iso: string): DayParts {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) {
+    return { dayNumber: "", month: "", weekday: "" };
+  }
+  return {
+    dayNumber: d.toLocaleDateString([], { day: "numeric" }),
+    month: d.toLocaleDateString([], { month: "long" }),
+    weekday: d.toLocaleDateString([], { weekday: "short" }),
+  };
+}
+
+/**
+ * Groups items by calendar day (local time) using a caller-supplied ISO
+ * getter, then optionally re-sorts each day's items by `sortWithin` — a group
+ * cannot trust incoming order (see `historyTimestampMs` in the meetings
+ * route), so callers that need a specific within-day order pass it explicitly
+ * rather than assuming the input array was already sorted that way.
+ */
+export function groupByCalendarDay<T>(
+  items: T[],
+  getIso: (item: T) => string,
+  sortWithin?: (a: T, b: T) => number,
+): Array<[string, T[]]> {
+  const groups = new Map<string, T[]>();
+  for (const item of items) {
+    const d = new Date(getIso(item));
+    const iso = getIso(item);
+    const key = Number.isNaN(d.getTime())
+      ? iso
+      : `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+    const list = groups.get(key) ?? [];
+    list.push(item);
+    groups.set(key, list);
+  }
+  if (sortWithin) {
+    for (const list of groups.values()) list.sort(sortWithin);
+  }
+  return Array.from(groups.entries());
+}
+
+export function DayGroupedCard<T extends { id: string }>({
+  groups,
+  getIso,
+  renderRow,
+  markerIndex = -1,
+  renderMarker,
+}: {
+  groups: Array<[string, T[]]>;
+  getIso: (item: T) => string;
+  renderRow: (item: T) => ReactNode;
+  /** Flat index (across all groups) to render `renderMarker` above. -1 = none. */
+  markerIndex?: number;
+  renderMarker?: () => ReactNode;
+}) {
+  let flatIndex = 0;
+  return (
+    <Card>
+      {/* py-4 (not py-3) and a full-width divider, per review feedback that a
+          hairline alone read as one continuous entry rather than separate days. */}
+      <CardContent className="divide-y divide-border p-0">
+        {groups.map(([key, items]) => {
+          const { dayNumber, month, weekday } = dayParts(getIso(items[0]!));
+          const dayStartIndex = flatIndex;
+          flatIndex += items.length;
+          return (
+            <div key={key} className="flex gap-4 px-4 py-4">
+              <div className="w-14 shrink-0">
+                <div className="text-xl font-semibold leading-none tabular-nums text-foreground">
+                  {dayNumber}
+                </div>
+                <div className="mt-1 text-[11px] leading-tight text-muted-foreground">
+                  {month}
+                </div>
+                <div className="text-[11px] leading-tight text-muted-foreground">
+                  {weekday}
+                </div>
+              </div>
+              <div className="min-w-0 flex-1 space-y-2.5">
+                {items.map((item, i) => (
+                  <Fragment key={item.id}>
+                    {renderMarker && dayStartIndex + i === markerIndex
+                      ? renderMarker()
+                      : null}
+                    {renderRow(item)}
+                  </Fragment>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}