📝 Add docstrings to 11-project-header

src/app/layout.tsx

@@ -20,6 +20,13 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
+/**
+ * Root layout component that sets up global providers, fonts, theming, and notification support for the application.
+ *
+ * Wraps all pages with tRPC client context, applies Geist fonts, manages theme switching based on system preferences, and includes toast notification support.
+ *
+ * @param children - The content to be rendered within the layout
+ */
 export default function RootLayout({
   children,
 }: Readonly<{

src/modules/projects/ui/components/message-card.tsx

@@ -114,6 +114,11 @@ const UserMessage = ({ content }: UserMessageProps) => {
     )
 }
 
+/**
+ * Renders a chat message card, displaying either an assistant or user message based on the role.
+ *
+ * Selects the appropriate message component and passes relevant props for rendering, including content, optional fragment, timestamp, and interaction handlers.
+ */
 export default function MessageCard({
     content, role, fragment, createdAt, isActiveFragment, onFragmentClick, type
 }: MessageProps) {

src/modules/projects/ui/components/message-loading.tsx

@@ -33,6 +33,11 @@ const ShimmerMessages = () => {
     );
 }
 
+/**
+ * Displays a loading UI with a logo, label, and animated cycling status messages.
+ *
+ * Renders a vertically stacked container featuring a small logo and the label "Neo" at the top, followed by a dynamic message area that cycles through loading messages to indicate ongoing processing.
+ */
 export default function MessageLoading() {
     return (
         <div className="flex flex-col group px-2 pb-4">

src/modules/projects/ui/components/messages-container.tsx

@@ -8,6 +8,15 @@ import { useEffect, useRef } from "react";
 import { Fragment } from "@/generated/prisma";
 import MessageLoading from "./message-loading";
 
+/**
+ * Displays and manages the message list for a given project, supporting fragment selection and automatic updates.
+ *
+ * Fetches messages for the specified project, highlights the active fragment, and allows users to select message fragments. Automatically scrolls to the latest message and periodically refreshes the message list. Renders a loading indicator if the last message is from the user and provides a form for submitting new messages.
+ *
+ * @param projectId - The identifier of the project whose messages are displayed.
+ * @param activeFragment - The currently active message fragment, or null if none is selected.
+ * @param setActiveFragment - Function to update the active fragment.
+ */
 export default function MessagesContainer({ 
     projectId, 
     activeFragment, 

src/modules/projects/ui/components/project-header.tsx

@@ -7,6 +7,13 @@ import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 
+/**
+ * Renders a project header with a dropdown menu for navigation and theme selection.
+ *
+ * Displays the project name and logo, provides a link back to the dashboard, and allows users to switch between light, dark, and system appearance themes.
+ *
+ * @param projectId - The unique identifier of the project to display in the header
+ */
 export default function ProjectHeader({ projectId }: { projectId: string }) {
     const trpc = useTRPC();
     const { data: project } = useSuspenseQuery(

src/modules/projects/ui/views/project-view.tsx

@@ -16,6 +16,13 @@ interface Props {
     projectId: string
 }
 
+/**
+ * Displays a project workspace with a resizable two-panel layout, including project details, messages, and a placeholder for web preview.
+ *
+ * The left panel shows project information and messages, supporting fragment selection and asynchronous loading. The right panel is reserved for a future web preview feature.
+ *
+ * @param projectId - The unique identifier of the project to display
+ */
 export default function ProjectView({ projectId }: Props) {
     const [activeFragment, setActiveFragment] = useState<Fragment | null>(null);