feat(UI): add Debug Info modal for bug reporting

chriscrosstalk · claude · jakeaturner · commit e4fde22dd96a · 2026-03-20T11:46:10.000-07:00
Add a "Debug Info" link to the footer and settings sidebar that opens a
modal with non-sensitive system information (version, OS, hardware, GPU,
installed services, internet status, update availability). Users can copy
the formatted text and paste it into GitHub issues.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/admin/app/controllers/system_controller.ts b/admin/app/controllers/system_controller.ts
@@ -113,6 +113,11 @@ export default class SystemController {
         return await this.systemService.subscribeToReleaseNotes(reqData.email);
     }
 
+    async getDebugInfo({}: HttpContext) {
+        const debugInfo = await this.systemService.getDebugInfo()
+        return { debugInfo }
+    }
+
     async checkServiceUpdates({ response }: HttpContext) {
         await CheckServiceUpdatesJob.dispatch()
         response.send({ success: true, message: 'Service update check dispatched' })
diff --git a/admin/app/services/system_service.ts b/admin/app/services/system_service.ts
@@ -410,6 +410,117 @@ export class SystemService {
     }
   }
 
+  async getDebugInfo(): Promise<string> {
+    const appVersion = SystemService.getAppVersion()
+    const environment = process.env.NODE_ENV || 'unknown'
+
+    const [systemInfo, services, internetStatus, versionCheck] = await Promise.all([
+      this.getSystemInfo(),
+      this.getServices({ installedOnly: false }),
+      this.getInternetStatus().catch(() => null),
+      this.checkLatestVersion().catch(() => null),
+    ])
+
+    const lines: string[] = [
+      'Project NOMAD Debug Info',
+      '========================',
+      `App Version: ${appVersion}`,
+      `Environment: ${environment}`,
+    ]
+
+    if (systemInfo) {
+      const { cpu, mem, os, disk, fsSize, uptime, graphics } = systemInfo
+
+      lines.push('')
+      lines.push('System:')
+      if (os.distro) lines.push(`  OS: ${os.distro}`)
+      if (os.hostname) lines.push(`  Hostname: ${os.hostname}`)
+      if (os.kernel) lines.push(`  Kernel: ${os.kernel}`)
+      if (os.arch) lines.push(`  Architecture: ${os.arch}`)
+      if (uptime?.uptime) lines.push(`  Uptime: ${this._formatUptime(uptime.uptime)}`)
+
+      lines.push('')
+      lines.push('Hardware:')
+      if (cpu.brand) {
+        lines.push(`  CPU: ${cpu.brand} (${cpu.cores} cores)`)
+      }
+      if (mem.total) {
+        const total = this._formatBytes(mem.total)
+        const used = this._formatBytes(mem.total - (mem.available || 0))
+        const available = this._formatBytes(mem.available || 0)
+        lines.push(`  RAM: ${total} total, ${used} used, ${available} available`)
+      }
+      if (graphics.controllers && graphics.controllers.length > 0) {
+        for (const gpu of graphics.controllers) {
+          const vram = gpu.vram ? ` (${gpu.vram} MB VRAM)` : ''
+          lines.push(`  GPU: ${gpu.model}${vram}`)
+        }
+      } else {
+        lines.push('  GPU: None detected')
+      }
+
+      // Disk info — try disk array first, fall back to fsSize
+      const diskEntries = disk.filter((d) => d.totalSize > 0)
+      if (diskEntries.length > 0) {
+        for (const d of diskEntries) {
+          const size = this._formatBytes(d.totalSize)
+          const type = d.tran?.toUpperCase() || (d.rota ? 'HDD' : 'SSD')
+          lines.push(`  Disk: ${size}, ${Math.round(d.percentUsed)}% used, ${type}`)
+        }
+      } else if (fsSize.length > 0) {
+        const realFs = fsSize.filter((f) => f.fs.startsWith('/dev/'))
+        const seen = new Set<number>()
+        for (const f of realFs) {
+          if (seen.has(f.size)) continue
+          seen.add(f.size)
+          lines.push(`  Disk: ${this._formatBytes(f.size)}, ${Math.round(f.use)}% used`)
+        }
+      }
+    }
+
+    const installed = services.filter((s) => s.installed)
+    lines.push('')
+    if (installed.length > 0) {
+      lines.push('Installed Services:')
+      for (const svc of installed) {
+        lines.push(`  ${svc.friendly_name} (${svc.service_name}): ${svc.status}`)
+      }
+    } else {
+      lines.push('Installed Services: None')
+    }
+
+    if (internetStatus !== null) {
+      lines.push('')
+      lines.push(`Internet Status: ${internetStatus ? 'Online' : 'Offline'}`)
+    }
+
+    if (versionCheck?.success) {
+      const updateMsg = versionCheck.updateAvailable
+        ? `Yes (${versionCheck.latestVersion} available)`
+        : `No (${versionCheck.currentVersion} is latest)`
+      lines.push(`Update Available: ${updateMsg}`)
+    }
+
+    return lines.join('\n')
+  }
+
+  private _formatUptime(seconds: number): string {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`
+    if (hours > 0) return `${hours}h ${minutes}m`
+    return `${minutes}m`
+  }
+
+  private _formatBytes(bytes: number, decimals = 1): string {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]
+  }
+
   async updateSetting(key: KVStoreKey, value: any): Promise<void> {
     if ((value === '' || value === undefined || value === null) && KV_STORE_SCHEMA[key] === 'string') {
       await KVStore.clearValue(key)
diff --git a/admin/inertia/components/DebugInfoModal.tsx b/admin/inertia/components/DebugInfoModal.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react'
+import { IconBug, IconCopy, IconCheck } from '@tabler/icons-react'
+import StyledModal from './StyledModal'
+import api from '~/lib/api'
+
+interface DebugInfoModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export default function DebugInfoModal({ open, onClose }: DebugInfoModalProps) {
+  const [debugText, setDebugText] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+
+    setLoading(true)
+    setCopied(false)
+
+    api.getDebugInfo().then((text) => {
+      if (text) {
+        const browserLine = `Browser: ${navigator.userAgent}`
+        setDebugText(text + '\n' + browserLine)
+      } else {
+        setDebugText('Failed to load debug info. Please try again.')
+      }
+      setLoading(false)
+    }).catch(() => {
+      setDebugText('Failed to load debug info. Please try again.')
+      setLoading(false)
+    })
+  }, [open])
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(debugText)
+    } catch {
+      // Fallback for older browsers
+      const textarea = document.querySelector<HTMLTextAreaElement>('#debug-info-text')
+      if (textarea) {
+        textarea.select()
+        document.execCommand('copy')
+      }
+    }
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <StyledModal
+      open={open}
+      onClose={onClose}
+      title="Debug Info"
+      icon={<IconBug className="size-8 text-desert-green" />}
+      cancelText="Close"
+      onCancel={onClose}
+    >
+      <p className="text-sm text-gray-500 mb-3 text-left">
+        This is non-sensitive system info you can share when reporting issues.
+        No passwords, IPs, or API keys are included.
+      </p>
+
+      <textarea
+        id="debug-info-text"
+        readOnly
+        value={loading ? 'Loading...' : debugText}
+        rows={18}
+        className="w-full font-mono text-xs bg-gray-50 border border-gray-200 rounded-md p-3 resize-none focus:outline-none text-left"
+      />
+
+      <div className="mt-3 flex items-center justify-between">
+        <button
+          onClick={handleCopy}
+          disabled={loading}
+          className="inline-flex items-center gap-1.5 rounded-md bg-desert-green px-3 py-1.5 text-sm font-semibold text-white hover:bg-desert-green-dark transition-colors disabled:opacity-50"
+        >
+          {copied ? (
+            <>
+              <IconCheck className="size-4" />
+              Copied!
+            </>
+          ) : (
+            <>
+              <IconCopy className="size-4" />
+              Copy to Clipboard
+            </>
+          )}
+        </button>
+
+        <a
+          href="https://github.com/Crosstalk-Solutions/project-nomad/issues"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-desert-green hover:underline"
+        >
+          Open a GitHub Issue
+        </a>
+      </div>
+    </StyledModal>
+  )
+}
diff --git a/admin/inertia/components/Footer.tsx b/admin/inertia/components/Footer.tsx
@@ -1,17 +1,31 @@
+import { useState } from 'react'
 import { usePage } from '@inertiajs/react'
 import { UsePageProps } from '../../types/system'
 import ThemeToggle from '~/components/ThemeToggle'
+import { IconBug } from '@tabler/icons-react'
+import DebugInfoModal from './DebugInfoModal'
 
 export default function Footer() {
   const { appVersion } = usePage().props as unknown as UsePageProps
+  const [debugModalOpen, setDebugModalOpen] = useState(false)
+
   return (
     <footer>
       <div className="flex items-center justify-center gap-3 border-t border-border-subtle py-4">
         <p className="text-sm/6 text-text-secondary">
           Project N.O.M.A.D. Command Center v{appVersion}
         </p>
+        <span className="text-gray-300">|</span>
+        <button
+          onClick={() => setDebugModalOpen(true)}
+          className="text-sm/6 text-gray-500 hover:text-desert-green flex items-center gap-1 cursor-pointer"
+        >
+          <IconBug className="size-3.5" />
+          Debug Info
+        </button>
         <ThemeToggle />
       </div>
+      <DebugInfoModal open={debugModalOpen} onClose={() => setDebugModalOpen(false)} />
     </footer>
   )
 }
diff --git a/admin/inertia/components/StyledSidebar.tsx b/admin/inertia/components/StyledSidebar.tsx
@@ -1,11 +1,12 @@
 import { useMemo, useState } from 'react'
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
 import classNames from '~/lib/classNames'
-import { IconArrowLeft } from '@tabler/icons-react'
+import { IconArrowLeft, IconBug } from '@tabler/icons-react'
 import { usePage } from '@inertiajs/react'
 import { UsePageProps } from '../../types/system'
 import { IconMenu2, IconX } from '@tabler/icons-react'
 import ThemeToggle from '~/components/ThemeToggle'
+import DebugInfoModal from './DebugInfoModal'
 
 type SidebarItem = {
   name: string
@@ -22,6 +23,7 @@ interface StyledSidebarProps {
 
 const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [debugModalOpen, setDebugModalOpen] = useState(false)
   const { appVersion } = usePage().props as unknown as UsePageProps
 
   const currentPath = useMemo(() => {
@@ -78,6 +80,13 @@ const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
         </nav>
         <div className="mb-4 flex flex-col items-center gap-1 text-sm text-text-secondary">
           <p>Project N.O.M.A.D. Command Center v{appVersion}</p>
+          <button
+            onClick={() => setDebugModalOpen(true)}
+            className="mt-1 text-gray-500 hover:text-desert-green inline-flex items-center gap-1 cursor-pointer"
+          >
+            <IconBug className="size-3.5" />
+            Debug Info
+          </button>
           <ThemeToggle />
         </div>
       </div>
@@ -125,6 +134,7 @@ const StyledSidebar: React.FC<StyledSidebarProps> = ({ title, items }) => {
       <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
         <Sidebar />
       </div>
+      <DebugInfoModal open={debugModalOpen} onClose={() => setDebugModalOpen(false)} />
     </>
   )
 }
diff --git a/admin/inertia/lib/api.ts b/admin/inertia/lib/api.ts
@@ -211,6 +211,13 @@ class API {
     })()
   }
 
+  async getDebugInfo() {
+    return catchInternal(async () => {
+      const response = await this.client.get<{ debugInfo: string }>('/system/debug-info')
+      return response.data.debugInfo
+    })()
+  }
+
   async getInternetStatus() {
     return catchInternal(async () => {
       const response = await this.client.get<boolean>('/system/internet-status')
diff --git a/admin/start/routes.ts b/admin/start/routes.ts
@@ -136,6 +136,7 @@ router
 
 router
   .group(() => {
+    router.get('/debug-info', [SystemController, 'getDebugInfo'])
     router.get('/info', [SystemController, 'getSystemInfo'])
     router.get('/internet-status', [SystemController, 'getInternetStatus'])
     router.get('/services', [SystemController, 'getServices'])
