style: add activity status indicator to specialist cards on Agents page

Author: marian2js

apps/desktop/src/features/agents/components/SpecialistCard.tsx

@@ -22,13 +22,26 @@ interface SpecialistCardProps {
   onOutputNavigate?: ((artifact: ArtifactRecord) => void) | undefined;
 }
 
+/** Check if any output or bundle was created within the last 24 hours. */
+function hasRecentActivity(outputs: ArtifactRecord[], bundles: SpecialistBundleGroup[]): boolean {
+  const threshold = Date.now() - 24 * 60 * 60 * 1000;
+  for (const a of outputs) {
+    if (new Date(a.createdAt).getTime() >= threshold) return true;
+  }
+  for (const b of bundles) {
+    if (new Date(b.createdAt).getTime() >= threshold) return true;
+  }
+  return false;
+}
+
 export function SpecialistCard({ specialist, onChat, recentOutputs, recentBundles, onOutputNavigate }: SpecialistCardProps) {
   const Icon = resolveSpecialistIcon(specialist.icon);
   const isManager = specialist.category === "manager";
   const colors = getSpecialistColors(specialist.id);
   const outputs = recentOutputs?.length ? recentOutputs : [];
   const bundles = recentBundles?.length ? recentBundles : [];
   const hasOutputs = outputs.length > 0 || bundles.length > 0;
+  const isActive = hasOutputs && hasRecentActivity(outputs, bundles);
 
   return (
     <article
@@ -73,6 +86,11 @@ export function SpecialistCard({ specialist, onChat, recentOutputs, recentBundle
                   Lead
                 </span>
               ) : null}
+              {!isManager && isActive ? (
+                <span className="rounded-md bg-emerald-500/10 px-1.5 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-wide text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-400">
+                  ACTIVE
+                </span>
+              ) : null}
             </div>
             <p className={cn(
               "mt-0.5 leading-relaxed text-muted-foreground",
@@ -108,6 +126,13 @@ export function SpecialistCard({ specialist, onChat, recentOutputs, recentBundle
           ))}
         </div>
 
+        {/* Unused specialist prompt */}
+        {!hasOutputs && !isManager ? (
+          <p className="mt-4 font-mono text-[11px] text-muted-foreground/40">
+            Start your first conversation
+          </p>
+        ) : null}
+
         {/* Recent outputs — bundles and standalone artifacts */}
         {hasOutputs ? (
           <div className="mt-4 rounded-lg border border-border/15 bg-muted/20 px-3 py-2.5 dark:border-white/[0.03] dark:bg-white/[0.02]">

test/features/agents/specialist-activity-status.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const agentsDir = resolve(
+  __dirname,
+  "../../../apps/desktop/src/features/agents",
+);
+const readSrc = (path: string) =>
+  readFileSync(resolve(agentsDir, path), "utf-8");
+
+const specialistCardSrc = readSrc("components/SpecialistCard.tsx");
+
+// ---------------------------------------------------------------------------
+// Activity status — "ACTIVE" badge for specialists with recent (24h) outputs
+// ---------------------------------------------------------------------------
+describe("SpecialistCard activity status badge", () => {
+  it("checks whether outputs are recent (within 24 hours)", () => {
+    // Should have logic comparing output timestamps to determine recency
+    expect(specialistCardSrc).toMatch(/24\s*\*\s*60\s*\*\s*60\s*\*\s*1000|86[_,]?400[_,]?000/);
+  });
+
+  it("renders an ACTIVE badge for specialists with recent activity", () => {
+    expect(specialistCardSrc).toContain("ACTIVE");
+  });
+
+  it("uses emerald accent for the active badge", () => {
+    // The active badge should use primary/emerald styling
+    expect(specialistCardSrc).toMatch(/bg-primary|bg-emerald/);
+  });
+
+  it("uses monospace font for the active badge (consistent with LEAD badge)", () => {
+    // Active badge should use same styling pattern as the LEAD badge
+    expect(specialistCardSrc).toMatch(/font-mono.*ACTIVE|ACTIVE.*font-mono/s);
+  });
+
+  it("only shows ACTIVE badge on non-manager specialists", () => {
+    // Should check isManager before rendering the ACTIVE badge
+    // The ACTIVE badge should be in a conditional that excludes managers
+    expect(specialistCardSrc).toMatch(/!isManager.*ACTIVE/s);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Activity status — "Start your first conversation" for unused specialists
+// ---------------------------------------------------------------------------
+describe("SpecialistCard unused specialist prompt", () => {
+  it("renders a prompt for unused specialists", () => {
+    expect(specialistCardSrc).toMatch(/Start your first conversation/i);
+  });
+
+  it("uses muted styling for the unused prompt", () => {
+    // Should use muted-foreground or similar subdued styling
+    expect(specialistCardSrc).toMatch(/text-muted-foreground/);
+  });
+
+  it("uses monospace font for the unused prompt", () => {
+    expect(specialistCardSrc).toMatch(/font-mono.*Start your first conversation|Start your first conversation.*font-mono/si);
+  });
+
+  it("only shows unused prompt when there are no outputs (not on managers)", () => {
+    // Should conditionally render based on hasOutputs being false
+    expect(specialistCardSrc).toMatch(/!hasOutputs|hasOutputs.*false/s);
+  });
+});