fix(dashboard): i18n aria-labels and title attributes for 3 pages (#3195)

Replace hardcoded English strings in aria-label and title attributes
with t() calls for SessionDetailPage (12), AuthKeysPage (3), and
PipelineDetailPage (1). Adds translation keys to both en.ts and it.ts
catalogs.

Closes #3194

— Daedalus 🏛️

Co-authored-by: aegis-gh-agent[bot] <272581873+aegis-gh-agent[bot]@users.noreply.github.com>

Author: OneStepAt4time

dashboard/src/i18n/en.ts

@@ -70,6 +70,7 @@ export const en = {
     noSteps: 'No steps yet',
     loadingPipeline: 'Loading pipeline…',
     failedFetch: 'Failed to fetch pipeline',
+    pipelineBreadcrumb: 'Pipeline breadcrumb',
     statusLabel: 'Status',
     sessionLabel: 'Session',
     createdLabel: 'Created',
@@ -163,6 +164,9 @@ export const en = {
     hideSecret: 'Hide secret',
     revealSecret: 'Reveal secret',
     copySecret: 'Copy secret',
+    authDismissBanner: 'Dismiss banner',
+    authToggleSecret: 'Toggle secret visibility',
+    authCopySecret: 'Copy secret to clipboard',
     existingKeys: 'Existing Keys',
     keysConfigured: '{count} key(s) configured',
     noAuthKeysYet: 'No auth keys yet',
@@ -386,6 +390,16 @@ export const en = {
     approveFailed: 'Approve failed',
     rejectFailed: 'Reject failed',
     interruptFailed: 'Interrupt failed',
+    // Session action aria-labels
+    sessionSlashCommand: 'Slash command',
+    sessionCaptureScreenshot: 'Capture screenshot',
+    sessionSendEscape: 'Send Escape to session',
+    sessionInterruptCtrlC: 'Interrupt session with Ctrl+C',
+    sessionSendMessage: 'Send message',
+    sessionSendMessageCmd: 'Send message (⌘↵)',
+    sessionInsertSlashCommand: 'Insert slash command',
+    sessionInsertSlashCommandInput: 'Insert selected slash command into the message input',
+    sessionSendSlashCommand: 'Send selected slash command immediately',
     escapeFailed: 'Escape failed',
     sendFailed: 'Failed to send message',
     sendSlashFailed: 'Failed to send slash command',

dashboard/src/i18n/it.ts

@@ -72,6 +72,7 @@ export const it = {
     noSteps: 'Nessun passo ancora',
     loadingPipeline: 'Caricamento pipeline…',
     failedFetch: 'Impossibile recuperare la pipeline',
+    pipelineBreadcrumb: 'Navigazione pipeline',
     statusLabel: 'Stato',
     sessionLabel: 'Sessione',
     createdLabel: 'Creata',
@@ -166,6 +167,9 @@ export const it = {
     hideSecret: 'Nascondi segreto',
     revealSecret: 'Rivela segreto',
     copySecret: 'Copia segreto',
+    authDismissBanner: 'Chiudi banner',
+    authToggleSecret: 'Mostra/nascondi chiave segreta',
+    authCopySecret: 'Copia chiave segreta negli appunti',
     existingKeys: 'Chiavi Esistenti',
     keysConfigured: '{count} chiave/i configurata/e',
     noAuthKeysYet: 'Nessuna chiave API ancora',
@@ -389,6 +393,15 @@ export const it = {
     approveFailed: 'Approvazione fallita',
     rejectFailed: 'Rifiuto fallito',
     interruptFailed: 'Interruzione fallita',
+    sessionSlashCommand: 'Comando slash',
+    sessionCaptureScreenshot: 'Cattura screenshot',
+    sessionSendEscape: 'Invia Escape alla sessione',
+    sessionInterruptCtrlC: 'Interrompi sessione con Ctrl+C',
+    sessionSendMessage: 'Invia messaggio',
+    sessionSendMessageCmd: 'Invia messaggio (⌘↵)',
+    sessionInsertSlashCommand: 'Inserisci comando slash',
+    sessionInsertSlashCommandInput: 'Inserisci il comando slash selezionato nel campo messaggio',
+    sessionSendSlashCommand: 'Invia il comando slash selezionato immediatamente',
     escapeFailed: 'Escape fallito',
     sendFailed: 'Impossibile inviare il messaggio',
     sendSlashFailed: 'Impossibile inviare il comando slash',

dashboard/src/pages/AuthKeysPage.tsx

@@ -222,7 +222,7 @@ export default function AuthKeysPage() {
           <button
             type="button"
             onClick={dismissUsersBanner}
-            aria-label="Dismiss banner"
+            aria-label={t('authKeys.authDismissBanner')}
             className="shrink-0 rounded p-1 text-slate-400 transition-colors hover:bg-slate-700/40 hover:text-slate-200"
           >
             <X className="h-3.5 w-3.5" />
@@ -330,7 +330,7 @@ export default function AuthKeysPage() {
                   type="button"
                   onClick={() => setSecretVisible((current) => !current)}
                   className="flex min-h-[40px] items-center gap-2 rounded border border-[var(--color-void-lighter)] bg-[var(--color-void)] px-3 py-2 text-xs font-medium text-[var(--color-text-primary)] transition-colors hover:border-[var(--color-accent-cyan)]/30 hover:text-[var(--color-accent-cyan)]"
-                  aria-label="Toggle secret visibility"
+                  aria-label={t('authKeys.authToggleSecret')}
                 >
                   {secretVisible ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                   {secretVisible ? t('authKeys.hideSecret') : t('authKeys.revealSecret')}
@@ -339,7 +339,7 @@ export default function AuthKeysPage() {
                   type="button"
                   onClick={() => void handleCopySecret()}
                   className="flex min-h-[40px] items-center gap-2 rounded border border-[var(--color-void-lighter)] bg-[var(--color-void)] px-3 py-2 text-xs font-medium text-[var(--color-text-primary)] transition-colors hover:border-[var(--color-accent-cyan)]/30 hover:text-[var(--color-accent-cyan)]"
-                  aria-label="Copy secret to clipboard"
+                  aria-label={t('authKeys.authCopySecret')}
                 >
                   <Copy className="h-3.5 w-3.5" />
                   {t('authKeys.copySecret')}

dashboard/src/pages/PipelineDetailPage.tsx

@@ -120,7 +120,7 @@ export default function PipelineDetailPage() {
   return (
     <div className="flex flex-col gap-6">
       {/* Breadcrumb */}
-      <nav className="text-xs text-[var(--color-text-muted)] flex items-center gap-1" aria-label="Pipeline breadcrumb">
+      <nav className="text-xs text-[var(--color-text-muted)] flex items-center gap-1" aria-label={t('pipelines.pipelineBreadcrumb')}>
         <Link to="/pipelines" className="hover:text-[var(--color-accent-cyan)] transition-colors">
           {t('pipelines.title')}
         </Link>

dashboard/src/pages/SessionDetailPage.tsx

@@ -498,7 +498,7 @@ export default function SessionDetailPage() {
           onClick={handleInsertSlashCommand}
           disabled={slashSending || !h.alive}
           className={buttonClass}
-          title="Insert selected slash command into the message input"
+          title={t('sessionDetail.sessionInsertSlashCommandInput')}
         >
           {t('sessionDetail.insertSlash')}
         </button>
@@ -508,7 +508,7 @@ export default function SessionDetailPage() {
           onClick={handleSendSlashCommand}
           disabled={slashSending || !h.alive}
           className={accentButtonClass}
-          title="Send selected slash command immediately"
+          title={t('sessionDetail.sessionSendSlashCommand')}
         >
           {slashSending ? t('sessionDetail.sendingSlash') : t('sessionDetail.runSlash')}
         </button>
@@ -519,7 +519,7 @@ export default function SessionDetailPage() {
             onClick={handleCaptureScreenshot}
             disabled={capturingScreenshot || !h.alive}
             className={buttonClass}
-            title="Capture screenshot"
+            title={t('sessionDetail.sessionCaptureScreenshot')}
           >
             {capturingScreenshot ? t('sessionDetail.capturing') : t('sessionDetail.screenshot')}
           </button>
@@ -532,7 +532,7 @@ export default function SessionDetailPage() {
               onClick={handleInterrupt}
               aria-label={t('sessionDetail.interrupt')}
               className={buttonClass}
-              title="Interrupt (Ctrl+C)"
+              title={t('sessionDetail.sessionInterruptCtrlC')}
             >
               {t('sessionDetail.interrupt')}
             </button>
@@ -541,7 +541,7 @@ export default function SessionDetailPage() {
               onClick={handleEscape}
               aria-label={t('sessionDetail.escape')}
               className={buttonClass}
-              title="Send Escape"
+              title={t('sessionDetail.sessionSendEscape')}
             >
               {t('sessionDetail.escape')}
             </button>
@@ -820,43 +820,43 @@ export default function SessionDetailPage() {
               <div className="flex items-center gap-1">
                 <button
                   type="button"
-                  title="Insert slash command"
+                  title={t('sessionDetail.sessionInsertSlashCommand')}
                   onClick={() => { setMsgInput((v) => v || '/'); getVisibleMessageInput()?.focus(); }}
                   disabled={!h.alive}
                   className="inline-flex h-8 w-8 items-center justify-center rounded text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-void-lighter)] hover:text-[var(--color-text-primary)] disabled:opacity-30"
-                  aria-label="Slash command"
+                  aria-label={t('sessionDetail.sessionSlashCommand')}
                 >
                   <span className="text-sm font-mono font-bold">/</span>
                 </button>
                 {!screenshotUnsupported && (
                   <button
                     type="button"
-                    title="Capture screenshot"
+                    title={t('sessionDetail.sessionCaptureScreenshot')}
                     onClick={handleCaptureScreenshot}
                     disabled={capturingScreenshot || !h.alive}
                     className="inline-flex h-8 w-8 items-center justify-center rounded text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-void-lighter)] hover:text-[var(--color-text-primary)] disabled:opacity-30"
-                    aria-label="Capture screenshot"
+                    aria-label={t('sessionDetail.sessionCaptureScreenshot')}
                   >
                     <span className="text-xs">⬛</span>
                   </button>
                 )}
                 <button
                   type="button"
-                  title="Send Escape"
+                  title={t('sessionDetail.sessionSendEscape')}
                   onClick={handleEscape}
                   disabled={!h.alive}
                   className="inline-flex h-8 items-center justify-center rounded px-1.5 text-[10px] font-mono text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-void-lighter)] hover:text-[var(--color-text-primary)] disabled:opacity-30"
-                  aria-label="Send Escape to session"
+                  aria-label={t('sessionDetail.sessionSendEscape')}
                 >
                   Esc
                 </button>
                 <button
                   type="button"
-                  title="Interrupt (Ctrl+C)"
+                  title={t('sessionDetail.sessionInterruptCtrlC')}
                   onClick={handleInterrupt}
                   disabled={!h.alive}
                   className="inline-flex h-8 items-center justify-center rounded px-1.5 text-[10px] font-mono text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-void-lighter)] hover:text-[var(--color-text-primary)] disabled:opacity-30"
-                  aria-label="Interrupt session with Ctrl+C"
+                  aria-label={t('sessionDetail.sessionInterruptCtrlC')}
                 >
                   ^C
                 </button>
@@ -882,7 +882,7 @@ export default function SessionDetailPage() {
                 onClick={handleSend}
                 disabled={sending || !msgInput.trim() || !h.alive}
                 className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded border border-[var(--color-cta-bg)]/50 bg-[var(--color-cta-bg)]/15 p-2.5 text-[var(--color-cta-bg)] transition-all hover:bg-[var(--color-cta-bg)]/30 disabled:cursor-not-allowed disabled:opacity-30"
-                aria-label="Send message (⌘↵)"
+                aria-label={t('sessionDetail.sessionSendMessageCmd')}
               >
                 <Send className="h-4 w-4" />
               </button>
@@ -1014,7 +1014,7 @@ export default function SessionDetailPage() {
                 onClick={handleSend}
                 disabled={sending || !msgInput.trim() || !h.alive}
                 className="flex min-h-[48px] min-w-[48px] items-center justify-center rounded-xl border border-[var(--color-accent-cyan)]/30 bg-[var(--color-accent-cyan)]/10 p-3 text-[var(--color-accent-cyan)] transition-colors hover:bg-[var(--color-accent-cyan)]/20 disabled:cursor-not-allowed disabled:opacity-30"
-                aria-label="Send message"
+                aria-label={t('sessionDetail.sessionSendMessage')}
               >
                 <Send className="h-4 w-4" />
               </button>