@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/analytics/app/pages/DataSources.tsx

@@ -6,6 +6,7 @@ import {
   useActionQuery,
   useSendToAgentChat,
   PromptComposer,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconCheck,
@@ -169,6 +170,7 @@ function StepItem({
   inputValues: Record<string, string>;
   onInputChange: (key: string, value: string) => void;
 }) {
+  const t = useT();
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || !step.inputKey) return;
@@ -214,7 +216,8 @@ function StepItem({
             rel="noopener noreferrer"
             className="inline-flex items-center gap-1.5 text-xs text-primary hover:underline"
           >
-            {step.linkText || "Open"} <IconExternalLink className="h-3 w-3" />
+            {step.linkText || t("dataSources.open")}{" "}
+            <IconExternalLink className="h-3 w-3" />
           </a>
         )}
         {step.inputKey && (
@@ -226,7 +229,7 @@ function StepItem({
               {step.inputAcceptFile && (
                 <label className="inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 cursor-pointer">
                   <IconUpload className="h-3 w-3" />
-                  Upload file
+                  {t("dataSources.uploadFile")}
                   <input
                     type="file"
                     accept={step.inputAcceptFile}
@@ -254,8 +257,7 @@ function StepItem({
             )}
             {isSaved && !inputValues[step.inputKey] && (
               <p className="text-xs text-muted-foreground">
-                A value is already saved. Leave blank to keep it, or enter a new
-                value to replace it.
+                {t("dataSources.savedValueHint")}
               </p>
             )}
           </div>
@@ -303,6 +305,7 @@ function GitHubOAuthView({
   connected: boolean;
   onSaved: () => void;
 }) {
+  const t = useT();
   const queryClient = useQueryClient();
   const { data: status, isLoading } = useQuery({
     queryKey: ["github-oauth-status"],
@@ -381,10 +384,11 @@ function GitHubOAuthView({
             <IconBrandGithub className="h-4 w-4" />
           </div>
           <div className="min-w-0 space-y-1">
-            <p className="text-xs font-medium text-foreground">GitHub OAuth</p>
+            <p className="text-xs font-medium text-foreground">
+              {t("dataSources.githubOAuth")}
+            </p>
             <p className="text-xs text-muted-foreground">
-              Grant repository access so the agent can search source code and
-              read files without a manual token.
+              {t("dataSources.githubOAuthDescription")}
             </p>
           </div>
         </div>
@@ -401,12 +405,12 @@ function GitHubOAuthView({
             {connectMutation.isPending ? (
               <>
                 <IconLoader2 className="mr-1.5 h-3 w-3 animate-spin" />
-                Opening...
+                {t("dataSources.opening")}
               </>
             ) : oauthConnected || connected ? (
-              "Reconnect"
+              t("dataSources.reconnect")
             ) : (
-              "Connect"
+              t("dataSources.connect")
             )}
           </Button>
         ) : null}
@@ -417,24 +421,22 @@ function GitHubOAuthView({
           <div className="flex items-center gap-2 text-xs text-emerald-500">
             <IconCheck className="h-3.5 w-3.5" />
             {viewerLabel
-              ? `Connected as ${viewerLabel}`
-              : "GitHub is connected"}
+              ? t("dataSources.connectedAs", { viewer: viewerLabel })
+              : t("dataSources.githubConnected")}
           </div>
         ) : status?.connected && status.valid === false ? (
           <div className="flex items-center gap-2 text-xs text-amber-500">
             <IconAlertCircle className="h-3.5 w-3.5" />
-            Saved GitHub token needs to be reconnected.
+            {t("dataSources.githubReconnectNeeded")}
           </div>
         ) : (
           <p className="text-xs text-muted-foreground">
-            OAuth will request repo read access for code search, file reads,
-            pull requests, and issues.
+            {t("dataSources.githubOAuthRequest")}
           </p>
         )
       ) : (
         <p className="text-xs text-muted-foreground">
-          OAuth app credentials are not configured on this deployment. Use the
-          personal access token field below.
+          {t("dataSources.githubOAuthUnavailable")}
         </p>
       )}
 
@@ -470,21 +472,22 @@ function SharedConnectionStatusRow({
 }: {
   status: SharedConnectionStatus;
 }) {
+  const t = useT();
   const message =
     status.kind === "ready"
-      ? "Analytics can use this provider through a workspace connection granted from Dispatch."
+      ? t("dataSources.sharedReady")
       : status.kind === "needs_grant"
-        ? "A workspace connection exists. Open Dispatch to grant Analytics access."
+        ? t("dataSources.sharedNeedsGrant")
         : status.kind === "local_credentials"
-          ? "Using credentials saved in this app. For reuse across apps, connect and grant this provider in Dispatch."
-          : "Connect or grant this provider in Dispatch to reuse it across apps, or save local credentials below.";
+          ? t("dataSources.sharedLocalCredentials")
+          : t("dataSources.sharedFallback");
 
   return (
     <div className="mb-4 flex items-start justify-between gap-3 rounded-md border border-border/50 bg-muted/20 p-3">
       <div className="min-w-0 space-y-1">
         <div className="flex flex-wrap items-center gap-2">
           <p className="text-xs font-medium text-foreground">
-            Shared integration
+            {t("dataSources.sharedIntegration")}
           </p>
           <SharedConnectionBadge status={status} />
         </div>
@@ -503,6 +506,7 @@ function WorkspaceReadyView({
   onSaved: () => void;
   onAddLocalCredentials: () => void;
 }) {
+  const t = useT();
   const [testResult, setTestResult] = useState<{
     ok: boolean;
     error?: string;
@@ -519,8 +523,7 @@ function WorkspaceReadyView({
   return (
     <div className="space-y-3">
       <p className="text-xs text-muted-foreground">
-        This source is ready through a shared workspace connection. Manage
-        shared access in Dispatch, or add local credentials for this app only.
+        {t("dataSources.workspaceReadyDescription")}
       </p>
       <div className="flex flex-wrap items-center gap-2">
         <Button
@@ -538,7 +541,9 @@ function WorkspaceReadyView({
           ) : (
             <IconCheck className="mr-1.5 h-3 w-3" />
           )}
-          {testMutation.isPending ? "Testing..." : "Test connection"}
+          {testMutation.isPending
+            ? t("dataSources.testing")
+            : t("dataSources.testConnection")}
         </Button>
         <Button
           size="sm"
@@ -546,7 +551,7 @@ function WorkspaceReadyView({
           onClick={onAddLocalCredentials}
           className="text-xs"
         >
-          Add local credentials
+          {t("dataSources.addLocalCredentials")}
         </Button>
         {source.docsUrl && (
           <a
@@ -555,7 +560,7 @@ function WorkspaceReadyView({
             rel="noopener noreferrer"
             className="ml-auto flex items-center gap-1 text-xs text-muted-foreground hover:text-primary"
           >
-            Docs <IconExternalLink className="h-3 w-3" />
+            {t("dataSources.docs")} <IconExternalLink className="h-3 w-3" />
           </a>
         )}
       </div>
@@ -566,12 +571,12 @@ function WorkspaceReadyView({
           {testResult.ok ? (
             <>
               <IconCheck className="h-3.5 w-3.5" />
-              Connection successful
+              {t("dataSources.connectionSuccessful")}
             </>
           ) : (
             <>
               <IconAlertCircle className="h-3.5 w-3.5" />
-              {testResult.error || "Connection failed"}
+              {testResult.error || t("dataSources.connectionFailed")}
             </>
           )}
         </div>
@@ -589,6 +594,7 @@ function ConnectedView({
   onSaved: () => void;
   envStatus: EnvKeyStatus[];
 }) {
+  const t = useT();
   const queryClient = useQueryClient();
   const [editing, setEditing] = useState(false);
   const [disconnectConfirmOpen, setDisconnectConfirmOpen] = useState(false);
@@ -714,13 +720,13 @@ function ConnectedView({
                         className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-rose-400 cursor-pointer"
                       >
                         <IconTrash className="h-3 w-3" />
-                        Clear saved value
+                        {t("dataSources.clearSavedValue")}
                       </button>
                     )}
                     {step.inputAcceptFile && !isPendingClear && (
                       <label className="inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 cursor-pointer">
                         <IconUpload className="h-3 w-3" />
-                        Upload file
+                        {t("dataSources.uploadFile")}
                         <input
                           type="file"
                           accept={step.inputAcceptFile}
@@ -775,7 +781,7 @@ function ConnectedView({
                 )}
                 {isPendingClear ? (
                   <div className="flex items-center justify-between gap-2 text-xs text-amber-500">
-                    <span>Will be cleared on save (back to default).</span>
+                    <span>{t("dataSources.willClearOnSave")}</span>
                     <button
                       type="button"
                       onClick={() => {
@@ -787,15 +793,14 @@ function ConnectedView({
                       }}
                       className="text-muted-foreground hover:text-foreground cursor-pointer"
                     >
-                      Undo
+                      {t("dataSources.undo")}
                     </button>
                   </div>
                 ) : (
                   isConfigured &&
                   !hasTyped && (
                     <p className="text-xs text-muted-foreground">
-                      A value is already saved. Leave blank to keep it, or enter
-                      a new value to replace it.
+                      {t("dataSources.savedValueHint")}
                     </p>
                   )
                 )}
@@ -812,10 +817,10 @@ function ConnectedView({
             {saveMutation.isPending ? (
               <>
                 <IconLoader2 className="h-3 w-3 animate-spin mr-1.5" />
-                Saving...
+                {t("dataSources.saving")}
               </>
             ) : (
-              "Save Changes"
+              t("dataSources.saveChanges")
             )}
           </Button>
           <Button
@@ -828,7 +833,7 @@ function ConnectedView({
             }}
             className="text-xs"
           >
-            Cancel
+            {t("sidebar.cancel")}
           </Button>
         </div>
         {saveMutation.isError && (
@@ -861,17 +866,17 @@ function ConnectedView({
                   {configured ? (
                     <span className="flex items-center gap-1 whitespace-nowrap text-emerald-500">
                       <IconCheck className="h-3 w-3" />
-                      Configured
+                      {t("dataSources.configured")}
                     </span>
                   ) : optional ? (
                     <span className="flex items-center gap-1 whitespace-nowrap text-muted-foreground">
                       <IconCircle className="h-3 w-3" />
-                      Optional
+                      {t("dataSources.optional")}
                     </span>
                   ) : (
                     <span className="flex items-center gap-1 whitespace-nowrap text-rose-400">
                       <IconAlertCircle className="h-3 w-3" />
-                      Missing
+                      {t("dataSources.missing")}
                     </span>
                   )}
                 </div>
@@ -885,7 +890,9 @@ function ConnectedView({
                 size="icon"
                 variant="ghost"
                 className="-mr-1 -mt-1 h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
-                aria-label={`${source.name} actions`}
+                aria-label={t("dataSources.sourceActions", {
+                  name: source.name,
+                })}
               >
                 <IconDotsVertical className="h-4 w-4" />
               </Button>
@@ -903,11 +910,13 @@ function ConnectedView({
                 ) : (
                   <IconCheck className="mr-2 h-4 w-4" />
                 )}
-                {testMutation.isPending ? "Testing..." : "Test connection"}
+                {testMutation.isPending
+                  ? t("dataSources.testing")
+                  : t("dataSources.testConnection")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => setEditing(true)}>
                 <IconPencil className="mr-2 h-4 w-4" />
-                Edit credentials
+                {t("dataSources.editCredentials")}
               </DropdownMenuItem>
               {source.docsUrl && (
                 <DropdownMenuItem asChild>
@@ -917,7 +926,7 @@ function ConnectedView({
                     rel="noopener noreferrer"
                   >
                     <IconExternalLink className="mr-2 h-4 w-4" />
-                    Open docs
+                    {t("dataSources.openDocs")}
                   </a>
                 </DropdownMenuItem>
               )}
@@ -933,8 +942,8 @@ function ConnectedView({
                   <IconTrash className="mr-2 h-4 w-4" />
                 )}
                 {disconnectMutation.isPending
-                  ? "Disconnecting..."
-                  : "Disconnect"}
+                  ? t("dataSources.disconnecting")
+                  : t("dataSources.disconnect")}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -947,12 +956,12 @@ function ConnectedView({
             {testResult.ok ? (
               <>
                 <IconCheck className="h-3.5 w-3.5" />
-                Connection successful
+                {t("dataSources.connectionSuccessful")}
               </>
             ) : (
               <>
                 <IconAlertCircle className="h-3.5 w-3.5" />
-                {testResult.error || "Connection failed"}
+                {testResult.error || t("dataSources.connectionFailed")}
               </>
             )}
           </div>
@@ -964,27 +973,32 @@ function ConnectedView({
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Disconnect {source.name}?</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("dataSources.disconnectTitle", { name: source.name })}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              This will clear credentials shared with{" "}
-              {sharedSourceNames.join(", ")}. Those sources may stop working
-              until the shared credentials are added again.
+              {t("dataSources.disconnectDescription", {
+                sources: sharedSourceNames.join(", "),
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="rounded-md border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground">
-            Shared credentials:{" "}
-            {sharedCredentialKeys
-              .map((key) => keyLabels[key] || key)
-              .join(", ")}
+            {t("dataSources.sharedCredentials", {
+              credentials: sharedCredentialKeys
+                .map((key) => keyLabels[key] || key)
+                .join(", "),
+            })}
           </div>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => disconnectMutation.mutate()}
               disabled={disconnectMutation.isPending}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {disconnectMutation.isPending ? "Disconnecting..." : "Disconnect"}
+              {disconnectMutation.isPending
+                ? t("dataSources.disconnecting")
+                : t("dataSources.disconnect")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -1010,6 +1024,7 @@ function DataSourceCard({
   isStatusLoading: boolean;
   onSaved: () => void;
 }) {
+  const t = useT();
   const [expanded, setExpanded] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
   const [inputValues, setInputValues] = useState<Record<string, string>>({});
@@ -1064,13 +1079,13 @@ function DataSourceCard({
                 <span className="flex items-center gap-1.5 text-xs text-emerald-500 font-medium whitespace-nowrap">
                   <IconCheck className="h-3.5 w-3.5" />
                   {readyViaWorkspace && !locallyConfigured
-                    ? "Ready"
-                    : "Configured"}
+                    ? t("dataSources.ready")
+                    : t("dataSources.configured")}
                 </span>
               ) : (
                 <span className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap">
                   <IconCircle className="h-3 w-3" />
-                  Not configured
+                  {t("dataSources.notConfigured")}
                 </span>
               )}
               {!isStatusLoading && sharedConnectionStatus && (
@@ -1183,7 +1198,7 @@ function DataSourceCard({
                         }}
                         className="text-xs"
                       >
-                        Back
+                        {t("dataSources.back")}
                       </Button>
                     )}
                     {currentStep < totalSteps - 1 && (
@@ -1197,7 +1212,7 @@ function DataSourceCard({
                         }}
                         className="text-xs"
                       >
-                        Continue
+                        {t("dataSources.continue")}
                       </Button>
                     )}
                   </div>
@@ -1218,10 +1233,10 @@ function DataSourceCard({
                     {saveMutation.isPending ? (
                       <>
                         <IconLoader2 className="h-3 w-3 animate-spin mr-1.5" />
-                        Saving...
+                        {t("dataSources.saving")}
                       </>
                     ) : (
-                      "Save Credentials"
+                      t("dataSources.saveCredentials")
                     )}
                   </Button>
                 )}
@@ -1233,7 +1248,8 @@ function DataSourceCard({
                     className="text-xs text-muted-foreground hover:text-primary flex items-center gap-1 ml-auto"
                     onClick={(e) => e.stopPropagation()}
                   >
-                    Docs <IconExternalLink className="h-3 w-3" />
+                    {t("dataSources.docs")}{" "}
+                    <IconExternalLink className="h-3 w-3" />
                   </a>
                 )}
               </div>
@@ -1247,7 +1263,7 @@ function DataSourceCard({
               {saveMutation.isSuccess && (
                 <div className="mt-3 flex items-center gap-2 text-xs text-emerald-500">
                   <IconCheck className="h-3.5 w-3.5" />
-                  Credentials saved.
+                  {t("dataSources.credentialsSaved")}
                 </div>
               )}
             </>
@@ -1259,6 +1275,7 @@ function DataSourceCard({
 }
 
 function AddDataSourceCTA() {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const { send, isGenerating } = useSendToAgentChat();
 
@@ -1291,7 +1308,9 @@ function AddDataSourceCTA() {
           ) : (
             <IconPlus className="h-4 w-4" />
           )}
-          {isGenerating ? "Adding..." : "Add Data Source"}
+          {isGenerating
+            ? t("dataSources.adding")
+            : t("dataSources.addDataSource")}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -1299,16 +1318,15 @@ function AddDataSourceCTA() {
         align="end"
       >
         <p className="px-1 pb-1 text-sm font-semibold text-foreground">
-          Add a Data Source
+          {t("dataSources.addDataSourceTitle")}
         </p>
         <p className="px-1 pb-3 text-xs text-muted-foreground">
-          Don't see the integration you need? Describe it and the agent will add
-          it.
+          {t("dataSources.addDataSourceDescription")}
         </p>
         <PromptComposer
           autoFocus
           disabled={isGenerating}
-          placeholder='e.g., "Add Salesforce integration so I can query CRM data"'
+          placeholder={t("dataSources.addDataSourcePlaceholder")}
           draftScope="analytics:add-data-source"
           onSubmit={handleSubmit}
         />
@@ -1318,9 +1336,10 @@ function AddDataSourceCTA() {
 }
 
 function FirstPartyAnalyticsCard() {
+  const t = useT();
   const queryClient = useQueryClient();
   const [expanded, setExpanded] = useState(false);
-  const [name, setName] = useState("Hosted templates");
+  const [name, setName] = useState(() => t("dataSources.defaultKeyName"));
   const [createdKey, setCreatedKey] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -1372,11 +1391,10 @@ function FirstPartyAnalyticsCard() {
               </div>
               <div className="min-w-0">
                 <CardTitle className="text-sm font-medium">
-                  First-party Analytics
+                  {t("dataSources.firstPartyAnalytics")}
                 </CardTitle>
                 <CardDescription className="mt-0.5 line-clamp-2 text-xs">
-                  Receive product events at your first-party endpoint and query
-                  them as a dashboard data source.
+                  {t("dataSources.firstPartyDescription")}
                 </CardDescription>
               </div>
             </div>
@@ -1386,12 +1404,12 @@ function FirstPartyAnalyticsCard() {
               ) : connected ? (
                 <span className="flex items-center gap-1.5 text-xs text-emerald-500 font-medium whitespace-nowrap">
                   <IconCheck className="h-3.5 w-3.5" />
-                  Configured
+                  {t("dataSources.configured")}
                 </span>
               ) : (
                 <span className="flex items-center gap-1.5 text-xs text-muted-foreground whitespace-nowrap">
                   <IconCircle className="h-3 w-3" />
-                  Not configured
+                  {t("dataSources.notConfigured")}
                 </span>
               )}
               {expanded ? (
@@ -1409,19 +1427,25 @@ function FirstPartyAnalyticsCard() {
           <div className="space-y-4">
             <div className="grid gap-2 rounded-md border border-border/50 bg-muted/20 p-3 text-xs">
               <div className="flex items-center justify-between gap-3">
-                <span className="text-muted-foreground">Endpoint</span>
+                <span className="text-muted-foreground">
+                  {t("dataSources.endpoint")}
+                </span>
                 <code className="truncate font-mono">
                   {firstPartyAnalyticsEndpoint}
                 </code>
               </div>
               <div className="flex items-center justify-between gap-3">
-                <span className="text-muted-foreground">Server env</span>
+                <span className="text-muted-foreground">
+                  {t("dataSources.serverEnv")}
+                </span>
                 <code className="truncate font-mono">
                   AGENT_NATIVE_ANALYTICS_PUBLIC_KEY
                 </code>
               </div>
               <div className="flex items-center justify-between gap-3">
-                <span className="text-muted-foreground">Browser env</span>
+                <span className="text-muted-foreground">
+                  {t("dataSources.browserEnv")}
+                </span>
                 <code className="truncate font-mono">
                   VITE_AGENT_NATIVE_ANALYTICS_PUBLIC_KEY
                 </code>
@@ -1433,7 +1457,7 @@ function FirstPartyAnalyticsCard() {
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 className="flex min-w-0 flex-1 rounded-md border border-input bg-background px-3 py-2 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
-                placeholder="Key name"
+                placeholder={t("dataSources.keyNamePlaceholder")}
               />
               <Button
                 size="sm"
@@ -1447,12 +1471,12 @@ function FirstPartyAnalyticsCard() {
                 {createKey.isPending ? (
                   <>
                     <IconLoader2 className="h-3 w-3 animate-spin mr-1.5" />
-                    Generating...
+                    {t("dataSources.generating")}
                   </>
                 ) : (
                   <>
                     <IconPlus className="h-3 w-3 mr-1.5" />
-                    Generate Key
+                    {t("dataSources.generateKey")}
                   </>
                 )}
               </Button>
@@ -1461,7 +1485,7 @@ function FirstPartyAnalyticsCard() {
             {createdKey && (
               <div className="space-y-2 rounded-md border border-emerald-500/30 bg-emerald-500/10 p-3">
                 <p className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
-                  New key generated
+                  {t("dataSources.newKeyGenerated")}
                 </p>
                 <div className="flex gap-2">
                   <input
@@ -1479,7 +1503,7 @@ function FirstPartyAnalyticsCard() {
                     className="text-xs"
                   >
                     <IconCopy className="h-3 w-3 mr-1.5" />
-                    {copied ? "Copied" : "Copy"}
+                    {copied ? t("dataSources.copied") : t("dataSources.copy")}
                   </Button>
                 </div>
               </div>
@@ -1497,8 +1521,12 @@ function FirstPartyAnalyticsCard() {
                       <div className="text-muted-foreground font-mono">
                         {key.publicKeyPrefix}...
                         {key.lastUsedAt
-                          ? ` last used ${new Date(key.lastUsedAt).toLocaleDateString()}`
-                          : " never used"}
+                          ? ` ${t("dataSources.lastUsed", {
+                              date: new Date(
+                                key.lastUsedAt,
+                              ).toLocaleDateString(),
+                            })}`
+                          : ` ${t("dataSources.neverUsed")}`}
                       </div>
                     </div>
                     <DropdownMenu>
@@ -1507,7 +1535,9 @@ function FirstPartyAnalyticsCard() {
                           size="icon"
                           variant="ghost"
                           className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
-                          aria-label={`${key.name} key actions`}
+                          aria-label={t("dataSources.keyActions", {
+                            name: key.name,
+                          })}
                         >
                           <IconDotsVertical className="h-4 w-4" />
                         </Button>
@@ -1523,7 +1553,9 @@ function FirstPartyAnalyticsCard() {
                           ) : (
                             <IconTrash className="mr-2 h-4 w-4" />
                           )}
-                          {revokeKey.isPending ? "Revoking..." : "Revoke"}
+                          {revokeKey.isPending
+                            ? t("dataSources.revoking")
+                            : t("dataSources.revoke")}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -1539,6 +1571,7 @@ function FirstPartyAnalyticsCard() {
 }
 
 export default function DataSources() {
+  const t = useT();
   const queryClient = useQueryClient();
   const [search, setSearch] = useState("");
 
@@ -1574,14 +1607,16 @@ export default function DataSources() {
   return (
     <div className="data-sources-layout mx-auto max-w-5xl space-y-8">
       <p className="text-sm text-muted-foreground">
-        Connect your data sources, then ask the agent to create dashboards.{" "}
+        {t("dataSources.intro")}{" "}
         {!isStatusLoading &&
           (configuredCount > 0 ? (
             <span className="text-emerald-500 font-medium">
-              {configuredCount} configured
+              {t("dataSources.configuredCount", { count: configuredCount })}
             </span>
           ) : (
-            <span className="text-amber-500 font-medium">0 configured</span>
+            <span className="text-amber-500 font-medium">
+              {t("dataSources.configuredCount", { count: 0 })}
+            </span>
           ))}
       </p>
 
@@ -1593,7 +1628,7 @@ export default function DataSources() {
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search data sources..."
+            placeholder={t("dataSources.searchPlaceholder")}
             className="flex w-full rounded-md border border-input bg-background pl-9 pr-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"
           />
         </div>
@@ -1623,7 +1658,7 @@ export default function DataSources() {
           </div>
         ) : (
           <p className="text-sm text-muted-foreground py-4">
-            No data sources match "{search}"
+            {t("dataSources.noMatch", { search })}
           </p>
         )
       ) : (