feat(ui): live service add/remove on MazeNET Inspector

When the topology is active/degraded the Inspector switches services
chips into live controls: each chip gets a × button that DELETEs to
the W3 endpoint, and a dashed '+ ADD' chip opens a typeahead picker
fed by useServiceRegistry().perDecky.

Pending topologies still use the existing design-time path
(onRemoveService → editor.updateDecky); the Inspector picks based on
topologyStatus, so an operator never accidentally hits a live API
call against a topology that isn't deployed yet.

The mutation handlers in MazeNET.tsx hit POST/DELETE
/api/v1/topologies/{id}/deckies/{name}/services{,/svc} and
optimistically apply the response's services list to local state.
Cross-tab reconciliation rides on the SSE forwarder shipped in the
follow-up commit.

decnet_web/src/components/MazeNET/Inspector.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   ArrowLeft, ArrowRight, Crosshair, Globe, GitMerge, MousePointer2, Plus,
   Server, Trash2, X, Shield,
@@ -24,6 +24,16 @@ interface Props {
   onDeleteNode?: (id: string) => void;
   onDeleteEdge?: (id: string) => void;
   onRemoveService?: (nodeId: string, slug: string) => void;
+  // Live (post-deploy) service mutation, hitting W3 endpoints directly.
+  // Distinct from onRemoveService which queues a design-time graph
+  // mutation.  Both can coexist; the inspector picks based on
+  // topologyStatus (active/degraded → live, pending/anything else →
+  // design-time only).  Wiring these props from MazeNET.tsx is the
+  // single switch that turns chips into live controls.
+  onLiveAddService?: (nodeName: string, slug: string) => Promise<void>;
+  onLiveRemoveService?: (nodeName: string, slug: string) => Promise<void>;
+  /** Per-decky-eligible service slugs, fetched via useServiceRegistry. */
+  availableServices?: string[];
   onAddDecky?: (netId: string) => void;
   setSelection?: (sel: Selection) => void;
   pendingChanges?: number;
@@ -32,10 +42,20 @@ interface Props {
 
 const Inspector: React.FC<Props> = ({
   selection, nets, nodes, edges, topologyStatus, onClose,
-  onDeleteNet, onDeleteNode, onDeleteEdge, onRemoveService, onAddDecky, setSelection,
+  onDeleteNet, onDeleteNode, onDeleteEdge, onRemoveService,
+  onLiveAddService, onLiveRemoveService, availableServices = [],
+  onAddDecky, setSelection,
   pendingChanges = 0,
   className = '',
 }) => {
+  const liveOpsEnabled =
+    !!onLiveAddService &&
+    !!onLiveRemoveService &&
+    (topologyStatus === 'active' || topologyStatus === 'degraded');
+  const [addOpen, setAddOpen] = useState(false);
+  const [addSlug, setAddSlug] = useState('');
+  const [busy, setBusy] = useState<string | null>(null);  // slug currently mutating
+  const [opError, setOpError] = useState<string | null>(null);
   const net  = selection?.type === 'net'  ? nets.find((n) => n.id === selection.id)  : undefined;
   const node = selection?.type === 'node' ? nodes.find((n) => n.id === selection.id) : undefined;
   const edge = selection?.type === 'edge' ? edges.find((e) => e.id === selection.id) : undefined;
@@ -107,9 +127,116 @@ const Inspector: React.FC<Props> = ({
                 <div className="inspector-service-row">
                   {node.services.length === 0 && <span className="dim">—</span>}
                   {node.services.map((s) => (
-                    <span key={s} className="service-tag">{s}</span>
+                    <span key={s} className="service-tag" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                      <span>{s}</span>
+                      {liveOpsEnabled && node.kind !== 'observed' && (
+                        <button
+                          type="button"
+                          title={`Remove ${s} (live)`}
+                          disabled={busy === s}
+                          onClick={async () => {
+                            setOpError(null);
+                            setBusy(s);
+                            try {
+                              await onLiveRemoveService!(node.name, s);
+                            } catch (err) {
+                              const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
+                                ?? 'Remove failed.';
+                              setOpError(msg);
+                            } finally {
+                              setBusy(null);
+                            }
+                          }}
+                          style={{
+                            background: 'transparent', border: 'none', padding: 0,
+                            color: 'inherit', cursor: busy === s ? 'wait' : 'pointer',
+                            opacity: busy === s ? 0.4 : 0.7, lineHeight: 1,
+                          }}
+                        >
+                          <X size={9} />
+                        </button>
+                      )}
+                    </span>
                   ))}
+                  {liveOpsEnabled && node.kind !== 'observed' && !addOpen && (
+                    <button
+                      type="button"
+                      className="service-tag"
+                      onClick={() => { setAddOpen(true); setAddSlug(''); }}
+                      style={{ cursor: 'pointer', borderStyle: 'dashed' }}
+                      title="Add service (live)"
+                    >
+                      <Plus size={10} /> ADD
+                    </button>
+                  )}
                 </div>
+                {liveOpsEnabled && addOpen && (
+                  <div style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}>
+                    <select
+                      value={addSlug}
+                      onChange={(e) => setAddSlug(e.target.value)}
+                      style={{
+                        flex: 1, fontSize: '0.75rem', padding: '4px 6px',
+                        background: 'rgba(255,255,255,0.04)',
+                        border: '1px solid var(--border-color, #30363d)',
+                        color: 'var(--text-color)',
+                      }}
+                    >
+                      <option value="">— pick a service —</option>
+                      {availableServices
+                        .filter((s) => !node.services.includes(s))
+                        .map((s) => (
+                          <option key={s} value={s}>{s}</option>
+                        ))}
+                    </select>
+                    <button
+                      type="button"
+                      disabled={!addSlug || busy === addSlug}
+                      onClick={async () => {
+                        if (!addSlug) return;
+                        setOpError(null);
+                        setBusy(addSlug);
+                        try {
+                          await onLiveAddService!(node.name, addSlug);
+                          setAddOpen(false);
+                          setAddSlug('');
+                        } catch (err) {
+                          const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail
+                            ?? 'Add failed.';
+                          setOpError(msg);
+                        } finally {
+                          setBusy(null);
+                        }
+                      }}
+                      style={{
+                        padding: '4px 10px', fontSize: '0.7rem',
+                        border: '1px solid var(--accent-color, #00ff88)',
+                        background: 'var(--accent-color, #00ff88)',
+                        color: 'var(--bg-color, #0d1117)',
+                        cursor: busy === addSlug ? 'wait' : 'pointer',
+                        opacity: !addSlug || busy === addSlug ? 0.5 : 1,
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      ADD
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => { setAddOpen(false); setAddSlug(''); }}
+                      style={{
+                        padding: '4px 10px', fontSize: '0.7rem',
+                        border: '1px solid var(--dim-color)',
+                        background: 'transparent', color: 'var(--dim-color)',
+                        cursor: 'pointer', textTransform: 'uppercase',
+                      }}
+                    >
+                      CANCEL
+                    </button>
+                  </div>
+                )}
+                {opError && (
+                  <div style={{ color: '#ff5555', fontSize: '0.7rem', marginTop: 6 }}>{opError}</div>
+                )}
               </div>
             </div>
             <div>

decnet_web/src/components/MazeNET/MazeNET.tsx

@@ -23,6 +23,7 @@ import { useLayoutPersistor } from './useMazeLayoutStore';
 import { useTopologyStream, type TopologyStreamEvent } from './useTopologyStream';
 import { ARCHETYPES as DEFAULT_ARCHETYPES } from './data';
 import { useToast } from '../Toasts/useToast';
+import { useServiceRegistry } from '../../hooks/useServiceRegistry';
 
 /* Short unique suffix for default names — avoids the DB uniqueness
  * constraint regardless of delete/re-add sequencing on the client. */
@@ -428,6 +429,33 @@ const MazeNET: React.FC = () => {
     }
   };
 
+  /* Live service add/remove — talks to the W3 endpoints directly,
+     bypassing the design-time mutation queue.  Used when topology
+     status is active/degraded; the Inspector switches between this
+     and the design-time path based on the topologyStatus prop.
+
+     Optimistic local update is fine: the W3 endpoint returns the
+     post-mutation services list, and the SSE forwarder (commit C-sse)
+     reconciles cross-tab. */
+  const serviceRegistry = useServiceRegistry();
+
+  const liveAddService = useCallback(async (nodeName: string, slug: string) => {
+    const { data } = await axios.post<{ services: string[] }>(
+      `/topologies/${encodeURIComponent(topologyId)}/deckies/${encodeURIComponent(nodeName)}/services`,
+      { name: slug },
+    );
+    setNodes((p) => p.map((x) => x.kind === 'decky' && x.name === nodeName
+      ? { ...x, services: data.services } : x));
+  }, [topologyId]);
+
+  const liveRemoveService = useCallback(async (nodeName: string, slug: string) => {
+    const { data } = await axios.delete<{ services: string[] }>(
+      `/topologies/${encodeURIComponent(topologyId)}/deckies/${encodeURIComponent(nodeName)}/services/${encodeURIComponent(slug)}`,
+    );
+    setNodes((p) => p.map((x) => x.kind === 'decky' && x.name === nodeName
+      ? { ...x, services: data.services } : x));
+  }, [topologyId]);
+
   /* Force-mutate is a no-op against a pending topology (no live containers).
    * Keep the menu item disabled for now; real hook lands with live-editing polish. */
   const forceMutate = (_id: string) => {
@@ -795,6 +823,9 @@ const MazeNET: React.FC = () => {
           onDeleteNode={removeNode}
           onDeleteEdge={removeEdge}
           onRemoveService={removeServiceFromNode}
+          availableServices={serviceRegistry.perDecky}
+          onLiveAddService={liveAddService}
+          onLiveRemoveService={liveRemoveService}
           onAddDecky={(netId) => {
             const net = nets.find((n) => n.id === netId);
             if (!net) return;