JustAPI Bot fix: comprehensive UI, docs, security, and deployment improvements · 7/14/2026
381467d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import * as React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";
interface ActivityUser {
id: string;
username: string;
avatarUrl?: string;
}
interface ActivityStreamProps {
activeCount: number;
users: ActivityUser[];
className?: string;
}
export function ActivityStream({ activeCount, users, className }: ActivityStreamProps) {
// Mock timeline dots for visual effect matching the image
// In a real app, these could represent specific timestamps of events
// Professional, minimal palette (monochromatic with accents)
const dots = [
{ color: "bg-indigo-500", left: "10%", delay: "0s" },
{ color: "bg-indigo-400", left: "30%", delay: "1s" },
{ color: "bg-violet-500", left: "50%", delay: "2s" },
{ color: "bg-indigo-300", left: "65%", delay: "1.5s" },
{ color: "bg-white", left: "85%", delay: "0.5s" },
];
return (
<div className={cn("w-full relative overflow-hidden rounded-xl border border-border bg-secondary p-6 backdrop-blur-xl transition-all hover:bg-secondary/80 hover:border-border/80", className)}>
{/* Subtle background glow effect using CSS gradients */}
<div className="absolute -top-24 -right-24 w-48 h-48 bg-indigo-500/20 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -bottom-24 -left-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl pointer-events-none" />
<div className="flex flex-col space-y-6 relative z-10">
<div className="flex items-center justify-between">
<h3 className="text-[10px] font-bold tracking-[0.2em] text-muted-foreground/70 uppercase">
Live Code Review Activity
</h3>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span className="text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">Real-time</span>
</div>
</div>
<div className="flex items-center gap-12">
{/* Left Stat - Clean & Big */}
<div className="flex flex-col">
<span className="text-5xl font-bold tracking-tighter text-transparent bg-clip-text bg-gradient-to-br from-white to-white/50">
{activeCount}
</span>
<span className="text-xs font-medium text-muted-foreground mt-1">
Developers shipping code
</span>
</div>
{/* Timeline Visualization - Minimal & Tech */}
<div className="flex-1 relative h-px bg-gradient-to-r from-transparent via-white/20 to-transparent flex items-center">
{/* Moving light effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-indigo-500/50 to-transparent w-1/2 blur-[1px] animate-[shimmer_3s_infinite_linear]" />
{/* Dots with pulse */}
{dots.map((dot, i) => (
<div
key={i}
className={cn("absolute w-1.5 h-1.5 rounded-full shadow-[0_0_10px_rgba(99,102,241,0.5)] transition-all duration-1000", dot.color)}
style={{ left: dot.left }}
>
<div className={cn("absolute inset-0 rounded-full animate-ping opacity-20", dot.color)} style={{ animationDelay: dot.delay }} />
</div>
))}
</div>
{/* User Avatars - Tighter & Cleaner */}
<div className="flex items-center -space-x-4 pl-4">
{users.slice(0, 5).map((user, i) => (
<div key={user.id} className="relative group transition-transform hover:-translate-y-1 hover:z-20">
<Avatar className="w-12 h-12 border-2 border-[#09090b] ring-1 ring-border transition-shadow group-hover:ring-indigo-500/50">
<AvatarImage src={user.avatarUrl} alt={user.username} className="object-cover" />
<AvatarFallback className="text-xs bg-zinc-900 font-medium text-zinc-400">
{user.username.slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
{/* Tooltip on hover */}
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/90 text-foreground text-[10px] px-2 py-1 rounded whitespace-nowrap pointer-events-none border border-border">
@{user.username}
</div>
</div>
))}
{users.length > 5 && (
<div className="relative z-0 group">
<div className="w-12 h-12 rounded-full bg-[#09090b] border-2 border-[#09090b] ring-1 ring-border flex items-center justify-center text-xs font-medium text-zinc-400 group-hover:border-indigo-500/50 transition-colors">
+{users.length - 5}
</div>
</div>
)}
</div>
</div>
</div>
<style>{`
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
`}</style>
</div>
);
}