@agent-native/core 0.159.2 → 0.159.3

package/corpus/templates/clips/app/components/meetings/meeting-history-row.tsx

@@ -0,0 +1,117 @@
+/**
+ * <MeetingHistoryRow /> — one past meeting, one line.
+ *
+ * Granola renders history as Apple-Notes-style rows: attendee avatars, title,
+ * who was on the call, time. No card border, no summary preview, no
+ * status pills — see `desktop/design-refs/granola-ux.md` §2. Status badges on
+ * every row read as noise at list scale; the meeting detail page is where
+ * transcript/notes state belongs.
+ *
+ * `snippet` replaces the attendee subtitle in search results, where the reason
+ * a row matched is the only thing worth reading.
+ */
+import { useSession } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconFileText } from "@tabler/icons-react";
+import { NavLink } from "react-router";
+
+import { AttendeeStack, type AttendeeStackParticipant } from "./attendee-stack";
+
+export interface MeetingHistoryItem {
+  id: string;
+  title: string;
+  scheduledStart?: string | null;
+  scheduledEnd?: string | null;
+  actualStart?: string | null;
+  actualEnd?: string | null;
+  createdAt?: string | null;
+  participants?: AttendeeStackParticipant[];
+}
+
+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" });
+}
+
+/**
+ * "Elaine" · "Lisa, Cody & 2 others" — Granola's attendee subtitle.
+ *
+ * The viewer is dropped: the subtitle answers "who was I with", and repeating
+ * the reader's own name down every row of their own history says nothing. A
+ * solo note keeps an empty subtitle rather than rendering just the viewer.
+ */
+export function formatParticipantNames(
+  participants: AttendeeStackParticipant[],
+  viewerEmail?: string | null,
+): string {
+  const viewer = viewerEmail?.trim().toLowerCase();
+  const names = participants
+    .filter((p) => !viewer || p.email?.trim().toLowerCase() !== viewer)
+    .map((p) => p.name?.trim() || p.email?.trim().replace(/@.*$/, "") || "")
+    .filter(Boolean);
+  if (names.length === 0) return "";
+  if (names.length <= 2) return names.join(", ");
+  return `${names.slice(0, 2).join(", ")} & ${names.length - 2} others`;
+}
+
+export function MeetingHistoryRow({
+  meeting,
+  snippet,
+}: {
+  meeting: MeetingHistoryItem;
+  snippet?: string | null;
+}) {
+  const t = useT();
+  const { session } = useSession();
+  const participants = meeting.participants ?? [];
+  const subtitle =
+    snippet?.trim() || formatParticipantNames(participants, session?.email);
+  const time = formatTime(
+    meeting.actualStart ?? meeting.scheduledStart ?? meeting.createdAt,
+  );
+
+  return (
+    <NavLink
+      to={`/meetings/${meeting.id}`}
+      className="group flex items-center gap-3 rounded-md px-2 py-2 transition-colors hover:bg-accent/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {participants.length > 0 ? (
+        <AttendeeStack participants={participants} size="md" max={2} />
+      ) : (
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          <IconFileText className="h-3.5 w-3.5" />
+        </span>
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm text-foreground">
+          {meeting.title || t("meetingDetail.untitledMeeting")}
+        </div>
+        {subtitle ? (
+          <div className="truncate text-xs text-muted-foreground">
+            {subtitle}
+          </div>
+        ) : null}
+      </div>
+      {time ? (
+        <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+          {time}
+        </span>
+      ) : null}
+    </NavLink>
+  );
+}
+
+export function MeetingHistoryRowSkeleton() {
+  return (
+    <div className="flex items-center gap-3 px-2 py-2">
+      <div className="h-7 w-7 shrink-0 animate-pulse rounded-md bg-muted" />
+      <div className="min-w-0 flex-1 space-y-1.5">
+        <div className="h-3.5 w-2/5 animate-pulse rounded bg-muted" />
+        <div className="h-3 w-24 animate-pulse rounded bg-muted/70" />
+      </div>
+      <div className="h-3 w-12 animate-pulse rounded bg-muted/70" />
+    </div>
+  );
+}

package/corpus/templates/clips/app/hooks/use-navigation-state.ts

@@ -30,6 +30,7 @@ export interface NavigationState {
   search?: string;
   path?: string;
   meetingId?: string;
+  meetingsTab?: "agenda" | "past";
   dictationId?: string;
 }
 
@@ -60,6 +61,9 @@ interface NavigateCommand extends Partial<NavigationState> {
  *   /embed/:shareId             -> embed
  *   /notifications              -> notifications
  *   /settings[/*]               -> settings
+ *   /meetings                   -> meetings (meetingsTab: agenda)
+ *   /meetings?tab=past          -> meetings (meetingsTab: past)
+ *   /meetings/:meetingId        -> meeting
  */
 export function stateFromLocation(
   pathname: string,
@@ -110,7 +114,13 @@ export function stateFromLocation(
     if (meetingMatch[1]) {
       return { view: "meeting", meetingId: meetingMatch[1] };
     }
-    return { view: "meetings" };
+    // ?tab= is absent on the default Agenda tab, so report it explicitly
+    // rather than leaving the agent to infer which list the user is looking at.
+    return {
+      view: "meetings",
+      meetingsTab: params.get("tab") === "past" ? "past" : "agenda",
+      ...(searchTerm ? { search: searchTerm } : {}),
+    };
   }
 
   // /dictate (optionally /dictate/:dictationId in the future)
@@ -185,7 +195,7 @@ export function pathFromCommand(cmd: NavigateCommand): string {
     case "settings":
       return "/settings";
     case "meetings":
-      return "/meetings";
+      return cmd.meetingsTab === "past" ? "/meetings?tab=past" : "/meetings";
     case "meeting":
       return cmd.meetingId ? `/meetings/${cmd.meetingId}` : "/meetings";
     case "dictate":

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -1580,7 +1580,6 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     transcriptPending: "Transcript pending",
     notesPending: "Notes pending",
     pastRecordings: "Past recordings",
-    loadOlder: "Load older",
     calendarNeedsReconnect:
       "Google Calendar needs to be reconnected to keep showing your upcoming meetings.",
     connectGoogleCalendar: "Connect Google Calendar",
@@ -1607,7 +1606,13 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     title: "Meetings",
     intro:
       "Upcoming calendar meetings and your recorded notes. Start live notes from Clips Desktop at meeting time.",
-    searchPlaceholder: "Search meetings...",
+    agendaTab: "Agenda",
+    pastTab: "Past",
+    now: "Now",
+    noPastMeetings: "No past meetings yet",
+    loadOlder: "Load older",
+    searchFailed: "Couldn't search meetings. Try again in a moment.",
+    searchPlaceholder: "Search meetings, attendees, and transcripts...",
     clearSearch: "Clear search",
     noMeetingsYet: "No meetings yet",
     noMeetingsDescription: