feat: badge filtering, context badges, version drilldown, and landing page link

- Add context badges (long/short sessions) based on avg cache_read_tokens
- Badge filter dropdown on members table with auto-sort by relevant column
- Client versions section with expandable user lists per version
- Insights page: plan exhaustion data, command adoption charts
- Spend trend chart improvements and daily spend chart refinements
- User detail page enhancements (model cost breakdown, tools & features)
- Add homepage link to package.json and README navigation row

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ofershap

package.json

@@ -2,6 +2,7 @@
   "name": "cursor-usage-tracker",
   "version": "0.0.0-development",
   "description": "Open-source Cursor IDE usage monitoring, anomaly detection, and alerting for enterprise teams",
+  "homepage": "https://cursor-usage-tracker.sticklight.app",
   "type": "module",
   "scripts": {
     "dev": "next dev",

src/app/api/analytics/route.ts

@@ -9,6 +9,7 @@ import {
   getAnalyticsCommandsSummary,
   getAnalyticsFileExtensionsSummary,
   getAnalyticsClientVersionsSummary,
+  getUsersByClientVersion,
   getPlanExhaustionStats,
 } from "@/lib/db";
 
@@ -29,6 +30,7 @@ export function GET(request: Request) {
       commands: getAnalyticsCommandsSummary(days),
       fileExtensions: getAnalyticsFileExtensionsSummary(days),
       clientVersions: getAnalyticsClientVersionsSummary(),
+      versionUsers: getUsersByClientVersion(),
       planExhaustion: getPlanExhaustionStats(),
     });
   } catch {

src/app/dashboard-client.tsx

@@ -45,7 +45,7 @@ function fmt(n: number): string {
   return n.toLocaleString();
 }
 
-export type SortColumn = "spend" | "activity" | "reqs" | "lines" | "cpr" | "name";
+export type SortColumn = "spend" | "activity" | "reqs" | "lines" | "cpr" | "name" | "context";
 
 interface SpendBreakdownRow {
   date: string;
@@ -72,6 +72,8 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
   const [loading, setLoading] = useState(false);
   const [sortCol, setSortCol] = useState<SortColumn>("spend");
   const [sortAsc, setSortAsc] = useState(false);
+  const [badgeFilter, setBadgeFilter] = useState<string | null>(null);
+  const [preBadgeSortCol, setPreBadgeSortCol] = useState<SortColumn | null>(null);
   const [groups, setGroups] = useState<BillingGroupWithMembers[]>([]);
   const [selectedGroup, setSelectedGroup] = useState("all");
 
@@ -133,6 +135,36 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
     });
   }, []);
 
+  const BADGE_SORT_MAP: Record<string, SortColumn> = {
+    "long-sessions": "context",
+    "short-sessions": "context",
+    "over-budget": "spend",
+    "premium-model": "cpr",
+    "cost-efficient": "cpr",
+    "power-user": "reqs",
+    "tab-completer": "reqs",
+    "deep-thinker": "spend",
+    "light-user": "reqs",
+    balanced: "reqs",
+  };
+
+  const handleBadgeFilter = useCallback(
+    (badge: string | null) => {
+      if (badge) {
+        setPreBadgeSortCol(sortCol);
+        const targetSort = BADGE_SORT_MAP[badge] ?? "spend";
+        setSortCol(targetSort);
+        setSortAsc(badge === "short-sessions" || badge === "cost-efficient");
+      } else if (preBadgeSortCol) {
+        setSortCol(preBadgeSortCol);
+        setSortAsc(false);
+        setPreBadgeSortCol(null);
+      }
+      setBadgeFilter(badge);
+    },
+    [sortCol, preBadgeSortCol],
+  );
+
   const filteredUsers = useMemo(() => {
     let users = stats.rankedUsers;
     if (groupEmailSet) {
@@ -144,6 +176,14 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
         (u) => u.email.toLowerCase().includes(q) || u.name.toLowerCase().includes(q),
       );
     }
+    if (badgeFilter) {
+      users = users.filter(
+        (u) =>
+          u.usage_badge === badgeFilter ||
+          u.spend_badge === badgeFilter ||
+          u.context_badge === badgeFilter,
+      );
+    }
     const sorted = [...users].sort((a, b) => {
       const flip = sortAsc ? -1 : 1;
       switch (sortCol) {
@@ -162,12 +202,14 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
           const cprB = b.agent_requests > 0 ? b.spend_cents / b.agent_requests : 0;
           return (cprB - cprA) * flip;
         }
+        case "context":
+          return (b.avg_cache_read - a.avg_cache_read) * flip;
         default:
           return 0;
       }
     });
     return sorted;
