From d2471278ab35cdc6cc1cb3f33b01e8e71eae04a0 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Thu, 12 Mar 2026 15:45:14 -0500
Subject: [PATCH] feat(frontend): integrate WinBox and SSH buttons into device
 page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../tenants/$tenantId/devices/$deviceId.tsx            | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
index 9eb6fdb..fefdc08 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
@@ -55,6 +55,8 @@ import { InterfaceGauges } from '@/components/network/InterfaceGauges'
 import { useSimpleConfigMode } from '@/hooks/useSimpleConfig'
 import { SimpleModeToggle } from '@/components/simple-config/SimpleModeToggle'
 import { SimpleConfigView } from '@/components/simple-config/SimpleConfigView'
+import { WinBoxButton } from '@/components/fleet/WinBoxButton'
+import { SSHTerminal } from '@/components/fleet/SSHTerminal'
 
 export const Route = createFileRoute(
   '/_authenticated/tenants/$tenantId/devices/$deviceId',
@@ -450,6 +452,14 @@ function DeviceDetailPage() {
         </div>
         <div className="flex items-center gap-3">
           <SimpleModeToggle mode={mode} onModeChange={toggleMode} />
+          {user?.role !== 'viewer' && (
+            <div className="flex gap-2">
+              {device.routeros_version !== null && (
+                <WinBoxButton tenantId={tenantId} deviceId={deviceId} />
+              )}
+              <SSHTerminal tenantId={tenantId} deviceId={deviceId} deviceName={device.hostname} />
+            </div>
+          )}
           <div className="flex gap-2">
             {canWrite(user) && (
               <Button variant="outline" size="sm" onClick={() => setEditOpen(true)} data-testid="button-edit-device">