fix: machine delete from sidebar — show uninstall steps, use correct id

The sidebar's remove button was passing the display label (not the
machine id) to the removal handler, so the lookup silently failed.

- Add machine_id, label, hostname to overview host entries
- Sidebar × button now opens the UninstallMachineModal with uninstall
  instructions before removing the record
- Portal.jsx onRemove receives the machine id directly
- SelfHost.jsx onRemove resolves machine_id back to hostname for the
  self-host API

Author: reddy-sh

site/src/components/Portal.jsx

@@ -314,11 +314,7 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
             hosts={data?.hosts || []}
             onPhase={() => {}}
             onRename={(id, label) => cloud.rename(id, label).catch(() => {})}
-            onRemove={(host) => {
-              /* Cloud uses machine id, not hostname. Find the machine. */
-              const m = (machines || []).find(x => x.host === host || x.id === host)
-              if (m) cloud.remove(m.id).catch(() => {})
-            }}
+            onRemove={(id) => cloud.remove(id).catch(() => {})}
           />
         )}
 

site/src/components/SelfHost.jsx

@@ -638,7 +638,12 @@ export default function SelfHost({ onClose }) {
                 .then(() => fetchData())
                 .catch(() => {})
             }}
-            onRemove={(host) => {
+            onRemove={(id) => {
+              /* The self-host remove API uses the hostname (the `host`
+                 column in SQLite). The sidebar now passes the machine id;
+                 find the matching host entry to get the hostname. */
+              const entry = (data?.hosts || []).find(h => h.machine_id === id)
+              const host = entry?.host || id
               apiFetch(serverUrl.current, apiKeyRef.current,
                 '/api/v1/machines/remove', { host })
                 .then(() => fetchData())

site/src/components/admin/AdminSidebar.jsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
-import { Ic } from '../board/Rail'
 import { Pill } from '../board/panels'
+import { Ic } from '../board/Rail'
 
 function MachineRow({ h, isCur, outdated, collapsed, onPick, onRename, onRemove }) {
   const [editing, setEditing] = useState(false)
@@ -19,7 +19,7 @@ function MachineRow({ h, isCur, outdated, collapsed, onPick, onRename, onRemove
 
   const doRemove = (e) => {
     e.stopPropagation()
-    onRemove(h.host)
+    onRemove({ id: h.machine_id, label: h.label, hostname: h.hostname })
   }
 
   const commitEdit = () => {
@@ -86,6 +86,7 @@ export default function AdminSidebar({
   onRename,
   onRemove,
 }) {
+  const [uninstalling, setUninstalling] = useState(null)
   const bs = board || {}
   const nav = bs.nav || []
   const active = bs.active
@@ -118,7 +119,7 @@ export default function AdminSidebar({
                 if (phase !== 'live') onPhase('live')
               }}
               onRename={onRename}
-              onRemove={onRemove}
+              onRemove={setUninstalling}
             />
           ))}
           {!collapsed && phase === 'live' && bs.onAdd && (
@@ -196,6 +197,13 @@ export default function AdminSidebar({
           {!collapsed && <span>Collapse</span>}
         </button>
       </div>
+      {uninstalling && (
+        <UninstallMachineModal
+          machine={uninstalling}
+          onClose={() => setUninstalling(null)}
+          onRemove={(id) => { onRemove(id); setUninstalling(null) }}
+        />
+      )}
     </aside>
   )
 }

site/src/components/board/enroll.jsx

@@ -504,7 +504,7 @@ const UNINSTALL_CMD = `curl -fsSL ${location.origin}/uninstall.sh | sh`
    necessary local action explicit and give it to them before the record goes
    away. This also prevents a still-running agent from looking like it was
    uninstalled just because its next heartbeat was rejected. */
-function UninstallMachineModal({ machine, onClose, onRemove }) {
+export function UninstallMachineModal({ machine, onClose, onRemove }) {
   const [copied, setCopied] = useState(false)
   const [removing, setRemoving] = useState(false)
   const [error, setError] = useState(null)

site/src/lib/overview.js

@@ -29,6 +29,9 @@ export function buildOverview(machines, now = Date.now()) {
     const age = (now - Date.parse(m.lastSeenAt)) / 1000
     return {
       host: m.label,
+      machine_id: m.id,
+      label: m.label,
+      hostname: m.hostname,
       last_seen: m.lastSeenAt,
       agent_version: m.agentVersion,
       ageSeconds: Number.isFinite(age) ? age : null,