From 02e84ed548dd2517d861f6646a28215a958f3293 Mon Sep 17 00:00:00 2001
From: domrichardson <100129001+domrichardson@users.noreply.github.com>
Date: Thu, 25 Jun 2026 09:51:45 +0100
Subject: [PATCH] feat: Updates button

---
 web/app/servers/[id]/page.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/web/app/servers/[id]/page.tsx b/web/app/servers/[id]/page.tsx
index f758e39..222eae4 100644
--- a/web/app/servers/[id]/page.tsx
+++ b/web/app/servers/[id]/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
@@ -314,6 +314,15 @@ export default function ServerDetailPage() {
     return (
         <div className="p-8">
             {showGenerateModal && <GenerateKeyModal onClose={() => setShowGenerateModal(false)} onSubmit={(opts) => generateKey(opts)} isPending={isGenerating} />}
+            {showUpdatesModal && server.available_updates && (
+                <UpdatesModal
+                    updates={server.available_updates}
+                    onClose={() => setShowUpdatesModal(false)}
+                    onApply={() => applyUpdates()}
+                    isApplying={isApplying}
+                    applySuccess={applySuccess}
+                />
+            )}
 
             <div className="mb-6 flex items-start justify-between">
                 <div>
@@ -329,6 +338,18 @@ export default function ServerDetailPage() {
                     <p className="mt-1 font-mono text-sm text-text-secondary">{server.ip_address}</p>
                 </div>
                 <div className="flex gap-2">
+                    {server.available_updates && server.available_updates.length > 0 && (
+                        <Button
+                            variant="secondary"
+                            onClick={() => setShowUpdatesModal(true)}
+                            className="border-warning/50 text-warning hover:border-warning hover:bg-warning/10"
+                        >
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+                            </svg>
+                            {server.available_updates.length} OS Update{server.available_updates.length !== 1 ? "s" : ""}
+                        </Button>
+                    )}
                     <Button variant="secondary" onClick={() => setShowGenerateModal(true)}>
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                             <path