simplify stats page UI: remove play button, milestones, and 500k target

Author: waynesutton

changelog.md

@@ -6,6 +6,15 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Changed
+
+- Simplified stats page UI
+  - Removed Play/Reset animation controls from growth chart (static display only)
+  - Removed milestone progress bar and "% to target" from message counter
+  - Removed "Target: 500k" from growth chart footer
+  - Removed "9am PT snapshot" label (refresh button available for manual updates)
+  - Stats can be refreshed on demand (no rate limit on read-only queries)
+
 ### Fixed
 
 - Fixed mobile scrolling issues across Dashboard

files.md

@@ -57,7 +57,7 @@ React frontend application.
 | File | Description |
 |------|-------------|
 | `Login.tsx` | Public homepage with WorkOS AuthKit integration. Shows "Go to Dashboard" button when logged in (no auto-redirect), "Sign in" when logged out. Includes privacy messaging, "Syncs with" section showing supported CLI tools (OpenCode, Claude Code, Droid, Codex CLI, Cursor with coming soon badge), getting started section with plugin links including codex-sync (mobile-visible), tan mode theme support with footer (theme switcher, Terms/Privacy links), footer icons (GitHub, Discord, Support, Discussions), updated mockup with view tabs and OC/CC source badges (desktop-only), feature list with Sync/Search/Private/Tag/Export/Delete keywords and eval datasets tagline, Watch the demo link, trust message with cloud/local deployment info, real-time Platform Stats leaderboard (Top Models, Top CLI) above Open Source footer link |
