@agent-native/core 0.76.5 → 0.76.6

package/corpus/templates/assets/app/routes/asset.$id.tsx

@@ -10,6 +10,7 @@ import {
   sendToAgentChat,
   useActionMutation,
   useActionQuery,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconArrowLeft,
@@ -43,6 +44,7 @@ import {
 } from "@/components/ui/tooltip";
 
 export default function AssetDetailPage() {
+  const t = useT();
   const { id } = useParams();
   const navigate = useNavigate();
   const assetQuery = useActionQuery("get-asset", { id: id! }) as any;
@@ -54,7 +56,7 @@ export default function AssetDetailPage() {
     if (assetQuery.isLoading || assetQuery.isPending || assetQuery.isFetching) {
       return (
         <div className="p-6 text-sm text-muted-foreground">
-          Loading asset...
+          {t("assetDetail.loading")}
         </div>
       );
     }
@@ -62,14 +64,13 @@ export default function AssetDetailPage() {
       <div className="flex h-full items-center justify-center p-6">
         <div className="max-w-sm space-y-3 text-center">
           <h2 className="text-lg font-semibold tracking-tight">
-            Asset unavailable
+            {t("assetDetail.unavailableTitle")}
           </h2>
           <p className="text-sm text-muted-foreground">
-            This generated image may have been cleared before it was saved, or
-            the link may point to an asset you no longer have access to.
+            {t("assetDetail.unavailableDescription")}
           </p>
           <Button asChild variant="outline">
-            <Link to="/library">Back to library</Link>
+            <Link to="/library">{t("assetDetail.backToLibrary")}</Link>
           </Button>
         </div>
       </div>
@@ -80,14 +81,13 @@ export default function AssetDetailPage() {
     asset.mediaType === "video" || asset.mimeType?.startsWith("video/");
   const previewSources = assetPreviewSources(asset);
   const previewUrl = previewSources[0];
-  const categoryLabel = assetCategoryLabel(asset);
+  const categoryLabel = assetCategoryLabel(asset, t);
   const isStarterAsset =
     asset.metadata?.isStarterAsset === true ||
     String(asset.libraryId || "").startsWith("starter:");
   const libraryBackPath = isStarterAsset
     ? "/library"
     : `/brand-kits/${asset.libraryId}`;
-  const libraryBackLabel = isStarterAsset ? "Library" : "Brand Kit";
 
   function refine() {
     sendToAgentChat({
@@ -105,7 +105,7 @@ export default function AssetDetailPage() {
       await navigator.clipboard.writeText(text);
       toast.success(successMessage);
     } catch {
-      toast.error("Could not copy to clipboard.");
+      toast.error(t("assetDetail.copyFailed"));
     }
   }
 
@@ -125,8 +125,8 @@ export default function AssetDetailPage() {
       asset.metadata?.presetId ? `Preset ID: ${asset.metadata.presetId}` : null,
       asset.generationRunId ? `Run ID: ${asset.generationRunId}` : null,
       previewLine,
-      `Prompt: ${asset.prompt || asset.description || "Continue refining this asset."}`,
-      "Ask what should change, then refine this active image and show the new preview.",
+      `Prompt: ${asset.prompt || asset.description || t("assetDetail.continueRefining")}`,
+      t("assetDetail.refineInstruction"),
     ]
       .filter(Boolean)
       .join("\n");
@@ -139,13 +139,16 @@ export default function AssetDetailPage() {
           <Button variant="ghost" size="sm" asChild className="-ml-2 gap-2">
             <Link to={libraryBackPath}>
               <IconArrowLeft className="h-4 w-4" />
-              {libraryBackLabel}
+              {isStarterAsset
+                ? t("assetDetail.library")
+                : t("assetDetail.brandKit")}
             </Link>
           </Button>
         </div>
         <h2 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
           {isVideo && <IconVideo className="h-4 w-4 text-muted-foreground" />}
-          {asset.title || (isVideo ? "Video asset" : "Asset")}
+          {asset.title ||
+            (isVideo ? t("assetDetail.videoAsset") : t("assetDetail.asset"))}
         </h2>
         <div className="mt-3 flex flex-wrap gap-2">
           <Badge variant="secondary">{asset.status}</Badge>
@@ -157,27 +160,32 @@ export default function AssetDetailPage() {
         <div className="space-y-4 text-sm">
           {isVideo ? (
             <Field
-              label="Video"
+              label={t("assetDetail.video")}
               value={`${asset.durationSeconds || "?"}s · ${asset.aspectRatio || "n/a"} · ${asset.model || "n/a"}`}
             />
           ) : (
             <Field
-              label="Dimensions"
+              label={t("assetDetail.dimensions")}
               value={formatDimensions(asset.width, asset.height)}
             />
           )}
           <Field label="MIME" value={asset.mimeType || "n/a"} />
-          <Field label="Folder" value={asset.folderId || "Unfiled"} />
           <Field
-            label="Description"
+            label={t("assetDetail.folder")}
+            value={asset.folderId || t("assetDetail.unfiled")}
+          />
+          <Field
+            label={t("assetDetail.description")}
             value={
-              asset.description || asset.altText || "No description stored"
+              asset.description ||
+              asset.altText ||
+              t("assetDetail.noDescription")
             }
             multiline
           />
           <Field
-            label="Prompt"
-            value={asset.prompt || "No prompt stored"}
+            label={t("assetDetail.prompt")}
+            value={asset.prompt || t("assetDetail.noPrompt")}
             multiline
           />
         </div>
@@ -185,22 +193,27 @@ export default function AssetDetailPage() {
         <div className="grid gap-3">
           {!isStarterAsset ? (
             <Button onClick={refine}>
-              {isVideo ? "Make video variation" : "Make variations"}
+              {isVideo
+                ? t("assetDetail.makeVideoVariation")
+                : t("assetDetail.makeVariations")}
             </Button>
           ) : null}
           <div className="flex items-center gap-2">
             {!isVideo && !isStarterAsset ? (
               <AssetActionButton
-                label="Handoff"
+                label={t("assetDetail.handoff")}
                 onClick={() =>
-                  void copyTextToClipboard(handoffPrompt(), "Copied prompt")
+                  void copyTextToClipboard(
+                    handoffPrompt(),
+                    t("assetDetail.copiedPrompt"),
+                  )
                 }
               >
                 <IconClipboard className="h-4 w-4" />
               </AssetActionButton>
             ) : null}
             <AssetActionButton
-              label="Download"
+              label={t("assetDetail.download")}
               disabled={exportAsset.isPending}
               onClick={() => {
                 if (isStarterAsset) {
@@ -223,13 +236,13 @@ export default function AssetDetailPage() {
               <IconDownload className="h-4 w-4" />
             </AssetActionButton>
             <AssetActionButton
-              label="Copy URL"
+              label={t("assetDetail.copyUrl")}
               disabled={!previewUrl}
               onClick={() => {
                 if (previewUrl) {
                   void copyTextToClipboard(
                     assetUrlForClipboard(previewUrl),
-                    "Copied URL",
+                    t("assetDetail.copiedUrl"),
                   );
                 }
               }}
@@ -244,7 +257,7 @@ export default function AssetDetailPage() {
                       <Button
                         variant="ghost"
                         size="icon"
-                        aria-label="Delete"
+                        aria-label={t("assetDetail.delete")}
                         className="size-9 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                         disabled={deleteAsset.isPending}
                       >
@@ -252,18 +265,23 @@ export default function AssetDetailPage() {
                       </Button>
                     </AlertDialogTrigger>
                   </TooltipTrigger>
-                  <TooltipContent side="top">Delete</TooltipContent>
+                  <TooltipContent side="top">
+                    {t("assetDetail.delete")}
+                  </TooltipContent>
                 </Tooltip>
                 <AlertDialogContent>
                   <AlertDialogHeader>
-                    <AlertDialogTitle>Delete asset?</AlertDialogTitle>
+                    <AlertDialogTitle>
+                      {t("assetDetail.deleteTitle")}
+                    </AlertDialogTitle>
                     <AlertDialogDescription>
-                      This removes the asset from the library. Existing exports
-                      that already use this URL may stop rendering.
+                      {t("assetDetail.deleteDescription")}
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogCancel>
+                      {t("assetDetail.cancel")}
+                    </AlertDialogCancel>
                     <AlertDialogAction
                       className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                       onClick={() =>
@@ -276,7 +294,7 @@ export default function AssetDetailPage() {
                         )
                       }
                     >
-                      Delete
+                      {t("assetDetail.delete")}
                     </AlertDialogAction>
                   </AlertDialogFooter>
                 </AlertDialogContent>
@@ -297,6 +315,7 @@ export default function AssetDetailPage() {
           <AssetImagePreview
             sources={previewSources}
             alt={asset.altText || asset.title || ""}
+            previewUnavailableLabel={t("assetDetail.previewUnavailable")}
           />
         )}
       </div>
@@ -332,25 +351,30 @@ function AssetActionButton({
   );
 }
 
-function assetCategoryLabel(asset: any): string | null {
+function assetCategoryLabel(
+  asset: any,
+  t: (key: string, options?: Record<string, unknown>) => string,
+): string | null {
   if (
     asset?.metadata?.intent === "subject" ||
     asset?.role === "subject_reference"
   ) {
-    return "content only";
+    return t("assetDetail.contentOnly");
   }
   const category = asset?.metadata?.category;
   if (typeof category !== "string") return null;
-  if (category === "style-only") return "style reference";
+  if (category === "style-only") return t("assetDetail.styleReference");
   return category.replace(/-/g, " ");
 }
 
 function AssetImagePreview({
   sources,
   alt,
+  previewUnavailableLabel,
 }: {
   sources: string[];
   alt: string;
+  previewUnavailableLabel: string;
 }) {
   const [sourceIndex, setSourceIndex] = useState(0);
   const [unavailable, setUnavailable] = useState(false);
@@ -365,7 +389,7 @@ function AssetImagePreview({
   if (!src || unavailable) {
     return (
       <div className="flex min-h-48 min-w-72 items-center justify-center rounded-lg border border-dashed border-border bg-background px-6 text-sm font-medium text-muted-foreground">
-        Preview unavailable
+        {previewUnavailableLabel}
       </div>
     );
   }

package/corpus/templates/assets/app/routes/brand-kits._index.tsx

@@ -1,6 +1,10 @@
 import { Link, useNavigate } from "react-router";
 import { useMemo, useState } from "react";
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { toast } from "sonner";
 import { IconPalette, IconPhotoPlus, IconSearch } from "@tabler/icons-react";
 import { Button } from "@/components/ui/button";
@@ -16,6 +20,7 @@ import {
 import type { LibraryPreset } from "../../shared/library-presets";
 
 export default function BrandKitsIndexPage() {
+  const t = useT();
   const navigate = useNavigate();
   const { data, isLoading } = useActionQuery("list-libraries", {});
   const { data: presetData } = useActionQuery("list-library-presets", {});
@@ -56,7 +61,7 @@ export default function BrandKitsIndexPage() {
         },
         onError: (error: Error) => {
           setCreatingPresetId(null);
-          toast.error(error.message || "Could not create preset brand kit.");
+          toast.error(error.message || t("brandKits.presetCreateFailed"));
         },
       },
     );
@@ -70,12 +75,12 @@ export default function BrandKitsIndexPage() {
       {
         onSuccess: (copy: any) => {
           setDuplicatingId(null);
-          toast.success("Private brand kit copy created");
+          toast.success(t("brandKits.duplicateCreated"));
           navigate(`/brand-kits/${copy.id}`);
         },
         onError: (error: Error) => {
           setDuplicatingId(null);
-          toast.error(error.message || "Could not duplicate brand kit.");
+          toast.error(error.message || t("brandKits.duplicateFailed"));
         },
       },
     );
@@ -83,17 +88,16 @@ export default function BrandKitsIndexPage() {
 
   return (
     <PageShell
-      title="Brand Kits"
-      description="Organize references, generated assets, folders, and reusable style guidance."
+      title={t("brandKits.title")}
+      description={t("brandKits.description")}
     >
       <section className="space-y-4">
         <div>
           <h2 className="text-lg font-semibold tracking-tight">
-            Your brand kits
+            {t("brandKits.yourBrandKits")}
           </h2>
           <p className="mt-1 w-full text-sm text-muted-foreground">
-            Brand references, product imagery, videos, diagrams, and generated
-            candidates that other agents can reuse
+            {t("brandKits.yourBrandKitsDescription")}
           </p>
         </div>
 
@@ -103,7 +107,7 @@ export default function BrandKitsIndexPage() {
             <input
               value={query}
               onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search brand kits"
+              placeholder={t("brandKits.searchPlaceholder")}
               className="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
             />
           </div>
@@ -113,7 +117,7 @@ export default function BrandKitsIndexPage() {
             className="gap-2"
           >
             <IconPhotoPlus className="h-4 w-4" />
-            New Brand Kit
+            {t("brandKits.newBrandKit")}
           </Button>
         </div>
 
@@ -145,11 +149,10 @@ export default function BrandKitsIndexPage() {
             <div className="mx-auto max-w-2xl text-center">
               <IconPalette className="mx-auto h-10 w-10 text-muted-foreground" />
               <h3 className="mt-4 text-base font-semibold">
-                No brand kits yet
+                {t("brandKits.emptyTitle")}
               </h3>
               <p className="mt-2 text-sm text-muted-foreground">
-                Start with a default style brand kit or create your own
-                references and style guidance.
+                {t("brandKits.emptyDescription")}
               </p>
             </div>
             <div className="mx-auto mt-6 max-w-4xl">
@@ -162,10 +165,10 @@ export default function BrandKitsIndexPage() {
             <div className="mt-5 flex flex-wrap justify-center gap-2">
               <Button onClick={() => setOpen(true)} className="gap-2">
                 <IconPhotoPlus className="h-4 w-4" />
-                New brand kit
+                {t("brandKits.newBrandKitLower")}
               </Button>
               <Button asChild variant="outline">
-                <Link to="/">Create asset</Link>
+                <Link to="/">{t("brandKits.createAsset")}</Link>
               </Button>
             </div>
           </div>

package/corpus/templates/assets/app/routes/settings.tsx

@@ -129,6 +129,7 @@ export default function SettingsPage() {
 }
 
 function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
+  const t = useT();
   const queryClient = useQueryClient();
   const onboarding = useOnboarding();
   const { status } = useBuilderStatus();
@@ -191,14 +192,16 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
       <CardHeader className="border-b border-border/70 p-5">
         <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <div className="min-w-0">
-            <CardTitle className="text-base">Assets setup</CardTitle>
+            <CardTitle className="text-base">
+              {t("settings.setupTitle")}
+            </CardTitle>
             <CardDescription className="mt-1 leading-6">
-              Two essentials: generation and durable storage.
+              {t("settings.setupDescription")}
             </CardDescription>
           </div>
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             <span className="font-medium text-foreground">{readyCount}/2</span>
-            ready
+            {t("settings.setupReady")}
           </div>
         </div>
       </CardHeader>
@@ -211,14 +214,16 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
             builderConnected
               ? orgName
                 ? `Connected to ${orgName}.`
-                : "Connected for managed generation."
+                : t("settings.builderDescriptionReady")
               : builderEnabled
-                ? "Managed image generation and storage, no provider keys."
-                : "Disabled for this deployment."
+                ? t("settings.builderDescriptionManaged")
+                : t("settings.builderDescriptionDisabled")
           }
           status={
             <StatusPill tone={builderConnected ? "ready" : "neutral"}>
-              {builderConnected ? "Connected" : "Optional"}
+              {builderConnected
+                ? t("settings.connected")
+                : t("settings.optional")}
             </StatusPill>
           }
           action={
@@ -234,16 +239,16 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
                 {flow.connecting ? (
                   <>
                     <IconLoader2 className="size-3.5 animate-spin" />
-                    Connecting
+                    {t("settings.connecting")}
                   </>
                 ) : builderConnected ? (
                   <>
-                    Reconnect
+                    {t("settings.reconnect")}
                     <IconExternalLink className="size-3.5" />
                   </>
                 ) : (
                   <>
-                    Connect
+                    {t("settings.connect")}
                     <IconExternalLink className="size-3.5" />
                   </>
                 )}
@@ -256,11 +261,13 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
 
         <SettingsRow
           icon={<IconPhoto className="size-4" />}
-          title="Generation"
-          description={generationSummary(configData, builderConnected)}
+          title={t("settings.generation")}
+          description={generationSummary(configData, builderConnected, t)}
           status={
             <StatusPill tone={generationReady ? "ready" : "attention"}>
-              {generationReady ? "Ready" : "Needs setup"}
+              {generationReady
+                ? t("settings.generationReady")
+                : t("settings.generationNeedsSetup")}
             </StatusPill>
           }
           action={
@@ -269,7 +276,7 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
                 open={manualGenerationOpen}
                 onClick={() => setManualGenerationOpen((open) => !open)}
               >
-                Manual keys
+                {t("settings.manualKeys")}
               </DisclosureButton>
             ) : null
           }
@@ -277,23 +284,25 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
         {manualGenerationOpen && generationStep ? (
           <ManualMethodPanel
             step={generationStep}
-            title="Manual generation keys"
-            description="Add Gemini for video generation, or OpenAI/Gemini as image fallbacks."
+            title={t("settings.manualGenerationKeys")}
+            description={t("settings.manualGenerationDescription")}
             onSaved={refreshSetup}
           />
         ) : null}
 
         <SettingsRow
           icon={<IconCloudUpload className="size-4" />}
-          title="Storage"
+          title={t("settings.storage")}
           description={
             storageReady
-              ? "Originals, thumbnails, videos, and exports have a durable home."
-              : "Add S3-compatible storage for production assets and exports."
+              ? t("settings.storageReady")
+              : t("settings.storageNeedsSetup")
           }
           status={
             <StatusPill tone={storageReady ? "ready" : "attention"}>
-              {storageReady ? "Ready" : "Needs setup"}
+              {storageReady
+                ? t("settings.generationReady")
+                : t("settings.generationNeedsSetup")}
             </StatusPill>
           }
           action={
@@ -302,7 +311,7 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
                 open={manualStorageOpen}
                 onClick={() => setManualStorageOpen((open) => !open)}
               >
-                Configure
+                {t("settings.configure")}
               </DisclosureButton>
             ) : null
           }
@@ -310,19 +319,21 @@ function AssetsSetupCard({ libraryCount }: { libraryCount: number }) {
         {manualStorageOpen && storageStep ? (
           <ManualMethodPanel
             step={storageStep}
-            title="Object storage"
-            description="Use S3, R2, Spaces, Tigris, MinIO, or another compatible provider."
+            title={t("settings.objectStorage")}
+            description={t("settings.objectStorageDescription")}
             onSaved={refreshSetup}
           />
         ) : null}
 
         <SettingsRow
           icon={<IconLibraryPhoto className="size-4" />}
-          title="Brand Kits"
+          title={t("settings.brandKits")}
           description={`${libraryCount} accessible ${
             libraryCount === 1 ? "brand kit" : "brand kits"
           }.`}
-          status={<StatusPill tone="neutral">Available</StatusPill>}
+          status={
+            <StatusPill tone="neutral">{t("settings.available")}</StatusPill>
+          }
         />
       </CardContent>
     </Card>
@@ -424,6 +435,7 @@ function ManualMethodPanel({
   description: string;
   onSaved: () => Promise<void>;
 }) {
+  const t = useT();
   const methods = useMemo(() => step.methods.filter(isFormMethod), [step]);
   const [selectedId, setSelectedId] = useState(methods[0]?.id ?? "");
 
@@ -447,10 +459,12 @@ function ManualMethodPanel({
 
         {methods.length > 1 ? (
           <div className="max-w-xs">
-            <Label className="text-xs text-muted-foreground">Provider</Label>
+            <Label className="text-xs text-muted-foreground">
+              {t("settings.provider")}
+            </Label>
             <Select value={selectedId} onValueChange={setSelectedId}>
               <SelectTrigger className="mt-2">
-                <SelectValue placeholder="Choose a provider" />
+                <SelectValue placeholder={t("settings.chooseProvider")} />
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
@@ -469,7 +483,7 @@ function ManualMethodPanel({
           <CredentialForm method={selected} onSaved={onSaved} />
         ) : (
           <p className="text-sm text-muted-foreground">
-            No manual setup options are available for this item.
+            {t("settings.noManualOptions")}
           </p>
         )}
       </div>
@@ -484,12 +498,14 @@ function CredentialForm({
   method: FormOnboardingMethod;
   onSaved: () => Promise<void>;
 }) {
+  const t = useT();
   const [values, setValues] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const fields = method.payload.fields;
-  const submitLabel = fields.length > 1 ? "Save settings" : "Save key";
+  const submitLabel =
+    fields.length > 1 ? t("settings.saveSettings") : t("settings.saveKey");
 
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
@@ -504,7 +520,7 @@ function CredentialForm({
         .filter((item) => item.value !== "");
 
       if (!vars.length) {
-        setError("Enter a value first.");
+        setError(t("settings.enterValueFirst"));
         return;
       }
 
@@ -521,13 +537,13 @@ function CredentialForm({
         const data = (await response.json().catch(() => ({}))) as {
           error?: string;
         };
-        throw new Error(data.error ?? `Save failed: ${response.status}`);
+        throw new Error(`${t("settings.saveFailed")}: ${response.status}`);
       }
 
       setValues({});
       await onSaved();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Save failed");
+      setError(err instanceof Error ? err.message : t("settings.saveFailed"));
     } finally {
       setSaving(false);
     }
@@ -582,7 +598,7 @@ function CredentialForm({
         {saving ? (
           <>
             <IconLoader2 className="size-3.5 animate-spin" />
-            Saving
+            {t("settings.saving")}
           </>
         ) : (
           submitLabel
@@ -615,15 +631,20 @@ function isFormMethod(
 function generationSummary(
   config: ImageGenerationConfig | undefined,
   builderConnected: boolean,
+  t: (key: string, options?: Record<string, unknown>) => string,
 ) {
-  if (builderConnected) return "Builder is handling managed image generation.";
+  if (builderConnected) return t("settings.builderManaged");
   const providers = [
     config?.geminiConfigured ? "Gemini" : null,
     config?.openaiConfigured ? "OpenAI" : null,
   ].filter(Boolean);
-  if (providers.length) return `${providers.join(" and ")} configured.`;
+  if (providers.length) {
+    return t("settings.providerConfigured", {
+      providers: providers.join(" and "),
+    });
+  }
   if (config?.builderEnabled === false) {
-    return "Add Gemini or OpenAI before generating new assets.";
+    return t("settings.addGeminiOrOpenAI");
   }
-  return "Add Builder, Gemini, or OpenAI before generating new assets.";
+  return t("settings.addBuilderGeminiOrOpenAI");
 }