-  }, [stats.rankedUsers, search, sortCol, sortAsc, groupEmailSet]);
+  }, [stats.rankedUsers, search, sortCol, sortAsc, groupEmailSet, badgeFilter]);
 
   const searchedUser = useMemo(() => {
     if (!search.trim()) return null;
@@ -193,7 +235,7 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
   }
 
   const timeLabel = formatTimeLabel(days);
-  const isSearching = search.trim().length > 0 || selectedGroup !== "all";
+  const isSearching = search.trim().length > 0 || selectedGroup !== "all" || badgeFilter !== null;
   const totalLines = stats.dailyTeamActivity.reduce((s, d) => s + d.total_lines_added, 0);
   const effectiveDays = Math.min(days, stats.cycleDays);
   const cycleStartDate = new Date(stats.cycleStart);
@@ -387,14 +429,18 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
 
       {/* ── Row: Team Spend Trend + Model Cost Comparison ── */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-        <SpendTrendChart data={filteredTeamDailySpend} selectedDays={days} />
+        <SpendTrendChart
+          data={filteredTeamDailySpend}
+          selectedDays={days}
+          avgPerDay={filteredSpendCents / 100 / (effectiveDays || 1)}
+        />
         <ModelCostComparison data={data.modelCosts} />
       </div>
 
       {/* ── Charts ── */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
         <SpendBarChart data={filteredUsers.slice(0, 20)} highlightEmail={searchedUser?.email} />
-        <DailySpendChart data={dailySpendData} />
+        <DailySpendChart data={dailySpendData} onNameClick={(name) => setSearch(name)} />
       </div>
 
       {/* ── Table ── */}
@@ -405,6 +451,8 @@ export function DashboardClient({ initialData }: DashboardClientProps) {
         onSort={handleSort}
         highlightEmail={searchedUser?.email}
         timeLabel={timeLabel}
+        badgeFilter={badgeFilter}
+        onBadgeFilter={handleBadgeFilter}
       />
     </div>
   );

src/app/insights/insights-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import {
   AreaChart,
   Area,
@@ -71,6 +71,8 @@ interface VersionEntry {
   percentage: number;
 }
 
+type VersionUsers = Record<string, Array<{ email: string; name: string }>>;
+
 interface ModelEfficiencyEntry {
   model: string;
   users: number;
@@ -113,6 +115,7 @@ interface InsightsData {
   commands: CommandsEntry[];
   fileExtensions: FileExtEntry[];
   clientVersions: VersionEntry[];
+  versionUsers: VersionUsers;
   modelEfficiency: ModelEfficiencyEntry[];
   planExhaustion: PlanExhaustionData;
 }
@@ -484,65 +487,134 @@ export function InsightsClient({ data }: { data: InsightsData }) {
       </div>
 
       {/* Client Versions - compact */}
-      <ChartCard title="Client Versions (Latest Day)">
-        <div className="flex gap-4">
-          <ResponsiveContainer width={160} height={160}>
-            <PieChart>
-              <Pie
-                data={data.clientVersions.slice(0, 6)}
-                dataKey="user_count"
-                nameKey="version"
-                cx="50%"
-                cy="50%"
-                outerRadius={55}
-                innerRadius={25}
-                paddingAngle={2}
-              >
-                {data.clientVersions.slice(0, 6).map((_, i) => (
-                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
-                ))}
-              </Pie>
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "#18181b",
-                  border: "1px solid #3f3f46",
-                  borderRadius: "6px",
-                  fontSize: "11px",
-                }}
-                formatter={
-                  ((v: number, _: string, entry: { payload: VersionEntry }) => [
-                    `${v ?? 0} users (${entry.payload.percentage.toFixed(0)}%)`,
-                    entry.payload.version,
-                  ]) as never
-                }
-              />
-            </PieChart>
-          </ResponsiveContainer>
-          <div className="flex-1 overflow-y-auto max-h-[160px]">
-            <table className="w-full text-xs">
-              <tbody>
-                {data.clientVersions.map((v, i) => (
-                  <tr key={v.version} className="border-b border-zinc-800/30">
-                    <td className="py-1">
-                      <span
-                        className="inline-block w-2 h-2 rounded-full mr-1.5"
-                        style={{ backgroundColor: COLORS[i % COLORS.length] }}
-                      />
-                      <span className="font-mono text-zinc-300">{v.version}</span>
-                    </td>
-                    <td className="text-right py-1 text-zinc-400">{v.user_count}</td>
-                    <td className="text-right py-1 text-zinc-500">{v.percentage.toFixed(0)}%</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </ChartCard>
+      <ClientVersionsSection
+        clientVersions={data.clientVersions}
+        versionUsers={data.versionUsers}
+      />
     </div>
   );
 }
 
+function ClientVersionsSection({
+  versionUsers,
+}: {
+  clientVersions: VersionEntry[];
+  versionUsers: VersionUsers;
+}) {
+  const [expandedVersion, setExpandedVersion] = useState<string | null>(null);
+
+  const versions = useMemo(() => {
+    const totalUsers = Object.values(versionUsers).reduce((sum, u) => sum + u.length, 0);
+    return Object.entries(versionUsers)
+      .map(([version, users]) => ({
+        version,
+        user_count: users.length,
+        percentage: totalUsers > 0 ? (users.length / totalUsers) * 100 : 0,
+        users,
+      }))
+      .sort((a, b) => b.version.localeCompare(a.version, undefined, { numeric: true }));
+  }, [versionUsers]);
+
+  const latestVersion = versions[0]?.version;
+
+  return (
+    <ChartCard title="Client Versions">
+      <div className="flex gap-4">
+        <ResponsiveContainer width={160} height={160}>
+          <PieChart>
+            <Pie
+              data={versions.slice(0, 6)}
+              dataKey="user_count"
+              nameKey="version"
+              cx="50%"
+              cy="50%"
+              outerRadius={55}
+              innerRadius={25}
+              paddingAngle={2}
+            >
+              {versions.slice(0, 6).map((_, i) => (
+                <Cell key={i} fill={COLORS[i % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#18181b",
+                border: "1px solid #3f3f46",
+                borderRadius: "6px",
+                fontSize: "11px",
+              }}
+              formatter={
+                ((v: number, _: string, entry: { payload: (typeof versions)[number] }) => [
+                  `${v ?? 0} users (${entry.payload.percentage.toFixed(0)}%)`,
+                  entry.payload.version,
+                ]) as never
+              }
+            />
+          </PieChart>
+        </ResponsiveContainer>
+        <div className="flex-1 overflow-y-auto max-h-[400px]">
+          <table className="w-full text-xs">
+            <tbody>
+              {versions.map((v, i) => {
+                const isExpanded = expandedVersion === v.version;
+                const isLatest = v.version === latestVersion;
+                return (
+                  <React.Fragment key={v.version}>
+                    <tr
+                      className={`border-b border-zinc-800/30 cursor-pointer hover:bg-zinc-800/40 transition-colors ${isExpanded ? "bg-zinc-800/30" : ""}`}
+                      onClick={() => setExpandedVersion(isExpanded ? null : v.version)}
+                    >
+                      <td className="py-1">
+                        <span
+                          className="inline-block w-2 h-2 rounded-full mr-1.5"
+                          style={{ backgroundColor: COLORS[i % COLORS.length] }}
+                        />
+                        <span className="font-mono text-zinc-300">{v.version}</span>
+                        {isLatest && (
+                          <span className="ml-1.5 text-[10px] text-emerald-400 font-medium">
+                            latest
+                          </span>
+                        )}
+                      </td>
+                      <td className="text-right py-1 text-zinc-400">{v.user_count}</td>
+                      <td className="text-right py-1 text-zinc-500">{v.percentage.toFixed(0)}%</td>
+                      <td className="text-right py-1 pl-1 text-zinc-600 w-4">
+                        {v.users.length > 0 && (isExpanded ? "▾" : "▸")}
+                      </td>
+                    </tr>
+                    {isExpanded && v.users.length > 0 && (
+                      <tr>
+                        <td colSpan={4} className="pb-1">
+                          <div className="pl-5 py-1 space-y-0.5">
+                            {v.users.map((u) => (
+                              <a
+                                key={u.email}
+                                href={`/users/${encodeURIComponent(u.email)}`}
+                                className="block text-[11px] text-zinc-400 hover:text-blue-400 transition-colors"
+                              >
+                                {u.name}
+                                {!isLatest && (
+                                  <span className="ml-1 text-amber-500/60 text-[10px]">
+                                    needs update
+                                  </span>
+                                )}
+                              </a>
+                            ))}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </ChartCard>
+  );
+}
+
 function PlanExhaustionSection({ data }: { data: PlanExhaustionData }) {
   const [showUsers, setShowUsers] = useState(false);
   const { summary, users } = data;

src/app/insights/page.tsx

@@ -8,6 +8,7 @@ import {
   getAnalyticsCommandsSummary,
   getAnalyticsFileExtensionsSummary,
   getAnalyticsClientVersionsSummary,
+  getUsersByClientVersion,
   getModelEfficiency,
   getPlanExhaustionStats,
 } from "@/lib/db";
@@ -27,6 +28,7 @@ export default function InsightsPage() {
       commands: getAnalyticsCommandsSummary(30),
       fileExtensions: getAnalyticsFileExtensionsSummary(30),
       clientVersions: getAnalyticsClientVersionsSummary(),
+      versionUsers: getUsersByClientVersion(),
       modelEfficiency: getModelEfficiency(),
       planExhaustion: getPlanExhaustionStats(),
     };