diff --git a/frontend/src/components/TracePane.tsx b/frontend/src/components/TracePane.tsx index e1cf4c5..105e95d 100644 --- a/frontend/src/components/TracePane.tsx +++ b/frontend/src/components/TracePane.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'; -import { ArrowDown, ArrowUp, Plus, X } from 'lucide-react'; +import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, Plus, X } from 'lucide-react'; import type { Contact, @@ -199,6 +199,7 @@ export function TracePane({ contacts, config, onRunTracePath }: TracePaneProps) const [customHopHexDraft, setCustomHopHexDraft] = useState(''); const [customHopError, setCustomHopError] = useState(null); const [recentTraces, setRecentTraces] = useState(loadRecentTraces); + const [recentTracesOpen, setRecentTracesOpen] = useState(false); const activeRunTokenRef = useRef(0); const repeaters = useMemo(() => { @@ -562,7 +563,7 @@ export function TracePane({ contacts, config, onRunTracePath }: TracePaneProps)
-
+

Trace Path

@@ -571,35 +572,46 @@ export function TracePane({ contacts, config, onRunTracePath }: TracePaneProps)

{recentTraces.length > 0 && (
-
- Rerun a recent trace: -
-
- {recentTraces.map((trace, i) => { - const label = trace.hops - .map((h) => { - if (h.kind === 'repeater' && h.publicKey) { - const shortKey = h.publicKey.slice(0, 12); - return h.displayName !== shortKey - ? `${h.displayName} (${shortKey})` - : shortKey; - } - return h.displayName; - }) - .join(' → '); - return ( - - ); - })} -
+ + {recentTracesOpen && ( +
+ {recentTraces.map((trace, i) => { + const label = trace.hops + .map((h) => { + if (h.kind === 'repeater' && h.publicKey) { + const shortKey = h.publicKey.slice(0, 12); + return h.displayName !== shortKey + ? `${h.displayName} (${shortKey})` + : shortKey; + } + return h.displayName; + }) + .join(' → '); + return ( + + ); + })} +
+ )}
)}