@salesforcedevs/docs-components 1.17.0-hack-alpha5 → 1.17.0-hack-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.0-hack-alpha5",
+    "version": "1.17.0-hack-alpha6",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/commentPopup/README.md

@@ -1,71 +1,178 @@
-# Comment Popup Component - Local Storage Implementation
+# Comment Popup Component
 
-This component provides a commenting system that uses browser localStorage for data persistence while the backend API is being developed.
+A Lightning Web Component that allows users to leave comments on documentation sections. The component supports both local storage (for development) and a new API format for production use.
 
 ## Features
 
--   ✅ **Local Storage**: Comments are stored in browser localStorage
--   ✅ **API-Ready**: Code structure prepared for backend integration
--   ✅ **Development Tools**: Helper utilities for managing comments
--   ✅ **Export/Import**: Ability to export comments to JSON files
--   ✅ **Migration Ready**: Tools to convert data for backend migration
+-   ✅ **New API Format**: Supports branch-based comment fetching
+-   ✅ **Pre-loaded Comments**: Comments are fetched when component is rendered, not when popup opens
+-   ✅ **Local Storage**: Comments persist across page refreshes during development
+-   ✅ **Form Validation**: Email format and required field validation
+-   ✅ **Real-time Display**: Comments appear immediately after posting
+-   ✅ **Timestamp Formatting**: Shows relative time (e.g., "2 hours ago")
+-   ✅ **Email Masking**: Protects user privacy in comment display
+-   ✅ **Comment Count Badge**: Shows total number of comments
+-   ✅ **Responsive Design**: Works on mobile and desktop
+-   ✅ **Keyboard Accessibility**: ESC key to close popup
+-   ✅ **Dark Mode Support**: Adapts to system preferences
+-   ✅ **Development Tools**: Helper utilities for testing
 
-## How It Works
+## API Format
 
-### Storage Structure
+The component now supports a new API format where comments are fetched by branch and then filtered by file path and heading title.
 
-Comments are stored in localStorage under the key `dsc_comments` with the following structure:
+### API Endpoints
+
+-   **GET** `/get-comments?branch={branch}` - Fetch all comments for a branch
+-   **POST** `/post-comment` - Add a new comment
+
+### API Response Format
 
 ```json
 {
-    "branch_filepath_headingtitle": [
+    "request_branch": "feature/documentation-updates",
+    "paths": [
         {
-            "email": "user@example.com",
-            "comment_text": "This is a comment",
-            "timestamp": "2024-01-15T10:30:00Z"
+            "path": "docs/installation.md",
+            "titles": [
+                {
+                    "title": "Installation Guide",
+                    "comments": [
+                        {
+                            "email": "john.doe@example.com",
+                            "comment_text": "This installation guide is very helpful for new users.",
+                            "timestamp": "2024-01-15T10:30:00Z"
+                        }
+                    ]
+                }
+            ]
         }
     ]
 }
 ```
 
-### API Payload Format
-
-When posting comments, the component uses this exact format (ready for backend):
+### API Request Format
 
 ```json
 {
     "branch": "feature/documentation-updates",
     "file_path": "docs/installation.md",
     "heading_title": "Installation Guide",
+    "start_line": "1",
+    "end_line": "50",
     "comment": {
-        "comment_text": "This installation guide is very helpful for new users.",
-        "email": "john.doe@example.com",
+        "comment_text": "This is a helpful comment.",
+        "email": "user@example.com",
         "timestamp": "2024-01-15T10:30:00Z"
     }
 }
 ```
 
