[Dashboard] Introduce changelog to stack-companion

apps/dashboard/.env

@@ -16,3 +16,4 @@ STACK_DEVELOPMENT_TRANSLATION_LOCALE=# enter the locale to use for the translati
 NEXT_PUBLIC_STACK_ENABLE_DEVELOPMENT_FEATURES_PROJECT_IDS='["internal"]'
 NEXT_PUBLIC_STACK_DEBUGGER_ON_ASSERTION_ERROR=# set to true to open the debugger on assertion errors (set to true in .env.development)
 STACK_FEATUREBASE_JWT_SECRET=# used for Featurebase SSO, you probably won't have to set this
+STACK_CHANGELOG_URL=# Used for raw github link to root changelog.md file.

apps/dashboard/src/app/api/changelog/route.ts

@@ -0,0 +1,42 @@
+import { parseRootChangelog } from "@/lib/changelog";
+import { NextResponse } from "next/server";
+
+const REVALIDATE_SECONDS = 60 * 60;
+
+export async function GET() {
+  const changelogUrl = process.env.STACK_CHANGELOG_URL;
+
+  if (!changelogUrl) {
+    return NextResponse.json({ entries: [] });
+  }
+
+  try {
+    const response = await fetch(changelogUrl, {
+      headers: {
+        "Accept": "text/plain",
+        "User-Agent": "stack-auth-dashboard-changelog-widget",
+      },
+      next: {
+        revalidate: REVALIDATE_SECONDS,
+      },
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to download changelog" },
+        { status: 502 },
+      );
+    }
+
+    const content = await response.text();
+    const entries = parseRootChangelog(content).slice(0, 8);
+
+    return NextResponse.json({ entries });
+  } catch (error) {
+    console.error("Failed to fetch remote changelog", error);
+    return NextResponse.json(
+      { error: "Failed to fetch changelog" },
+      { status: 500 },
+    );
+  }
+}

apps/dashboard/src/components/stack-companion.tsx

@@ -1,16 +1,50 @@
 'use client';
 
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui';
+import { ChangelogEntry } from '@/lib/changelog';
 import { cn } from '@/lib/utils';
 import { checkVersion, VersionCheckResult } from '@/lib/version-check';
 import { BookOpenIcon, CircleNotchIcon, ClockClockwiseIcon, LightbulbIcon, XIcon } from '@phosphor-icons/react';
+import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import packageJson from '../../package.json';
 import { FeedbackForm } from './feedback-form';
 import { ChangelogWidget } from './stack-companion/changelog-widget';
 import { FeatureRequestBoard } from './stack-companion/feature-request-board';
 import { UnifiedDocsWidget } from './stack-companion/unified-docs-widget';
 
