@agent-native/core 0.114.12 → 0.114.15

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { type ReactNode } from "react";
 
 import {
@@ -20,19 +21,18 @@ export function DeleteItemDialog({
   pending,
   onConfirm,
 }: DeleteItemDialogProps) {
+  const t = useT();
   return (
     <AlertDialog
       open={open}
       onOpenChange={onOpenChange}
       pending={pending}
-      title={`Delete ${entityLabel}?`}
+      title={t("dialogs.deleteEntityTitle", { entity: entityLabel })}
       description={
         description ??
-        (itemTitle ? (
-          <>This removes &quot;{itemTitle}&quot; permanently.</>
-        ) : (
-          `This removes the ${entityLabel} permanently.`
-        ))
+        (itemTitle
+          ? t("dialogs.deleteItemDescriptionWithTitle", { title: itemTitle })
+          : t("dialogs.deleteItemDescription", { entity: entityLabel }))
       }
       onConfirm={onConfirm}
     />

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

@@ -1,4 +1,5 @@
 import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
 
 import { PageHeader } from "@/components/shared/PageHeader";
 import { ListSelectionHeaderToggle } from "@/components/shared/selection/ListSelectionHeaderToggle";
@@ -29,6 +30,7 @@ export function ListViewHeader<T extends { id: string }>({
   onIncludeDoneChange,
   showAgentToggle = false,
 }: ListViewHeaderProps<T>) {
+  const t = useT();
   const showIncludeDone =
     includeDone !== undefined && onIncludeDoneChange !== undefined;
   const hasActions =
@@ -62,7 +64,7 @@ export function ListViewHeader<T extends { id: string }>({
                   htmlFor="include-done"
                   className="text-sm whitespace-nowrap"
                 >
-                  Show all
+                  {t("common.showAll")}
                 </Label>
               </div>
             ) : null}

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconX } from "@tabler/icons-react";
 import { useEffect, useState, type ReactNode } from "react";
 
@@ -32,7 +33,7 @@ export function SidePanel({
   className,
   title,
   subtitle,
-  closeLabel = "Close panel",
+  closeLabel,
   onClose,
 }: {
   children: ReactNode;
@@ -42,6 +43,8 @@ export function SidePanel({
   closeLabel?: string;
   onClose?: () => void;
 }) {
+  const t = useT();
+  const resolvedCloseLabel = closeLabel ?? t("common.closePanel");
   const width = useAgentSidebarWidth();
 
   useEffect(() => {
@@ -85,7 +88,7 @@ export function SidePanel({
               variant="ghost"
               size="icon"
               onClick={onClose}
-              aria-label={closeLabel}
+              aria-label={resolvedCloseLabel}
               className="size-8"
             >
               <IconX className="size-4" />

package/corpus/templates/tasks/app/components/shared/list/ListRowDragHandle.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconGripVertical } from "@tabler/icons-react";
 
 import type {
@@ -19,6 +20,7 @@ export function ListRowDragHandle({
   displayTitle,
   disabled = false,
 }: ListRowDragHandleProps) {
+  const t = useT();
   const { dragHandleProps, isDragging } = rowDrag;
   const { selectionMode } = rowSelection;
 
@@ -29,7 +31,7 @@ export function ListRowDragHandle({
       type="button"
       {...dragHandleProps}
       disabled={disabled}
-      aria-label={`Reorder ${displayTitle}`}
+      aria-label={t("common.reorderAriaLabel", { title: displayTitle })}
       onClick={(event) => {
         if (selectionMode) {
           event.stopPropagation();

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionBar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconCircleCheck, IconCircle } from "@tabler/icons-react";
 import { toast } from "sonner";
 
@@ -26,6 +27,7 @@ export function ListSelectionBar<
   toolbarBusy,
   onOpenBulkDelete,
 }: ListSelectionBarProps<T>) {
+  const t = useT();
   const bulkUpdateTasks = useBulkUpdateTasks();
   const bulkMarkInboxItemsReady = useBulkMarkInboxItemsReady();
 
@@ -35,8 +37,6 @@ export function ListSelectionBar<
   const allVisibleSelected =
     items.length > 0 && items.every((item) => selectedIdSet.has(item.id));
 
-  const entityLabel = promotedToTask ? "task" : "item";
-
   async function markSelectedReady() {
     if (selectedCount === 0) return;
 
@@ -45,11 +45,13 @@ export function ListSelectionBar<
         inboxItemIds: selectedItems.map((item) => item.id),
       });
       toast.success(
-        `Marked ${selectedCount} ${selectedCount === 1 ? "item" : "items"} ready`,
+        selectedCount === 1
+          ? t("selection.markedReadyOne", { count: selectedCount })
+          : t("selection.markedReadyOther", { count: selectedCount }),
       );
       selection.actions.clearSelection();
     } catch {
-      toast.error("Could not mark selected items ready.");
+      toast.error(t("selection.couldNotMarkReady"));
     }
   }
 
@@ -59,8 +61,8 @@ export function ListSelectionBar<
     if (applicableTasks.length === 0) {
       toast.info(
         done
-          ? "All selected tasks are already complete."
-          : "All selected tasks are already incomplete.",
+          ? t("selection.allTasksAlreadyComplete")
+          : t("selection.allTasksAlreadyIncomplete"),
       );
       return;
     }
@@ -70,19 +72,33 @@ export function ListSelectionBar<
     try {
       await bulkUpdateTasks.mutateAsync({ taskIds, done });
 
-      const countLabel = applicableTasks.length === 1 ? "task" : "tasks";
+      const unit =
+        applicableTasks.length === 1
+          ? t("tasks.entitySingular")
+          : t("tasks.entityPlural");
       toast.success(
         done
           ? skippedCount > 0
-            ? `Marked ${applicableTasks.length} ${countLabel} complete (${skippedCount} already complete)`
-            : `Marked ${applicableTasks.length} ${countLabel} complete`
+            ? t("selection.markedDoneWithSkipped", {
+                count: applicableTasks.length,
+                unit,
+                skipped: skippedCount,
+              })
+            : t("selection.markedDone", { count: applicableTasks.length, unit })
           : skippedCount > 0
-            ? `Marked ${applicableTasks.length} ${countLabel} incomplete (${skippedCount} already incomplete)`
-            : `Marked ${applicableTasks.length} ${countLabel} incomplete`,
+            ? t("selection.markedNotDoneWithSkipped", {
+                count: applicableTasks.length,
+                unit,
+                skipped: skippedCount,
+              })
+            : t("selection.markedNotDone", {
+                count: applicableTasks.length,
+                unit,
+              }),
       );
       selection.actions.clearSelection();
     } catch {
-      toast.error("Could not update selected tasks.");
+      toast.error(t("selection.couldNotUpdateTasks"));
     }
   }
 
@@ -101,9 +117,15 @@ export function ListSelectionBar<
   return (
     <ListSelectionToolbar
       ariaLabel={
-        promotedToTask ? "Task selection actions" : "Inbox selection actions"
+        promotedToTask
+          ? t("selection.taskSelectionActionsAriaLabel")
+          : t("selection.inboxSelectionActionsAriaLabel")
+      }
+      emptySelectionHint={
+        promotedToTask
+          ? t("selection.tapToSelectTasks")
+          : t("selection.tapToSelectItems")
       }
-      emptySelectionHint={`Tap ${entityLabel}s to select them.`}
       visibleCount={items.length}
       selectedCount={selectedCount}
       allVisibleSelected={allVisibleSelected}
@@ -120,11 +142,13 @@ export function ListSelectionBar<
             disabled={
               selectedCount === 0 || toolbarDisabled || allSelectedComplete
             }
-            aria-label="Mark complete"
+            aria-label={t("selection.markComplete")}
             onClick={() => void markSelectedDone(true)}
           >
             <IconCircleCheck className="h-3.5 w-3.5" />
-            <span className="hidden sm:inline">Complete</span>
+            <span className="hidden sm:inline">
+              {t("selection.completeLabel")}
+            </span>
           </Button>
           <Button
             variant="ghost"
@@ -133,11 +157,13 @@ export function ListSelectionBar<
             disabled={
               selectedCount === 0 || toolbarDisabled || allSelectedIncomplete
             }
-            aria-label="Mark incomplete"
+            aria-label={t("selection.markIncomplete")}
             onClick={() => void markSelectedDone(false)}
           >
             <IconCircle className="h-3.5 w-3.5" />
-            <span className="hidden sm:inline">Incomplete</span>
+            <span className="hidden sm:inline">
+              {t("selection.incompleteLabel")}
+            </span>
           </Button>
         </>
       ) : (
@@ -146,11 +172,11 @@ export function ListSelectionBar<
           size="sm"
           className="h-8 shrink-0 gap-1 px-2 text-xs"
           disabled={selectedCount === 0 || toolbarDisabled}
-          aria-label="Mark ready"
+          aria-label={t("common.markReady")}
           onClick={() => void markSelectedReady()}
         >
           <IconCircleCheck className="h-3.5 w-3.5" />
-          <span className="hidden sm:inline">Mark ready</span>
+          <span className="hidden sm:inline">{t("common.markReady")}</span>
         </Button>
       )}
     </ListSelectionToolbar>

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionHeaderToggle.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconChecks } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
@@ -13,6 +14,7 @@ export function ListSelectionHeaderToggle({
   disabled,
   onSelectionModeChange,
 }: ListSelectionHeaderToggleProps) {
+  const t = useT();
   return (
     <Button
       variant={selectionMode ? "secondary" : "ghost"}
@@ -22,7 +24,7 @@ export function ListSelectionHeaderToggle({
       onClick={() => onSelectionModeChange(!selectionMode)}
     >
       <IconChecks className="h-3.5 w-3.5" />
-      {selectionMode ? "Done selecting" : "Select"}
+      {selectionMode ? t("selection.doneSelecting") : t("selection.select")}
     </Button>
   );
 }

package/corpus/templates/tasks/app/components/shared/selection/ListSelectionToolbar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconTrash, IconX } from "@tabler/icons-react";
 import { type ReactNode } from "react";
 
@@ -27,12 +28,13 @@ export function ListSelectionToolbar({
   onOpenBulkDelete,
   children,
 }: ListSelectionToolbarProps) {
+  const t = useT();
   const statusText =
     selectedCount === 0
       ? emptySelectionHint
       : selectedCount > 1
-        ? `${selectedCount} selected · drag to reorder`
-        : `${selectedCount} selected`;
+        ? t("selection.selectedCountReorder", { count: selectedCount })
+        : t("selection.selectedCount", { count: selectedCount });
 
   return (
     <div
@@ -51,7 +53,9 @@ export function ListSelectionToolbar({
           disabled={toolbarDisabled || visibleCount === 0}
           onClick={selectionActions.selectAll}
         >
-          {allVisibleSelected ? "Clear all" : "Select all"}
+          {allVisibleSelected
+            ? t("selection.clearAll")
+            : t("selection.selectAll")}
         </Button>
         {children}
         <Button
@@ -59,11 +63,11 @@ export function ListSelectionToolbar({
           size="sm"
           className="h-8 shrink-0 gap-1 px-2 text-xs text-destructive hover:text-destructive"
           disabled={selectedCount === 0 || toolbarDisabled}
-          aria-label="Delete"
+          aria-label={t("common.delete")}
           onClick={onOpenBulkDelete}
         >
           <IconTrash className="h-3.5 w-3.5" />
-          <span className="hidden sm:inline">Delete</span>
+          <span className="hidden sm:inline">{t("common.delete")}</span>
         </Button>
         <Button
           variant="ghost"
@@ -71,7 +75,7 @@ export function ListSelectionToolbar({
           className="h-8 w-8 shrink-0"
           disabled={toolbarDisabled}
           onClick={selectionActions.clearSelection}
-          aria-label="Exit selection mode"
+          aria-label={t("selection.exitSelectionMode")}
         >
           <IconX className="h-3.5 w-3.5" />
         </Button>

package/corpus/templates/tasks/app/components/tasks/TaskList.tsx

@@ -1,4 +1,5 @@
 import { focusAgentChat } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -41,19 +42,20 @@ function NoTasksMessage({
 }: {
   hasHiddenCompletedTasks: boolean;
 }) {
+  const t = useT();
   if (hasHiddenCompletedTasks) {
     return (
       <ListEmptyState
-        heading="All tasks complete"
-        description="Toggle Show all to review completed tasks."
+        heading={t("tasks.allCompleteHeading")}
+        description={t("tasks.allCompleteDescription")}
       />
     );
   }
 
   return (
     <ListEmptyState
-      heading="No tasks yet"
-      description="Add one above or ask chat to create a task for you."
+      heading={t("tasks.emptyHeading")}
+      description={t("tasks.emptyDescription")}
     />
   );
 }
@@ -67,6 +69,7 @@ export function TaskList({
   activeTaskId,
   setActiveTaskId,
 }: TaskListProps) {
+  const t = useT();
   const createTask = useCreateTask();
   const updateTask = useUpdateTask();
   const deleteTask = useDeleteTask();
@@ -162,12 +165,18 @@ export function TaskList({
     try {
       await handleBulkDelete(ids);
       toast.success(
-        `Deleted ${ids.length} ${ids.length === 1 ? "task" : "tasks"}`,
+        t("dialogs.deletedCount", {
+          count: ids.length,
+          entity:
+            ids.length === 1
+              ? t("tasks.entitySingular")
+              : t("tasks.entityPlural"),
+        }),
       );
       selection.actions.clearSelection();
       setBulkDeleteOpen(false);
     } catch {
-      toast.error("Could not delete selected tasks.");
+      toast.error(t("tasks.bulkDeleteError"));
     }
   }
 
@@ -176,8 +185,8 @@ export function TaskList({
       <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <div className="flex min-h-0 flex-col gap-6 overflow-hidden">
           <ListViewHeader
-            title="Tasks"
-            description="Manage your task list, drag to reorder, or ask chat to add reminders."
+            title={t("tasks.pageTitle")}
+            description={t("tasks.pageDescription")}
             isPending={isPending}
             showSelectToggle={hasTasks}
             selection={selection}
@@ -215,7 +224,9 @@ export function TaskList({
 
             <div
               aria-label={
-                isPending || tasks.length === 0 ? "Tasks list" : undefined
+                isPending || tasks.length === 0
+                  ? t("tasks.listAriaLabel")
+                  : undefined
               }
               className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-1 outline-none"
             >
@@ -229,7 +240,7 @@ export function TaskList({
                 <List
                   items={orderedTasks}
                   selection={selection}
-                  ariaLabel="Tasks list"
+                  ariaLabel={t("tasks.listAriaLabel")}
                   onReorder={handleReorder}
                   renderItem={({ item, sortable }) => (
                     <TaskListRow
@@ -300,7 +311,7 @@ export function TaskList({
                 onOpenChange={(open) => {
                   if (!open) setPendingDeleteId(null);
                 }}
-                entityLabel="task"
+                entityLabel={t("tasks.entitySingular")}
                 itemTitle={pendingDeleteTask?.title ?? null}
                 pending={deleteTask.isPending}
                 onConfirm={async () => {
@@ -315,8 +326,8 @@ export function TaskList({
               open={bulkDeleteOpen}
               onOpenChange={setBulkDeleteOpen}
               selectedItems={selection.state.selectedItems}
-              entitySingular="task"
-              entityPlural="tasks"
+              entitySingular={t("tasks.entitySingular")}
+              entityPlural={t("tasks.entityPlural")}
               pending={bulkDeleteTasks.isPending}
               onConfirm={() => void confirmBulkDelete()}
             />

package/corpus/templates/tasks/app/components/tasks/TaskListHeaderRow.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client/i18n";
+
 import type { TaskFieldValue } from "@/hooks/use-custom-fields";
 import type { TaskWithFields } from "@/hooks/use-tasks";
 import {
@@ -34,11 +36,12 @@ export function TaskListHeaderRow({
 }: {
   task: TaskWithFields | undefined;
 }) {
+  const t = useT();
   return (
     <div className="hidden items-center gap-3 px-3 mb-2 text-xs font-medium text-muted-foreground md:flex">
       <div className="size-8 shrink-0" />
       <div className="size-4 shrink-0" />
-      <div className="min-w-0 flex-1 px-3">Task</div>
+      <div className="min-w-0 flex-1 px-3">{t("tasks.taskColumnHeader")}</div>
       <TaskListFieldStripHeader fields={task?.fields} />
       <div className="size-8 shrink-0" />
     </div>

package/corpus/templates/tasks/app/components/tasks/TaskListPage.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import {
   INCLUDE_DONE_QUERY_VALUE,
   parseIncludeDoneParam,
@@ -11,6 +12,7 @@ import { TaskList } from "@/components/tasks/TaskList";
 import { useTasks } from "@/hooks/use-tasks";
 
 export function TaskListPage() {
+  const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const includeDone = parseIncludeDoneParam(searchParams.get("includeDone"));
   const activeTaskId = searchParams.get("task");
@@ -84,8 +86,8 @@ export function TaskListPage() {
       {isError ? (
         <>
           <ListViewHeader
-            title="Tasks"
-            description="Manage your task list, drag to reorder, or ask chat to add reminders."
+            title={t("tasks.pageTitle")}
+            description={t("tasks.pageDescription")}
             isPending={false}
             showSelectToggle={false}
             selection={null}
@@ -96,7 +98,7 @@ export function TaskListPage() {
           />
           <ListErrorMessage
             error={error}
-            fallbackMessage="Failed to load tasks."
+            fallbackMessage={t("tasks.loadError")}
           />
         </>
       ) : (

package/corpus/templates/tasks/app/components/tasks/TaskListRow.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { IconChecks, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -55,6 +56,7 @@ export function TaskListRow({
   onBeginExit,
   onExitAfterComplete,
 }: TaskListRowProps) {
+  const t = useT();
   const selected = selection.state.selectedItems.some(
     (entry) => entry.id === item.id,
   );
@@ -122,7 +124,11 @@ export function TaskListRow({
               onClick={
                 rowSelection.selectionMode ? rowSelection.selectRow : undefined
               }
-              aria-label={`Mark ${displayTitle} ${displayDone ? "incomplete" : "complete"}`}
+              aria-label={
+                displayDone
+                  ? t("tasks.markIncompleteAriaLabel", { title: displayTitle })
+                  : t("tasks.markCompleteAriaLabel", { title: displayTitle })
+              }
             />
 
             <div className="min-w-0 flex-1">
@@ -133,7 +139,7 @@ export function TaskListRow({
                   value={item.title}
                   onSave={onUpdateTitle}
                   onDisplayTitleChange={setDisplayTitle}
-                  ariaLabel="Edit title"
+                  ariaLabel={t("common.editTitleAriaLabel")}
                   disabled={busy}
                   titleDragProps={rowDrag.titleDragProps}
                   displayDone={displayDone}
@@ -149,7 +155,9 @@ export function TaskListRow({
             </div>
 
             <RowActionsMenu
-              ariaLabel={`Actions for ${displayTitle}`}
+              ariaLabel={t("common.rowActionsAriaLabel", {
+                title: displayTitle,
+              })}
               disabled={busy || rowSelection.selectionMode}
             >
               <DropdownMenuItem
@@ -157,14 +165,14 @@ export function TaskListRow({
                 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>
           </>
@@ -203,6 +211,7 @@ function TaskListRowFieldBadges({ fields }: { fields?: TaskFieldValue[] }) {
 }
 
 function TaskListRowFieldStrip({ fields }: { fields?: TaskFieldValue[] }) {
+  const t = useT();
   const { fieldIds } = useVisibleTaskFieldIds();
   const items = taskCardDisplayFields(fieldIds, fields);
   const columnCount = Math.min(fieldIds.length, TASK_CARD_FIELD_LIMIT);
@@ -213,7 +222,7 @@ function TaskListRowFieldStrip({ fields }: { fields?: TaskFieldValue[] }) {
       style={{
         gridTemplateColumns: `repeat(${columnCount}, minmax(6.5rem, 8rem))`,
       }}
-      aria-label="Visible task fields"
+      aria-label={t("tasks.visibleTaskFieldsAriaLabel")}
     >
       {items.map((item) => (
         <div

package/corpus/templates/tasks/app/components/tasks/fields/TaskFieldsSidebar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useCallback } from "react";
 import { toast } from "sonner";
 
@@ -16,13 +17,14 @@ export function TaskFieldsSidebar({
   task: TaskWithFields | null;
   onClose: () => void;
 }) {
+  const t = useT();
   if (!task) return null;
 
   return (
     <SidePanel
-      title="Fields"
-      subtitle="Task details"
-      closeLabel="Close fields panel"
+      title={t("taskFields.panelTitle")}
+      subtitle={t("taskFields.panelSubtitle")}
+      closeLabel={t("taskFields.closeLabel")}
       onClose={onClose}
     >
       <TaskFieldsSidebarPanel task={task} />
@@ -31,6 +33,7 @@ export function TaskFieldsSidebar({
 }
 
 function TaskFieldsSidebarPanel({ task }: { task: TaskWithFields }) {
+  const t = useT();
   const fields = task.fields ?? [];
   const updateTask = useUpdateTask();
 
@@ -42,10 +45,12 @@ function TaskFieldsSidebarPanel({ task }: { task: TaskWithFields }) {
       void updateTask
         .mutateAsync({ taskId: task.id, ...payload })
         .catch((caught) => {
-          toast.error((caught as Error)?.message ?? "Could not update task.");
+          toast.error(
+            (caught as Error)?.message ?? t("taskFields.updateError"),
+          );
         });
     },
-    [task.id, updateTask],
+    [task.id, updateTask, t],
   );
 
   return (
@@ -57,7 +62,7 @@ function TaskFieldsSidebarPanel({ task }: { task: TaskWithFields }) {
 
       {fields.length === 0 ? (
         <div className="m-3 rounded-lg border border-dashed border-border p-6 text-center text-[13px] text-muted-foreground">
-          No fields defined.
+          {t("taskFields.noFieldsDefined")}
         </div>
       ) : (
         fields.map((field) => (

package/corpus/templates/tasks/app/components/tasks/fields/TaskTitleSection.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client/i18n";
+
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -8,18 +10,21 @@ export function TaskTitleSection({
   title: string;
   onChange: (title: string) => void;
 }) {
+  const t = useT();
   return (
     <section className="grid gap-2 border-b border-border/70 px-3 py-3">
       <div className="flex min-w-0 items-center justify-between gap-2">
         <Label className="min-w-0 truncate text-[13px] font-medium">
-          Title
+          {t("taskFields.titleLabel")}
         </Label>
-        <span className="shrink-0 text-[11px] text-muted-foreground">Task</span>
+        <span className="shrink-0 text-[11px] text-muted-foreground">
+          {t("taskFields.taskBadge")}
+        </span>
       </div>
       <Input
         value={title}
         onChange={(event) => onChange(event.currentTarget.value)}
-        aria-label="Edit task title"
+        aria-label={t("taskFields.editTaskTitleAriaLabel")}
         className="h-9 text-[13px]"
       />
     </section>