-| `Stats.tsx` | Public stats page (/stats) with platform statistics isolated from homepage. Includes MessageMilestoneCounter (daily 9am PT snapshot with dynamic milestones, progress bar), AnimatedGrowthChart (SVG chart with play/reset animation showing cumulative message growth over days, dynamic Y-axis scaling, X-axis date labels), plus a local error boundary and data guards so chart failures do not blank the app. Theme toggle, temp refresh button, back link to homepage. No auth required. |
+| `Stats.tsx` | Public stats page (/stats) with platform statistics isolated from homepage. Includes MessageMilestoneCounter (total messages synced), GrowthChart (static SVG chart showing cumulative message growth over 60 days, dynamic Y-axis scaling, X-axis date labels), plus a local error boundary and data guards so chart failures do not blank the app. Theme toggle, temp refresh button, back link to homepage. No auth required. |
 | `Dashboard.tsx` | Main dashboard with custom themed source filter dropdown (filters by user's enabled agents from Settings, dark/tan mode support, click-outside close, escape key close), source badges (CC/OC/FD), eval toggle button, Context link with search icon, setup banner for new users with 3-column plugin cards (OpenCode, Claude Code, Factory Droid), mobile-optimized header/filters/session rows, URL param support for deep linking from Context search (?session=id), Cmd/Ctrl+K shortcut to open Context search, MessageBubble with content normalization helpers (getPartTextContent, getToolName) for multi-plugin format support, flash-free session transitions using lastValidSessionRef cache (shows cached content until new data loads, subtle corner spinner), and five views: Overview (responsive stat grids), Sessions (mobile-friendly list with stacked layout), Evals (eval-ready sessions with export modal), Analytics (responsive breakdowns with collapsible filters), Wrapped (Daily Sync Wrapped visualization) |
 | `Settings.tsx` | Tabbed settings: API Access (two-column layout with Plugin Setup and AI Coding Agents sections, keys, endpoints with plugin links including codex-sync), Profile (collapsible section for privacy, account info, Legal section with Terms/Privacy links, Danger Zone with delete data/account options). AI Coding Agents section lets users enable/disable CLI tools for the source filter dropdown (OpenCode, Claude Code, Factory Droid, Codex CLI with supported status, Cursor, Continue, Amp, Aider, Goose, Mentat, Cline, Kilo Code). Back link navigates to /dashboard |
 | `Docs.tsx` | Comprehensive documentation page with instant typeahead search (Cmd/Ctrl+K shortcut), left sidebar navigation (hidden scrollbar) with npm links (opencode-sync-plugin, claude-code-sync, codex-sync), right table of contents, anchor tags, copy/view as markdown buttons, mobile responsive, works with both dark/tan themes. Search indexes all sections with keywords for quick navigation to any topic via hash anchor. Covers use hosted version (with features, 3-plugin install cards with OC/CC/CX badges, login/sync for all three plugins), self-hosting requirements with cloud and 100% local deployment options, quick start (3-plugin cards), dashboard features, OpenCode plugin, Claude Code plugin, Codex CLI plugin with full documentation sections, API reference, search types, authentication, hosting, fork guide, troubleshooting, and FAQ. Links to opencode.ai, claude.ai, and openai.com/codex in hero and plugin sections. |

src/pages/Stats.tsx

@@ -8,8 +8,6 @@ import {
   Moon,
   MessagesSquare,
   Zap,
-  Play,
-  RotateCcw,
   ArrowLeft,
   RefreshCw,
 } from "lucide-react";
@@ -25,25 +23,6 @@ function formatNumber(num: number): string {
   return num.toString();
 }
 
-// TEMP: Calculate next milestone based on current count
-function getNextMilestone(count: number): { target: number; previous: number } {
-  if (count < 500_000) {
-    return { target: 500_000, previous: 0 };
-  }
-  if (count < 1_000_000) {
-    // 100k increments: 500k -> 600k -> 700k -> etc.
-    const next = Math.ceil(count / 100_000) * 100_000;
-    const target = count === next ? next + 100_000 : next;
-    const prev = target - 100_000;
-    return { target, previous: prev };
-  }
-  // 500k increments for 1M+
-  const next = Math.ceil(count / 500_000) * 500_000;
-  const target = count === next ? next + 500_000 : next;
-  const prev = target - 500_000;
-  return { target, previous: prev };
-}
-
 function getPTOffsetMinutes(date: Date): number {
   const parts = new Intl.DateTimeFormat("en-US", {
     timeZone: "America/Los_Angeles",
@@ -162,7 +141,7 @@ function useStaticQuery<T>(
   return state;
 }
 
-// Message milestone counter component
+// Message counter component
 function MessageMilestoneCounter({
   isDark,
   refreshToken,
@@ -176,13 +155,7 @@ function MessageMilestoneCounter({
     refreshToken,
   );
 
-  // Calculate milestone targets
   const count = messageCount ?? 0;
-  const { target, previous } = getNextMilestone(count);
-
-  // Calculate progress percentage within current milestone range
-  const range = target - previous;
-  const progress = range > 0 ? ((count - previous) / range) * 100 : 0;
 
   return (
     <div
@@ -201,55 +174,31 @@ function MessageMilestoneCounter({
           className={`h-4 w-4 ${isDark ? "text-zinc-500" : "text-[#8b7355]"}`}
         />
         Messages Synced
-        <span
-          className={`ml-auto text-[10px] font-normal ${isDark ? "text-zinc-600" : "text-[#8b7355]"}`}
-        >
-          {loading ? "loading" : "9am PT snapshot"}
-        </span>
+        {loading && (
+          <span
+            className={`ml-auto text-[10px] font-normal ${isDark ? "text-zinc-600" : "text-[#8b7355]"}`}
+          >
+            loading
+          </span>
+        )}
       </h3>
 
       {/* Count display */}
-      <div className="mb-3">
+      <div>
         <span
-          className={`text-2xl font-bold tabular-nums ${
+          className={`text-3xl font-bold tabular-nums ${
             isDark ? "text-zinc-100" : "text-[#1a1a1a]"
           }`}
         >
           {count.toLocaleString()}
         </span>
-        <span
-          className={`text-sm ml-2 ${isDark ? "text-zinc-500" : "text-[#8b7355]"}`}
-        >
-          / {formatNumber(target)}
-        </span>
       </div>
-
-      {/* Progress bar */}
-      <div
-        className={`h-2 rounded-full overflow-hidden ${
-          isDark ? "bg-zinc-800" : "bg-[#e6e4e1]"
-        }`}
-      >
-        <div
-          className={`h-full rounded-full transition-all duration-500 ${
-            isDark ? "bg-emerald-500" : "bg-emerald-600"
-          }`}
-          style={{ width: `${Math.min(progress, 100)}%` }}
-        />
-      </div>
-
-      {/* Percentage */}
-      <p
-        className={`text-xs mt-2 ${isDark ? "text-zinc-500" : "text-[#8b7355]"}`}
-      >
-        {progress.toFixed(1)}% to {formatNumber(target)}
-      </p>
     </div>
   );
 }
 
-// Animated growth chart component
-function AnimatedGrowthChart({
+// Growth chart component
+function GrowthChart({
   isDark,
   refreshToken,
 }: {
@@ -259,8 +208,6 @@ function AnimatedGrowthChart({
   const { data: growthData } = useStaticQuery<
     Array<{ date: string; count: number; cumulative: number }>
   >(api.analytics.publicMessageGrowth, {}, refreshToken);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [animationKey, setAnimationKey] = useState(0);
 
   // Get data points - limit to last 60 days for readability
   const dataPoints = growthData?.slice(-60) ?? [];
@@ -289,25 +236,6 @@ function AnimatedGrowthChart({
 
   const yAxisMax = getNiceMax(maxCumulative * 1.1);
 
-  const handlePlay = () => {
-    setAnimationKey((prev) => prev + 1);
-    setIsPlaying(true);
-  };
-
-  const handleReset = () => {
-    setIsPlaying(false);
-    setAnimationKey((prev) => prev + 1);
-  };
-
-  // Fallback timeout to stop animation
-  useEffect(() => {
-    if (!isPlaying) return;
-    const timeout = setTimeout(() => {
-      setIsPlaying(false);
-    }, 3500);
-    return () => clearTimeout(timeout);
-  }, [isPlaying, animationKey]);
-
   // Build SVG path
   const chartHeight = 120;
   const chartWidth = 100;
@@ -391,47 +319,16 @@ function AnimatedGrowthChart({
           : "border-[#e6e4e1] bg-[#f5f3f0]"
       }`}
     >
-      <div className="flex items-center justify-between mb-4">
-        <h3
-          className={`text-sm font-medium flex items-center gap-2 ${
-            isDark ? "text-zinc-300" : "text-[#1a1a1a]"
-          }`}
-        >
-          <Zap
-            className={`h-4 w-4 ${isDark ? "text-zinc-500" : "text-[#8b7355]"}`}
-          />
-          Message Growth
-        </h3>
-
-        <div className="flex items-center gap-2">
-          {!isPlaying ? (
-            <button
-              onClick={handlePlay}
-              disabled={dataPoints.length === 0}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
-                isDark
-                  ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700 disabled:opacity-50"
-                  : "bg-[#ebe9e6] text-[#1a1a1a] hover:bg-[#e6e4e1] disabled:opacity-50"
-              }`}
-            >
-              <Play className="h-3 w-3" />
-              Play
-            </button>
-          ) : (
-            <button
-              onClick={handleReset}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
-                isDark
-                  ? "bg-zinc-800 text-zinc-300 hover:bg-zinc-700"
-                  : "bg-[#ebe9e6] text-[#1a1a1a] hover:bg-[#e6e4e1]"
-              }`}
-            >
-              <RotateCcw className="h-3 w-3" />
-              Reset
-            </button>
-          )}
-        </div>
-      </div>
+      <h3
+        className={`text-sm font-medium mb-4 flex items-center gap-2 ${
+          isDark ? "text-zinc-300" : "text-[#1a1a1a]"
+        }`}
+      >
+        <Zap
+          className={`h-4 w-4 ${isDark ? "text-zinc-500" : "text-[#8b7355]"}`}
+        />
+        Message Growth
+      </h3>
 
       <div className="relative" style={{ height: chartHeight + 20 }}>
         {chartPoints.length === 0 ? (
@@ -466,7 +363,6 @@ function AnimatedGrowthChart({
             </div>
 
             <svg
-              key={animationKey}
               viewBox={`0 0 ${chartWidth} ${chartHeight}`}
               preserveAspectRatio="none"
               className="w-full ml-6"
@@ -485,19 +381,6 @@ function AnimatedGrowthChart({
                     stopOpacity="0"
                   />
                 </linearGradient>
-                <clipPath id={`clipPath-${animationKey}`}>
-                  <rect x="0" y="0" width={chartWidth} height={chartHeight}>
-                    {isPlaying && (
-                      <animate
-                        attributeName="width"
-                        from="0"
-                        to={chartWidth}
-                        dur="3s"
-                        fill="freeze"
-                      />
-                    )}
-                  </rect>
-                </clipPath>
               </defs>
 
               <line
@@ -510,26 +393,17 @@ function AnimatedGrowthChart({
                 strokeDasharray="2,2"
               />
 
-              <path
-                d={areaPath}
-                fill="url(#growthGradient)"
-                clipPath={
-                  isPlaying ? `url(#clipPath-${animationKey})` : undefined
-                }
-              />
+              <path d={areaPath} fill="url(#growthGradient)" />
 
               <path
                 d={pathData}
                 fill="none"
                 stroke={isDark ? "#10b981" : "#059669"}
                 strokeWidth="1.5"
                 vectorEffect="non-scaling-stroke"
-                clipPath={
-                  isPlaying ? `url(#clipPath-${animationKey})` : undefined
-                }
               />
 
-              {chartPoints.length > 0 && !isPlaying && (
+              {chartPoints.length > 0 && (
                 <circle
                   cx={padding.left + innerWidth}
                   cy={
@@ -561,7 +435,7 @@ function AnimatedGrowthChart({
 
       {chartPoints.length > 0 && (
         <div
-          className={`mt-3 pt-3 border-t flex justify-between text-xs ${
+          className={`mt-3 pt-3 border-t text-xs ${
             isDark
               ? "border-zinc-800 text-zinc-500"
               : "border-[#e6e4e1] text-[#8b7355]"
@@ -573,12 +447,6 @@ function AnimatedGrowthChart({
               {chartPoints[chartPoints.length - 1].cumulative.toLocaleString()}
             </span>
           </span>
-          <span>
-            Target:{" "}
-            <span className={isDark ? "text-zinc-300" : "text-[#1a1a1a]"}>
-              500k
-            </span>
-          </span>
         </div>
       )}
     </div>
@@ -747,7 +615,7 @@ function StatsPageContent({ theme, setTheme }: StatsPageContentProps) {
           <MessageMilestoneCounter isDark={isDark} refreshToken={refreshToken} />
 
           {/* Growth chart */}
-          <AnimatedGrowthChart isDark={isDark} refreshToken={refreshToken} />
+          <GrowthChart isDark={isDark} refreshToken={refreshToken} />
         </div>
 
         {/* Info text */}
@@ -756,7 +624,7 @@ function StatsPageContent({ theme, setTheme }: StatsPageContentProps) {
             isDark ? "text-zinc-600" : "text-[#8b7355]"
           }`}
         >
-          Stats snapshot from the OpenSync platform. Updates daily at 9am PT.
+          Stats snapshot from the OpenSync platform.
         </p>
       </main>
     </div>

task.md

@@ -24,10 +24,10 @@ OpenSync supports two AI coding tools: **OpenCode** and **Claude Code**.
 ## Recently Completed (Stats Page)
 
 - [x] Created new public /stats page with platform statistics
-  - Moved MessageMilestoneCounter and AnimatedGrowthChart from Login page
+  - Moved MessageMilestoneCounter and GrowthChart from Login page
   - Isolated stats components to prevent homepage rendering issues
-  - Real-time message document count with dynamic milestone targets
-  - Animated SVG growth chart with play/reset controls
+  - Total message count display (clean, no milestones)
+  - Static SVG growth chart showing cumulative growth over 60 days
   - Dynamic Y-axis scaling based on actual data
   - X-axis date labels (first, middle, last dates)
   - Dark/tan theme support with toggle
@@ -36,16 +36,19 @@ OpenSync supports two AI coding tools: **OpenCode** and **Claude Code**.
 - [x] Stabilized public stats page rendering
   - Added local error boundary to prevent full app blanking
   - Guarded growth chart against invalid data points
-- [x] Switched stats to daily snapshots at 9am PT
-  - Loads once from the database (no realtime updates)
-  - Shows daily update status in the UI
 - [x] Fixed 16MB Convex read limit error on stats page
-  - Changed publicMessageCount to use async iteration instead of collect
-  - Changed publicMessageGrowth to use async iteration instead of collect
+  - Rewrote publicMessageCount to sum session.messageCount instead of counting messages
+  - Rewrote publicMessageGrowth to aggregate from sessions table
   - Added temporary refresh button to stats header (to remove later)
+- [x] Simplified stats page UI
+  - Removed Play/Reset animation controls (static chart only)
+  - Removed milestone progress bar and percentage
+  - Removed "Target: 500k" from growth chart
+  - Removed "9am PT snapshot" label
+  - Stats can be refreshed on demand (read-only queries have no rate limit)
 - [x] Added new Convex queries in analytics.ts
-  - publicMessageCount: returns total message documents (no auth)
-  - publicMessageGrowth: returns daily counts with cumulative totals (no auth)
+  - publicMessageCount: sums session messageCount fields (no auth)
+  - publicMessageGrowth: aggregates daily counts from sessions (no auth)
   - Added safety checks for invalid dates in publicMessageGrowth
 
 ## Recently Completed (Docs Page codex-sync Updates)