feat: add sidebar API client, stats bar, activity feed components

New components: SidebarStatsBar, SidebarActivityFeed, ActivityItem.
New API client for sidebar stats endpoint. Pulse-dot CSS animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/sidebar/SidebarActivityFeed.tsx

@@ -0,0 +1,80 @@
+import { Clock } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { ActivityItem } from './ActivityItem'
+import type { SidebarActiveSession, SidebarRecentSession } from '@/api/sidebar'
+
+interface SidebarActivityFeedProps {
+  activeSessions: SidebarActiveSession[]
+  recentCompletions: SidebarRecentSession[]
+  totalActive: number
+}
+
+export function SidebarActivityFeed({
+  activeSessions,
+  recentCompletions,
+  totalActive,
+}: SidebarActivityFeedProps) {
+  const navigate = useNavigate()
+  const hasActivity = activeSessions.length > 0 || recentCompletions.length > 0
+
+  return (
+    <div className="px-3 pb-1">
+      {/* Header */}
+      <div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
+        <Clock size={10} style={{ color: '#34d399' }} />
+        <span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170]">
+          Activity
+        </span>
+      </div>
+
+      {!hasActivity ? (
+        <p className="px-2.5 py-2 text-xs text-muted-foreground">
+          No activity today
+        </p>
+      ) : (
+        <div className="space-y-0.5">
+          {/* Active sessions */}
+          {activeSessions.map((session) => (
+            <ActivityItem
+              key={session.session_id}
+              sessionId={session.session_id}
+              treeName={session.tree_name}
+              treeId={session.tree_id}
+              treeType={session.tree_type}
+              status="active"
+              ticketNumber={session.ticket_number || session.psa_ticket_id}
+            />
+          ))}
+
+          {/* Overflow link */}
+          {totalActive > 5 && (
+            <button
+              onClick={() => navigate('/sessions')}
+              className="w-full px-2.5 py-1 text-left text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
+            >
+              View all in Sessions →
+            </button>
+          )}
+
+          {/* Divider between active and recent */}
+          {activeSessions.length > 0 && recentCompletions.length > 0 && (
+            <div className="mx-2.5 my-1" style={{ height: '1px', background: 'rgba(255,255,255,0.03)' }} />
+          )}
+
+          {/* Recent completions */}
+          {recentCompletions.map((session) => (
+            <ActivityItem
+              key={session.session_id}
+              sessionId={session.session_id}
+              treeName={session.tree_name}
+              treeId={session.tree_id}
+              treeType={session.tree_type}
+              status="recent"
+              timestamp={session.completed_at}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}