From a33a0acb35f04206a90de14522a93a293b0f041b Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Wed, 18 Mar 2026 11:22:51 -0500
Subject: [PATCH] feat(templates): make device hostnames clickable in template
 push and progress

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/templates/PushProgressPanel.tsx  | 3 ++-
 frontend/src/components/templates/TemplatePushWizard.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/templates/PushProgressPanel.tsx b/frontend/src/components/templates/PushProgressPanel.tsx
index 643b6e0..98a6615 100644
--- a/frontend/src/components/templates/PushProgressPanel.tsx
+++ b/frontend/src/components/templates/PushProgressPanel.tsx
@@ -9,6 +9,7 @@ import { CheckCircle, XCircle, AlertTriangle, Loader2, Clock } from 'lucide-reac
 import { templatesApi } from '@/lib/templatesApi'
 import { cn } from '@/lib/utils'
 import { formatDateTime } from '@/lib/utils'
+import { DeviceLink } from '@/components/ui/device-link'
 
 interface PushProgressPanelProps {
   tenantId: string
@@ -110,7 +111,7 @@ export function PushProgressPanel({ tenantId, rolloutId, onClose }: PushProgress
                 )}
               />
               <div className="flex-1 min-w-0">
-                <div className="text-xs text-text-primary truncate">{job.hostname}</div>
+                <div className="text-xs text-text-primary truncate"><DeviceLink tenantId={tenantId} deviceId={job.device_id}>{job.hostname}</DeviceLink></div>
                 {job.error_message && (
                   <div className="text-[10px] text-error truncate">{job.error_message}</div>
                 )}
diff --git a/frontend/src/components/templates/TemplatePushWizard.tsx b/frontend/src/components/templates/TemplatePushWizard.tsx
index c064b26..7fa927c 100644
--- a/frontend/src/components/templates/TemplatePushWizard.tsx
+++ b/frontend/src/components/templates/TemplatePushWizard.tsx
@@ -29,6 +29,7 @@ import {
   type TemplateResponse,
 } from '@/lib/templatesApi'
 import { deviceGroupsApi, metricsApi } from '@/lib/api'
+import { DeviceLink } from '@/components/ui/device-link'
 import { PushProgressPanel } from './PushProgressPanel'
 
 interface TemplatePushWizardProps {
@@ -200,7 +201,7 @@ export function TemplatePushWizard({ open, onClose, tenantId, template }: Templa
                       onCheckedChange={() => toggleDevice(device.id)}
                     />
                     <div className="flex-1 min-w-0">
-                      <div className="text-xs text-text-primary truncate">{device.hostname}</div>
+                      <div className="text-xs text-text-primary truncate"><DeviceLink tenantId={tenantId} deviceId={device.id}>{device.hostname}</DeviceLink></div>
                       <div className="text-[10px] text-text-muted">{device.ip_address}</div>
                     </div>
                     <div