Skip to content

Web Dashboard Implementation#32

Merged
aancw merged 25 commits into
mainfrom
dashboard
Apr 22, 2026
Merged

Web Dashboard Implementation#32
aancw merged 25 commits into
mainfrom
dashboard

Conversation

@aancw
Copy link
Copy Markdown
Owner

@aancw aancw commented Apr 22, 2026

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

Type of Change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

  • Test A
  • Test B

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

aancw added 25 commits April 2, 2026 00:30
Phase 1 implementation:
- Add pkg/api/ package with chi router HTTP server
- Add handlers for dashboard stats, sessions CRUD, system info
- Add middleware: CORS, logging, recoverer
- Add 'pentlog web' command to start API server
- Endpoints: /api/health, /api/dashboard/*, /api/sessions/*, /api/system/*

Usage: pentlog web --port 8080
- Add React + Vite + TypeScript frontend
- Add Tailwind CSS for styling
- Add pages: Dashboard, Sessions, SessionDetail, Vulns, Reports, Search, Archives, Settings
- Add API client with typed responses
- Add React Query for data fetching
- Add lucide-react for icons
- Embed built frontend in Go binary
- Serve static files from embedded FS

Usage: pentlog web --port 8080
- Add vulns handler: CRUD for vulnerability management
- Add search handler: full-text search with boolean operators
- Add reports handler: list generated reports
- Add archives handler: list archives
- Add context handler: current context and history
- Add targets handler: multi-target management
- Add session_content handler: session notes
- Add recovery handler: crashed session management

All endpoints tested and working.
- Fix type imports for React Query hooks
- Simplify API client with explicit return types
- Add ErrorBoundary component for error handling
- Update index.html title to 'PentLog Dashboard'
- Add plain CSS fallback for Tailwind classes
- Add getContentType() function to detect MIME types by file extension
- Set application/javascript for .js files
- Set text/css for .css files
- Set proper content types for html, svg, images, json

This fixes the white screen issue caused by browsers rejecting
modules with incorrect MIME types.
- Vulns page: fetch and display vulnerabilities with filters
- Reports page: list generated reports with metadata
- Search page: full-text search with boolean operators
- Archives page: list archives with encryption status
- Settings page: display system info and storage paths

All pages now display real data from the API.
- Dark theme with purple accent colors
- Clean sidebar with context badge and navigation
- Card-based layout with proper spacing
- Stat cards with gradient backgrounds
- Improved tables with hover states
- Responsive grid layouts
- Better typography and visual hierarchy
- Smooth transitions and hover effects
- Color-coded severity badges for vulns
- Grid view for reports and archives
- Professional search interface with tips
- Revert to plain CSS with explicit classes
- Remove Tailwind dependency issues
- Add custom component classes (card, btn, badge, etc.)
- Clean sidebar with proper navigation styling
- Working table and form components
- Simplified page components with proper layout
- Add GIFWriter for incremental frame encoding
- Add FrameReader for streaming ttyrec parsing
- Process frames one at a time instead of loading entire file into memory
- Write GIF frames in 255-byte sub-blocks to disk incrementally
- Remove frame sampling/skipping - preserves full recording fidelity
- Memory usage reduced from ~9GB to ~10-50MB for large sessions
…ration

Backend:
- Add /api/reports/jobs/active endpoint to check for running jobs
- Add /api/dashboard/phases endpoint for phase dropdown data
- Add time estimation (avg time per session, est. time remaining)

Frontend:
- Check for active job on page load (handles localStorage cleared)
- Clear invalid job IDs when API returns 404
- Convert client/engagement/phase inputs to dropdown selects
- Show estimated time remaining during GIF generation
- Add formatDuration helper for human-readable time display
- Replace VS Code dark theme with elegant warm/amber palette
- Add light and dark theme support with CSS variables
- Integrate IBM Plex fonts for professional typography
- Add interactive theme toggle button with localStorage persistence
- Update all components (tables, sessions, GIF player) to match dashboard aesthetic
- Ensure consistent styling across CLI and web-generated reports
- Default theme changed from light to dark
- CSS :root now contains dark theme values
- :root[data-theme='light'] provides light override
- Frontend Layout.tsx defaults to dark on first load
- Report HTML template defaults to dark with proper icon state
@aancw aancw merged commit 1449b41 into main Apr 22, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant