Colored provider chips

frontend/src/app/globals.css

@@ -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;

frontend/src/components/organisms/AgentActivityTicker.tsx

@@ -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) => (
+          {display.map((item, idx) => {
-            <span
+            const ps = getProviderStyle(item.source);
-              key={`${item.id}-${idx}`}
+            return (
-              className="inline-flex items-center gap-2 px-6 text-[11px]"
+              <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`}>
-              <span className="font-semibold text-[color:var(--accent)]">
+                  {ps.shortLabel}
-                {item.source}
+                </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>