simplizity

Author: sekuba

collector/src/database.mjs

@@ -2794,7 +2794,7 @@ function inactivityFirstMissEvent(miss, network, observedAt) {
     source: 'aztec_sentinel',
     type: 'inactivity_first_miss',
     severity: 'warning',
-    title: 'First missed duty observed',
+    title: 'Missed duty observed',
     body: `${shortAddress(miss.sequencer)} missed a duty in epoch ${miss.epoch}; this is precursor evidence, not a registered slash offense.`,
     data: {
       certainty: 'pending',
@@ -2828,7 +2828,7 @@ function inactivityEpochEvent(performance, network, observedAt) {
     title: thresholdReached
       ? 'Inactivity streak reached threshold'
       : 'Inactive duty epoch completed',
-    body: `${shortAddress(performance.sequencer)} missed ${performance.missed}/${performance.total} observed duties in epoch ${performance.epoch}; duty-bearing inactive streak ${performance.inactiveStreak}/${performance.threshold}.`,
+    body: `${shortAddress(performance.sequencer)} missed ${performance.missed}/${performance.total} observed duties in epoch ${performance.epoch}; inactive streak ${performance.inactiveStreak}/${performance.threshold}.`,
     data: {
       certainty: 'pending',
       sequencer: performance.sequencer,

collector/test/api-server.test.mjs

@@ -603,7 +603,7 @@ test('public journal exposes Sentinel precursor feed and detail', async (t) => {
     source: 'aztec_sentinel',
     type: 'inactivity_first_miss',
     severity: 'warning',
-    title: 'First missed duty observed',
+    title: 'Missed duty observed',
     body: 'Precursor evidence, not a registered slash offense.',
     data: {
       certainty: 'pending',
@@ -670,7 +670,7 @@ test('sequencer record returns its indexed journal and exact protocol timing sna
     source: 'aztec_sentinel',
     type: 'inactivity_first_miss',
     severity: 'warning',
-    title: 'First missed duty observed',
+    title: 'Missed duty observed',
     body: 'Precursor only.',
     data: { certainty: 'pending', sequencer: SEQUENCER_A, epoch: '42', slot: '1344' },
     observedAt: NOW,

src/App.test.tsx

@@ -38,6 +38,19 @@ describe('top-level view isolation', () => {
         expect(markup).toContain('brutal-button--nav-selected');
     });
 
+    it('keeps the network feed collapsed while a sequencer record is selected', () => {
+        installBrowser(
+            'https://slashmon.example/?view=pingme&sequencer=0x1111111111111111111111111111111111111111',
+        );
+
+        const markup = renderToStaticMarkup(<App />);
+
+        expect(scannerSpy).not.toHaveBeenCalled();
+        expect(markup).toContain('<details');
+        expect(markup).toContain('Network feed');
+        expect(markup).toContain('id="sequencer-record-timeline"');
+    });
+
     it('treats removed and unknown views as the Monitor', () => {
         installBrowser('https://slashmon.example/?view=unknown&network=testnet');
 

src/App.tsx

@@ -75,11 +75,18 @@ export function App() {
     }, [isTestnet, restartScanner]);
 
     const selectSequencer = useCallback((sequencer: Address | null) => {
+        if (
+            sequencer &&
+            location.selectedSequencer?.toLowerCase() === sequencer.toLowerCase()
+        ) {
+            document.getElementById('sequencer-record-timeline')
+                ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            return;
+        }
         const next = urlForSequencer(window.location.href, sequencer);
         window.history.pushState({}, '', next);
         setLocation(parseAppSearch(next.search));
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    }, []);
+    }, [location.selectedSequencer]);
 
     const updateRpc = useCallback((url: string) => {
         const savedUrl = setRpcOverride(config.chainId, url);
@@ -114,8 +121,8 @@ export function App() {
             {location.view === 'pingme' ? (
                 <main className="mx-auto max-w-7xl px-4 py-8">
                     <BackendOverview
-                        key={`${location.network}:${location.selectedEventId ?? ''}:${location.selectedSequencer ?? ''}`}
                         network={location.network}
+                        selectedEventId={location.selectedEventId}
                         selectedSequencer={location.selectedSequencer}
                         onSelectSequencer={selectSequencer}
                     />

src/components/BackendOverview.tsx

@@ -8,15 +8,26 @@ import type { MonitorNetwork } from '@/types/backendApi';
 
 export function BackendOverview({
     network,
+    selectedEventId,
     selectedSequencer,
     onSelectSequencer,
 }: {
     network: MonitorNetwork;
+    selectedEventId: string | null;
     selectedSequencer: Address | null;
     onSelectSequencer: (sequencer: Address | null) => void;
 }) {
-    const monitor = useBackendMonitor(network);
+    const monitor = useBackendMonitor(network, selectedEventId);
     const configuredNetwork = monitor.config?.network;
+    const networkFeed = (
+        <EventHistory
+            events={monitor.events?.data ?? []}
+            hasWatchlistCapability={monitor.hasWatchlistCapability}
+            selectedEventId={selectedEventId}
+            selectedEventError={monitor.selectedEventError}
+            onSelectSequencer={onSelectSequencer}
+        />
+    );
 
     const health = (
         <SourceHealthBanner
@@ -57,12 +68,17 @@ export function BackendOverview({
                 onSelectSequencer={onSelectSequencer}
             />
             <div className="mb-10">
-                <EventHistory
-                    events={monitor.events?.data ?? []}
-                    hasWatchlistCapability={monitor.hasWatchlistCapability}
-                    selectedEventError={monitor.selectedEventError}
-                    onSelectSequencer={onSelectSequencer}
-                />
+                {selectedSequencer ? (
+                    <details className="border-5 border-aqua bg-lapis p-4 shadow-brutal-aqua">
+                        <summary className="flex cursor-pointer list-none items-center justify-between gap-3 font-black text-aqua">
+                            <span className="text-lg">Network feed</span>
+                            <span className="border-3 border-brand-black bg-aqua px-2 py-1 text-xs uppercase text-brand-black">
+                                {monitor.events?.data.length ?? 0} events
+                            </span>
+                        </summary>
+                        <div className="mt-5">{networkFeed}</div>
+                    </details>
+                ) : networkFeed}
             </div>
         </>
     );

src/components/CopyButton.test.tsx

@@ -12,6 +12,10 @@ describe('CopyButton', () => {
         );
 
         expect(markup).toContain('aria-label="Copy sequencer address"');
+        expect(markup).toContain('text-chartreuse');
+        expect(markup).toContain('bg-transparent');
+        expect(markup).not.toContain('bg-whisper-white');
+        expect(markup).not.toContain('shadow-');
         expect(markup).not.toContain('>Copy</span>');
     });
 });

src/components/CopyButton.tsx

@@ -41,21 +41,21 @@ export function CopyButton({
         <button
             type="button"
             onClick={() => void copy()}
-            className={`inline-flex h-9 w-9 shrink-0 items-center justify-center border-3 border-brand-black text-brand-black shadow-[3px_3px_0_var(--color-brand-black)] transition-transform hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none ${state === 'failed' ? 'bg-vermillion' : state === 'copied' ? 'bg-chartreuse' : 'bg-whisper-white'} ${className}`}
+            className={`inline-flex h-7 w-7 shrink-0 items-center justify-center bg-transparent transition-colors hover:bg-chartreuse hover:text-brand-black focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-chartreuse ${state === 'failed' ? 'text-vermillion' : 'text-chartreuse'} ${className}`}
             title={statusLabel}
             aria-label={statusLabel}
             aria-live="polite"
         >
             {state === 'copied' ? (
-                <svg className="h-4 w-4 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <svg className="h-5 w-5 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <path strokeLinecap="square" strokeLinejoin="miter" d="m5 12 4 4L19 6" />
                 </svg>
             ) : state === 'failed' ? (
-                <svg className="h-4 w-4 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <svg className="h-5 w-5 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <path strokeLinecap="square" strokeLinejoin="miter" d="M6 6l12 12M18 6 6 18" />
                 </svg>
             ) : (
-                <svg className="h-4 w-4 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <svg className="h-5 w-5 stroke-[3]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                     <rect x="8" y="8" width="11" height="11" />
                     <path strokeLinecap="square" d="M16 8V5H5v11h3" />
                 </svg>

src/components/EventHistory.test.tsx

@@ -82,8 +82,13 @@ describe('Pingme journal cards', () => {
         );
 
         expect(markup).toContain('L1 · confirmed');
-        expect(markup).toContain('Show all 4 targets');
-        for (const target of targets) expect(markup).toContain(`Open ${target} on Dashtec`);
+        expect(markup).toContain('Show 1 more target');
+        expect(markup).not.toContain('Show all 4 targets');
+        for (const target of targets) {
+            const linkTitle = `title="Open ${target} on Dashtec"`;
+            expect(markup).toContain(linkTitle);
+            expect(markup.split(linkTitle)).toHaveLength(2);
+        }
         expect(markup).toContain('L1 reason: not encoded · matched node evidence below');
         expect(markup).toContain('Node evidence: Inactivity · epoch 772');
         expect(markup).toContain('Active round 195');
@@ -133,7 +138,7 @@ describe('Pingme journal cards', () => {
         expect(markup).not.toContain('aztec_node');
     });
 
-    it('labels a precursor duty miss as the first missed slot', () => {
+    it('labels a precursor duty miss without claiming it was first', () => {
         vi.stubGlobal('window', { location: new URL('https://slashmon.example/?view=pingme') });
         const event: MonitorEvent = {
             id: 'event-precursor',
@@ -165,7 +170,10 @@ describe('Pingme journal cards', () => {
             <EventHistory events={[event]} hasWatchlistCapability={false} />,
         );
 
-        expect(markup).toContain('First missed slot 26690');
+        expect(markup).toContain('Missed slot 26690');
+        expect(markup).toContain('Missed duty observed');
+        expect(markup).not.toContain('First missed slot');
+        expect(markup).not.toContain('First missed duty observed');
         expect(markup).not.toContain('Epoch starts at slot 26690');
     });
 

src/components/EventHistory.tsx

@@ -1,21 +1,23 @@
 import { useEffect, useRef } from 'react';
-import { SequencerAddressLink } from './SequencerAddressLink';
+import { SequencerAddressControl } from './SequencerAddressControl';
+import { getEventTitle, getEventVisual } from '@/lib/presentation';
 import type { EventL1Context, MonitorEvent } from '@/types/backendApi';
 
 interface EventHistoryProps {
     events: MonitorEvent[];
     hasWatchlistCapability: boolean;
+    selectedEventId?: string | null;
     selectedEventError?: string | null;
     onSelectSequencer?: (sequencer: MonitorEvent['targets'][number]) => void;
 }
 
 export function EventHistory({
     events,
     hasWatchlistCapability,
+    selectedEventId = null,
     selectedEventError = null,
     onSelectSequencer,
 }: EventHistoryProps) {
-    const selectedEventId = new URLSearchParams(window.location.search).get('event');
     const scrolledEventIdRef = useRef<string | null>(null);
 
     useEffect(() => {
@@ -36,7 +38,7 @@ export function EventHistory({
                     <div className="mb-2 inline-flex border-3 border-brand-black bg-aqua px-3 py-1 text-xs font-black uppercase text-brand-black">
                         Pingme Journal
                     </div>
-                    <h2 className="text-2xl font-black text-aqua">Slashing Activity</h2>
+                    <h2 className="text-2xl font-black text-aqua">Network feed</h2>
                     <p className="mt-2 text-sm font-bold text-whisper-white">
                         {hasWatchlistCapability
                             ? 'Node signals and confirmed L1 activity for this browser’s watch list.'
@@ -86,17 +88,18 @@ function EventCard({
     onSelectSequencer?: EventHistoryProps['onSelectSequencer'];
 }) {
     const pending = event.certainty === 'pending';
+    const visual = getEventVisual(event.type);
     return (
         <article
             id={`event-${event.id}`}
             className={`border-3 bg-brand-black p-4 ${
-                selected ? 'border-chartreuse shadow-brutal-chartreuse' : pending ? 'border-orchid' : 'border-aqua'
+                selected ? 'border-chartreuse shadow-brutal-chartreuse' : visual.border
             }`}
         >
             <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                 <div className="min-w-0">
-                    <h3 className={`text-base font-black ${pending ? 'text-orchid' : 'text-aqua'}`}>
-                        {event.title}
+                    <h3 className={`text-base font-black ${visual.text}`}>
+                        {getEventTitle(event)}
                     </h3>
                     <EventTargets event={event} onSelectSequencer={onSelectSequencer} />
                 </div>
@@ -127,7 +130,11 @@ function EventTargets({
     if (event.targets.length === 0) {
         return null;
     }
-    const preview = event.targets.slice(0, 3);
+    const uniqueTargets = event.targets.filter((target, index, targets) =>
+        targets.findIndex((candidate) =>
+            candidate.toLowerCase() === target.toLowerCase()) === index);
+    const preview = uniqueTargets.slice(0, 3);
+    const remaining = uniqueTargets.slice(3);
     return (
         <div className="mt-2">
             <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
@@ -145,13 +152,13 @@ function EventTargets({
                     );
                 })}
             </div>
-            {event.targets.length > 3 && (
+            {remaining.length > 0 && (
                 <details className="mt-2 text-xs text-whisper-white/80">
                     <summary className="w-fit cursor-pointer font-black uppercase text-aqua underline underline-offset-4">
-                        Show all {event.targets.length} targets
+                        Show {remaining.length} more target{remaining.length === 1 ? '' : 's'}
                     </summary>
                     <div className="mt-2 grid gap-2 border-l-3 border-aqua/50 pl-3 sm:grid-cols-2 xl:grid-cols-3">
-                        {event.targets.map((target) => {
+                        {remaining.map((target) => {
                             const amount = event.l1?.actions.find((action) =>
                                 action.sequencer.toLowerCase() === target.toLowerCase())?.amount;
                             return (
@@ -189,21 +196,14 @@ function EventTarget({
         item.sequencer.toLowerCase() === target.toLowerCase());
     return (
         <div className="min-w-0">
-            <SequencerAddressLink
+            <SequencerAddressControl
                 address={target}
                 chars={full ? undefined : 6}
                 full={full}
+                showCopy
+                onOpenRecord={onSelectSequencer}
                 className="font-mono text-xs font-bold text-whisper-white"
             />
-            {onSelectSequencer && (
-                <button
-                    type="button"
-                    onClick={() => onSelectSequencer(target)}
-                    className="mt-1 block text-[0.65rem] font-black uppercase text-orchid underline underline-offset-4 hover:text-chartreuse"
-                >
-                    Open record
-                </button>
-            )}
             {amount && (
                 <span className="text-[0.68rem] font-bold text-whisper-white/55">
                     {formatAztec(amount)} AZTEC proposed
@@ -234,7 +234,7 @@ function EventFacts({ event }: { event: MonitorEvent }) {
         if (offense.epoch) facts.push(`Epoch ${offense.epoch}`);
         if (offense.slot) {
             const slotLabel = event.type === 'inactivity_first_miss'
-                ? 'First missed slot'
+                ? 'Missed slot'
                 : offense.timeUnit === 'epoch'
                     ? 'Epoch starts at slot'
                     : 'Slot';