fix(ui): use build time

Author: fi3ework

website/rsbuild.config.ts

@@ -5,6 +5,8 @@ import { pluginReact } from '@rsbuild/plugin-react';
 const dataSource =
   process.env.RSBUILD_PUBLIC_DATA_SOURCE === 'mock' ? 'mock' : 'remote';
 
+const buildTime = new Date().toISOString();
+
 export default defineConfig({
   plugins: [pluginReact()],
   source: {
@@ -13,6 +15,7 @@ export default defineConfig({
     },
     define: {
       'import.meta.env.RSBUILD_PUBLIC_DATA_SOURCE': JSON.stringify(dataSource),
+      'import.meta.env.RSBUILD_BUILD_TIME': JSON.stringify(buildTime),
     },
   },
   resolve: {

website/src/App.tsx

@@ -11,6 +11,9 @@ import history from '@data';
 const DATA_SOURCE =
   import.meta.env.RSBUILD_PUBLIC_DATA_SOURCE === 'mock' ? 'mock' : 'remote';
 
+/** Build timestamp injected at compile time */
+const BUILD_TIME = import.meta.env.RSBUILD_BUILD_TIME as string | undefined;
+
 const STACKS = [
   { id: 'rspack', label: 'Rspack' },
   { id: 'rsbuild', label: 'Rsbuild' },
@@ -324,16 +327,20 @@ interface UpdateSchedule {
 const SCHEDULE_HOURS_UTC = [1, 13] as const;
 
 function buildUpdateSchedule(referenceTime: Date): UpdateSchedule {
-  const lastUpdate = getPrevScheduledTime(referenceTime);
   const nextUpdate = getNextScheduledTime(referenceTime);
 
   const countdownMinutes = Math.max(
     0,
     Math.floor((nextUpdate.getTime() - referenceTime.getTime()) / 60_000),
   );
 
+  // Use actual build time if available, otherwise fall back to calculated previous schedule
+  const lastUpdated = BUILD_TIME
+    ? formatTimestamp(new Date(BUILD_TIME))
+    : formatTimestamp(getPrevScheduledTime(referenceTime));
+
   return {
-    lastUpdated: formatTimestamp(lastUpdate),
+    lastUpdated,
     countdownMinutes,
   };
 }

website/src/components/timeline.tsx

@@ -135,24 +135,25 @@ export function Timeline({
               onValueChange={(value) => onStackChange?.(value)}
             >
               <SelectTrigger
-                className="min-w-0 flex-1 max-w-[200px]"
+                className="min-w-0 flex-1 max-w-fit"
                 aria-label="Select stack"
               >
-                <div className="flex flex-1 items-center justify-between gap-2">
-                  <span className="truncate font-medium text-foreground/90">
-                    {selectedStackMeta?.label ?? 'Select stack'}
+                <SelectValue placeholder="Select stack…">
+                  <span className="flex items-center gap-2">
+                    <span className="font-medium text-foreground/90">
+                      {selectedStackMeta?.label ?? 'Select stack'}
+                    </span>
+                    {selectedStackMeta ? (
+                      <Badge
+                        variant="outline"
+                        className="shrink-0 border-border/40 text-[11px]"
+                      >
+                        {selectedStackMeta.runs}{' '}
+                        {selectedStackMeta.runs === 1 ? 'run' : 'runs'}
+                      </Badge>
+                    ) : null}
                   </span>
-                  {selectedStackMeta ? (
-                    <Badge
-                      variant="outline"
-                      className="border-border/40 text-[11px]"
-                    >
-                      {selectedStackMeta.runs}{' '}
-                      {selectedStackMeta.runs === 1 ? 'run' : 'runs'}
-                    </Badge>
-                  ) : null}
-                </div>
-                <SelectValue className="sr-only" placeholder="Select stack…" />
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {stacks?.map((stack) => (