+## Usage
+
+### Basic Usage
+
+```html
+<sb-doc-comment-popup
+    heading-title="Installation Guide"
+    file-path="docs/installation.md"
+    current-branch="feature/documentation-updates"
+    start-line="1"
+    end-line="50"
+    open="false"
+    icon-symbol="chat"
+    icon-size="medium"
+>
+</sb-doc-comment-popup>
+```
+
+### Comment Loading Behavior
+
+The component now fetches comments when it is rendered (connected to the DOM) rather than when the popup is opened. This ensures:
+
+-   **Faster Popup Opening**: Comments are already loaded when the user clicks the icon
+-   **Immediate Comment Count**: The comment count badge shows the correct number immediately
+-   **Better User Experience**: No loading delay when opening the popup
+
+Comments are automatically refetched when any of these properties change:
+
+-   `heading-title`
+-   `file-path`
+-   `current-branch`
+
+### Required Properties
+
+-   `heading-title`: The title of the section being commented on
+-   `file-path`: The file path where the comment is located
+-   `current-branch`: The current git branch
+
+### Optional Properties
+
+-   `start-line`: Starting line number (for future line-specific comments)
+-   `end-line`: Ending line number (for future line-specific comments)
+-   `open`: Controls the popup visibility (default: false)
+-   `icon-symbol`: Icon symbol for the comment button (default: "chat")
+-   `icon-size`: Size of the comment icon (default: "medium")
+
+### Available Icon Symbols
+
+-   `chat` - Chat bubble icon
+-   `comment` - Comment icon
+-   `message` - Message icon
+-   `feedback` - Feedback icon
+
+### Available Icon Sizes
+
+-   `small` - Small icon
+-   `medium` - Medium icon (default)
+-   `large` - Large icon
+
+## Local Storage Implementation
+
+During development, the component uses localStorage to persist comments. Comments are stored with a unique key format:
+
+```
+{branch}_{file_path}_{heading_title}
+```
+
+### Local Storage Structure
+
+```json
+{
+    "main_docs/installation.md_Installation Guide": [
+        {
+            "email": "user@example.com",
+            "comment_text": "This is a comment",
+            "timestamp": "2024-01-15T10:30:00Z"
+        }
+    ]
+}
+```
+
 ## Development Tools
 
-### Console Commands
+The component includes development tools for testing and managing comments during development.
 
-When the component is loaded, you can access these functions in the browser console:
+### Console Commands
 
 ```javascript
 // Export all comments to a JSON file
 CommentDevHelper.exportCommentsToFile();
 
-// Clear all comments from localStorage
-CommentDevHelper.clearAllComments();
+// Add sample comments matching the new API format
+CommentDevHelper.addSampleCommentsForNewApi();
 
 // Get statistics about stored comments
 CommentDevHelper.getCommentsStats();
 
-// Convert comments to API format (for backend migration)
-CommentDevHelper.convertToApiFormat();
+// Clear all comments from localStorage
+CommentDevHelper.clearAllComments();
+
+// Test the API response format
+CommentDevHelper.testApiResponseFormat();
 
-// Add a sample comment for testing
-CommentDevHelper.addSampleComment();
+// Simulate API call for a specific branch
+CommentDevHelper.simulateApiCall("main");
 
 // Show all comments in console
 CommentDevHelper.showAllComments();
@@ -73,140 +180,115 @@ CommentDevHelper.showAllComments();
 
 ### Development UI
 
-In development mode (localhost), a floating UI will appear in the top-right corner with buttons to:
-
--   Export comments
--   Clear all comments
--   View statistics
--   Show API format
-
-## Migration to Backend
+The component automatically creates a development UI when running on localhost. This UI provides buttons for:
 
-When the backend is ready, follow these steps:
-
-### 1. Export Current Comments
-
-```javascript
-// Export all comments to JSON file
-CommentDevHelper.exportCommentsToFile();
-```
+-   Adding sample comments
+-   Testing API response format
+-   Exporting comments
+-   Clearing all comments
+-   Viewing statistics
 
-### 2. Convert to API Format
+## Migration to Backend API
 
-```javascript
-// Get comments in API format
-const apiFormat = CommentDevHelper.convertToApiFormat();
-console.log(apiFormat);
-```
+When the backend API is ready, follow these steps to migrate from localStorage:
 
-### 3. Uncomment API Code
+1. **Uncomment API calls**: In `commentPopup.ts`, uncomment the API implementation sections
+2. **Comment localStorage calls**: Comment out the localStorage implementation sections
+3. **Update API endpoints**: Ensure the API endpoints match your backend
+4. **Test API integration**: Use the development tools to test API calls
 
-In `commentPopup.ts`, uncomment the API implementation sections:
+### Example Migration
 
 ```typescript
