feat: add app router and build info endpoint

- Introduced a new router for application-related endpoints, including a `/build-info` endpoint to serve current build information from a generated JSON file.
- Implemented a Vite plugin to generate `build-info.json` during the build process, containing a unique build hash and timestamp.
- Added a `BuildVersionCheck` component in the frontend to monitor build version changes and refresh the application when a new version is detected.
- Updated existing routers to include necessary imports for the new functionality.

Author: atyrode

src/backend/main.py

@@ -17,6 +17,7 @@
 from routers.workspace_router import workspace_router
 from routers.pad_router import pad_router
 from routers.template_pad_router import template_pad_router
+from routers.app_router import app_router
 from database.service import TemplatePadService
 from database.database import async_session, run_migrations_with_lock
 
@@ -140,6 +141,7 @@ async def read_root(request: Request, auth: Optional[UserSession] = Depends(opti
 app.include_router(workspace_router, prefix="/api/workspace")
 app.include_router(pad_router, prefix="/api/pad")
 app.include_router(template_pad_router, prefix="/api/templates")
+app.include_router(app_router, prefix="/api/app")
 
 if __name__ == "__main__":
     import uvicorn

src/backend/routers/app_router.py

@@ -0,0 +1,24 @@
+import os
+import json
+import time
+
+from fastapi import APIRouter
+from config import STATIC_DIR
+
+app_router = APIRouter()
+
+@app_router.get("/build-info")
+async def get_build_info():
+    """
+    Return the current build information from the static assets
+    """
+    try:
+        # Read the build-info.json file that will be generated during build
+        build_info_path = os.path.join(STATIC_DIR, "build-info.json")
+        with open(build_info_path, 'r') as f:
+            build_info = json.load(f)
+        return build_info
+    except Exception as e:
+        # Return a default response if file doesn't exist
+        print(f"Error reading build-info.json: {str(e)}")
+        return {"buildHash": "development", "timestamp": int(time.time())}

src/backend/routers/workspace_router.py

@@ -1,11 +1,14 @@
 import os
+import json
+import time
 
 from pydantic import BaseModel
 from fastapi import APIRouter, Depends, HTTPException
 from fastapi.responses import JSONResponse
 
 from dependencies import UserSession, require_auth, get_coder_api
 from coder import CoderAPI
+from config import STATIC_DIR
 
 workspace_router = APIRouter()
 

src/frontend/index.tsx

@@ -15,6 +15,7 @@ import type * as TExcalidraw from "@atyrode/excalidraw";
 
 import App from "./src/App";
 import AuthGate from "./src/AuthGate";
+import { BuildVersionCheck } from "./src/BuildVersionCheck";
 
 
 declare global {
@@ -31,6 +32,7 @@ async function initApp() {
     <StrictMode>
         <PostHogProvider client={posthog}>
           <QueryClientProvider client={queryClient}>
+            <BuildVersionCheck />
             <AuthGate>
               <App
                 useCustom={(api: any, args?: any[]) => { }}

src/frontend/src/BuildVersionCheck.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useBuildInfo, useSaveCanvas } from './api/hooks';
+import { saveCurrentCanvas } from './utils/canvasUtils';
+
+/**
+ * Component that checks for application version changes and refreshes the page when needed.
+ * This component doesn't render anything visible.
+ */
+export function BuildVersionCheck() {
+  // Store the initial build hash when the component first loads
+  const [initialBuildHash, setInitialBuildHash] = useState<string | null>(null);
+  
+  // Query for the current build info from the server
+  const { data: buildInfo } = useBuildInfo();
+  
+  // Get the saveCanvas mutation
+  const { mutate: saveCanvas } = useSaveCanvas({
+    onSuccess: () => {
+      console.debug("[pad.ws] Canvas saved before refresh");
+      // Refresh the page immediately after saving
+      window.location.reload();
+    },
+    onError: (error) => {
+      console.error("[pad.ws] Failed to save canvas before refresh:", error);
+      // Refresh anyway even if save fails
+      window.location.reload();
+    }
+  });
+  
+  // Function to handle version update
+  const handleVersionUpdate = useCallback(() => {
+    // Save the canvas and then refresh
+    saveCurrentCanvas(
+      saveCanvas,
+      undefined, // No success callback needed as it's handled in the useSaveCanvas hook
+      () => window.location.reload() // On error, just refresh
+    );
+  }, [saveCanvas]);
+  
+  useEffect(() => {
+    // On first load, store the initial build hash
+    if (buildInfo?.buildHash && initialBuildHash === null) {
+      console.log('Initial build hash:', buildInfo.buildHash);
+      setInitialBuildHash(buildInfo.buildHash);
+    }
+    
+    // If we have both values and they don't match, a new version is available
+    if (initialBuildHash !== null && 
+        buildInfo?.buildHash && 
+        initialBuildHash !== buildInfo.buildHash) {
+      
+      console.log('New version detected. Current:', initialBuildHash, 'New:', buildInfo.buildHash);
+      
+      // Save the canvas and then refresh
+      handleVersionUpdate();
+    }
+  }, [buildInfo, initialBuildHash, handleVersionUpdate]);
+  
+  // This component doesn't render anything
+  return null;
+}

src/frontend/src/api/hooks.ts

@@ -39,6 +39,11 @@ export interface CanvasBackupsResponse {
   backups: CanvasBackup[];
 }
 
+export interface BuildInfo {
+  buildHash: string;
+  timestamp: number;
+}
+
 // API functions
 export const api = {
   // Authentication
@@ -134,6 +139,16 @@ export const api = {
       throw error;
     }
   },
+  
+  // Build Info
+  getBuildInfo: async (): Promise<BuildInfo> => {
+    try {
+      const result = await fetchApi('/api/app/build-info');
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  },
 };
 
 // Query hooks
@@ -192,6 +207,15 @@ export function useCanvasBackups(limit: number = 10, options?: UseQueryOptions<C
   });
 }
 
+export function useBuildInfo(options?: UseQueryOptions<BuildInfo>) {
+  return useQuery({
+    queryKey: ['buildInfo'],
+    queryFn: api.getBuildInfo,
+    refetchInterval: 60000, // Check every minute
+    ...options,
+  });
+}
+
 // Mutation hooks
 export function useStartWorkspace(options?: UseMutationOptions) {
   return useMutation({

src/frontend/src/utils/canvasUtils.ts

@@ -1,4 +1,6 @@
 import { DEFAULT_SETTINGS } from '../types/settings';
+import type { ExcalidrawImperativeAPI } from "@atyrode/excalidraw/types";
+import { CanvasData } from '../api/hooks';
 
 /**
  * 
@@ -42,3 +44,59 @@ export function normalizeCanvasData(data: any) {
 
   return { ...data, appState };
 }
+
+/**
+ * Saves the current canvas state using the Excalidraw API
+ * @param saveCanvas The saveCanvas mutation function from useSaveCanvas hook
+ * @param onSuccess Optional callback to run after successful save
+ * @param onError Optional callback to run if save fails
+ */
+export function saveCurrentCanvas(
+  saveCanvas: (data: CanvasData) => void,
+  onSuccess?: () => void,
+  onError?: (error: any) => void
+) {
+  try {
+    // Get the excalidrawAPI from the window object
+    const excalidrawAPI = (window as any).excalidrawAPI as ExcalidrawImperativeAPI | null;
+    
+    if (excalidrawAPI) {
+      // Get the current elements, state, and files
+      const elements = excalidrawAPI.getSceneElements();
+      const appState = excalidrawAPI.getAppState();
+      const files = excalidrawAPI.getFiles();
+      
+      // Save the canvas data
+      saveCanvas({
+        elements: [...elements] as any[], // Convert readonly array to mutable array
+        appState,
+        files
+      });
+      
+      // Call onSuccess callback if provided
+      if (onSuccess) {
+        onSuccess();
+      }
+      
+      return true;
+    } else {
+      console.warn("[pad.ws] ExcalidrawAPI not available");
+      
+      // Call onError callback if provided
+      if (onError) {
+        onError(new Error("ExcalidrawAPI not available"));
+      }
+      
+      return false;
+    }
+  } catch (error) {
+    console.error("[pad.ws] Error saving canvas:", error);
+    
+    // Call onError callback if provided
+    if (onError) {
+      onError(error);
+    }
+    
+    return false;
+  }
+}

src/frontend/vite.config.mts

@@ -1,4 +1,32 @@
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, Plugin } from "vite";
+import fs from "fs";
+import path from "path";
+
+// Create a plugin to generate build-info.json during build
+const generateBuildInfoPlugin = (): Plugin => ({
+  name: 'generate-build-info',
+  closeBundle() {
+    // Generate a unique build hash (timestamp + random string)
+    const buildInfo = {
+      buildHash: Date.now().toString(36) + Math.random().toString(36).substring(2),
+      timestamp: Date.now()
+    };
+    
+    // Ensure the dist directory exists
+    const distDir = path.resolve(__dirname, 'dist');
+    if (!fs.existsSync(distDir)) {
+      fs.mkdirSync(distDir, { recursive: true });
+    }
+    
+    // Write to the output directory
+    fs.writeFileSync(
+      path.resolve(distDir, 'build-info.json'),
+      JSON.stringify(buildInfo, null, 2)
+    );
+    
+    console.log('Generated build-info.json with hash:', buildInfo.buildHash);
+  }
+});
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -24,6 +52,9 @@ export default defineConfig(({ mode }) => {
       'import.meta.env.CODER_URL': JSON.stringify(env.CODER_URL),
     },
     publicDir: "public",
+    plugins: [
+      generateBuildInfoPlugin(),
+    ],
     optimizeDeps: {
       esbuildOptions: {
         // Bumping to 2022 due to "Arbitrary module namespace identifier names" not being