@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/components/sharing/share-ui.tsx

@@ -1,4 +1,8 @@
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconBuilding,
   IconCheck,
@@ -46,23 +50,14 @@ export interface SharesResponse {
 
 export type SharesQuery = ReturnType<typeof useActionQuery<SharesResponse>>;
 
-export const VIS_META: Record<
-  Visibility,
-  { label: string; description: string; Icon: typeof IconLock }
-> = {
+export const VIS_META: Record<Visibility, { Icon: typeof IconLock }> = {
   private: {
-    label: "Private",
-    description: "Only people with access can view",
     Icon: IconLock,
   },
   org: {
-    label: "Organization",
-    description: "Anyone in your organization can view",
     Icon: IconBuilding,
   },
   public: {
-    label: "Public",
-    description: "Anyone with the link can view",
     Icon: IconWorld,
   },
 };
@@ -77,10 +72,6 @@ export function copyToClipboard(value: string): void {
   navigator.clipboard.writeText(value).catch(() => {});
 }
 
-export function cap(s: string): string {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}
-
 // ---------------------------------------------------------------------------
 // Optimistic visibility mutation (resource-agnostic)
 // ---------------------------------------------------------------------------
@@ -143,6 +134,7 @@ export function ShareCardHeader({
   ownerEmail?: string | null;
   reserveCloseButton?: boolean;
 }) {
+  const t = useT();
   return (
     <div
       className={cn(
@@ -155,7 +147,7 @@ export function ShareCardHeader({
       </div>
       {ownerEmail ? (
         <div className="mt-0.5 truncate text-xs text-muted-foreground">
-          Owner: {ownerEmail}
+          {t("shareUi.owner", { email: ownerEmail })}
         </div>
       ) : null}
     </div>
@@ -180,15 +172,18 @@ export function GeneralAccessSelect({
   /** Override for the "public" visibility description (e.g. Clips comment hint). */
   publicDescription?: string;
 }) {
+  const t = useT();
   const meta = VIS_META[visibility];
   const description =
     visibility === "public" && publicDescription
       ? publicDescription
-      : meta.description;
+      : t(`shareUi.visibility.${visibility}.description`);
 
   return (
     <div>
-      <div className="mb-2 text-xs font-semibold">General access</div>
+      <div className="mb-2 text-xs font-semibold">
+        {t("shareUi.generalAccess")}
+      </div>
       <div className="flex items-center gap-3">
         <span
           aria-hidden
@@ -208,7 +203,7 @@ export function GeneralAccessSelect({
             <SelectContent>
               {(Object.keys(VIS_META) as Visibility[]).map((k) => (
                 <SelectItem key={k} value={k}>
-                  {VIS_META[k].label}
+                  {t(`shareUi.visibility.${k}.label`)}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -233,10 +228,11 @@ export function MakePublicCard({
   isPending: boolean;
   onMakePublic: () => void;
 }) {
+  const t = useT();
   return (
     <div className="rounded-md border border-border bg-muted/40 px-3 py-2.5">
       <p className="text-xs text-muted-foreground">
-        This link will only work for people who already have access.
+        {t("shareUi.restrictedLinkDescription")}
       </p>
       <Button
         type="button"
@@ -245,7 +241,7 @@ export function MakePublicCard({
         onClick={onMakePublic}
         disabled={isPending}
       >
-        {isPending ? "Making public…" : "Make public and copy"}
+        {isPending ? t("shareUi.makingPublic") : t("shareUi.makePublicAndCopy")}
       </Button>
     </div>
   );
@@ -264,6 +260,7 @@ export function CopyField({
   value: string;
   disabled?: boolean;
 }) {
+  const t = useT();
   const [copied, setCopied] = useState(false);
   const copy = () => {
     if (disabled) return;
@@ -287,7 +284,7 @@ export function CopyField({
           variant="outline"
           size="icon"
           onClick={copy}
-          aria-label="Copy"
+          aria-label={t("shareUi.copy")}
           disabled={disabled}
           className="h-9 w-9"
         >
@@ -337,6 +334,7 @@ export function SharePeopleTab({
   canManage: boolean;
   onError?: (err: unknown, action: "invite" | "remove") => void;
 }) {
+  const t = useT();
   const share = useActionMutation("share-resource");
   const unshare = useActionMutation("unshare-resource");
 
@@ -346,7 +344,7 @@ export function SharePeopleTab({
   const hasInviteEmail = email.trim().length > 0;
 
   const data = sharesQuery.data;
-  const shares: Share[] = data?.shares ?? [];
+  const shares = data?.shares ?? [];
 
   const handleAdd = () => {
     const trimmed = email.trim().toLowerCase();
@@ -393,7 +391,7 @@ export function SharePeopleTab({
           <div className="flex items-stretch gap-2">
             <Input
               type="email"
-              placeholder="Add people by email"
+              placeholder={t("shareUi.addPeopleByEmail")}
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               onKeyDown={(e) => {
@@ -409,7 +407,7 @@ export function SharePeopleTab({
               <SelectContent>
                 {ROLE_OPTIONS.map((opt) => (
                   <SelectItem key={opt.value} value={opt.value}>
-                    {opt.label}
+                    {t(`shareUi.roles.${opt.value}`)}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -421,20 +419,24 @@ export function SharePeopleTab({
                 checked={notifyPeople}
                 onCheckedChange={(checked) => setNotifyPeople(checked === true)}
               />
-              Notify people
+              {t("shareUi.notifyPeople")}
             </label>
           ) : null}
         </div>
       ) : null}
 
       <div>
-        <div className="mb-2 text-xs font-semibold">People with access</div>
+        <div className="mb-2 text-xs font-semibold">
+          {t("shareUi.peopleWithAccess")}
+        </div>
         <ul className="flex max-h-56 flex-col gap-1 overflow-y-auto p-0 m-0">
           {data?.ownerEmail ? (
             <li className="flex items-center gap-3 px-1 py-1.5 text-sm">
               <Avatar label={data.ownerEmail} />
               <span className="flex-1 min-w-0 truncate">{data.ownerEmail}</span>
-              <span className="text-xs text-muted-foreground">Owner</span>
+              <span className="text-xs text-muted-foreground">
+                {t("shareUi.ownerRole")}
+              </span>
             </li>
           ) : null}
           {shares.map((s) => (
@@ -445,14 +447,14 @@ export function SharePeopleTab({
               <Avatar label={s.principalId} org={s.principalType === "org"} />
               <span className="flex-1 min-w-0 truncate">{s.principalId}</span>
               <span className="text-xs text-muted-foreground">
-                {cap(s.role)}
+                {t(`shareUi.roles.${s.role}`)}
               </span>
               {canManage ? (
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
-                  aria-label="Remove"
+                  aria-label={t("shareUi.remove")}
                   onClick={() => handleRemove(s)}
                   className="h-7 w-7"
                 >
@@ -463,7 +465,7 @@ export function SharePeopleTab({
           ))}
           {!shares.length && !data?.ownerEmail ? (
             <li className="px-1 py-1.5 text-sm text-muted-foreground">
-              No one has access yet.
+              {t("shareUi.noAccessYet")}
             </li>
           ) : null}
         </ul>

package/corpus/templates/clips/app/components/sharing/slack-share-hint.tsx

@@ -1,4 +1,4 @@
-import { appPath, useActionQuery } from "@agent-native/core/client";
+import { appPath, useActionQuery, useT } from "@agent-native/core/client";
 import { IconBrandSlack } from "@tabler/icons-react";
 
 interface SlackInstallation {
@@ -22,6 +22,7 @@ interface SlackInstallationsResponse {
  * `list-slack-installations` query never runs for private shares.
  */
 export function SlackShareHint({ canManage }: { canManage: boolean }) {
+  const t = useT();
   const slack = useActionQuery<SlackInstallationsResponse>(
     "list-slack-installations",
     undefined,
@@ -29,17 +30,19 @@ export function SlackShareHint({ canManage }: { canManage: boolean }) {
   );
 
   const data = slack.data;
-  const installations: SlackInstallation[] = data?.installations ?? [];
-  const connected = installations.some((i) => i.status === "connected");
+  const connected =
+    data?.installations?.some((i) => i.status === "connected") ?? false;
 
   if (connected) {
     return (
       <div className="flex items-center gap-2.5 rounded-md border border-border bg-muted/40 px-3 py-2">
         <IconBrandSlack className="h-4 w-4 shrink-0 text-muted-foreground" />
         <div className="min-w-0">
-          <div className="text-xs font-medium">Plays inline in Slack</div>
+          <div className="text-xs font-medium">
+            {t("slackShareHint.playsInline")}
+          </div>
           <p className="text-[11px] text-muted-foreground">
-            Paste this link in any connected workspace to play it inline.
+            {t("slackShareHint.connectedDescription")}
           </p>
         </div>
       </div>
@@ -60,12 +63,16 @@ export function SlackShareHint({ canManage }: { canManage: boolean }) {
     >
       <IconBrandSlack className="h-4 w-4 shrink-0 text-muted-foreground" />
       <div className="min-w-0 flex-1">
-        <div className="text-xs font-medium">Make it play inline in Slack</div>
+        <div className="text-xs font-medium">
+          {t("slackShareHint.makeInline")}
+        </div>
         <p className="text-[11px] text-muted-foreground">
-          Connect a workspace so this link unfurls as a video.
+          {t("slackShareHint.connectDescription")}
         </p>
       </div>
-      <span className="shrink-0 text-xs font-medium text-primary">Connect</span>
+      <span className="shrink-0 text-xs font-medium text-primary">
+        {t("slackShareHint.connect")}
+      </span>
     </a>
   );
 }

package/corpus/templates/clips/app/components/workspace/branding-editor.tsx

@@ -1,4 +1,8 @@
-import { appBasePath, useActionMutation } from "@agent-native/core/client";
+import {
+  appBasePath,
+  useActionMutation,
+  useT,
+} from "@agent-native/core/client";
 import { IconPalette, IconPhoto } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -52,6 +56,7 @@ export function BrandingEditor({
   initialBrandLogoUrl,
   disabled,
 }: BrandingEditorProps) {
+  const t = useT();
   const [name, setName] = useState(initialName);
   const [brandColor, setBrandColor] = useState(initialBrandColor);
   const [brandLogoUrl, setBrandLogoUrl] = useState<string | null>(
@@ -73,16 +78,18 @@ export function BrandingEditor({
 
   async function handleFile(file: File) {
     if (!file.type.startsWith("image/")) {
-      toast.error("Please upload an image file.");
+      toast.error(t("brandingEditor.uploadImageFile"));
       return;
     }
     try {
       setUploading(true);
       const url = await uploadLogo(file);
       setBrandLogoUrl(url);
-      toast.success("Logo uploaded");
+      toast.success(t("brandingEditor.logoUploaded"));
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Upload failed");
+      toast.error(
+        err instanceof Error ? err.message : t("brandingEditor.uploadFailed"),
+      );
     } finally {
       setUploading(false);
     }
@@ -97,12 +104,14 @@ export function BrandingEditor({
         brandColor,
         brandLogoUrl,
       });
-      toast.success("Branding updated");
+      toast.success(t("brandingEditor.brandingUpdated"));
       qc.invalidateQueries({
         queryKey: ["action", "list-organization-state"],
       });
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to save");
+      toast.error(
+        err instanceof Error ? err.message : t("brandingEditor.saveFailed"),
+      );
     }
   }
 
@@ -111,13 +120,15 @@ export function BrandingEditor({
       <CardHeader>
         <CardTitle className="text-base flex items-center gap-2">
           <IconPalette className="size-4 text-primary" />
-          Branding
+          {t("brandingEditor.title")}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <form onSubmit={handleSave} className="space-y-5">
           <div className="space-y-1.5">
-            <Label htmlFor="ws-name">Organization name</Label>
+            <Label htmlFor="ws-name">
+              {t("brandingEditor.organizationName")}
+            </Label>
             <Input
               id="ws-name"
               value={name}
@@ -127,7 +138,7 @@ export function BrandingEditor({
           </div>
 
           <div className="space-y-1.5">
-            <Label>Brand color</Label>
+            <Label>{t("brandingEditor.brandColor")}</Label>
             <div className="flex items-center gap-2">
               <input
                 type="color"
@@ -135,7 +146,7 @@ export function BrandingEditor({
                 onChange={(e) => setBrandColor(e.target.value)}
                 disabled={disabled}
                 className="h-9 w-16 rounded-md border border-input bg-background p-1 cursor-pointer"
-                aria-label="Brand color picker"
+                aria-label={t("brandingEditor.brandColorPicker")}
               />
               <Input
                 value={brandColor}
@@ -151,7 +162,7 @@ export function BrandingEditor({
                     className="h-6 w-6 rounded-full border border-input"
                     style={{ background: c }}
                     onClick={() => setBrandColor(c)}
-                    aria-label={`Use ${c}`}
+                    aria-label={t("brandingEditor.useColor", { color: c })}
                     disabled={disabled}
                   />
                 ))}
@@ -160,7 +171,7 @@ export function BrandingEditor({
           </div>
 
           <div className="space-y-1.5">
-            <Label>Logo</Label>
+            <Label>{t("brandingEditor.logo")}</Label>
             <div
               className={`rounded-md border border-dashed p-4 flex items-center gap-4 ${
                 dragging ? "bg-primary/5 border-primary" : ""
@@ -186,7 +197,7 @@ export function BrandingEditor({
                 {brandLogoUrl ? (
                   <img
                     src={brandLogoUrl}
-                    alt="Logo preview"
+                    alt={t("brandingEditor.logoPreview")}
                     className="max-h-12 max-w-12 object-contain"
                   />
                 ) : (
@@ -196,15 +207,17 @@ export function BrandingEditor({
               <div className="flex-1 min-w-0">
                 <div className="text-sm text-muted-foreground">
                   {brandLogoUrl
-                    ? "Drop a new image to replace"
-                    : "Drop a PNG / JPG / SVG here"}
+                    ? t("brandingEditor.dropReplace")
+                    : t("brandingEditor.dropHere")}
                 </div>
                 <div className="flex items-center gap-2 mt-2">
                   <Label
                     htmlFor="logo-upload"
                     className="inline-flex items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm cursor-pointer hover:bg-accent"
                   >
-                    {uploading ? "Uploading…" : "Choose file"}
+                    {uploading
+                      ? t("brandingEditor.uploading")
+                      : t("brandingEditor.chooseFile")}
                   </Label>
                   <input
                     id="logo-upload"
@@ -225,7 +238,7 @@ export function BrandingEditor({
                       onClick={() => setBrandLogoUrl(null)}
                       disabled={disabled}
                     >
-                      Remove
+                      {t("brandingEditor.remove")}
                     </Button>
                   ) : null}
                 </div>
@@ -235,7 +248,7 @@ export function BrandingEditor({
 
           <div className="rounded-md border p-4">
             <div className="text-xs uppercase tracking-wide text-muted-foreground mb-2">
-              Preview
+              {t("brandingEditor.preview")}
             </div>
             <div
               className="rounded-md p-3 flex items-center gap-3 text-white"
@@ -256,7 +269,7 @@ export function BrandingEditor({
                 </div>
               )}
               <div className="font-medium truncate">
-                {name || "Organization"}
+                {name || t("brandingEditor.organizationFallback")}
               </div>
             </div>
           </div>
@@ -267,7 +280,9 @@ export function BrandingEditor({
               disabled={disabled || save.isPending}
               className="bg-primary hover:bg-primary/90 text-primary-foreground"
             >
-              {save.isPending ? "Saving…" : "Save"}
+              {save.isPending
+                ? t("brandingEditor.saving")
+                : t("brandingEditor.save")}
             </Button>
           </div>
         </form>

package/corpus/templates/clips/app/components/workspace/engagement-chart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   CartesianGrid,
   Line,
@@ -36,10 +37,11 @@ export function EngagementChart({
   data,
   brandColor = "hsl(var(--primary))",
 }: EngagementChartProps) {
+  const t = useT();
   if (!data || data.length === 0) {
     return (
       <div className="h-64 flex items-center justify-center text-sm text-muted-foreground">
-        No engagement data yet.
+        {t("clipsFinalRaw.noEngagementData")}
       </div>
     );
   }
@@ -87,7 +89,7 @@ export function EngagementChart({
             stroke={brandColor}
             strokeWidth={2}
             dot={false}
-            name="Views"
+            name={t("insightsHub.views")}
           />
           <Line
             type="monotone"
@@ -95,7 +97,7 @@ export function EngagementChart({
             stroke="#22c55e"
             strokeWidth={2}
             dot={false}
-            name="Reactions"
+            name={t("insightsHub.reactions")}
           />
           <Line
             type="monotone"
@@ -103,7 +105,7 @@ export function EngagementChart({
             stroke="#f97316"
             strokeWidth={2}
             dot={false}
-            name="Comments"
+            name={t("insightsHub.comments")}
           />
         </LineChart>
       </ResponsiveContainer>

package/corpus/templates/clips/app/components/workspace/insights-hub.tsx

@@ -1,4 +1,4 @@
-import { appBasePath, useActionQuery } from "@agent-native/core/client";
+import { appBasePath, useActionQuery, useT } from "@agent-native/core/client";
 import { IconChartLine, IconDownload, IconUsers } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 
@@ -48,6 +48,7 @@ interface InsightsResponse {
 }
 
 export function InsightsHub() {
+  const t = useT();
   const [days, setDays] = useState("30");
   const { data, isLoading } = useActionQuery<InsightsResponse>(
     "get-organization-insights",
@@ -71,47 +72,51 @@ export function InsightsHub() {
     <>
       <PageHeader>
         <h1 className="text-base font-semibold tracking-tight truncate">
-          Insights
+          {t("insightsHub.title")}
         </h1>
         <div className="ms-auto flex items-center gap-2">
           <Select value={days} onValueChange={setDays}>
             <SelectTrigger className="h-8 w-36">
-              <SelectValue placeholder="Period" />
+              <SelectValue placeholder={t("insightsHub.period")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="7">Last 7 days</SelectItem>
-              <SelectItem value="14">Last 14 days</SelectItem>
-              <SelectItem value="30">Last 30 days</SelectItem>
-              <SelectItem value="90">Last 90 days</SelectItem>
+              <SelectItem value="7">{t("insightsHub.last7Days")}</SelectItem>
+              <SelectItem value="14">{t("insightsHub.last14Days")}</SelectItem>
+              <SelectItem value="30">{t("insightsHub.last30Days")}</SelectItem>
+              <SelectItem value="90">{t("insightsHub.last90Days")}</SelectItem>
             </SelectContent>
           </Select>
           <Button variant="outline" size="sm" className="h-8" asChild>
             <a href={csvUrl} download>
               <IconDownload className="size-4 me-1.5" />
-              Export CSV
+              {t("insightsHub.exportCsv")}
             </a>
           </Button>
         </div>
       </PageHeader>
       <div className="p-6 max-w-6xl mx-auto space-y-6">
         <p className="text-sm text-muted-foreground">
-          Engagement across your organization over the last {days} days.
+          {t("insightsHub.description", { days })}
         </p>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-          <StatCard label="Views" value={totals.views} loading={isLoading} />
           <StatCard
-            label="Reactions"
+            label={t("insightsHub.views")}
+            value={totals.views}
+            loading={isLoading}
+          />
+          <StatCard
+            label={t("insightsHub.reactions")}
             value={totals.reactions}
             loading={isLoading}
           />
           <StatCard
-            label="Comments"
+            label={t("insightsHub.comments")}
             value={totals.comments}
             loading={isLoading}
           />
           <StatCard
-            label="Recordings"
+            label={t("insightsHub.recordings")}
             value={totals.recordings}
             loading={isLoading}
           />
@@ -121,7 +126,7 @@ export function InsightsHub() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <IconChartLine className="size-4 text-primary" />
-              Engagement trend
+              {t("insightsHub.engagementTrend")}
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -136,31 +141,39 @@ export function InsightsHub() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Top videos</CardTitle>
+              <CardTitle className="text-base">
+                {t("insightsHub.topVideos")}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <Tabs defaultValue="views">
                 <TabsList>
-                  <TabsTrigger value="views">Views</TabsTrigger>
-                  <TabsTrigger value="reactions">Reactions</TabsTrigger>
-                  <TabsTrigger value="comments">Comments</TabsTrigger>
+                  <TabsTrigger value="views">
+                    {t("insightsHub.views")}
+                  </TabsTrigger>
+                  <TabsTrigger value="reactions">
+                    {t("insightsHub.reactions")}
+                  </TabsTrigger>
+                  <TabsTrigger value="comments">
+                    {t("insightsHub.comments")}
+                  </TabsTrigger>
                 </TabsList>
                 <TabsContent value="views" className="pt-3">
                   <TopVideosTable
                     rows={data?.topVideos.byViews ?? []}
-                    metricLabel="Views"
+                    metricLabel={t("insightsHub.views")}
                   />
                 </TabsContent>
                 <TabsContent value="reactions" className="pt-3">
                   <TopVideosTable
                     rows={data?.topVideos.byReactions ?? []}
-                    metricLabel="Reactions"
+                    metricLabel={t("insightsHub.reactions")}
                   />
                 </TabsContent>
                 <TabsContent value="comments" className="pt-3">
                   <TopVideosTable
                     rows={data?.topVideos.byComments ?? []}
-                    metricLabel="Comments"
+                    metricLabel={t("insightsHub.comments")}
                   />
                 </TabsContent>
               </Tabs>
@@ -171,7 +184,7 @@ export function InsightsHub() {
             <CardHeader className="pb-3">
               <CardTitle className="text-base flex items-center gap-2">
                 <IconUsers className="size-4 text-primary" />
-                Top creators
+                {t("insightsHub.topCreators")}
               </CardTitle>
             </CardHeader>
             <CardContent>