null
/
Pipeline
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

Colored provider chips

This commit is contained in:
null 2026-05-25 13:43:32 -05:00
parent ea113fcacb
commit fb9d4a907f
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/globals.css
View File

@ -272,7 +272,11 @@ textarea::placeholder {
animation: progress-shimmer 1.8s linear infinite;
}
.animate-ticker {
animation: ticker-scroll 90s linear infinite;
animation: ticker-scroll 45s linear infinite;
}
.ticker-fade-mask {
-webkit-mask-image: linear-gradient(to right, transparent 0px, black 48px, black calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0px, black 48px, black calc(100% - 48px), transparent 100%);
}
.animate-ticker:hover {
animation-play-state: paused;

48
frontend/src/components/organisms/AgentActivityTicker.tsx
View File

@ -45,6 +45,21 @@ async function getAuthHeaders(): Promise<Record<string, string>> {
const MAX_ITEMS = 40;
const RECONNECT_DELAY_MS = 3_000;
type ProviderStyle = { bg: string; text: string; ring: string; shortLabel: string };
function getProviderStyle(source: string): ProviderStyle {
const s = source.toLowerCase();
if (s.includes("claude"))
return { bg: "bg-violet-500/15", text: "text-violet-300", ring: "ring-violet-400/20", shortLabel: "CLAUDE" };
if (s.includes("codex"))
return { bg: "bg-emerald-500/15", text: "text-emerald-300", ring: "ring-emerald-400/20", shortLabel: "CODEX" };
if (s.includes("gpt") || s.includes("openai"))
return { bg: "bg-sky-500/15", text: "text-sky-300", ring: "ring-sky-400/20", shortLabel: "GPT" };
if (s.includes("ollama"))
return { bg: "bg-orange-500/15", text: "text-orange-300", ring: "ring-orange-400/20", shortLabel: "OLLAMA" };
return { bg: "bg-cyan-500/15", text: "text-cyan-300", ring: "ring-cyan-400/20", shortLabel: source.slice(0, 6).toUpperCase() };
}
export function AgentActivityTicker() {
const { isSignedIn } = useAuth();
const [items, setItems] = useState<TickerItem[]>([]);
@ -132,26 +147,23 @@ export function AgentActivityTicker() {
Live
</span>
</span>
<div className="flex-1 overflow-hidden h-full flex items-center">
<div className="flex-1 overflow-hidden h-full flex items-center ticker-fade-mask">
<div className="flex whitespace-nowrap animate-ticker">
{display.map((item, idx) => (
<span
key={`${item.id}-${idx}`}
className="inline-flex items-center gap-2 px-6 text-[11px]"
>
<span className="font-semibold text-[color:var(--accent)]">
{item.source}
{display.map((item, idx) => {
const ps = getProviderStyle(item.source);
return (
<span key={`${item.id}-${idx}`} className="inline-flex items-center gap-1.5 px-3 text-[11px]">
<span className={`inline-flex items-center ${ps.bg} ${ps.text} ring-1 ${ps.ring} rounded px-1.5 py-px text-[10px] font-bold uppercase tracking-[0.08em] leading-none select-none shrink-0`}>
{ps.shortLabel}
</span>
<span className="text-[color:var(--text-muted)]">{item.message}</span>
<span className="font-mono text-[9px] text-[color:var(--text-quiet)] tabular-nums tracking-tight">
{fmtRelative(item.created_at)}
</span>
<span className="ml-1 h-3 w-px bg-[color:var(--border-strong)] self-center shrink-0" aria-hidden="true" />
</span>
<span className="text-[color:var(--text-muted)]">·</span>
<span className="text-[color:var(--text)]">{item.message}</span>
<span className="text-[color:var(--text-quiet)] tabular-nums ml-1">
{fmtRelative(item.created_at)}
</span>
<span className="mx-5 text-[color:var(--border)] select-none">
│
</span>
</span>
))}
);
})}
</div>
</div>
</div>