@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -1,4 +1,8 @@
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconArrowLeft,
   IconCheck,
@@ -62,10 +66,11 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useDesktopPromo } from "@/hooks/use-desktop-promo";
+import enMessages from "@/i18n/en-US";
 import { cn } from "@/lib/utils";
 
 export function meta() {
-  return [{ title: "Meeting · Clips" }];
+  return [{ title: enMessages.meetingDetailRoute.pageTitle }];
 }
 
 interface ActionItem {
@@ -136,6 +141,7 @@ function TitleEditor({
   compact?: boolean;
   readOnly?: boolean;
 }) {
+  const t = useT();
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -155,7 +161,9 @@ function TitleEditor({
 
   if (readOnly) {
     return (
-      <h1 className={cn(textCls, "min-w-0")}>{value || "Untitled meeting"}</h1>
+      <h1 className={cn(textCls, "min-w-0")}>
+        {value || t("meetingDetail.untitledMeeting")}
+      </h1>
     );
   }
 
@@ -166,7 +174,9 @@ function TitleEditor({
         onClick={() => setEditing(true)}
         className="group flex min-w-0 items-center gap-2 text-left cursor-pointer"
       >
-        <h1 className={textCls}>{value || "Untitled meeting"}</h1>
+        <h1 className={textCls}>
+          {value || t("meetingDetail.untitledMeeting")}
+        </h1>
         <IconEdit
           className={cn(
             editIconCls,
@@ -302,6 +312,7 @@ function ActionItemsByPerson({
 }
 
 export default function MeetingDetailRoute() {
+  const t = useT();
   const { meetingId } = useParams<{ meetingId: string }>();
   const navigate = useNavigate();
   const qc = useQueryClient();
@@ -484,7 +495,7 @@ export default function MeetingDetailRoute() {
     // regeneration; only the AI summary/bullets are overwritten. Reassure
     // the user their own notes are kept.
     if (hasNotes) {
-      toast.info("Regenerating notes — your own notes are kept");
+      toast.info(t("meetingDetail.regeneratingNotes"));
     }
     autoFinalizedRef.current = true;
     finalize.mutate({ meetingId: meeting.id });
@@ -496,13 +507,15 @@ export default function MeetingDetailRoute() {
       { id: meeting.id },
       {
         onSuccess: () => {
-          toast.success("Meeting removed");
+          toast.success(t("meetingDetail.meetingRemoved"));
           qc.invalidateQueries({ queryKey: ["action", "list-meetings"] });
           navigate("/meetings", { replace: true });
         },
         onError: (err: unknown) => {
           toast.error(
-            err instanceof Error ? err.message : "Couldn't remove meeting",
+            err instanceof Error
+              ? err.message
+              : t("meetingDetail.couldNotRemoveMeeting"),
           );
         },
       },
@@ -549,7 +562,7 @@ export default function MeetingDetailRoute() {
     return (
       <div className="p-6 max-w-2xl mx-auto w-full">
         <div className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
-          Couldn't load this meeting.
+          {t("meetingDetail.couldNotLoadMeeting")}
         </div>
       </div>
     );
@@ -571,10 +584,10 @@ export default function MeetingDetailRoute() {
     try {
       await navigator.clipboard.writeText(text);
       setTranscriptCopied(true);
-      toast.success("Transcript copied");
+      toast.success(t("meetingDetail.transcriptCopied"));
       setTimeout(() => setTranscriptCopied(false), 1500);
     } catch {
-      toast.error("Couldn't copy transcript");
+      toast.error(t("meetingDetail.couldNotCopyTranscript"));
     }
   };
 
@@ -585,13 +598,13 @@ export default function MeetingDetailRoute() {
           <TooltipTrigger asChild>
             <NavLink
               to="/meetings"
-              aria-label="All meetings"
+              aria-label={t("meetingDetail.allMeetings")}
               className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50"
             >
               <IconArrowLeft className="h-4 w-4" />
             </NavLink>
           </TooltipTrigger>
-          <TooltipContent>All meetings</TooltipContent>
+          <TooltipContent>{t("meetingDetail.allMeetings")}</TooltipContent>
         </Tooltip>
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <TitleEditor
@@ -617,7 +630,7 @@ export default function MeetingDetailRoute() {
           {!canEdit ? null : finalize.isPending ? (
             <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
               <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-              Generating notes…
+              {t("meetingDetail.generatingNotesInline")}
             </span>
           ) : hasNotes ? (
             <Button
@@ -626,7 +639,7 @@ export default function MeetingDetailRoute() {
               onClick={handleFinalize}
               className="cursor-pointer h-8"
             >
-              Regenerate notes
+              {t("meetingDetail.regenerateNotes")}
             </Button>
           ) : null}
           <ShareMeetingPopover
@@ -635,7 +648,7 @@ export default function MeetingDetailRoute() {
           >
             <Button size="sm" className="shrink-0 gap-1.5">
               <IconShare3 className="h-4 w-4" />
-              Share
+              {t("meetingDetail.share")}
             </Button>
           </ShareMeetingPopover>
           {canEdit && (
@@ -646,7 +659,7 @@ export default function MeetingDetailRoute() {
                     size="icon"
                     variant="ghost"
                     className="h-8 w-8 cursor-pointer"
-                    aria-label="Meeting options"
+                    aria-label={t("meetingDetail.meetingOptions")}
                   >
                     <IconDots className="h-4 w-4" />
                   </Button>
@@ -660,16 +673,17 @@ export default function MeetingDetailRoute() {
                     className="text-destructive focus:text-destructive"
                   >
                     <IconTrash className="mr-2 h-4 w-4" />
-                    Remove meeting
+                    {t("meetingDetail.removeMeeting")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Remove this meeting?</AlertDialogTitle>
+                  <AlertDialogTitle>
+                    {t("meetingDetail.removeThisMeeting")}
+                  </AlertDialogTitle>
                   <AlertDialogDescription>
-                    This removes the meeting from Clips. It will not delete any
-                    linked transcript or change your Google Calendar.
+                    {t("meetingDetail.removeDescription")}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -684,7 +698,9 @@ export default function MeetingDetailRoute() {
                     disabled={deleteMeeting.isPending}
                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                   >
-                    {deleteMeeting.isPending ? "Removing..." : "Remove"}
+                    {deleteMeeting.isPending
+                      ? t("meetingDetail.removing")
+                      : t("meetingDetail.remove")}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
@@ -696,10 +712,7 @@ export default function MeetingDetailRoute() {
       {showDesktopRecordHint && (
         <div className="mb-4 flex flex-wrap items-center gap-3 rounded-md border border-border bg-accent/20 px-3 py-2.5">
           <IconDeviceDesktop className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="text-sm">
-            Record live notes for this meeting from the Clips desktop app — the
-            transcript and AI notes will appear here automatically.
-          </span>
+          <span className="text-sm">{t("meetingDetail.desktopHint")}</span>
           {!isDesktopApp && (
             <CaptureInstallButton
               size="sm"
@@ -707,7 +720,7 @@ export default function MeetingDetailRoute() {
               className="ml-auto h-8 gap-1.5 cursor-pointer"
             >
               <IconExternalLink className="h-3.5 w-3.5" />
-              Get desktop app
+              {t("meetingDetail.getDesktopApp")}
             </CaptureInstallButton>
           )}
         </div>
@@ -716,7 +729,7 @@ export default function MeetingDetailRoute() {
       {finalize.isError && (
         <div className="mb-4 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
           {(finalize.error as Error)?.message ||
-            "Couldn't generate notes. Try again."}
+            t("meetingDetail.generateNotesFailed")}
         </div>
       )}
 
@@ -747,7 +760,7 @@ export default function MeetingDetailRoute() {
             className="inline-flex items-center gap-1.5 rounded border border-border px-2 py-0.5 hover:text-foreground hover:bg-accent/40 cursor-pointer"
           >
             <IconExternalLink className="h-3.5 w-3.5" />
-            Join call
+            {t("meetingDetail.joinCall")}
           </a>
         )}
       </div>
@@ -770,20 +783,20 @@ export default function MeetingDetailRoute() {
                   value="notes"
                   className="h-7 px-2.5 text-xs data-[state=active]:bg-muted"
                 >
-                  My notes
+                  {t("meetingDetail.myNotes")}
                 </TabsTrigger>
                 <TabsTrigger
                   value="ai"
                   className="h-7 gap-1 px-2.5 text-xs data-[state=active]:bg-muted"
                 >
                   <IconWand className="h-3 w-3" />
-                  AI notes
+                  {t("meetingDetail.aiNotes")}
                 </TabsTrigger>
                 <TabsTrigger
                   value="actions"
                   className="h-7 px-2.5 text-xs data-[state=active]:bg-muted"
                 >
-                  Action items
+                  {t("meetingDetail.actionItems")}
                   {actionItems.length > 0 && (
                     <span className="ml-1 text-muted-foreground">
                       {actionItems.length}
@@ -794,7 +807,7 @@ export default function MeetingDetailRoute() {
               {finalize.isPending && (
                 <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
                   <IconLoader2 className="h-3 w-3 animate-spin" />
-                  Working…
+                  {t("meetingDetail.working")}
                 </span>
               )}
             </div>
@@ -848,8 +861,7 @@ export default function MeetingDetailRoute() {
                 />
               ) : (
                 <p className="text-sm leading-relaxed text-muted-foreground/50 italic">
-                  No action items yet. They appear here after notes are
-                  generated from a transcript.
+                  {t("meetingDetail.noActionItems")}
                 </p>
               )}
             </TabsContent>
@@ -861,12 +873,14 @@ export default function MeetingDetailRoute() {
           <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-4 py-2.5 bg-background">
             <div className="flex items-center gap-1.5 text-xs font-medium">
               <IconNotes className="h-3.5 w-3.5" />
-              Transcript
+              {t("meetingDetail.transcript")}
             </div>
             <div className="flex items-center gap-2">
               {meeting.transcriptStatus === "ready" && (
                 <span className="text-[10px] text-muted-foreground">
-                  {segments.length} segments
+                  {t("meetingDetail.segments", {
+                    count: segments.length,
+                  })}
                 </span>
               )}
               {segments.length > 0 && (
@@ -876,7 +890,7 @@ export default function MeetingDetailRoute() {
                       size="icon"
                       variant="ghost"
                       className="h-7 w-7 cursor-pointer"
-                      aria-label="Copy transcript"
+                      aria-label={t("meetingDetail.copyTranscript")}
                       onClick={handleCopyTranscript}
                     >
                       {transcriptCopied ? (
@@ -886,7 +900,9 @@ export default function MeetingDetailRoute() {
                       )}
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>Copy full transcript</TooltipContent>
+                  <TooltipContent>
+                    {t("meetingDetail.copyFullTranscript")}
+                  </TooltipContent>
                 </Tooltip>
               )}
             </div>

package/corpus/templates/clips/app/routes/_app.meetings._index.tsx

@@ -1,4 +1,8 @@
-import { agentNativePath, useActionQuery } from "@agent-native/core/client";
+import {
+  agentNativePath,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconAlertTriangle,
   IconAppWindow,
@@ -47,9 +51,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { useDesktopPromo } from "@/hooks/use-desktop-promo";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Meetings · Clips" }];
+  return [{ title: enMessages.meetingsRoute.pageTitle }];
 }
 
 interface Meeting {
@@ -230,6 +235,7 @@ function hasGeneratedNotes(meeting: Meeting): boolean {
 }
 
 function RecordedMeetingRow({ meeting }: { meeting: Meeting }) {
+  const t = useT();
   const preview = buildPreview(meeting);
   const transcriptReady = meeting.transcriptStatus === "ready";
   const notesReady = hasGeneratedNotes(meeting);
@@ -262,7 +268,7 @@ function RecordedMeetingRow({ meeting }: { meeting: Meeting }) {
             </span>
           ) : (
             <span className="rounded border border-border px-1.5 py-0.5">
-              Transcript pending
+              {t("meetingsRoute.transcriptPending")}
             </span>
           )}
           {notesReady ? (
@@ -272,7 +278,7 @@ function RecordedMeetingRow({ meeting }: { meeting: Meeting }) {
             </span>
           ) : (
             <span className="rounded border border-border px-1.5 py-0.5">
-              Notes pending
+              {t("meetingsRoute.notesPending")}
             </span>
           )}
         </div>
@@ -282,12 +288,13 @@ function RecordedMeetingRow({ meeting }: { meeting: Meeting }) {
 }
 
 function RecordedMeetingsList({ meetings }: { meetings: Meeting[] }) {
+  const t = useT();
   if (meetings.length === 0) return null;
   const groups = groupByDay(meetings);
   return (
     <section className="space-y-4">
       <h2 className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground/80 px-1">
-        Past recordings
+        {t("meetingsRoute.pastRecordings")}
       </h2>
       {groups.map(([day, items]) => (
         <div key={day} className="space-y-2">
@@ -341,12 +348,12 @@ function UpcomingMeetingsLoading() {
 }
 
 function CalendarReauthBanner({ onReconnect }: { onReconnect: () => void }) {
+  const t = useT();
   return (
     <div className="mb-6 flex flex-wrap items-center gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2.5 text-sm text-amber-700 dark:text-amber-300">
       <IconAlertTriangle className="h-4 w-4 shrink-0" />
       <span className="min-w-0 flex-1">
-        Google Calendar needs to be reconnected to keep showing your upcoming
-        meetings.
+        {t("meetingsRoute.calendarNeedsReconnect")}
       </span>
       <Button
         size="sm"
@@ -426,6 +433,7 @@ function ConnectCalendarEmptyState({
 }: {
   onConnected?: () => void | Promise<void>;
 }) {
+  const t = useT();
   return (
     <div className="max-w-xl mx-auto mt-12">
       <div className="rounded-lg border border-border overflow-hidden">
@@ -435,15 +443,14 @@ function ConnectCalendarEmptyState({
           </div>
           <div className="flex-1 min-w-0">
             <div className="text-sm font-semibold text-foreground">
-              Connect Google Calendar
+              {t("meetingsRoute.connectGoogleCalendar")}
             </div>
             <p className="mt-0.5 text-xs text-muted-foreground leading-relaxed">
-              Get a desktop reminder when meetings start so recorded notes land
-              in this history automatically.
+              {t("meetingsRoute.desktopReminder")}
             </p>
             <div className="mt-3">
               <CalendarConnectionAction
-                label="Connect Google Calendar"
+                label={t("meetingsRoute.connectGoogleCalendar")}
                 onConnected={onConnected}
               />
             </div>
@@ -463,6 +470,7 @@ function CalendarAccountMenu({
   onConnected?: () => void | Promise<void>;
   onDisconnected?: () => void;
 }) {
+  const t = useT();
   const [connectPending, setConnectPending] = useState(false);
   const [disconnectingId, setDisconnectingId] = useState<string | null>(null);
   const [disconnectTarget, setDisconnectTarget] =
@@ -496,7 +504,7 @@ function CalendarAccountMenu({
     setDisconnectingId(disconnectTarget.id);
     try {
       await requestDisconnectCalendar(disconnectTarget.id);
-      toast.success("Calendar disconnected");
+      toast.success(t("meetingsRoute.calendarDisconnected"));
       setDisconnectTarget(null);
       onDisconnected?.();
     } catch (err) {
@@ -521,7 +529,7 @@ function CalendarAccountMenu({
             size="sm"
             variant="outline"
             className="h-8 shrink-0 gap-1.5 cursor-pointer"
-            aria-label="Calendar settings"
+            aria-label={t("meetingsRoute.calendarSettings")}
           >
             <IconSettings className="h-4 w-4" />
             Calendar
@@ -545,7 +553,7 @@ function CalendarAccountMenu({
                 <div>{statusText}</div>
               </>
             ) : (
-              "Connect Google Calendar for meeting reminders."
+              t("meetingsRoute.connectCalendarReminder")
             )}
           </div>
           <DropdownMenuSeparator />
@@ -585,7 +593,9 @@ function CalendarAccountMenu({
       </DropdownMenu>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Disconnect Google Calendar?</AlertDialogTitle>
+          <AlertDialogTitle>
+            {t("meetingsRoute.disconnectGoogleCalendarTitle")}
+          </AlertDialogTitle>
           <AlertDialogDescription>
             Clips will stop reading events from{" "}
             {disconnectTarget
@@ -629,11 +639,12 @@ function MeetingsHeader({
   onConnected?: () => void | Promise<void>;
   onDisconnected?: () => void;
 }) {
+  const t = useT();
   return (
     <>
       <PageHeader>
         <h1 className="text-base font-semibold tracking-tight truncate">
-          Meetings
+          {t("meetingsRoute.title")}
         </h1>
         <div className="ms-auto flex items-center gap-2">
           <CalendarAccountMenu
@@ -646,14 +657,14 @@ function MeetingsHeader({
       <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div className="min-w-0 flex-1 space-y-4">
           <p className="text-sm text-muted-foreground">
-            Upcoming calendar meetings and your recorded notes.
+            {t("meetingsRoute.intro")}
           </p>
           <div className="relative max-w-sm">
             <IconSearch className="absolute start-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
             <Input
               value={query}
               onChange={(e) => onQueryChange(e.target.value)}
-              placeholder="Search meetings..."
+              placeholder={t("meetingsRoute.searchPlaceholder")}
               className="ps-8 pe-8 h-9 text-sm"
             />
             {query && (
@@ -661,7 +672,7 @@ function MeetingsHeader({
                 type="button"
                 onClick={() => onQueryChange("")}
                 className="absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground cursor-pointer"
-                aria-label="Clear search"
+                aria-label={t("meetingsRoute.clearSearch")}
               >
                 <IconX className="h-3.5 w-3.5" />
               </button>
@@ -676,10 +687,10 @@ function MeetingsHeader({
               className="h-8 w-fit gap-1.5 cursor-pointer"
             >
               <IconAppWindow className="h-4 w-4" />
-              Get desktop app
+              {t("meetingsRoute.getDesktopApp")}
             </CaptureInstallButton>
             <p className="max-w-56 text-[11px] leading-snug text-muted-foreground">
-              Required for meeting reminders and transcription.
+              {t("meetingsRoute.requiredForReminders")}
             </p>
           </div>
         )}
@@ -700,6 +711,7 @@ function meetingMatches(m: Meeting, q: string): boolean {
 }
 
 export default function MeetingsIndexRoute() {
+  const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const initialQ = searchParams.get("q") ?? "";
   const [query, setQuery] = useState(initialQ);
@@ -790,7 +802,7 @@ export default function MeetingsIndexRoute() {
         await new Promise((resolve) => window.setTimeout(resolve, 500));
       }
       await meetingsQuery.refetch();
-      if (connected) toast.success("Calendar connected");
+      if (connected) toast.success(t("meetingsRoute.calendarConnected"));
     } catch (err) {
       toast.error(
         err instanceof Error ? err.message : "Couldn't refresh your calendar",
@@ -887,7 +899,7 @@ export default function MeetingsIndexRoute() {
       <>
         <PageHeader>
           <h1 className="text-base font-semibold tracking-tight truncate">
-            Meetings
+            {t("meetingsRoute.title")}
           </h1>
         </PageHeader>
         <div className="p-6 max-w-6xl mx-auto w-full">
@@ -910,7 +922,7 @@ export default function MeetingsIndexRoute() {
       <>
         <PageHeader>
           <h1 className="text-base font-semibold tracking-tight truncate">
-            Meetings
+            {t("meetingsRoute.title")}
           </h1>
         </PageHeader>
         <div className="p-6 max-w-2xl mx-auto w-full">
@@ -966,18 +978,17 @@ export default function MeetingsIndexRoute() {
         <div className="rounded-lg border border-dashed border-border bg-accent/20 px-6 py-16 text-center">
           <IconCalendar className="h-10 w-10 text-muted-foreground/50 mx-auto" />
           <p className="mt-3 text-sm text-foreground font-medium">
-            No meetings yet
+            {t("meetingsRoute.noMeetingsYet")}
           </p>
           <p className="mt-1 text-xs text-muted-foreground">
-            Upcoming calendar meetings show up here, and finished recordings
-            land here once you take notes.
+            {t("meetingsRoute.noMeetingsDescription")}
           </p>
         </div>
       ) : noSearchMatches ? (
         <div className="rounded-lg border border-dashed border-border bg-accent/20 px-6 py-12 text-center">
           <IconSearch className="h-7 w-7 text-muted-foreground/50 mx-auto" />
           <p className="mt-2 text-sm text-foreground">
-            No meetings match "{debouncedQuery}"
+            {t("meetingsRoute.noMeetingsMatch", { query: debouncedQuery })}
           </p>
           <Button
             variant="ghost"
@@ -985,7 +996,7 @@ export default function MeetingsIndexRoute() {
             onClick={() => setQuery("")}
             className="mt-2 cursor-pointer"
           >
-            Clear search
+            {t("meetingsRoute.clearSearch")}
           </Button>
         </div>
       ) : (
@@ -1002,7 +1013,7 @@ export default function MeetingsIndexRoute() {
       {(meetingsQuery.isFetching || upcomingQuery.isFetching) && !isLoading && (
         <div className="flex items-center justify-center mt-6 text-xs text-muted-foreground gap-1.5">
           <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-          Refreshing…
+          {t("meetingsRoute.refreshing")}
         </div>
       )}
     </div>