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/Orchestrator.css

@@ -241,3 +241,188 @@
 /* Animations */
 @keyframes orch-pulse { from { opacity: 0.5; } to { opacity: 1; } }
 @keyframes orch-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+
+/* ── Row interactivity ─────────────────────────────────── */
+.orchestrator-root .logs-table tr.clickable { cursor: pointer; }
+.orchestrator-root .logs-table tr.clickable:hover {
+  background: rgba(238, 130, 238, 0.04);
+}
+
+/* ── Inspector drawer ──────────────────────────────────── */
+.orchestrator-root .orchestrator-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1000;
+  animation: od-fade 0.15s ease;
+}
+@keyframes od-fade { from { opacity: 0; } to { opacity: 1; } }
+
+.orchestrator-root .orchestrator-drawer {
+  width: min(620px, 100%);
+  height: 100%;
+  background: var(--bg);
+  border-left: 1px solid var(--violet);
+  box-shadow: -12px 0 40px rgba(238, 130, 238, 0.1);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  animation: od-slide 0.2s ease;
+}
+@keyframes od-slide {
+  from { transform: translateX(30px); opacity: 0.6; }
+  to { transform: none; opacity: 1; }
+}
+
+.orchestrator-root .orchestrator-drawer .bd-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.orchestrator-root .orchestrator-drawer .bd-head h3 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.9rem;
+  letter-spacing: 3px;
+  color: var(--violet);
+  margin: 0;
+}
+.orchestrator-root .orchestrator-drawer .close-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+}
+.orchestrator-root .orchestrator-drawer .close-btn:hover { border-color: var(--violet); }
+
+.orchestrator-root .orchestrator-drawer .bd-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.orchestrator-root .orchestrator-drawer .kvs {
+  display: grid;
+  grid-template-columns: 130px 1fr;
+  gap: 10px 12px;
+  font-size: 0.8rem;
+  align-items: center;
+}
+.orchestrator-root .orchestrator-drawer .kvs .k {
+  opacity: 0.55;
+  font-size: 0.7rem;
+  letter-spacing: 1.5px;
+  display: inline-flex;
+  align-items: center;
+}
+.orchestrator-root .orchestrator-drawer .kvs .v { word-break: break-all; }
+.orchestrator-root .orchestrator-drawer .kvs .v.mono {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+/* Source-tag chips disambiguate the opaque dst id: bare UUIDs come from
+   topology_deckies, "host_uuid:name" composites come from the fleet
+   (host_uuid="local") or SWARM shards. */
+.orchestrator-root .orchestrator-drawer .src-dst-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.orchestrator-root .orchestrator-drawer .src-dst-cell .hash-text {
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  color: var(--matrix);
+}
+.orchestrator-root .orchestrator-drawer .chip.src-topology {
+  border-color: var(--matrix);
+  color: var(--matrix);
+}
+.orchestrator-root .orchestrator-drawer .chip.src-fleet {
+  border-color: var(--violet);
+  color: var(--violet);
+}
+.orchestrator-root .orchestrator-drawer .chip.src-shard {
+  border-color: #ffaa00;
+  color: #ffaa00;
+}
+
+.orchestrator-root .orchestrator-drawer .type-label {
+  font-size: 0.68rem;
+  letter-spacing: 2px;
+  opacity: 0.6;
+  margin-bottom: 8px;
+}
+
+.orchestrator-root .orchestrator-drawer .code-block {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--violet);
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--matrix);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  overflow-x: auto;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.orchestrator-root .orchestrator-drawer .hash-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.orchestrator-root .orchestrator-drawer .hash-row .hash-text {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--matrix);
+  word-break: break-all;
+  flex: 1;
+}
+.orchestrator-root .orchestrator-drawer .icon-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  padding: 4px 6px;
+  display: inline-flex;
+  cursor: pointer;
+}
+.orchestrator-root .orchestrator-drawer .icon-btn:hover { border-color: var(--violet); }
+
+.orchestrator-root .orchestrator-drawer .bd-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.orchestrator-root .orchestrator-drawer .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 14px;
+  font-family: inherit;
+  font-size: 0.78rem;
+  letter-spacing: 1.5px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--matrix);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  opacity: 0.8;
+}
+.orchestrator-root .orchestrator-drawer .btn.ghost:hover {
+  opacity: 1;
+  border-color: var(--matrix);
+  box-shadow: var(--matrix-glow);
+}

decnet_web/src/components/Orchestrator.tsx

@@ -5,6 +5,7 @@ import {
 } from '../icons';
 import api from '../utils/api';
 import EmptyState from './EmptyState/EmptyState';
+import OrchestratorInspector from './OrchestratorInspector';
 import { useOrchestratorStream, type OrchestratorStreamEvent } from './useOrchestratorStream';
 import './Orchestrator.css';
 
@@ -51,6 +52,7 @@ const Orchestrator: React.FC = () => {
   const [status, setStatus] = useState<StreamStatus>('connecting');
   const [paused, setPaused] = useState(false);
   const [now, setNow] = useState(Date.now());
+  const [selected, setSelected] = useState<OrchestratorEntry | null>(null);
 
   const limit = 50;
   const pausedRef = useRef(paused);
@@ -210,7 +212,11 @@ const Orchestrator: React.FC = () => {
                 const cls = !r.success ? 'fail' : fresh ? 'fresh' : '';
                 const kindCls = r.kind === 'traffic' || r.kind === 'file' ? r.kind : '';
                 return (
-                  <tr key={r.uuid} className={cls}>
+                  <tr
+                    key={r.uuid}
+                    className={`${cls} clickable`}
+                    onClick={() => setSelected(r)}
+                  >
                     <td className="dim">{timeAgo(r.ts)}</td>
                     <td>
                       <span className={`kind-chip ${kindCls}`}>{r.kind}</span>
@@ -244,6 +250,13 @@ const Orchestrator: React.FC = () => {
           </table>
         </div>
       </div>
+
+      {selected && (
+        <OrchestratorInspector
+          event={selected}
+          onClose={() => setSelected(null)}
+        />
+      )}
     </div>
   );
 };

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;