web: show guest-agent IP in VM Hardware box

[sacalito]

Summary

• Adds an IP row inside the VM Hardware panel of the VM detail view, populated from the QEMU guest agent (guestInfo.ip_addresses).
• Only renders for running QEMU VMs that have the guest agent reporting addresses — falls back silently otherwise.
• Visually matches the existing CPU / Memory / Network rows (Globe icon, 60px label column, monospace value).
• Wraps long multi-IP lists (IPv4 + IPv6) inside the panel instead of overflowing, with a title tooltip showing the full joined list.

The same data was already exposed in the separate Guest Agent Info card to the right; this PR mirrors it into the Hardware panel so it sits alongside the other per-VM resources.

Test plan

• Open a running QEMU VM that has qemu-guest-agent installed — IP row appears under Network inside VM Hardware.
• Open a running QEMU VM without the guest agent — row is hidden, layout unchanged.
• Open a stopped VM — row is hidden.
• Open an LXC container — row is hidden (gated by isQemu).
• VM with many IPv4 + IPv6 addresses — value wraps inside the panel, no horizontal overflow.

[qodo-code-review]

Review Summary by Qodo

Display guest-agent IP addresses in VM Hardware panel

✨ Enhancement

Walkthroughs

Description

• Adds IP address row to VM Hardware panel from QEMU guest agent
• Displays guest agent reported IP addresses in monospace format
• Only renders for running QEMU VMs with guest agent data
• Matches existing CPU/Memory/Network row styling with Globe icon

Diagram

flowchart LR
  A["VM Hardware Panel"] --> B["Check: isQemu && isRunning"]
  B --> C["Check: guestInfo.ip_addresses exists"]
  C --> D["Render IP Row"]
  D --> E["Display with Globe icon & monospace font"]

Loading

File Changes

1. web/src/vm_modals.js ✨ Enhancement +8/-0

Add guest-agent IP display to VM Hardware

• Added conditional IP address row rendering in VM Hardware panel
• Row displays guest agent IP addresses joined by comma separator
• Styled with Globe icon (blue #49afd9), 60px label column, monospace font
• Gated by isQemu, isRunning, and presence of guestInfo.ip_addresses

web/src/vm_modals.js

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. IP row can overflow ✓ Resolved 🐞 Bug ⚙ Maintainability

Description

The new VM Hardware IP row renders a potentially long comma-joined list inside a non-wrapping flex
row, which can overflow the panel and break layout when multiple IPv4/IPv6 addresses are returned.
This is plausible because the backend intentionally returns multiple addresses (IPv4s + IPv6s) per
VM.

Code

web/src/vm_modals.js[R2015-2020]

+                                        {isQemu && isRunning && guestInfo?.ip_addresses?.length > 0 && (
+                                            <div className="flex items-center gap-2 text-[12px]">
+                                                <Icons.Globe className="w-3.5 h-3.5 flex-shrink-0" style={{color: '#49afd9'}} />
+                                                <span style={{color: '#adbbc4', width: '60px'}}>IP</span>
+                                                <span style={{color: '#e9ecef', fontFamily: 'monospace', fontSize: '11px'}}>{guestInfo.ip_addresses.join(', ')}</span>
+                                            </div>

Evidence

The new IP row renders the joined address list without any truncation/wrapping constraints. The
backend IP fetch explicitly returns potentially multiple IPs (IPv4s first, then IPv6s), increasing
the likelihood of long strings. The same file already uses truncation patterns elsewhere for long
values, suggesting overflow is a known concern in this UI.

web/src/vm_modals.js[2014-2021]
pegaprox/core/manager.py[1201-1234]
web/src/vm_modals.js[1199-1200]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The VM Hardware panel’s new IP row displays `guestInfo.ip_addresses.join(', ')` in a single inline span within a `flex` row. With multiple IPs (especially IPv6), the text can exceed the container width and cause overflow/layout breakage.
### Issue Context
The backend returns multiple addresses (IPv4 + IPv6) for a VM, so long strings are expected in real deployments.
### Fix Focus Areas
- web/src/vm_modals.js[2014-2021]
### Implementation notes
- Consider wrapping the value in a `div` with `flex-1 min-w-0` and adding `truncate overflow-hidden text-ellipsis` (plus a `title` tooltip with the full joined list), **or** use `break-all`/`whitespace-normal` to allow wrapping.
- Keep the label/icon aligned with the existing Hardware rows.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[Copilot]

Pull request overview

Mirrors QEMU guest-agent–reported IP addresses into the existing “VM Hardware” panel on the VM detail view, so IPs appear alongside CPU/Memory/Disk/Network for running QEMU VMs when available.

Changes:

• Adds a new “IP” row (Globe icon + monospace value) to the VM Hardware panel.
• Conditionally renders the row only for running QEMU VMs with guestInfo.ip_addresses populated.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.