Added support for air-gapped and enterprise environments where npm package access is restricted, specifically addressing esbuild platform binary download issues.
**New Files:**
- Dockerfile.frontend.prebuilt: Alternative Dockerfile that uses pre-built Angular files
- DEPLOYMENT.md: Comprehensive deployment guide with two options
**Changes:**
- package.json: Added optionalDependencies for esbuild platform binaries
- @esbuild/darwin-arm64
- @esbuild/darwin-x64
- @esbuild/linux-arm64
- @esbuild/linux-x64
**Deployment Options:**
**Option 1 - Standard Build (current default):**
- Builds Angular in Docker
- Requires npm registry access
- Best for cloud/development
**Option 2 - Pre-built (for air-gapped):**
1. Build Angular locally: npm run build:prod
2. Change dockerfile in docker-compose.yml to Dockerfile.frontend.prebuilt
3. Docker only needs to copy files, no npm required
- No npm registry access needed during Docker build
- Faster, more reliable builds
- Best for enterprise/air-gapped/CI-CD
**Troubleshooting:**
See DEPLOYMENT.md for full troubleshooting guide including:
- esbuild platform binary issues
- Custom npm registry configuration
- Environment-specific recommendations
This addresses npm package access issues in restricted environments while maintaining flexibility for standard deployments.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Switched from lucide-angular to Google Material Icons font for better compatibility across all environments, especially air-gapped and enterprise setups.
**Changes:**
- Removed lucide-angular dependency (not available in some environments)
- Added Material Icons font via Google CDN in index.html
- Updated all components to use Material Icons spans instead of Lucide components
- Added Material Icons CSS classes (md-16, md-18, md-20, md-24)
**Icon Mapping:**
- RefreshCw → refresh
- Sparkles → auto_awesome
- Search → search
- X/Close → close
- Download → download
- Trash2/Delete → delete
- Database → storage
- Upload → upload
**Benefits:**
- No npm dependency required (just a font)
- Works in all environments (air-gapped, enterprise proxies)
- Smaller bundle: 349.74 kB raw, 91.98 kB gzipped
- Industry standard Material Design icons
- Better cross-browser compatibility
All components tested and working correctly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replaced emoji icons throughout the Angular app with modern Lucide icon library for a more professional and consistent look matching the original static site design.
**Icon Updates:**
- Navigation tabs: Database, Upload, Search icons
- Toolbar buttons: RefreshCw, Sparkles, Search, X icons
- Action buttons: Download, Trash2 icons
- Form buttons: Upload, Search, X icons
**Style Improvements:**
- Added softer blue color for artifact links (#93c5fd)
- Added hover effect with lighter blue (#bfdbfe)
- Added proper cursor pointer for clickable rows
- Improved icon color consistency throughout
**Dependencies:**
- Added lucide-angular (v0.545.0) for icon support
- Bundle size: 356.54 kB (raw) → 93.91 kB (gzipped)
- Minimal impact: only +7.79 kB for full icon library
All components updated with Lucide imports and icon references.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Angular Downgrade:**
- Downgraded from Angular 20 to Angular 19 for better stability
- Updated all @angular/* packages to ^19.0.0
- Adjusted TypeScript to ~5.8.0 for Angular 19 compatibility
- Added required outputPath and index to angular.json for Angular 19 build requirements
- Verified production build works successfully
**NPM Registry Enhancements:**
- Updated Dockerfile.frontend to regenerate package-lock.json when custom npm registry is provided
- When NPM_REGISTRY is set to custom URL, the build will:
1. Configure npm to use the custom registry
2. Delete existing package-lock.json
3. Generate new package-lock.json with custom registry URLs
4. Run npm ci with the new lock file
- Default behavior (npmjs.org) unchanged - uses existing package-lock.json
**Build Verification:**
- Local build tested: ✓
- Docker build tested: ✓
- Bundle size: 348.75 kB raw, 91.73 kB gzipped
- No vulnerabilities found
**Usage:**
```bash
# Default registry (uses existing package-lock.json)
./quickstart.sh
# Custom registry (regenerates package-lock.json)
NPM_REGISTRY=http://your-npm-proxy:8081/repository/npm-proxy/ ./quickstart.sh
```
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented a complete Angular 20 migration with modern standalone components architecture and production-ready Docker deployment:
**Frontend Migration:**
- Created Angular 20 application with standalone components (no NgModules)
- Implemented three main components: artifacts-list, upload-form, query-form
- Added TypeScript models and services for type-safe API communication
- Migrated dark theme UI with all existing features
- Configured routing and navigation between views
- Set up development proxy for seamless API integration
- Reactive forms with validation for upload and query functionality
- Auto-refresh artifacts every 5 seconds with RxJS observables
- Client-side sorting, filtering, and search capabilities
- Tags displayed as inline badges, SIM source grouping support
**Docker Integration:**
- Multi-stage Dockerfile for Angular (Node 24 build, nginx Alpine serve)
- nginx configuration for SPA routing and API proxy
- Updated docker-compose.yml with frontend service on port 80
- Health checks for all services
- Production-optimized build with gzip compression and asset caching
**Technical Stack:**
- Angular 20 with standalone components
- TypeScript for type safety
- RxJS for reactive programming
- nginx as reverse proxy
- Multi-stage Docker builds for optimal image size
All features fully functional and tested in Docker environment.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
