feat(web): row-click inspector drawer for orchestrator events

Mirrors the CredentialsInspector pattern: clicking a row opens a
right-edge drawer with the full event payload pretty-printed and
copyable.  The table view truncates the src/dst id to 8 chars; the
drawer shows the full identifier plus a SOURCE chip
(TOPOLOGY / FLEET / SHARD) so operators can tell at a glance whether
the orchestrator hit a MazeNET decky, a unihost fleet decky, or a
SWARM shard.

Source detection is purely client-side based on id shape — bare UUID
→ topology, "local:*" → fleet, "<host>:*" → shard.  The server
already returns a normalized id from list_running_deckies; this
inspector just labels it.

Backdrop click closes via target===currentTarget guard (per the
React stop-propagation memory: never use stopPropagation on drawer
panels — it breaks native event delegation).

Live (in-flight stream) events use synthetic uuids prefixed "live-";
the drawer hides the EVENT UUID row and shows "LIVE EVENT" in the
header for those, since the server-side id won't exist until the
backend persists the row.

decnet_web/src/components/OrchestratorInspector.tsx

@@ -0,0 +1,161 @@
+import React, { useMemo } from 'react';
+import { X, Cpu, Copy, ArrowRight } from '../icons';
+import { useToast } from './Toasts/useToast';
+
+export interface OrchestratorInspectorEntry {
+  uuid: string;
+  ts: string;
+  kind: 'traffic' | 'file' | string;
+  protocol: string;
+  action: string;
+  src_decky_uuid: string | null;
+  dst_decky_uuid: string;
+  success: boolean;
+  payload: string;
+}
+
+interface Props {
+  event: OrchestratorInspectorEntry;
+  onClose: () => void;
+}
+
+const renderDeckyId = (id: string | null): string => id ?? '—';
+
+const sourceTag = (id: string | null): 'topology' | 'fleet' | 'shard' | null => {
+  if (!id) return null;
+  // Composite "host_uuid:name" identifies fleet/shard rows;
+  // bare UUIDs (8-4-4-4-12) are MazeNET TopologyDecky.uuid.
+  if (id.includes(':')) return id.startsWith('local:') ? 'fleet' : 'shard';
+  return /^[0-9a-f]{8}-/i.test(id) ? 'topology' : null;
+};
+
+const OrchestratorInspector: React.FC<Props> = ({ event, onClose }) => {
+  const { push } = useToast();
+
+  const prettyPayload = useMemo(() => {
+    try {
+      return JSON.stringify(JSON.parse(event.payload), null, 2);
+    } catch {
+      return event.payload;
+    }
+  }, [event.payload]);
+
+  const copy = async (text: string, label: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      push({ text: `${label} COPIED`, tone: 'matrix', icon: 'copy' });
+    } catch {
+      push({ text: 'CLIPBOARD BLOCKED', tone: 'alert', icon: 'alert-triangle' });
+    }
+  };
+
+  const copyEvent = () => copy(JSON.stringify(event, null, 2), 'EVENT JSON');
+  const copyPayload = () => copy(prettyPayload, 'PAYLOAD JSON');
+
+  const kindCls = event.kind === 'traffic' || event.kind === 'file' ? event.kind : '';
+  const srcSrc = sourceTag(event.src_decky_uuid);
+  const dstSrc = sourceTag(event.dst_decky_uuid);
+  const isLive = event.uuid.startsWith('live-');
+
+  return (
+    <div
+      className="orchestrator-drawer-backdrop"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="orchestrator-drawer">
+        <div className="bd-head">
+          <h3>
+            <Cpu size={14} />
+            <span>
+              {isLive ? 'LIVE EVENT' : `EVENT #${event.uuid.slice(0, 8)}`}
+            </span>
+            <span className={`kind-chip ${kindCls}`} style={{ marginLeft: 8 }}>
+              {event.kind.toUpperCase()}
+            </span>
+          </h3>
+          <button className="close-btn" onClick={onClose} aria-label="Close">
+            <X size={16} />
+          </button>
+        </div>
+        <div className="bd-body">
+          <div className="kvs">
+            <div className="k">TS</div>
+            <div className="v">{new Date(event.ts).toLocaleString()}</div>
+
+            <div className="k">PROTOCOL</div>
+            <div className="v">
+              <span className="chip dim-chip">{event.protocol.toUpperCase()}</span>
+            </div>
+
+            <div className="k">ACTION</div>
+            <div className="v mono matrix-text">{event.action}</div>
+
+            <div className="k">OUTCOME</div>
+            <div className="v">
+              <span className={event.success ? 'ok-yes' : 'ok-no'}>
+                {event.success ? '✓ SUCCESS' : '✗ FAILURE'}
+              </span>
+            </div>
+
+            <div className="k">SRC</div>
+            <div className="v">
+              {event.src_decky_uuid ? (
+                <span className="src-dst-cell">
+                  <span className="hash-text">{renderDeckyId(event.src_decky_uuid)}</span>
+                  {srcSrc && <span className={`chip src-${srcSrc}`}>{srcSrc.toUpperCase()}</span>}
+                </span>
+              ) : (
+                <span className="dim">—</span>
+              )}
+            </div>
+
+            <div className="k"><ArrowRight size={12} /></div>
+            <div className="v">
+              <span className="src-dst-cell">
+                <span className="hash-text">{renderDeckyId(event.dst_decky_uuid)}</span>
+                {dstSrc && <span className={`chip src-${dstSrc}`}>{dstSrc.toUpperCase()}</span>}
+              </span>
+            </div>
+
+            {!isLive && (
+              <>
+                <div className="k">EVENT UUID</div>
+                <div className="v">
+                  <div className="hash-row">
+                    <span className="hash-text">{event.uuid}</span>
+                    <button
+                      className="icon-btn"
+                      onClick={() => copy(event.uuid, 'UUID')}
+                      aria-label="Copy event UUID"
+                    >
+                      <Copy size={12} />
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          <div>
+            <div className="type-label">PAYLOAD</div>
+            <pre className="code-block">{prettyPayload}</pre>
+          </div>
+
+          <div>
+            <div className="type-label">EXPORT</div>
+            <div className="bd-actions">
+              <button className="btn ghost" onClick={copyEvent}>
+                <Copy size={12} /> COPY EVENT JSON
+              </button>
+              <button className="btn ghost" onClick={copyPayload}>
+                <Copy size={12} /> COPY PAYLOAD
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrchestratorInspector;