feat(web): show video creation time on home page and watch page

- Add createdAt to API video status response
- Library cards now display date + time (e.g. Apr 10, 2026 at 6:13 AM)
- Watch page header shows 'Created <date> at <time>' instead of
  the misleading auto-updating 'Updated' timestamp

Author: adminbjkai

apps/web-api/src/routes/videos.ts

@@ -184,6 +184,7 @@ export async function videoRoutes(app: FastifyInstance) {
       ai_entities_json: unknown;
       ai_action_items_json: unknown;
       ai_quotes_json: unknown;
+      created_at: string;
       operator_notes: string | null;
       transcription_dead_error: string | null;
       ai_dead_error: string | null;
@@ -192,6 +193,7 @@ export async function videoRoutes(app: FastifyInstance) {
       `SELECT
          v.id,
          v.name,
+         v.created_at,
          v.processing_phase,
          v.processing_progress,
          v.result_key,
@@ -255,6 +257,7 @@ export async function videoRoutes(app: FastifyInstance) {
     return reply.send({
       videoId: row.id,
       name: row.name,
+      createdAt: row.created_at,
       processingPhase: row.processing_phase,
       processingProgress: row.processing_progress,
       resultKey: row.result_key,

apps/web/src/lib/api.ts

@@ -42,6 +42,7 @@ export type MultipartCompleteResponse = {
 export type VideoStatusResponse = {
   videoId: string;
   name: string;
+  createdAt: string;
   processingPhase: string;
   processingProgress: number;
   resultKey: string | null;

apps/web/src/pages/HomePage.tsx

@@ -46,12 +46,19 @@ export function HomePage() {
     return phase ? (labels[phase] ?? phase) : 'Queued';
   };
 
-  const dateLabel = (iso: string) =>
-    new Date(iso).toLocaleDateString(undefined, {
+  const dateLabel = (iso: string) => {
+    const d = new Date(iso);
+    const date = d.toLocaleDateString(undefined, {
       month: 'short',
       day: 'numeric',
       year: 'numeric',
     });
+    const time = d.toLocaleTimeString(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+    return `${date} at ${time}`;
+  };
   const phaseBucket = (phase?: string | null): LibraryFilter => {
     if (
       !phase ||

apps/web/src/pages/VideoPage.tsx

@@ -366,6 +366,7 @@ export function VideoPage() {
           isProcessing,
           processingPhase: status?.processingPhase,
           processingProgress: status?.processingProgress,
+          createdAt: status?.createdAt ?? null,
           lastUpdatedAt,
           errorMessage,
           jobStatusLabel: jobStatus?.status ?? null,

apps/web/src/pages/video-page/VideoPageHeader.tsx

@@ -23,6 +23,7 @@ export type VideoPageHeaderVideoProps = {
   isProcessing: boolean;
   processingPhase: VideoStatusResponse["processingPhase"] | undefined;
   processingProgress: number | null | undefined;
+  createdAt: string | null;
   lastUpdatedAt: string | null;
   errorMessage: string | null;
   jobStatusLabel: string | null;
@@ -72,6 +73,7 @@ export function VideoPageHeader({ titleProps, videoProps, uiProps, actionProps }
     isProcessing,
     processingPhase,
     processingProgress,
+    createdAt,
     lastUpdatedAt,
     errorMessage,
     jobStatusLabel,
@@ -174,7 +176,20 @@ export function VideoPageHeader({ titleProps, videoProps, uiProps, actionProps }
             {processingPhase === "failed" && (
               <span className="status-chip status-chip-danger">Failed</span>
             )}
-            {lastUpdatedAt && <span>Updated {new Date(lastUpdatedAt).toLocaleTimeString()}</span>}
+            {createdAt && (
+              <span>
+                Created{' '}
+                {new Date(createdAt).toLocaleDateString(undefined, {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}{' '}
+                at {new Date(createdAt).toLocaleTimeString(undefined, {
+                  hour: 'numeric',
+                  minute: '2-digit',
+                })}
+              </span>
+            )}
           </div>
         </div>