fix(apollo-vertex): a11y, i18n, and replay handling in dashboard template

Address review findings on the dashboard template:
- AutopilotInsight: add aria-label to the icon-only close button, mark its
  SVG aria-hidden, and make the decorative Autopilot logos alt="".
- Route user-facing chrome through t() in AutopilotInsight, DashboardCards,
  and DashboardLoading; add the new keys to locales/en.json.
- DashboardLoading: replace the triggerReplay reset-on-prop-change effect
  with a key-based remount of an extracted LoadingSequence.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: frankkluijtmans

apps/apollo-vertex/locales/en.json

@@ -7,13 +7,18 @@
   "ai_assistant": "AI Assistant",
   "ai_response_disclaimer": "AI-generated responses should be reviewed for accuracy.",
   "all": "All",
+  "amount": "Amount",
   "analytics": "Analytics",
   "apollo_vertex": "Apollo Vertex",
   "apollo_vertex_description": "- UiPath Apollo Vertex",
   "asc": "Asc",
   "ask_ai": "Ask AI",
   "assistant": "Assistant",
   "autopilot_empty_description": "Ask me anything about your automation data.",
+  "autopilot_insight": "Autopilot Insight",
+  "autopilot_insight_analyzing": "Analyzing {{source}}",
+  "autopilot_response_area": "Autopilot response area",
+  "autopilot_response_placeholder": "Chat UX content will appear here",
   "bad_response": "Bad response",
   "business_user": "Business user",
   "cancel": "Cancel",
@@ -30,17 +35,20 @@
   "close_sidebar": "Close sidebar",
   "collapse_all": "Collapse all",
   "collapse_tool_calls": "Collapse tool calls",
+  "compliance_pass_rates": "Compliance Pass Rates",
   "copied": "Copied!",
   "copy": "Copy",
   "copy_code": "Copy code",
   "copy_conversation": "Copy conversation",
   "copy_conversation_failed": "Couldn't copy conversation",
   "copy_failed": "Couldn't copy",
   "copy_payment_id": "Copy payment ID",
+  "creating_your_overview": "Creating your overview...",
   "custom": "Custom",
   "dark": "Dark",
   "dark_mode": "Dark Mode",
   "dashboard": "Dashboard",
+  "date": "Date",
   "desc": "Desc",
   "destructive": "Destructive",
   "displays_mobile_sidebar": "Displays the mobile sidebar.",
@@ -60,6 +68,7 @@
   "feedback_vote_down": "Vote down",
   "feedback_vote_up": "Vote up",
   "french": "French",
+  "from_last_week": "from last week",
   "german": "German",
   "go_to_first_page": "Go to first page",
   "go_to_last_page": "Go to last page",
@@ -71,6 +80,7 @@
   "image_preview": "Image preview",
   "import": "Import",
   "info": "Info",
+  "invoice": "Invoice",
   "japanese": "Japanese",
   "korean": "Korean",
   "language": "Language",
@@ -107,7 +117,11 @@
   "previous": "Previous",
   "previous_slide": "Previous slide",
   "primary_button": "Primary Button",
+  "processing_activity": "Processing Activity",
+  "processing_pipeline": "Processing Pipeline",
   "projects": "Projects",
+  "recent_activity": "Recent Activity",
+  "recent_invoices": "Recent Invoices",
   "remove_file": "Remove {{name}}",
   "remove_quoted_text": "Remove quoted text",
   "reset_to_default": "Reset to Default",
@@ -139,6 +153,7 @@
   "spanish": "Spanish",
   "spanish-mx": "Spanish (Mexico)",
   "start_conversation_with": "Start a conversation with {{name}}",
+  "status": "Status",
   "stop": "Stop",
   "success": "Success",
   "system": "System",
@@ -163,6 +178,7 @@
   "upload_files": "Upload files",
   "user_email_placeholder": "user@company.com",
   "user_profile": "Profile and settings",
+  "vendor": "Vendor",
   "verifying_access": "Verifying access…",
   "view": "View",
   "view_customer": "View customer",

apps/apollo-vertex/templates/dashboard/AutopilotInsight.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "react-i18next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface AutopilotInsightProps {
@@ -11,6 +12,8 @@ export function AutopilotInsight({
   onClose,
   sourceCardTitle,
 }: AutopilotInsightProps) {
+  const { t } = useTranslation();
+
   return (
     <Card
       variant="glass"
@@ -20,6 +23,7 @@ export function AutopilotInsight({
       <button
         type="button"
         onClick={onClose}
+        aria-label={t("close")}
         className="absolute top-5 right-5 z-20 size-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all"
       >
         <svg
@@ -31,6 +35,7 @@ export function AutopilotInsight({
           strokeLinecap="round"
           strokeLinejoin="round"
           className="size-4"
+          aria-hidden="true"
         >
           <path d="M18 6 6 18" />
           <path d="m6 6 12 12" />
@@ -41,20 +46,20 @@ export function AutopilotInsight({
         <div className="flex items-center gap-2">
           <img
             src="/Autopilot_dark.svg"
-            alt="Autopilot"
+            alt=""
             className="size-5 block dark:hidden"
           />
           <img
             src="/Autopilot_light.svg"
-            alt="Autopilot"
+            alt=""
             className="size-5 hidden dark:block"
           />
           <CardTitle className="text-sm font-bold tracking-tight">
-            Autopilot Insight
+            {t("autopilot_insight")}
           </CardTitle>
         </div>
         <p className="text-xs text-muted-foreground">
-          Analyzing {sourceCardTitle}
+          {t("autopilot_insight_analyzing", { source: sourceCardTitle })}
         </p>
       </CardHeader>
 
@@ -63,10 +68,10 @@ export function AutopilotInsight({
         <div className="flex-1 border border-dashed border-muted-foreground/15 bg-muted/30 rounded-lg flex items-center justify-center">
           <div className="text-center">
             <p className="text-sm text-muted-foreground/60">
-              Autopilot response area
+              {t("autopilot_response_area")}
             </p>
             <p className="text-xs text-muted-foreground/40 mt-1">
-              Chat UX content will appear here
+              {t("autopilot_response_placeholder")}
             </p>
           </div>
         </div>

apps/apollo-vertex/templates/dashboard/DashboardCards.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 import { AlertTriangle, CheckCircle, Clock, XCircle } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
@@ -120,6 +123,8 @@ const complianceChecks = [
 // --- Card components ---
 
 export function KpiCards({ kpis }: { kpis: KpiItem[] }) {
+  const { t } = useTranslation();
+
   return (
     <>
       {kpis.map((kpi) => (
@@ -135,8 +140,8 @@ export function KpiCards({ kpis }: { kpis: KpiItem[] }) {
           <CardContent>
             <div className="text-2xl font-bold">{kpi.value}</div>
             <p className="text-xs text-muted-foreground mt-1">
-              <span className="text-emerald-500">{kpi.change}</span> from last
-              week
+              <span className="text-emerald-500">{kpi.change}</span>{" "}
+              {t("from_last_week")}
             </p>
           </CardContent>
         </Card>
@@ -146,20 +151,22 @@ export function KpiCards({ kpis }: { kpis: KpiItem[] }) {
 }
 
 export function InvoiceTable() {
+  const { t } = useTranslation();
+
   return (
     <Card variant="glass">
       <CardHeader>
-        <CardTitle>Recent Invoices</CardTitle>
+        <CardTitle>{t("recent_invoices")}</CardTitle>
       </CardHeader>
       <CardContent>
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Invoice</TableHead>
-              <TableHead>Vendor</TableHead>
-              <TableHead>Amount</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Date</TableHead>
+              <TableHead>{t("invoice")}</TableHead>
+              <TableHead>{t("vendor")}</TableHead>
+              <TableHead>{t("amount")}</TableHead>
+              <TableHead>{t("status")}</TableHead>
+              <TableHead>{t("date")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -193,10 +200,12 @@ export function InvoiceTable() {
 }
 
 export function ActivityBarChart() {
+  const { t } = useTranslation();
+
   return (
     <Card variant="glass">
       <CardHeader>
-        <CardTitle>Processing Activity</CardTitle>
+        <CardTitle>{t("processing_activity")}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="flex items-end gap-3 h-32">
@@ -219,10 +228,12 @@ export function ActivityBarChart() {
 }
 
 export function ActivityFeed() {
+  const { t } = useTranslation();
+
   return (
     <Card variant="glass">
       <CardHeader>
-        <CardTitle>Recent Activity</CardTitle>
+        <CardTitle>{t("recent_activity")}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
@@ -242,10 +253,12 @@ export function ActivityFeed() {
 }
 
 export function PipelineProgress() {
+  const { t } = useTranslation();
+
   return (
     <Card variant="glass">
       <CardHeader>
-        <CardTitle>Processing Pipeline</CardTitle>
+        <CardTitle>{t("processing_pipeline")}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
@@ -265,10 +278,12 @@ export function PipelineProgress() {
 }
 
 export function ComplianceProgress() {
+  const { t } = useTranslation();
+
   return (
     <Card variant="glass">
       <CardHeader>
-        <CardTitle>Compliance Pass Rates</CardTitle>
+        <CardTitle>{t("compliance_pass_rates")}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">

apps/apollo-vertex/templates/dashboard/DashboardLoading.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 type Phase = "logo" | "skeleton" | "done";
 
@@ -10,6 +11,8 @@ interface DashboardLoadingProps {
 }
 
 function LogoPhase({ exiting }: { exiting: boolean }) {
+  const { t } = useTranslation();
+
   return (
     <div
       className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-500 ${
@@ -38,7 +41,7 @@ function LogoPhase({ exiting }: { exiting: boolean }) {
 
       {/* Loading text */}
       <p className="mt-6 text-sm text-muted-foreground animate-pulse">
-        Creating your overview...
+        {t("creating_your_overview")}
       </p>
 
       <style>{`
@@ -80,21 +83,13 @@ function SkeletonPhase({ exiting }: { exiting: boolean }) {
   );
 }
 
-export function DashboardLoading({
-  children,
-  triggerReplay,
-}: DashboardLoadingProps) {
-  const [phase, setPhase] = useState<Phase>("done");
+// Plays the logo → skeleton → content intro once, then renders children.
+// It owns its phase state from mount; to replay, the parent gives it a new
+// `key` so it remounts — no resetting state in response to a prop change.
+function LoadingSequence({ children }: { children: React.ReactNode }) {
+  const [phase, setPhase] = useState<Phase>("logo");
   const [exiting, setExiting] = useState(false);
 
-  useEffect(() => {
-    if (triggerReplay === 0) return;
-    if (triggerReplay) {
-      setExiting(false);
-      setPhase("logo");
-    }
-  }, [triggerReplay]);
-
   useEffect(() => {
     if (phase === "done") return;
 
@@ -133,3 +128,18 @@ export function DashboardLoading({
     </div>
   );
 }
+
+export function DashboardLoading({
+  children,
+  triggerReplay,
+}: DashboardLoadingProps) {
+  // No replay requested — render content directly with the same fade-in the
+  // sequence ends on. Each new `triggerReplay` value remounts the sequence.
+  if (!triggerReplay) {
+    return (
+      <div className="animate-in fade-in duration-500 h-full">{children}</div>
+    );
+  }
+
+  return <LoadingSequence key={triggerReplay}>{children}</LoadingSequence>;
+}