@agent-native/core 0.114.11 → 0.114.13

package/corpus/templates/tasks/app/components/custom-fields/editor/config/select-colors.ts

@@ -2,17 +2,45 @@ import type { SelectColorToken } from "@/hooks/use-custom-fields";
 
 export const SELECT_COLOR_OPTIONS: Array<{
   value: SelectColorToken;
-  label: string;
+  labelKey: string;
   className: string;
 }> = [
-  { value: "red", label: "Red", className: "bg-red-500" },
-  { value: "orange", label: "Orange", className: "bg-orange-500" },
-  { value: "yellow", label: "Yellow", className: "bg-yellow-500" },
-  { value: "green", label: "Green", className: "bg-green-500" },
-  { value: "blue", label: "Blue", className: "bg-blue-500" },
-  { value: "purple", label: "Purple", className: "bg-purple-500" },
-  { value: "pink", label: "Pink", className: "bg-pink-500" },
-  { value: "gray", label: "Gray", className: "bg-muted-foreground" },
+  { value: "red", labelKey: "fieldEditor.colors.red", className: "bg-red-500" },
+  {
+    value: "orange",
+    labelKey: "fieldEditor.colors.orange",
+    className: "bg-orange-500",
+  },
+  {
+    value: "yellow",
+    labelKey: "fieldEditor.colors.yellow",
+    className: "bg-yellow-500",
+  },
+  {
+    value: "green",
+    labelKey: "fieldEditor.colors.green",
+    className: "bg-green-500",
+  },
+  {
+    value: "blue",
+    labelKey: "fieldEditor.colors.blue",
+    className: "bg-blue-500",
+  },
+  {
+    value: "purple",
+    labelKey: "fieldEditor.colors.purple",
+    className: "bg-purple-500",
+  },
+  {
+    value: "pink",
+    labelKey: "fieldEditor.colors.pink",
+    className: "bg-pink-500",
+  },
+  {
+    value: "gray",
+    labelKey: "fieldEditor.colors.gray",
+    className: "bg-muted-foreground",
+  },
 ];
 
 export function selectColorClass(color?: SelectColorToken) {

package/corpus/templates/tasks/app/components/custom-fields/field-types.ts

@@ -0,0 +1,23 @@
+import type { FieldType } from "@/hooks/use-custom-fields";
+
+export const FIELD_TYPE_LABEL_KEYS: Record<FieldType, string> = {
+  text: "fields.types.text",
+  rich_text: "fields.types.richText",
+  number: "fields.types.number",
+  percent: "fields.types.percent",
+  currency: "fields.types.currency",
+  single_select: "fields.types.singleSelect",
+  multi_select: "fields.types.multiSelect",
+  date: "fields.types.date",
+};
+
+export const FIELD_TYPE_VALUES: FieldType[] = [
+  "text",
+  "rich_text",
+  "number",
+  "percent",
+  "currency",
+  "single_select",
+  "multi_select",
+  "date",
+];

package/corpus/templates/tasks/app/components/inbox/InboxList.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -34,6 +35,7 @@ export function InboxList({
   isPending,
   selectedInboxItemId,
 }: InboxListProps) {
+  const t = useT();
   const createInboxItem = useCreateInboxItem();
   const updateInboxItem = useUpdateInboxItem();
   const deleteInboxItem = useDeleteInboxItem();
@@ -78,20 +80,26 @@ export function InboxList({
     try {
       await handleBulkDelete(ids);
       toast.success(
-        `Deleted ${ids.length} ${ids.length === 1 ? "inbox item" : "inbox items"}`,
+        t("dialogs.deletedCount", {
+          count: ids.length,
+          entity:
+            ids.length === 1
+              ? t("inbox.entitySingular")
+              : t("inbox.entityPlural"),
+        }),
       );
       selection.actions.clearSelection();
       setBulkDeleteOpen(false);
     } catch {
-      toast.error("Could not delete selected inbox items.");
+      toast.error(t("inbox.bulkDeleteError"));
     }
   }
 
   return (
     <>
       <ListViewHeader
-        title="Inbox"
-        description="Capture rough ideas here, then mark ready when they become tasks."
+        title={t("inbox.pageTitle")}
+        description={t("inbox.pageDescription")}
         isPending={isPending}
         showSelectToggle={items.length > 0}
         selection={selection}
@@ -112,29 +120,29 @@ export function InboxList({
             <AddListItemInput
               disabled={createInboxItem.isPending}
               onCreate={(title) => createInboxItem.mutateAsync({ title })}
-              placeholder="Add to inbox..."
-              buttonLabel="Add item"
-              inputAriaLabel="New inbox item title"
-              errorMessage="Failed to add inbox item. Please try again."
+              placeholder={t("inbox.addPlaceholder")}
+              buttonLabel={t("inbox.addButtonLabel")}
+              inputAriaLabel={t("inbox.addInputAriaLabel")}
+              errorMessage={t("inbox.addErrorMessage")}
             />
           )}
         </div>
 
         {isPending ? (
           <div
-            aria-label="Inbox list"
+            aria-label={t("inbox.listAriaLabel")}
             className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
           >
             <ListSkeletonRows />
           </div>
         ) : items.length === 0 ? (
           <div
-            aria-label="Inbox list"
+            aria-label={t("inbox.listAriaLabel")}
             className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
           >
             <ListEmptyState
-              heading="Inbox is empty"
-              description="Add an item above or ask chat to capture something for triage."
+              heading={t("inbox.emptyHeading")}
+              description={t("inbox.emptyDescription")}
             />
           </div>
         ) : (
@@ -142,7 +150,7 @@ export function InboxList({
             <List
               items={items}
               selection={selection}
-              ariaLabel="Inbox list"
+              ariaLabel={t("inbox.listAriaLabel")}
               listClassName="flex flex-col gap-3 pb-6"
               onReorder={handleReorder}
               renderItem={({ item, sortable }) => (
@@ -194,7 +202,7 @@ export function InboxList({
             onOpenChange={(open) => {
               if (!open) setPendingDeleteId(null);
             }}
-            entityLabel="inbox item"
+            entityLabel={t("inbox.entitySingular")}
             itemTitle={pendingDeleteItem?.title ?? null}
             pending={deleteInboxItem.isPending}
             onConfirm={async () => {
@@ -211,8 +219,8 @@ export function InboxList({
           open={bulkDeleteOpen}
           onOpenChange={setBulkDeleteOpen}
           selectedItems={selection.state.selectedItems}
-          entitySingular="inbox item"
-          entityPlural="inbox items"
+          entitySingular={t("inbox.entitySingular")}
+          entityPlural={t("inbox.entityPlural")}
           pending={bulkDeleteInboxItems.isPending}
           onConfirm={() => void confirmBulkDelete()}
         />

package/corpus/templates/tasks/app/components/inbox/InboxListPage.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useSearchParams } from "react-router";
 
 import { InboxList } from "@/components/inbox/InboxList";
@@ -6,6 +7,7 @@ import { ListViewHeader } from "@/components/shared/ListViewHeader";
 import { useInboxItems } from "@/hooks/use-inbox-items";
 
 export function InboxListPage() {
+  const t = useT();
   const [searchParams] = useSearchParams();
   const selectedInboxItemId = searchParams.get("inboxItem");
   const { items: serverItems, isPending, isError, error } = useInboxItems();
@@ -15,8 +17,8 @@ export function InboxListPage() {
       {isError ? (
         <>
           <ListViewHeader
-            title="Inbox"
-            description="Capture rough ideas here, then mark ready when they become tasks."
+            title={t("inbox.pageTitle")}
+            description={t("inbox.pageDescription")}
             isPending={false}
             showSelectToggle={false}
             selection={null}
@@ -24,7 +26,7 @@ export function InboxListPage() {
           />
           <ListErrorMessage
             error={error}
-            fallbackMessage="Failed to load inbox items."
+            fallbackMessage={t("inbox.loadError")}
           />
         </>
       ) : (

package/corpus/templates/tasks/app/components/inbox/InboxListRow.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconChecks, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -33,6 +34,7 @@ export function InboxListRow({
   onRequestDelete,
   onMarkReady,
 }: InboxListRowProps) {
+  const t = useT();
   const [displayTitle, setDisplayTitle] = useState(item.title);
   const [markReadyPending, setMarkReadyPending] = useState(false);
   const busy = markReadyPending;
@@ -79,7 +81,7 @@ export function InboxListRow({
                 value={item.title}
                 onSave={onUpdateTitle}
                 onDisplayTitleChange={setDisplayTitle}
-                ariaLabel="Edit title"
+                ariaLabel={t("common.editTitleAriaLabel")}
                 disabled={busy}
                 titleDragProps={rowDrag.titleDragProps}
               />
@@ -93,11 +95,11 @@ export function InboxListRow({
             disabled={busy || rowSelection.selectionMode}
             onClick={() => void handleMarkReady()}
           >
-            Mark ready
+            {t("common.markReady")}
           </Button>
 
           <RowActionsMenu
-            ariaLabel={`Actions for ${displayTitle}`}
+            ariaLabel={t("common.rowActionsAriaLabel", { title: displayTitle })}
             disabled={busy || rowSelection.selectionMode}
           >
             <DropdownMenuItem
@@ -105,14 +107,14 @@ export function InboxListRow({
               onSelect={() => selection.actions.startSelection(item.id)}
             >
               <IconChecks className="size-4" />
-              Select
+              {t("selection.select")}
             </DropdownMenuItem>
             <DropdownMenuItem
               className="gap-2 text-destructive focus:bg-destructive focus:text-destructive-foreground"
               onSelect={onRequestDelete}
             >
               <IconTrash className="size-4" />
-              Delete
+              {t("common.delete")}
             </DropdownMenuItem>
           </RowActionsMenu>
         </>

package/corpus/templates/tasks/app/components/layout/Header.tsx

@@ -1,4 +1,5 @@
 import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useLocation } from "react-router";
 
@@ -6,15 +7,13 @@ import { APP_TITLE } from "@/lib/app-config";
 
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 
-const pageTitles: Record<string, string> = {
-  "/tasks": "Tasks",
-  "/settings": "Settings",
-  "/team": "Team",
-};
+type Translate = ReturnType<typeof useT>;
 
-function resolveTitle(pathname: string): string {
-  if (pageTitles[pathname]) return pageTitles[pathname];
-  if (pathname.startsWith("/extensions")) return "Extensions";
+function resolveTitle(t: Translate, pathname: string): string {
+  if (pathname === "/tasks") return t("header.pageTasks");
+  if (pathname === "/settings") return t("header.pageSettings");
+  if (pathname === "/team") return t("header.pageTeam");
+  if (pathname.startsWith("/extensions")) return t("header.pageExtensions");
   return APP_TITLE;
 }
 
@@ -23,6 +22,7 @@ interface HeaderProps {
 }
 
 export function Header({ onOpenMobileSidebar }: HeaderProps) {
+  const t = useT();
   const location = useLocation();
   const title = useHeaderTitle();
   const actions = useHeaderActions();
@@ -33,7 +33,7 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
         <button
           type="button"
           onClick={onOpenMobileSidebar}
-          aria-label="Open navigation"
+          aria-label={t("header.openNavigation")}
           className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
         >
           <IconMenu2 className="h-4 w-4" />
@@ -42,7 +42,7 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {title ?? (
           <h1 className="text-lg font-semibold tracking-tight truncate">
-            {resolveTitle(location.pathname)}
+            {resolveTitle(t, location.pathname)}
           </h1>
         )}
       </div>

package/corpus/templates/tasks/app/components/layout/Layout.tsx

@@ -2,6 +2,7 @@ import {
   AgentSidebar,
   focusAgentChat,
 } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { useLocation } from "react-router";
@@ -35,6 +36,7 @@ function routeOwnsToolbar(pathname: string): boolean {
 }
 
 export function Layout({ children }: LayoutProps) {
+  const t = useT();
   const location = useLocation();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
@@ -71,7 +73,7 @@ export function Layout({ children }: LayoutProps) {
           <button
             type="button"
             onClick={() => setMobileSidebarOpen(true)}
-            aria-label="Open navigation"
+            aria-label={t("header.openNavigation")}
             className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <IconMenu2 className="h-4 w-4" />
@@ -97,9 +99,11 @@ export function Layout({ children }: LayoutProps) {
         </div>
         <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
           <SheetContent side="left" className="p-0 w-[260px]">
-            <SheetTitle className="sr-only">Navigation</SheetTitle>
+            <SheetTitle className="sr-only">
+              {t("sidebar.navigationTitle")}
+            </SheetTitle>
             <SheetDescription className="sr-only">
-              App navigation links
+              {t("sidebar.navigationDescription")}
             </SheetDescription>
             <Sidebar collapsed={false} collapsible={false} />
           </SheetContent>
@@ -110,12 +114,12 @@ export function Layout({ children }: LayoutProps) {
           storageKey="tasks"
           browserTabId={TAB_ID}
           onFullscreenRequest={() => focusAgentChat()}
-          emptyStateText="Ask the agent to inspect or change this app."
+          emptyStateText={t("agent.emptyState")}
           dynamicSuggestions={false}
           suggestions={[
-            "Check my calendar and mails - any tasks for today?",
-            "Prioritise my tasks",
-            "I need to clean my house, create a list of tasks for it",
+            t("agent.suggestionCalendar"),
+            t("agent.suggestionPrioritize"),
+            t("agent.suggestionCleanHouse"),
           ]}
         >
           {contentFrame}

package/corpus/templates/tasks/app/components/layout/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
+import { useT } from "@agent-native/core/client/i18n";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
 import {
@@ -19,10 +20,10 @@ import {
 import { APP_TITLE } from "@/lib/app-config";
 import { cn } from "@/lib/utils";
 
-const navItems = [
-  { icon: IconInbox, label: "Inbox", href: "/inbox" },
-  { icon: IconCheckbox, label: "Tasks", href: "/tasks" },
-  { icon: IconForms, label: "Fields", href: "/fields" },
+const NAV_ITEMS = [
+  { icon: IconInbox, labelKey: "sidebar.navInbox", href: "/inbox" },
+  { icon: IconCheckbox, labelKey: "sidebar.navTasks", href: "/tasks" },
+  { icon: IconForms, labelKey: "sidebar.navFields", href: "/fields" },
 ];
 
 interface SidebarProps {
@@ -36,6 +37,7 @@ export function Sidebar({
   collapsible = true,
   onCollapsedChange,
 }: SidebarProps) {
+  const t = useT();
   const location = useLocation();
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
@@ -64,13 +66,17 @@ export function Sidebar({
             "flex shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             collapsed ? "size-8" : "size-7",
           )}
-          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          aria-label={
+            collapsed
+              ? t("sidebar.expandSidebar")
+              : t("sidebar.collapseSidebar")
+          }
         >
           <ToggleIcon className="size-4" />
         </button>
       </TooltipTrigger>
       <TooltipContent side="right">
-        {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
       </TooltipContent>
     </Tooltip>
   ) : null;
@@ -124,26 +130,27 @@ export function Sidebar({
         )}
       >
         <div className={cn("grid", collapsed ? "gap-0" : "gap-1")}>
-          {navItems.map((item) => {
+          {NAV_ITEMS.map((item) => {
             const Icon = item.icon;
             const isActive = location.pathname.startsWith(item.href);
+            const label = t(item.labelKey);
             const link = (
               <Link
                 to={item.href}
                 className={navClass({ isActive })}
                 aria-current={isActive ? "page" : undefined}
-                aria-label={collapsed ? item.label : undefined}
+                aria-label={collapsed ? label : undefined}
               >
                 <Icon className="size-4 shrink-0" />
                 <span className={collapsed ? "sr-only" : "truncate"}>
-                  {item.label}
+                  {label}
                 </span>
               </Link>
             );
             return collapsed ? (
               <Tooltip key={item.href}>
                 <TooltipTrigger asChild>{link}</TooltipTrigger>
-                <TooltipContent side="right">{item.label}</TooltipContent>
+                <TooltipContent side="right">{label}</TooltipContent>
               </Tooltip>
             ) : (
               <div key={item.href}>{link}</div>

package/corpus/templates/tasks/app/components/shared/AddListItemInput.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useRef, useState, type FormEvent } from "react";
 import { toast } from "sonner";
 
@@ -16,11 +17,16 @@ interface AddListItemInputProps {
 export function AddListItemInput({
   disabled = false,
   onCreate,
-  placeholder = "Add a task...",
-  buttonLabel = "Add task",
-  inputAriaLabel = "New task title",
-  errorMessage = "Failed to create task. Please try again.",
+  placeholder,
+  buttonLabel,
+  inputAriaLabel,
+  errorMessage,
 }: AddListItemInputProps) {
+  const t = useT();
+  const resolvedPlaceholder = placeholder ?? t("tasks.addPlaceholder");
+  const resolvedButtonLabel = buttonLabel ?? t("tasks.addButtonLabel");
+  const resolvedInputAriaLabel = inputAriaLabel ?? t("tasks.addInputAriaLabel");
+  const resolvedErrorMessage = errorMessage ?? t("tasks.addErrorMessage");
   const [title, setTitle] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -32,7 +38,7 @@ export function AddListItemInput({
     void onCreate(trimmed)
       .catch(() => {
         setTitle(trimmed);
-        toast.error(errorMessage);
+        toast.error(resolvedErrorMessage);
       })
       .finally(() => {
         inputRef.current?.focus();
@@ -45,12 +51,12 @@ export function AddListItemInput({
         ref={inputRef}
         value={title}
         onChange={(event) => setTitle(event.target.value)}
-        placeholder={placeholder}
-        aria-label={inputAriaLabel}
+        placeholder={resolvedPlaceholder}
+        aria-label={resolvedInputAriaLabel}
         disabled={disabled}
       />
       <Button type="submit" disabled={disabled || !title.trim()}>
-        {buttonLabel}
+        {resolvedButtonLabel}
       </Button>
     </form>
   );

package/corpus/templates/tasks/app/components/shared/AlertDialog.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import type { ReactNode } from "react";
 
 import {
@@ -28,6 +29,7 @@ export function AlertDialog({
   pending = false,
   onConfirm,
 }: AlertDialogProps) {
+  const t = useT();
   return (
     <AlertDialogRoot open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
@@ -38,13 +40,15 @@ export function AlertDialog({
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel disabled={pending}>
+            {t("common.cancel")}
+          </AlertDialogCancel>
           <AlertDialogAction
             className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             disabled={pending}
             onClick={() => void onConfirm()}
           >
-            Delete
+            {t("common.delete")}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

package/corpus/templates/tasks/app/components/shared/BulkDeleteDialog.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client/i18n";
+
 import {
   AlertDialog,
   type AlertDialogProps,
@@ -19,16 +21,18 @@ function BulkDeleteDialogDescription({
   BulkDeleteDialogProps,
   "selectedItems" | "entitySingular" | "entityPlural"
 >) {
+  const t = useT();
   const selectedCount = selectedItems.length;
 
   return (
     <div className="space-y-2 text-sm text-muted-foreground">
       <p>
-        This permanently removes{" "}
         {selectedCount === 1
-          ? `the selected ${entitySingular}`
-          : `all ${selectedCount} selected ${entityPlural}`}
-        .
+          ? t("dialogs.bulkDeleteDescriptionOne", { entity: entitySingular })
+          : t("dialogs.bulkDeleteDescriptionOther", {
+              count: selectedCount,
+              entity: entityPlural,
+            })}
       </p>
       {selectedItems.length > 0 ? (
         <ul className="list-disc space-y-1 pl-5 text-foreground">
@@ -39,7 +43,7 @@ function BulkDeleteDialogDescription({
           ))}
           {selectedItems.length > 5 ? (
             <li className="text-muted-foreground">
-              and {selectedItems.length - 5} more
+              {t("dialogs.andMore", { count: selectedItems.length - 5 })}
             </li>
           ) : null}
         </ul>
@@ -57,12 +61,15 @@ export function BulkDeleteDialog({
   pending,
   onConfirm,
 }: BulkDeleteDialogProps) {
+  const t = useT();
   return (
     <AlertDialog
       open={open}
       onOpenChange={onOpenChange}
       pending={pending}
-      title={`Delete ${selectedItems.length === 1 ? entitySingular : entityPlural}?`}
+      title={t("dialogs.deleteEntityTitle", {
+        entity: selectedItems.length === 1 ? entitySingular : entityPlural,
+      })}
       description={
         <BulkDeleteDialogDescription
           selectedItems={selectedItems}

package/corpus/templates/tasks/app/components/shared/ChipSelect.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import {
   closestCenter,
   DndContext,
@@ -56,6 +57,7 @@ function ChipSelectChip({
   sortable: boolean;
   onRemove: () => void;
 }) {
+  const t = useT();
   const {
     attributes,
     listeners,
@@ -89,7 +91,7 @@ function ChipSelectChip({
         variant="ghost"
         size="icon"
         disabled={disabled}
-        aria-label={`Remove ${option.label}`}
+        aria-label={t("common.removeAriaLabel", { label: option.label })}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
           event.stopPropagation();
@@ -110,10 +112,13 @@ export function ChipSelect({
   onSelectedIdsChange,
   disabled = false,
   limit,
-  addButtonLabel = "Add",
-  emptyLabel = "None selected",
+  addButtonLabel,
+  emptyLabel,
   sortable = true,
 }: ChipSelectProps) {
+  const t = useT();
+  const resolvedAddButtonLabel = addButtonLabel ?? t("common.add");
+  const resolvedEmptyLabel = emptyLabel ?? t("common.noneSelected");
   const optionsById = useMemo(
     () => new Map(options.map((option) => [option.id, option])),
     [options],
@@ -192,7 +197,9 @@ export function ChipSelect({
       </div>
       <div className="flex min-w-0 flex-wrap items-center gap-2">
         {selectedOptions.length === 0 ? (
-          <span className="text-sm text-muted-foreground">{emptyLabel}</span>
+          <span className="text-sm text-muted-foreground">
+            {resolvedEmptyLabel}
+          </span>
         ) : sortable ? (
           <DndContext
             sensors={sensors}
@@ -218,7 +225,7 @@ export function ChipSelect({
               disabled={disabled || availableOptions.length === 0 || atLimit}
               className="h-8 gap-1.5 px-2"
             >
-              {addButtonLabel}
+              {resolvedAddButtonLabel}
               <IconChevronDown className="size-4" />
             </Button>
           </DropdownMenuTrigger>