-// Remove the localStorage implementation and uncomment:
-/*
-const response = await fetch('/post-comment', {
-    method: 'POST',
+// Before (localStorage)
+await this.saveCommentToLocalStorage(payload);
+
+// After (API)
+const response = await fetch("/post-comment", {
+    method: "POST",
     headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json"
     },
     body: JSON.stringify(payload)
 });
-*/
 ```
 
-### 4. Update Endpoints
+## Testing
 
-Update the API endpoints in the component:
+### Storybook Stories
 
--   POST: `/post-comment` (for adding comments)
--   GET: `/api/comments` (for fetching comments)
+The component includes comprehensive Storybook stories for testing:
 
-## File Structure
+1. **Base**: Basic component functionality
+2. **WithNewApiFormatComments**: Testing with new API format
+3. **MultipleBranchesAndFiles**: Testing multiple branches and files
+4. **FormValidation**: Testing form validation features
 
-```
-commentPopup/
-├── commentPopup.ts          # Main component
-├── commentPopup.html        # Template
-├── commentPopup.css         # Styles
-├── commentUtils.ts          # Utility functions
-├── commentDevHelper.ts      # Development tools
-└── README.md               # This file
-```
-
-## Usage
+### Jest Tests
 
-### Basic Usage
+Run the test suite:
 
-```html
-<c-comment-popup
-    heading-title="Installation Guide"
-    file-path="docs/installation.md"
-    current-branch="main"
->
-</c-comment-popup>
+```bash
+npm test commentPopup.test.ts
 ```
 
-### Required Properties
+The test suite covers:
 
--   `heading-title`: The title of the section being commented on
--   `file-path`: The file path where the comment is located
--   `current-branch`: The current git branch
+-   Component initialization
+-   Form validation
+-   Local storage operations
+-   API response format handling
+-   Comment operations
+-   UI interactions
+-   Error handling
+-   Lifecycle methods
 
-### Optional Properties
+## Troubleshooting
 
--   `start-line`: Starting line number (for future line-specific comments)
--   `end-line`: Ending line number (for future line-specific comments)
--   `open`: Boolean to control popup visibility
+### Common Issues
 
-## Events
+1. **Comments not appearing**: Check that `heading-title`, `file-path`, and `current-branch` are set correctly
+2. **Form validation errors**: Ensure email format is valid and all required fields are filled
+3. **localStorage errors**: Check browser console for localStorage quota exceeded errors
+4. **API integration issues**: Verify API endpoints and response format match expected structure
 
-The component dispatches these events:
+### Debug Commands
 
 ```javascript
-// When a comment is added
-element.addEventListener("commentadded", (event) => {
-    console.log("New comment:", event.detail);
-});
-```
+// Check current comments
+console.log(CommentDevHelper.getAllComments());
 
-## Browser Compatibility
+// Check component state
+console.log(element.comments);
+console.log(element.email);
+console.log(element.comment);
 
--   Modern browsers with localStorage support
--   IE10+ (with polyfills if needed)
-
-## Storage Limits
-
--   localStorage typically has a 5-10MB limit
--   Comments are stored as JSON strings
--   Monitor storage usage with `CommentDevHelper.getCommentsStats()`
-
-## Troubleshooting
+// Test API response parsing
+CommentDevHelper.testApiResponseFormat();
+```
 
-### Comments Not Appearing
+## Browser Support
 
-1. Check browser console for errors
-2. Verify localStorage is enabled
-3. Check if the comment key matches: `branch_filepath_headingtitle`
+-   Chrome 60+
+-   Firefox 55+
+-   Safari 12+
+-   Edge 79+
 
-### Storage Issues
+## Dependencies
 
-1. Clear localStorage: `CommentDevHelper.clearAllComments()`
-2. Export existing comments before clearing
-3. Check browser storage limits
+-   Lightning Web Components (LWC)
+-   TypeScript
+-   Jest (for testing)
 
-### Development UI Not Showing
+## Contributing
 
-1. Ensure you're on localhost
-2. Check if the UI was manually closed
-3. Refresh the page to recreate the UI
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests for new functionality
+5. Update documentation
+6. Submit a pull request
 
-## Future Enhancements
+## License
 
--   [ ] Line-specific comments
--   [ ] Comment threading/replies
--   [ ] Comment moderation
--   [ ] User authentication integration
--   [ ] Real-time comment updates
--   [ ] Comment search and filtering
+This component is part of the Salesforce Developer Documentation Components package.

package/src/modules/doc/commentPopup/commentDevHelper.ts

@@ -9,7 +9,10 @@ import {
     clearAllComments,
     getCommentsStats,
     convertToApiFormat,
-    addComment
+    addComment,
+    getCommentsForBranch,
+    fetchCommentsForBranch,
+    extractCommentsFromApiResponse
 } from "./commentUtils";
 
 // Make functions available globally for console access
@@ -21,7 +24,10 @@ if (typeof window !== "undefined") {
         clearAllComments,
         getCommentsStats,
         convertToApiFormat,
-        addComment
+        addComment,
+        getCommentsForBranch,
+        fetchCommentsForBranch,
+        extractCommentsFromApiResponse
     };
 }
 
@@ -44,7 +50,7 @@ export function createDevUI(): void {
         position: fixed;
         top: 20px;
         right: 20px;
-        width: 300px;
+        width: 350px;
         background: white;
         border: 2px solid #007bff;
         border-radius: 8px;
@@ -53,6 +59,8 @@ export function createDevUI(): void {
         font-size: 14px;
         z-index: 10000;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        max-height: 80vh;
+        overflow-y: auto;
     `;
 
     const stats = getCommentsStats();
