From f1cee99660bb89c4df4a262420748e630f8e792a Mon Sep 17 00:00:00 2001
From: AetherForge <agent@aetherforge.local>
Date: Sat, 6 Jun 2026 16:58:13 -0700
Subject: [PATCH] chore: crucible and path tracer UI sync

---
 .../components/Fleet/CrucibleExpandedOps.tsx  | 21 +++++++++++--------
 server/web/src/pages/PathTracerPage.tsx       |  9 ++++----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/server/web/src/components/Fleet/CrucibleExpandedOps.tsx b/server/web/src/components/Fleet/CrucibleExpandedOps.tsx
index c6dc4c0..f33bbb8 100644
--- a/server/web/src/components/Fleet/CrucibleExpandedOps.tsx
+++ b/server/web/src/components/Fleet/CrucibleExpandedOps.tsx
@@ -859,15 +859,18 @@ export default function CrucibleExpandedOps({
           </button>
           <div className="crucible-inline-row" style={{ width: '100%' }}>
             <input className="crucible-inline-input" placeholder="Cloudflare target URL (optional)" value={tunnelURL} onChange={(e) => setTunnelURL(e.target.value)} />
-            <button
-              type="button"
-              className="button crucible-op-btn"
-              disabled={aggDisabled('tunnel_cloudflared')}
-              title={aggTitle('tunnel_cloudflared') || 'Open outbound Cloudflare tunnel'}
-              onClick={() => aggBulk('tunnel_cloudflared', { command: tunnelURL.trim() })}
-            >
-              Start Tunnel
-            </button>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
+              <button
+                type="button"
+                className="button crucible-op-btn"
+                disabled={aggDisabled('tunnel_cloudflared')}
+                title={aggTitle('tunnel_cloudflared') || 'Open outbound Cloudflare tunnel'}
+                onClick={() => aggBulk('tunnel_cloudflared', { command: tunnelURL.trim() })}
+              >
+                Start Tunnel
+              </button>
+              <HelpTip field="crucible_btn_cf_tunnel" />
+            </span>
           </div>
           <button type="button" className="button crucible-op-btn" disabled={aggDisabled('tunnel_stop')} title={aggTitle('tunnel_stop') || 'Stop all outbound tunnels'} onClick={() => aggBulk('tunnel_stop', { command: 'all' }, 'Stop all tunnels on selected nodes?')}>
             Stop Tunnels
diff --git a/server/web/src/pages/PathTracerPage.tsx b/server/web/src/pages/PathTracerPage.tsx
index 94a4d5a..52bda3c 100644
--- a/server/web/src/pages/PathTracerPage.tsx
+++ b/server/web/src/pages/PathTracerPage.tsx
@@ -212,14 +212,15 @@ export default function PathTracerPage() {
   return (
     <div className="pathtrace-page operator-deck-page">
       {/* Header */}
-      <div className="pt-header">
-        <div>
-          <div className="pt-title">⬡ Path Tracer <HelpTip field="pt_path_tracer" /></div>
+      <header className="deck-hero">
+        <div className="deck-hero-text">
+          <p className="deck-eyebrow font-tech">NETWORK OPS · WIREGUARD</p>
+          <h1 className="pt-title">⬡ Path Tracer <HelpTip field="pt_path_tracer" /></h1>
           <div className="pt-subtitle">
             Build an on-demand multi-hop WireGuard VPN — select up to 3 agents, click TRACE.
           </div>
         </div>
-      </div>
+      </header>
 
       {error && <div className="pt-error-banner">⚠ {error}</div>}