Skip to content

Commit 526cb45

Browse files
jbingham17claude
andcommitted
Add flashing LIVE status indicator to the status bar
Adds a green dot that flashes on/off every second with a "LIVE" label, giving a visual heartbeat indicator in the bottom status bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent c921554 commit 526cb45

File tree

2 files changed

+43
-0
lines changed

2 files changed

+43
-0
lines changed

src/App.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,34 @@ body {
450450
.col-time { width: 60px; color: var(--color-text-dim); }
451451
.col-command { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
452452

453+
/* Status Indicator */
454+
.status-indicator {
455+
display: flex;
456+
align-items: center;
457+
gap: 6px;
458+
}
459+
460+
.status-dot {
461+
width: 8px;
462+
height: 8px;
463+
border-radius: 50%;
464+
background: var(--color-green);
465+
opacity: 0.3;
466+
transition: opacity 0.3s ease;
467+
}
468+
469+
.status-dot.active {
470+
opacity: 1;
471+
box-shadow: 0 0 8px var(--color-green), 0 0 16px rgba(52, 211, 153, 0.4);
472+
}
473+
474+
.status-text {
475+
color: var(--color-green);
476+
font-size: 10px;
477+
font-weight: 700;
478+
letter-spacing: 2px;
479+
}
480+
453481
/* Status Bar */
454482
.status-bar {
455483
display: flex;

src/components/StatusBar.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { useState, useEffect } from 'react';
2+
13
interface StatusBarProps {
24
filter: string;
35
onFilterChange: (filter: string) => void;
@@ -6,6 +8,15 @@ interface StatusBarProps {
68
}
79

810
export function StatusBar({ filter, onFilterChange, refreshRate, onRefreshRateChange }: StatusBarProps) {
11+
const [statusActive, setStatusActive] = useState(true);
12+
13+
useEffect(() => {
14+
const interval = setInterval(() => {
15+
setStatusActive((prev) => !prev);
16+
}, 1000);
17+
return () => clearInterval(interval);
18+
}, []);
19+
920
const shortcuts = [
1021
{ key: 'F1', label: 'Help' },
1122
{ key: 'F2', label: 'Setup' },
@@ -19,6 +30,10 @@ export function StatusBar({ filter, onFilterChange, refreshRate, onRefreshRateCh
1930

2031
return (
2132
<div className="status-bar">
33+
<div className="status-indicator">
34+
<span className={`status-dot ${statusActive ? 'active' : ''}`} />
35+
<span className="status-text">LIVE</span>
36+
</div>
2237
<div className="filter-section">
2338
<span className="filter-label">Filter:</span>
2439
<input

0 commit comments

Comments
 (0)