Fix typo

Reviewed-on: #6

.env.example

@@ -29,6 +29,7 @@ API_PORT=8000
 MAX_UPLOAD_SIZE=524288000
 
 # NPM Configuration (for frontend build)
-# Leave blank or set to https://registry.npmjs.org/ for default npm registry
-# Set to your custom npm proxy/registry URL if needed (e.g., http://your-nexus-server:8081/repository/npm-proxy/)
-NPM_REGISTRY=
+# Default: https://registry.npmjs.org/ (public npm registry)
+# For restricted environments, set to your custom npm proxy/registry URL
+# Example: http://your-nexus-server:8081/repository/npm-proxy/
+NPM_REGISTRY=https://registry.npmjs.org/

.gitea/workflows/docker.yml

@@ -0,0 +1,26 @@
+name: build
+on:
+  push:
+    branches:
+      - main
+      
+jobs:
+  docker-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: git.bitstorm.ca # e.g., docker.io for Docker Hub
+          username: ${{ secrets.REGISTRY_LOGIN }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Build Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: git.bitstorm.ca/bitforge/warehouse13:latest

.gitlab-ci.yml

@@ -1,32 +1,23 @@
 stages:
-  - test
   - build
   - deploy
 
-# Test stage
-test:
-  stage: test
-  allow_failure: true
-  image: containers.global.bsf.tools/node:20.11-alpine3.19
-  script:
-    - cd frontend
-    - npm config set registry https://deps.global.bsf.tools/artifactory/api/npm/registry.npmjs.org/
-    - npm config set strict-ssl false
-    - npm config fix
-    - npm install
 
 build_container:
   stage: build
   image:  deps.global.bsf.tools/quay.io/buildah/stable:latest
   variables:
-    IMAGE_NAME: "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME"
+    IMAGE_NAME: "$CI_REGISTRY_IMAGE:$CI_COMMIT_REF_SLUG-$CI_COMMIT_SHORT_SHA"
   before_script:
     - mkdir -p /tmp/buildah-storage
     - export BUILDAH_ROOT="/tmp/buildah-storage"
     - echo "$CI_REGISTRY_PASSWORD" | buildah login -u "$CI_REGISTRY_USER" --password-stdin "$CI_REGISTRY"
   script:
-    - buildah bud --build-arg NPM_REGISTRY=https://deps.global.bsf.tools/artifactory/api/npm/registry.npmjs.org/ --storage-driver vfs --isolation chroot -t $IMAGE_NAME .
-    - buildah push --storage-driver vfs $IMAGE_NAME
+    # - buildah bud --build-arg NPM_REGISTRY=https://deps.global.bsf.tools/artifactory/api/npm/registry.npmjs.org/ --storage-driver vfs --isolation chroot -t $IMAGE_NAME .
+    - buildah pull git.bitstorm.ca/bitforge/warehouse13:latest
+    - buildah tag git.bitstorm.ca/bitforge/warehouse13:latest $IMAGE_NAME
+    - echo "Pushing $IMAGE_NAME"
+    - buildah push $IMAGE_NAME
 
 deploy_helm_charts:
   stage: deploy
@@ -40,19 +31,12 @@ deploy_helm_charts:
       #   NAMESPACE: "bsf-services-namespace"
         # ONLY: "main"
       - ENV: "dev"
-        VALUES_FILE: "helm/values.yaml"
+        VALUES_FILE: "helm/warehouse13/values.yaml"
         CONTEXT: "esv/bsf/bsf-services/gitlab-kaas-agent-config:services-prod-agent"
         NAMESPACE: "bsf-services-dev-namespace"
         # ONLY: ["branches", "!main"]
   script:
     - kubectl config use-context $CONTEXT
+    - echo "Deploy - $CI_REGISTRY_NAME - $CI_COMMIT_REF_SLUG - $CI_COMMIT_SHORT_SHA"
     - |
-      helm upgrade --install warehouse13-$CI_COMMIT_REF \
-      ./helm/warehouse13 --namespace $NAMESPACE \
-      -f $VALUES_FILE \
-      --set api.image=$CI_REGISTRY_IMAGE \
-      --set api.image.tag=$CI_COMMIT_REF_NAME \
-      --set postgres.image.repository=containers.global.bsf.tools/postgres \
-      --set postgres.image.tag=15-alpine \
-      --set minio.image.repository=containers.global.bsf.tools/minio \
-      --set minio.image.tag=latest
+      helm upgrade --install warehouse13-dev ./helm/warehouse13 --namespace $NAMESPACE -f $VALUES_FILE --set app.image.repository=$CI_REGISTRY_IMAGE --set app.image.tag=$CI_COMMIT_REF_SLUG-$CI_COMMIT_SHORT_SHA

Dockerfile

@@ -1,5 +1,5 @@
 # Multi-stage build: First stage builds Angular frontend
-FROM node:24-alpine AS frontend-build
+FROM node:20.11-alpine3.19 AS frontend-build
 
 # Accept npm registry as build argument
 ARG NPM_REGISTRY=https://registry.npmjs.org/

docker-compose.yml

@@ -38,7 +38,10 @@ services:
 
   app:
     container_name: warehouse13-app
-    build: .
+    build:
+      context: .
+      args:
+        NPM_REGISTRY: ${NPM_REGISTRY:-https://registry.npmjs.org/}
     ports:
       - "8000:8000"
     environment:

docs/NPM-PACKAGE-AGE-POLICY.md

@@ -0,0 +1,220 @@
+# NPM Package Age Policy
+
+## Requirement
+
+All npm packages must be **at least 2 weeks old** before they can be used in this project. This ensures:
+- Package stability
+- Security vulnerability disclosure time
+- Compliance with organizational security policies
+
+## How It Works
+
+### 1. Package Version Pinning
+
+The project uses exact version pinning in `package.json` to prevent automatic updates:
+
+```json
+{
+  "dependencies": {
+    "@angular/core": "19.2.7",  // Exact version, not "^19.2.7" or "~19.2.7"
+    // ...
+  }
+}
+```
+
+The `frontend/.npmrc` file enforces this:
+```
+save-exact=true
+package-lock=true
+```
+
+### 2. Automated Age Checking
+
+Use the provided script to verify all packages meet the 2-week requirement:
+
+```bash
+# Check if all packages are at least 2 weeks old
+node scripts/check-package-age.js
+```
+
+This script:
+- Queries npm registry for publish dates
+- Calculates age of each package
+- Fails if any package is newer than 14 days
+- Shows detailed age information for all packages
+
+### 3. Installation Process
+
+**Always use `npm ci` instead of `npm install`:**
+
+```bash
+cd frontend
+npm ci  # Installs exact versions from package-lock.json
+```
+
+**Why `npm ci`?**
+- Uses exact versions from `package-lock.json`
+- Doesn't update `package-lock.json`
+- Ensures reproducible builds
+- Faster than `npm install`
+
+## Updating Packages
+
+When you need to add or update packages:
+
+### Step 1: Add Package to package.json
+
+```bash
+# Find a version that's at least 2 weeks old
+npm view <package-name> time
+
+# Add exact version to package.json
+"dependencies": {
+  "new-package": "1.2.3"
+}
+```
+
+### Step 2: Verify Age
+
+```bash
+node scripts/check-package-age.js
+```
+
+### Step 3: Update Lock File
+
+```bash
+cd frontend
+npm install --package-lock-only
+```
+
+### Step 4: Install and Test
+
+```bash
+npm ci
+npm run build:prod
+```
+
+## CI/CD Integration
+
+Add the age check to your CI/CD pipeline:
+
+### GitLab CI Example
+
+```yaml
+verify_package_age:
+  stage: validate
+  image: node:18-alpine
+  script:
+    - node scripts/check-package-age.js
+  only:
+    - merge_requests
+    - main
+```
+
+### GitHub Actions Example
+
+```yaml
+- name: Check Package Age
+  run: node scripts/check-package-age.js
+```
+
+## Troubleshooting
+
+### "Package is too new" Error
+
+If a package fails the age check:
+
+1. **Find an older version:**
+   ```bash
+   npm view <package-name> versions --json
+   npm view <package-name>@<older-version> time
+   ```
+
+2. **Update package.json with older version**
+
+3. **Re-run age check:**
+   ```bash
+   node scripts/check-package-age.js
+   ```
+
+### Can't Find Old Enough Version
+
+If no version meets the 2-week requirement:
+- Wait until the package is at least 2 weeks old
+- Look for alternative packages
+- Request an exception through your security team
+
+## Example Workflow
+
+```bash
+# 1. Check current package ages
+node scripts/check-package-age.js
+
+# 2. If all pass, install dependencies
+cd frontend
+npm ci
+
+# 3. Build application
+npm run build:prod
+
+# 4. For air-gapped deployment
+../scripts/build-for-airgap.sh
+```
+
+## Scripts Reference
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/check-package-age.js` | Verify all packages are ≥ 2 weeks old |
+| `scripts/pin-old-versions.sh` | Helper script to validate and pin versions |
+| `scripts/build-for-airgap.sh` | Build frontend for air-gapped deployment |
+
+## Best Practices
+
+1. **Always commit `package-lock.json`**
+   - Ensures everyone uses the same versions
+   - Required for reproducible builds
+
+2. **Use `npm ci` in CI/CD**
+   - Faster than `npm install`
+   - Enforces lock file versions
+   - Prevents surprises
+
+3. **Regular audits**
+   ```bash
+   # Check for security vulnerabilities
+   npm audit
+
+   # Check package ages
+   node scripts/check-package-age.js
+   ```
+
+4. **Version ranges to avoid**
+   - ❌ `^1.2.3` (allows minor/patch updates)
+   - ❌ `~1.2.3` (allows patch updates)
+   - ❌ `*` or `latest` (allows any version)
+   - ✅ `1.2.3` (exact version only)
+
+## Package Age Check Output
+
+```
+Checking package ages (must be at least 2 weeks old)...
+
+✓ @angular/common@19.2.7 - 45 days old
+✓ @angular/compiler@19.2.7 - 45 days old
+✓ rxjs@7.8.0 - 180 days old
+❌ new-package@1.0.0 - 5 days old (published 2025-01-12)
+
+================================================================================
+
+❌ FAILED: 1 package(s) are newer than 2 weeks:
+
+  - new-package@1.0.0 (5 days old, published 2025-01-12)
+```
+
+## Support
+
+For questions or exceptions:
+- Review with security team
+- Document in project README
+- Update this policy as needed

docs/SUMMARY.md

@@ -164,7 +164,7 @@ curl -X POST "http://localhost:8000/api/v1/artifacts/query" \
 make deploy
 
 # Or directly with Helm
-helm install datalake ./helm --namespace datalake --create-namespace
+helm install warehouse13 ./helm/warehouse13 --namespace warehouse13 --create-namespace
 ```
 
 ## Feature Flags Usage
@@ -190,9 +190,8 @@ AWS_REGION=us-east-1
 S3_BUCKET_NAME=your-bucket
 
 # Deploy
-helm install datalake ./helm \
-  --set config.deploymentMode=cloud \
-  --set aws.enabled=true
+helm install warehouse13 ./helm/warehouse13 \
+  --set global.deploymentMode=cloud
 ```
 
 ## What's Next

frontend/package.json

@@ -23,20 +23,20 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.1.0",
-    "@angular/compiler": "^19.1.0",
-    "@angular/core": "^19.1.0",
-    "@angular/forms": "^19.1.0",
-    "@angular/platform-browser": "^19.1.0",
-    "@angular/router": "^19.1.0",
+    "@angular/common": "19.2.x",
+    "@angular/compiler": "19.2.x",
+    "@angular/core": "19.2.x",
+    "@angular/forms": "19.2.x",
+    "@angular/platform-browser": "19.2.x",
+    "@angular/router": "19.2.x",
     "rxjs": "~7.8.0",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "<=19.2.7",
-    "@angular/cli": "<=19.2.7",
-    "@angular/compiler-cli": "^19.1.0",
+    "@angular/build": "19.2.x",
+    "@angular/cli": "19.2.x",
+    "@angular/compiler-cli": "19.2.x",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.9.0",
     "karma": "~6.4.0",
@@ -44,7 +44,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.8.0",
+    "typescript": "5.x.x",
     "undici-types": "7.12.0",
     "node-releases": "2.0.21",
     "node-gyp": "11.4.2",

frontend/src/app/app.css

@@ -0,0 +1,134 @@
+/* App Layout */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: #0f172a;
+  color: #e2e8f0;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-right: 280px;
+  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.main-content.sidebar-collapsed {
+  margin-right: 80px;
+}
+
+/* Top Header */
+.top-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  background: #1e293b;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.top-header h1 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0;
+}
+
+.logo {
+  font-family: 'Courier New', monospace;
+  color: #3b82f6;
+  font-weight: 700;
+  letter-spacing: -1px;
+}
+
+.header-info {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.badge {
+  padding: 6px 14px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+/* Content Area */
+.content-area {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1024px) {
+  .main-content {
+    margin-right: 240px;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    margin-right: 0;
+  }
+
+  .top-header {
+    padding: 12px 16px;
+  }
+
+  .top-header h1 {
+    font-size: 18px;
+  }
+
+  .content-area {
+    padding: 16px;
+  }
+
+  .header-info {
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-end;
+  }
+}
+
+/* Smooth Scrolling */
+.content-area::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content-area::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.3);
+  border-radius: 4px;
+}
+
+.content-area::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* Global Material Icons Sizing */
+.material-icons.md-16 {
+  font-size: 16px;
+}
+
+.material-icons.md-18 {
+  font-size: 18px;
+}
+
+.material-icons.md-20 {
+  font-size: 20px;
+}
+
+.material-icons.md-24 {
+  font-size: 24px;
+}

frontend/src/app/app.routes.ts

@@ -2,10 +2,14 @@ import { Routes } from '@angular/router';
 import { ArtifactsListComponent } from './components/artifacts-list/artifacts-list';
 import { UploadFormComponent } from './components/upload-form/upload-form';
 import { QueryFormComponent } from './components/query-form/query-form';
+import { SettingsComponent } from './components/settings/settings';
+import { ProfileComponent } from './components/profile/profile';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/artifacts', pathMatch: 'full' },
   { path: 'artifacts', component: ArtifactsListComponent },
   { path: 'upload', component: UploadFormComponent },
-  { path: 'query', component: QueryFormComponent }
+  { path: 'query', component: QueryFormComponent },
+  { path: 'settings', component: SettingsComponent },
+  { path: 'profile', component: ProfileComponent }
 ];

frontend/src/app/app.ts

@@ -1,36 +1,30 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
-import { provideHttpClient } from '@angular/common/http';
+import { RouterOutlet } from '@angular/router';
 import { ArtifactService } from './services/artifact';
+import { NavSidebarComponent } from './components/nav-sidebar/nav-sidebar';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [CommonModule, RouterOutlet, NavSidebarComponent],
   template: `
-    <div class="container">
-      <header>
-        <h1><span class="logo">[W13]</span></h1>
-        <div class="header-info">
-          <span class="badge">{{ deploymentMode }}</span>
-          <span class="badge">{{ storageBackend }}</span>
+    <div class="app-layout">
+      <app-nav-sidebar (sidebarToggled)="onSidebarToggle($event)"></app-nav-sidebar>
+
+      <main class="main-content" [class.sidebar-collapsed]="isSidebarCollapsed">
+        <header class="top-header">
+          <h1><span class="logo">[W13]</span> Warehouse13</h1>
+          <div class="header-info">
+            <span class="badge">{{ deploymentMode }}</span>
+            <span class="badge">{{ storageBackend }}</span>
+          </div>
+        </header>
+
+        <div class="content-area">
+          <router-outlet></router-outlet>
         </div>
-      </header>
-
-      <nav class="tabs">
-        <a routerLink="/artifacts" routerLinkActive="active" class="tab-button">
-          <span class="material-icons md-16">storage</span> Artifacts
-        </a>
-        <a routerLink="/upload" routerLinkActive="active" class="tab-button">
-          <span class="material-icons md-16">upload</span> Upload
-        </a>
-        <a routerLink="/query" routerLinkActive="active" class="tab-button">
-          <span class="material-icons md-16">search</span> Query
-        </a>
-      </nav>
-
-      <router-outlet></router-outlet>
+      </main>
     </div>
   `,
   styleUrls: ['./app.css']
@@ -38,6 +32,7 @@ import { ArtifactService } from './services/artifact';
 export class AppComponent implements OnInit {
   deploymentMode: string = '';
   storageBackend: string = '';
+  isSidebarCollapsed: boolean = false;
 
   constructor(private artifactService: ArtifactService) {}
 
@@ -50,4 +45,8 @@ export class AppComponent implements OnInit {
       error: (err) => console.error('Failed to load API info:', err)
     });
   }
+
+  onSidebarToggle(isCollapsed: boolean) {
+    this.isSidebarCollapsed = isCollapsed;
+  }
 }

frontend/src/app/components/nav-sidebar/nav-sidebar.css

@@ -0,0 +1,276 @@
+.sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 100vh;
+  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.sidebar.collapsed {
+  width: 80px;
+}
+
+/* Toggle Button */
+.toggle-btn {
+  position: absolute;
+  left: -18px;
+  top: 20px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: #3b82f6;
+  border: 2px solid #0f172a;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.5);
+  transition: all 0.2s ease;
+  z-index: 1001;
+  overflow: visible;
+}
+
+.toggle-btn:hover {
+  background: #2563eb;
+  transform: scale(1.1);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.6);
+}
+
+.toggle-btn .material-icons {
+  font-size: 22px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* User Section */
+.user-section {
+  padding: 24px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-top: 40px;
+}
+
+.sidebar.collapsed .user-section {
+  padding: 24px 8px;
+}
+
+.user-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.sidebar.collapsed .user-avatar {
+  width: 48px;
+  height: 48px;
+}
+
+.avatar-text {
+  font-size: 20px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 1px;
+}
+
+.user-info {
+  text-align: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.user-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-email {
+  font-size: 12px;
+  color: #94a3b8;
+  margin-bottom: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-role {
+  font-size: 11px;
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 4px 12px;
+  border-radius: 12px;
+  display: inline-block;
+}
+
+/* Navigation Items */
+.nav-items {
+  flex: 1;
+  padding: 16px 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.nav-items::-webkit-scrollbar {
+  width: 6px;
+}
+
+.nav-items::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.nav-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  margin-bottom: 4px;
+  border-radius: 8px;
+  color: #cbd5e1;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.sidebar.collapsed .nav-item {
+  justify-content: center;
+  padding: 12px 8px;
+}
+
+.nav-item:hover {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.nav-item.active {
+  background: rgba(59, 130, 246, 0.15);
+  color: #3b82f6;
+}
+
+.nav-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 24px;
+  background: #3b82f6;
+  border-radius: 0 4px 4px 0;
+}
+
+.nav-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.nav-label {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar.collapsed .nav-label {
+  display: none;
+}
+
+/* Footer */
+.sidebar-footer {
+  padding: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.app-info {
+  text-align: center;
+}
+
+.app-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin-bottom: 4px;
+}
+
+.app-version {
+  font-size: 11px;
+  color: #64748b;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .sidebar {
+    width: 240px;
+  }
+
+  .sidebar.collapsed {
+    width: 70px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    transform: translateX(100%);
+  }
+
+  .sidebar:not(.collapsed) {
+    transform: translateX(0);
+  }
+
+  .sidebar.collapsed {
+    width: 60px;
+    transform: translateX(0);
+  }
+
+  .toggle-btn {
+    left: auto;
+    right: 16px;
+  }
+}
+
+/* Animations */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.nav-label,
+.user-info {
+  animation: slideIn 0.3s ease;
+}

frontend/src/app/components/nav-sidebar/nav-sidebar.html

@@ -0,0 +1,40 @@
+<aside class="sidebar" [class.collapsed]="isCollapsed">
+  <!-- Toggle Button -->
+  <button class="toggle-btn" (click)="toggleSidebar()" aria-label="Toggle sidebar">
+    <span class="material-icons">{{ isCollapsed ? 'chevron_right' : 'chevron_left' }}</span>
+  </button>
+
+  <!-- User Profile Section -->
+  <div class="user-section">
+    <div class="user-avatar">
+      <span class="avatar-text">{{ user.avatar }}</span>
+    </div>
+    <div class="user-info" *ngIf="!isCollapsed">
+      <div class="user-name">{{ user.name }}</div>
+      <div class="user-email">{{ user.email }}</div>
+      <div class="user-role">{{ user.role }}</div>
+    </div>
+  </div>
+
+  <!-- Navigation Items -->
+  <nav class="nav-items">
+    <a
+      *ngFor="let item of navItems"
+      [routerLink]="item.route"
+      routerLinkActive="active"
+      class="nav-item"
+      [attr.aria-label]="item.label"
+    >
+      <span class="material-icons nav-icon">{{ item.icon }}</span>
+      <span class="nav-label" *ngIf="!isCollapsed">{{ item.label }}</span>
+    </a>
+  </nav>
+
+  <!-- App Info Footer -->
+  <div class="sidebar-footer" *ngIf="!isCollapsed">
+    <div class="app-info">
+      <div class="app-name">Warehouse13</div>
+      <div class="app-version">v1.0.0</div>
+    </div>
+  </div>
+</aside>

frontend/src/app/components/nav-sidebar/nav-sidebar.ts

@@ -0,0 +1,43 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+interface NavItem {
+  route: string;
+  label: string;
+  icon: string;
+}
+
+@Component({
+  selector: 'app-nav-sidebar',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive],
+  templateUrl: './nav-sidebar.html',
+  styleUrls: ['./nav-sidebar.css']
+})
+export class NavSidebarComponent {
+  isCollapsed = false;
+
+  @Output() sidebarToggled = new EventEmitter<boolean>();
+
+  // Hardcoded user data for now (will be replaced with OAuth)
+  user = {
+    name: 'John Doe',
+    email: 'john.doe@warehouse13.com',
+    avatar: 'JD',
+    role: 'Administrator'
+  };
+
+  navItems: NavItem[] = [
+    { route: '/artifacts', label: 'Artifacts', icon: 'inventory_2' },
+    { route: '/upload', label: 'Upload', icon: 'cloud_upload' },
+    { route: '/query', label: 'Query', icon: 'search' },
+    { route: '/profile', label: 'Profile', icon: 'person' },
+    { route: '/settings', label: 'Settings', icon: 'settings' }
+  ];
+
+  toggleSidebar() {
+    this.isCollapsed = !this.isCollapsed;
+    this.sidebarToggled.emit(this.isCollapsed);
+  }
+}

frontend/src/app/components/profile/profile.css

@@ -0,0 +1,395 @@
+.profile-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-header h1 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 28px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 8px 0;
+}
+
+.page-header h1 .material-icons {
+  font-size: 32px;
+  color: #3b82f6;
+}
+
+.subtitle {
+  color: #94a3b8;
+  margin: 0;
+}
+
+.profile-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Profile Card */
+.profile-card {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 32px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.profile-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.profile-avatar-large {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.3);
+}
+
+.avatar-text {
+  font-size: 36px;
+  font-weight: 600;
+  color: white;
+  letter-spacing: 2px;
+}
+
+.profile-info {
+  flex: 1;
+}
+
+.profile-info h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 8px 0;
+}
+
+.email {
+  color: #94a3b8;
+  margin: 0 0 12px 0;
+  font-size: 14px;
+}
+
+.profile-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.badge-role {
+  padding: 6px 14px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.department {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #cbd5e1;
+  font-size: 13px;
+}
+
+.department .material-icons {
+  font-size: 18px;
+}
+
+.btn-edit {
+  padding: 10px 20px;
+  border-radius: 8px;
+  border: 1px solid #3b82f6;
+  background: transparent;
+  color: #3b82f6;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.btn-edit:hover {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.profile-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+  padding-top: 24px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.detail-item > .material-icons {
+  font-size: 20px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.detail-item label {
+  display: block;
+  font-size: 12px;
+  color: #94a3b8;
+  margin-bottom: 4px;
+}
+
+.detail-item span {
+  display: block;
+  font-size: 14px;
+  color: #f1f5f9;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  border-color: #3b82f6;
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  font-size: 36px;
+  color: #3b82f6;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+/* Activity Section */
+.activity-section,
+.security-section {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.activity-section h2,
+.security-section h2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 20px 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.activity-section h2 .material-icons,
+.security-section h2 .material-icons {
+  font-size: 24px;
+  color: #3b82f6;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  background: rgba(15, 23, 42, 0.5);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.activity-item:hover {
+  background: rgba(59, 130, 246, 0.05);
+}
+
+.activity-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.activity-icon .material-icons {
+  font-size: 20px;
+  color: #3b82f6;
+}
+
+.activity-details {
+  flex: 1;
+}
+
+.activity-action {
+  font-size: 14px;
+  color: #f1f5f9;
+  margin-bottom: 4px;
+}
+
+.activity-file {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.activity-time {
+  font-size: 12px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+/* Security Section */
+.security-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.security-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: rgba(15, 23, 42, 0.5);
+  border-radius: 8px;
+}
+
+.security-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+}
+
+.security-info > .material-icons {
+  font-size: 24px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.security-info h3 {
+  font-size: 15px;
+  font-weight: 500;
+  color: #f1f5f9;
+  margin: 0 0 4px 0;
+}
+
+.security-info p {
+  font-size: 13px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.btn-secondary {
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #334155;
+  background: transparent;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 13px;
+}
+
+.btn-secondary:hover {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .profile-container {
+    padding: 16px;
+  }
+
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .profile-avatar-large {
+    margin: 0 auto;
+  }
+
+  .profile-info {
+    text-align: center;
+  }
+
+  .profile-meta {
+    justify-content: center;
+  }
+
+  .btn-edit {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .security-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .btn-secondary {
+    width: 100%;
+  }
+}

frontend/src/app/components/profile/profile.html

@@ -0,0 +1,128 @@
+<div class="profile-container">
+  <header class="page-header">
+    <h1>
+      <span class="material-icons">person</span>
+      Profile
+    </h1>
+    <p class="subtitle">Manage your account information</p>
+  </header>
+
+  <div class="profile-content">
+    <!-- User Info Card -->
+    <section class="profile-card">
+      <div class="profile-header">
+        <div class="profile-avatar-large">
+          <span class="avatar-text">{{ user.avatar }}</span>
+        </div>
+        <div class="profile-info">
+          <h2>{{ user.name }}</h2>
+          <p class="email">{{ user.email }}</p>
+          <div class="profile-meta">
+            <span class="badge badge-role">{{ user.role }}</span>
+            <span class="department">
+              <span class="material-icons">business</span>
+              {{ user.department }}
+            </span>
+          </div>
+        </div>
+        <button class="btn-edit">
+          <span class="material-icons">edit</span>
+          Edit Profile
+        </button>
+      </div>
+
+      <div class="profile-details">
+        <div class="detail-item">
+          <span class="material-icons">event</span>
+          <div>
+            <label>Joined</label>
+            <span>{{ user.joinDate }}</span>
+          </div>
+        </div>
+        <div class="detail-item">
+          <span class="material-icons">schedule</span>
+          <div>
+            <label>Last Login</label>
+            <span>{{ user.lastLogin }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Stats Grid -->
+    <section class="stats-grid">
+      <div class="stat-card" *ngFor="let stat of stats">
+        <span class="material-icons stat-icon">{{ stat.icon }}</span>
+        <div class="stat-info">
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Recent Activity -->
+    <section class="activity-section">
+      <h2>
+        <span class="material-icons">history</span>
+        Recent Activity
+      </h2>
+      <div class="activity-list">
+        <div class="activity-item" *ngFor="let activity of recentActivity">
+          <div class="activity-icon">
+            <span class="material-icons">{{
+              activity.action.includes('Uploaded') ? 'cloud_upload' :
+              activity.action.includes('query') ? 'search' :
+              activity.action.includes('Downloaded') ? 'cloud_download' :
+              'settings'
+            }}</span>
+          </div>
+          <div class="activity-details">
+            <div class="activity-action">{{ activity.action }}</div>
+            <div class="activity-file">{{ activity.file }}</div>
+          </div>
+          <div class="activity-time">{{ activity.time }}</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Security Section -->
+    <section class="security-section">
+      <h2>
+        <span class="material-icons">security</span>
+        Security
+      </h2>
+      <div class="security-content">
+        <div class="security-item">
+          <div class="security-info">
+            <span class="material-icons">lock</span>
+            <div>
+              <h3>Password</h3>
+              <p>Last changed 3 months ago</p>
+            </div>
+          </div>
+          <button class="btn-secondary">Change Password</button>
+        </div>
+        <div class="security-item">
+          <div class="security-info">
+            <span class="material-icons">verified_user</span>
+            <div>
+              <h3>Two-Factor Authentication</h3>
+              <p>Add an extra layer of security</p>
+            </div>
+          </div>
+          <button class="btn-secondary">Enable 2FA</button>
+        </div>
+        <div class="security-item">
+          <div class="security-info">
+            <span class="material-icons">devices</span>
+            <div>
+              <h3>Active Sessions</h3>
+              <p>Manage your active login sessions</p>
+            </div>
+          </div>
+          <button class="btn-secondary">View Sessions</button>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

frontend/src/app/components/profile/profile.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-profile',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './profile.html',
+  styleUrls: ['./profile.css']
+})
+export class ProfileComponent {
+  // Hardcoded user data (will be replaced with OAuth integration)
+  user = {
+    name: 'John Doe',
+    email: 'john.doe@warehouse13.com',
+    avatar: 'JD',
+    role: 'Administrator',
+    department: 'Engineering',
+    joinDate: 'January 15, 2024',
+    lastLogin: 'October 16, 2025, 2:30 PM'
+  };
+
+  stats = [
+    { label: 'Artifacts Uploaded', value: '1,234', icon: 'cloud_upload' },
+    { label: 'Queries Run', value: '567', icon: 'search' },
+    { label: 'Storage Used', value: '45.2 GB', icon: 'storage' },
+    { label: 'Active Since', value: '9 months', icon: 'schedule' }
+  ];
+
+  recentActivity = [
+    { action: 'Uploaded artifact', file: 'test_results.csv', time: '2 hours ago' },
+    { action: 'Ran query', file: 'integration tests', time: '5 hours ago' },
+    { action: 'Downloaded artifact', file: 'performance_metrics.json', time: '1 day ago' },
+    { action: 'Updated settings', file: 'notification preferences', time: '2 days ago' }
+  ];
+}

frontend/src/app/components/settings/settings.css

@@ -0,0 +1,227 @@
+.settings-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.page-header h1 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 28px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 8px 0;
+}
+
+.page-header h1 .material-icons {
+  font-size: 32px;
+  color: #3b82f6;
+}
+
+.subtitle {
+  color: #94a3b8;
+  margin: 0;
+}
+
+.settings-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.settings-section {
+  background: #1e293b;
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.settings-section h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #f1f5f9;
+  margin: 0 0 20px 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.setting-item:last-child {
+  border-bottom: none;
+}
+
+.setting-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+}
+
+.setting-info > .material-icons {
+  font-size: 24px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.setting-info h3 {
+  font-size: 15px;
+  font-weight: 500;
+  color: #f1f5f9;
+  margin: 0 0 4px 0;
+}
+
+.setting-info p {
+  font-size: 13px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+.setting-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #334155;
+  transition: 0.3s;
+  border-radius: 26px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #3b82f6;
+}
+
+input:checked + .slider:before {
+  transform: translateX(22px);
+}
+
+/* Theme Buttons */
+.theme-btn {
+  padding: 8px 20px;
+  border-radius: 8px;
+  border: 1px solid #334155;
+  background: transparent;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+.theme-btn:hover {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.theme-btn.active {
+  background: #3b82f6;
+  border-color: #3b82f6;
+  color: white;
+}
+
+/* Buttons */
+.btn-secondary {
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #334155;
+  background: transparent;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 13px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.btn-secondary:hover {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+/* Badge */
+.badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge-success {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+/* Code */
+.endpoint {
+  padding: 6px 12px;
+  background: #0f172a;
+  border: 1px solid #334155;
+  border-radius: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  color: #3b82f6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .settings-container {
+    padding: 16px;
+  }
+
+  .setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .setting-control {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}

frontend/src/app/components/settings/settings.html

@@ -0,0 +1,167 @@
+<div class="settings-container">
+  <header class="page-header">
+    <h1>
+      <span class="material-icons">settings</span>
+      Settings
+    </h1>
+    <p class="subtitle">Manage your Warehouse13 preferences</p>
+  </header>
+
+  <div class="settings-content">
+    <!-- General Settings -->
+    <section class="settings-section">
+      <h2>General</h2>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">palette</span>
+          <div>
+            <h3>Theme</h3>
+            <p>Choose your preferred color scheme</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <button
+            [class.active]="settings.theme === 'dark'"
+            (click)="changeTheme('dark')"
+            class="theme-btn">
+            Dark
+          </button>
+          <button
+            [class.active]="settings.theme === 'light'"
+            (click)="changeTheme('light')"
+            class="theme-btn">
+            Light
+          </button>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">notifications</span>
+          <div>
+            <h3>Notifications</h3>
+            <p>Enable desktop notifications for updates</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <label class="toggle-switch">
+            <input
+              type="checkbox"
+              [checked]="settings.notifications"
+              (change)="toggleNotifications()">
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">refresh</span>
+          <div>
+            <h3>Auto Refresh</h3>
+            <p>Automatically refresh artifact list</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <label class="toggle-switch">
+            <input
+              type="checkbox"
+              [checked]="settings.autoRefresh"
+              (change)="toggleAutoRefresh()">
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+    </section>
+
+    <!-- Storage Settings -->
+    <section class="settings-section">
+      <h2>Storage</h2>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">storage</span>
+          <div>
+            <h3>Default Storage Backend</h3>
+            <p>Currently using: MinIO</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <span class="badge badge-success">Connected</span>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">cloud</span>
+          <div>
+            <h3>Upload Limit</h3>
+            <p>Maximum file size: 500MB</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- API Settings -->
+    <section class="settings-section">
+      <h2>API</h2>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">link</span>
+          <div>
+            <h3>API Endpoint</h3>
+            <p>Backend service endpoint</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <code class="endpoint">/api/v1</code>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">key</span>
+          <div>
+            <h3>API Keys</h3>
+            <p>Manage API authentication tokens</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <button class="btn-secondary">Manage Keys</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- About Section -->
+    <section class="settings-section">
+      <h2>About</h2>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">info</span>
+          <div>
+            <h3>Version</h3>
+            <p>Warehouse13 v1.0.0</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting-item">
+        <div class="setting-info">
+          <span class="material-icons">description</span>
+          <div>
+            <h3>Documentation</h3>
+            <p>View API documentation and guides</p>
+          </div>
+        </div>
+        <div class="setting-control">
+          <a href="/docs" target="_blank" class="btn-secondary">
+            View Docs
+          </a>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

frontend/src/app/components/settings/settings.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './settings.html',
+  styleUrls: ['./settings.css']
+})
+export class SettingsComponent {
+  settings = {
+    theme: 'dark',
+    notifications: true,
+    autoRefresh: false,
+    refreshInterval: 30
+  };
+
+  toggleNotifications() {
+    this.settings.notifications = !this.settings.notifications;
+  }
+
+  toggleAutoRefresh() {
+    this.settings.autoRefresh = !this.settings.autoRefresh;
+  }
+
+  changeTheme(theme: string) {
+    this.settings.theme = theme;
+  }
+}

helm/Chart.yaml

@@ -1,14 +0,0 @@
-apiVersion: v2
-name: warehouse13
-description: Warehouse13 - Enterprise Test Artifact Storage (Legacy Chart - Use ./warehouse13 instead)
-type: application
-version: 1.0.0
-appVersion: "1.0.0"
-keywords:
-  - testing
-  - artifacts
-  - storage
-  - datalake
-deprecated: true
-maintainers:
-  - name: Warehouse13 Team

helm/README.md

@@ -20,23 +20,19 @@ helm install warehouse13 ./warehouse13
 
 **Documentation:** See [warehouse13/README.md](./warehouse13/README.md)
 
-## Legacy Chart (Deprecated)
+## Migration from Legacy Chart
 
-The files in this root `helm/` directory are from an older version and are marked as deprecated. Please use the `./warehouse13/` chart instead.
-
-## Migration
-
-If you're using the old chart, migration is straightforward:
+If you were using an older version of the chart, migration is straightforward:
 
 ```bash
-# Uninstall old chart
-helm uninstall datalake
+# Uninstall old chart (if named "datalake" or other name)
+helm uninstall <old-release-name>
 
 # Install new chart
-helm install warehouse13 ./warehouse13
+helm install warehouse13 ./warehouse13 --namespace warehouse13 --create-namespace
 
 # Or upgrade in place (if compatible)
-helm upgrade datalake ./warehouse13
+helm upgrade <old-release-name> ./warehouse13
 ```
 
 Note: Check your values.yaml configuration and update image repositories, resource limits, and other settings as needed.

helm/templates/_helpers.tpl

@@ -1,60 +0,0 @@
-{{/*
-Expand the name of the chart.
-*/}}
-{{- define "w13.name" -}}
-{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
-{{- end }}
-
-{{/*
-Create a default fully qualified app name.
-*/}}
-{{- define "w13.fullname" -}}
-{{- if .Values.fullnameOverride }}
-{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
-{{- else }}
-{{- $name := default .Chart.Name .Values.nameOverride }}
-{{- if contains $name .Release.Name }}
-{{- .Release.Name | trunc 63 | trimSuffix "-" }}
-{{- else }}
-{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
-{{- end }}
-{{- end }}
-{{- end }}
-
-{{/*
-Create chart name and version as used by the chart label.
-*/}}
-{{- define "w13.chart" -}}
-{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
-{{- end }}
-
-{{/*
-Common labels
-*/}}
-{{- define "w13.labels" -}}
-helm.sh/chart: {{ include "w13.chart" . }}
-{{ include "w13.selectorLabels" . }}
-{{- if .Chart.AppVersion }}
-app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
-{{- end }}
-app.kubernetes.io/managed-by: {{ .Release.Service }}
-{{- end }}
-
-{{/*
-Selector labels
-*/}}
-{{- define "w13.selectorLabels" -}}
-app.kubernetes.io/name: {{ include "w13.name" . }}
-app.kubernetes.io/instance: {{ .Release.Name }}
-{{- end }}
-
-{{/*
-Create the name of the service account to use
-*/}}
-{{- define "w13.serviceAccountName" -}}
-{{- if .Values.serviceAccount.create }}
-{{- default (include "w13.fullname" .) .Values.serviceAccount.name }}
-{{- else }}
-{{- default "default" .Values.serviceAccount.name }}
-{{- end }}
-{{- end }}

helm/templates/deployment.yaml

@@ -1,111 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: {{ include "w13.fullname" . }}
-  labels:
-    {{- include "w13.labels" . | nindent 4 }}
-spec:
-  {{- if not .Values.autoscaling.enabled }}
-  replicas: {{ .Values.replicaCount }}
-  {{- end }}
-  selector:
-    matchLabels:
-      {{- include "w13.selectorLabels" . | nindent 6 }}
-  template:
-    metadata:
-      {{- with .Values.podAnnotations }}
-      annotations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      labels:
-        {{- include "w13.selectorLabels" . | nindent 8 }}
-    spec:
-      {{- with .Values.imagePullSecrets }}
-      imagePullSecrets:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      serviceAccountName: {{ include "w13.serviceAccountName" . }}
-      securityContext:
-        {{- toYaml .Values.podSecurityContext | nindent 8 }}
-      containers:
-      - name: {{ .Chart.Name }}
-        securityContext:
-          {{- toYaml .Values.securityContext | nindent 12 }}
-        image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
-        imagePullPolicy: {{ .Values.image.pullPolicy }}
-        ports:
-        - name: http
-          containerPort: {{ .Values.service.targetPort }}
-          protocol: TCP
-        livenessProbe:
-          httpGet:
-            path: /health
-            port: http
-          initialDelaySeconds: 30
-          periodSeconds: 10
-        readinessProbe:
-          httpGet:
-            path: /health
-            port: http
-          initialDelaySeconds: 5
-          periodSeconds: 5
-        env:
-        - name: DATABASE_URL
-          valueFrom:
-            secretKeyRef:
-              name: {{ include "w13.fullname" . }}-secrets
-              key: database-url
-        - name: STORAGE_BACKEND
-          value: {{ .Values.config.storageBackend | quote }}
-        - name: MAX_UPLOAD_SIZE
-          value: {{ .Values.config.maxUploadSize | quote }}
-        {{- if eq .Values.config.storageBackend "s3" }}
-        - name: AWS_ACCESS_KEY_ID
-          valueFrom:
-            secretKeyRef:
-              name: {{ include "w13.fullname" . }}-secrets
-              key: aws-access-key-id
-        - name: AWS_SECRET_ACCESS_KEY
-          valueFrom:
-            secretKeyRef:
-              name: {{ include "w13.fullname" . }}-secrets
-              key: aws-secret-access-key
-        - name: AWS_REGION
-          value: {{ .Values.aws.region | quote }}
-        - name: S3_BUCKET_NAME
-          value: {{ .Values.aws.bucketName | quote }}
-        {{- else }}
-        - name: MINIO_ENDPOINT
-          value: "{{ include "w13.fullname" . }}-minio:9000"
-        - name: MINIO_ACCESS_KEY
-          valueFrom:
-            secretKeyRef:
-              name: {{ include "w13.fullname" . }}-secrets
-              key: minio-access-key
-        - name: MINIO_SECRET_KEY
-          valueFrom:
-            secretKeyRef:
-              name: {{ include "w13.fullname" . }}-secrets
-              key: minio-secret-key
-        - name: MINIO_BUCKET_NAME
-          value: "test-artifacts"
-        - name: MINIO_SECURE
-          value: "false"
-        {{- end }}
-        {{- with .Values.env }}
-        {{- toYaml . | nindent 8 }}
-        {{- end }}
-        resources:
-          {{- toYaml .Values.resources | nindent 12 }}
-      {{- with .Values.nodeSelector }}
-      nodeSelector:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      {{- with .Values.affinity }}
-      affinity:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}
-      {{- with .Values.tolerations }}
-      tolerations:
-        {{- toYaml . | nindent 8 }}
-      {{- end }}

helm/templates/ingress.yaml

@@ -1,41 +0,0 @@
-{{- if .Values.ingress.enabled -}}
-apiVersion: networking.k8s.io/v1
-kind: Ingress
-metadata:
-  name: {{ include "datalake.fullname" . }}
-  labels:
-    {{- include "datalake.labels" . | nindent 4 }}
-  {{- with .Values.ingress.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  {{- if .Values.ingress.className }}
-  ingressClassName: {{ .Values.ingress.className }}
-  {{- end }}
-  {{- if .Values.ingress.tls }}
-  tls:
-    {{- range .Values.ingress.tls }}
-    - hosts:
-        {{- range .hosts }}
-        - {{ . | quote }}
-        {{- end }}
-      secretName: {{ .secretName }}
-    {{- end }}
-  {{- end }}
-  rules:
-    {{- range .Values.ingress.hosts }}
-    - host: {{ .host | quote }}
-      http:
-        paths:
-          {{- range .paths }}
-          - path: {{ .path }}
-            pathType: {{ .pathType }}
-            backend:
-              service:
-                name: {{ include "datalake.fullname" $ }}
-                port:
-                  number: {{ $.Values.service.port }}
-          {{- end }}
-    {{- end }}
-{{- end }}

helm/templates/secrets.yaml

@@ -1,16 +0,0 @@
-apiVersion: v1
-kind: Secret
-metadata:
-  name: {{ include "datalake.fullname" . }}-secrets
-  labels:
-    {{- include "datalake.labels" . | nindent 4 }}
-type: Opaque
-stringData:
-  database-url: "postgresql://{{ .Values.postgresql.auth.username }}:{{ .Values.postgresql.auth.password }}@{{ include "datalake.fullname" . }}-postgresql:5432/{{ .Values.postgresql.auth.database }}"
-  {{- if .Values.aws.enabled }}
-  aws-access-key-id: {{ .Values.aws.accessKeyId | quote }}
-  aws-secret-access-key: {{ .Values.aws.secretAccessKey | quote }}
-  {{- else }}
-  minio-access-key: {{ .Values.minio.rootUser | quote }}
-  minio-secret-key: {{ .Values.minio.rootPassword | quote }}
-  {{- end }}

helm/templates/service.yaml

@@ -1,15 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: {{ include "datalake.fullname" . }}
-  labels:
-    {{- include "datalake.labels" . | nindent 4 }}
-spec:
-  type: {{ .Values.service.type }}
-  ports:
-    - port: {{ .Values.service.port }}
-      targetPort: http
-      protocol: TCP
-      name: http
-  selector:
-    {{- include "datalake.selectorLabels" . | nindent 4 }}

helm/templates/serviceaccount.yaml

@@ -1,12 +0,0 @@
-{{- if .Values.serviceAccount.create -}}
-apiVersion: v1
-kind: ServiceAccount
-metadata:
-  name: {{ include "datalake.serviceAccountName" . }}
-  labels:
-    {{- include "datalake.labels" . | nindent 4 }}
-  {{- with .Values.serviceAccount.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-{{- end }}

helm/values.yaml

@@ -1,111 +0,0 @@
-replicaCount: 1
-
-image:
-  repository: w13
-  pullPolicy: IfNotPresent
-  tag: "latest"
-
-imagePullSecrets: []
-nameOverride: ""
-fullnameOverride: ""
-
-serviceAccount:
-  create: true
-  annotations: {}
-  name: ""
-
-podAnnotations: {}
-
-podSecurityContext:
-  fsGroup: 1000
-
-securityContext:
-  capabilities:
-    drop:
-    - ALL
-  readOnlyRootFilesystem: false
-  runAsNonRoot: true
-  runAsUser: 1000
-
-service:
-  type: ClusterIP
-  port: 8000
-  targetPort: 8000
-
-ingress:
-  enabled: false
-  className: ""
-  annotations: {}
-  hosts:
-    - host: w13.local
-      paths:
-        - path: /
-          pathType: Prefix
-  tls: []
-
-resources:
-  limits:
-    cpu: 1000m
-    memory: 1Gi
-  requests:
-    cpu: 500m
-    memory: 512Mi
-
-autoscaling:
-  enabled: false
-  minReplicas: 1
-  maxReplicas: 10
-  targetCPUUtilizationPercentage: 80
-
-nodeSelector: {}
-
-tolerations: []
-
-affinity: {}
-
-# Application configuration
-config:
-  storageBackend: minio  # or "s3"
-  maxUploadSize: 524288000  # 500MB
-
-# PostgreSQL configuration
-postgresql:
-  enabled: true
-  auth:
-    username: user
-    password: password
-    database: w13
-  primary:
-    persistence:
-      enabled: true
-      size: 10Gi
-
-# MinIO configuration (for self-hosted storage)
-minio:
-  enabled: true
-  mode: standalone
-  rootUser: minioadmin
-  rootPassword: minioadmin
-  persistence:
-    enabled: true
-    size: 50Gi
-  service:
-    type: ClusterIP
-    port: 9000
-  consoleService:
-    port: 9001
-
-# AWS S3 configuration (when using AWS)
-aws:
-  enabled: false
-  accessKeyId: ""
-  secretAccessKey: ""
-  region: us-east-1
-  bucketName: test-artifacts
-
-# Environment variables
-env:
-  - name: API_HOST
-    value: "0.0.0.0"
-  - name: API_PORT
-    value: "8000"

helm/warehouse13/README.md

@@ -328,10 +328,10 @@ kubectl delete pvc -l app.kubernetes.io/instance=my-warehouse13
 
 ```bash
 # Create backup
-kubectl exec -it warehouse13-postgres-0 -- pg_dump -U user datalake > backup.sql
+kubectl exec -it warehouse13-postgres-0 -- pg_dump -U user warehouse13 > backup.sql
 
 # Restore
-kubectl exec -i warehouse13-postgres-0 -- psql -U user datalake < backup.sql
+kubectl exec -i warehouse13-postgres-0 -- psql -U user warehouse13 < backup.sql
 ```
 
 ### MinIO Backup

helm/warehouse13/templates/_helpers.tpl

@@ -63,8 +63,8 @@ Create the name of the service account to use
 PostgreSQL connection string
 */}}
 {{- define "warehouse13.postgresUrl" -}}
-{{- if .Values.api.env.databaseUrl }}
-{{- .Values.api.env.databaseUrl }}
+{{- if .Values.app.env.databaseUrl }}
+{{- .Values.app.env.databaseUrl }}
 {{- else }}
 {{- printf "postgresql://%s:%s@warehouse13-postgres:%d/%s" .Values.postgres.auth.username .Values.postgres.auth.password (.Values.postgres.service.port | int) .Values.postgres.auth.database }}
 {{- end }}

helm/warehouse13/templates/app-deployment.yaml

@@ -18,6 +18,8 @@ spec:
         {{- include "warehouse13.selectorLabels" . | nindent 8 }}
         app.kubernetes.io/component: app
     spec:
+      imagePullSecrets: 
+        - name: gitlab-dev-ns-registry-secret
       serviceAccountName: {{ include "warehouse13.serviceAccountName" . }}
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}

helm/warehouse13/templates/imagesecret.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ .Values.imagePullSecret.name }}
+type: kubernetes.io/dockerconfigjson
+data:
+  .dockerconfigjson: {{ 
+    (printf "{\"auths\":{\"%s\":{\"username\":\"%s\",\"password\":\"%s\",\"email\":\"%s\",\"auth\":\"%s\"}}}" 
+    .Values.imagePullSecret.server 
+    .Values.imagePullSecret.username 
+    .Values.imagePullSecret.password 
+    .Values.imagePullSecret.email 
+    (printf "%s" (b64enc (printf "%s:%s" .Values.imagePullSecret.username .Values.imagePullSecret.password)))) 
+    | b64enc | quote 
+  }}

helm/warehouse13/values.yaml

@@ -3,27 +3,27 @@
 
 # Global settings
 global:
-  deploymentMode: "standard"  # standard or airgapped
+  deploymentMode: "air-gapped"  # standard or airgapped
   storageBackend: "minio"     # minio or s3
 
 # PostgreSQL Database
 postgres:
   enabled: true
   image:
-    repository: postgres
+    repository: containers.global.bsf.tools/postgres
     tag: 15-alpine
-    pullPolicy: always
+    pullPolicy: Always
   auth:
     username: user
     password: password
-    database: datalake
+    database: warehouse13
   persistence:
-    enabled: true
+    enabled: false
     size: 10Gi
     storageClass: ""
   resources:
     requests:
-      memory: "256Mi"
+      memory: "512Mi"
       cpu: "250m"
     limits:
       memory: "512Mi"
@@ -36,9 +36,9 @@ postgres:
 minio:
   enabled: true
   image:
-    repository: minio/minio
+    repository: containers.global.bsf.tools/minio/minio
     tag: latest
-    pullPolicy: always
+    pullPolicy: Always
   auth:
     rootUser: minioadmin
     rootPassword: minioadmin
@@ -48,7 +48,7 @@ minio:
     storageClass: ""
   resources:
     requests:
-      memory: "512Mi"
+      memory: "1Gi"
       cpu: "250m"
     limits:
       memory: "1Gi"
@@ -65,17 +65,17 @@ minio:
 app:
   enabled: true
   image:
-    repository: warehouse13/app
-    tag: latest
-    pullPolicy: always
-  replicas: 2
+    repository: registry.global.bsf.tools/esv/bsf/bsf-services/warehouse13
+    tag: main-7126c618
+    pullPolicy: Always
+  replicas: 1
   env:
-    databaseUrl: "postgresql://user:password@warehouse13-postgres:5432/datalake"
+    databaseUrl: "postgresql://user:password@warehouse13-postgres:5432/warehouse13"
     storageBackend: "minio"
     minioEndpoint: "warehouse13-minio:9000"
   resources:
     requests:
-      memory: "384Mi"
+      memory: "768Mi"
       cpu: "350m"
     limits:
       memory: "768Mi"
@@ -96,20 +96,20 @@ app:
 
 # Ingress
 ingress:
-  enabled: false
+  enabled: true
   className: "nginx"
   annotations:
-    # cert-manager.io/cluster-issuer: "letsencrypt-prod"
+    cert-manager.io/cluster-issuer: "letsencrypt"
   hosts:
-    - host: warehouse13.example.com
+    - host: warehouse13.common.global.bsf.tools
       paths:
         - path: /
           pathType: Prefix
           backend: app  # All traffic goes to unified app (serves both API and frontend)
-  tls: []
-  #  - secretName: warehouse13-tls
-  #    hosts:
-  #      - warehouse13.example.com
+  tls:
+    - secretName: warehouse13-tls
+      hosts:
+        - warehouse13.common.global.bsf.tools
 
 # Service Account
 serviceAccount:
@@ -137,3 +137,12 @@ tolerations: []
 
 # Affinity
 affinity: {}
+
+imagePullSecret:
+  name: gitlab-dev-ns-registry-secret
+  username: project_9145_bot_imagepuller
+  # Read only token so okay if hard coded here
+  password: glpat-ZV7ASvBqFoiWC9QqD5WlTG86MQp1OjVxMgk.01.0z192vpfw
+  server: registry.global.bsf.tools
+  email: botemail@global.bsf.tool
+

scripts/check-package-age.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+/**
+ * Check if npm packages are at least 2 weeks old before installation
+ * Usage: node scripts/check-package-age.js
+ */
+
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+
+const TWO_WEEKS_MS = 14 * 24 * 60 * 60 * 1000;
+
+function getPackageInfo(packageName, version) {
+  return new Promise((resolve, reject) => {
+    // Remove version prefixes like ^, ~, >=
+    let cleanVersion = version.replace(/^[\^~>=]+/, '');
+
+    // If version contains .x or wildcards, fetch all versions and find latest matching
+    if (cleanVersion.includes('x') || cleanVersion.includes('*')) {
+      const url = `https://registry.npmjs.org/${packageName}`;
+
+      https.get(url, (res) => {
+        let data = '';
+
+        res.on('data', (chunk) => {
+          data += chunk;
+        });
+
+        res.on('end', () => {
+          try {
+            const info = JSON.parse(data);
+            const versions = Object.keys(info.versions || {});
+
+            // Convert version pattern to regex (e.g., "19.2.x" -> /^19\.2\.\d+$/)
+            const pattern = cleanVersion.replace(/\./g, '\\.').replace(/x|\*/g, '\\d+');
+            const regex = new RegExp(`^${pattern}$`);
+
+            // Find matching versions and get the latest
+            const matchingVersions = versions.filter(v => regex.test(v)).sort();
+            const latestMatching = matchingVersions[matchingVersions.length - 1];
+
+            if (latestMatching && info.time && info.time[latestMatching]) {
+              resolve({
+                name: packageName,
+                version: latestMatching,
+                published: info.time[latestMatching],
+                error: null
+              });
+            } else {
+              reject(new Error(`No matching version found for ${packageName}@${cleanVersion}`));
+            }
+          } catch (err) {
+            reject(new Error(`Failed to parse response for ${packageName}@${cleanVersion}`));
+          }
+        });
+      }).on('error', (err) => {
+        reject(err);
+      });
+    } else {
+      // Exact version lookup
+      const url = `https://registry.npmjs.org/${packageName}/${cleanVersion}`;
+
+      https.get(url, (res) => {
+        let data = '';
+
+        res.on('data', (chunk) => {
+          data += chunk;
+        });
+
+        res.on('end', () => {
+          try {
+            const info = JSON.parse(data);
+            resolve({
+              name: packageName,
+              version: cleanVersion,
+              published: info.time || info._time,
+              error: null
+            });
+          } catch (err) {
+            reject(new Error(`Failed to parse response for ${packageName}@${cleanVersion}`));
+          }
+        });
+      }).on('error', (err) => {
+        reject(err);
+      });
+    }
+  });
+}
+
+async function checkPackageAge() {
+  const packageJsonPath = path.join(__dirname, '../frontend/package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+
+  console.log('Checking package ages (must be at least 2 weeks old)...\n');
+
+  const tooNew = [];
+  const errors = [];
+
+  for (const [name, version] of Object.entries(allDeps)) {
+    try {
+      const info = await getPackageInfo(name, version);
+      const publishDate = new Date(info.published);
+      const age = Date.now() - publishDate.getTime();
+      const ageInDays = Math.floor(age / (24 * 60 * 60 * 1000));
+
+      if (age < TWO_WEEKS_MS) {
+        tooNew.push({
+          name,
+          version: info.version,
+          age: ageInDays,
+          published: publishDate.toISOString().split('T')[0]
+        });
+        console.log(`❌ ${name}@${info.version} - ${ageInDays} days old (published ${publishDate.toISOString().split('T')[0]})`);
+      } else {
+        console.log(`✓ ${name}@${info.version} - ${ageInDays} days old`);
+      }
+    } catch (err) {
+      errors.push({ name, version, error: err.message });
+      console.log(`⚠️  ${name}@${version} - Could not check: ${err.message}`);
+    }
+  }
+
+  console.log('\n' + '='.repeat(80));
+
+  if (tooNew.length > 0) {
+    console.log(`\n❌ FAILED: ${tooNew.length} package(s) are newer than 2 weeks:\n`);
+    tooNew.forEach(pkg => {
+      console.log(`  - ${pkg.name}@${pkg.version} (${pkg.age} days old, published ${pkg.published})`);
+    });
+    process.exit(1);
+  } else if (errors.length > 0) {
+    console.log(`\n⚠️  WARNING: Could not verify ${errors.length} package(s)`);
+    process.exit(0);
+  } else {
+    console.log('\n✓ SUCCESS: All packages are at least 2 weeks old');
+    process.exit(0);
+  }
+}
+
+checkPackageAge();

scripts/pin-old-versions.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# Pin npm packages to versions that are at least 2 weeks old
+# This script helps ensure compliance with package age requirements
+
+set -e
+
+echo "========================================="
+echo "Pin NPM Packages to Old Versions"
+echo "========================================="
+echo ""
+
+cd frontend
+
+echo "Step 1: Checking current package ages..."
+node ../scripts/check-package-age.js || {
+  echo ""
+  echo "Some packages are too new. Recommendations:"
+  echo "1. Manually downgrade packages in package.json to older versions"
+  echo "2. Run: npm install --package-lock-only to update lock file"
+  echo "3. Re-run this script to verify"
+  exit 1
+}
+
+echo ""
+echo "Step 2: Ensuring package-lock.json uses exact versions..."
+if [ -f "package-lock.json" ]; then
+  echo "✓ package-lock.json exists"
+else
+  echo "⚠ package-lock.json does not exist. Creating it..."
+  npm install --package-lock-only
+fi
+
+echo ""
+echo "========================================="
+echo "✓ All packages meet the 2-week age requirement"
+echo "========================================="
+echo ""
+echo "To install these packages:"
+echo "  npm ci  # Uses exact versions from package-lock.json"
+echo ""