+/**
+ * Compare two CalVer versions in YYYY.MM.DD format
+ * Returns true if version1 is newer than version2
+ */
+function isNewerCalVer(version1: string, version2: string): boolean {
+  const parseCalVer = (version: string): Date | null => {
+    const match = version.match(/^(\d{4})\.(\d{2})\.(\d{2})$/);
+    if (!match) return null;
+    const [, year, month, day] = match;
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+  };
+
+  const date1 = parseCalVer(version1);
+  const date2 = parseCalVer(version2);
+
+  if (!date1 || !date2) {
+    // Fallback to string comparison if parsing fails
+    return version1 > version2;
+  }
+
+  return date1.getTime() > date2.getTime();
+}
+
+/**
+ * Sanitize a string value for use in a cookie
+ * Removes or encodes characters that could break cookie parsing
+ */
+function sanitizeCookieValue(value: string): string {
+  // Remove or encode special characters that break cookie parsing
+  return encodeURIComponent(value);
+}
+
 type SidebarItem = {
   id: string,
   label: string,
@@ -73,6 +107,7 @@ export function useStackCompanion() {
   return useContext(StackCompanionContext);
 }
 
+
 export function StackCompanion({ className }: { className?: string }) {
   const [activeItem, setActiveItem] = useState<string | null>(null);
   const [mounted, setMounted] = useState(false);
@@ -82,6 +117,9 @@ export function StackCompanion({ className }: { className?: string }) {
   const [isAnimating, setIsAnimating] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [isSplitScreenMode, setIsSplitScreenMode] = useState(false);
+  const [changelogData, setChangelogData] = useState<ChangelogEntry[] | undefined>(undefined);
+  const [hasNewVersions, setHasNewVersions] = useState(false);
+  const [lastSeenVersion, setLastSeenVersion] = useState('');
 
   const startXRef = useRef(0);
   const startWidthRef = useRef(0);
@@ -125,6 +163,88 @@ export function StackCompanion({ className }: { className?: string }) {
     return cleanup;
   }, []);
 
+  // Fetch changelog data on mount and check for new versions
+  useEffect(() => {
+    const fetchChangelogData = async () => {
+      try {
+        const response = await fetch('/api/changelog');
+        if (response.ok) {
+          const payload = await response.json();
+          const entries = payload.entries || [];
+          setChangelogData(entries);
+
+          // Check for new versions
+          const lastSeenRaw = document.cookie
+            .split('; ')
+            .find(row => row.startsWith('stack-last-seen-changelog-version='))
+            ?.split('=')[1] || '';
+
+          const lastSeen = lastSeenRaw ? decodeURIComponent(lastSeenRaw) : '';
+          setLastSeenVersion(lastSeen);
+
+          if (entries.length > 0) {
+            // If no lastSeen cookie, user hasn't seen any changelog yet - show bell
+            if (!lastSeen) {
+              setHasNewVersions(true);
+            } else {
+              const hasNewer = entries.some((entry: ChangelogEntry) => {
+                if (entry.isUnreleased) return false;
+                return isNewerCalVer(entry.version, lastSeen);
+              });
+              setHasNewVersions(hasNewer);
+            }
+          }
+        } else {
+          // If fetch failed, leave changelogData as undefined so widget can try fetching itself
+          console.error('Failed to fetch changelog data: response not OK');
+        }
+      } catch (error) {
+        console.error('Failed to fetch changelog data:', error);
+        // Leave changelogData as undefined so widget can try fetching itself
+      }
+    };
+
+    runAsynchronously(fetchChangelogData());
+  }, []);
+
+  // Re-check for new versions when changelog is opened/closed
+  useEffect(() => {
+    if (activeItem === 'changelog') {
+      // When changelog is opened, mark the latest version as seen
+      if (changelogData && changelogData.length > 0) {
+        const latestVersion = changelogData[0].version;
+        document.cookie = `stack-last-seen-changelog-version=${sanitizeCookieValue(latestVersion)}; path=/; max-age=31536000`; // 1 year
+        setLastSeenVersion(latestVersion);
+      }
+      // Clear the notification badge immediately
+      setHasNewVersions(false);
+    } else if (activeItem === null) {
+      // When closed, re-check if there are new versions
+      const lastSeenRaw = document.cookie
+        .split('; ')
+        .find(row => row.startsWith('stack-last-seen-changelog-version='))
+        ?.split('=')[1] || '';
+
+      const lastSeen = lastSeenRaw ? decodeURIComponent(lastSeenRaw) : '';
+
+      if (changelogData && changelogData.length > 0) {
+        // If no lastSeen cookie, user hasn't seen any changelog yet - show bell
+        if (!lastSeen) {
+          setHasNewVersions(true);
+        } else {
+          const hasNewer = changelogData.some((entry: ChangelogEntry) => {
+            if (entry.isUnreleased) return false;
+            return isNewerCalVer(entry.version, lastSeen);
+          });
+          setHasNewVersions(hasNewer);
+        }
+      } else {
+        setHasNewVersions(false);
+      }
+    }
+  }, [activeItem, changelogData]);
+
+
   const openDrawer = useCallback((itemId: string) => {
     setActiveItem(itemId);
     setIsAnimating(true);
@@ -304,7 +424,7 @@ export function StackCompanion({ className }: { className?: string }) {
       <div className="flex-1 overflow-y-auto p-5 overflow-x-hidden no-drag cursor-auto">
         {activeItem === 'docs' && <UnifiedDocsWidget isActive={true} />}
         {activeItem === 'feedback' && <FeatureRequestBoard isActive={true} />}
-        {activeItem === 'changelog' && <ChangelogWidget isActive={true} />}
+        {activeItem === 'changelog' && <ChangelogWidget isActive={true} initialData={changelogData} />}
         {activeItem === 'support' && <FeedbackForm />}
       </div>
     </div>
@@ -338,18 +458,26 @@ export function StackCompanion({ className }: { className?: string }) {
                 className={cn(
                   "h-10 w-10 p-0 text-muted-foreground transition-all duration-[50ms] rounded-xl relative group",
                   item.hoverBg,
-                  activeItem === item.id && "bg-foreground/10 text-foreground shadow-sm ring-1 ring-foreground/5"
+                  activeItem === item.id && "bg-foreground/10 text-foreground shadow-sm ring-1 ring-foreground/5",
+                  // Glow effect for changelog with new updates
+                  item.id === 'changelog' && hasNewVersions && "ring-2 ring-green-500/30 bg-green-500/10"
                 )}
                 onClick={(e) => {
                   e.stopPropagation();
                   handleItemClick(item.id);
                 }}
               >
                 <item.icon className={cn("h-5 w-5 transition-transform duration-[50ms] group-hover:scale-110", item.color)} />
+                {item.id === 'changelog' && hasNewVersions && (
+                  <span className="absolute -top-1 -right-1 flex h-3 w-3">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                    <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
+                  </span>
+                )}
               </Button>
             </TooltipTrigger>
             <TooltipContent side="left" className="z-[60] mr-2">
-              {item.label}
+              {item.id === 'changelog' && hasNewVersions ? `${item.label} (New updates available!)` : item.label}
             </TooltipContent>
           </Tooltip>
         ))}