Network map enhancements and fixes

lib/models/network/network_device.dart

@@ -1,6 +1,52 @@
 import 'package:brick_offline_first_with_supabase/brick_offline_first_with_supabase.dart';
 import 'package:brick_supabase/brick_supabase.dart';
 
+enum NetworkDeviceStatus {
+  online,
+  offline,
+  warning,
+  unknown;
+
+  String get wire {
+    switch (this) {
+      case NetworkDeviceStatus.online:
+        return 'online';
+      case NetworkDeviceStatus.offline:
+        return 'offline';
+      case NetworkDeviceStatus.warning:
+        return 'warning';
+      case NetworkDeviceStatus.unknown:
+        return 'unknown';
+    }
+  }
+
+  String get label {
+    switch (this) {
+      case NetworkDeviceStatus.online:
+        return 'Online';
+      case NetworkDeviceStatus.offline:
+        return 'Offline';
+      case NetworkDeviceStatus.warning:
+        return 'Warning';
+      case NetworkDeviceStatus.unknown:
+        return 'Unknown';
+    }
+  }
+
+  static NetworkDeviceStatus fromWire(String? value) {
+    switch (value) {
+      case 'online':
+        return NetworkDeviceStatus.online;
+      case 'offline':
+        return NetworkDeviceStatus.offline;
+      case 'warning':
+        return NetworkDeviceStatus.warning;
+      default:
+        return NetworkDeviceStatus.unknown;
+    }
+  }
+}
+
 enum NetworkDeviceKind {
   router,
   switchDevice,
@@ -173,6 +219,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
   final String? mac;
   final String? locationId;
   final NetworkImportSource importSource;
+  final NetworkDeviceStatus status;
   final String? notes;
   final DateTime createdAt;
   final DateTime updatedAt;
@@ -189,6 +236,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
     this.mac,
     this.locationId,
     this.importSource = NetworkImportSource.manual,
+    this.status = NetworkDeviceStatus.unknown,
     this.notes,
     required this.createdAt,
     required this.updatedAt,
@@ -207,6 +255,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
       mac: map['mac']?.toString(),
       locationId: map['location_id'] as String?,
       importSource: NetworkImportSource.fromWire(map['import_source'] as String?),
+      status: NetworkDeviceStatus.fromWire(map['status'] as String?),
       notes: map['notes'] as String?,
       createdAt:
           DateTime.tryParse(map['created_at']?.toString() ?? '') ?? DateTime.now(),
@@ -226,6 +275,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
         if (mac != null) 'mac': mac,
         if (locationId != null) 'location_id': locationId,
         'import_source': importSource.wire,
+        'status': status.wire,
         if (notes != null) 'notes': notes,
       };
 
@@ -239,6 +289,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
         'mgmt_ip': mgmtIp,
         'mac': mac,
         'location_id': locationId,
+        'status': status.wire,
         'notes': notes,
       };
 
@@ -252,6 +303,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
     String? mgmtIp,
     String? mac,
     String? locationId,
+    NetworkDeviceStatus? status,
     String? notes,
   }) {
     return NetworkDevice(
@@ -266,6 +318,7 @@ class NetworkDevice extends OfflineFirstWithSupabaseModel {
       mac: mac ?? this.mac,
       locationId: locationId ?? this.locationId,
       importSource: importSource,
+      status: status ?? this.status,
       notes: notes ?? this.notes,
       createdAt: createdAt,
       updatedAt: updatedAt,

lib/providers/network_map/network_devices_provider.dart

@@ -78,6 +78,7 @@ class NetworkDevicesController {
     String? mac,
     String? locationId,
     NetworkImportSource importSource = NetworkImportSource.manual,
+    NetworkDeviceStatus status = NetworkDeviceStatus.unknown,
     String? notes,
   }) async {
     final client = ref.read(supabaseClientProvider);
@@ -94,6 +95,7 @@ class NetworkDevicesController {
           'mac': ?mac,
           'location_id': ?locationId,
           'import_source': importSource.wire,
+          'status': status.wire,
           'notes': ?notes,
         })
         .select()

lib/screens/network_map/network_map_device_edit_screen.dart

@@ -39,6 +39,7 @@ class _NetworkMapDeviceEditScreenState
   final _notesCtrl = TextEditingController();
   NetworkDeviceKind _kind = NetworkDeviceKind.switchDevice;
   NetworkDeviceRole? _role;
+  NetworkDeviceStatus _status = NetworkDeviceStatus.unknown;
   String? _siteId;
   String? _locationId;
   bool _saving = false;
@@ -67,7 +68,7 @@ class _NetworkMapDeviceEditScreenState
     _notesCtrl.text = d.notes ?? '';
     _kind = d.kind;
     _role = d.role;
-    // Resolve the device's location → its site for the pickers.
+    _status = d.status;
     if (d.locationId != null) {
       _locationId = d.locationId;
       for (final l in locations) {
@@ -179,6 +180,7 @@ class _NetworkMapDeviceEditScreenState
           name: _nameCtrl.text.trim(),
           kind: _kind,
           role: _role,
+          status: _status,
           vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
           model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
           serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
@@ -195,6 +197,7 @@ class _NetworkMapDeviceEditScreenState
           name: _nameCtrl.text.trim(),
           kind: _kind,
           role: _role,
+          status: _status,
           vendor: _vendorCtrl.text.trim().isEmpty ? null : _vendorCtrl.text.trim(),
           model: _modelCtrl.text.trim().isEmpty ? null : _modelCtrl.text.trim(),
           serial: _serialCtrl.text.trim().isEmpty ? null : _serialCtrl.text.trim(),
@@ -219,6 +222,20 @@ class _NetworkMapDeviceEditScreenState
     );
   }
 
+  Icon _statusIcon(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    switch (_status) {
+      case NetworkDeviceStatus.online:
+        return const Icon(Icons.circle, size: 14, color: Color(0xFF388E3C));
+      case NetworkDeviceStatus.offline:
+        return Icon(Icons.circle, size: 14, color: cs.error);
+      case NetworkDeviceStatus.warning:
+        return const Icon(Icons.circle, size: 14, color: Color(0xFFF57C00));
+      case NetworkDeviceStatus.unknown:
+        return Icon(Icons.circle_outlined, size: 14, color: cs.onSurfaceVariant);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final existingAsync = widget.deviceId == null
@@ -227,8 +244,6 @@ class _NetworkMapDeviceEditScreenState
     final sitesAsync = ref.watch(networkSitesProvider);
     final locationsAsync = ref.watch(networkLocationsProvider);
 
-    // For a new device under a specific site (from the /site/:id/device/new
-    // route), pre-fill the site picker so the user can save without picking.
     if (!_initialized && widget.deviceId == null && widget.initialSiteId != null) {
       _siteId = widget.initialSiteId;
     }
@@ -241,9 +256,18 @@ class _NetworkMapDeviceEditScreenState
         ),
         title: Text(widget.deviceId == null ? 'New device' : 'Edit device'),
         actions: [
-          TextButton(
+          Padding(
-            onPressed: _saving ? null : _save,
+            padding: const EdgeInsets.only(right: 8),
-            child: _saving ? const Text('Saving…') : const Text('Save'),
+            child: FilledButton(
+              onPressed: _saving ? null : _save,
+              child: _saving
+                  ? const SizedBox(
+                      width: 16,
+                      height: 16,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Text('Save'),
+            ),
           ),
         ],
       ),
@@ -262,155 +286,203 @@ class _NetworkMapDeviceEditScreenState
             child: Form(
               key: _formKey,
               child: SingleChildScrollView(
-                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: [
-                  TextFormField(
+                    // ── Identity ────────────────────────────────────────────
-                    controller: _nameCtrl,
+                    _SectionCard(
-                    decoration: const InputDecoration(labelText: 'Name *'),
+                      icon: Icons.badge_outlined,
-                    validator: (v) => (v == null || v.trim().isEmpty)
+                      title: 'Identity',
-                        ? 'Name is required'
+                      children: [
-                        : null,
+                        TextFormField(
-                  ),
+                          controller: _nameCtrl,
-                  const SizedBox(height: 12),
+                          autofocus: widget.deviceId == null,
-                  DropdownButtonFormField<NetworkDeviceKind>(
+                          decoration: const InputDecoration(labelText: 'Name *'),
-                    initialValue: _kind,
+                          validator: (v) => (v == null || v.trim().isEmpty)
-                    items: NetworkDeviceKind.values
+                              ? 'Name is required'
-                        .map((k) =>
+                              : null,
-                            DropdownMenuItem(value: k, child: Text(k.label)))
+                        ),
-                        .toList(),
+                        const SizedBox(height: 12),
-                    onChanged: (v) => setState(() => _kind = v ?? _kind),
+                        _FieldRow(
-                    decoration: const InputDecoration(labelText: 'Type *'),
+                          left: DropdownButtonFormField<NetworkDeviceKind>(
-                  ),
+                            initialValue: _kind,
-                  const SizedBox(height: 12),
+                            items: NetworkDeviceKind.values
-                  DropdownButtonFormField<NetworkDeviceRole?>(
+                                .map((k) => DropdownMenuItem(
-                    initialValue: _role,
+                                      value: k,
-                    items: [
+                                      child: Text(k.label),
-                      const DropdownMenuItem<NetworkDeviceRole?>(
+                                    ))
-                          value: null, child: Text('(none)')),
+                                .toList(),
-                      for (final r in NetworkDeviceRole.values)
+                            onChanged: (v) => setState(() => _kind = v ?? _kind),
-                        DropdownMenuItem(value: r, child: Text(r.label)),
+                            decoration: const InputDecoration(labelText: 'Type *'),
-                    ],
+                          ),
-                    onChanged: (v) => setState(() => _role = v),
+                          right: DropdownButtonFormField<NetworkDeviceRole?>(
-                    decoration:
+                            initialValue: _role,
-                        const InputDecoration(labelText: 'Logical role'),
+                            items: [
-                  ),
+                              const DropdownMenuItem<NetworkDeviceRole?>(
-                  const SizedBox(height: 12),
+                                value: null,
-                  DropdownButtonFormField<String?>(
+                                child: Text('(none)'),
-                    initialValue: _siteId,
-                    items: [
-                      const DropdownMenuItem<String?>(
-                          value: null, child: Text('Unassigned')),
-                      for (final s in sitesAsync.valueOrNull ?? [])
-                        DropdownMenuItem(value: s.id, child: Text(s.name)),
-                    ],
-                    onChanged: (v) => setState(() {
-                      _siteId = v;
-                      // Reset location when site changes — old location wouldn't
-                      // belong to the new site.
-                      _locationId = null;
-                    }),
-                    decoration: const InputDecoration(
-                      labelText: 'Site',
-                      helperText:
-                          'Devices must be assigned to a site to appear on the topology canvas.',
-                    ),
-                  ),
-                  const SizedBox(height: 12),
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Expanded(
-                        child: DropdownButtonFormField<String?>(
-                          initialValue: _locationId,
-                          items: [
-                            const DropdownMenuItem<String?>(
-                              value: null,
-                              child: Text('(Default — auto-create "Main")'),
-                            ),
-                            for (final l in locationsForSite)
-                              DropdownMenuItem(
-                                value: l.id,
-                                child: Text(
-                                  '${l.name}  ·  ${_locationKindLabel(l.kind)}',
-                                ),
                               ),
-                          ],
+                              for (final r in NetworkDeviceRole.values)
-                          onChanged: _siteId == null
+                                DropdownMenuItem(value: r, child: Text(r.label)),
-                              ? null
+                            ],
-                              : (v) => setState(() => _locationId = v),
+                            onChanged: (v) => setState(() => _role = v),
-                          decoration: InputDecoration(
+                            decoration: const InputDecoration(labelText: 'Role'),
-                            labelText: 'Location',
-                            helperText: _siteId == null
-                                ? 'Pick a site first.'
-                                : 'Specific building / floor / room / rack within the site.',
-                            enabled: _siteId != null,
                           ),
                         ),
-                      ),
+                        const SizedBox(height: 12),
-                      const SizedBox(width: 8),
+                        DropdownButtonFormField<NetworkDeviceStatus>(
-                      IconButton.filledTonal(
+                          initialValue: _status,
-                        tooltip: 'Add new location to this site',
+                          items: NetworkDeviceStatus.values
-                        onPressed: _siteId == null
+                              .map((s) => DropdownMenuItem(
-                            ? null
+                                    value: s,
-                            : _showAddLocationDialog,
+                                    child: Text(s.label),
-                        icon: const Icon(Icons.add_location_alt_outlined),
+                                  ))
-                      ),
+                              .toList(),
-                    ],
+                          onChanged: (v) => setState(
-                  ),
+                              () => _status = v ?? NetworkDeviceStatus.unknown),
-                  const SizedBox(height: 12),
+                          decoration: InputDecoration(
-                  TextFormField(
+                            labelText: 'Status',
-                    controller: _vendorCtrl,
+                            prefixIcon: Padding(
-                    decoration: const InputDecoration(
+                              padding: const EdgeInsets.symmetric(horizontal: 12),
-                      labelText: 'Vendor (e.g. Ruijie, TP-Link)',
+                              child: _statusIcon(context),
-                    ),
+                            ),
-                  ),
+                            prefixIconConstraints:
-                  const SizedBox(height: 12),
+                                const BoxConstraints(minWidth: 0, minHeight: 0),
-                  TextFormField(
+                          ),
-                    controller: _modelCtrl,
-                    decoration: const InputDecoration(labelText: 'Model'),
-                  ),
-                  const SizedBox(height: 12),
-                  TextFormField(
-                    controller: _serialCtrl,
-                    decoration: const InputDecoration(labelText: 'Serial'),
-                  ),
-                  const SizedBox(height: 12),
-                  TextFormField(
-                    controller: _mgmtIpCtrl,
-                    decoration:
-                        const InputDecoration(labelText: 'Management IP'),
-                    keyboardType: TextInputType.text,
-                  ),
-                  const SizedBox(height: 12),
-                  TextFormField(
-                    controller: _macCtrl,
-                    decoration: const InputDecoration(labelText: 'MAC address'),
-                  ),
-                  const SizedBox(height: 12),
-                  TextFormField(
-                    controller: _notesCtrl,
-                    decoration: const InputDecoration(labelText: 'Notes'),
-                    maxLines: 3,
-                  ),
-                  if (widget.deviceId != null) ...[
-                    const SizedBox(height: 24),
-                    Row(
-                      children: [
-                        Text('Ports',
-                            style: Theme.of(context).textTheme.titleMedium),
-                        const Spacer(),
-                        TextButton.icon(
-                          onPressed: () => _addPort(widget.deviceId!),
-                          icon: const Icon(Icons.add),
-                          label: const Text('Add port'),
                         ),
                       ],
                     ),
-                    _PortsList(deviceId: widget.deviceId!),
+                    const SizedBox(height: 16),
+
+                    // ── Location ─────────────────────────────────────────────
+                    _SectionCard(
+                      icon: Icons.location_on_outlined,
+                      title: 'Location',
+                      children: [
+                        DropdownButtonFormField<String?>(
+                          initialValue: _siteId,
+                          items: [
+                            const DropdownMenuItem<String?>(
+                              value: null,
+                              child: Text('Unassigned'),
+                            ),
+                            for (final s in sitesAsync.valueOrNull ?? [])
+                              DropdownMenuItem(value: s.id, child: Text(s.name)),
+                          ],
+                          onChanged: (v) => setState(() {
+                            _siteId = v;
+                            _locationId = null;
+                          }),
+                          decoration: const InputDecoration(
+                            labelText: 'Site',
+                            helperText:
+                                'Devices must be assigned to a site to appear on the topology canvas.',
+                          ),
+                        ),
+                        const SizedBox(height: 12),
+                        Row(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Expanded(
+                              child: DropdownButtonFormField<String?>(
+                                initialValue: _locationId,
+                                items: [
+                                  const DropdownMenuItem<String?>(
+                                    value: null,
+                                    child: Text('(Default — auto-create "Main")'),
+                                  ),
+                                  for (final l in locationsForSite)
+                                    DropdownMenuItem(
+                                      value: l.id,
+                                      child: Text(
+                                        '${l.name}  ·  ${_locationKindLabel(l.kind)}',
+                                      ),
+                                    ),
+                                ],
+                                onChanged: _siteId == null
+                                    ? null
+                                    : (v) => setState(() => _locationId = v),
+                                decoration: InputDecoration(
+                                  labelText: 'Location',
+                                  helperText: _siteId == null
+                                      ? 'Pick a site first.'
+                                      : 'Building / floor / room / rack within the site.',
+                                  enabled: _siteId != null,
+                                ),
+                              ),
+                            ),
+                            const SizedBox(width: 8),
+                            IconButton.filledTonal(
+                              tooltip: 'Add new location to this site',
+                              onPressed:
+                                  _siteId == null ? null : _showAddLocationDialog,
+                              icon: const Icon(Icons.add_location_alt_outlined),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 16),
+
+                    // ── Hardware Details ─────────────────────────────────────
+                    _SectionCard(
+                      icon: Icons.memory_outlined,
+                      title: 'Hardware Details',
+                      children: [
+                        _FieldRow(
+                          left: TextFormField(
+                            controller: _vendorCtrl,
+                            decoration: const InputDecoration(
+                              labelText: 'Vendor',
+                              hintText: 'e.g. Ruijie, TP-Link',
+                            ),
+                          ),
+                          right: TextFormField(
+                            controller: _modelCtrl,
+                            decoration: const InputDecoration(labelText: 'Model'),
+                          ),
+                        ),
+                        const SizedBox(height: 12),
+                        _FieldRow(
+                          left: TextFormField(
+                            controller: _serialCtrl,
+                            decoration:
+                                const InputDecoration(labelText: 'Serial'),
+                          ),
+                          right: TextFormField(
+                            controller: _mgmtIpCtrl,
+                            decoration: const InputDecoration(
+                                labelText: 'Management IP'),
+                            keyboardType: TextInputType.text,
+                          ),
+                        ),
+                        const SizedBox(height: 12),
+                        TextFormField(
+                          controller: _macCtrl,
+                          decoration:
+                              const InputDecoration(labelText: 'MAC address'),
+                        ),
+                        const SizedBox(height: 12),
+                        TextFormField(
+                          controller: _notesCtrl,
+                          decoration: const InputDecoration(labelText: 'Notes'),
+                          maxLines: 4,
+                        ),
+                      ],
+                    ),
+
+                    // ── Ports (edit mode only) ────────────────────────────────
+                    if (widget.deviceId != null) ...[
+                      const SizedBox(height: 16),
+                      _PortsSectionCard(
+                        deviceId: widget.deviceId!,
+                        onAddPort: () => _addPort(widget.deviceId!),
+                      ),
+                    ],
+
+                    const SizedBox(height: 24),
                   ],
-                ],
                 ),
               ),
             ),
@@ -421,12 +493,138 @@ class _NetworkMapDeviceEditScreenState
   }
 }
 
+// ── Helper widgets ────────────────────────────────────────────────────────────
+
+/// Outlined card with a section header (icon + title) and field children.
+class _SectionCard extends StatelessWidget {
+  const _SectionCard({
+    required this.icon,
+    required this.title,
+    required this.children,
+  });
+
+  final IconData icon;
+  final String title;
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+    return Card.outlined(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                Icon(icon, size: 16, color: cs.primary),
+                const SizedBox(width: 8),
+                Text(
+                  title,
+                  style: tt.labelLarge?.copyWith(color: cs.primary),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            ...children,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Renders two widgets side-by-side on wide screens (≥480dp), stacked on narrow.
+class _FieldRow extends StatelessWidget {
+  const _FieldRow({
+    required this.left,
+    required this.right,
+  });
+
+  final Widget left;
+  final Widget right;
+  static const double threshold = 480;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth >= threshold) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(child: left),
+              const SizedBox(width: 12),
+              Expanded(child: right),
+            ],
+          );
+        }
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            left,
+            const SizedBox(height: 12),
+            right,
+          ],
+        );
+      },
+    );
+  }
+}
+
+/// Ports section card with header and add-port button.
+class _PortsSectionCard extends StatelessWidget {
+  const _PortsSectionCard({
+    required this.deviceId,
+    required this.onAddPort,
+  });
+
+  final String deviceId;
+  final VoidCallback onAddPort;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+    return Card.outlined(
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Row(
+              children: [
+                Icon(Icons.cable_outlined, size: 16, color: cs.primary),
+                const SizedBox(width: 8),
+                Text(
+                  'Ports',
+                  style: tt.labelLarge?.copyWith(color: cs.primary),
+                ),
+                const Spacer(),
+                FilledButton.tonal(
+                  onPressed: onAddPort,
+                  child: const Text('Add port'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            _PortsList(deviceId: deviceId),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _PortsList extends ConsumerWidget {
   const _PortsList({required this.deviceId});
   final String deviceId;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final cs = Theme.of(context).colorScheme;
     final portsAsync = ref.watch(networkPortsByDeviceProvider(deviceId));
     return portsAsync.when(
       loading: () => const Padding(
@@ -436,9 +634,19 @@ class _PortsList extends ConsumerWidget {
       error: (e, _) => Text('Error: $e'),
       data: (ports) {
         if (ports.isEmpty) {
-          return const Padding(
+          return Padding(
-            padding: EdgeInsets.symmetric(vertical: 8),
+            padding: const EdgeInsets.symmetric(vertical: 16),
-            child: Text('No ports yet.'),
+            child: Column(
+              children: [
+                Icon(Icons.cable_outlined,
+                    size: 32, color: cs.onSurfaceVariant),
+                const SizedBox(height: 8),
+                Text(
+                  'No ports configured yet.',
+                  style: TextStyle(color: cs.onSurfaceVariant),
+                ),
+              ],
+            ),
           );
         }
         return Column(

lib/screens/network_map/network_map_device_screen.dart

@@ -7,6 +7,7 @@ import '../../providers/network_map/network_devices_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../widgets/app_state_view.dart';
 import '../../widgets/responsive_body.dart';
+import 'widgets/link_edit_dialog.dart';
 import 'widgets/port_edit_dialog.dart';
 import 'widgets/port_list_tile.dart';
 
@@ -98,6 +99,13 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
             return null;
           }
 
+          String? linkIdForPort(String portId) {
+            for (final link in links) {
+              if (link.portA == portId || link.portB == portId) return link.id;
+            }
+            return null;
+          }
+
           return ResponsiveBody(
             maxWidth: 720,
             child: ListView(
@@ -131,6 +139,29 @@ class NetworkMapDeviceScreen extends ConsumerWidget {
                                 existing: port,
                               )
                           : null,
+                      onConnect: canEdit
+                          ? (ctx) => showLinkEditDialog(
+                                context: ctx,
+                                ref: ref,
+                                portId: port.id,
+                                currentDeviceId: device.id,
+                              )
+                          : null,
+                      onDisconnect: canEdit
+                          ? (_) {
+                              final lid = linkIdForPort(port.id);
+                              if (lid != null) {
+                                ref
+                                    .read(networkDevicesControllerProvider)
+                                    .deleteLink(lid);
+                              }
+                            }
+                          : null,
+                      onDelete: canEdit
+                          ? () => ref
+                              .read(networkDevicesControllerProvider)
+                              .deletePort(port.id)
+                          : null,
                     ),
                 if (device.notes != null && device.notes!.trim().isNotEmpty) ...[
                   Padding(

lib/screens/network_map/network_map_site_screen.dart

@@ -8,15 +8,48 @@ import '../../providers/network_map/network_topology_provider.dart';
 import '../../providers/profile_provider.dart';
 import '../../widgets/app_state_view.dart';
 import 'widgets/topology_canvas.dart';
+import 'widgets/topology_legend.dart';
+import 'widgets/topology_minimap.dart';
+import 'widgets/zoom_controls.dart';
 
-class NetworkMapSiteScreen extends ConsumerWidget {
+class NetworkMapSiteScreen extends ConsumerStatefulWidget {
   const NetworkMapSiteScreen({super.key, required this.siteId});
 
   final String siteId;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<NetworkMapSiteScreen> createState() =>
-    final topologyAsync = ref.watch(topologyForSiteProvider(siteId));
+      _NetworkMapSiteScreenState();
+}
+
+class _NetworkMapSiteScreenState extends ConsumerState<NetworkMapSiteScreen> {
+  late final TransformationController _transformController;
+  Map<String, Offset> _nodePositions = const {};
+  Size _canvasSize = const Size(600, 400);
+
+  @override
+  void initState() {
+    super.initState();
+    _transformController = TransformationController();
+  }
+
+  @override
+  void dispose() {
+    _transformController.dispose();
+    super.dispose();
+  }
+
+  void _onLayoutUpdated(Map<String, Offset> positions, Size canvasSize) {
+    if (!mounted) return;
+    setState(() {
+      _nodePositions = positions;
+      _canvasSize = canvasSize;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final topologyAsync = ref.watch(topologyForSiteProvider(widget.siteId));
     final viewMode = ref.watch(topologyViewModeProvider);
     final sitesAsync = ref.watch(networkSitesProvider);
     final profileAsync = ref.watch(currentProfileProvider);
@@ -27,7 +60,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
 
     final siteName = sitesAsync.valueOrNull
         ?.firstWhere(
-          (s) => s.id == siteId,
+          (s) => s.id == widget.siteId,
           orElse: () => sitesAsync.valueOrNull!.first,
         )
         .name;
@@ -64,7 +97,7 @@ class NetworkMapSiteScreen extends ConsumerWidget {
               tooltip: 'Add device',
               icon: const Icon(Icons.add_circle_outline),
               onPressed: () =>
-                  context.go('/network-map/site/$siteId/device/new'),
+                  context.go('/network-map/site/${widget.siteId}/device/new'),
             ),
         ],
       ),
@@ -72,15 +105,97 @@ class NetworkMapSiteScreen extends ConsumerWidget {
         loading: () => const Center(child: CircularProgressIndicator()),
         error: (e, _) => AppErrorView(
           error: e,
-          onRetry: () => ref.invalidate(topologyForSiteProvider(siteId)),
+          onRetry: () => ref.invalidate(topologyForSiteProvider(widget.siteId)),
         ),
-        data: (graph) => TopologyCanvas(
+        data: (graph) => _CanvasWithOverlays(
           graph: graph,
           viewMode: viewMode,
-          onDeviceTap: (device) =>
+          siteId: widget.siteId,
-              context.go('/network-map/device/${device.id}'),
+          transformController: _transformController,
+          nodePositions: _nodePositions,
+          canvasSize: _canvasSize,
+          onLayoutUpdated: _onLayoutUpdated,
         ),
       ),
     );
   }
 }
+
+/// Canvas + all overlay widgets (legend, zoom controls, minimap) in a Stack.
+class _CanvasWithOverlays extends StatelessWidget {
+  const _CanvasWithOverlays({
+    required this.graph,
+    required this.viewMode,
+    required this.siteId,
+    required this.transformController,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.onLayoutUpdated,
+  });
+
+  final TopologyGraph graph;
+  final TopologyViewMode viewMode;
+  final String siteId;
+  final TransformationController transformController;
+  final Map<String, Offset> nodePositions;
+  final Size canvasSize;
+  final void Function(Map<String, Offset>, Size) onLayoutUpdated;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final viewportSize = Size(constraints.maxWidth, constraints.maxHeight);
+
+        return Stack(
+          children: [
+            // ── Main topology canvas ─────────────────────────────────────
+            Positioned.fill(
+              child: TopologyCanvas(
+                graph: graph,
+                viewMode: viewMode,
+                transformationController: transformController,
+                onLayoutUpdated: onLayoutUpdated,
+                onDeviceTap: (device) =>
+                    context.push('/network-map/device/${device.id}'),
+              ),
+            ),
+
+            // ── Legend — bottom-left ─────────────────────────────────────
+            Positioned(
+              left: 16,
+              bottom: 16,
+              child: const TopologyLegend(),
+            ),
+
+            // ── Zoom controls + minimap — bottom-right ───────────────────
+            Positioned(
+              right: 16,
+              bottom: 16,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: [
+                  // Minimap above zoom controls
+                  TopologyMinimap(
+                    graph: graph,
+                    nodePositions: nodePositions,
+                    canvasSize: canvasSize,
+                    controller: transformController,
+                    viewportSize: viewportSize,
+                  ),
+                  const SizedBox(height: 8),
+                  ZoomControls(
+                    controller: transformController,
+                    canvasSize: canvasSize,
+                    viewportSize: viewportSize,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/screens/network_map/widgets/device_node.dart

@@ -1,17 +1,12 @@
 import 'package:flutter/material.dart';
 
 import '../../../models/network/network_device.dart';
+import 'network_device_icon.dart';
 
 /// A styled node representing one network device on the topology canvas.
 ///
-/// Designed to feel solid at ~120-160dp wide so it remains legible at the
+/// Accepts an explicit [nodeSize] so role-based sizing can be applied by the
-/// "good for 200 nodes" zoom level called out in the V1 spec.
+/// canvas without this widget needing to know the layout strategy.
-///
-/// The node has three visual states beyond its default rest:
-///   - [isSelected]: stronger primary-tinted background + 2dp primary border.
-///   - [isHighlighted]: softer secondary tint + primary outline, used when an
-///     edge touching this device is hovered on the canvas.
-///   - [isSelected] takes precedence over [isHighlighted].
 class DeviceNode extends StatelessWidget {
   const DeviceNode({
     super.key,
@@ -19,6 +14,7 @@ class DeviceNode extends StatelessWidget {
     this.portCount,
     this.isSelected = false,
     this.isHighlighted = false,
+    this.nodeSize = const Size(160, 110),
     this.onTap,
   });
 
@@ -26,29 +22,9 @@ class DeviceNode extends StatelessWidget {
   final int? portCount;
   final bool isSelected;
   final bool isHighlighted;
+  final Size nodeSize;
   final VoidCallback? onTap;
 
-  IconData _iconForKind(NetworkDeviceKind kind) {
-    switch (kind) {
-      case NetworkDeviceKind.router:
-        return Icons.router_outlined;
-      case NetworkDeviceKind.switchDevice:
-        return Icons.hub_outlined;
-      case NetworkDeviceKind.ap:
-        return Icons.wifi_outlined;
-      case NetworkDeviceKind.firewall:
-        return Icons.security_outlined;
-      case NetworkDeviceKind.server:
-        return Icons.dns_outlined;
-      case NetworkDeviceKind.endpoint:
-        return Icons.devices_outlined;
-      case NetworkDeviceKind.patchPanel:
-        return Icons.view_module_outlined;
-      case NetworkDeviceKind.other:
-        return Icons.device_unknown_outlined;
-    }
-  }
-
   Color _accentForRole(ColorScheme cs, NetworkDeviceRole? role) {
     switch (role) {
       case NetworkDeviceRole.core:
@@ -65,11 +41,25 @@ class DeviceNode extends StatelessWidget {
     }
   }
 
+  Color? _statusColor(ColorScheme cs, NetworkDeviceStatus status) {
+    switch (status) {
+      case NetworkDeviceStatus.online:
+        return const Color(0xFF34A853); // Google green — universally understood
+      case NetworkDeviceStatus.offline:
+        return cs.error;
+      case NetworkDeviceStatus.warning:
+        return const Color(0xFFFBBC04); // Amber
+      case NetworkDeviceStatus.unknown:
+        return null; // No dot shown
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
     final tt = Theme.of(context).textTheme;
     final accent = _accentForRole(cs, device.role);
+    final statusColor = _statusColor(cs, device.status);
 
     final bgColor = isSelected
         ? cs.primaryContainer
@@ -105,67 +95,94 @@ class DeviceNode extends StatelessWidget {
         child: InkWell(
           onTap: onTap,
           borderRadius: BorderRadius.circular(16),
-          child: Container(
+          child: Stack(
-            width: 160,
+            children: [
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+              Container(
-            child: Column(
+                width: nodeSize.width,
-              crossAxisAlignment: CrossAxisAlignment.start,
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-              mainAxisSize: MainAxisSize.min,
+                child: Column(
-              children: [
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                Row(
+                  mainAxisSize: MainAxisSize.min,
                   children: [
-                    Icon(_iconForKind(device.kind), size: 18, color: accent),
+                    Row(
-                    const SizedBox(width: 6),
+                      children: [
-                    Expanded(
+                        NetworkDeviceIcon(
-                      child: Text(
+                          kind: device.kind,
-                        device.kind.label,
+                          color: accent,
-                        style: tt.labelSmall?.copyWith(color: accent),
+                          size: 20,
+                        ),
+                        const SizedBox(width: 6),
+                        Expanded(
+                          child: Text(
+                            device.kind.label,
+                            style: tt.labelSmall?.copyWith(color: accent),
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: 4),
+                    Text(
+                      device.name,
+                      style: tt.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    if (device.vendor != null || device.model != null) ...[
+                      const SizedBox(height: 2),
+                      Text(
+                        [
+                          if (device.vendor != null) device.vendor,
+                          if (device.model != null) device.model,
+                        ].whereType<String>().join(' • '),
+                        style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant),
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                       ),
-                    ),
+                    ],
-                  ],
+                    if (portCount != null) ...[
-                ),
+                      const SizedBox(height: 4),
-                const SizedBox(height: 4),
+                      Row(
-                Text(
+                        children: [
-                  device.name,
+                          Icon(
-                  style: tt.bodyMedium?.copyWith(fontWeight: FontWeight.w600),
+                            Icons.cable_outlined,
-                  maxLines: 2,
+                            size: 12,
-                  overflow: TextOverflow.ellipsis,
+                            color: cs.onSurfaceVariant,
-                ),
+                          ),
-                if (device.vendor != null || device.model != null) ...[
+                          const SizedBox(width: 4),
-                  const SizedBox(height: 2),
+                          Text(
-                  Text(
+                            '$portCount ports',
-                    [
+                            style: tt.labelSmall?.copyWith(
-                      if (device.vendor != null) device.vendor,
+                              color: cs.onSurfaceVariant,
-                      if (device.model != null) device.model,
+                            ),
-                    ].whereType<String>().join(' • '),
+                          ),
-                    style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
+                        ],
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ],
-                if (portCount != null) ...[
-                  const SizedBox(height: 4),
-                  Row(
-                    children: [
-                      Icon(
-                        Icons.cable_outlined,
-                        size: 12,
-                        color: cs.onSurfaceVariant,
-                      ),
-                      const SizedBox(width: 4),
-                      Text(
-                        '$portCount ports',
-                        style: tt.labelSmall?.copyWith(
-                          color: cs.onSurfaceVariant,
-                        ),
                       ),
                     ],
+                  ],
+                ),
+              ),
+              // Status dot — top-right, only shown when status is not unknown
+              if (statusColor != null)
+                Positioned(
+                  top: 8,
+                  right: 8,
+                  child: Container(
+                    width: 8,
+                    height: 8,
+                    decoration: BoxDecoration(
+                      color: statusColor,
+                      shape: BoxShape.circle,
+                      border: Border.all(
+                        color: bgColor,
+                        width: 1.5,
+                      ),
+                    ),
                   ),
-                ],
+                ),
-              ],
+            ],
-            ),
           ),
         ),
       ),

lib/screens/network_map/widgets/link_edit_dialog.dart

@@ -0,0 +1,191 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../models/network/network_link.dart';
+import '../../../models/network/network_port.dart';
+import '../../../providers/network_map/network_devices_provider.dart';
+
+/// Opens an M3 dialog to connect [portId] to a port on another device.
+///
+/// Returns true if a link was successfully created.
+Future<bool> showLinkEditDialog({
+  required BuildContext context,
+  required WidgetRef ref,
+  required String portId,
+  required String currentDeviceId,
+}) async {
+  final result = await showDialog<bool>(
+    context: context,
+    builder: (_) => _LinkEditDialog(
+      portId: portId,
+      currentDeviceId: currentDeviceId,
+    ),
+  );
+  return result == true;
+}
+
+class _LinkEditDialog extends ConsumerStatefulWidget {
+  const _LinkEditDialog({
+    required this.portId,
+    required this.currentDeviceId,
+  });
+
+  final String portId;
+  final String currentDeviceId;
+
+  @override
+  ConsumerState<_LinkEditDialog> createState() => _LinkEditDialogState();
+}
+
+class _LinkEditDialogState extends ConsumerState<_LinkEditDialog> {
+  String? _selectedDeviceId;
+  String? _selectedPortId;
+  NetworkLinkKind? _linkKind;
+  final _cableLabelCtrl = TextEditingController();
+  bool _saving = false;
+
+  @override
+  void dispose() {
+    _cableLabelCtrl.dispose();
+    super.dispose();
+  }
+
+  Future<void> _save() async {
+    final portA = widget.portId;
+    final portB = _selectedPortId;
+    if (portB == null) return;
+    setState(() => _saving = true);
+    try {
+      ref.invalidate(networkLinksProvider);
+      final controller = ref.read(networkDevicesControllerProvider);
+      await controller.createLink(
+        portA: portA,
+        portB: portB,
+        linkKind: _linkKind,
+        cableLabel: _cableLabelCtrl.text.trim().isEmpty
+            ? null
+            : _cableLabelCtrl.text.trim(),
+      );
+      if (mounted) Navigator.of(context).pop(true);
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to create link: $e'),
+            backgroundColor: Theme.of(context).colorScheme.error,
+          ),
+        );
+      }
+    } finally {
+      if (mounted) setState(() => _saving = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final devicesAsync = ref.watch(networkDevicesProvider);
+    final portsAsync = _selectedDeviceId != null
+        ? ref.watch(networkPortsByDeviceProvider(_selectedDeviceId!))
+        : const AsyncValue<List<NetworkPort>>.data([]);
+    final allLinksAsync = ref.watch(networkLinksProvider);
+
+    final otherDevices = (devicesAsync.valueOrNull ?? const [])
+        .where((d) => d.id != widget.currentDeviceId)
+        .toList()
+      ..sort((a, b) => a.name.compareTo(b.name));
+
+    final allLinks = allLinksAsync.valueOrNull ?? const [];
+    final usedPortIds = <String>{
+      for (final link in allLinks) ...[link.portA, link.portB],
+    };
+
+    final devicePorts = portsAsync.valueOrNull ?? const [];
+    final availablePorts =
+        devicePorts.where((p) => !usedPortIds.contains(p.id)).toList();
+
+    final canSave = _selectedPortId != null && !_saving;
+
+    return AlertDialog(
+      title: const Text('Connect port'),
+      content: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 420),
+        child: SingleChildScrollView(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              DropdownButtonFormField<String>(
+                initialValue: _selectedDeviceId,
+                decoration:
+                    const InputDecoration(labelText: 'Remote device *'),
+                items: [
+                  for (final d in otherDevices)
+                    DropdownMenuItem(value: d.id, child: Text(d.name)),
+                ],
+                onChanged: (v) => setState(() {
+                  _selectedDeviceId = v;
+                  _selectedPortId = null;
+                }),
+              ),
+              const SizedBox(height: 12),
+              DropdownButtonFormField<String>(
+                key: ValueKey(_selectedDeviceId),
+                initialValue: _selectedPortId,
+                decoration: InputDecoration(
+                  labelText: 'Remote port *',
+                  helperText: _selectedDeviceId == null
+                      ? 'Select a device first'
+                      : availablePorts.isEmpty
+                          ? 'No available ports on this device'
+                          : null,
+                ),
+                items: [
+                  for (final p in availablePorts)
+                    DropdownMenuItem(
+                      value: p.id,
+                      child: Text(p.portNumber),
+                    ),
+                ],
+                onChanged: _selectedDeviceId == null
+                    ? null
+                    : (v) => setState(() => _selectedPortId = v),
+              ),
+              const SizedBox(height: 12),
+              DropdownButtonFormField<NetworkLinkKind?>(
+                initialValue: _linkKind,
+                decoration: const InputDecoration(labelText: 'Link type'),
+                items: [
+                  const DropdownMenuItem<NetworkLinkKind?>(
+                    value: null,
+                    child: Text('(unknown)'),
+                  ),
+                  for (final k in NetworkLinkKind.values)
+                    DropdownMenuItem(value: k, child: Text(k.label)),
+                ],
+                onChanged: (v) => setState(() => _linkKind = v),
+              ),
+              const SizedBox(height: 12),
+              TextField(
+                controller: _cableLabelCtrl,
+                decoration: const InputDecoration(
+                  labelText: 'Cable label',
+                  helperText: 'e.g. "CAT6-01", "SMF-A3" (optional)',
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: _saving ? null : () => Navigator.pop(context, false),
+          child: const Text('Cancel'),
+        ),
+        FilledButton(
+          onPressed: canSave ? _save : null,
+          child: Text(_saving ? 'Saving…' : 'Connect'),
+        ),
+      ],
+    );
+  }
+}

lib/screens/network_map/widgets/network_device_icon.dart

@@ -0,0 +1,374 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+
+/// Custom-painted network equipment icon for each [NetworkDeviceKind].
+///
+/// Draws simplified but recognizable symbols matching professional network
+/// topology diagram conventions (Cisco-style silhouettes).
+class NetworkDeviceIcon extends StatelessWidget {
+  const NetworkDeviceIcon({
+    super.key,
+    required this.kind,
+    required this.color,
+    this.size = 20,
+  });
+
+  final NetworkDeviceKind kind;
+  final Color color;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: size,
+      height: size,
+      child: CustomPaint(
+        painter: _DeviceIconPainter(kind: kind, color: color),
+      ),
+    );
+  }
+}
+
+class _DeviceIconPainter extends CustomPainter {
+  _DeviceIconPainter({required this.kind, required this.color});
+
+  final NetworkDeviceKind kind;
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    switch (kind) {
+      case NetworkDeviceKind.router:
+        _drawRouter(canvas, size);
+      case NetworkDeviceKind.switchDevice:
+        _drawSwitch(canvas, size);
+      case NetworkDeviceKind.ap:
+        _drawAp(canvas, size);
+      case NetworkDeviceKind.firewall:
+        _drawFirewall(canvas, size);
+      case NetworkDeviceKind.server:
+        _drawServer(canvas, size);
+      case NetworkDeviceKind.endpoint:
+        _drawEndpoint(canvas, size);
+      case NetworkDeviceKind.patchPanel:
+        _drawPatchPanel(canvas, size);
+      case NetworkDeviceKind.other:
+        _drawOther(canvas, size);
+    }
+  }
+
+  Paint get _stroke => Paint()
+    ..color = color
+    ..style = PaintingStyle.stroke
+    ..strokeCap = StrokeCap.round
+    ..strokeJoin = StrokeJoin.round
+    ..strokeWidth = 1.4;
+
+  Paint get _fill => Paint()
+    ..color = color
+    ..style = PaintingStyle.fill;
+
+  // ─── Router: cylinder body + 4 arrows ─────────────────────────────────────
+
+  void _drawRouter(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final cy = s.height / 2;
+    final r = s.width * 0.28;
+    final p = _stroke;
+
+    // Circle body
+    canvas.drawCircle(Offset(cx, cy), r, p);
+
+    // 4 directional arrows at N/S/E/W
+    const arrowLen = 0.22;
+    const arrowHead = 0.1;
+    for (var i = 0; i < 4; i++) {
+      final angle = i * math.pi / 2;
+      final ax = cx + math.cos(angle) * (r + s.width * arrowLen);
+      final ay = cy + math.sin(angle) * (r + s.width * arrowLen);
+      final bx = cx + math.cos(angle) * (r + 1);
+      final by = cy + math.sin(angle) * (r + 1);
+      canvas.drawLine(Offset(bx, by), Offset(ax, ay), p);
+      // Arrowhead
+      final perp = angle + math.pi / 2;
+      final hw = s.width * arrowHead;
+      canvas.drawPath(
+        Path()
+          ..moveTo(ax, ay)
+          ..lineTo(
+            ax - math.cos(angle) * hw + math.cos(perp) * hw / 2,
+            ay - math.sin(angle) * hw + math.sin(perp) * hw / 2,
+          )
+          ..lineTo(
+            ax - math.cos(angle) * hw - math.cos(perp) * hw / 2,
+            ay - math.sin(angle) * hw - math.sin(perp) * hw / 2,
+          )
+          ..close(),
+        _fill,
+      );
+    }
+  }
+
+  // ─── Switch: rectangle + port lines ───────────────────────────────────────
+
+  void _drawSwitch(Canvas canvas, Size s) {
+    final w = s.width * 0.86;
+    final h = s.height * 0.42;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // Port lines (8 evenly spaced)
+    const ports = 8;
+    final portSpacing = w / (ports + 1);
+    final portH = h * 0.5;
+    final portTop = top + h * 0.2;
+    for (var i = 1; i <= ports; i++) {
+      final px = left + portSpacing * i;
+      canvas.drawLine(
+        Offset(px, portTop),
+        Offset(px, portTop + portH),
+        p,
+      );
+    }
+    // Two legs at bottom center
+    final legX1 = s.width * 0.38;
+    final legX2 = s.width * 0.62;
+    final bodyBottom = top + h;
+    canvas.drawLine(
+      Offset(legX1, bodyBottom),
+      Offset(legX1, s.height * 0.85),
+      p,
+    );
+    canvas.drawLine(
+      Offset(legX2, bodyBottom),
+      Offset(legX2, s.height * 0.85),
+      p,
+    );
+    canvas.drawLine(
+      Offset(legX1, s.height * 0.85),
+      Offset(legX2, s.height * 0.85),
+      p,
+    );
+  }
+
+  // ─── AP: semicircle waves + stem ──────────────────────────────────────────
+
+  void _drawAp(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final base = s.height * 0.72;
+    final p = _stroke;
+
+    // Stem
+    canvas.drawLine(Offset(cx, base), Offset(cx, s.height * 0.88), p);
+    canvas.drawLine(
+      Offset(cx - s.width * 0.15, s.height * 0.88),
+      Offset(cx + s.width * 0.15, s.height * 0.88),
+      p,
+    );
+
+    // 3 concentric arcs from narrow to wide
+    for (var i = 1; i <= 3; i++) {
+      final r = s.width * 0.13 * i;
+      final rect = Rect.fromCircle(center: Offset(cx, base), radius: r);
+      canvas.drawArc(rect, math.pi, -math.pi, false, p);
+    }
+  }
+
+  // ─── Firewall: brick-wall grid ─────────────────────────────────────────────
+
+  void _drawFirewall(Canvas canvas, Size s) {
+    final w = s.width * 0.8;
+    final h = s.height * 0.72;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Outer rect
+    canvas.drawRect(Rect.fromLTWH(left, top, w, h), p);
+
+    // 3 rows, 2 staggered bricks each
+    final rowH = h / 3;
+    for (var row = 0; row < 3; row++) {
+      final rowTop = top + row * rowH;
+      // horizontal mortar line
+      if (row > 0) {
+        canvas.drawLine(
+          Offset(left, rowTop),
+          Offset(left + w, rowTop),
+          p,
+        );
+      }
+      // vertical mortar — offset every other row by half a brick
+      final offset = (row % 2 == 0) ? w / 2 : w / 4;
+      canvas.drawLine(
+        Offset(left + offset, rowTop),
+        Offset(left + offset, rowTop + rowH),
+        p,
+      );
+    }
+  }
+
+  // ─── Server: rack unit with LED dots ──────────────────────────────────────
+
+  void _drawServer(Canvas canvas, Size s) {
+    final w = s.width * 0.72;
+    final h = s.height * 0.78;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+    final fp = _fill;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // 3 horizontal rack-unit dividers + LED dots
+    final unitH = h / 3;
+    for (var i = 0; i < 3; i++) {
+      final unitTop = top + i * unitH;
+      if (i > 0) {
+        canvas.drawLine(
+          Offset(left, unitTop),
+          Offset(left + w, unitTop),
+          p,
+        );
+      }
+      // Small LED dot on right side of each unit
+      canvas.drawCircle(
+        Offset(left + w - w * 0.15, unitTop + unitH / 2),
+        s.width * 0.05,
+        fp,
+      );
+    }
+  }
+
+  // ─── Endpoint: monitor + stand ─────────────────────────────────────────────
+
+  void _drawEndpoint(Canvas canvas, Size s) {
+    final monW = s.width * 0.76;
+    final monH = s.height * 0.52;
+    final left = (s.width - monW) / 2;
+    final top = s.height * 0.08;
+    final p = _stroke;
+
+    // Monitor bezel
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, monW, monH),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // Screen inner (inset 2dp)
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left + 3, top + 3, monW - 6, monH - 6),
+        const Radius.circular(1),
+      ),
+      p,
+    );
+
+    // Neck
+    final neckX = s.width / 2;
+    final neckTop = top + monH;
+    canvas.drawLine(
+      Offset(neckX, neckTop),
+      Offset(neckX, neckTop + s.height * 0.18),
+      p,
+    );
+
+    // Base
+    canvas.drawLine(
+      Offset(s.width * 0.25, s.height * 0.88),
+      Offset(s.width * 0.75, s.height * 0.88),
+      p,
+    );
+  }
+
+  // ─── Patch panel: flat rect with 2 rows of port circles ──────────────────
+
+  void _drawPatchPanel(Canvas canvas, Size s) {
+    final w = s.width * 0.9;
+    final h = s.height * 0.44;
+    final left = (s.width - w) / 2;
+    final top = (s.height - h) / 2;
+    final p = _stroke;
+
+    // Body
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromLTWH(left, top, w, h),
+        const Radius.circular(2),
+      ),
+      p,
+    );
+
+    // 2 rows × 5 port circles
+    const cols = 5;
+    const rows = 2;
+    final colSpacing = w / (cols + 1);
+    final rowSpacing = h / (rows + 1);
+    final dotR = s.width * 0.04;
+    for (var row = 1; row <= rows; row++) {
+      for (var col = 1; col <= cols; col++) {
+        canvas.drawCircle(
+          Offset(left + colSpacing * col, top + rowSpacing * row),
+          dotR,
+          p,
+        );
+      }
+    }
+  }
+
+  // ─── Other: circle with question mark ─────────────────────────────────────
+
+  void _drawOther(Canvas canvas, Size s) {
+    final cx = s.width / 2;
+    final cy = s.height / 2;
+    final r = s.width * 0.42;
+    final p = _stroke;
+
+    canvas.drawCircle(Offset(cx, cy), r, p);
+
+    // "?" drawn as a small arc + dot
+    final tp = TextPainter(
+      text: TextSpan(
+        text: '?',
+        style: TextStyle(
+          fontSize: s.width * 0.52,
+          fontWeight: FontWeight.w700,
+          color: color,
+          height: 1,
+        ),
+      ),
+      textDirection: TextDirection.ltr,
+    )..layout();
+    tp.paint(
+      canvas,
+      Offset(cx - tp.width / 2, cy - tp.height / 2),
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _DeviceIconPainter old) =>
+      old.kind != kind || old.color != color;
+}

lib/screens/network_map/widgets/port_list_tile.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import '../../../models/network/network_port.dart';
 
+enum _PortAction { editPort, connect, disconnect, deletePort }
+
 class PortListTile extends StatelessWidget {
   const PortListTile({
     super.key,
@@ -10,6 +12,8 @@ class PortListTile extends StatelessWidget {
     this.linkedPortLabel,
     this.canEdit = false,
     this.onTap,
+    this.onConnect,
+    this.onDisconnect,
     this.onDelete,
   });
 
@@ -18,6 +22,8 @@ class PortListTile extends StatelessWidget {
   final String? linkedPortLabel;
   final bool canEdit;
   final VoidCallback? onTap;
+  final void Function(BuildContext)? onConnect;
+  final void Function(BuildContext)? onDisconnect;
   final VoidCallback? onDelete;
 
   @override
@@ -64,10 +70,56 @@ class PortListTile extends StatelessWidget {
         ],
       ),
       trailing: canEdit
-          ? IconButton(
+          ? PopupMenuButton<_PortAction>(
-              icon: const Icon(Icons.delete_outline),
+              tooltip: 'Port actions',
-              tooltip: 'Delete port',
+              onSelected: (action) {
-              onPressed: onDelete,
+                switch (action) {
+                  case _PortAction.editPort:
+                    onTap?.call();
+                  case _PortAction.connect:
+                    onConnect?.call(context);
+                  case _PortAction.disconnect:
+                    onDisconnect?.call(context);
+                  case _PortAction.deletePort:
+                    onDelete?.call();
+                }
+              },
+              itemBuilder: (_) => [
+                const PopupMenuItem(
+                  value: _PortAction.editPort,
+                  child: ListTile(
+                    leading: Icon(Icons.edit_outlined),
+                    title: Text('Edit port'),
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ),
+                if (!isLinked)
+                  const PopupMenuItem(
+                    value: _PortAction.connect,
+                    child: ListTile(
+                      leading: Icon(Icons.add_link),
+                      title: Text('Connect to…'),
+                      contentPadding: EdgeInsets.zero,
+                    ),
+                  ),
+                if (isLinked)
+                  const PopupMenuItem(
+                    value: _PortAction.disconnect,
+                    child: ListTile(
+                      leading: Icon(Icons.link_off),
+                      title: Text('Disconnect'),
+                      contentPadding: EdgeInsets.zero,
+                    ),
+                  ),
+                const PopupMenuItem(
+                  value: _PortAction.deletePort,
+                  child: ListTile(
+                    leading: Icon(Icons.delete_outline),
+                    title: Text('Delete port'),
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ),
+              ],
             )
           : null,
     );

lib/screens/network_map/widgets/topology_legend.dart

@@ -0,0 +1,245 @@
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+import '../../../models/network/network_link.dart';
+
+/// Collapsible legend overlay explaining device role border colours and link
+/// type colours. Positioned at the bottom-left of the topology canvas view.
+class TopologyLegend extends StatefulWidget {
+  const TopologyLegend({super.key});
+
+  @override
+  State<TopologyLegend> createState() => _TopologyLegendState();
+}
+
+class _TopologyLegendState extends State<TopologyLegend>
+    with SingleTickerProviderStateMixin {
+  bool _expanded = false;
+  late final AnimationController _anim;
+  late final Animation<double> _fade;
+
+  @override
+  void initState() {
+    super.initState();
+    _anim = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
+    _fade = CurvedAnimation(parent: _anim, curve: Curves.easeOut);
+  }
+
+  @override
+  void dispose() {
+    _anim.dispose();
+    super.dispose();
+  }
+
+  void _toggle() {
+    setState(() => _expanded = !_expanded);
+    if (_expanded) {
+      _anim.forward();
+    } else {
+      _anim.reverse();
+    }
+  }
+
+  Color _roleColor(ColorScheme cs, NetworkDeviceRole role) {
+    switch (role) {
+      case NetworkDeviceRole.core:
+        return cs.error;
+      case NetworkDeviceRole.distribution:
+        return cs.tertiary;
+      case NetworkDeviceRole.access:
+        return cs.primary;
+      case NetworkDeviceRole.edge:
+        return cs.secondary;
+      case NetworkDeviceRole.endpoint:
+        return cs.outline;
+    }
+  }
+
+  Color _linkColor(ColorScheme cs, NetworkLinkKind kind) {
+    switch (kind) {
+      case NetworkLinkKind.copper:
+        return cs.primary;
+      case NetworkLinkKind.fiber:
+        return cs.tertiary;
+      case NetworkLinkKind.wireless:
+        return cs.secondary;
+      case NetworkLinkKind.virtual:
+        return cs.outline;
+      case NetworkLinkKind.unknown:
+        return cs.outline;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final tt = Theme.of(context).textTheme;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        // Expand/collapse toggle chip
+        Material(
+          color: cs.surfaceContainerHigh,
+          borderRadius: BorderRadius.circular(20),
+          elevation: 2,
+          child: InkWell(
+            onTap: _toggle,
+            borderRadius: BorderRadius.circular(20),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    Icons.legend_toggle_outlined,
+                    size: 16,
+                    color: cs.onSurfaceVariant,
+                  ),
+                  const SizedBox(width: 6),
+                  Text(
+                    'Legend',
+                    style: tt.labelSmall?.copyWith(
+                      color: cs.onSurfaceVariant,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  const SizedBox(width: 4),
+                  AnimatedRotation(
+                    turns: _expanded ? 0.5 : 0,
+                    duration: const Duration(milliseconds: 200),
+                    child: Icon(
+                      Icons.expand_more,
+                      size: 16,
+                      color: cs.onSurfaceVariant,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        // Expandable panel
+        FadeTransition(
+          opacity: _fade,
+          child: SizeTransition(
+            sizeFactor: _fade,
+            axisAlignment: -1,
+            child: Padding(
+              padding: const EdgeInsets.only(top: 6),
+              child: Material(
+                color: cs.surfaceContainerHigh,
+                borderRadius: BorderRadius.circular(12),
+                elevation: 3,
+                child: Padding(
+                  padding: const EdgeInsets.all(12),
+                  child: SizedBox(
+                    width: 200,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // ── Device Roles ─────────────────────────────
+                        Text(
+                          'Device Roles',
+                          style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant,
+                            fontWeight: FontWeight.w700,
+                            letterSpacing: 0.8,
+                          ),
+                        ),
+                        const SizedBox(height: 6),
+                        for (final role in NetworkDeviceRole.values)
+                          _LegendRow(
+                            color: _roleColor(cs, role),
+                            label: role.label,
+                            isLine: false,
+                          ),
+                        const SizedBox(height: 10),
+                        Divider(
+                            height: 1,
+                            color: cs.outlineVariant.withValues(alpha: 0.5)),
+                        const SizedBox(height: 10),
+                        // ── Link Types ───────────────────────────────
+                        Text(
+                          'Link Types',
+                          style: tt.labelSmall?.copyWith(
+                            color: cs.onSurfaceVariant,
+                            fontWeight: FontWeight.w700,
+                            letterSpacing: 0.8,
+                          ),
+                        ),
+                        const SizedBox(height: 6),
+                        for (final kind in NetworkLinkKind.values)
+                          _LegendRow(
+                            color: _linkColor(cs, kind),
+                            label: kind.label,
+                            isLine: true,
+                          ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _LegendRow extends StatelessWidget {
+  const _LegendRow({
+    required this.color,
+    required this.label,
+    required this.isLine,
+  });
+
+  final Color color;
+  final String label;
+  final bool isLine;
+
+  @override
+  Widget build(BuildContext context) {
+    final tt = Theme.of(context).textTheme;
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 2),
+      child: Row(
+        children: [
+          if (isLine)
+            // Coloured line segment for link types
+            Container(
+              width: 20,
+              height: 3,
+              decoration: BoxDecoration(
+                color: color,
+                borderRadius: BorderRadius.circular(2),
+              ),
+            )
+          else
+            // Coloured square for device roles (border indicator)
+            Container(
+              width: 12,
+              height: 12,
+              decoration: BoxDecoration(
+                border: Border.all(color: color, width: 2),
+                borderRadius: BorderRadius.circular(3),
+              ),
+            ),
+          const SizedBox(width: 8),
+          Text(
+            label,
+            style: tt.labelSmall?.copyWith(
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/screens/network_map/widgets/topology_minimap.dart

@@ -0,0 +1,248 @@
+import 'package:flutter/material.dart';
+
+import '../../../models/network/network_device.dart';
+import '../../../models/network/topology_graph.dart';
+
+/// Scaled-down overview of the topology canvas with a viewport indicator.
+///
+/// Shows all device nodes as small colour-coded rectangles and all edges as
+/// thin lines. A semi-transparent white rectangle indicates the current
+/// viewport within the full canvas. Tapping on the minimap pans the main
+/// canvas to centre on that point.
+class TopologyMinimap extends StatefulWidget {
+  const TopologyMinimap({
+    super.key,
+    required this.graph,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.controller,
+    required this.viewportSize,
+  });
+
+  final TopologyGraph graph;
+
+  /// Current interpolated node positions (top-left corners) from the canvas.
+  final Map<String, Offset> nodePositions;
+
+  final Size canvasSize;
+  final TransformationController controller;
+  final Size viewportSize;
+
+  static const Size _minimapSize = Size(160, 100);
+
+  @override
+  State<TopologyMinimap> createState() => _TopologyMinimapState();
+}
+
+class _TopologyMinimapState extends State<TopologyMinimap> {
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_onTransformChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant TopologyMinimap oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_onTransformChanged);
+      widget.controller.addListener(_onTransformChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onTransformChanged);
+    super.dispose();
+  }
+
+  void _onTransformChanged() => setState(() {});
+
+  double get _scaleX {
+    if (widget.canvasSize.width == 0) return 1;
+    return TopologyMinimap._minimapSize.width / widget.canvasSize.width;
+  }
+
+  double get _scaleY {
+    if (widget.canvasSize.height == 0) return 1;
+    return TopologyMinimap._minimapSize.height / widget.canvasSize.height;
+  }
+
+  double get _scale => _scaleX < _scaleY ? _scaleX : _scaleY;
+
+  Offset _toMinimap(Offset canvasPoint) {
+    final s = _scale;
+    final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
+    final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
+    return Offset(canvasPoint.dx * s + offsetX, canvasPoint.dy * s + offsetY);
+  }
+
+  /// Convert a tap on the minimap to a canvas point, then pan the main canvas
+  /// so that point appears at the viewport centre.
+  void _onTap(Offset localPos) {
+    final s = _scale;
+    if (s == 0) return;
+    final offsetX = (TopologyMinimap._minimapSize.width - widget.canvasSize.width * s) / 2;
+    final offsetY = (TopologyMinimap._minimapSize.height - widget.canvasSize.height * s) / 2;
+    final canvasX = (localPos.dx - offsetX) / s;
+    final canvasY = (localPos.dy - offsetY) / s;
+
+    final currentScale = widget.controller.value.getMaxScaleOnAxis();
+    final tx = widget.viewportSize.width / 2 - canvasX * currentScale;
+    final ty = widget.viewportSize.height / 2 - canvasY * currentScale;
+    final result = Matrix4.translationValues(tx, ty, 0);
+    result.multiply(Matrix4.diagonal3Values(currentScale, currentScale, 1.0));
+    widget.controller.value = result;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return GestureDetector(
+      onTapDown: (d) => _onTap(d.localPosition),
+      child: Material(
+        color: cs.surfaceContainerHighest,
+        borderRadius: BorderRadius.circular(8),
+        elevation: 2,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: SizedBox(
+            width: TopologyMinimap._minimapSize.width,
+            height: TopologyMinimap._minimapSize.height,
+            child: CustomPaint(
+              painter: _MinimapPainter(
+                graph: widget.graph,
+                nodePositions: widget.nodePositions,
+                canvasSize: widget.canvasSize,
+                controller: widget.controller,
+                viewportSize: widget.viewportSize,
+                colorScheme: cs,
+                scale: _scale,
+                toMinimap: _toMinimap,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MinimapPainter extends CustomPainter {
+  _MinimapPainter({
+    required this.graph,
+    required this.nodePositions,
+    required this.canvasSize,
+    required this.controller,
+    required this.viewportSize,
+    required this.colorScheme,
+    required this.scale,
+    required this.toMinimap,
+  });
+
+  final TopologyGraph graph;
+  final Map<String, Offset> nodePositions;
+  final Size canvasSize;
+  final TransformationController controller;
+  final Size viewportSize;
+  final ColorScheme colorScheme;
+  final double scale;
+  final Offset Function(Offset) toMinimap;
+
+  static const Size _nodeRectSize = Size(8, 5);
+
+  Color _roleColor(NetworkDeviceRole? role) {
+    switch (role) {
+      case NetworkDeviceRole.core:
+        return colorScheme.error;
+      case NetworkDeviceRole.distribution:
+        return colorScheme.tertiary;
+      case NetworkDeviceRole.access:
+        return colorScheme.primary;
+      case NetworkDeviceRole.edge:
+        return colorScheme.secondary;
+      case NetworkDeviceRole.endpoint:
+      case null:
+        return colorScheme.outline;
+    }
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    // Edges
+    final edgePaint = Paint()
+      ..color = colorScheme.outline.withValues(alpha: 0.4)
+      ..strokeWidth = 0.6
+      ..style = PaintingStyle.stroke
+      ..strokeCap = StrokeCap.round;
+
+    for (final edge in graph.edges) {
+      final fromPos = nodePositions[edge.fromDeviceId];
+      final toPos = nodePositions[edge.toDeviceId];
+      if (fromPos == null || toPos == null) continue;
+
+      // Use node centres
+      final from = toMinimap(fromPos + const Offset(80, 55));
+      final to = toMinimap(toPos + const Offset(80, 55));
+      canvas.drawLine(from, to, edgePaint);
+    }
+
+    // Device nodes
+    for (final node in graph.nodes) {
+      final pos = nodePositions[node.device.id];
+      if (pos == null) continue;
+      final minimapPos = toMinimap(pos);
+      final rect = Rect.fromLTWH(
+        minimapPos.dx - _nodeRectSize.width / 2,
+        minimapPos.dy - _nodeRectSize.height / 2,
+        _nodeRectSize.width,
+        _nodeRectSize.height,
+      );
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(rect, const Radius.circular(1.5)),
+        Paint()
+          ..color = _roleColor(node.device.role)
+          ..style = PaintingStyle.fill,
+      );
+    }
+
+    // Viewport rectangle
+    final m = controller.value;
+    final currentScale = m.getMaxScaleOnAxis();
+    if (currentScale > 0) {
+      // The translation is in the 3rd column of the matrix
+      final tx = m.getTranslation().x;
+      final ty = m.getTranslation().y;
+
+      // Viewport in canvas coordinates
+      final vpLeft = -tx / currentScale;
+      final vpTop = -ty / currentScale;
+      final vpWidth = viewportSize.width / currentScale;
+      final vpHeight = viewportSize.height / currentScale;
+
+      final tl = toMinimap(Offset(vpLeft, vpTop));
+      final br = toMinimap(Offset(vpLeft + vpWidth, vpTop + vpHeight));
+      final vpRect = Rect.fromPoints(tl, br);
+
+      // Fill
+      canvas.drawRect(
+        vpRect,
+        Paint()
+          ..color = colorScheme.primary.withValues(alpha: 0.08)
+          ..style = PaintingStyle.fill,
+      );
+      // Border
+      canvas.drawRect(
+        vpRect,
+        Paint()
+          ..color = colorScheme.primary.withValues(alpha: 0.6)
+          ..strokeWidth = 1.0
+          ..style = PaintingStyle.stroke,
+      );
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant _MinimapPainter old) => true;
+}

lib/screens/network_map/widgets/zoom_controls.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+
+/// Vertical +/−/fit-to-view zoom controls for the topology canvas.
+/// Requires a [TransformationController] shared with the [InteractiveViewer].
+class ZoomControls extends StatelessWidget {
+  const ZoomControls({
+    super.key,
+    required this.controller,
+    required this.canvasSize,
+    required this.viewportSize,
+  });
+
+  final TransformationController controller;
+
+  /// Full canvas size (from [computeSugiyamaLayout] result).
+  final Size canvasSize;
+
+  /// Viewport widget size (the screen area the canvas is displayed in).
+  final Size viewportSize;
+
+  static const double _zoomIn = 1.25;
+  static const double _zoomOut = 0.8;
+  static const double _minScale = 0.2;
+  static const double _maxScale = 2.5;
+
+  void _applyZoom(double factor) {
+    final current = controller.value.getMaxScaleOnAxis();
+    final next = (current * factor).clamp(_minScale, _maxScale);
+    final scale = next / current;
+    final cx = viewportSize.width / 2;
+    final cy = viewportSize.height / 2;
+    // Compose: T(cx,cy) * Scale(s) * T(-cx,-cy) * currentTransform
+    final result = Matrix4.translationValues(cx, cy, 0);
+    result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
+    result.multiply(Matrix4.translationValues(-cx, -cy, 0));
+    result.multiply(controller.value);
+    controller.value = result;
+  }
+
+  void _fitToView() {
+    if (canvasSize.isEmpty) return;
+    final scaleX = viewportSize.width / canvasSize.width;
+    final scaleY = viewportSize.height / canvasSize.height;
+    final scale = (scaleX < scaleY ? scaleX : scaleY).clamp(_minScale, _maxScale);
+    final tx = (viewportSize.width - canvasSize.width * scale) / 2;
+    final ty = (viewportSize.height - canvasSize.height * scale) / 2;
+    // Build: T(tx,ty,0) * Scale(s,s,1) — maps canvas (0,0) → (tx,ty) on screen
+    final result = Matrix4.translationValues(tx, ty, 0);
+    result.multiply(Matrix4.diagonal3Values(scale, scale, 1.0));
+    controller.value = result;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+
+    return Material(
+      color: cs.surfaceContainerHigh,
+      borderRadius: BorderRadius.circular(12),
+      elevation: 2,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            _ZoomButton(
+              icon: Icons.add,
+              tooltip: 'Zoom in',
+              onTap: () => _applyZoom(_zoomIn),
+            ),
+            _Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
+            _ZoomButton(
+              icon: Icons.remove,
+              tooltip: 'Zoom out',
+              onTap: () => _applyZoom(_zoomOut),
+            ),
+            _Divider(color: cs.outlineVariant.withValues(alpha: 0.4)),
+            _ZoomButton(
+              icon: Icons.fit_screen_outlined,
+              tooltip: 'Fit to view',
+              onTap: _fitToView,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _ZoomButton extends StatelessWidget {
+  const _ZoomButton({
+    required this.icon,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    return Tooltip(
+      message: tooltip,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(8),
+        child: SizedBox(
+          width: 40,
+          height: 40,
+          child: Icon(icon, size: 18, color: cs.onSurfaceVariant),
+        ),
+      ),
+    );
+  }
+}
+
+class _Divider extends StatelessWidget {
+  const _Divider({required this.color});
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: Divider(height: 1, color: color),
+    );
+  }
+}

supabase/migrations/20260605110000_network_device_status.sql

@@ -0,0 +1,4 @@
+-- Add status column to network_devices for online/offline/warning indicators.
+ALTER TABLE network_devices
+  ADD COLUMN IF NOT EXISTS status TEXT NOT NULL DEFAULT 'unknown'
+    CHECK (status IN ('online', 'offline', 'warning', 'unknown'));