@@ -65,6 +73,7 @@ export function createDevUI(): void {
         
         <div style="margin-bottom: 12px;">
             <strong>Stats:</strong><br>
+            Branches: ${stats.branches.length}<br>
             Locations: ${stats.totalLocations}<br>
             Total Comments: ${stats.totalComments}
         </div>
@@ -85,6 +94,14 @@ export function createDevUI(): void {
             <button onclick="console.log(CommentDevHelper.convertToApiFormat())" style="padding: 8px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;">
                 Show API Format in Console
             </button>
+            
+            <button onclick="CommentDevHelper.addSampleCommentsForNewApi()" style="padding: 8px; background: #fd7e14; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Add Sample Comments (New API Format)
+            </button>
+            
+            <button onclick="CommentDevHelper.testApiResponseFormat()" style="padding: 8px; background: #20c997; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Test API Response Format
+            </button>
         </div>
         
         <div style="margin-top: 12px; font-size: 12px; color: #666;">
@@ -92,7 +109,9 @@ export function createDevUI(): void {
             CommentDevHelper.exportCommentsToFile()<br>
             CommentDevHelper.clearAllComments()<br>
             CommentDevHelper.getCommentsStats()<br>
-            CommentDevHelper.convertToApiFormat()
+            CommentDevHelper.convertToApiFormat()<br>
+            CommentDevHelper.getCommentsForBranch('main')<br>
+            CommentDevHelper.testApiResponseFormat()
         </div>
     `;
 
@@ -110,24 +129,134 @@ export function removeDevUI(): void {
 }
 
 /**
- * Add a sample comment for testing
+ * Add sample comments that match the new API format
  */
-export function addSampleComment(): void {
-    const samplePayload = {
-        branch: "feature/documentation-updates",
-        file_path: "docs/installation.md",
-        heading_title: "Installation Guide",
-        start_line: "10",
-        end_line: "25",
-        comment: {
-            comment_text: "This is a sample comment for testing purposes.",
-            email: "test@example.com",
-            timestamp: new Date().toISOString()
+export function addSampleCommentsForNewApi(): void {
+    const sampleComments = [
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Installation Guide",
+            start_line: "1",
+            end_line: "50",
+            comment: {
+                comment_text:
+                    "This installation guide is very helpful for new users.",
+                email: "john.doe@example.com",
+                timestamp: new Date(Date.now() - 3600000).toISOString() // 1 hour ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Installation Guide",
+            start_line: "1",
+            end_line: "50",
+            comment: {
+                comment_text:
+                    "Consider adding troubleshooting section for common issues.",
+                email: "jane.smith@example.com",
+                timestamp: new Date(Date.now() - 1800000).toISOString() // 30 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/installation.md",
+            heading_title: "Prerequisites",
+            start_line: "10",
+            end_line: "25",
+            comment: {
+                comment_text:
+                    "The prerequisites section is clear and well-organized.",
+                email: "mike.wilson@example.com",
+                timestamp: new Date(Date.now() - 900000).toISOString() // 15 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/api.md",
+            heading_title: "API Reference",
+            start_line: "1",
+            end_line: "100",
+            comment: {
+                comment_text:
+                    "The API documentation needs more examples for authentication.",
+                email: "sarah.jones@example.com",
+                timestamp: new Date(Date.now() - 600000).toISOString() // 10 minutes ago
+            }
+        },
+        {
+            branch: "feature/documentation-updates",
+            file_path: "docs/api.md",
+            heading_title: "API Reference",
+            start_line: "1",
+            end_line: "100",
+            comment: {
+                comment_text: "Great work on the endpoint descriptions!",
+                email: "david.brown@example.com",
+                timestamp: new Date().toISOString() // now
+            }
+        },
+        {
+            branch: "main",
+            file_path: "docs/getting-started.md",
+            heading_title: "Quick Start",
+            start_line: "1",
+            end_line: "30",
+            comment: {
+                comment_text:
+                    "This quick start guide is perfect for beginners.",
+                email: "alice.johnson@example.com",
+                timestamp: new Date(Date.now() - 7200000).toISOString() // 2 hours ago
+            }
         }
-    };
+    ];
+
+    sampleComments.forEach((comment) => {
+        addComment(comment);
+    });
 
-    addComment(samplePayload);
-    console.log("Sample comment added:", samplePayload);
+    console.log("Added sample comments for new API format");
+    console.log("Sample data includes multiple branches, files, and titles");
+
+    // Refresh the page to show the new comments
+    setTimeout(() => {
+        window.location.reload();
+    }, 1000);
+}
+
+/**
+ * Test the API response format
+ */
+export function testApiResponseFormat(): void {
+    console.log("=== Testing API Response Format ===");
+
+    // Test with feature/documentation-updates branch
+    const featureBranchResponse = getCommentsForBranch(
+        "feature/documentation-updates"
+    );
+    console.log("Feature branch response:", featureBranchResponse);
+
+    // Test with main branch
+    const mainBranchResponse = getCommentsForBranch("main");
+    console.log("Main branch response:", mainBranchResponse);
+
+    // Test extracting specific comments
+    const installationComments = extractCommentsFromApiResponse(
+        featureBranchResponse,
+        "docs/installation.md",
+        "Installation Guide"
+    );
+    console.log("Installation Guide comments:", installationComments);
+
+    const apiComments = extractCommentsFromApiResponse(
+        featureBranchResponse,
+        "docs/api.md",
+        "API Reference"
+    );
+    console.log("API Reference comments:", apiComments);
+
+    console.log("=== API Response Format Test Complete ===");
 }
 
 /**
@@ -141,6 +270,46 @@ export function showAllComments(): void {
     const stats = getCommentsStats();
     console.log("=== STATISTICS ===");
     console.table(stats.locations);
+
+    console.log("=== BRANCHES ===");
+    console.log("Available branches:", stats.branches);
+}
+
+/**
+ * Simulate API call and show response
+ */
+export async function simulateApiCall(
+    branch: string = "feature/documentation-updates"
+): Promise<void> {
+    console.log(`=== Simulating API Call for branch: ${branch} ===`);
+
+    try {
+        const response = await fetchCommentsForBranch(branch);
+        console.log("API Response:", response);
+
+        // Show all paths and titles
+        response.paths.forEach((path) => {
+            console.log(`File: ${path.path}`);
+            path.titles.forEach((title) => {
+                console.log(
+                    `  Title: ${title.title} (${title.comments.length} comments)`
+                );
+            });
+        });
+    } catch (error) {
+        console.error("API call simulation failed:", error);
+    }
+}
+
+// Add the helper functions to the global CommentDevHelper
+if (typeof window !== "undefined") {
+    (window as any).CommentDevHelper = {
+        ...(window as any).CommentDevHelper,
+        addSampleCommentsForNewApi,
+        testApiResponseFormat,
+        showAllComments,
+        simulateApiCall
+    };
 }
 
 // Auto-create UI when this module is imported (in development)

package/src/modules/doc/commentPopup/commentPopup.ts

@@ -20,6 +20,17 @@ interface ApiCommentPayload {
     };
 }
 
+interface ApiCommentResponse {
+    request_branch: string;
+    paths: Array<{
+        path: string;
+        titles: Array<{
+            title: string;
+            comments: Comment[];
+        }>;
+    }>;
+}
+
 // Local storage key for comments
 const COMMENTS_STORAGE_KEY = "dsc_comments";
 
@@ -31,11 +42,49 @@ export default class CommentPopup extends LightningElement {
     emailPlaceholder = "Enter your email";
     commentPlaceholder = "Enter your comment";
 
-    @api headingTitle?: string;
-    @api filePath?: string;
-    @api startLine?: string;
-    @api endLine?: string;
-    @api currentBranch?: string;
+    private _headingTitle?: string;
+    private _filePath?: string;
+    private _startLine?: string;
+    private _endLine?: string;
+    private _currentBranch?: string;
+
+    @api get headingTitle() {
+        return this._headingTitle;
+    }
+    set headingTitle(value) {
+        this._headingTitle = value;
+        this.handlePropertyChange();
+    }
+
+    @api get filePath() {
+        return this._filePath;
+    }
+    set filePath(value) {
+        this._filePath = value;
+        this.handlePropertyChange();
+    }
+
+    @api get startLine() {
+        return this._startLine;
+    }
+    set startLine(value) {
+        this._startLine = value;
+    }
+
+    @api get endLine() {
+        return this._endLine;
+    }
+    set endLine(value) {
+        this._endLine = value;
+    }
+
+    @api get currentBranch() {
+        return this._currentBranch;
+    }
+    set currentBranch(value) {
+        this._currentBranch = value;
+        this.handlePropertyChange();
+    }
 
     private _open = false;
     @api get open() {
@@ -85,7 +134,12 @@ export default class CommentPopup extends LightningElement {
 
     handleIconClick() {
         this._open = !this._open;
-        if (this._open) {
+        // Comments are already loaded when component is connected, no need to fetch again
+    }
+
+    private handlePropertyChange() {
+        // Only fetch comments if component has required properties
+        if (this._currentBranch && this._filePath && this._headingTitle) {
             this.fetchComments();
         }
     }
@@ -156,18 +210,18 @@ export default class CommentPopup extends LightningElement {
 
     private async addComment() {
         // Validate required fields before creating payload
-        if (!this.currentBranch || !this.filePath || !this.headingTitle) {
+        if (!this._currentBranch || !this._filePath || !this._headingTitle) {
             throw new Error(
                 "Missing required fields: branch, file_path, or heading_title"
             );
         }
 
         const payload: ApiCommentPayload = {
-            branch: this.currentBranch,
-            file_path: this.filePath,
-            heading_title: this.headingTitle,
-            start_line: this.startLine!,
-            end_line: this.endLine!,
+            branch: this._currentBranch,
+            file_path: this._filePath,
+            heading_title: this._headingTitle,
+            start_line: this._startLine || "",
+            end_line: this._endLine || "",
             comment: {
                 comment_text: this.comment.trim(),
                 email: this.email.trim(),
@@ -308,10 +362,12 @@ export default class CommentPopup extends LightningElement {
 
     connectedCallback() {
         document.addEventListener("keydown", this.handleKeyDown.bind(this));
+        // Fetch comments when component is connected
+        this.fetchComments();
     }
 
     private async fetchComments() {
-        if (!this.currentBranch || !this.filePath || !this.headingTitle) {
+        if (!this._currentBranch || !this._filePath || !this._headingTitle) {
             console.warn("Cannot fetch comments: missing required parameters");
             return;
         }
@@ -328,30 +384,23 @@ export default class CommentPopup extends LightningElement {
             // API IMPLEMENTATION (Commented until backend is ready)
             /*
             const params = new URLSearchParams({
-                branch: this.currentBranch,
-                file_path: this.filePath,
-                heading_title: this.headingTitle
+                branch: this._currentBranch
             });
 
             console.log('Fetching comments with params:', params.toString());
 
-            const response = await fetch(`/api/comments?${params.toString()}`);
+            const response = await fetch(`/get-comments?${params.toString()}`);
             
             if (!response.ok) {
                 throw new Error(`Failed to fetch comments: ${response.status} ${response.statusText}`);
             }
 
-            const data = await response.json();
-            console.log('Fetched comments:', data);
+            const data: ApiCommentResponse = await response.json();
+            console.log('Fetched comments from API:', data);
             
-            // Handle different response formats
-            if (Array.isArray(data)) {
-                this.comments = data;
-            } else if (data && Array.isArray(data.comments)) {
-                this.comments = data.comments;
-            } else {
-                this.comments = [];
-            }
+            // Find comments for this specific file path and heading title
+            const comments = this.extractCommentsFromApiResponse(data);
+            this.comments = comments;
             */
         } catch (error) {
             console.error("Error fetching comments:", error);
@@ -362,6 +411,47 @@ export default class CommentPopup extends LightningElement {
         }
     }
 
+    private extractCommentsFromApiResponse(
+        data: ApiCommentResponse
+    ): Comment[] {
+        try {
+            // Find the path that matches our file path
+            const matchingPath = data.paths.find(
+                (path) => path.path === this._filePath
+            );
+
+            if (!matchingPath) {
+                console.log(
+                    `No comments found for file path: ${this._filePath}`
+                );
+                return [];
+            }
+
+            // Find the title that matches our heading title
+            const matchingTitle = matchingPath.titles.find(
+                (title) => title.title === this._headingTitle
+            );
+
+            if (!matchingTitle) {
+                console.log(
+                    `No comments found for heading title: ${this._headingTitle}`
+                );
+                return [];
+            }
+
+            console.log(
+                `Found ${matchingTitle.comments.length} comments for ${this._filePath} - ${this._headingTitle}`
+            );
+            return matchingTitle.comments;
+        } catch (error) {
+            console.error(
+                "Error extracting comments from API response:",
+                error
+            );
+            return [];
+        }
+    }
+
     private async getCommentsFromLocalStorage(): Promise<Comment[]> {
         try {
             const existingData = localStorage.getItem(COMMENTS_STORAGE_KEY);
@@ -370,7 +460,7 @@ export default class CommentPopup extends LightningElement {
             }
 
             const allComments = JSON.parse(existingData);
-            const commentKey = `${this.currentBranch}_${this.filePath}_${this.headingTitle}`;
+            const commentKey = `${this._currentBranch}_${this._filePath}_${this._headingTitle}`;
 
             return allComments[commentKey] || [];
         } catch (error) {

package/src/modules/doc/commentPopup/commentUtils.ts

@@ -20,6 +20,17 @@ export interface ApiCommentPayload {
     };
 }
 
+export interface ApiCommentResponse {
+    request_branch: string;
+    paths: Array<{
+        path: string;
+        titles: Array<{
+            title: string;
+            comments: Comment[];
+        }>;
+    }>;
+}
+
 const COMMENTS_STORAGE_KEY = "dsc_comments";
 
 /**
@@ -117,6 +128,68 @@ export function getCommentsForLocation(
     }
 }
 
+/**
+ * Get all comments for a specific branch (simulating API response format)
+ */
+export function getCommentsForBranch(branch: string): ApiCommentResponse {
+    try {
+        const allComments = getAllComments();
+        const branchComments: ApiCommentResponse = {
+            request_branch: branch,
+            paths: []
+        };
+
+        // Group comments by file path and title
+        const pathMap = new Map<string, Map<string, Comment[]>>();
+
+        Object.keys(allComments).forEach((key) => {
+            const [commentBranch, filePath, headingTitle] = key.split("_", 3);
+
+            if (commentBranch === branch) {
+                if (!pathMap.has(filePath)) {
+                    pathMap.set(filePath, new Map());
+                }
+
+                const titleMap = pathMap.get(filePath)!;
+                if (!titleMap.has(headingTitle)) {
+                    titleMap.set(headingTitle, []);
+                }
+
+                titleMap.get(headingTitle)!.push(...allComments[key]);
+            }
+        });
+
+        // Convert to API response format
+        pathMap.forEach((titleMap, filePath) => {
+            const titles: Array<{ title: string; comments: Comment[] }> = [];
+
+            titleMap.forEach((comments, title) => {
+                titles.push({
+                    title,
+                    comments: comments.sort(
+                        (a, b) =>
+                            new Date(b.timestamp).getTime() -
+                            new Date(a.timestamp).getTime()
+                    )
+                });
+            });
+
+            branchComments.paths.push({
+                path: filePath,
+                titles
+            });
+        });
+
+        return branchComments;
+    } catch (error) {
+        console.error("Error getting comments for branch:", error);
+        return {
+            request_branch: branch,
+            paths: []
+        };
+    }
+}
+
 /**
  * Clear all comments from localStorage
  */
@@ -135,8 +208,12 @@ export function clearAllComments(): void {
 export function getCommentsStats(): {
     totalLocations: number;
     totalComments: number;
+    branches: string[];
     locations: Array<{
         key: string;
+        branch: string;
+        filePath: string;
+        headingTitle: string;
         commentCount: number;
         lastComment?: string;
     }>;
@@ -145,13 +222,19 @@ export function getCommentsStats(): {
         const allComments = getAllComments();
         const locations = Object.keys(allComments);
         let totalComments = 0;
+        const branches = new Set<string>();
 
         const locationStats = locations.map((key) => {
+            const [branch, filePath, headingTitle] = key.split("_", 3);
             const comments = allComments[key];
             totalComments += comments.length;
+            branches.add(branch);
 
             return {
                 key,
+                branch,
+                filePath,
+                headingTitle,
                 commentCount: comments.length,
                 lastComment:
                     comments.length > 0
@@ -163,6 +246,7 @@ export function getCommentsStats(): {
         return {
             totalLocations: locations.length,
             totalComments,
+            branches: Array.from(branches),
             locations: locationStats
         };
     } catch (error) {
@@ -170,6 +254,7 @@ export function getCommentsStats(): {
         return {
             totalLocations: 0,
             totalComments: 0,
+            branches: [],
             locations: []
         };
     }
@@ -198,21 +283,14 @@ export function convertToApiFormat(): Array<{
         }> = [];
 
         Object.keys(allComments).forEach((key) => {
-            const [branch, file_path, heading_title, start_line, end_line] =
-                key.split("_", 5);
-            if (
-                branch &&
-                file_path &&
-                heading_title &&
-                start_line &&
-                end_line
-            ) {
+            const [branch, file_path, heading_title] = key.split("_", 3);
+            if (branch && file_path && heading_title) {
                 apiFormat.push({
                     branch,
                     file_path,
                     heading_title,
-                    start_line,
-                    end_line,
+                    start_line: "",
+                    end_line: "",
                     comments: allComments[key]
                 });
             }
@@ -248,3 +326,57 @@ export function addComment(payload: ApiCommentPayload): void {
         throw error;
     }
 }
+
+/**
+ * Simulate API call to get comments for a branch
+ */
+export async function fetchCommentsForBranch(
+    branch: string
+): Promise<ApiCommentResponse> {
+    try {
+        // Simulate API delay
+        await new Promise((resolve) => setTimeout(resolve, 100));
+
+        return getCommentsForBranch(branch);
+    } catch (error) {
+        console.error("Error fetching comments for branch:", error);
+        throw error;
+    }
+}
+
+/**
+ * Extract comments for specific file path and heading title from API response
+ */
+export function extractCommentsFromApiResponse(
+    data: ApiCommentResponse,
+    filePath: string,
+    headingTitle: string
+): Comment[] {
+    try {
+        // Find the path that matches our file path
+        const matchingPath = data.paths.find((path) => path.path === filePath);
+
+        if (!matchingPath) {
+            console.log(`No comments found for file path: ${filePath}`);
+            return [];
+        }
+
+        // Find the title that matches our heading title
+        const matchingTitle = matchingPath.titles.find(
+            (title) => title.title === headingTitle
+        );
+
+        if (!matchingTitle) {
+            console.log(`No comments found for heading title: ${headingTitle}`);
+            return [];
+        }
+
+        console.log(
+            `Found ${matchingTitle.comments.length} comments for ${filePath} - ${headingTitle}`
+        );
+        return matchingTitle.comments;
+    } catch (error) {
+        console.error("Error extracting comments from API response:", error);
+        return [];
+    }
+}