@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -1,3 +1,4 @@
+import { useFormatters, useT } from "@agent-native/core/client";
 import {
   IconDots,
   IconLock,
@@ -8,6 +9,7 @@ import {
   IconFolder,
   IconArchive,
   IconTrash,
+  IconEdit,
   IconCheck,
   IconAlertTriangle,
 } from "@tabler/icons-react";
@@ -36,21 +38,6 @@ function formatDuration(ms: number): string {
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
-function formatRelative(iso: string): string {
-  const date = new Date(iso);
-  const now = Date.now();
-  const diff = (date.getTime() - now) / 1000;
-  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  const abs = Math.abs(diff);
-  if (abs < 60) return rtf.format(Math.round(diff), "second");
-  if (abs < 3600) return rtf.format(Math.round(diff / 60), "minute");
-  if (abs < 86400) return rtf.format(Math.round(diff / 3600), "hour");
-  if (abs < 604800) return rtf.format(Math.round(diff / 86400), "day");
-  if (abs < 2629800) return rtf.format(Math.round(diff / 604800), "week");
-  if (abs < 31557600) return rtf.format(Math.round(diff / 2629800), "month");
-  return rtf.format(Math.round(diff / 31557600), "year");
-}
-
 function PrivacyIcon({
   visibility,
   className,
@@ -72,8 +59,10 @@ interface RecordingCardProps {
   onToggleSelect?: (id: string) => void;
   onShare?: (rec: RecordingSummary) => void;
   onMove?: (rec: RecordingSummary) => void;
+  onRename?: (rec: RecordingSummary) => void;
   onArchive?: (rec: RecordingSummary) => void;
   onTrash?: (rec: RecordingSummary) => void;
+  canRenameTitle?: boolean;
 }
 
 export function RecordingCard({
@@ -83,20 +72,31 @@ export function RecordingCard({
   onToggleSelect,
   onShare,
   onMove,
+  onRename,
   onArchive,
   onTrash,
+  canRenameTitle = false,
 }: RecordingCardProps) {
   const navigate = useNavigate();
+  const t = useT();
+  const { formatDate, formatRelativeTime } = useFormatters();
   const [hovered, setHovered] = useState(false);
 
   const duration = useMemo(
     () => formatDuration(recording.durationMs),
     [recording.durationMs],
   );
-  const relative = useMemo(
-    () => formatRelative(recording.createdAt),
-    [recording.createdAt],
-  );
+  const relative = useMemo(() => {
+    const date = new Date(recording.createdAt);
+    const diff = (date.getTime() - Date.now()) / 1000;
+    const abs = Math.abs(diff);
+    if (abs < 60) return formatRelativeTime(Math.round(diff), "second");
+    if (abs < 3600) return formatRelativeTime(Math.round(diff / 60), "minute");
+    if (abs < 86400) return formatRelativeTime(Math.round(diff / 3600), "hour");
+    if (abs < 604800)
+      return formatRelativeTime(Math.round(diff / 86400), "day");
+    return formatDate(date);
+  }, [formatDate, formatRelativeTime, recording.createdAt]);
   const waitingForStorage = isStorageSetupFailureReason(
     recording.failureReason,
   );
@@ -225,17 +225,18 @@ export function RecordingCard({
               <div className="min-w-0 flex-1">
                 <div className="text-[11px] font-medium text-foreground">
                   {waitingForStorage
-                    ? "Waiting for storage"
+                    ? t("clipsFinalRaw.waitingForStorage")
                     : nativeUploadPaused
-                      ? "Saved locally"
-                      : "Upload failed"}
+                      ? t("clipsFinalRaw.savedLocally")
+                      : t("clipsFinalRaw.uploadFailed")}
                 </div>
                 <div className="line-clamp-2 text-[10px] leading-snug text-muted-foreground">
                   {waitingForStorage
-                    ? "Open to connect storage and finish saving."
+                    ? t("clipsFinalRaw.connectStorageToFinish")
                     : nativeUploadPaused
-                      ? "Retry from the Clips menu; no need to re-record."
-                      : (recording.failureReason ?? "Remove this failed clip.")}
+                      ? t("clipsFinalRaw.retryFromClipsMenu")
+                      : (recording.failureReason ??
+                        t("clipsFinalRaw.removeFailedClip"))}
                 </div>
               </div>
               {!waitingForStorage && (
@@ -244,7 +245,7 @@ export function RecordingCard({
                   onClick={handleRemoveFailed}
                   className="rounded border border-border px-1.5 py-0.5 text-[10px] text-foreground hover:bg-accent"
                 >
-                  Remove
+                  {t("clipsFinalRaw.remove")}
                 </button>
               )}
             </div>
@@ -259,9 +260,10 @@ export function RecordingCard({
             <EditableRecordingTitle
               recordingId={recording.id}
               title={recording.title}
+              canEdit={canRenameTitle}
               displayTitle={
                 isDefaultTitle(recording.title)
-                  ? "Untitled Clip"
+                  ? t("editableTitle.untitled")
                   : recording.title
               }
               showPendingSkeleton={isDefaultTitle(recording.title)}
@@ -277,7 +279,9 @@ export function RecordingCard({
               <span className="capitalize">{recording.visibility}</span>
               <span>•</span>
               <span>
-                {recording.viewCount} view{recording.viewCount === 1 ? "" : "s"}
+                {t("clipsFinalRaw.viewsCount", {
+                  count: recording.viewCount,
+                })}
               </span>
               <span>•</span>
               <span>{relative}</span>
@@ -288,7 +292,7 @@ export function RecordingCard({
             <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
               <button
                 className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-                aria-label="Recording menu"
+                aria-label={t("clipsFinalRaw.recordingMenu")}
               >
                 <IconDots className="h-4 w-4" />
               </button>
@@ -298,26 +302,39 @@ export function RecordingCard({
               onClick={(e) => e.stopPropagation()}
             >
               <DropdownMenuItem onSelect={() => onShare?.(recording)}>
-                <IconShare className="h-4 w-4 me-2" /> Share
+                <IconShare className="h-4 w-4 me-2" />{" "}
+                {t("recordingPage.share")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => onMove?.(recording)}>
-                <IconFolder className="h-4 w-4 me-2" /> Move to folder
+                <IconFolder className="h-4 w-4 me-2" />{" "}
+                {t("clipsFinalRaw.moveToFolder")}
               </DropdownMenuItem>
+              {onRename ? (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onSelect={() => onRename(recording)}>
+                    <IconEdit className="h-4 w-4 me-2" />{" "}
+                    {t("folderTree.rename")}
+                  </DropdownMenuItem>
+                </>
+              ) : null}
               <DropdownMenuSeparator />
               {recording.archivedAt ? (
                 <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconCheck className="h-4 w-4 me-2" /> Unarchive
+                  <IconCheck className="h-4 w-4 me-2" />{" "}
+                  {t("clipsFinalRaw.unarchive")}
                 </DropdownMenuItem>
               ) : (
                 <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconArchive className="h-4 w-4 me-2" /> Archive
+                  <IconArchive className="h-4 w-4 me-2" />{" "}
+                  {t("navigation.archive")}
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem
                 onSelect={() => onTrash?.(recording)}
                 className="text-destructive focus:text-destructive"
               >
-                <IconTrash className="h-4 w-4 me-2" /> Delete
+                <IconTrash className="h-4 w-4 me-2" /> {t("folderTree.delete")}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconClock, IconSearch, IconX } from "@tabler/icons-react";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
@@ -44,22 +45,23 @@ interface SearchBarProps {
   className?: string;
 }
 
-function matchLabel(hit: SearchHit): string {
+function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
   switch (hit.matchType) {
     case "title-transcript":
-      return "Title + transcript";
+      return t("searchBar.titleTranscript");
     case "title-comment":
-      return "Title + comment";
+      return t("searchBar.titleComment");
     case "transcript":
-      return "Transcript";
+      return t("searchBar.transcript");
     case "comment":
-      return "Comment";
+      return t("searchBar.comment");
     default:
-      return "Title or description";
+      return t("searchBar.titleOrDescription");
   }
 }
 
 export function SearchBar({ className }: SearchBarProps) {
+  const t = useT();
   const navigate = useNavigate();
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
@@ -128,12 +130,12 @@ export function SearchBar({ className }: SearchBarProps) {
                 setOpen(true);
               }}
               onFocus={() => setOpen(true)}
-              placeholder="Search recordings…"
+              placeholder={t("searchBar.placeholder")}
               className="w-full h-8 rounded-md border border-border bg-background ps-8 pe-12 text-xs outline-none focus:ring-2 focus:ring-primary/30"
             />
             {query ? (
               <button
-                aria-label="Clear search"
+                aria-label={t("searchBar.clear")}
                 onClick={() => {
                   setQuery("");
                   inputRef.current?.focus();
@@ -159,12 +161,13 @@ export function SearchBar({ className }: SearchBarProps) {
         >
           {isFetching && results.length === 0 && (
             <div className="p-4 text-center text-xs text-muted-foreground">
-              Searching…
+              {t("searchBar.searching")}
             </div>
           )}
           {!isFetching && results.length === 0 && (
             <div className="p-4 text-center text-xs text-muted-foreground">
-              No matches for <span className="font-medium">{query}</span>
+              {t("searchBar.noMatchesFor")}{" "}
+              <span className="font-medium">{query}</span>
             </div>
           )}
           {results.length > 0 && (
@@ -198,7 +201,7 @@ export function SearchBar({ className }: SearchBarProps) {
                     )}
                     <div className="mt-1 flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
                       <span className="uppercase tracking-wide">
-                        {matchLabel(hit)}
+                        {matchLabel(hit, t)}
                       </span>
                       {typeof hit.matchMs === "number" ? (
                         <>

package/corpus/templates/clips/app/components/meetings/auto-record-prompt.tsx

@@ -14,6 +14,7 @@
  * The banner does not auto-start when the user has manually dismissed it.
  */
 
+import { useT } from "@agent-native/core/client";
 import { IconClock, IconPlayerPlayFilled, IconX } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 
@@ -39,6 +40,7 @@ export function AutoRecordPrompt({
   onDismiss,
   disabled = false,
 }: AutoRecordPromptProps) {
+  const t = useT();
   const [dismissed, setDismissed] = useState(false);
   const [autoFired, setAutoFired] = useState(false);
   const [graceRemaining, setGraceRemaining] = useState(0);
@@ -88,13 +90,15 @@ export function AutoRecordPrompt({
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-60" />
           <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500" />
         </span>
-        <span className="text-sm">Notes started.</span>
+        <span className="text-sm">{t("autoRecordPrompt.notesStarted")}</span>
         <button
           type="button"
           onClick={cancel}
           className="ml-auto text-xs text-muted-foreground hover:text-foreground underline cursor-pointer"
         >
-          Cancel ({graceRemaining}s)
+          {t("autoRecordPrompt.cancelWithSeconds", {
+            count: graceRemaining,
+          })}
         </button>
       </div>
     );
@@ -112,10 +116,10 @@ export function AutoRecordPrompt({
     >
       <IconClock className="h-4 w-4 shrink-0 text-primary" />
       <span className="text-sm font-medium">
-        It's time for this meeting — start notes?
+        {t("autoRecordPrompt.startNotesQuestion")}
       </span>
       <span className="text-xs text-muted-foreground">
-        Auto-starts in {secondsRemaining}s
+        {t("autoRecordPrompt.autoStartsIn", { count: secondsRemaining })}
       </span>
       <div className="ml-auto flex items-center gap-2">
         <Button
@@ -127,12 +131,12 @@ export function AutoRecordPrompt({
           className="cursor-pointer h-8 gap-1.5"
         >
           <IconPlayerPlayFilled className="h-3.5 w-3.5" />
-          Start notes
+          {t("autoRecordPrompt.startNotes")}
         </Button>
         <button
           type="button"
           onClick={handleDismiss}
-          aria-label="Dismiss"
+          aria-label={t("autoRecordPrompt.dismiss")}
           className="flex h-7 w-7 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50 cursor-pointer"
         >
           <IconX className="h-3.5 w-3.5" />

package/corpus/templates/clips/app/components/meetings/canvas-editor.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconWand } from "@tabler/icons-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
@@ -51,6 +52,7 @@ export function CanvasEditor({
   renderBullet,
   readOnly = false,
 }: CanvasEditorProps) {
+  const t = useT();
   const showUser = view === "user";
   const showAi = view === "ai";
   const hasAi = summaryMd || bullets.length > 0;
@@ -83,7 +85,7 @@ export function CanvasEditor({
       {/* Empty state when AI notes haven't been generated yet */}
       {showAi && !hasAi && (
         <p className="text-sm leading-relaxed text-muted-foreground/50 italic">
-          No AI notes yet. Generate notes from a finished transcript.
+          {t("meetingCanvas.noAiNotes")}
         </p>
       )}
     </div>
@@ -101,6 +103,7 @@ function UserNotesBlock({
   onChange: (next: string) => void;
   readOnly?: boolean;
 }) {
+  const t = useT();
   const ref = useRef<HTMLTextAreaElement>(null);
   const [draft, setDraft] = useState(value);
   const focusedRef = useRef(false);
@@ -120,7 +123,7 @@ function UserNotesBlock({
       </p>
     ) : (
       <p className="text-sm leading-relaxed text-muted-foreground/50 italic">
-        No notes.
+        {t("meetingCanvas.noNotes")}
       </p>
     );
   }
@@ -129,7 +132,7 @@ function UserNotesBlock({
     <Textarea
       ref={ref}
       value={draft}
-      placeholder="Your notes…"
+      placeholder={t("meetingCanvas.yourNotes")}
       onChange={(e) => setDraft(e.target.value)}
       onFocus={() => {
         focusedRef.current = true;
@@ -154,6 +157,7 @@ function AiSummaryBlock({
   onChange: (next: string) => void;
   readOnly?: boolean;
 }) {
+  const t = useT();
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -238,7 +242,7 @@ function AiSummaryBlock({
               </p>
             </button>
           </TooltipTrigger>
-          <TooltipContent>Click to edit</TooltipContent>
+          <TooltipContent>{t("meetingCanvas.clickToEdit")}</TooltipContent>
         </Tooltip>
       </div>
     </TooltipProvider>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconCheck,
   IconClock,
@@ -40,6 +41,8 @@ export interface MeetingCardData {
   participants?: AttendeeStackParticipant[];
 }
 
+type Translate = (key: string, params?: Record<string, unknown>) => string;
+
 function formatTime(iso?: string | null): string {
   if (!iso) return "";
   try {
@@ -66,6 +69,7 @@ function buildPreview(m: MeetingCardData): string | null {
 }
 
 export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
+  const t = useT();
   const isLive = !!(
     (meeting.actualStart && !meeting.actualEnd) ||
     meeting.transcriptStatus === "in_progress"
@@ -99,7 +103,7 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
         <CardContent className="p-4 space-y-2.5">
           <div className="flex items-start justify-between gap-2">
             <h3 className="text-sm font-medium leading-snug line-clamp-2 flex-1 text-foreground">
-              {meeting.title || "Untitled meeting"}
+              {meeting.title || t("meetingDetail.untitledMeeting")}
             </h3>
             <div className="flex items-center gap-1 shrink-0">
               {isLive ? (
@@ -111,7 +115,7 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
                     <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-60" />
                     <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-red-500" />
                   </span>
-                  Live
+                  {t("meetingCard.live")}
                 </Badge>
               ) : transcriptReady ? (
                 <Badge
@@ -119,14 +123,14 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
                   className="bg-emerald-500/10 text-emerald-600 border-emerald-500/20 text-[10px] gap-1 px-1.5"
                 >
                   <IconCheck className="h-3 w-3" />
-                  Transcript
+                  {t("meetingCard.transcript")}
                 </Badge>
               ) : null}
               {hasNotes && !isLive && (
                 <Badge
                   variant="secondary"
                   className="bg-amber-500/10 text-amber-700 border-amber-500/20 text-[10px] gap-1 px-1.5"
-                  title="AI notes ready"
+                  title={t("meetingCard.aiNotesReady")}
                 >
                   <IconNotes className="h-3 w-3" />
                 </Badge>
@@ -148,7 +152,7 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
             </p>
           ) : shouldShowMissingSummary ? (
             <p className="text-xs text-muted-foreground/60 italic leading-relaxed">
-              No summary yet
+              {t("meetingCard.noSummary")}
             </p>
           ) : null}
 
@@ -160,7 +164,7 @@ export function MeetingCard({ meeting }: { meeting: MeetingCardData }) {
             {meeting.recordingId && (
               <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
                 <IconVideo className="h-3 w-3" />
-                Transcript source
+                {t("meetingCard.transcriptSource")}
               </span>
             )}
           </div>
@@ -183,15 +187,23 @@ export interface UpcomingMeetingCardData {
 }
 
 /** Human "starts in 5 min" / "now" / "in 2 hrs" label for an upcoming card. */
-function relativeStartLabel(iso: string): { text: string; soon: boolean } {
+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: "Now", soon: true };
-  if (diffMin <= 0) return { text: "Started", soon: false };
-  if (diffMin < 60) return { text: `in ${diffMin} min`, soon: diffMin <= 5 };
+  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: `in ${hrs} hr${hrs === 1 ? "" : "s"}`, soon: false };
+  return { text: t("meetingCard.inHours", { count: hrs }), soon: false };
 }
 
 /**
@@ -205,8 +217,12 @@ export function UpcomingMeetingCard({
 }: {
   meeting: UpcomingMeetingCardData;
 }) {
+  const t = useT();
   const isLive = !!(meeting.actualStart && !meeting.actualEnd);
-  const { text: whenText, soon } = relativeStartLabel(meeting.scheduledStart);
+  const { text: whenText, soon } = relativeStartLabel(
+    meeting.scheduledStart,
+    t,
+  );
   const joinable = soon || isLive;
 
   return (
@@ -223,7 +239,7 @@ export function UpcomingMeetingCard({
         >
           <div className="flex items-start justify-between gap-2">
             <h3 className="text-sm font-medium leading-snug line-clamp-2 flex-1 text-foreground group-hover:text-foreground">
-              {meeting.title || "Untitled meeting"}
+              {meeting.title || t("meetingDetail.untitledMeeting")}
             </h3>
             {isLive ? (
               <Badge
@@ -234,7 +250,7 @@ export function UpcomingMeetingCard({
                   <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-60" />
                   <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-red-500" />
                 </span>
-                Live
+                {t("meetingCard.live")}
               </Badge>
             ) : (
               <span
@@ -275,7 +291,7 @@ export function UpcomingMeetingCard({
                   tabIndex={-1}
                 >
                   <IconExternalLink className="h-3.5 w-3.5" />
-                  Join
+                  {t("meetingCard.join")}
                 </Button>
               </a>
             )}
@@ -286,7 +302,7 @@ export function UpcomingMeetingCard({
               className="h-7 gap-1 px-2.5 text-xs cursor-pointer"
             >
               <NavLink to={`/meetings/${meeting.id}`}>
-                {isLive ? "Open notes" : "Open"}
+                {isLive ? t("meetingCard.openNotes") : t("meetingCard.open")}
               </NavLink>
             </Button>
           </div>

package/corpus/templates/clips/app/components/meetings/quick-ask-sidebar.tsx

@@ -17,7 +17,7 @@
  *     listeners. Esc and Cmd+J both close the sheet.
  */
 
-import { sendToAgentChat } from "@agent-native/core/client";
+import { sendToAgentChat, useT } from "@agent-native/core/client";
 import {
   IconCommand,
   IconNotes,
@@ -37,16 +37,18 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
-const QUICK_PROMPTS: Array<{ label: string; prompt: string }> = [
-  { label: "What did I miss?", prompt: "What did I miss?" },
+const QUICK_PROMPTS: Array<{ labelKey: string; promptKey: string }> = [
   {
-    label: "Summarize the last 5 minutes",
-    prompt: "Summarize the last 5 minutes of this meeting in 3-5 bullets.",
+    labelKey: "quickAsk.whatDidIMiss",
+    promptKey: "quickAsk.whatDidIMissPrompt",
   },
   {
-    label: "Action items for me",
-    prompt:
-      "List the action items from this meeting that are assigned to me. Use checkbox bullets.",
+    labelKey: "quickAsk.summarizeLastFive",
+    promptKey: "quickAsk.summarizeLastFivePrompt",
+  },
+  {
+    labelKey: "quickAsk.actionItemsForMe",
+    promptKey: "quickAsk.actionItemsForMePrompt",
   },
 ];
 
@@ -82,6 +84,7 @@ export function QuickAskSidebar({
   meetingTitle,
   segments,
 }: QuickAskSidebarProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState("");
   const [history, setHistory] = useState<ChatTurn[]>([]);
@@ -141,12 +144,12 @@ export function QuickAskSidebar({
         {
           id: `${turn.id}-ack`,
           role: "system",
-          text: "Sent to chat — see the agent sidebar for the reply.",
+          text: t("quickAsk.sentToChat"),
           ts: Date.now(),
         },
       ]);
     },
-    [meetingId, meetingTitle, segments],
+    [meetingId, meetingTitle, segments, t],
   );
 
   return (
@@ -158,30 +161,30 @@ export function QuickAskSidebar({
         <SheetHeader className="px-4 py-3 border-b border-border">
           <SheetTitle className="flex items-center gap-2 text-sm font-semibold">
             <IconWand className="h-4 w-4 text-primary" />
-            Ask about this meeting
+            {t("quickAsk.title")}
           </SheetTitle>
           <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
             <kbd className="inline-flex items-center gap-0.5 rounded border border-border bg-muted/50 px-1 py-px font-mono">
               <IconCommand className="h-3 w-3" />J
             </kbd>
-            <span>to toggle · Esc to close</span>
+            <span>{t("quickAsk.toggleHint")}</span>
           </div>
         </SheetHeader>
 
         <div className="flex-1 overflow-y-auto p-4 space-y-4">
           <div className="space-y-1.5">
             <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-              Quick prompts
+              {t("quickAsk.quickPrompts")}
             </p>
             <div className="flex flex-col gap-1.5">
               {QUICK_PROMPTS.map((q) => (
                 <button
-                  key={q.label}
+                  key={q.labelKey}
                   type="button"
-                  onClick={() => send(q.prompt)}
+                  onClick={() => send(t(q.promptKey))}
                   className="text-start text-xs rounded-md border border-border bg-background px-2.5 py-2 hover:bg-accent/40 cursor-pointer"
                 >
-                  {q.label}
+                  {t(q.labelKey)}
                 </button>
               ))}
             </div>
@@ -190,7 +193,7 @@ export function QuickAskSidebar({
           {history.length > 0 && (
             <div className="space-y-2">
               <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                History
+                {t("quickAsk.history")}
               </p>
               <div className="space-y-2">
                 {history.map((t) => (
@@ -213,10 +216,7 @@ export function QuickAskSidebar({
           {history.length === 0 && (
             <div className="flex flex-col items-center justify-center text-center gap-2 py-6 text-muted-foreground">
               <IconNotes className="h-5 w-5" />
-              <p className="text-xs">
-                Ask anything. The agent has the full transcript and meeting
-                context.
-              </p>
+              <p className="text-xs">{t("quickAsk.emptyDescription")}</p>
             </div>
           )}
         </div>
@@ -232,7 +232,7 @@ export function QuickAskSidebar({
             ref={textareaRef}
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
-            placeholder="Ask anything…"
+            placeholder={t("quickAsk.placeholder")}
             className="min-h-[44px] max-h-32 resize-none text-sm"
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
@@ -246,7 +246,7 @@ export function QuickAskSidebar({
             size="icon"
             disabled={!draft.trim()}
             className="cursor-pointer h-9 w-9 shrink-0"
-            aria-label="Send"
+            aria-label={t("quickAsk.send")}
           >
             <IconSend className="h-4 w-4 rtl:-scale-x-100" />
           </Button>