Updates tab (apt list/refresh/upgrade/changelog, reboot flag) on a new background tasks package with live WS streaming; header power button with hostname confirmation

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Shell.tsx

@@ -6,16 +6,19 @@ import KeyBar from './KeyBar'
 import Dashboard from './Dashboard'
 import Services from './Services'
 import Cron from './Cron'
+import Updates from './Updates'
+import Power from './Power'
 
 const GROUPS: Group[] = [
   { id: 'dashboard', label: 'Dashboard', icon: '◔', page: true },
   { id: 'terminal', label: 'Terminal', icon: '>_' },
   { id: 'services', label: 'Services', icon: '⚙', page: true },
   { id: 'cron', label: 'Cron', icon: '⏱', page: true },
+  { id: 'updates', label: 'Updates', icon: '⇪', page: true },
   { id: 'zfs', label: 'ZFS', icon: '▤', soon: true },
 ]
 
-type View = 'terminal' | 'dashboard' | 'services' | 'cron'
+type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates'
 
 function fmtUptime(s: number): string {
   const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60)
@@ -69,6 +72,7 @@ export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () =>
         <span className="spacer" />
         <span className="stat" title="load average">{me.load}</span>
         <span className={'dot ' + (online ? 'ok' : 'bad')} title={online ? 'connected' : 'disconnected'} />
+        <Power host={me.host} rebootNeeded={me.reboot_needed} />
         <button className="link" onClick={logout}>logout</button>
       </header>
 
@@ -83,6 +87,7 @@ export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () =>
           {view === 'dashboard' && <Dashboard />}
           {view === 'services' && <Services />}
           {view === 'cron' && <Cron />}
+          {view === 'updates' && <Updates />}
           {termView && terms.length === 0 && (
             <div className="center muted">
               <div>No terminals.</div>
@@ -105,7 +110,7 @@ export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () =>
         <span>{me.version.startsWith('v') ? me.version : 'v' + me.version}</span>
         <span>up {fmtUptime(me.uptime)}</span>
         <span className="spacer" />
-        <span className="muted">{view === 'dashboard' ? 'Dashboard' : view === 'services' ? 'Services' : view === 'cron' ? 'Cron' : activeTerm ? activeTerm.name : ''}</span>
+        <span className="muted">{view === 'dashboard' ? 'Dashboard' : view === 'services' ? 'Services' : view === 'cron' ? 'Cron' : view === 'updates' ? 'Updates' : activeTerm ? activeTerm.name : ''}</span>
       </footer>
     </div>
   )