From 324f84a544a2c47a1bcde54308aff3bd2ad9717c Mon Sep 17 00:00:00 2001
From: Cory Pride <cory.pride83@gmail.com>
Date: Mon, 1 Jun 2026 21:48:21 -0500
Subject: [PATCH 1/2] fix: knowledge center character escaping

---
 .../components/dashboard/TopContentList.tsx   | 11 ++--
 frontend/src/lib/decodeHtmlEntities.ts        |  6 ++
 frontend/src/loaders/routeLoaders.ts          |  3 +-
 .../KnowledgeCenterManagement.tsx             | 58 +++++++++++--------
 .../pages/knowledge-center/LibraryViewer.tsx  |  7 ++-
 .../ResidentKnowledgeCenter.tsx               | 34 ++++++-----
 .../pages/knowledge-center/VideoViewer.tsx    | 17 ++++--
 frontend/src/pages/student/ResidentHome.tsx   | 28 +++++----
 8 files changed, 100 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/lib/decodeHtmlEntities.ts

diff --git a/frontend/src/components/dashboard/TopContentList.tsx b/frontend/src/components/dashboard/TopContentList.tsx
index 905799123..b1052905e 100644
--- a/frontend/src/components/dashboard/TopContentList.tsx
+++ b/frontend/src/components/dashboard/TopContentList.tsx
@@ -1,6 +1,7 @@
 import { OpenContentItem } from '@/types';
 import { ExternalLink } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 interface TopContentListProps {
     heading: string;
@@ -10,6 +11,8 @@ interface TopContentListProps {
 
 function ContentRow({ item }: { item: OpenContentItem }) {
     const navigate = useNavigate();
+    const title = decodeHtmlEntities(item.title);
+    const providerName = decodeHtmlEntities(item.provider_name ?? '');
 
     const handleClick = () => {
         if (item.content_type === 'video') {
@@ -29,7 +32,7 @@ function ContentRow({ item }: { item: OpenContentItem }) {
             {item.thumbnail_url ? (
                 <img
                     src={item.thumbnail_url}
-                    alt={item.title}
+                    alt={title}
                     className="w-10 h-10 rounded object-cover shrink-0"
                 />
             ) : (
@@ -37,11 +40,11 @@ function ContentRow({ item }: { item: OpenContentItem }) {
             )}
             <div className="min-w-0 flex-1">
                 <p className="text-sm font-medium text-foreground truncate">
-                    {item.title}
+                    {title}
                 </p>
-                {item.provider_name && (
+                {providerName && (
                     <p className="text-xs text-muted-foreground truncate">
-                        {item.provider_name}
+                        {providerName}
                     </p>
                 )}
             </div>
diff --git a/frontend/src/lib/decodeHtmlEntities.ts b/frontend/src/lib/decodeHtmlEntities.ts
new file mode 100644
index 000000000..81baf785e
--- /dev/null
+++ b/frontend/src/lib/decodeHtmlEntities.ts
@@ -0,0 +1,6 @@
+export function decodeHtmlEntities(input: string): string {
+    if (!input) return input;
+    const el = document.createElement('textarea');
+    el.innerHTML = input;
+    return el.value;
+}
diff --git a/frontend/src/loaders/routeLoaders.ts b/frontend/src/loaders/routeLoaders.ts
index 8c79d5d56..dda33eecf 100644
--- a/frontend/src/loaders/routeLoaders.ts
+++ b/frontend/src/loaders/routeLoaders.ts
@@ -20,6 +20,7 @@ import {
 } from '@/types';
 import API from '@/api/api';
 import { fetchUser } from '@/auth/useAuth';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 function buildClassBreadcrumbs(
     cls: Class,
@@ -135,7 +136,7 @@ const getLibraryOptionsHelper = async ({ request }: { request: Request }) => {
               (library) =>
                   ({
                       key: library.id,
-                      value: library.title
+                      value: decodeHtmlEntities(library.title)
                   }) as Option
           )
         : [];
diff --git a/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx b/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
index 65257e019..faf516f41 100644
--- a/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
+++ b/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
@@ -44,6 +44,7 @@ import {
     formatVideoDuration
 } from '@/lib/formatters';
 import API from '@/api/api';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 interface CardHandlers {
     onToggleFeatured: (
@@ -66,9 +67,11 @@ function LibraryCard({
     library: Library;
     handlers: CardHandlers;
 }) {
+    const title = decodeHtmlEntities(library.title);
+    const description = decodeHtmlEntities(library.description ?? '');
     return (
         <div
-            className="media-card group"
+            className="media-card group flex flex-col h-full"
             onClick={() =>
                 handlers.onNavigate(`/viewer/libraries/${library.id}`)
             }
@@ -102,18 +105,18 @@ function LibraryCard({
             <div className="flex items-start gap-3 mb-3">
                 <img
                     src={library.thumbnail_url ?? ''}
-                    alt={library.title}
+                    alt={title}
                     className="size-12 rounded shrink-0 border border-gray-200"
                 />
                 <div className="flex-1 min-w-0 pr-8">
-                    <h3 className="card-title-link">{library.title}</h3>
+                    <h3 className="card-title-link">{title}</h3>
                 </div>
             </div>
-            <p className="text-sm text-gray-600 line-clamp-2 mb-3">
-                {library.description}
+            <p className="text-sm text-gray-600 line-clamp-2 mb-3 flex-1">
+                {description}
             </p>
             <div
-                className="row-with-border"
+                className="row-with-border mt-auto"
                 onClick={(e) => e.stopPropagation()}
             >
                 <label className="clickable-row">
@@ -155,9 +158,12 @@ interface VideoCardProps {
 
 function VideoCard({ video, handlers, onRetry, onViewStatus }: VideoCardProps) {
     const available = videoIsAvailable(video);
+    const title = decodeHtmlEntities(video.title);
+    const channelTitle = decodeHtmlEntities(video.channel_title ?? '');
+    const description = decodeHtmlEntities(video.description ?? '');
     return (
         <div
-            className={`bg-white rounded-lg border ${!available ? 'border-red-300' : 'border-gray-200'} p-4 hover:shadow-lg hover:border-brand transition-all cursor-pointer group relative`}
+            className={`bg-white rounded-lg border ${!available ? 'border-red-300' : 'border-gray-200'} p-4 hover:shadow-lg hover:border-brand transition-all cursor-pointer group relative flex flex-col h-full`}
             onClick={() => {
                 if (available)
                     handlers.onNavigate(`/viewer/videos/${video.id}`);
@@ -193,7 +199,7 @@ function VideoCard({ video, handlers, onRetry, onViewStatus }: VideoCardProps) {
                 <div className="relative shrink-0">
                     <img
                         src={`/api/photos/${video.external_id}.jpg`}
-                        alt={video.title}
+                        alt={title}
                         className="size-12 rounded object-cover border border-gray-200"
                     />
                     <div className="absolute -bottom-1 -right-1 bg-black/80 text-white text-[10px] px-1 py-0.5 rounded">
@@ -201,18 +207,19 @@ function VideoCard({ video, handlers, onRetry, onViewStatus }: VideoCardProps) {
                     </div>
                 </div>
                 <div className="flex-1 min-w-0 pr-8">
-                    <h3 className="card-title-link">{video.title}</h3>
-                    <p className="text-sm text-gray-500">
-                        {video.channel_title}
-                    </p>
+                    <h3 className="card-title-link">{title}</h3>
+                    <p className="text-sm text-gray-500">{channelTitle}</p>
                 </div>
             </div>
             {available ? (
-                <p className="text-sm text-gray-600 line-clamp-2 mb-3">
-                    {video.description}
+                <p className="text-sm text-gray-600 line-clamp-2 mb-3 flex-1">
+                    {description}
                 </p>
             ) : (
-                <div className="mb-3" onClick={(e) => e.stopPropagation()}>
+                <div
+                    className="mb-3 flex-1"
+                    onClick={(e) => e.stopPropagation()}
+                >
                     <p className="text-sm text-red-600 mb-2">
                         {getVideoErrorMessage(video) ??
                             'Video is processing...'}
@@ -239,7 +246,7 @@ function VideoCard({ video, handlers, onRetry, onViewStatus }: VideoCardProps) {
                 </div>
             )}
             <div
-                className="row-with-border"
+                className="row-with-border mt-auto"
                 onClick={(e) => e.stopPropagation()}
             >
                 <label className="clickable-row">
@@ -279,8 +286,13 @@ function LinkCard({
     handlers: CardHandlers;
     onLinkClick: (link: HelpfulLink) => void;
 }) {
+    const title = decodeHtmlEntities(link.title);
+    const description = decodeHtmlEntities(link.description ?? '');
     return (
-        <div className="media-card group" onClick={() => onLinkClick(link)}>
+        <div
+            className="media-card group flex flex-col h-full"
+            onClick={() => onLinkClick(link)}
+        >
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger asChild>
@@ -308,14 +320,14 @@ function LinkCard({
                 </Tooltip>
             </TooltipProvider>
             <div className="pr-8 mb-2">
-                <h3 className="card-title-link">{link.title}</h3>
+                <h3 className="card-title-link">{title}</h3>
             </div>
             <p className="text-sm text-brand mb-2 truncate">{link.url}</p>
-            <p className="text-sm text-gray-600 line-clamp-2 mb-3">
-                {link.description}
+            <p className="text-sm text-gray-600 line-clamp-2 mb-3 flex-1">
+                {description}
             </p>
             <div
-                className="row-with-border"
+                className="row-with-border mt-auto"
                 onClick={(e) => e.stopPropagation()}
             >
                 <label className="clickable-row">
@@ -687,7 +699,7 @@ export default function KnowledgeCenterManagement() {
                             setCurrentPage(1);
                         }}
                     >
-                        <SelectTrigger className="w-[180px]">
+                        <SelectTrigger className="w-45">
                             <SelectValue placeholder="Filter by" />
                         </SelectTrigger>
                         <SelectContent>
@@ -742,7 +754,7 @@ export default function KnowledgeCenterManagement() {
                                 setCurrentPage(1);
                             }}
                         >
-                            <SelectTrigger className="w-[280px]">
+                            <SelectTrigger className="w-70">
                                 <SelectValue placeholder="Filter by category" />
                             </SelectTrigger>
                             <SelectContent>
diff --git a/frontend/src/pages/knowledge-center/LibraryViewer.tsx b/frontend/src/pages/knowledge-center/LibraryViewer.tsx
index f5f14369d..68b737112 100644
--- a/frontend/src/pages/knowledge-center/LibraryViewer.tsx
+++ b/frontend/src/pages/knowledge-center/LibraryViewer.tsx
@@ -13,6 +13,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import API from '@/api/api';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 import { useTourContext } from '@/contexts/useTourContext';
 import { targetToStepIndexMap } from '@/contexts/tourState';
 
@@ -83,7 +84,7 @@ export default function LibraryViewer() {
                     `libraries/${libraryId}`
                 )) as ServerResponseOne<Library>;
                 if (resp.success) {
-                    setLibraryTitle(resp.data.title);
+                    setLibraryTitle(decodeHtmlEntities(resp.data.title));
                     setProviderID(resp.data.open_content_provider_id);
                     setLibraryData(resp.data);
                 }
@@ -211,7 +212,7 @@ export default function LibraryViewer() {
                             )}
                         </div>
                         <p className="text-sm text-gray-600 line-clamp-1">
-                            {libraryData?.description}
+                            {decodeHtmlEntities(libraryData?.description ?? '')}
                         </p>
                     </div>
                 </div>
@@ -220,7 +221,7 @@ export default function LibraryViewer() {
             <div className="flex-1 bg-surface-hover">
                 {isLoading ? (
                     <div className="flex h-full items-center justify-center">
-                        <Skeleton className="w-full h-[600px]" />
+                        <Skeleton className="w-full h-150" />
                     </div>
                 ) : src !== '' ? (
                     <div className="relative w-full h-full">
diff --git a/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx b/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
index 826c8719c..7926a36b7 100644
--- a/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
+++ b/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
@@ -34,6 +34,7 @@ import { formatVideoDuration } from '@/lib/formatters';
 import { isAdministrator, useAuth } from '@/auth/useAuth';
 import { toast } from 'sonner';
 import API from '@/api/api';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 const ITEMS_PER_PAGE = 20;
 
@@ -248,6 +249,9 @@ export default function ResidentKnowledgeCenter() {
         const favorited = pendingFavorites.has(favKey)
             ? pendingFavorites.get(favKey)!
             : item.favorited;
+        const title = decodeHtmlEntities(item.title);
+        const description = decodeHtmlEntities(item.description);
+        const author = item.author ? decodeHtmlEntities(item.author) : '';
         const handleClick = () => {
             if (item.type === 'library') {
                 navigate(`/viewer/libraries/${item.id}`);
@@ -318,15 +322,15 @@ export default function ResidentKnowledgeCenter() {
                     {item.type === 'library' && item.imageUrl && (
                         <img
                             src={item.imageUrl}
-                            alt={item.title}
-                            className="size-12 rounded flex-shrink-0 border border-gray-200"
+                            alt={title}
+                            className="size-12 rounded shrink-0 border border-gray-200"
                         />
                     )}
                     {item.type === 'video' && item.thumbnailUrl && (
-                        <div className="relative flex-shrink-0">
+                        <div className="relative shrink-0">
                             <img
                                 src={item.thumbnailUrl}
-                                alt={item.title}
+                                alt={title}
                                 className="size-12 rounded object-cover border border-gray-200"
                             />
                             {item.duration != null && (
@@ -337,13 +341,11 @@ export default function ResidentKnowledgeCenter() {
                         </div>
                     )}
                     <div className="flex-1 min-w-0 pr-8">
-                        <h3 className="card-title-link">{item.title}</h3>
-                        {item.author && (
-                            <p className="text-sm text-gray-500">
-                                {item.author}
-                            </p>
+                        <h3 className="card-title-link">{title}</h3>
+                        {author && (
+                            <p className="text-sm text-gray-500">{author}</p>
                         )}
-                        {!item.author && (
+                        {!author && (
                             <p className="text-sm text-gray-500 invisible">
                                 placeholder
                             </p>
@@ -351,14 +353,14 @@ export default function ResidentKnowledgeCenter() {
                     </div>
                 </div>
 
-                <p className="text-sm text-gray-600 line-clamp-2 mb-3 min-h-[2.5rem]">
-                    {item.description}
+                <p className="text-sm text-gray-600 line-clamp-2 mb-3 min-h-10">
+                    {description}
                 </p>
 
                 {item.type === 'library' &&
                     item.categories &&
                     item.categories.length > 0 && (
-                        <div className="mt-auto pt-3 border-t border-gray-100 flex items-center gap-2 overflow-hidden min-h-[2.5rem]">
+                        <div className="mt-auto pt-3 border-t border-gray-100 flex items-center gap-2 overflow-hidden min-h-10">
                             <Badge
                                 variant="secondary"
                                 className="bg-surface-hover text-gray-700 hover:bg-surface-hover text-xs shrink-0 max-w-48 truncate"
@@ -404,7 +406,7 @@ export default function ResidentKnowledgeCenter() {
                     )}
 
                 {item.type === 'link' && item.url && (
-                    <div className="mt-auto pt-3 border-t border-gray-100 min-h-[2.5rem] flex items-center">
+                    <div className="mt-auto pt-3 border-t border-gray-100 min-h-10 flex items-center">
                         <p className="text-sm text-brand truncate">
                             {item.url}
                         </p>
@@ -412,7 +414,7 @@ export default function ResidentKnowledgeCenter() {
                 )}
 
                 {item.type === 'video' && (
-                    <div className="mt-auto pt-3 border-t border-gray-100 min-h-[2.5rem]" />
+                    <div className="mt-auto pt-3 border-t border-gray-100 min-h-10" />
                 )}
             </div>
         );
@@ -516,7 +518,7 @@ export default function ResidentKnowledgeCenter() {
                         >
                             <SelectTrigger
                                 id="knowledge-center-filters"
-                                className="w-[280px]"
+                                className="w-70"
                             >
                                 <SelectValue placeholder="Filter by category" />
                             </SelectTrigger>
diff --git a/frontend/src/pages/knowledge-center/VideoViewer.tsx b/frontend/src/pages/knowledge-center/VideoViewer.tsx
index 10ef57258..ca9b088cc 100644
--- a/frontend/src/pages/knowledge-center/VideoViewer.tsx
+++ b/frontend/src/pages/knowledge-center/VideoViewer.tsx
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatVideoDuration } from '@/lib/formatters';
 import API from '@/api/api';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 export default function VideoViewer() {
     const navigate = useNavigate();
@@ -44,7 +45,7 @@ export default function VideoViewer() {
     if (isLoading) {
         return (
             <div className="space-y-4">
-                <Skeleton className="w-2/3 h-[400px] rounded-lg" />
+                <Skeleton className="w-2/3 h-100 rounded-lg" />
                 <Skeleton className="w-1/3 h-8" />
                 <Skeleton className="w-2/3 h-20" />
             </div>
@@ -67,6 +68,10 @@ export default function VideoViewer() {
         );
     }
 
+    const videoTitle = decodeHtmlEntities(video?.title ?? '');
+    const videoDescription = decodeHtmlEntities(video?.description ?? '');
+    const videoChannel = decodeHtmlEntities(video?.channel_title ?? '');
+
     return (
         <div className="flex flex-col h-[calc(100vh-4rem)]">
             <div className="px-6 py-3 border-b border-gray-200 bg-white">
@@ -74,7 +79,7 @@ export default function VideoViewer() {
                     <Breadcrumbs
                         items={[
                             { label: 'Knowledge Center', href: backPath },
-                            { label: video?.title ?? 'Video' }
+                            { label: videoTitle || 'Video' }
                         ]}
                     />
                     <Button
@@ -90,7 +95,7 @@ export default function VideoViewer() {
                     <div className="flex-1">
                         <div className="flex items-center gap-2 mb-1">
                             <h2 className="text-xl font-semibold text-brand-dark">
-                                {video?.title}
+                                {videoTitle}
                             </h2>
                             {isAdmin && video && (
                                 <>
@@ -118,11 +123,11 @@ export default function VideoViewer() {
                             )}
                         </div>
                         <p className="text-sm text-gray-600 line-clamp-1">
-                            {video?.description}
+                            {videoDescription}
                         </p>
-                        {video?.channel_title && (
+                        {videoChannel && (
                             <p className="text-xs text-gray-500 mt-0.5">
-                                By {video.channel_title}
+                                By {videoChannel}
                                 {video.duration
                                     ? ` - ${formatVideoDuration(video.duration)}`
                                     : ''}
diff --git a/frontend/src/pages/student/ResidentHome.tsx b/frontend/src/pages/student/ResidentHome.tsx
index e2ef2ef88..0c8d1a4a8 100644
--- a/frontend/src/pages/student/ResidentHome.tsx
+++ b/frontend/src/pages/student/ResidentHome.tsx
@@ -15,6 +15,7 @@ import { ExternalLink, Star } from 'lucide-react';
 import { EmptyState } from '@/components/shared';
 import { useTourContext } from '@/contexts/useTourContext';
 import { targetToStepIndexMap } from '@/contexts/tourState';
+import { decodeHtmlEntities } from '@/lib/decodeHtmlEntities';
 
 interface ResidentHomeData {
     helpfulLinks: HelpfulLink[];
@@ -30,6 +31,8 @@ function FeaturedLibraryCard({
     library: Library;
     onClick: () => void;
 }) {
+    const title = decodeHtmlEntities(library.title);
+    const description = decodeHtmlEntities(library.description ?? '');
     return (
         <div onClick={onClick} className="block cursor-pointer">
             <Card className="hover:shadow-md transition-shadow h-full">
@@ -38,17 +41,17 @@ function FeaturedLibraryCard({
                         {library.thumbnail_url ? (
                             <img
                                 src={library.thumbnail_url}
-                                alt={library.title}
-                                className="size-12 rounded object-cover flex-shrink-0"
+                                alt={title}
+                                className="size-12 rounded object-cover shrink-0"
                             />
                         ) : (
-                            <div className="size-12 rounded bg-muted flex-shrink-0" />
+                            <div className="size-12 rounded bg-muted shrink-0" />
                         )}
                         <h4 className="text-sm font-medium text-foreground line-clamp-1">
-                            {library.title}
+                            {title}
                         </h4>
                     </div>
-                    <p className="caption-clamp">{library.description ?? ''}</p>
+                    <p className="caption-clamp">{description}</p>
                 </CardContent>
             </Card>
         </div>
@@ -56,6 +59,8 @@ function FeaturedLibraryCard({
 }
 
 function HelpfulLinkCard({ link }: { link: HelpfulLink }) {
+    const title = decodeHtmlEntities(link.title);
+    const description = decodeHtmlEntities(link.description ?? '');
     return (
         <a
             href={link.url}
@@ -68,11 +73,11 @@ function HelpfulLinkCard({ link }: { link: HelpfulLink }) {
                     <ExternalLink className="size-5 text-brand shrink-0 mt-0.5" />
                     <div className="min-w-0">
                         <h4 className="text-sm font-medium text-foreground line-clamp-1">
-                            {link.title}
+                            {title}
                         </h4>
-                        {link.description && (
+                        {description && (
                             <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                                {link.description}
+                                {description}
                             </p>
                         )}
                     </div>
@@ -84,6 +89,7 @@ function HelpfulLinkCard({ link }: { link: HelpfulLink }) {
 
 function FavoriteItem({ item }: { item: OpenContentItem }) {
     const navigate = useNavigate();
+    const title = decodeHtmlEntities(item.title);
 
     const handleClick = () => {
         if (item.content_type === 'video') {
@@ -103,13 +109,13 @@ function FavoriteItem({ item }: { item: OpenContentItem }) {
             {item.thumbnail_url ? (
                 <img
                     src={item.thumbnail_url}
-                    alt={item.title}
+                    alt={title}
                     className="w-10 h-10 rounded object-cover shrink-0"
                 />
             ) : (
                 <div className="w-10 h-10 rounded bg-muted shrink-0" />
             )}
-            <p className="text-sm text-foreground truncate">{item.title}</p>
+            <p className="text-sm text-foreground truncate">{title}</p>
         </div>
     );
 }
@@ -218,7 +224,7 @@ export default function ResidentHome() {
                     )}
                 </div>
 
-                <aside className="hidden xl:block w-[320px] shrink-0 space-y-6 sticky top-6 self-start">
+                <aside className="hidden xl:block w-80 shrink-0 space-y-6 sticky top-6 self-start">
                     <div className="bg-card rounded-lg border border-border p-5">
                         <div className="flex items-center gap-2 mb-4">
                             <Star className="size-5 text-brand-gold" />

From 253d1281a54a0ce0b620c631c7439c889a4df247 Mon Sep 17 00:00:00 2001
From: Cory Pride <cory.pride83@gmail.com>
Date: Mon, 1 Jun 2026 22:07:56 -0500
Subject: [PATCH 2/2] fix: lint error

---
 frontend/src/pages/knowledge-center/VideoViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/knowledge-center/VideoViewer.tsx b/frontend/src/pages/knowledge-center/VideoViewer.tsx
index ca9b088cc..d605ade04 100644
--- a/frontend/src/pages/knowledge-center/VideoViewer.tsx
+++ b/frontend/src/pages/knowledge-center/VideoViewer.tsx
@@ -128,7 +128,7 @@ export default function VideoViewer() {
                         {videoChannel && (
                             <p className="text-xs text-gray-500 mt-0.5">
                                 By {videoChannel}
-                                {video.duration
+                                {video?.duration
                                     ? ` - ${formatVideoDuration(video.duration)}`
                                     : ''}
                             </p>