feat(web/mazenet): group Service Fleet items by category (Remote Access, Web, Databases, etc.)

decnet_web/src/components/MazeNET/MazeNET.css

@@ -110,6 +110,12 @@ body.maze-fullscreen .maze-shell {
 .palette-hint {
   font-size: 0.62rem; opacity: 0.5; line-height: 1.6; letter-spacing: 0.5px;
 }
+.palette-subgroup { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
+.palette-subgroup:first-child { margin-top: 0; }
+.palette-subgroup-label {
+  font-size: 0.55rem; letter-spacing: 1.5px; opacity: 0.4;
+  color: var(--violet); margin-top: 6px;
+}
 
 .violet-accent { color: var(--violet); }
 .alert-text { color: var(--alert); }

decnet_web/src/components/MazeNET/Palette.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { GitMerge, ShieldAlert, Server, Monitor, Shield, Database, Cpu, Globe,
          Terminal, Lock, Folder, HardDrive, Users, KeyRound,
          Radio, Zap, Wifi, Circle } from 'lucide-react';
-import type { ServiceDef, Archetype } from './data';
+import type { ServiceDef, Archetype, ServiceGroup } from './data';
+import { SERVICE_GROUP_ORDER } from './data';
 import type { PaletteDrag } from './useMazeInteraction';
 
 const ICON: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
@@ -66,21 +67,39 @@ const Palette: React.FC<Props> = ({ services, archetypes, startPaletteDrag, clas
 
       <div className="palette-group">
         <label>③ SERVICES</label>
-        {services.map((s) => (
+        {(() => {
-          <div
+          const byGroup = new Map<ServiceGroup, ServiceDef[]>();
-            key={s.slug}
+          for (const s of services) {
-            className="palette-item"
+            const g = (s.group ?? 'Remote Access') as ServiceGroup;
-            onMouseDown={start({ kind: 'service', slug: s.slug, label: s.name })}
+            const list = byGroup.get(g) ?? [];
-          >
+            list.push(s);
-            <Icon
+            byGroup.set(g, list);
-              name={s.icon}
+          }
-              size={12}
+          const extras = [...byGroup.keys()].filter((g) => !SERVICE_GROUP_ORDER.includes(g));
-              className={s.risk === 'high' ? 'alert-text' : s.risk === 'med' ? 'violet-accent' : 'matrix-text'}
+          const order = [...SERVICE_GROUP_ORDER, ...extras];
-            />
+          return order
-            <span>{s.name}</span>
+            .filter((g) => byGroup.has(g))
-            <span className="chip-mini">{s.proto.toUpperCase()}:{s.port}</span>
+            .map((g) => (
-          </div>
+              <div key={g} className="palette-subgroup">
-        ))}
+                <div className="palette-subgroup-label">{g.toUpperCase()}</div>
+                {byGroup.get(g)!.map((s) => (
+                  <div
+                    key={s.slug}
+                    className="palette-item"
+                    onMouseDown={start({ kind: 'service', slug: s.slug, label: s.name })}
+                  >
+                    <Icon
+                      name={s.icon}
+                      size={12}
+                      className={s.risk === 'high' ? 'alert-text' : s.risk === 'med' ? 'violet-accent' : 'matrix-text'}
+                    />
+                    <span>{s.name}</span>
+                    <span className="chip-mini">{s.proto.toUpperCase()}/{s.port}</span>
+                  </div>
+                ))}
+              </div>
+            ));
+        })()}
       </div>
 
       <div className="palette-group">

decnet_web/src/components/MazeNET/data.ts

@@ -12,8 +12,27 @@ export interface ServiceDef {
   proto: 'tcp' | 'udp';
   icon: string;
   risk: 'low' | 'med' | 'high';
+  group: ServiceGroup;
 }
 
+export type ServiceGroup =
+  | 'Remote Access'
+  | 'Web'
+  | 'File Transfer'
+  | 'Directory'
+  | 'Databases'
+  | 'IoT / OT';
+
+// Rendering order for the palette.
+export const SERVICE_GROUP_ORDER: ServiceGroup[] = [
+  'Remote Access',
+  'Web',
+  'File Transfer',
+  'Directory',
+  'Databases',
+  'IoT / OT',
+];
+
 export const ARCHETYPES: Archetype[] = [
   { slug: 'linux-server',        name: 'Linux Server',        services: ['ssh', 'http'],                             icon: 'server' },
   { slug: 'windows-workstation', name: 'Windows Workstation', services: ['smb', 'rdp'],                              icon: 'monitor' },
@@ -24,20 +43,20 @@ export const ARCHETYPES: Archetype[] = [
 ];
 
 export const DEFAULT_SERVICES: ServiceDef[] = [
-  { slug: 'ssh',      name: 'SSH',      port: 22,   proto: 'tcp', icon: 'terminal',   risk: 'high' },
+  { slug: 'ssh',      name: 'SSH',      port: 22,   proto: 'tcp', icon: 'terminal',   risk: 'high', group: 'Remote Access' },
-  { slug: 'http',     name: 'HTTP',     port: 80,   proto: 'tcp', icon: 'globe',      risk: 'med' },
+  { slug: 'rdp',      name: 'RDP',      port: 3389, proto: 'tcp', icon: 'monitor',    risk: 'high', group: 'Remote Access' },
-  { slug: 'https',    name: 'HTTPS',    port: 443,  proto: 'tcp', icon: 'lock',       risk: 'med' },
+  { slug: 'http',     name: 'HTTP',     port: 80,   proto: 'tcp', icon: 'globe',      risk: 'med',  group: 'Web' },
-  { slug: 'ftp',      name: 'FTP',      port: 21,   proto: 'tcp', icon: 'folder',     risk: 'high' },
+  { slug: 'https',    name: 'HTTPS',    port: 443,  proto: 'tcp', icon: 'lock',       risk: 'med',  group: 'Web' },
-  { slug: 'smb',      name: 'SMB',      port: 445,  proto: 'tcp', icon: 'hard-drive', risk: 'high' },
+  { slug: 'ftp',      name: 'FTP',      port: 21,   proto: 'tcp', icon: 'folder',     risk: 'high', group: 'File Transfer' },
-  { slug: 'rdp',      name: 'RDP',      port: 3389, proto: 'tcp', icon: 'monitor',    risk: 'high' },
+  { slug: 'smb',      name: 'SMB',      port: 445,  proto: 'tcp', icon: 'hard-drive', risk: 'high', group: 'File Transfer' },
-  { slug: 'ldap',     name: 'LDAP',     port: 389,  proto: 'tcp', icon: 'users',      risk: 'med' },
+  { slug: 'ldap',     name: 'LDAP',     port: 389,  proto: 'tcp', icon: 'users',      risk: 'med',  group: 'Directory' },
-  { slug: 'kerberos', name: 'Kerberos', port: 88,   proto: 'tcp', icon: 'key-round',  risk: 'med' },
+  { slug: 'kerberos', name: 'Kerberos', port: 88,   proto: 'tcp', icon: 'key-round',  risk: 'med',  group: 'Directory' },
-  { slug: 'llmnr',    name: 'LLMNR',    port: 5355, proto: 'udp', icon: 'radio',      risk: 'low' },
+  { slug: 'llmnr',    name: 'LLMNR',    port: 5355, proto: 'udp', icon: 'radio',      risk: 'low',  group: 'Directory' },
-  { slug: 'mysql',    name: 'MySQL',    port: 3306, proto: 'tcp', icon: 'database',   risk: 'high' },
+  { slug: 'mysql',    name: 'MySQL',    port: 3306, proto: 'tcp', icon: 'database',   risk: 'high', group: 'Databases' },
-  { slug: 'postgres', name: 'Postgres', port: 5432, proto: 'tcp', icon: 'database',   risk: 'high' },
+  { slug: 'postgres', name: 'Postgres', port: 5432, proto: 'tcp', icon: 'database',   risk: 'high', group: 'Databases' },
-  { slug: 'redis',    name: 'Redis',    port: 6379, proto: 'tcp', icon: 'zap',        risk: 'med' },
+  { slug: 'redis',    name: 'Redis',    port: 6379, proto: 'tcp', icon: 'zap',        risk: 'med',  group: 'Databases' },
-  { slug: 'mqtt',     name: 'MQTT',     port: 1883, proto: 'tcp', icon: 'wifi',       risk: 'low' },
+  { slug: 'mqtt',     name: 'MQTT',     port: 1883, proto: 'tcp', icon: 'wifi',       risk: 'low',  group: 'IoT / OT' },
-  { slug: 'modbus',   name: 'Modbus',   port: 502,  proto: 'tcp', icon: 'cpu',        risk: 'med' },
+  { slug: 'modbus',   name: 'Modbus',   port: 502,  proto: 'tcp', icon: 'cpu',        risk: 'med',  group: 'IoT / OT' },
-  { slug: 'coap',     name: 'CoAP',     port: 5683, proto: 'udp', icon: 'wifi',       risk: 'low' },
+  { slug: 'coap',     name: 'CoAP',     port: 5683, proto: 'udp', icon: 'wifi',       risk: 'low',  group: 'IoT / OT' },
 ];
 

decnet_web/src/components/MazeNET/useMazeApi.ts

@@ -263,6 +263,7 @@ export function useMazeApi(): MazeApi {
             proto: 'tcp' as const,
             icon: 'circle',
             risk: 'low' as const,
+            group: 'Remote Access' as const,
           },
       );
     } catch {