Add comment threading and fix fetch authentication

- Add comment threading/reply functionality with nested display
  - Database migration for parent_comment_id and thread_depth columns
  - Recursive comment rendering with depth-based indentation
  - Reply form with inline UI and smooth animations
  - Thread collapse/expand capability
  - Max thread depth of 3 levels

- Fix 401 authentication errors on API calls
  - Add credentials: 'same-origin' to all fetch calls
  - Affects settings.js, ticket.js, dashboard.js, advanced-search.js
  - Ensures session cookies are sent with requests

- Enhanced comment styling
  - Thread connector lines for visual hierarchy
  - Reply button on comments (up to depth 3)
  - Quote block styling for replies

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/dashboard.css

@@ -160,6 +160,215 @@ body::after {
     100% { content: '10101010'; opacity: 0.1; }
 }
 
+/* ===== ENHANCED TERMINAL ANIMATIONS ===== */
+
+/* Typing cursor effect for focused inputs */
+input:focus::placeholder,
+textarea:focus::placeholder {
+    animation: typing-cursor 1s steps(1) infinite;
+}
+
+@keyframes typing-cursor {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+/* Glowing border pulse on focus */
+input:focus,
+textarea:focus,
+select:focus {
+    animation: focus-pulse 2s ease-in-out infinite;
+}
+
+@keyframes focus-pulse {
+    0%, 100% { box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); }
+    50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); }
+}
+
+/* Boot-up fade in effect */
+@keyframes boot-up {
+    0% {
+        opacity: 0;
+        filter: brightness(2) saturate(0);
+    }
+    30% {
+        opacity: 1;
+        filter: brightness(1.5) saturate(0.5);
+    }
+    100% {
+        opacity: 1;
+        filter: brightness(1) saturate(1);
+    }
+}
+
+.ascii-frame-outer {
+    animation: boot-up 0.8s ease-out;
+}
+
+/* Phosphor text glow on important elements */
+.stat-value,
+.ticket-id,
+h1, h2, h3 {
+    text-shadow: 0 0 2px currentColor, 0 0 4px currentColor;
+}
+
+/* Enhanced link hover with underline animation */
+a:not(.btn) {
+    position: relative;
+    text-decoration: none;
+}
+
+a:not(.btn)::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: currentColor;
+    box-shadow: 0 0 5px currentColor;
+    transition: width 0.3s ease;
+}
+
+a:not(.btn):hover::after {
+    width: 100%;
+}
+
+/* Matrix-style rain effect on hover for stats */
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(180deg,
+        transparent 0%,
+        rgba(0, 255, 65, 0.03) 50%,
+        transparent 100%
+    );
+    background-size: 100% 200%;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+.stat-card:hover::before {
+    opacity: 1;
+    animation: matrix-rain 2s linear infinite;
+}
+
+@keyframes matrix-rain {
+    0% { background-position: 0 -100%; }
+    100% { background-position: 0 100%; }
+}
+
+/* Smooth table row selection animation */
+tbody tr {
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+tbody tr::before {
+    content: '>';
+    position: absolute;
+    left: -20px;
+    opacity: 0;
+    color: var(--terminal-green);
+    transition: all 0.2s ease;
+}
+
+tbody tr:hover::before {
+    opacity: 1;
+    left: -15px;
+}
+
+/* Button press effect */
+.btn {
+    transition: all 0.15s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.4s, height 0.4s;
+}
+
+.btn:active::before {
+    width: 200%;
+    height: 200%;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+/* Terminal cursor blink for active/selected elements */
+.keyboard-selected td:first-child::before {
+    content: '█';
+    position: absolute;
+    left: -25px;
+    animation: cursor-blink 0.8s steps(1) infinite;
+    color: var(--terminal-green);
+}
+
+@keyframes cursor-blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
+/* Neon glow effect for priority badges */
+.priority-badge {
+    position: relative;
+}
+
+.priority-badge::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    background: inherit;
+    filter: blur(6px);
+    opacity: 0.4;
+    z-index: -1;
+}
+
+/* Smooth scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+    border: 1px solid var(--terminal-green);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--terminal-green);
+    box-shadow: 0 0 5px var(--terminal-green);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--terminal-amber);
+    box-shadow: 0 0 10px var(--terminal-amber);
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--terminal-green) var(--bg-primary);
+}
+
 body.menu-open {
     padding-left: 260px;
 }
@@ -711,6 +920,148 @@ h1 {
     100% { content: '|]'; }
 }
 
+/* ===== SKELETON LOADING SCREENS ===== */
+.skeleton {
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(90deg,
+        rgba(0, 255, 65, 0.05) 0%,
+        rgba(0, 255, 65, 0.1) 50%,
+        rgba(0, 255, 65, 0.05) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* Skeleton text line */
+.skeleton-text {
+    height: 1em;
+    margin: 0.5em 0;
+    border-radius: 0;
+    border: 1px solid rgba(0, 255, 65, 0.2);
+}
+
+.skeleton-text.short { width: 40%; }
+.skeleton-text.medium { width: 70%; }
+.skeleton-text.long { width: 90%; }
+
+/* Skeleton table row */
+.skeleton-row {
+    display: flex;
+    align-items: center;
+    padding: 12px 8px;
+    border-bottom: 1px solid rgba(0, 255, 65, 0.1);
+    gap: 1rem;
+}
+
+.skeleton-row .skeleton-cell {
+    height: 1.2em;
+    flex: 1;
+    border: 1px solid rgba(0, 255, 65, 0.15);
+}
+
+.skeleton-row .skeleton-cell:first-child { flex: 0 0 100px; }
+.skeleton-row .skeleton-cell:nth-child(2) { flex: 0 0 60px; }
+.skeleton-row .skeleton-cell:nth-child(3) { flex: 3; }
+
+/* Skeleton stat card */
+.skeleton-stat {
+    padding: 1rem;
+    border: 2px solid rgba(0, 255, 65, 0.2);
+    min-height: 80px;
+}
+
+.skeleton-stat .skeleton-value {
+    height: 2rem;
+    width: 60%;
+    margin-bottom: 0.5rem;
+}
+
+.skeleton-stat .skeleton-label {
+    height: 1rem;
+    width: 80%;
+}
+
+/* Skeleton comment */
+.skeleton-comment {
+    padding: 1rem;
+    border: 1px solid rgba(0, 255, 65, 0.2);
+    margin-bottom: 1rem;
+}
+
+.skeleton-comment-header {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.skeleton-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 0;
+    border: 1px solid rgba(0, 255, 65, 0.2);
+    flex-shrink: 0;
+}
+
+.skeleton-comment-meta {
+    flex: 1;
+}
+
+/* Terminal-style loading indicator */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 10, 2, 0.9);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    font-family: var(--font-mono);
+    color: var(--terminal-green);
+}
+
+.loading-overlay .loading-text {
+    margin-top: 1rem;
+    animation: blink-cursor 1s step-end infinite;
+}
+
+.loading-overlay .loading-spinner {
+    font-size: 2rem;
+    animation: terminal-spin 0.5s linear infinite;
+}
+
+@keyframes terminal-spin {
+    0% { content: '⠋'; }
+    10% { content: '⠙'; }
+    20% { content: '⠹'; }
+    30% { content: '⠸'; }
+    40% { content: '⠼'; }
+    50% { content: '⠴'; }
+    60% { content: '⠦'; }
+    70% { content: '⠧'; }
+    80% { content: '⠇'; }
+    90% { content: '⠏'; }
+}
+
+.loading-spinner::before {
+    content: '⠋';
+    animation: terminal-spin 0.8s linear infinite;
+}
+
+@keyframes blink-cursor {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
 /* ===== MESSAGE STYLES ===== */
 .error-message {
     padding: 15px 20px;
@@ -3324,19 +3675,59 @@ tr:hover .quick-actions {
     align-items: center;
     gap: 0.75rem;
     padding: 1rem;
-    background: var(--bg-secondary);
+    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 255, 65, 0.03) 100%);
     border: 2px solid var(--terminal-green);
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Corner accent */
+.stat-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 65, 0.1) 50%);
+    transition: all 0.3s ease;
 }
 
 .stat-card:hover {
     border-color: var(--terminal-amber);
     box-shadow: var(--glow-amber);
+    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 176, 0, 0.05) 100%);
+}
+
+.stat-card:hover::after {
+    background: linear-gradient(135deg, transparent 50%, rgba(255, 176, 0, 0.15) 50%);
+}
+
+/* Critical stat card styling */
+.stat-card.stat-critical {
+    border-color: var(--priority-1);
+    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 77, 77, 0.08) 100%);
+}
+
+.stat-card.stat-critical .stat-value {
+    color: var(--priority-1);
+    text-shadow: var(--glow-priority-1);
+    animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.stat-card.stat-critical::after {
+    background: linear-gradient(135deg, transparent 50%, rgba(255, 77, 77, 0.15) 50%);
 }
 
 .stat-icon {
     font-size: 1.5rem;
     opacity: 0.9;
+    transition: transform 0.3s ease;
+}
+
+.stat-card:hover .stat-icon {
+    transform: scale(1.1);
 }
 
 .stat-content {

assets/css/ticket.css

@@ -372,6 +372,29 @@ textarea[data-field="description"]:not(:disabled)::after {
     50% { box-shadow: 0 0 20px rgba(255, 77, 77, 0.8); }
 }
 
+/* Tab transition animations */
+@keyframes tab-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes tab-slide-in {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
 .ticket-age .age-icon {
     font-size: 1rem;
 }
@@ -601,13 +624,37 @@ textarea.editable {
 }
 
 .comment {
-    background: var(--bg-primary);
+    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(0, 255, 65, 0.02) 100%);
     padding: 15px;
     border: 1px solid var(--terminal-green);
     border-radius: 0;
     margin-bottom: 1rem;
     position: relative;
     box-shadow: none;
+    transition: all 0.3s ease;
+    animation: comment-appear 0.4s ease-out;
+}
+
+@keyframes comment-appear {
+    from {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.comment:hover {
+    border-color: var(--terminal-amber);
+    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 176, 0, 0.03) 100%);
+    box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
+}
+
+.comment:hover::before,
+.comment:hover::after {
+    color: var(--terminal-amber);
 }
 
 /* Add corner decorations to individual comments */
@@ -802,6 +849,182 @@ textarea.editable {
     min-height: auto !important;
 }
 
+/* ===== COMMENT THREADING STYLES ===== */
+
+/* Thread depth indentation */
+.comment.thread-depth-1 {
+    margin-left: 2rem;
+}
+
+.comment.thread-depth-2 {
+    margin-left: 4rem;
+}
+
+.comment.thread-depth-3 {
+    margin-left: 6rem;
+}
+
+/* Reply styling */
+.comment.comment-reply {
+    position: relative;
+    border-left: 2px solid var(--terminal-green-dim);
+    margin-top: 0.5rem;
+    padding-left: 1rem;
+}
+
+.comment.comment-reply::before {
+    content: none;
+}
+
+/* Thread connector line */
+.comment .thread-line {
+    position: absolute;
+    left: -1rem;
+    top: 0;
+    width: 0.75rem;
+    height: 1rem;
+    border-left: 2px solid var(--terminal-green-dim);
+    border-bottom: 2px solid var(--terminal-green-dim);
+}
+
+/* Comment content wrapper for threading */
+.comment .comment-content {
+    flex: 1;
+}
+
+/* Replies container */
+.comment-replies {
+    margin-top: 0.5rem;
+}
+
+/* Reply button styling */
+.comment-action-btn.reply-btn {
+    color: var(--terminal-green);
+    font-size: 1rem;
+}
+
+.comment-action-btn.reply-btn:hover {
+    color: var(--terminal-cyan);
+    border-color: var(--terminal-cyan);
+}
+
+/* Reply form inline */
+.reply-form-container {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: rgba(0, 255, 65, 0.03);
+    border: 1px dashed var(--terminal-green);
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.reply-form-container .reply-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    color: var(--terminal-green);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+}
+
+.reply-form-container .reply-header .replying-to {
+    color: var(--terminal-amber);
+}
+
+.reply-form-container .close-reply-btn {
+    background: none;
+    border: 1px solid var(--terminal-red);
+    color: var(--terminal-red);
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+}
+
+.reply-form-container .close-reply-btn:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+
+.reply-form-container textarea {
+    width: 100%;
+    min-height: 80px;
+    padding: 0.75rem;
+    background: var(--bg-secondary);
+    border: 2px solid var(--terminal-green);
+    color: var(--terminal-green);
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    resize: vertical;
+    margin-bottom: 0.75rem;
+}
+
+.reply-form-container textarea:focus {
+    outline: none;
+    border-color: var(--terminal-amber);
+    box-shadow: 0 0 10px rgba(255, 176, 0, 0.3);
+}
+
+.reply-form-container .reply-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.reply-form-container .reply-buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* Quote block in replies */
+.comment-text blockquote {
+    border-left: 3px solid var(--terminal-green-dim);
+    padding-left: 1rem;
+    margin: 0.5rem 0;
+    color: var(--terminal-green-dim);
+    font-style: italic;
+}
+
+/* Thread collapse indicator */
+.thread-collapse-btn {
+    background: none;
+    border: none;
+    color: var(--terminal-green-dim);
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    padding: 0.25rem;
+    margin-left: 0.5rem;
+}
+
+.thread-collapse-btn:hover {
+    color: var(--terminal-green);
+}
+
+.comment.collapsed .comment-replies {
+    display: none;
+}
+
+.comment.collapsed .thread-collapse-btn::after {
+    content: ' [+]';
+}
+
+.comment:not(.collapsed) .thread-collapse-btn::after {
+    content: ' [-]';
+}
+
+/* ===== END COMMENT THREADING STYLES ===== */
+
 /* Comment Tabs - TERMINAL STYLE */
 .ticket-tabs {
     display: flex;
@@ -857,6 +1080,7 @@ textarea.editable {
 .tab-content {
     display: none;
     padding: 20px;
+    animation: tab-fade-in 0.3s ease-out;
     border: 2px solid var(--terminal-green);
     border-top: none;
     background: var(--bg-secondary);

assets/js/advanced-search.js

@@ -35,7 +35,9 @@ function closeOnAdvancedSearchBackdropClick(event) {
 // Load users for dropdown
 async function loadUsersForSearch() {
     try {
-        const response = await fetch('/api/get_users.php');
+        const response = await fetch('/api/get_users.php', {
+            credentials: 'same-origin'
+        });
         const data = await response.json();
 
         if (data.success && data.users) {
@@ -163,6 +165,7 @@ async function saveCurrentFilter() {
             try {
                 const response = await fetch('/api/saved_filters.php', {
                     method: 'POST',
+                    credentials: 'same-origin',
                     headers: {
                         'Content-Type': 'application/json',
                         'X-CSRF-Token': window.CSRF_TOKEN
@@ -230,7 +233,9 @@ function getCurrentFilterCriteria() {
 // Load saved filters
 async function loadSavedFilters() {
     try {
-        const response = await fetch('/api/saved_filters.php');
+        const response = await fetch('/api/saved_filters.php', {
+            credentials: 'same-origin'
+        });
         const data = await response.json();
 
         if (data.success && data.filters) {
@@ -326,6 +331,7 @@ async function deleteSavedFilter() {
             try {
                 const response = await fetch('/api/saved_filters.php', {
                     method: 'DELETE',
+                    credentials: 'same-origin',
                     headers: {
                         'Content-Type': 'application/json',
                         'X-CSRF-Token': window.CSRF_TOKEN

assets/js/dashboard.js

@@ -539,6 +539,7 @@ function quickSave() {
     
     fetch('/api/update_ticket.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -607,6 +608,7 @@ function saveTicket() {
 
     fetch('/api/update_ticket.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -645,7 +647,9 @@ function loadTemplate() {
     }
 
     // Fetch template data
-    fetch(`/api/get_template.php?template_id=${templateId}`)
+    fetch(`/api/get_template.php?template_id=${templateId}`, {
+        credentials: 'same-origin'
+    })
         .then(response => {
             if (!response.ok) {
                 throw new Error('Failed to fetch template');
@@ -776,6 +780,7 @@ function performBulkCloseAction(ticketIds) {
 
     fetch('/api/bulk_operation.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -848,7 +853,9 @@ function showBulkAssignModal() {
     document.body.insertAdjacentHTML('beforeend', modalHtml);
 
     // Fetch users for the dropdown
-    fetch('/api/get_users.php')
+    fetch('/api/get_users.php', {
+        credentials: 'same-origin'
+    })
         .then(response => response.json())
         .then(data => {
             if (data.success && data.users) {
@@ -884,6 +891,7 @@ function performBulkAssign() {
 
     fetch('/api/bulk_operation.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -979,6 +987,7 @@ function performBulkPriority() {
 
     fetch('/api/bulk_operation.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1113,6 +1122,7 @@ function performBulkStatusChange() {
 
     fetch('/api/bulk_operation.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1201,6 +1211,7 @@ function performBulkDelete() {
 
     fetch('/api/bulk_operation.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1474,6 +1485,7 @@ function performQuickStatusChange(ticketId) {
 
     fetch('/api/update_ticket.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1539,7 +1551,9 @@ function quickAssign(ticketId) {
     document.body.insertAdjacentHTML('beforeend', modalHtml);
 
     // Load users
-    fetch('/api/get_users.php')
+    fetch('/api/get_users.php', {
+        credentials: 'same-origin'
+    })
         .then(response => response.json())
         .then(data => {
             if (data.success && data.users) {
@@ -1565,6 +1579,7 @@ function performQuickAssign(ticketId) {
 
     fetch('/api/assign_ticket.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1859,3 +1874,108 @@ function exportSelectedTickets(format) {
     const dropdown = document.getElementById('exportDropdown');
     if (dropdown) dropdown.classList.remove('open');
 }
+
+// ========================================
+// Skeleton Loading Helpers
+// ========================================
+
+/**
+ * Generate skeleton table rows
+ */
+function generateSkeletonRows(count = 5) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <tr class="skeleton-row-tr">
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 40px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: ${70 + Math.random() * 30}%;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 50px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
+            </tr>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Generate skeleton comments
+ */
+function generateSkeletonComments(count = 3) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <div class="skeleton-comment">
+                <div class="skeleton-comment-header">
+                    <div class="skeleton skeleton-avatar"></div>
+                    <div class="skeleton-comment-meta">
+                        <div class="skeleton skeleton-text short"></div>
+                        <div class="skeleton skeleton-text" style="width: 100px;"></div>
+                    </div>
+                </div>
+                <div class="skeleton skeleton-text long"></div>
+                <div class="skeleton skeleton-text medium"></div>
+                <div class="skeleton skeleton-text short"></div>
+            </div>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Generate skeleton stat cards
+ */
+function generateSkeletonStats(count = 4) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <div class="skeleton-stat skeleton">
+                <div class="skeleton skeleton-value"></div>
+                <div class="skeleton skeleton-label"></div>
+            </div>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Show loading overlay on element
+ */
+function showLoadingOverlay(element, message = 'Loading...') {
+    // Remove existing overlay
+    const existing = element.querySelector('.loading-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.className = 'loading-overlay';
+    overlay.innerHTML = `
+        <div class="loading-spinner"></div>
+        <div class="loading-text">${message}</div>
+    `;
+    element.style.position = 'relative';
+    element.appendChild(overlay);
+}
+
+/**
+ * Hide loading overlay
+ */
+function hideLoadingOverlay(element) {
+    const overlay = element.querySelector('.loading-overlay');
+    if (overlay) {
+        overlay.style.opacity = '0';
+        overlay.style.transition = 'opacity 0.3s';
+        setTimeout(() => overlay.remove(), 300);
+    }
+}
+
+// Export for use in other scripts
+window.generateSkeletonRows = generateSkeletonRows;
+window.generateSkeletonComments = generateSkeletonComments;
+window.showLoadingOverlay = showLoadingOverlay;
+window.hideLoadingOverlay = hideLoadingOverlay;

assets/js/settings.js

@@ -8,7 +8,9 @@ let userPreferences = {};
 // Load preferences on page load
 async function loadUserPreferences() {
     try {
-        const response = await fetch('/api/user_preferences.php');
+        const response = await fetch('/api/user_preferences.php', {
+            credentials: 'same-origin'
+        });
         const data = await response.json();
         if (data.success) {
             userPreferences = data.preferences;
@@ -96,6 +98,7 @@ async function saveSettings() {
         for (const [key, value] of Object.entries(prefs)) {
             const response = await fetch('/api/user_preferences.php', {
                 method: 'POST',
+                credentials: 'same-origin',
                 headers: {
                     'Content-Type': 'application/json',
                     'X-CSRF-Token': window.CSRF_TOKEN

assets/js/ticket.js

@@ -72,6 +72,7 @@ function saveTicket() {
 
     fetch(apiUrl, {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -173,6 +174,7 @@ function addComment() {
 
     fetch('/api/add_comment.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -333,6 +335,7 @@ function handleAssignmentChange() {
 
         fetch('/api/assign_ticket.php', {
             method: 'POST',
+            credentials: 'same-origin',
             headers: {
                 'Content-Type': 'application/json',
                 'X-CSRF-Token': window.CSRF_TOKEN
@@ -367,6 +370,7 @@ function handleMetadataChanges() {
 
         fetch('/api/update_ticket.php', {
             method: 'POST',
+            credentials: 'same-origin',
             headers: {
                 'Content-Type': 'application/json',
                 'X-CSRF-Token': window.CSRF_TOKEN
@@ -590,7 +594,9 @@ function showTab(tabName) {
 function loadDependencies() {
     const ticketId = window.ticketData.id;
 
-    fetch(`/api/ticket_dependencies.php?ticket_id=${ticketId}`)
+    fetch(`/api/ticket_dependencies.php?ticket_id=${ticketId}`, {
+        credentials: 'same-origin'
+    })
         .then(response => {
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
@@ -708,6 +714,7 @@ function addDependency() {
 
     fetch('/api/ticket_dependencies.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -741,6 +748,7 @@ function removeDependency(dependencyId) {
 
     fetch('/api/ticket_dependencies.php', {
         method: 'DELETE',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -906,7 +914,9 @@ function loadAttachments() {
 
     if (!container) return;
 
-    fetch(`/api/upload_attachment.php?ticket_id=${ticketId}`)
+    fetch(`/api/upload_attachment.php?ticket_id=${ticketId}`, {
+        credentials: 'same-origin'
+    })
         .then(response => response.json())
         .then(data => {
             if (data.success) {
@@ -984,6 +994,7 @@ function deleteAttachment(attachmentId) {
 
     fetch('/api/delete_attachment.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1047,7 +1058,9 @@ function initMentionAutocomplete() {
  * Fetch available users for mentions
  */
 function fetchMentionUsers() {
-    fetch('/api/get_users.php')
+    fetch('/api/get_users.php', {
+        credentials: 'same-origin'
+    })
         .then(response => response.json())
         .then(data => {
             if (data.success && data.users) {
@@ -1235,6 +1248,15 @@ document.addEventListener('DOMContentLoaded', function() {
             case 'cancel-edit-comment':
                 cancelEditComment(parseInt(target.dataset.commentId));
                 break;
+            case 'reply-comment':
+                showReplyForm(parseInt(target.dataset.commentId), target.dataset.user);
+                break;
+            case 'edit-comment':
+                editComment(parseInt(target.dataset.commentId));
+                break;
+            case 'delete-comment':
+                deleteComment(parseInt(target.dataset.commentId));
+                break;
         }
     });
 });
@@ -1311,6 +1333,7 @@ function saveEditComment(commentId) {
     // Send update request
     fetch('/api/update_comment.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1395,6 +1418,7 @@ function deleteComment(commentId) {
 
     fetch('/api/delete_comment.php', {
         method: 'POST',
+        credentials: 'same-origin',
         headers: {
             'Content-Type': 'application/json',
             'X-CSRF-Token': window.CSRF_TOKEN
@@ -1425,8 +1449,126 @@ function deleteComment(commentId) {
     });
 }
 
+// ========================================
+// Comment Reply Functions
+// ========================================
+
+/**
+ * Show reply form for a comment
+ */
+function showReplyForm(commentId, userName) {
+    // Remove any existing reply forms
+    document.querySelectorAll('.reply-form-container').forEach(form => form.remove());
+
+    const commentDiv = document.querySelector(`.comment[data-comment-id="${commentId}"]`);
+    if (!commentDiv) return;
+
+    const replyFormHtml = `
+        <div class="reply-form-container" data-parent-id="${commentId}">
+            <div class="reply-header">
+                <span>Replying to <span class="replying-to">@${userName}</span></span>
+                <button type="button" class="close-reply-btn" onclick="closeReplyForm()">Cancel</button>
+            </div>
+            <textarea id="replyText" placeholder="Write your reply..."></textarea>
+            <div class="reply-actions">
+                <label class="markdown-toggle-small">
+                    <input type="checkbox" id="replyMarkdown">
+                    <span>Markdown</span>
+                </label>
+                <div class="reply-buttons">
+                    <button type="button" class="btn btn-small" onclick="submitReply(${commentId})">Reply</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Find the comment-content div and insert after it
+    const contentDiv = commentDiv.querySelector('.comment-content') || commentDiv;
+    contentDiv.insertAdjacentHTML('afterend', replyFormHtml);
+
+    // Focus on the textarea
+    const textarea = document.getElementById('replyText');
+    if (textarea) {
+        textarea.focus();
+    }
+}
+
+/**
+ * Close reply form
+ */
+function closeReplyForm() {
+    document.querySelectorAll('.reply-form-container').forEach(form => {
+        form.style.animation = 'fadeIn 0.2s ease reverse';
+        setTimeout(() => form.remove(), 200);
+    });
+}
+
+/**
+ * Submit a reply to a comment
+ */
+function submitReply(parentCommentId) {
+    const replyText = document.getElementById('replyText');
+    const replyMarkdown = document.getElementById('replyMarkdown');
+    const ticketId = window.ticketData.id;
+
+    if (!replyText || !replyText.value.trim()) {
+        showToast('Please enter a reply', 'warning');
+        return;
+    }
+
+    const commentText = replyText.value.trim();
+    const isMarkdownEnabled = replyMarkdown ? replyMarkdown.checked : false;
+
+    fetch('/api/add_comment.php', {
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': window.CSRF_TOKEN
+        },
+        body: JSON.stringify({
+            ticket_id: ticketId,
+            comment_text: commentText,
+            markdown_enabled: isMarkdownEnabled,
+            parent_comment_id: parentCommentId
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Close the reply form
+            closeReplyForm();
+
+            // Reload page to show the new threaded comment properly
+            // (Threading requires proper hierarchical rendering)
+            showToast('Reply added successfully', 'success');
+            setTimeout(() => window.location.reload(), 500);
+        } else {
+            showToast(data.error || 'Failed to add reply', 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Error adding reply:', error);
+        showToast('Failed to add reply', 'error');
+    });
+}
+
+/**
+ * Toggle thread collapse/expand
+ */
+function toggleThreadCollapse(commentId) {
+    const commentDiv = document.querySelector(`.comment[data-comment-id="${commentId}"]`);
+    if (commentDiv) {
+        commentDiv.classList.toggle('collapsed');
+    }
+}
+
 // Expose functions globally
 window.editComment = editComment;
 window.saveEditComment = saveEditComment;
 window.cancelEditComment = cancelEditComment;
 window.deleteComment = deleteComment;
+window.showReplyForm = showReplyForm;
+window.closeReplyForm = closeReplyForm;
+window.submitReply = submitReply;
+window.toggleThreadCollapse = toggleThreadCollapse;

migrations/002_add_comment_threading.sql

@@ -0,0 +1,19 @@
+-- Migration: Add comment threading support
+-- Adds parent_comment_id for reply/thread functionality
+
+-- Add parent_comment_id column for threaded comments
+ALTER TABLE ticket_comments
+ADD COLUMN parent_comment_id INT NULL DEFAULT NULL AFTER comment_id;
+
+-- Add foreign key constraint (self-referencing for thread hierarchy)
+ALTER TABLE ticket_comments
+ADD CONSTRAINT fk_parent_comment
+FOREIGN KEY (parent_comment_id) REFERENCES ticket_comments(comment_id)
+ON DELETE CASCADE;
+
+-- Add index for efficient thread retrieval
+CREATE INDEX idx_parent_comment ON ticket_comments(parent_comment_id);
+
+-- Add thread_depth column to track nesting level (prevents infinite recursion issues)
+ALTER TABLE ticket_comments
+ADD COLUMN thread_depth TINYINT UNSIGNED NOT NULL DEFAULT 0 AFTER parent_comment_id;

models/CommentModel.php

@@ -50,18 +50,34 @@ class CommentModel {
         return $users;
     }
     
-    public function getCommentsByTicketId($ticketId) {
+    public function getCommentsByTicketId($ticketId, $threaded = true) {
+        // Check if threading columns exist
+        $hasThreading = $this->hasThreadingSupport();
+
+        if ($hasThreading) {
+            $sql = "SELECT tc.*, u.display_name, u.username, tc.parent_comment_id, tc.thread_depth
+                    FROM ticket_comments tc
+                    LEFT JOIN users u ON tc.user_id = u.user_id
+                    WHERE tc.ticket_id = ?
+                    ORDER BY
+                        CASE WHEN tc.parent_comment_id IS NULL THEN tc.created_at END DESC,
+                        CASE WHEN tc.parent_comment_id IS NOT NULL THEN tc.created_at END ASC";
+        } else {
             $sql = "SELECT tc.*, u.display_name, u.username
                     FROM ticket_comments tc
                     LEFT JOIN users u ON tc.user_id = u.user_id
                     WHERE tc.ticket_id = ?
                     ORDER BY tc.created_at DESC";
+        }
+
         $stmt = $this->conn->prepare($sql);
-        $stmt->bind_param("s", $ticketId); // Changed to string since ticket_id is varchar
+        $stmt->bind_param("s", $ticketId);
         $stmt->execute();
         $result = $stmt->get_result();
 
         $comments = [];
+        $commentMap = [];
+
         while ($row = $result->fetch_assoc()) {
             // Use display_name from users table if available, fallback to user_name field
             if (!empty($row['display_name'])) {
@@ -69,25 +85,102 @@ class CommentModel {
             } else {
                 $row['display_name_formatted'] = $row['user_name'] ?? 'Unknown User';
             }
-            $comments[] = $row;
+            $row['replies'] = [];
+            $row['parent_comment_id'] = $row['parent_comment_id'] ?? null;
+            $row['thread_depth'] = $row['thread_depth'] ?? 0;
+            $commentMap[$row['comment_id']] = $row;
         }
 
-        return $comments;
+        // Build threaded structure if threading is enabled
+        if ($hasThreading && $threaded) {
+            $rootComments = [];
+            foreach ($commentMap as $id => $comment) {
+                if ($comment['parent_comment_id'] === null) {
+                    $rootComments[] = $this->buildCommentThread($comment, $commentMap);
+                }
+            }
+            return $rootComments;
+        }
+
+        // Flat list
+        return array_values($commentMap);
+    }
+
+    /**
+     * Check if threading columns exist
+     */
+    private function hasThreadingSupport() {
+        static $hasSupport = null;
+        if ($hasSupport !== null) {
+            return $hasSupport;
+        }
+
+        $result = $this->conn->query("SHOW COLUMNS FROM ticket_comments LIKE 'parent_comment_id'");
+        $hasSupport = ($result && $result->num_rows > 0);
+        return $hasSupport;
+    }
+
+    /**
+     * Recursively build comment thread
+     */
+    private function buildCommentThread($comment, &$allComments) {
+        $comment['replies'] = [];
+        foreach ($allComments as $c) {
+            if ($c['parent_comment_id'] == $comment['comment_id']) {
+                $comment['replies'][] = $this->buildCommentThread($c, $allComments);
+            }
+        }
+        // Sort replies by date ascending
+        usort($comment['replies'], function($a, $b) {
+            return strtotime($a['created_at']) - strtotime($b['created_at']);
+        });
+        return $comment;
+    }
+
+    /**
+     * Get flat list of comments (for backward compatibility)
+     */
+    public function getCommentsByTicketIdFlat($ticketId) {
+        return $this->getCommentsByTicketId($ticketId, false);
     }
     
     public function addComment($ticketId, $commentData, $userId = null) {
-        $sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled)
+        // Check if threading is supported
-                VALUES (?, ?, ?, ?, ?)";
+        $hasThreading = $this->hasThreadingSupport();
-
-        $stmt = $this->conn->prepare($sql);
 
         // Set default username (kept for backward compatibility)
         $username = $commentData['user_name'] ?? 'User';
         $markdownEnabled = isset($commentData['markdown_enabled']) && $commentData['markdown_enabled'] ? 1 : 0;
-
-        // Preserve line breaks in the comment text
         $commentText = $commentData['comment_text'];
+        $parentCommentId = $commentData['parent_comment_id'] ?? null;
+        $threadDepth = 0;
 
+        // Calculate thread depth if replying to a comment
+        if ($hasThreading && $parentCommentId) {
+            $parentComment = $this->getCommentById($parentCommentId);
+            if ($parentComment) {
+                $threadDepth = min(($parentComment['thread_depth'] ?? 0) + 1, 3); // Max depth of 3
+            }
+        }
+
+        if ($hasThreading) {
+            $sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled, parent_comment_id, thread_depth)
+                    VALUES (?, ?, ?, ?, ?, ?, ?)";
+            $stmt = $this->conn->prepare($sql);
+            $stmt->bind_param(
+                "sissiii",
+                $ticketId,
+                $userId,
+                $username,
+                $commentText,
+                $markdownEnabled,
+                $parentCommentId,
+                $threadDepth
+            );
+        } else {
+            $sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled)
+                    VALUES (?, ?, ?, ?, ?)";
+            $stmt = $this->conn->prepare($sql);
             $stmt->bind_param(
                 "sissi",
                 $ticketId,
@@ -96,6 +189,7 @@ class CommentModel {
                 $commentText,
                 $markdownEnabled
             );
+        }
 
         if ($stmt->execute()) {
             $commentId = $this->conn->insert_id;
@@ -106,7 +200,9 @@ class CommentModel {
                 'user_name' => $username,
                 'created_at' => date('M d, Y H:i'),
                 'markdown_enabled' => $markdownEnabled,
-                'comment_text' => $commentText
+                'comment_text' => $commentText,
+                'parent_comment_id' => $parentCommentId,
+                'thread_depth' => $threadDepth
             ];
         } else {
             return [

views/TicketView.php

@@ -331,43 +331,77 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                     $currentUserId = $GLOBALS['currentUser']['user_id'] ?? null;
                                     $isAdmin = $GLOBALS['currentUser']['is_admin'] ?? false;
 
-                                    foreach ($comments as $comment) {
+                                    // Recursive function to render threaded comments
-                                        // Use display_name_formatted which falls back appropriately
+                                    function renderComment($comment, $currentUserId, $isAdmin, $depth = 0) {
                                         $displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
                                         $commentId = $comment['comment_id'];
                                         $isOwner = ($comment['user_id'] == $currentUserId);
                                         $canModify = $isOwner || $isAdmin;
                                         $markdownEnabled = $comment['markdown_enabled'] ? 1 : 0;
+                                        $threadDepth = $comment['thread_depth'] ?? $depth;
+                                        $parentId = $comment['parent_comment_id'] ?? null;
 
-                                        echo "<div class='comment' data-comment-id='{$commentId}' data-markdown-enabled='{$markdownEnabled}'>";
+                                        $depthClass = 'thread-depth-' . min($threadDepth, 3);
+                                        $threadClass = $parentId ? 'comment-reply' : 'comment-root';
+
+                                        echo "<div class='comment {$depthClass} {$threadClass}' data-comment-id='{$commentId}' data-markdown-enabled='{$markdownEnabled}' data-thread-depth='{$threadDepth}' data-parent-id='" . ($parentId ?? '') . "'>";
+
+                                        // Thread connector line for replies
+                                        if ($parentId) {
+                                            echo "<div class='thread-line'></div>";
+                                        }
+
+                                        echo "<div class='comment-content'>";
                                         echo "<div class='comment-header'>";
                                         echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
                                         $dateStr = date('M d, Y H:i', strtotime($comment['created_at']));
                                         $editedIndicator = !empty($comment['updated_at']) ? ' <span class="comment-edited">(edited)</span>' : '';
                                         echo "<span class='comment-date'>{$dateStr}{$editedIndicator}</span>";
 
+                                        // Action buttons
+                                        echo "<div class='comment-actions'>";
+                                        // Reply button (max depth of 3)
+                                        if ($threadDepth < 3) {
+                                            echo "<button type='button' class='comment-action-btn reply-btn' data-action='reply-comment' data-comment-id='{$commentId}' data-user='" . htmlspecialchars($displayName) . "' title='Reply'>↩</button>";
+                                        }
                                         // Edit/Delete buttons for owner or admin
                                         if ($canModify) {
-                                            echo "<div class='comment-actions'>";
+                                            echo "<button type='button' class='comment-action-btn edit-btn' data-action='edit-comment' data-comment-id='{$commentId}' title='Edit'>✏️</button>";
-                                            echo "<button type='button' class='comment-action-btn edit-btn' data-action='edit-comment' data-comment-id='{$commentId}' title='Edit comment'>✏️</button>";
+                                            echo "<button type='button' class='comment-action-btn delete-btn' data-action='delete-comment' data-comment-id='{$commentId}' title='Delete'>🗑️</button>";
-                                            echo "<button type='button' class='comment-action-btn delete-btn' data-action='delete-comment' data-comment-id='{$commentId}' title='Delete comment'>🗑️</button>";
-                                            echo "</div>";
                                         }
-
                                         echo "</div>";
+
+                                        echo "</div>"; // .comment-header
+
                                         echo "<div class='comment-text' id='comment-text-{$commentId}' " . ($comment['markdown_enabled'] ? "data-markdown" : "") . ">";
                                         if ($comment['markdown_enabled']) {
-                                            // Markdown will be rendered by JavaScript
                                             echo htmlspecialchars($comment['comment_text']);
                                         } else {
-                                            // For non-markdown comments, convert line breaks to <br> and escape HTML
                                             echo nl2br(htmlspecialchars($comment['comment_text']));
                                         }
                                         echo "</div>";
+
                                         // Hidden raw text for editing
                                         echo "<textarea class='comment-edit-raw' id='comment-raw-{$commentId}' style='display:none;'>" . htmlspecialchars($comment['comment_text']) . "</textarea>";
+
+                                        echo "</div>"; // .comment-content
+
+                                        // Render replies recursively
+                                        if (!empty($comment['replies'])) {
+                                            echo "<div class='comment-replies'>";
+                                            foreach ($comment['replies'] as $reply) {
+                                                renderComment($reply, $currentUserId, $isAdmin, $threadDepth + 1);
+                                            }
                                             echo "</div>";
                                         }
+
+                                        echo "</div>"; // .comment
+                                    }
+
+                                    // Render all comments
+                                    foreach ($comments as $comment) {
+                                        renderComment($comment, $currentUserId, $isAdmin);
+                                    }
                                     ?>
                                 </div>
                             </div>