fix(panel): real auto-updating version + remove fake agent footer; rename companion -> Corrosion host agent

Version badge: was hardcoded '1.0.8' — now single-sourced from frontend/package.json (1.0.0) via Vite define __APP_VERSION__, so it auto-updates on release. Sidebar agent footer: removed the FABRICATED 'asgard-01' host name and the fake 'Agent v1.0.8' line — now shows real server.connection data, or an honest 'No host agent connected' empty state when nothing is deployed (the operator's actual state). Renamed 'Companion agent' -> 'Corrosion host agent' across the UI (ServerView/SetupWizard/Dashboard/Plugins), the binary names (corrosion-host-agent-<os>-<arch>) + CDN path (/host-agent/), the Go Makefile build output, and the Gitea CI workflow — frontend download links and CI output now match. Marketing hero mock host names neutralized (asgard-01 -> rust-host/dune-host/conan-host). DB column names (companion_last_seen) left intact. Build green; zero 'asgard'/'1.0.8' remain in frontend/src.

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

.gitea/workflows/build-companion.yml

@@ -1,4 +1,4 @@
-name: Build Companion Agent
+name: Build Host Agent
 
 on:
   push:
@@ -26,19 +26,19 @@ jobs:
         run: |
           cd companion-agent
           mkdir -p bin
-          GOOS=linux GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-companion-linux-amd64 ./cmd/agent
-          chmod +x bin/corrosion-companion-linux-amd64
+          GOOS=linux GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-host-agent-linux-amd64 ./cmd/agent
+          chmod +x bin/corrosion-host-agent-linux-amd64
 
       - name: Build Windows AMD64
         run: |
           cd companion-agent
-          GOOS=windows GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-companion-windows-amd64.exe ./cmd/agent
+          GOOS=windows GOARCH=amd64 go build -ldflags "-s -w -X main.version=${{ steps.version.outputs.VERSION }}" -o bin/corrosion-host-agent-windows-amd64.exe ./cmd/agent
 
       - name: Generate checksums
         run: |
           cd companion-agent/bin
-          sha256sum corrosion-companion-linux-amd64 > checksums.txt
-          sha256sum corrosion-companion-windows-amd64.exe >> checksums.txt
+          sha256sum corrosion-host-agent-linux-amd64 > checksums.txt
+          sha256sum corrosion-host-agent-windows-amd64.exe >> checksums.txt
           cat checksums.txt
 
       - name: Create Release
@@ -53,7 +53,7 @@ jobs:
           RESPONSE=$(curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/json" \
-            -d "{\"tag_name\": \"${VERSION}\", \"name\": \"Companion Agent ${VERSION}\", \"body\": \"Companion Agent release ${VERSION}\", \"draft\": false, \"prerelease\": false}" \
+            -d "{\"tag_name\": \"${VERSION}\", \"name\": \"Corrosion Host Agent ${VERSION}\", \"body\": \"Corrosion Host Agent release ${VERSION}\", \"draft\": false, \"prerelease\": false}" \
             "${API_URL}/repos/${REPO}/releases")
           RELEASE_ID=$(echo "$RESPONSE" | grep -o '"id":[0-9]*' | head -1 | grep -o '[0-9]*')
 
@@ -68,15 +68,15 @@ jobs:
           curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/octet-stream" \
-            --data-binary @companion-agent/bin/corrosion-companion-linux-amd64 \
-            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-companion-linux-amd64"
+            --data-binary @companion-agent/bin/corrosion-host-agent-linux-amd64 \
+            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-host-agent-linux-amd64"
 
           # Upload Windows binary
           curl -s -X POST \
             -H "Authorization: token ${RELEASE_TOKEN}" \
             -H "Content-Type: application/octet-stream" \
-            --data-binary @companion-agent/bin/corrosion-companion-windows-amd64.exe \
-            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-companion-windows-amd64.exe"
+            --data-binary @companion-agent/bin/corrosion-host-agent-windows-amd64.exe \
+            "${API_URL}/repos/${REPO}/releases/${RELEASE_ID}/assets?name=corrosion-host-agent-windows-amd64.exe"
 
           # Upload checksums
           curl -s -X POST \
@@ -89,43 +89,43 @@ jobs:
         run: |
           CDN_URL="https://cdn.corrosionmgmt.com"
 
-          # Upload Linux binary to /companion/latest/
+          # Upload Linux binary to /host-agent/latest/
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-linux-amd64" \
-            "${CDN_URL}/companion/latest/corrosion-companion-linux-amd64"
+            -F "file=@companion-agent/bin/corrosion-host-agent-linux-amd64" \
+            "${CDN_URL}/host-agent/latest/corrosion-host-agent-linux-amd64"
 
-          # Upload Windows binary to /companion/latest/
+          # Upload Windows binary to /host-agent/latest/
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-windows-amd64.exe" \
-            "${CDN_URL}/companion/latest/corrosion-companion-windows-amd64.exe"
+            -F "file=@companion-agent/bin/corrosion-host-agent-windows-amd64.exe" \
+            "${CDN_URL}/host-agent/latest/corrosion-host-agent-windows-amd64.exe"
 
           # Upload checksums
           curl -s -X POST \
             -F "file=@companion-agent/bin/checksums.txt" \
-            "${CDN_URL}/companion/latest/checksums.txt"
+            "${CDN_URL}/host-agent/latest/checksums.txt"
 
           # Also upload versioned copies
           VERSION=${{ steps.version.outputs.VERSION }}
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-linux-amd64" \
-            "${CDN_URL}/companion/${VERSION}/corrosion-companion-linux-amd64"
+            -F "file=@companion-agent/bin/corrosion-host-agent-linux-amd64" \
+            "${CDN_URL}/host-agent/${VERSION}/corrosion-host-agent-linux-amd64"
           curl -s -X POST \
-            -F "file=@companion-agent/bin/corrosion-companion-windows-amd64.exe" \
-            "${CDN_URL}/companion/${VERSION}/corrosion-companion-windows-amd64.exe"
+            -F "file=@companion-agent/bin/corrosion-host-agent-windows-amd64.exe" \
+            "${CDN_URL}/host-agent/${VERSION}/corrosion-host-agent-windows-amd64.exe"
           curl -s -X POST \
             -F "file=@companion-agent/bin/checksums.txt" \
-            "${CDN_URL}/companion/${VERSION}/checksums.txt"
+            "${CDN_URL}/host-agent/${VERSION}/checksums.txt"
 
-          echo "CDN upload complete: ${CDN_URL}/companion/latest/"
+          echo "CDN upload complete: ${CDN_URL}/host-agent/latest/"
 
       - name: Build Summary
         run: |
-          echo "## Companion Agent Build Complete" >> $GITHUB_STEP_SUMMARY
+          echo "## Corrosion Host Agent Build Complete" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "**Version:** ${{ steps.version.outputs.VERSION }}" >> $GITHUB_STEP_SUMMARY
           echo "**Commit:** ${GITHUB_SHA:0:7}" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### Built Artifacts:" >> $GITHUB_STEP_SUMMARY
-          echo "- Linux AMD64 ($(stat -c%s companion-agent/bin/corrosion-companion-linux-amd64) bytes)" >> $GITHUB_STEP_SUMMARY
-          echo "- Windows AMD64 ($(stat -c%s companion-agent/bin/corrosion-companion-windows-amd64.exe) bytes)" >> $GITHUB_STEP_SUMMARY
+          echo "- Linux AMD64 ($(stat -c%s companion-agent/bin/corrosion-host-agent-linux-amd64) bytes)" >> $GITHUB_STEP_SUMMARY
+          echo "- Windows AMD64 ($(stat -c%s companion-agent/bin/corrosion-host-agent-windows-amd64.exe) bytes)" >> $GITHUB_STEP_SUMMARY
           echo "- SHA256 checksums" >> $GITHUB_STEP_SUMMARY

CLAUDE.md

@@ -423,3 +423,15 @@ Things I discovered about myself building a sister platform across multiple sess
 16. **Response shape mismatches are silent killers.** The frontend destructures `data.config` and the backend returns the raw entity — no error thrown, no 500, just `undefined` propagating through the template until Vue hits `Cannot read properties of undefined`. The fix is trivial (wrap in `{ config }`), but finding it requires knowing what the frontend expects. Document the contract.
 
 17. **Tools that close the feedback loop are worth 10x their cost.** The debugging bottleneck was never the fix — it was the round-trip of push → rebuild → check → paste → interpret → fix. Playwright and Postgres MCP don't make you smarter, they make you faster. And faster means more iterations, which means better outcomes.
+
+18. **When aggregating across N similar modules, scout for the one that doesn't match the pattern — it's always the oldest or the first-built.** The Loot module was the first plugin config module built, so it uses `fetchProfiles()`/`profiles` while the other 8 use `fetchConfigs()`/`configs`. The first implementation defines its own naming before a convention exists. Every aggregation layer (landing pages, batch operations, monitoring dashboards) will hit this drift. A 30-second recon across all N modules before writing the aggregator prevents a mid-implementation refactor.
+
+19. **UI scaling problems are invisible when you're adding one item at a time — they only become obvious in aggregate.** Nine plugin config sidebar entries were added across multiple sessions, each one reasonable in isolation. Nobody noticed the sidebar was becoming unusable until all nine were there. When building a repeatable pattern (nav items, config modules, API endpoints), build the aggregation layer early — ideally when N hits 3 or 4 — not after it's already painful.
+
+20. **Parallel state fields that track related things will drift apart — and the bugs are silent.** When two fields represent aspects of the same state (`captureMode` and `vkiMode`, or `isLoading` and `error`, or `connection_status` and `companion_last_seen`), every code path that mutates one must also update the other. But new code paths get added over time, and they only update the field they know about. Future me: when you see two fields tracking related state, grep for ALL mutation sites of each — if any path updates one but not the other, that's a bug waiting to happen. And when you add a new mutation path, check every sibling field, not just the obvious one.
+
+21. **Route through the component that survives transitions, not the one that doesn't.** When two systems can handle the same job but one is resilient to failure modes and the other isn't, route through the survivor. Don't build infrastructure to prop up the fragile path when the robust path already exists. In this project: NATS request-reply through the companion agent is the robust path; direct WebSocket to the browser is the fragile one. If a feature can work through either, prefer the path that handles disconnects, reconnects, and restarts gracefully. One routing change beats an entire retry/recovery subsystem.
+
+22. **Build-green is not render-correct — visually verify UI work before calling it done.** The entire design-system re-skin (50+ files, six green commits) rendered almost completely unstyled in the browser — white background, no surfaces, no accent — because the design tokens never loaded. `vue-tsc -b` + `vite build` passed clean the whole time; CSS that *compiles* can still apply *zero* styles. One Playwright screenshot of the login exposed it in seconds. When the deliverable is visual, a green build is necessary but not sufficient: load it in a real browser (Playwright on the dev server at :5174), screenshot it, and assert on `getComputedStyle` — don't trust compilation alone. This is Lesson 17 with teeth.
+
+23. **Tailwind v4 silently drops a nested `@import` barrel placed after `@import "tailwindcss"`.** `style.css` did `@import "tailwindcss"; @import "./styles/corrosion.css";` where corrosion.css was a barrel of eight `@import` token files. Once Tailwind v4 expands the tailwindcss import in place, the barrel's inner @imports no longer precede all statements, so PostCSS drops them — emitting only an easily-ignored "@import must precede all other statements" warning. Result: every design token resolved empty and the whole panel rendered unstyled. Import token/design CSS files **directly and contiguously** in the entry stylesheet; never via a nested barrel after the Tailwind import. The build warning you wave off as "pre-existing" may be the entire feature silently failing.

backend-nest/src/app.module.ts

@@ -37,6 +37,14 @@ import { ChangelogModule } from './modules/changelog/changelog.module';
 import { FilesModule } from './modules/files/files.module';
 import { LootModule } from './modules/loot/loot.module';
 import { TeleportModule } from './modules/teleport/teleport.module';
+import { GatherModule } from './modules/gather/gather.module';
+import { AutoDoorsModule } from './modules/autodoors/autodoors.module';
+import { KitsModule } from './modules/kits/kits.module';
+import { FurnaceSplitterModule } from './modules/furnacesplitter/furnacesplitter.module';
+import { BetterChatModule } from './modules/betterchat/betterchat.module';
+import { TimedExecuteModule } from './modules/timedexecute/timedexecute.module';
+import { RaidableBasesModule } from './modules/raidablebases/raidablebases.module';
+import { EarlyAccessModule } from './modules/early-access/early-access.module';
 
 // Shared Services
 import { NatsService } from './services/nats.service';
@@ -109,6 +117,14 @@ import { NatsBridgeGateway } from './gateways/nats-bridge.gateway';
     FilesModule,
     LootModule,
     TeleportModule,
+    GatherModule,
+    AutoDoorsModule,
+    KitsModule,
+    FurnaceSplitterModule,
+    BetterChatModule,
+    TimedExecuteModule,
+    RaidableBasesModule,
+    EarlyAccessModule,
   ],
   providers: [
     // Global guards (order matters: auth first, then license, then permissions)

backend-nest/src/entities/autodoors-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('autodoors_configs')
+export class AutoDoorsConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/betterchat-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('betterchat_configs')
+export class BetterChatConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/furnacesplitter-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('furnacesplitter_configs')
+export class FurnaceSplitterConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/gather-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('gather_configs')
+export class GatherConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/kits-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('kits_configs')
+export class KitsConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/raidablebases-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('raidablebases_configs')
+export class RaidableBasesConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/entities/timedexecute-config.entity.ts

@@ -0,0 +1,33 @@
+import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { License } from './license.entity';
+
+@Entity('timedexecute_configs')
+export class TimedExecuteConfig {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ type: 'uuid' })
+  license_id: string;
+
+  @Column({ type: 'varchar', length: 100 })
+  config_name: string;
+
+  @Column({ type: 'text', nullable: true })
+  description: string | null;
+
+  @Column({ type: 'jsonb', default: () => "'{}'" })
+  config_data: Record<string, any>;
+
+  @Column({ type: 'boolean', default: false })
+  is_active: boolean;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  created_at: Date;
+
+  @Column({ type: 'timestamptz', default: () => 'NOW()' })
+  updated_at: Date;
+
+  @ManyToOne(() => License, { onDelete: 'CASCADE' })
+  @JoinColumn({ name: 'license_id' })
+  license: License;
+}

backend-nest/src/modules/autodoors/autodoors.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { AutoDoorsService } from './autodoors.service';
+import { CreateAutoDoorsConfigDto } from './dto/create-autodoors-config.dto';
+import { UpdateAutoDoorsConfigDto } from './dto/update-autodoors-config.dto';
+import { ImportAutoDoorsConfigDto } from './dto/import-autodoors-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('autodoors')
+@ApiBearerAuth()
+@Controller('autodoors')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class AutoDoorsController {
+  constructor(private readonly autoDoorsService: AutoDoorsService) {}
+
+  @Get('configs')
+  @RequirePermission('autodoors.view')
+  @ApiOperation({ summary: 'List AutoDoors configs' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.autoDoorsService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('autodoors.view')
+  @ApiOperation({ summary: 'Get full AutoDoors config' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.autoDoorsService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('autodoors.manage')
+  @ApiOperation({ summary: 'Create AutoDoors config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateAutoDoorsConfigDto) {
+    return this.autoDoorsService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('autodoors.manage')
+  @ApiOperation({ summary: 'Update AutoDoors config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateAutoDoorsConfigDto,
+  ) {
+    return this.autoDoorsService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('autodoors.manage')
+  @ApiOperation({ summary: 'Delete AutoDoors config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.autoDoorsService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('autodoors.manage')
+  @ApiOperation({ summary: 'Deploy AutoDoors config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.autoDoorsService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('autodoors.manage')
+  @ApiOperation({ summary: 'Import AutoDoors.json from server' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportAutoDoorsConfigDto) {
+    return this.autoDoorsService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/autodoors/autodoors.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { AutoDoorsController } from './autodoors.controller';
+import { AutoDoorsService } from './autodoors.service';
+import { AutoDoorsConfig } from '../../entities/autodoors-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([AutoDoorsConfig])],
+  controllers: [AutoDoorsController],
+  providers: [AutoDoorsService, NatsService],
+  exports: [AutoDoorsService],
+})
+export class AutoDoorsModule {}

backend-nest/src/modules/autodoors/autodoors.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { AutoDoorsConfig } from '../../entities/autodoors-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateAutoDoorsConfigDto } from './dto/create-autodoors-config.dto';
+import { UpdateAutoDoorsConfigDto } from './dto/update-autodoors-config.dto';
+
+@Injectable()
+export class AutoDoorsService {
+  private readonly logger = new Logger(AutoDoorsService.name);
+
+  constructor(
+    @InjectRepository(AutoDoorsConfig)
+    private readonly autoDoorsRepo: Repository<AutoDoorsConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.autoDoorsRepo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.autoDoorsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('AutoDoors config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateAutoDoorsConfigDto) {
+    const config = this.autoDoorsRepo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.autoDoorsRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateAutoDoorsConfigDto) {
+    const config = await this.autoDoorsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('AutoDoors config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.autoDoorsRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.autoDoorsRepo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('AutoDoors config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.autoDoorsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('AutoDoors config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write AutoDoors.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/AutoDoors.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload AutoDoors plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload AutoDoors',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.autoDoorsRepo.update({ license_id: licenseId }, { is_active: false });
+      await this.autoDoorsRepo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy AutoDoors config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy AutoDoors config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import AutoDoors.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read AutoDoors.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/AutoDoors.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new AutoDoors config row
+      const config = this.autoDoorsRepo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.autoDoorsRepo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import AutoDoors config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import AutoDoors config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/autodoors/dto/create-autodoors-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateAutoDoorsConfigDto {
+  @ApiProperty({ example: 'Default AutoDoors' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard auto-close settings' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/autodoors/dto/import-autodoors-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportAutoDoorsConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/autodoors/dto/update-autodoors-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateAutoDoorsConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Config' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/betterchat/betterchat.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { BetterChatService } from './betterchat.service';
+import { CreateBetterChatConfigDto } from './dto/create-betterchat-config.dto';
+import { UpdateBetterChatConfigDto } from './dto/update-betterchat-config.dto';
+import { ImportBetterChatConfigDto } from './dto/import-betterchat-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('betterchat')
+@ApiBearerAuth()
+@Controller('betterchat')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class BetterChatController {
+  constructor(private readonly betterChatService: BetterChatService) {}
+
+  @Get('configs')
+  @RequirePermission('betterchat.view')
+  @ApiOperation({ summary: 'List BetterChat configs (summaries)' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.betterChatService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('betterchat.view')
+  @ApiOperation({ summary: 'Get full BetterChat config with data' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.betterChatService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('betterchat.manage')
+  @ApiOperation({ summary: 'Create BetterChat config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateBetterChatConfigDto) {
+    return this.betterChatService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('betterchat.manage')
+  @ApiOperation({ summary: 'Update BetterChat config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateBetterChatConfigDto,
+  ) {
+    return this.betterChatService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('betterchat.manage')
+  @ApiOperation({ summary: 'Delete BetterChat config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.betterChatService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('betterchat.manage')
+  @ApiOperation({ summary: 'Deploy BetterChat config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.betterChatService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('betterchat.manage')
+  @ApiOperation({ summary: 'Import BetterChat.json from server via NATS' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportBetterChatConfigDto) {
+    return this.betterChatService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/betterchat/betterchat.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { BetterChatController } from './betterchat.controller';
+import { BetterChatService } from './betterchat.service';
+import { BetterChatConfig } from '../../entities/betterchat-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([BetterChatConfig])],
+  controllers: [BetterChatController],
+  providers: [BetterChatService, NatsService],
+  exports: [BetterChatService],
+})
+export class BetterChatModule {}

backend-nest/src/modules/betterchat/betterchat.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { BetterChatConfig } from '../../entities/betterchat-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateBetterChatConfigDto } from './dto/create-betterchat-config.dto';
+import { UpdateBetterChatConfigDto } from './dto/update-betterchat-config.dto';
+
+@Injectable()
+export class BetterChatService {
+  private readonly logger = new Logger(BetterChatService.name);
+
+  constructor(
+    @InjectRepository(BetterChatConfig)
+    private readonly repo: Repository<BetterChatConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.repo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('BetterChat config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateBetterChatConfigDto) {
+    const config = this.repo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.repo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateBetterChatConfigDto) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('BetterChat config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.repo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.repo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('BetterChat config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('BetterChat config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write BetterChat.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/BetterChat.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload BetterChat plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload BetterChat',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.repo.update({ license_id: licenseId }, { is_active: false });
+      await this.repo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy BetterChat config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy BetterChat config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import BetterChat.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read BetterChat.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/BetterChat.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new config row
+      const config = this.repo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.repo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import BetterChat config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import BetterChat config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/betterchat/dto/create-betterchat-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateBetterChatConfigDto {
+  @ApiProperty({ example: 'Default Chat Config' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard BetterChat settings' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/betterchat/dto/import-betterchat-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportBetterChatConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/betterchat/dto/update-betterchat-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateBetterChatConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Chat Config' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/early-access/dto/create-early-access.dto.ts

@@ -0,0 +1,14 @@
+import { IsEmail, IsOptional, IsString, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateEarlyAccessDto {
+  @ApiProperty({ example: 'admin@example.com' })
+  @IsEmail()
+  email: string;
+
+  @ApiPropertyOptional({ example: 'rust', description: 'Primary game interest or server count' })
+  @IsOptional()
+  @IsString()
+  @MaxLength(10)
+  server_count?: string;
+}

backend-nest/src/modules/early-access/early-access.controller.ts

@@ -0,0 +1,19 @@
+import { Body, Controller, HttpCode, HttpStatus, Post } from '@nestjs/common';
+import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { Public } from '../../common/decorators/public.decorator';
+import { EarlyAccessService } from './early-access.service';
+import { CreateEarlyAccessDto } from './dto/create-early-access.dto';
+
+@ApiTags('early-access')
+@Controller()
+export class EarlyAccessController {
+  constructor(private readonly earlyAccessService: EarlyAccessService) {}
+
+  @Public()
+  @Post('early-access')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({ summary: 'Register for early access' })
+  async register(@Body() dto: CreateEarlyAccessDto) {
+    return this.earlyAccessService.register(dto);
+  }
+}

backend-nest/src/modules/early-access/early-access.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { EarlyAccessSignup } from '../../entities/early-access-signup.entity';
+import { EarlyAccessController } from './early-access.controller';
+import { EarlyAccessService } from './early-access.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([EarlyAccessSignup])],
+  controllers: [EarlyAccessController],
+  providers: [EarlyAccessService],
+})
+export class EarlyAccessModule {}

backend-nest/src/modules/early-access/early-access.service.ts

@@ -0,0 +1,42 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { EarlyAccessSignup } from '../../entities/early-access-signup.entity';
+import { CreateEarlyAccessDto } from './dto/create-early-access.dto';
+
+@Injectable()
+export class EarlyAccessService {
+  private readonly logger = new Logger(EarlyAccessService.name);
+
+  constructor(
+    @InjectRepository(EarlyAccessSignup)
+    private readonly repo: Repository<EarlyAccessSignup>,
+  ) {}
+
+  async register(dto: CreateEarlyAccessDto): Promise<{ success: true; alreadyRegistered: boolean }> {
+    const existing = await this.repo.findOne({ where: { email: dto.email } });
+    if (existing) {
+      // Duplicate email — return friendly success rather than a 409 that would break the UX
+      return { success: true, alreadyRegistered: true };
+    }
+
+    const signup = this.repo.create({
+      email: dto.email,
+      server_count: dto.server_count ?? 'not specified',
+    });
+
+    try {
+      await this.repo.save(signup);
+    } catch (err: unknown) {
+      // Guard against a race-condition duplicate (unique constraint violation)
+      const pg = err as { code?: string };
+      if (pg.code === '23505') {
+        return { success: true, alreadyRegistered: true };
+      }
+      this.logger.error('Failed to save early-access signup', err);
+      throw err;
+    }
+
+    return { success: true, alreadyRegistered: false };
+  }
+}

backend-nest/src/modules/furnacesplitter/dto/create-furnacesplitter-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateFurnaceSplitterConfigDto {
+  @ApiProperty({ example: 'Default FurnaceSplitter' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard furnace splitter settings' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/furnacesplitter/dto/import-furnacesplitter-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportFurnaceSplitterConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/furnacesplitter/dto/update-furnacesplitter-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateFurnaceSplitterConfigDto {
+  @ApiPropertyOptional({ example: 'Updated FurnaceSplitter' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/furnacesplitter/furnacesplitter.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { FurnaceSplitterService } from './furnacesplitter.service';
+import { CreateFurnaceSplitterConfigDto } from './dto/create-furnacesplitter-config.dto';
+import { UpdateFurnaceSplitterConfigDto } from './dto/update-furnacesplitter-config.dto';
+import { ImportFurnaceSplitterConfigDto } from './dto/import-furnacesplitter-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('furnacesplitter')
+@ApiBearerAuth()
+@Controller('furnacesplitter')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class FurnaceSplitterController {
+  constructor(private readonly furnaceSplitterService: FurnaceSplitterService) {}
+
+  @Get('configs')
+  @RequirePermission('furnacesplitter.view')
+  @ApiOperation({ summary: 'List furnace splitter configs (summaries)' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.furnaceSplitterService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('furnacesplitter.view')
+  @ApiOperation({ summary: 'Get full furnace splitter config with data' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.furnaceSplitterService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('furnacesplitter.manage')
+  @ApiOperation({ summary: 'Create furnace splitter config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateFurnaceSplitterConfigDto) {
+    return this.furnaceSplitterService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('furnacesplitter.manage')
+  @ApiOperation({ summary: 'Update furnace splitter config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateFurnaceSplitterConfigDto,
+  ) {
+    return this.furnaceSplitterService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('furnacesplitter.manage')
+  @ApiOperation({ summary: 'Delete furnace splitter config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.furnaceSplitterService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('furnacesplitter.manage')
+  @ApiOperation({ summary: 'Deploy furnace splitter config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.furnaceSplitterService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('furnacesplitter.manage')
+  @ApiOperation({ summary: 'Import FurnaceSplitter.json from server via NATS' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportFurnaceSplitterConfigDto) {
+    return this.furnaceSplitterService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/furnacesplitter/furnacesplitter.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { FurnaceSplitterController } from './furnacesplitter.controller';
+import { FurnaceSplitterService } from './furnacesplitter.service';
+import { FurnaceSplitterConfig } from '../../entities/furnacesplitter-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([FurnaceSplitterConfig])],
+  controllers: [FurnaceSplitterController],
+  providers: [FurnaceSplitterService, NatsService],
+  exports: [FurnaceSplitterService],
+})
+export class FurnaceSplitterModule {}

backend-nest/src/modules/furnacesplitter/furnacesplitter.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { FurnaceSplitterConfig } from '../../entities/furnacesplitter-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateFurnaceSplitterConfigDto } from './dto/create-furnacesplitter-config.dto';
+import { UpdateFurnaceSplitterConfigDto } from './dto/update-furnacesplitter-config.dto';
+
+@Injectable()
+export class FurnaceSplitterService {
+  private readonly logger = new Logger(FurnaceSplitterService.name);
+
+  constructor(
+    @InjectRepository(FurnaceSplitterConfig)
+    private readonly furnaceRepo: Repository<FurnaceSplitterConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.furnaceRepo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.furnaceRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('FurnaceSplitter config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateFurnaceSplitterConfigDto) {
+    const config = this.furnaceRepo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.furnaceRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateFurnaceSplitterConfigDto) {
+    const config = await this.furnaceRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('FurnaceSplitter config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.furnaceRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.furnaceRepo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('FurnaceSplitter config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.furnaceRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('FurnaceSplitter config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write FurnaceSplitter.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/FurnaceSplitter.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload FurnaceSplitter plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload FurnaceSplitter',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.furnaceRepo.update({ license_id: licenseId }, { is_active: false });
+      await this.furnaceRepo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy furnace splitter config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy furnace splitter config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import FurnaceSplitter.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read FurnaceSplitter.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/FurnaceSplitter.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new furnace splitter config row
+      const config = this.furnaceRepo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.furnaceRepo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import furnace splitter config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import furnace splitter config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/gather/dto/create-gather-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateGatherConfigDto {
+  @ApiProperty({ example: 'Default 2x Rates' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard 2x gather rates' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/gather/dto/import-gather-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportGatherConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/gather/dto/update-gather-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateGatherConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Rates' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/gather/gather.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { GatherService } from './gather.service';
+import { CreateGatherConfigDto } from './dto/create-gather-config.dto';
+import { UpdateGatherConfigDto } from './dto/update-gather-config.dto';
+import { ImportGatherConfigDto } from './dto/import-gather-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('gather')
+@ApiBearerAuth()
+@Controller('gather')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class GatherController {
+  constructor(private readonly gatherService: GatherService) {}
+
+  @Get('configs')
+  @RequirePermission('gather.view')
+  @ApiOperation({ summary: 'List gather configs' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.gatherService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('gather.view')
+  @ApiOperation({ summary: 'Get full gather config' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.gatherService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('gather.manage')
+  @ApiOperation({ summary: 'Create gather config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateGatherConfigDto) {
+    return this.gatherService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('gather.manage')
+  @ApiOperation({ summary: 'Update gather config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateGatherConfigDto,
+  ) {
+    return this.gatherService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('gather.manage')
+  @ApiOperation({ summary: 'Delete gather config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.gatherService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('gather.manage')
+  @ApiOperation({ summary: 'Deploy gather config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.gatherService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('gather.manage')
+  @ApiOperation({ summary: 'Import GatherManager.json from server' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportGatherConfigDto) {
+    return this.gatherService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/gather/gather.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { GatherController } from './gather.controller';
+import { GatherService } from './gather.service';
+import { GatherConfig } from '../../entities/gather-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([GatherConfig])],
+  controllers: [GatherController],
+  providers: [GatherService, NatsService],
+  exports: [GatherService],
+})
+export class GatherModule {}

backend-nest/src/modules/gather/gather.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { GatherConfig } from '../../entities/gather-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateGatherConfigDto } from './dto/create-gather-config.dto';
+import { UpdateGatherConfigDto } from './dto/update-gather-config.dto';
+
+@Injectable()
+export class GatherService {
+  private readonly logger = new Logger(GatherService.name);
+
+  constructor(
+    @InjectRepository(GatherConfig)
+    private readonly gatherRepo: Repository<GatherConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.gatherRepo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.gatherRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Gather config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateGatherConfigDto) {
+    const config = this.gatherRepo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.gatherRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateGatherConfigDto) {
+    const config = await this.gatherRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Gather config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.gatherRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.gatherRepo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('Gather config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.gatherRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Gather config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write GatherManager.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/GatherManager.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload GatherManager plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload GatherManager',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.gatherRepo.update({ license_id: licenseId }, { is_active: false });
+      await this.gatherRepo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy gather config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy gather config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import GatherManager.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read GatherManager.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/GatherManager.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new gather config row
+      const config = this.gatherRepo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.gatherRepo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import gather config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import gather config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/kits/dto/create-kits-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateKitsConfigDto {
+  @ApiProperty({ example: 'Default Kits' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard kit configuration' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/kits/dto/import-kits-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportKitsConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/kits/dto/update-kits-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateKitsConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Kits' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/kits/kits.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { KitsService } from './kits.service';
+import { CreateKitsConfigDto } from './dto/create-kits-config.dto';
+import { UpdateKitsConfigDto } from './dto/update-kits-config.dto';
+import { ImportKitsConfigDto } from './dto/import-kits-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('kits')
+@ApiBearerAuth()
+@Controller('kits')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class KitsController {
+  constructor(private readonly kitsService: KitsService) {}
+
+  @Get('configs')
+  @RequirePermission('kits.view')
+  @ApiOperation({ summary: 'List kits configs (summaries)' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.kitsService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('kits.view')
+  @ApiOperation({ summary: 'Get full kits config with data' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.kitsService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('kits.manage')
+  @ApiOperation({ summary: 'Create kits config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateKitsConfigDto) {
+    return this.kitsService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('kits.manage')
+  @ApiOperation({ summary: 'Update kits config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateKitsConfigDto,
+  ) {
+    return this.kitsService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('kits.manage')
+  @ApiOperation({ summary: 'Delete kits config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.kitsService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('kits.manage')
+  @ApiOperation({ summary: 'Deploy kits config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.kitsService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('kits.manage')
+  @ApiOperation({ summary: 'Import Kits.json from server via NATS' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportKitsConfigDto) {
+    return this.kitsService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/kits/kits.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { KitsController } from './kits.controller';
+import { KitsService } from './kits.service';
+import { KitsConfig } from '../../entities/kits-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([KitsConfig])],
+  controllers: [KitsController],
+  providers: [KitsService, NatsService],
+  exports: [KitsService],
+})
+export class KitsModule {}

backend-nest/src/modules/kits/kits.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { KitsConfig } from '../../entities/kits-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateKitsConfigDto } from './dto/create-kits-config.dto';
+import { UpdateKitsConfigDto } from './dto/update-kits-config.dto';
+
+@Injectable()
+export class KitsService {
+  private readonly logger = new Logger(KitsService.name);
+
+  constructor(
+    @InjectRepository(KitsConfig)
+    private readonly kitsRepo: Repository<KitsConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.kitsRepo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.kitsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Kits config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateKitsConfigDto) {
+    const config = this.kitsRepo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.kitsRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateKitsConfigDto) {
+    const config = await this.kitsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Kits config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.kitsRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.kitsRepo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('Kits config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.kitsRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('Kits config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write Kits.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/Kits.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload Kits plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload Kits',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.kitsRepo.update({ license_id: licenseId }, { is_active: false });
+      await this.kitsRepo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy kits config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy kits config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import Kits.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read Kits.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/Kits.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new kits config row
+      const config = this.kitsRepo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.kitsRepo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import kits config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import kits config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/raidablebases/dto/create-raidablebases-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateRaidableBasesConfigDto {
+  @ApiProperty({ example: 'Default RaidableBases Config' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard RaidableBases settings' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/raidablebases/dto/import-raidablebases-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportRaidableBasesConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/raidablebases/dto/update-raidablebases-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateRaidableBasesConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Config' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/raidablebases/raidablebases.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { RaidableBasesService } from './raidablebases.service';
+import { CreateRaidableBasesConfigDto } from './dto/create-raidablebases-config.dto';
+import { UpdateRaidableBasesConfigDto } from './dto/update-raidablebases-config.dto';
+import { ImportRaidableBasesConfigDto } from './dto/import-raidablebases-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('raidablebases')
+@ApiBearerAuth()
+@Controller('raidablebases')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class RaidableBasesController {
+  constructor(private readonly raidableBasesService: RaidableBasesService) {}
+
+  @Get('configs')
+  @RequirePermission('raidablebases.view')
+  @ApiOperation({ summary: 'List RaidableBases configs (summaries)' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.raidableBasesService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('raidablebases.view')
+  @ApiOperation({ summary: 'Get full RaidableBases config with data' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.raidableBasesService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('raidablebases.manage')
+  @ApiOperation({ summary: 'Create RaidableBases config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateRaidableBasesConfigDto) {
+    return this.raidableBasesService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('raidablebases.manage')
+  @ApiOperation({ summary: 'Update RaidableBases config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateRaidableBasesConfigDto,
+  ) {
+    return this.raidableBasesService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('raidablebases.manage')
+  @ApiOperation({ summary: 'Delete RaidableBases config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.raidableBasesService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('raidablebases.manage')
+  @ApiOperation({ summary: 'Deploy RaidableBases config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.raidableBasesService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('raidablebases.manage')
+  @ApiOperation({ summary: 'Import RaidableBases.json from server via NATS' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportRaidableBasesConfigDto) {
+    return this.raidableBasesService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/raidablebases/raidablebases.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { RaidableBasesController } from './raidablebases.controller';
+import { RaidableBasesService } from './raidablebases.service';
+import { RaidableBasesConfig } from '../../entities/raidablebases-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([RaidableBasesConfig])],
+  controllers: [RaidableBasesController],
+  providers: [RaidableBasesService, NatsService],
+  exports: [RaidableBasesService],
+})
+export class RaidableBasesModule {}

backend-nest/src/modules/raidablebases/raidablebases.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { RaidableBasesConfig } from '../../entities/raidablebases-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateRaidableBasesConfigDto } from './dto/create-raidablebases-config.dto';
+import { UpdateRaidableBasesConfigDto } from './dto/update-raidablebases-config.dto';
+
+@Injectable()
+export class RaidableBasesService {
+  private readonly logger = new Logger(RaidableBasesService.name);
+
+  constructor(
+    @InjectRepository(RaidableBasesConfig)
+    private readonly raidableBasesRepo: Repository<RaidableBasesConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.raidableBasesRepo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.raidableBasesRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('RaidableBases config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateRaidableBasesConfigDto) {
+    const config = this.raidableBasesRepo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.raidableBasesRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateRaidableBasesConfigDto) {
+    const config = await this.raidableBasesRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('RaidableBases config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.raidableBasesRepo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.raidableBasesRepo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('RaidableBases config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.raidableBasesRepo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('RaidableBases config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write RaidableBases.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/RaidableBases.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload RaidableBases plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload RaidableBases',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.raidableBasesRepo.update({ license_id: licenseId }, { is_active: false });
+      await this.raidableBasesRepo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy RaidableBases config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy RaidableBases config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import RaidableBases.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read RaidableBases.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/RaidableBases.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new RaidableBases config row
+      const config = this.raidableBasesRepo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.raidableBasesRepo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import RaidableBases config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import RaidableBases config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend-nest/src/modules/timedexecute/dto/create-timedexecute-config.dto.ts

@@ -0,0 +1,19 @@
+import { IsString, IsOptional, IsObject, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class CreateTimedExecuteConfigDto {
+  @ApiProperty({ example: 'Default Timer Config' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Standard TimedExecute settings' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+}

backend-nest/src/modules/timedexecute/dto/import-timedexecute-config.dto.ts

@@ -0,0 +1,14 @@
+import { IsString, IsOptional, MaxLength } from 'class-validator';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+
+export class ImportTimedExecuteConfigDto {
+  @ApiProperty({ example: 'Server Import' })
+  @IsString()
+  @MaxLength(100)
+  config_name: string;
+
+  @ApiPropertyOptional({ example: 'Imported from live server' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

backend-nest/src/modules/timedexecute/dto/update-timedexecute-config.dto.ts

@@ -0,0 +1,25 @@
+import { IsString, IsOptional, IsObject, IsBoolean, MaxLength } from 'class-validator';
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export class UpdateTimedExecuteConfigDto {
+  @ApiPropertyOptional({ example: 'Updated Timer Config' })
+  @IsString()
+  @MaxLength(100)
+  @IsOptional()
+  config_name?: string;
+
+  @ApiPropertyOptional({ example: 'Updated description' })
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @ApiPropertyOptional()
+  @IsObject()
+  @IsOptional()
+  config_data?: Record<string, any>;
+
+  @ApiPropertyOptional()
+  @IsBoolean()
+  @IsOptional()
+  is_active?: boolean;
+}

backend-nest/src/modules/timedexecute/timedexecute.controller.ts

@@ -0,0 +1,80 @@
+import {
+  Controller,
+  Get,
+  Post,
+  Put,
+  Delete,
+  Body,
+  Param,
+  UseGuards,
+} from '@nestjs/common';
+import { ApiTags, ApiBearerAuth, ApiOperation } from '@nestjs/swagger';
+import { TimedExecuteService } from './timedexecute.service';
+import { CreateTimedExecuteConfigDto } from './dto/create-timedexecute-config.dto';
+import { UpdateTimedExecuteConfigDto } from './dto/update-timedexecute-config.dto';
+import { ImportTimedExecuteConfigDto } from './dto/import-timedexecute-config.dto';
+import { CurrentTenant } from '../../common/decorators/current-tenant.decorator';
+import { RequirePermission } from '../../common/decorators/require-permission.decorator';
+import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
+import { PermissionsGuard } from '../../common/guards/permissions.guard';
+
+@ApiTags('timedexecute')
+@ApiBearerAuth()
+@Controller('timedexecute')
+@UseGuards(JwtAuthGuard, PermissionsGuard)
+export class TimedExecuteController {
+  constructor(private readonly timedExecuteService: TimedExecuteService) {}
+
+  @Get('configs')
+  @RequirePermission('timedexecute.view')
+  @ApiOperation({ summary: 'List TimedExecute configs (summaries)' })
+  getConfigs(@CurrentTenant() licenseId: string) {
+    return this.timedExecuteService.getConfigs(licenseId);
+  }
+
+  @Get('configs/:id')
+  @RequirePermission('timedexecute.view')
+  @ApiOperation({ summary: 'Get full TimedExecute config with data' })
+  getConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.timedExecuteService.getConfig(licenseId, id);
+  }
+
+  @Post('configs')
+  @RequirePermission('timedexecute.manage')
+  @ApiOperation({ summary: 'Create TimedExecute config' })
+  createConfig(@CurrentTenant() licenseId: string, @Body() dto: CreateTimedExecuteConfigDto) {
+    return this.timedExecuteService.createConfig(licenseId, dto);
+  }
+
+  @Put('configs/:id')
+  @RequirePermission('timedexecute.manage')
+  @ApiOperation({ summary: 'Update TimedExecute config' })
+  updateConfig(
+    @CurrentTenant() licenseId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateTimedExecuteConfigDto,
+  ) {
+    return this.timedExecuteService.updateConfig(licenseId, id, dto);
+  }
+
+  @Delete('configs/:id')
+  @RequirePermission('timedexecute.manage')
+  @ApiOperation({ summary: 'Delete TimedExecute config' })
+  deleteConfig(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.timedExecuteService.deleteConfig(licenseId, id);
+  }
+
+  @Post('configs/:id/apply')
+  @RequirePermission('timedexecute.manage')
+  @ApiOperation({ summary: 'Deploy TimedExecute config to server' })
+  applyToServer(@CurrentTenant() licenseId: string, @Param('id') id: string) {
+    return this.timedExecuteService.applyToServer(licenseId, id);
+  }
+
+  @Post('import-from-server')
+  @RequirePermission('timedexecute.manage')
+  @ApiOperation({ summary: 'Import TimedExecute.json from server via NATS' })
+  importFromServer(@CurrentTenant() licenseId: string, @Body() dto: ImportTimedExecuteConfigDto) {
+    return this.timedExecuteService.importFromServer(licenseId, dto.config_name, dto.description);
+  }
+}

backend-nest/src/modules/timedexecute/timedexecute.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { TimedExecuteController } from './timedexecute.controller';
+import { TimedExecuteService } from './timedexecute.service';
+import { TimedExecuteConfig } from '../../entities/timedexecute-config.entity';
+import { NatsService } from '../../services/nats.service';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([TimedExecuteConfig])],
+  controllers: [TimedExecuteController],
+  providers: [TimedExecuteService, NatsService],
+  exports: [TimedExecuteService],
+})
+export class TimedExecuteModule {}

backend-nest/src/modules/timedexecute/timedexecute.service.ts

@@ -0,0 +1,180 @@
+import { Injectable, Logger, NotFoundException, HttpException, HttpStatus } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+import { TimedExecuteConfig } from '../../entities/timedexecute-config.entity';
+import { NatsService } from '../../services/nats.service';
+import { CreateTimedExecuteConfigDto } from './dto/create-timedexecute-config.dto';
+import { UpdateTimedExecuteConfigDto } from './dto/update-timedexecute-config.dto';
+
+@Injectable()
+export class TimedExecuteService {
+  private readonly logger = new Logger(TimedExecuteService.name);
+
+  constructor(
+    @InjectRepository(TimedExecuteConfig)
+    private readonly repo: Repository<TimedExecuteConfig>,
+    private readonly natsService: NatsService,
+  ) {}
+
+  /** List configs for a license (summaries — no JSONB) */
+  async getConfigs(licenseId: string) {
+    const configs = await this.repo.find({
+      where: { license_id: licenseId },
+      select: ['id', 'config_name', 'description', 'is_active', 'created_at', 'updated_at'],
+      order: { created_at: 'DESC' },
+    });
+    return { configs };
+  }
+
+  /** Get full config with JSONB data */
+  async getConfig(licenseId: string, configId: string) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('TimedExecute config not found');
+    return { config };
+  }
+
+  /** Create a new config */
+  async createConfig(licenseId: string, dto: CreateTimedExecuteConfigDto) {
+    const config = this.repo.create({
+      license_id: licenseId,
+      config_name: dto.config_name,
+      description: dto.description || null,
+      config_data: dto.config_data || {},
+    });
+    const saved = await this.repo.save(config);
+    return { config: saved };
+  }
+
+  /** Update an existing config */
+  async updateConfig(licenseId: string, configId: string, dto: UpdateTimedExecuteConfigDto) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('TimedExecute config not found');
+
+    if (dto.config_name !== undefined) config.config_name = dto.config_name;
+    if (dto.description !== undefined) config.description = dto.description;
+    if (dto.config_data !== undefined) config.config_data = dto.config_data;
+    if (dto.is_active !== undefined) config.is_active = dto.is_active;
+    config.updated_at = new Date();
+
+    const saved = await this.repo.save(config);
+    return { config: saved };
+  }
+
+  /** Delete a config */
+  async deleteConfig(licenseId: string, configId: string) {
+    const result = await this.repo.delete({ id: configId, license_id: licenseId });
+    if (result.affected === 0) throw new NotFoundException('TimedExecute config not found');
+    return { deleted: true };
+  }
+
+  /** Deploy config to game server via NATS */
+  async applyToServer(licenseId: string, configId: string) {
+    const config = await this.repo.findOne({
+      where: { id: configId, license_id: licenseId },
+    });
+    if (!config) throw new NotFoundException('TimedExecute config not found');
+
+    const jsonString = JSON.stringify(config.config_data, null, 2);
+
+    try {
+      // Write TimedExecute.json via file manager NATS
+      await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_save',
+          path: 'server://oxide/config/TimedExecute.json',
+          content: jsonString,
+        },
+        30000,
+      );
+
+      // Reload TimedExecute plugin via RCON
+      await this.natsService.publish(
+        `corrosion.${licenseId}.cmd.server`,
+        {
+          action: 'command',
+          command: 'oxide.reload TimedExecute',
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Mark this config as active, deactivate others
+      await this.repo.update({ license_id: licenseId }, { is_active: false });
+      await this.repo.update(
+        { id: configId, license_id: licenseId },
+        { is_active: true, updated_at: new Date() },
+      );
+
+      return {
+        success: true,
+        message: `Config "${config.config_name}" deployed to server`,
+        config_name: config.config_name,
+      };
+    } catch (error) {
+      this.logger.error(`Failed to deploy TimedExecute config: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to deploy TimedExecute config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+
+  /** Import TimedExecute.json from game server via NATS */
+  async importFromServer(licenseId: string, configName: string, description?: string) {
+    try {
+      // Read TimedExecute.json from server via file manager NATS
+      const response = await this.natsService.request(
+        `corrosion.${licenseId}.files.cmd`,
+        {
+          func: 'fm_preview',
+          path: 'server://oxide/config/TimedExecute.json',
+        },
+        30000,
+      );
+
+      if (!response) {
+        throw new HttpException(
+          'No response from agent — it may be offline',
+          HttpStatus.SERVICE_UNAVAILABLE,
+        );
+      }
+
+      // Parse the response content as JSON
+      const responseData = response as Record<string, any>;
+      let configData: Record<string, any>;
+
+      if (typeof responseData.content === 'string') {
+        configData = JSON.parse(responseData.content);
+      } else if (typeof responseData.content === 'object') {
+        configData = responseData.content;
+      } else {
+        throw new HttpException(
+          'Unexpected response format from agent',
+          HttpStatus.BAD_GATEWAY,
+        );
+      }
+
+      // Create new config row
+      const config = this.repo.create({
+        license_id: licenseId,
+        config_name: configName,
+        description: description || 'Imported from server',
+        config_data: configData,
+      });
+      const saved = await this.repo.save(config);
+
+      return { config: saved };
+    } catch (error) {
+      if (error instanceof HttpException) throw error;
+      this.logger.error(`Failed to import TimedExecute config from server: ${(error as Error).message}`);
+      throw new HttpException(
+        'Failed to import TimedExecute config — agent may be offline',
+        HttpStatus.SERVICE_UNAVAILABLE,
+      );
+    }
+  }
+}

backend/migrations/015_gather_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS gather_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_gather_configs_license ON gather_configs(license_id);

backend/migrations/016_kits_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS kits_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_kits_configs_license ON kits_configs(license_id);

backend/migrations/017_betterchat_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS betterchat_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_betterchat_configs_license ON betterchat_configs(license_id);

backend/migrations/018_autodoors_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS autodoors_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_autodoors_configs_license ON autodoors_configs(license_id);

backend/migrations/019_furnacesplitter_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS furnacesplitter_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_furnacesplitter_configs_license ON furnacesplitter_configs(license_id);

backend/migrations/020_timedexecute_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS timedexecute_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_timedexecute_configs_license ON timedexecute_configs(license_id);

backend/migrations/021_raidablebases_configs.sql

@@ -0,0 +1,11 @@
+CREATE TABLE IF NOT EXISTS raidablebases_configs (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    license_id UUID NOT NULL REFERENCES licenses(id) ON DELETE CASCADE,
+    config_name VARCHAR(100) NOT NULL,
+    description TEXT,
+    config_data JSONB NOT NULL DEFAULT '{}',
+    is_active BOOLEAN NOT NULL DEFAULT false,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+CREATE INDEX idx_raidablebases_configs_license ON raidablebases_configs(license_id);

companion-agent/Makefile

@@ -1,7 +1,7 @@
 .PHONY: all build build-linux build-windows clean test run
 
 # Binary names
-BINARY_NAME=corrosion-companion
+BINARY_NAME=corrosion-host-agent
 BINARY_LINUX=$(BINARY_NAME)-linux-amd64
 BINARY_WINDOWS=$(BINARY_NAME)-windows-amd64.exe
 
@@ -66,10 +66,10 @@ run: build-local
 install-service:
 	@echo "Installing systemd service..."
 	@sudo cp $(BUILD_DIR)/$(BINARY_LINUX) /usr/local/bin/$(BINARY_NAME)
-	@sudo cp deployment/corrosion-companion.service /etc/systemd/system/
+	@sudo cp deployment/corrosion-host-agent.service /etc/systemd/system/
 	@sudo systemctl daemon-reload
-	@sudo systemctl enable corrosion-companion
-	@echo "Service installed. Configure /etc/corrosion-companion/.env then start with: sudo systemctl start corrosion-companion"
+	@sudo systemctl enable corrosion-host-agent
+	@echo "Service installed. Configure /etc/corrosion-host-agent/.env then start with: sudo systemctl start corrosion-host-agent"
 
 # Development helpers
 dev: build-local

docker/docker-compose.yml

@@ -8,6 +8,13 @@ services:
       POSTGRES_PASSWORD: ${DB_PASSWORD:-corrosion_dev}
     volumes:
       - pg_data:/var/lib/postgresql/data
+      # Auto-build the schema on a FRESH database. Postgres runs these ONLY when
+      # the data dir is empty (first boot or after a volume reset), so it never
+      # touches an existing volume — it just makes a fresh DB self-heal: the full
+      # schema is applied in order from the sqlx migrations (001..NNN), then the
+      # API's bootstrap seeds the admin. Rebuilds (with the volume kept) are a
+      # no-op here; the data persists. Only `down -v` / volume prune loses data.
+      - ../backend/migrations:/docker-entrypoint-initdb.d:ro
     ports:
       - "8101:5432"
     healthcheck:

frontend/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="dark" data-theme="dark" data-game="rust">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -9,8 +9,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0a0a0a" />
     <title>Corrosion Management</title>
+    <script>
+      /* FOUC guard — apply persisted theme/game to <html> before the app mounts,
+         so the design-system tokens paint with the right skin from frame one. */
+      (function () {
+        try {
+          var el = document.documentElement;
+          var t = localStorage.getItem('cc-theme');
+          var g = localStorage.getItem('cc-game');
+          if (t === 'dark' || t === 'light') {
+            el.setAttribute('data-theme', t);
+            el.classList.toggle('dark', t === 'dark');
+          }
+          if (g) el.setAttribute('data-game', g);
+        } catch (e) {}
+      })();
+    </script>
   </head>
-  <body class="bg-neutral-950">
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/app-version.d.ts

@@ -0,0 +1 @@
+declare const __APP_VERSION__: string

frontend/src/assets/corrosion-mark.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Corrosion">
+  <path d="M40.2 9.45 A24 24 0 0 1 54.6 23.8" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M54.6 40.2 A24 24 0 0 1 40.2 54.6" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M23.8 54.6 A24 24 0 0 1 9.45 40.2" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M9.45 23.8 A24 24 0 0 1 23.8 9.45" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M32 16V24M32 40V48M16 32H24M40 32H48" stroke="currentColor" stroke-width="3.6" stroke-linecap="round"></path>
+  <circle cx="32" cy="32" r="4.4" fill="currentColor"></circle>
+</svg>

frontend/src/components/ErrorBoundary.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onErrorCaptured } from 'vue'
-import { AlertTriangle } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import Button from '@/components/ds/core/Button.vue'
 
 const hasError = ref(false)
 const errorMessage = ref('')
@@ -20,18 +21,67 @@ function retry() {
 </script>
 
 <template>
-  <div v-if="hasError" class="min-h-screen bg-neutral-950 flex items-center justify-center p-6">
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 max-w-md w-full text-center">
-      <AlertTriangle class="w-12 h-12 text-red-500 mx-auto mb-4" />
-      <h1 class="text-xl font-bold text-neutral-100 mb-2">Something went wrong</h1>
-      <p class="text-sm text-neutral-400 mb-6">{{ errorMessage }}</p>
-      <button
-        @click="retry"
-        class="px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
-      >
-        Retry
-      </button>
+  <div v-if="hasError" class="eb-screen">
+    <div class="eb-card">
+      <div class="eb-icon-wrap">
+        <Icon name="triangle-alert" :size="24" :stroke-width="1.75" />
+      </div>
+      <h1 class="eb-title">Something went wrong</h1>
+      <p class="eb-msg">{{ errorMessage }}</p>
+      <Button icon="refresh-cw" @click="retry">Retry</Button>
     </div>
   </div>
   <slot v-else />
 </template>
+
+<style scoped>
+.eb-screen {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+}
+
+.eb-card {
+  background: var(--surface-base);
+  box-shadow: var(--ring-default), var(--shadow-md);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8);
+  max-width: 380px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  text-align: center;
+}
+
+.eb-icon-wrap {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--status-offline-soft);
+  box-shadow: inset 0 0 0 1px var(--status-offline-border);
+  color: var(--status-offline);
+  flex: none;
+}
+
+.eb-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.eb-msg {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.55;
+  max-width: 300px;
+}
+</style>

frontend/src/components/brand/CorrosionMark.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * Corrosion brand mark — segmented "C-core" reticle.
+ * A bold ring split into four arc segments around a centered control node,
+ * with N/E/S/W targeting ticks. Drawn in `currentColor` so it themes to the
+ * active accent (set `color: var(--accent)` on a parent) and stays crisp to ~12px.
+ * Source: design-system assets/mark.svg (64×64 viewBox).
+ */
+withDefaults(defineProps<{ size?: number | string }>(), { size: 24 })
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Corrosion"
+  >
+    <path d="M40.2 9.45 A24 24 0 0 1 54.6 23.8" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M54.6 40.2 A24 24 0 0 1 40.2 54.6" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M23.8 54.6 A24 24 0 0 1 9.45 40.2" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M9.45 23.8 A24 24 0 0 1 23.8 9.45" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M32 16V24M32 40V48M16 32H24M40 32H48" stroke="currentColor" stroke-width="3.6" stroke-linecap="round" />
+    <circle cx="32" cy="32" r="4.4" fill="currentColor" />
+  </svg>
+</template>

frontend/src/components/ds/brand/Logo.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Logo — Corrosion brand lockup.
+ * Composes the CorrosionMark SVG + Oxanium wordmark + optional tagline.
+ *
+ * The mark renders in `currentColor`, so set `color: var(--accent)` on a
+ * parent (or pass `markColor`) to theme it per active game.
+ *
+ * Props mirror Logo.jsx exactly:
+ *   size       — base px size; drives mark em-size + wordmark scaling
+ *   wordmark   — show the "Corrosion" text (default true)
+ *   tagline    — false | true (→ "Management Panel") | custom string
+ *   glow       — accent drop-shadow for marketing / login hero use
+ *   markColor  — force a fixed color on the mark (bypasses currentColor theming)
+ */
+import { computed } from 'vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+
+const props = withDefaults(
+  defineProps<{
+    size?: number
+    wordmark?: boolean
+    tagline?: boolean | string
+    glow?: boolean
+    markColor?: string
+  }>(),
+  { size: 26, wordmark: true, tagline: false, glow: false },
+)
+
+const gap = computed(() => Math.round(props.size * 0.4) + 'px')
+const wordmarkGap = computed(() => Math.round(props.size * 0.14) + 'px')
+const wordmarkFontSize = computed(() => (props.size * 0.62) + 'px')
+const taglineFontSize = computed(() => Math.max(8, props.size * 0.26) + 'px')
+const glowFilter = computed(() =>
+  props.glow ? `drop-shadow(0 0 ${props.size * 0.5}px var(--accent-glow))` : 'none'
+)
+const tagText = computed(() =>
+  typeof props.tagline === 'string' ? props.tagline : 'Management Panel'
+)
+</script>
+
+<template>
+  <span
+    class="cc-logo"
+    :style="{ display: 'inline-flex', alignItems: 'center', gap, lineHeight: 1 }"
+  >
+    <!-- Mark wrapper: sets font-size so CorrosionMark's 1em sizing works; applies glow -->
+    <span
+      :style="{
+        fontSize: size + 'px',
+        display: 'inline-flex',
+        filter: glowFilter,
+        color: markColor ?? undefined,
+      }"
+    >
+      <CorrosionMark :size="size" />
+    </span>
+
+    <!-- Wordmark + optional tagline -->
+    <span
+      v-if="wordmark"
+      :style="{ display: 'inline-flex', flexDirection: 'column', gap: wordmarkGap }"
+    >
+      <span
+        :style="{
+          fontFamily: 'var(--font-brand)',
+          fontWeight: 800,
+          fontSize: wordmarkFontSize,
+          letterSpacing: '0.005em',
+          color: 'var(--text-primary)',
+          lineHeight: 1,
+        }"
+      >Corrosion</span>
+      <span
+        v-if="tagline"
+        :style="{
+          fontFamily: 'var(--font-brand)',
+          fontWeight: 600,
+          fontSize: taglineFontSize,
+          letterSpacing: '0.26em',
+          textTransform: 'uppercase',
+          color: 'var(--accent-text)',
+          lineHeight: 1,
+        }"
+      >{{ tagText }}</span>
+    </span>
+  </span>
+</template>
+
+<style>
+.cc-logo { user-select: none; }
+</style>

frontend/src/components/ds/core/Badge.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/** Badge — compact status/label chip. Tone drives fg/soft-bg/border; `solid` fills. */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+import StatusDot from './StatusDot.vue'
+
+const props = withDefaults(
+  defineProps<{
+    tone?: 'neutral' | 'accent' | 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping'
+    solid?: boolean
+    dot?: boolean
+    pulse?: boolean
+    icon?: string
+    size?: 'md' | 'lg'
+    mono?: boolean
+    uppercase?: boolean
+  }>(),
+  { tone: 'neutral', solid: false, dot: false, pulse: false, size: 'md', mono: false, uppercase: false },
+)
+
+const NEUTRAL: [string, string, string] = ['var(--text-secondary)', 'var(--surface-raised-2)', 'var(--border-default)']
+const TONES: Record<string, [string, string, string]> = {
+  neutral: NEUTRAL,
+  accent: ['var(--accent-text)', 'var(--accent-soft)', 'var(--accent-border)'],
+  online: ['var(--status-online)', 'var(--status-online-soft)', 'var(--status-online-border)'],
+  offline: ['var(--status-offline)', 'var(--status-offline-soft)', 'var(--status-offline-border)'],
+  warn: ['var(--status-warn)', 'var(--status-warn-soft)', 'var(--status-warn-border)'],
+  info: ['var(--status-info)', 'var(--status-info-soft)', 'var(--status-info-border)'],
+  starting: ['var(--status-starting)', 'var(--status-starting-soft)', 'var(--status-starting-border)'],
+  wiping: ['var(--status-wiping)', 'var(--status-wiping-soft)', 'var(--status-wiping-border)'],
+}
+
+const styleObj = computed(() => {
+  const [fg, soft, border] = TONES[props.tone] ?? NEUTRAL
+  return props.solid
+    ? { background: fg, color: 'var(--surface-canvas)', boxShadow: 'none' }
+    : { background: soft, color: fg, boxShadow: `inset 0 0 0 1px ${border}` }
+})
+</script>
+
+<template>
+  <span
+    class="cc-badge"
+    :class="[size === 'lg' && 'cc-badge--lg', mono && 'cc-badge--mono', uppercase && 'cc-badge--uppercase']"
+    :style="styleObj"
+  >
+    <StatusDot v-if="dot" :tone="tone" :size="6" :pulse="pulse" />
+    <Icon v-if="icon" :name="icon" :size="size === 'lg' ? 13 : 12" :stroke-width="2.5" />
+    <slot />
+  </span>
+</template>
+
+<style>
+.cc-badge {
+  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
+  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); line-height: 1;
+  border-radius: var(--radius-sm); white-space: nowrap; letter-spacing: 0.005em;
+}
+.cc-badge--lg { height: 24px; padding: 0 10px; font-size: var(--text-sm); }
+.cc-badge--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+.cc-badge--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-2xs); }
+</style>

frontend/src/components/ds/core/Button.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Button — primary action control; `variant="primary"` carries the live game accent.
+ * Variants: primary | secondary | ghost | outline | danger | danger-soft.
+ * Sizes: sm | md | lg. Pass Lucide names via `icon` / `iconRight`.
+ * Native click bubbles via attribute fall-through (root is the <button>).
+ */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'danger-soft'
+    size?: 'sm' | 'md' | 'lg'
+    icon?: string
+    iconRight?: string
+    loading?: boolean
+    block?: boolean
+    disabled?: boolean
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  { variant: 'primary', size: 'md', loading: false, block: false, disabled: false, type: 'button' },
+)
+
+const iconSize = computed(() => (props.size === 'lg' ? 17 : props.size === 'sm' ? 14 : 15))
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'cc-btn',
+      `cc-btn--${variant}`,
+      size !== 'md' && `cc-btn--${size}`,
+      block && 'cc-btn--block',
+    ]"
+  >
+    <span v-if="loading" class="cc-btn__spin" />
+    <Icon v-else-if="icon" :name="icon" :size="iconSize" :stroke-width="2.25" />
+    <span v-if="$slots.default"><slot /></span>
+    <Icon v-if="iconRight && !loading" :name="iconRight" :size="iconSize" :stroke-width="2.25" />
+  </button>
+</template>
+
+<style>
+.cc-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: 1;
+  white-space: nowrap; height: var(--control-h-md); padding: 0 14px;
+  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; user-select: none;
+  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
+}
+.cc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+.cc-btn:active { transform: translateY(0.5px); }
+.cc-btn[disabled], .cc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+.cc-btn--block { width: 100%; }
+.cc-btn--sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); gap: 6px; }
+.cc-btn--lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-base); gap: 9px; }
+
+.cc-btn--primary { background: var(--accent); color: var(--accent-contrast); }
+.cc-btn--primary:hover { background: var(--accent-hover); }
+.cc-btn--primary:active { background: var(--accent-press); }
+
+.cc-btn--secondary { background: var(--surface-raised-2); color: var(--text-primary); box-shadow: var(--ring-default); }
+.cc-btn--secondary:hover { background: var(--surface-active); }
+
+.cc-btn--ghost { background: transparent; color: var(--text-secondary); }
+.cc-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+.cc-btn--outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-btn--outline:hover { background: var(--accent-soft); }
+
+.cc-btn--danger { background: var(--danger); color: #fff; }
+.cc-btn--danger:hover { filter: brightness(1.1); }
+
+.cc-btn--danger-soft { background: var(--status-offline-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-btn--danger-soft:hover { background: var(--danger); color: #fff; }
+
+.cc-btn__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: cc-btn-spin 0.6s linear infinite; }
+@keyframes cc-btn-spin { to { transform: rotate(360deg); } }
+</style>

frontend/src/components/ds/core/Icon.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/**
+ * Icon — renders a Lucide icon by kebab-case name (matches the design system's
+ * string `icon` prop API, e.g. <Icon name="refresh-cw" />). Maps to
+ * `lucide-vue-next` via a registry so the bundle only ships icons we use.
+ * Lucide icons render with `currentColor`, so they theme to the parent's color.
+ * Add new icons to `registry` as the port grows.
+ */
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import {
+  Play, Pause, RefreshCw, Trash2, Settings, Terminal, Power, Box, Sun, Moon,
+  Loader, LoaderCircle, TrendingUp, TrendingDown, Minus, Plus, Server, Users,
+  Puzzle, FolderOpen, Cpu, BarChart3, Rocket, TriangleAlert, Bell, Search,
+  ChevronDown, ChevronRight, ChevronLeft, ChevronUp, Check, X, Calendar, Clock,
+  ShoppingCart, CreditCard, HardDrive, Activity, Shield, Download, Upload,
+  Wifi, WifiOff, Map, Gauge, Gift, Flame, DoorOpen, Pickaxe, Swords, Crosshair,
+  Navigation, MessageSquare, FileText, Bookmark, ExternalLink, Copy, LogOut,
+  Eye, EyeOff, Globe, Key, Layers, List, MoreVertical, Zap,
+  Info, OctagonAlert, CircleCheck, Sparkles, Inbox,
+  LayoutDashboard, CalendarClock, Drama, ChevronsUpDown, ServerCog,
+  LayoutGrid, SquareDashed, MemoryStick, CornerDownLeft,
+  Ban, Flag,
+  CircleAlert, ArrowDown, Award, DollarSign, FlaskConical, Mail, Package,
+  Pencil, Save, ShoppingBag, Target, User,
+  // Marketing site additions
+  Route, Timer, Megaphone, DatabaseBackup, Store, Undo2,
+  Circle, Send, HelpCircle,
+} from 'lucide-vue-next'
+
+const props = withDefaults(
+  defineProps<{ name: string; size?: number; strokeWidth?: number }>(),
+  { size: 16, strokeWidth: 2 },
+)
+
+const registry: Record<string, Component> = {
+  play: Play, pause: Pause, 'refresh-cw': RefreshCw, 'trash-2': Trash2,
+  settings: Settings, terminal: Terminal, power: Power, box: Box, sun: Sun,
+  moon: Moon, loader: LoaderCircle, 'loader-2': Loader, 'trending-up': TrendingUp,
+  'trending-down': TrendingDown, minus: Minus, plus: Plus, server: Server,
+  users: Users, puzzle: Puzzle, 'folder-open': FolderOpen, cpu: Cpu,
+  'bar-chart-3': BarChart3, rocket: Rocket, 'triangle-alert': TriangleAlert,
+  bell: Bell, search: Search, 'chevron-down': ChevronDown,
+  'chevron-right': ChevronRight, 'chevron-left': ChevronLeft, 'chevron-up': ChevronUp,
+  check: Check, x: X, calendar: Calendar, clock: Clock,
+  'shopping-cart': ShoppingCart, 'credit-card': CreditCard, 'hard-drive': HardDrive,
+  activity: Activity, shield: Shield, download: Download, upload: Upload,
+  wifi: Wifi, 'wifi-off': WifiOff, map: Map, gauge: Gauge, gift: Gift,
+  flame: Flame, 'door-open': DoorOpen, pickaxe: Pickaxe, swords: Swords,
+  crosshair: Crosshair, navigation: Navigation, 'message-square': MessageSquare,
+  'file-text': FileText, bookmark: Bookmark, 'external-link': ExternalLink,
+  copy: Copy, 'log-out': LogOut, eye: Eye, 'eye-off': EyeOff, globe: Globe,
+  key: Key, layers: Layers, list: List, 'more-vertical': MoreVertical, zap: Zap,
+  info: Info, 'octagon-alert': OctagonAlert, 'circle-check': CircleCheck,
+  sparkles: Sparkles, inbox: Inbox,
+  'layout-dashboard': LayoutDashboard, 'calendar-clock': CalendarClock, drama: Drama,
+  'chevrons-up-down': ChevronsUpDown, 'server-cog': ServerCog, 'layout-grid': LayoutGrid,
+  'square-dashed': SquareDashed, 'memory-stick': MemoryStick, 'corner-down-left': CornerDownLeft,
+  ban: Ban, flag: Flag,
+  'alert-circle': CircleAlert, 'arrow-down': ArrowDown, award: Award,
+  'dollar-sign': DollarSign, 'flask-conical': FlaskConical, mail: Mail,
+  package: Package, pencil: Pencil, save: Save, 'shopping-bag': ShoppingBag,
+  target: Target, user: User,
+  // Marketing site additions
+  route: Route, timer: Timer, megaphone: Megaphone,
+  'database-backup': DatabaseBackup, store: Store, 'undo-2': Undo2,
+  circle: Circle, send: Send, 'help-circle': HelpCircle,
+}
+
+const cmp = computed<Component | null>(() => registry[props.name] ?? null)
+</script>
+
+<template>
+  <component
+    :is="cmp"
+    v-if="cmp"
+    class="cc-icon"
+    :size="size"
+    :width="size"
+    :height="size"
+    :stroke-width="strokeWidth"
+    aria-hidden="true"
+  />
+</template>
+
+<style>
+.cc-icon { display: inline-block; flex: none; vertical-align: middle; }
+</style>

frontend/src/components/ds/core/IconButton.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * IconButton — square icon-only action button.
+ * Variants: ghost | solid | accent | danger.
+ * Sizes: sm | md | lg.
+ * Native click bubbles via attribute fall-through (root is <button>).
+ */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon: string
+    variant?: 'ghost' | 'solid' | 'accent' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    active?: boolean
+    label?: string
+    disabled?: boolean
+  }>(),
+  { variant: 'ghost', size: 'md', active: false, disabled: false },
+)
+
+const iconPx = computed(() => (props.size === 'lg' ? 19 : props.size === 'sm' ? 15 : 17))
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="label"
+    :title="label"
+    :disabled="disabled"
+    :class="[
+      'cc-iconbtn',
+      variant !== 'ghost' && `cc-iconbtn--${variant}`,
+      size !== 'md' && `cc-iconbtn--${size}`,
+      active && 'cc-iconbtn--active',
+    ]"
+  >
+    <Icon :name="icon" :size="iconPx" :stroke-width="2" />
+  </button>
+</template>
+
+<style>
+.cc-iconbtn {
+  display:inline-flex; align-items:center; justify-content:center; flex:none;
+  width:var(--control-h-md); height:var(--control-h-md); border-radius:var(--radius-md);
+  border:1px solid transparent; background:transparent; color:var(--text-secondary);
+  cursor:pointer; transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
+}
+.cc-iconbtn:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-iconbtn:active { transform: translateY(0.5px); }
+.cc-iconbtn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
+.cc-iconbtn[disabled] { opacity:.4; pointer-events:none; }
+.cc-iconbtn--sm { width:var(--control-h-sm); height:var(--control-h-sm); border-radius:var(--radius-sm); }
+.cc-iconbtn--lg { width:var(--control-h-lg); height:var(--control-h-lg); }
+.cc-iconbtn--solid { background:var(--surface-raised-2); box-shadow:var(--ring-default); }
+.cc-iconbtn--solid:hover { background:var(--surface-active); }
+.cc-iconbtn--accent { background:var(--accent); color:var(--accent-contrast); }
+.cc-iconbtn--accent:hover { background:var(--accent-hover); }
+.cc-iconbtn--danger:hover { background:var(--status-offline-soft); color:var(--danger); }
+.cc-iconbtn--active { background:var(--accent-soft); color:var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
+</style>

frontend/src/components/ds/core/Kbd.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Kbd — keyboard shortcut key chip, rendered as <kbd>.
+ * Uses mono font and inset border + bottom shadow to mimic a physical key.
+ * No props — purely a presentational slot wrapper; native attrs fall through.
+ */
+</script>
+
+<template>
+  <kbd class="cc-kbd"><slot /></kbd>
+</template>
+
+<style>
+.cc-kbd {
+  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
+  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1; color:var(--text-secondary);
+  background:var(--surface-raised-2); border-radius:var(--radius-sm);
+  box-shadow: inset 0 0 0 1px var(--border-default), 0 1px 0 var(--border-default);
+}
+</style>

frontend/src/components/ds/core/StatusDot.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/** StatusDot — small live-status dot; pulses when live. Tone maps to status tokens. */
+withDefaults(
+  defineProps<{
+    tone?: 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping' | 'neutral' | 'accent'
+    size?: number
+    pulse?: boolean
+  }>(),
+  { tone: 'online', size: 8, pulse: false },
+)
+
+const TONE: Record<string, string> = {
+  online: 'var(--status-online)',
+  offline: 'var(--status-offline)',
+  warn: 'var(--status-warn)',
+  info: 'var(--status-info)',
+  starting: 'var(--status-starting)',
+  wiping: 'var(--status-wiping)',
+  neutral: 'var(--text-muted)',
+  accent: 'var(--accent)',
+}
+</script>
+
+<template>
+  <span
+    class="cc-dot"
+    :class="pulse && 'cc-dot--pulse'"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      background: TONE[tone] || TONE.neutral,
+      boxShadow: pulse ? '0 0 8px -1px ' + (TONE[tone] || TONE.neutral) : 'none',
+    }"
+  />
+</template>
+
+<style>
+.cc-dot { display: inline-block; flex: none; border-radius: 50%; position: relative; }
+.cc-dot--pulse::after {
+  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
+  animation: cc-dot-pulse 1.8s var(--ease-out) infinite;
+}
+@keyframes cc-dot-pulse {
+  0% { transform: scale(1); opacity: 0.6; }
+  70%, 100% { transform: scale(2.6); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) { .cc-dot--pulse::after { animation: none; } }
+</style>

frontend/src/components/ds/core/Tag.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/**
+ * Tag — removable or static label chip.
+ * Set `removable` to show the dismiss ×; emit `remove` is fired when clicked.
+ * Optional `icon` prefix via Icon registry.
+ */
+import Icon from './Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon?: string
+    removable?: boolean
+  }>(),
+  { removable: false },
+)
+
+const emit = defineEmits<{
+  remove: []
+}>()
+</script>
+
+<template>
+  <span :class="['cc-tag', !removable && 'cc-tag--static']">
+    <Icon v-if="icon" :name="icon" :size="12" :stroke-width="2.25" />
+    <span><slot /></span>
+    <button
+      v-if="removable"
+      type="button"
+      class="cc-tag__x"
+      aria-label="Remove"
+      @click="emit('remove')"
+    >
+      <Icon name="x" :size="11" :stroke-width="2.5" />
+    </button>
+  </span>
+</template>
+
+<style>
+.cc-tag {
+  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 9px;
+  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:500; line-height:1;
+  color:var(--text-secondary); background:var(--surface-raised-2);
+  border-radius:var(--radius-sm); box-shadow:var(--ring-default);
+}
+.cc-tag--static { padding:0 9px; }
+.cc-tag__x {
+  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
+  border-radius:var(--radius-xs); color:var(--text-tertiary); cursor:pointer; border:0; background:transparent;
+  transition:var(--transition-colors);
+}
+.cc-tag__x:hover { background:var(--surface-active); color:var(--text-primary); }
+</style>

frontend/src/components/ds/data/Avatar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * Avatar — player / operator avatar. Renders an image, or falls back to initials.
+ * Optional status dot (online / offline / warn / idle) sits bottom-right.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    name?: string
+    src?: string
+    size?: number
+    shape?: 'rounded' | 'circle'
+    status?: 'online' | 'offline' | 'warn' | 'idle'
+  }>(),
+  { name: '', size: 32, shape: 'rounded' },
+)
+
+const TONE: Record<string, string> = {
+  online: 'var(--status-online)',
+  offline: 'var(--status-offline)',
+  warn: 'var(--status-warn)',
+  idle: 'var(--text-muted)',
+}
+
+const initials = computed(() =>
+  props.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(w => w[0] ?? '')
+    .join('')
+    .toUpperCase() || '?',
+)
+
+const dotSize = computed(() => Math.max(7, Math.round(props.size * 0.28)))
+const dotColor = computed(() => (props.status ? (TONE[props.status] ?? TONE.idle) : ''))
+</script>
+
+<template>
+  <span
+    class="cc-avatar"
+    :class="shape === 'circle' && 'cc-avatar--circle'"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      fontSize: Math.round(size * 0.4) + 'px',
+    }"
+  >
+    <img v-if="src" :src="src" :alt="name" />
+    <template v-else>{{ initials }}</template>
+    <span
+      v-if="status"
+      class="cc-avatar__status"
+      :style="{ width: dotSize + 'px', height: dotSize + 'px', background: dotColor }"
+    />
+  </span>
+</template>
+
+<style>
+.cc-avatar {
+  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
+  border-radius: var(--radius-md); background: var(--surface-active); color: var(--text-secondary);
+  font-family: var(--font-mono); font-weight: 600; overflow: visible; box-shadow: var(--ring-default);
+}
+.cc-avatar--circle { border-radius: 50%; }
+.cc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cc-avatar__status {
+  position: absolute; right: -2px; bottom: -2px; border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--surface-base);
+}
+</style>

frontend/src/components/ds/data/ConsoleLine.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * ConsoleLine — one line in the RCON / server log stream.
+ * Monospace, color-coded by level. Optional timestamp and actor (who).
+ */
+withDefaults(
+  defineProps<{
+    time?: string
+    level?: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
+    who?: string
+  }>(),
+  { level: 'info' },
+)
+
+const LABEL: Record<string, string> = {
+  cmd: 'cmd',
+  chat: 'chat',
+  info: 'info',
+  warn: 'warn',
+  error: 'err',
+  connect: 'join',
+  kill: 'kill',
+}
+</script>
+
+<template>
+  <div :class="['cc-line', 'cc-line--' + level]">
+    <span v-if="time" class="cc-line__time">{{ time }}</span>
+    <span class="cc-line__tag">{{ LABEL[level ?? 'info'] ?? level }}</span>
+    <span class="cc-line__msg">
+      <span v-if="who" class="cc-line__who">{{ who }} </span>
+      <slot />
+    </span>
+  </div>
+</template>
+
+<style>
+.cc-line { display: flex; gap: 10px; padding: 2px 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; align-items: baseline; }
+.cc-line:hover { background: var(--surface-hover); }
+.cc-line__time { color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
+.cc-line__tag { flex: none; text-transform: uppercase; font-weight: 600; font-size: 10px; letter-spacing: .05em; padding: 0 5px; border-radius: var(--radius-xs); height: 15px; display: inline-flex; align-items: center; }
+.cc-line__msg { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; min-width: 0; }
+.cc-line__who { color: var(--accent-text); }
+.cc-line--cmd .cc-line__tag { background: var(--accent-soft); color: var(--accent-text); }
+.cc-line--cmd .cc-line__msg { color: var(--text-primary); }
+.cc-line--chat .cc-line__tag { background: var(--surface-active); color: var(--text-secondary); }
+.cc-line--info .cc-line__tag { background: var(--status-info-soft); color: var(--status-info); }
+.cc-line--warn .cc-line__tag { background: var(--status-warn-soft); color: var(--status-warn); }
+.cc-line--warn .cc-line__msg { color: var(--status-warn); }
+.cc-line--error .cc-line__tag { background: var(--status-offline-soft); color: var(--status-offline); }
+.cc-line--error .cc-line__msg { color: var(--status-offline); }
+.cc-line--connect .cc-line__tag { background: var(--status-online-soft); color: var(--status-online); }
+.cc-line--kill .cc-line__tag { background: var(--status-wiping-soft); color: var(--status-wiping); }
+</style>

frontend/src/components/ds/data/Panel.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Panel — standard section container.
+ * Header: optional eyebrow / title / subtitle / right-aligned actions.
+ * Body: padding removed when flushBody=true (tables / lists manage their own).
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    eyebrow?: string
+    variant?: 'base' | 'raised' | 'flush'
+    flushBody?: boolean
+  }>(),
+  { variant: 'base', flushBody: false },
+)
+</script>
+
+<template>
+  <section
+    :class="[
+      'cc-panel',
+      variant === 'raised' && 'cc-panel--raised',
+      variant === 'flush' && 'cc-panel--flush',
+    ]"
+  >
+    <header v-if="title || subtitle || eyebrow || $slots.actions" class="cc-panel__head">
+      <div class="cc-panel__titles">
+        <div v-if="eyebrow" class="t-eyebrow">{{ eyebrow }}</div>
+        <div v-if="title" class="cc-panel__title">
+          {{ title }}
+          <slot name="title-append" />
+        </div>
+        <div v-if="subtitle" class="cc-panel__sub">{{ subtitle }}</div>
+      </div>
+      <div v-if="$slots.actions" class="cc-panel__actions">
+        <slot name="actions" />
+      </div>
+    </header>
+    <div :class="['cc-panel__body', flushBody && 'cc-panel__body--flush']">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style>
+.cc-panel { background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); display: flex; flex-direction: column; min-width: 0; }
+.cc-panel--raised { background: var(--surface-raised); }
+.cc-panel--flush { box-shadow: none; background: transparent; }
+.cc-panel__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
+.cc-panel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.cc-panel__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
+.cc-panel__sub { font-size: var(--text-xs); color: var(--text-tertiary); }
+.cc-panel__actions { display: flex; align-items: center; gap: 6px; flex: none; }
+.cc-panel__body { padding: 16px; min-width: 0; }
+.cc-panel__body--flush { padding: 0; }
+</style>

frontend/src/components/ds/data/PlayersChart.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/**
+ * PlayersChart — themed ECharts area chart of players online.
+ *
+ * Requires real `data` — there is NO fallback series. When `data` is absent
+ * or empty, an "awaiting telemetry" placeholder is shown instead of the chart.
+ * This is intentional: fabricated curves mislead operators.
+ *
+ * Reads live design tokens (--accent etc.) from CSS so it matches the active
+ * theme/game, and re-renders when data-game / data-theme flip on <html>.
+ */
+import { computed, onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
+import * as echarts from 'echarts'
+
+const props = withDefaults(
+  defineProps<{ height?: number; data?: number[]; max?: number }>(),
+  { height: 200, max: 200 },
+)
+
+const hasData = computed(() => Array.isArray(props.data) && props.data.length > 0)
+
+const el = useTemplateRef<HTMLDivElement>('el')
+let chart: echarts.ECharts | null = null
+let ro: ResizeObserver | null = null
+let mo: MutationObserver | null = null
+
+function cssVar(name: string, node?: HTMLElement): string {
+  return getComputedStyle(node || document.documentElement).getPropertyValue(name).trim()
+}
+
+function render(): void {
+  if (!chart || !el.value || !hasData.value) return
+  const node = el.value
+  const accent = cssVar('--accent', node) || '#f26622'
+  const grid = cssVar('--border-subtle', node) || 'rgba(255,255,255,0.06)'
+  const text = cssVar('--text-tertiary', node) || '#767d89'
+  const mono = 'JetBrains Mono, monospace'
+  const hours = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`)
+  const series = props.data as number[]
+
+  chart.setOption({
+    animationDuration: 700,
+    grid: { left: 8, right: 12, top: 14, bottom: 22, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: cssVar('--surface-overlay', node) || '#1f2329',
+      borderColor: cssVar('--border-default', node) || 'rgba(255,255,255,0.1)',
+      borderWidth: 1,
+      textStyle: { color: cssVar('--text-primary', node) || '#fff', fontFamily: mono, fontSize: 11 },
+      axisPointer: { type: 'line', lineStyle: { color: accent, opacity: 0.5 } },
+    },
+    xAxis: {
+      type: 'category', data: hours, boundaryGap: false,
+      axisLine: { lineStyle: { color: grid } }, axisTick: { show: false },
+      axisLabel: { color: text, fontFamily: mono, fontSize: 10, interval: 3 },
+    },
+    yAxis: {
+      type: 'value', max: props.max,
+      splitLine: { lineStyle: { color: grid } },
+      axisLabel: { color: text, fontFamily: mono, fontSize: 10 },
+    },
+    series: [{
+      type: 'line', smooth: 0.4, symbol: 'none', data: series,
+      lineStyle: { color: accent, width: 2 },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: accent + '55' },
+          { offset: 1, color: accent + '00' },
+        ]),
+      },
+      markLine: {
+        silent: true, symbol: 'none',
+        lineStyle: { color: text, type: 'dashed', opacity: 0.5 },
+        data: [{ yAxis: props.max, label: { formatter: `cap ${props.max}`, color: text, fontFamily: mono, fontSize: 9 } }],
+      },
+    }],
+  })
+}
+
+onMounted(() => {
+  if (!el.value) return
+  if (!hasData.value) return // empty-state slot renders instead
+  chart = echarts.init(el.value, undefined, { renderer: 'canvas' })
+  render()
+  ro = new ResizeObserver(() => chart?.resize())
+  ro.observe(el.value)
+  mo = new MutationObserver(render)
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-game', 'data-theme'] })
+})
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  chart?.dispose()
+  chart = null
+})
+</script>
+
+<template>
+  <!-- Real data: render the ECharts canvas -->
+  <div v-if="hasData" ref="el" :style="{ width: '100%', height: height + 'px' }" />
+  <!-- No data: honest empty state — never show a fabricated curve -->
+  <div
+    v-else
+    class="pc-empty"
+    :style="{ height: height + 'px' }"
+  >
+    <svg class="pc-empty__icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+    </svg>
+    <span class="pc-empty__label">Awaiting telemetry</span>
+    <span class="pc-empty__sub">Player data will appear once the server connects and reports stats</span>
+  </div>
+</template>
+
+<style scoped>
+.pc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  color: var(--text-muted);
+}
+.pc-empty__icon { margin-bottom: 4px; opacity: 0.5; }
+.pc-empty__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-tertiary); }
+.pc-empty__sub { font-size: var(--text-xs); color: var(--text-muted); max-width: 280px; text-align: center; line-height: 1.5; }
+</style>

frontend/src/components/ds/data/ResourceMeter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * ResourceMeter — labeled utilization bar (CPU, RAM, disk, network).
+ * tone="auto" colors by threshold: green <70%, amber <90%, red ≥90%.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    icon?: string
+    value?: number
+    sub?: string
+    tone?: 'auto' | 'ok' | 'warn' | 'danger' | 'accent'
+  }>(),
+  { value: 0, tone: 'auto' },
+)
+
+const pct = computed(() => Math.max(0, Math.min(100, props.value)))
+
+const resolvedTone = computed(() => {
+  if (props.tone !== 'auto') return props.tone
+  return pct.value >= 90 ? 'danger' : pct.value >= 70 ? 'warn' : 'ok'
+})
+</script>
+
+<template>
+  <div :class="['cc-meter', 'cc-meter--' + resolvedTone]">
+    <div class="cc-meter__top">
+      <span class="cc-meter__label">{{ label }}</span>
+      <span class="cc-meter__val">
+        {{ pct }}%<span v-if="sub" class="cc-meter__sub">{{ sub }}</span>
+      </span>
+    </div>
+    <div class="cc-meter__track">
+      <div class="cc-meter__fill" :style="{ width: pct + '%' }" />
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.cc-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.cc-meter__label { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
+.cc-meter__val { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.cc-meter__sub { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
+.cc-meter__track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-active); overflow: hidden; }
+.cc-meter__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out), background var(--dur-base); }
+.cc-meter--accent .cc-meter__fill { background: var(--accent); }
+.cc-meter--ok .cc-meter__fill { background: var(--status-online); }
+.cc-meter--warn .cc-meter__fill { background: var(--status-warn); }
+.cc-meter--danger .cc-meter__fill { background: var(--status-offline); }
+</style>

frontend/src/components/ds/data/ServerCard.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * ServerCard — server instance summary card.
+ * Sets :data-game so per-game accent token re-skins apply via the global [data-game] selector.
+ * Status drives the dot + left rail color.
+ * `offline` dims the card and swaps the power IconButton to a Start action.
+ * Pending state shows when status==='online' && cpu==null && ram==null.
+ */
+import { computed } from 'vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import ResourceMeter from './ResourceMeter.vue'
+
+export interface StatItem {
+  label: string
+  value: string | number
+}
+
+const props = withDefaults(
+  defineProps<{
+    game?: string
+    gameIcon?: string
+    name: string
+    region?: string
+    map?: string
+    version?: string
+    status?: 'online' | 'offline' | 'starting' | 'wiping' | 'updating'
+    players?: { cur: number; max: number }
+    cpu?: number
+    ram?: number
+    ramSub?: string
+    ip?: string
+    stats?: StatItem[]
+  }>(),
+  {
+    game: 'rust',
+    gameIcon: 'box',
+    status: 'online',
+    players: () => ({ cur: 0, max: 0 }),
+  },
+)
+
+const emit = defineEmits<{
+  console: []
+  settings: []
+  power: []
+}>()
+
+interface StatusEntry {
+  tone: 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping' | 'neutral' | 'accent'
+  label: string
+  pulse: boolean
+}
+
+const DEFAULT_STATUS: StatusEntry = { tone: 'online', label: 'Online', pulse: true }
+
+const STATUS_MAP: Record<string, StatusEntry> = {
+  online:   { tone: 'online',   label: 'Online',   pulse: true },
+  offline:  { tone: 'offline',  label: 'Offline',  pulse: false },
+  starting: { tone: 'starting', label: 'Booting',  pulse: true },
+  wiping:   { tone: 'wiping',   label: 'Wiping',   pulse: true },
+  updating: { tone: 'starting', label: 'Updating', pulse: true },
+}
+
+const st = computed<StatusEntry>(() => STATUS_MAP[props.status ?? 'online'] ?? DEFAULT_STATUS)
+const offline = computed(() => props.status === 'offline')
+
+const statList = computed<StatItem[]>(() => {
+  if (props.stats) return props.stats
+  const items: StatItem[] = [
+    { label: 'Players', value: `${props.players?.cur ?? 0} / ${props.players?.max ?? 0}` },
+  ]
+  if (props.version) {
+    items.push({ label: 'Build', value: props.version })
+  }
+  return items
+})
+
+const pending = computed(
+  () => props.status === 'online' && props.cpu == null && props.ram == null,
+)
+
+const showMeters = computed(
+  () => !offline.value && (props.cpu != null || props.ram != null),
+)
+</script>
+
+<template>
+  <div
+    :data-game="game"
+    :class="['cc-server', offline && 'cc-server--offline']"
+  >
+    <!-- Head -->
+    <div class="cc-server__head">
+      <div class="cc-server__game">
+        <Icon :name="gameIcon" :size="18" :stroke-width="2" />
+      </div>
+      <div class="cc-server__id">
+        <div class="cc-server__name">
+          {{ name }}
+          <Badge :tone="st.tone" dot :pulse="st.pulse">{{ st.label }}</Badge>
+        </div>
+        <div class="cc-server__meta">
+          <span v-if="region">{{ region }}</span>
+          <span v-if="map">{{ map }}</span>
+          <span v-if="ip">{{ ip }}</span>
+        </div>
+      </div>
+      <div class="cc-server__actions">
+        <IconButton icon="terminal" variant="ghost" size="sm" label="Console" @click="emit('console')" />
+        <IconButton icon="settings" variant="ghost" size="sm" label="Settings" @click="emit('settings')" />
+        <IconButton
+          :icon="offline ? 'play' : 'power'"
+          :variant="offline ? 'accent' : 'ghost'"
+          size="sm"
+          :label="offline ? 'Start' : 'Power'"
+          @click="emit('power')"
+        />
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="cc-server__body">
+      <div class="cc-server__stats">
+        <div v-for="(s, i) in statList" :key="i" class="cc-server__stat">
+          <b>{{ s.value }}</b>
+          <span>{{ s.label }}</span>
+        </div>
+      </div>
+
+      <div v-if="showMeters" class="cc-server__meters">
+        <ResourceMeter v-if="cpu != null" label="CPU" :value="cpu" />
+        <ResourceMeter v-if="ram != null" label="RAM" :value="ram" :sub="ramSub" />
+      </div>
+
+      <div v-if="pending" class="cc-server__pending">
+        <Icon name="loader" :size="13" :stroke-width="2.5" />
+        Telemetry pending · agent monitoring
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-server { position: relative; background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); overflow: hidden; transition: var(--transition-colors); }
+.cc-server::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .9; }
+.cc-server:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
+.cc-server--offline::before { background: var(--status-offline); }
+.cc-server--offline { opacity: .82; }
+.cc-server__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 17px; }
+.cc-server__game { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-server__id { flex: 1; min-width: 0; }
+.cc-server__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
+.cc-server__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; display: flex; gap: 10px; }
+.cc-server__body { padding: 0 14px 13px 17px; display: flex; flex-direction: column; gap: 11px; }
+.cc-server__stats { display: flex; gap: 18px; }
+.cc-server__stat { display: flex; flex-direction: column; gap: 1px; }
+.cc-server__stat b { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.cc-server__stat span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
+.cc-server__meters { display: flex; gap: 14px; }
+.cc-server__meters > * { flex: 1; }
+.cc-server__pending { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+.cc-server__pending .cc-icon { color: var(--status-starting); }
+.cc-server__actions { display: flex; gap: 5px; }
+</style>

frontend/src/components/ds/data/StatCard.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * StatCard — KPI tile with icon, big mono value, and optional delta + note row.
+ * Green delta = up/good, red = down/bad, muted = flat.
+ */
+import { computed } from 'vue'
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    value: string | number
+    unit?: string
+    icon?: string
+    delta?: string | number
+    deltaDir?: 'up' | 'down' | 'flat'
+    note?: string
+  }>(),
+  { deltaDir: 'up' },
+)
+
+const deltaIcon = computed(() =>
+  props.deltaDir === 'up' ? 'trending-up' : props.deltaDir === 'down' ? 'trending-down' : 'minus',
+)
+
+const showFoot = computed(() => props.delta != null || !!props.note)
+</script>
+
+<template>
+  <div class="cc-stat">
+    <div class="cc-stat__top">
+      <div v-if="icon" class="cc-stat__ico">
+        <Icon :name="icon" :size="15" :stroke-width="2.25" />
+      </div>
+      <div class="cc-stat__label">{{ label }}</div>
+    </div>
+    <div class="cc-stat__value">
+      {{ value }}<span v-if="unit" class="cc-stat__unit">{{ unit }}</span>
+    </div>
+    <div v-if="showFoot" class="cc-stat__foot">
+      <span v-if="delta != null" :class="['cc-stat__delta', 'cc-stat__delta--' + deltaDir]">
+        <Icon :name="deltaIcon" :size="13" :stroke-width="2.5" />{{ delta }}
+      </span>
+      <span v-if="note" class="cc-stat__note">{{ note }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-stat { background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; overflow: hidden; }
+.cc-stat__top { display: flex; align-items: center; gap: 8px; }
+.cc-stat__ico { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
+.cc-stat__label { font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); letter-spacing: .01em; }
+.cc-stat__value { font-family: var(--font-mono); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
+.cc-stat__unit { font-size: 14px; color: var(--text-muted); font-weight: 500; }
+.cc-stat__foot { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); }
+.cc-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
+.cc-stat__delta--up { color: var(--status-online); }
+.cc-stat__delta--down { color: var(--status-offline); }
+.cc-stat__delta--flat { color: var(--text-tertiary); }
+.cc-stat__note { color: var(--text-tertiary); }
+</style>

frontend/src/components/ds/feedback/Alert.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Alert — contextual inline alert strip.
+ * Tones: info | warn | danger | online | accent | neutral.
+ * Pass `title` for a bold heading, default slot for body text, `actions` slot
+ * for inline action buttons. Set `dismissible` to show an × ghost button that
+ * emits `dismiss`.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+type Tone = 'info' | 'warn' | 'danger' | 'online' | 'accent' | 'neutral'
+
+const ICONS: Record<Tone, string> = {
+  info: 'info',
+  warn: 'triangle-alert',
+  danger: 'octagon-alert',
+  online: 'circle-check',
+  accent: 'sparkles',
+  neutral: 'info',
+}
+
+const props = withDefaults(
+  defineProps<{
+    tone?: Tone
+    title?: string
+    dismissible?: boolean
+    icon?: string
+  }>(),
+  { tone: 'info', dismissible: false },
+)
+
+defineEmits<{ dismiss: [] }>()
+</script>
+
+<template>
+  <div
+    :class="['cc-alert', 'cc-alert--' + tone]"
+    role="status"
+  >
+    <span class="cc-alert__icon">
+      <Icon :name="icon ?? ICONS[tone]" :size="17" :stroke-width="2" />
+    </span>
+    <div class="cc-alert__main">
+      <div v-if="title" class="cc-alert__title">{{ title }}</div>
+      <div v-if="$slots.default" class="cc-alert__body"><slot /></div>
+      <div v-if="$slots.actions" class="cc-alert__actions"><slot name="actions" /></div>
+    </div>
+    <button
+      v-if="dismissible"
+      class="cc-alert__dismiss"
+      type="button"
+      aria-label="Dismiss"
+      @click="$emit('dismiss')"
+    >
+      <Icon name="x" :size="15" :stroke-width="2.25" />
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-alert { display:flex; gap:11px; padding:12px 13px; border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:var(--ring-default); }
+.cc-alert__icon { flex:none; margin-top:1px; }
+.cc-alert__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
+.cc-alert__title { font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }
+.cc-alert__body { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.5; }
+.cc-alert__actions { display:flex; gap:8px; margin-top:8px; }
+.cc-alert--info { background:var(--status-info-soft); box-shadow: inset 0 0 0 1px var(--status-info-border); }
+.cc-alert--info .cc-alert__icon { color:var(--status-info); }
+.cc-alert--warn { background:var(--status-warn-soft); box-shadow: inset 0 0 0 1px var(--status-warn-border); }
+.cc-alert--warn .cc-alert__icon { color:var(--status-warn); }
+.cc-alert--danger { background:var(--status-offline-soft); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-alert--danger .cc-alert__icon { color:var(--status-offline); }
+.cc-alert--online { background:var(--status-online-soft); box-shadow: inset 0 0 0 1px var(--status-online-border); }
+.cc-alert--online .cc-alert__icon { color:var(--status-online); }
+.cc-alert--accent { background:var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-alert--accent .cc-alert__icon { color:var(--accent-text); }
+.cc-alert__dismiss {
+  flex: none; display:inline-flex; align-items:center; justify-content:center;
+  width:26px; height:26px; border-radius:var(--radius-sm); border:none; cursor:pointer;
+  background:transparent; color:var(--text-secondary);
+  transition: var(--transition-colors);
+  margin-top:-3px; margin-right:-3px;
+}
+.cc-alert__dismiss:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-alert__dismiss:focus-visible { outline:none; box-shadow:var(--focus-ring); }
+</style>

frontend/src/components/ds/feedback/EmptyState.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * EmptyState — zero-data placeholder with icon, title, description, and an
+ * optional action slot (pass a Button or link).
+ *
+ * Icon registry note: default icon 'inbox' is not in the registry — it will
+ * silently not render per Icon.vue's null guard. Callers should pass a
+ * registered icon name (e.g. icon="server", icon="folder-open").
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon?: string
+    title?: string
+    description?: string
+  }>(),
+  { icon: 'inbox' },
+)
+</script>
+
+<template>
+  <div class="cc-empty">
+    <div class="cc-empty__icon">
+      <Icon :name="icon" :size="22" :stroke-width="1.75" />
+    </div>
+    <div v-if="title" class="cc-empty__title">{{ title }}</div>
+    <div v-if="description" class="cc-empty__desc">{{ description }}</div>
+    <div v-if="$slots.action" class="cc-empty__action"><slot name="action" /></div>
+  </div>
+</template>
+
+<style>
+.cc-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding:36px 24px; }
+.cc-empty__icon { width:46px; height:46px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--text-tertiary); background:var(--surface-raised-2); box-shadow:var(--ring-default); }
+.cc-empty__title { font-size:var(--text-base); font-weight:600; color:var(--text-primary); }
+.cc-empty__desc { font-size:var(--text-sm); color:var(--text-tertiary); max-width:340px; line-height:1.5; }
+.cc-empty__action { margin-top:12px; }
+</style>

frontend/src/components/ds/forms/Checkbox.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Checkbox — square toggle; checked/indeterminate state carries the live game accent.
+ * v-model binds to boolean checked state via defineModel<boolean>().
+ * The hidden <input type="checkbox"> drives CSS :checked/:indeterminate/:focus-visible/:disabled.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    disabled?: boolean
+    id?: string
+  }>(),
+  { disabled: false },
+)
+
+const model = defineModel<boolean>()
+</script>
+
+<template>
+  <label class="cc-check" :for="id">
+    <input
+      type="checkbox"
+      :id="id"
+      :checked="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLInputElement).checked"
+    />
+    <span class="cc-check__box">
+      <Icon name="check" :size="12" :stroke-width="3" />
+    </span>
+    <span v-if="label" class="cc-check__label">{{ label }}</span>
+  </label>
+</template>
+
+<style>
+.cc-check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
+.cc-check input { position:absolute; opacity:0; width:0; height:0; }
+.cc-check__box {
+  width:17px; height:17px; flex:none; border-radius:var(--radius-xs); background:var(--surface-inset);
+  box-shadow: inset 0 0 0 1px var(--border-strong); display:flex; align-items:center; justify-content:center;
+  color:transparent; transition:var(--transition-colors);
+}
+.cc-check input:checked + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
+.cc-check input:indeterminate + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
+.cc-check input:focus-visible + .cc-check__box { box-shadow: var(--focus-ring); }
+.cc-check input:disabled + .cc-check__box { opacity:.5; }
+.cc-check__label { font-size:var(--text-sm); color:var(--text-primary); }
+</style>

frontend/src/components/ds/forms/Input.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * Input — text field with label, hint/error, leading icon and affixes.
+ * Reach for `mono` on any technical value (ports, tokens, IDs).
+ * v-model binds to the inner <input> value via defineModel<string>().
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    hint?: string
+    error?: string
+    icon?: string
+    prefix?: string
+    suffix?: string
+    size?: 'md' | 'sm'
+    mono?: boolean
+    required?: boolean
+    id?: string
+    placeholder?: string
+    disabled?: boolean
+    type?: string
+  }>(),
+  { size: 'md', mono: false, required: false, disabled: false, type: 'text' },
+)
+
+const model = defineModel<string>()
+
+const invalid = () => !!props.error
+</script>
+
+<template>
+  <label
+    class="cc-field"
+    :for="id"
+  >
+    <span v-if="label" class="cc-field__label">
+      {{ label }}<span v-if="required" class="req">*</span>
+    </span>
+    <span
+      :class="[
+        'cc-input',
+        size === 'sm' && 'cc-input--sm',
+        mono && 'cc-input--mono',
+        invalid() && 'cc-input--invalid',
+      ]"
+    >
+      <Icon v-if="icon" :name="icon" :size="15" />
+      <span v-if="prefix" class="cc-input__affix">{{ prefix }}</span>
+      <input
+        :id="id"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="model"
+        @input="model = ($event.target as HTMLInputElement).value"
+      />
+      <span v-if="suffix" class="cc-input__affix">{{ suffix }}</span>
+    </span>
+    <span
+      v-if="hint || error"
+      :class="['cc-field__hint', invalid() && 'cc-field__hint--error']"
+    >{{ error ?? hint }}</span>
+  </label>
+</template>
+
+<style>
+.cc-field { display:flex; flex-direction:column; gap:6px; }
+.cc-field__label { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); }
+.cc-field__label .req { color:var(--accent-text); margin-left:2px; }
+.cc-input {
+  display:flex; align-items:center; gap:8px; height:var(--control-h-md); padding:0 11px;
+  background:var(--surface-inset); border-radius:var(--radius-md); box-shadow:var(--ring-default);
+  transition:var(--transition-colors); color:var(--text-tertiary);
+}
+.cc-input:focus-within { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-input--sm { height:var(--control-h-sm); padding:0 9px; }
+.cc-input--invalid { box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-input--invalid:focus-within { box-shadow: inset 0 0 0 1px var(--danger); }
+.cc-input input {
+  flex:1; min-width:0; background:transparent; border:0; outline:0; padding:0; margin:0;
+  font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary);
+}
+.cc-input input::placeholder { color:var(--text-muted); }
+.cc-input--mono input { font-family:var(--font-mono); }
+.cc-input__affix { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; }
+.cc-field__hint { font-size:var(--text-xs); color:var(--text-tertiary); }
+.cc-field__hint--error { color:var(--danger); }
+</style>

frontend/src/components/ds/forms/Select.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Select — styled native <select> with chevron overlay.
+ * With `label` the root becomes a <label> wrapping the control.
+ * v-model binds to the selected value via defineModel<string>().
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+type SelectOption = string | { value: string; label: string }
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    options?: SelectOption[]
+    size?: 'md' | 'sm'
+    id?: string
+    disabled?: boolean
+  }>(),
+  { options: () => [], size: 'md', disabled: false },
+)
+
+const model = defineModel<string>()
+
+function optionValue(o: SelectOption): string {
+  return typeof o === 'string' ? o : o.value
+}
+function optionLabel(o: SelectOption): string {
+  return typeof o === 'string' ? o : o.label
+}
+</script>
+
+<template>
+  <!-- With label: wrap in <label> matching React's cc-field layout -->
+  <label v-if="label" class="cc-field" :for="id">
+    <span class="cc-field__label">{{ label }}</span>
+    <span :class="['cc-select', size === 'sm' && 'cc-select--sm']">
+      <select
+        :id="id"
+        :disabled="disabled"
+        :value="model"
+        @change="model = ($event.target as HTMLSelectElement).value"
+      >
+        <option
+          v-for="(o, i) in options"
+          :key="i"
+          :value="optionValue(o)"
+        >{{ optionLabel(o) }}</option>
+      </select>
+      <span class="cc-select__chev">
+        <Icon name="chevron-down" :size="15" />
+      </span>
+    </span>
+  </label>
+
+  <!-- Without label: bare control -->
+  <span v-else :class="['cc-select', size === 'sm' && 'cc-select--sm']">
+    <select
+      :id="id"
+      :disabled="disabled"
+      :value="model"
+      @change="model = ($event.target as HTMLSelectElement).value"
+    >
+      <option
+        v-for="(o, i) in options"
+        :key="i"
+        :value="optionValue(o)"
+      >{{ optionLabel(o) }}</option>
+    </select>
+    <span class="cc-select__chev">
+      <Icon name="chevron-down" :size="15" />
+    </span>
+  </span>
+</template>
+
+<style>
+.cc-select { position:relative; display:flex; align-items:center; }
+.cc-select select {
+  appearance:none; width:100%; height:var(--control-h-md); padding:0 32px 0 11px;
+  background:var(--surface-inset); color:var(--text-primary); border:0; border-radius:var(--radius-md);
+  box-shadow:var(--ring-default); font-family:var(--font-sans); font-size:var(--text-sm); cursor:pointer;
+  transition:var(--transition-colors); outline:0;
+}
+.cc-select select:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-select--sm select { height:var(--control-h-sm); padding:0 28px 0 9px; }
+.cc-select__chev { position:absolute; right:9px; pointer-events:none; color:var(--text-tertiary); display:flex; }
+</style>

frontend/src/components/ds/forms/Switch.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * Switch — toggle control; checked state carries the live game accent.
+ * v-model binds to boolean checked state via defineModel<boolean>().
+ * The hidden <input type="checkbox"> drives CSS :checked/:focus-visible/:disabled.
+ */
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    size?: 'md' | 'sm'
+    disabled?: boolean
+    id?: string
+  }>(),
+  { size: 'md', disabled: false },
+)
+
+const model = defineModel<boolean>()
+</script>
+
+<template>
+  <label
+    :class="['cc-switch', size === 'sm' && 'cc-switch--sm']"
+    :for="id"
+  >
+    <input
+      type="checkbox"
+      :id="id"
+      :checked="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLInputElement).checked"
+    />
+    <span class="cc-switch__track">
+      <span class="cc-switch__thumb" />
+    </span>
+    <span v-if="label" class="cc-switch__label">{{ label }}</span>
+  </label>
+</template>
+
+<style>
+.cc-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
+.cc-switch input { position:absolute; opacity:0; width:0; height:0; }
+.cc-switch__track {
+  position:relative; width:36px; height:20px; border-radius:var(--radius-pill); flex:none;
+  background:var(--surface-active); box-shadow: inset 0 0 0 1px var(--border-default);
+  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
+}
+.cc-switch__thumb {
+  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
+  background:var(--text-secondary); transition: transform var(--dur-base) var(--ease-emphasized), background var(--dur-base);
+}
+.cc-switch input:checked + .cc-switch__track { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-switch input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(16px); background:var(--accent-contrast); }
+.cc-switch input:focus-visible + .cc-switch__track { box-shadow: var(--focus-ring); }
+.cc-switch input:disabled + .cc-switch__track { opacity:.5; }
+.cc-switch__label { font-size:var(--text-sm); color:var(--text-primary); }
+.cc-switch--sm .cc-switch__track { width:30px; height:17px; }
+.cc-switch--sm .cc-switch__thumb { width:13px; height:13px; }
+.cc-switch--sm input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(13px); }
+</style>

frontend/src/components/ds/navigation/GameSwitcher.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * GameSwitcher — segmented control for switching the active game context.
+ * Set `data-game` on a root shell element to the chosen key so the global
+ * [data-game] CSS custom properties re-skin the entire panel.
+ * Per-game accent comes from var(--accent) which is resolved by the [data-game] token scope.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+export interface GameOption {
+  key: string
+  label: string
+  icon?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    games: (string | GameOption)[]
+    showLabels?: boolean
+    class?: string
+  }>(),
+  { showLabels: true },
+)
+
+const model = defineModel<string>({ required: true })
+
+function normalise(g: string | GameOption): GameOption {
+  return typeof g === 'string' ? { key: g, label: g } : g
+}
+</script>
+
+<template>
+  <div :class="['cc-gameswitch', props.class]" role="group">
+    <button
+      v-for="raw in games"
+      :key="normalise(raw).key"
+      type="button"
+      :aria-pressed="normalise(raw).key === model"
+      :data-game="normalise(raw).key"
+      class="cc-gameswitch__opt"
+      :title="normalise(raw).label"
+      @click="model = normalise(raw).key"
+    >
+      <Icon
+        v-if="normalise(raw).icon"
+        :name="normalise(raw).icon ?? ''"
+        :size="14"
+        :stroke-width="2.25"
+        :style="{ color: normalise(raw).key === model ? 'var(--accent)' : 'inherit' }"
+      />
+      <span
+        v-else
+        class="cc-gameswitch__dot"
+        :style="{ background: normalise(raw).key === model ? 'var(--accent)' : 'var(--text-muted)' }"
+      />
+      <span v-if="showLabels">{{ normalise(raw).label }}</span>
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-gameswitch { display:inline-flex; align-items:center; gap:3px; padding:3px; background:var(--surface-inset); border-radius:var(--radius-md); box-shadow:var(--ring-default); }
+.cc-gameswitch__opt {
+  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border:0; background:transparent;
+  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; color:var(--text-tertiary);
+  border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-colors); white-space:nowrap;
+}
+.cc-gameswitch__opt:hover { color:var(--text-primary); }
+.cc-gameswitch__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
+.cc-gameswitch__opt[aria-pressed="true"] { background:var(--surface-raised-2); color:var(--text-primary); box-shadow:var(--ring-default); }
+</style>

frontend/src/components/ds/navigation/NavItem.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * NavItem — sidebar navigation row: icon + label, active state with accent rail,
+ * optional trailing count. Collapsed mode renders icon-only at 40 px wide.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon: string
+    label: string
+    active?: boolean
+    count?: number | string
+    collapsed?: boolean
+  }>(),
+  { active: false, collapsed: false },
+)
+
+const emit = defineEmits<{ click: [] }>()
+</script>
+
+<template>
+  <div
+    :class="['cc-nav', active && 'cc-nav--active', collapsed && 'cc-nav--collapsed']"
+    role="button"
+    :aria-current="active ? 'page' : undefined"
+    :title="collapsed ? label : undefined"
+    @click="emit('click')"
+  >
+    <span class="cc-nav__icon">
+      <Icon :name="icon" :size="17" :stroke-width="2" />
+    </span>
+    <span v-if="!collapsed" class="cc-nav__label">{{ label }}</span>
+    <span v-if="!collapsed && count != null" class="cc-nav__count">{{ count }}</span>
+  </div>
+</template>
+
+<style>
+.cc-nav { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--radius-md);
+  color:var(--text-secondary); cursor:pointer; transition:var(--transition-colors); position:relative; user-select:none; }
+.cc-nav:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-nav__icon { flex:none; color:var(--text-tertiary); display:flex; transition:var(--transition-colors); }
+.cc-nav__label { flex:1; font-size:var(--text-sm); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.cc-nav__count { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-active); }
+.cc-nav--active { background:var(--accent-soft); color:var(--accent-text); }
+.cc-nav--active .cc-nav__icon { color:var(--accent-text); }
+.cc-nav--active::before { content:''; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:var(--radius-pill); background:var(--accent); }
+.cc-nav--active .cc-nav__count { background:var(--accent-soft-strong); color:var(--accent-text); }
+.cc-nav--collapsed { justify-content:center; padding:0; width:40px; }
+</style>

frontend/src/components/ds/navigation/Tabs.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * Tabs — horizontal tab bar. variant="pill" fills active tab with accent-soft;
+ * variant="line" underlines with accent. Items can be bare strings or TabItem objects.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+export interface TabItem {
+  value: string
+  label: string
+  icon?: string
+  count?: number | string
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: (string | TabItem)[]
+    variant?: 'pill' | 'line'
+    class?: string
+  }>(),
+  { variant: 'pill' },
+)
+
+const model = defineModel<string>({ required: true })
+
+function normalise(it: string | TabItem): TabItem {
+  return typeof it === 'string' ? { value: it, label: it } : it
+}
+</script>
+
+<template>
+  <div
+    :class="['cc-tabs', `cc-tabs--${variant}`, props.class]"
+    role="tablist"
+  >
+    <button
+      v-for="raw in items"
+      :key="normalise(raw).value"
+      type="button"
+      role="tab"
+      :aria-selected="normalise(raw).value === model"
+      class="cc-tab"
+      @click="model = normalise(raw).value"
+    >
+      <Icon v-if="normalise(raw).icon" :name="normalise(raw).icon ?? ''" :size="15" />
+      {{ normalise(raw).label }}
+      <span v-if="normalise(raw).count != null" class="cc-tab__count">{{ normalise(raw).count }}</span>
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-tabs { display:flex; align-items:center; gap:2px; position:relative; }
+.cc-tabs--line { box-shadow: inset 0 -1px 0 var(--border-subtle); gap:4px; }
+.cc-tab {
+  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px; border:0; background:transparent;
+  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:500; color:var(--text-tertiary);
+  cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition-colors); white-space:nowrap; position:relative;
+}
+.cc-tab:hover { color:var(--text-primary); background:var(--surface-hover); }
+.cc-tabs--pill .cc-tab[aria-selected="true"] { color:var(--accent-text); background:var(--accent-soft); }
+.cc-tabs--line .cc-tab { border-radius:0; height:38px; padding:0 4px; margin:0 7px; }
+.cc-tabs--line .cc-tab:hover { background:transparent; }
+.cc-tabs--line .cc-tab[aria-selected="true"] { color:var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
+.cc-tab__count { font-family:var(--font-mono); font-size:11px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-active); color:var(--text-tertiary); }
+.cc-tab[aria-selected="true"] .cc-tab__count { background:var(--accent-soft); color:var(--accent-text); }
+</style>

frontend/src/components/layout/DashboardLayout.vue

@@ -1,73 +1,78 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router'
+/**
+ * DashboardLayout — game-aware app shell (Phase C redesign).
+ * Nav is driven by GAME_PROFILES[activeGame].nav — switching the GameSwitcher
+ * visibly changes nav items, labels, and sections per game.
+ * Preserves: permission gating, super-admin section, logout, mobile sidebar,
+ * GameSwitcher, agent-health footer, topbar.
+ */
+import { ref, computed } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useServerStore } from '@/stores/server'
-import {
-  LayoutDashboard,
-  Server,
-  Terminal,
-  Users,
-  Puzzle,
-  RefreshCw,
-  Map,
-  MessageSquare,
-  BarChart3,
-  Bell,
-  UserPlus,
-  ShoppingBag,
-  Package,
-  Settings,
-  LogOut,
-  Shield,
-  Key,
-  CreditCard,
-  Network,
-  Clock,
-  AlertTriangle,
-  FileText,
-  FolderOpen,
-  Crosshair,
-  Navigation2,
-  Menu,
-  X,
-} from 'lucide-vue-next'
+import { useThemeGame } from '@/composables/useThemeGame'
+import { useGameProfile } from '@/config/gameProfiles'
+import type { NavSection, NavItemDef } from '@/config/gameProfiles'
+import { safeDate } from '@/utils/formatters'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import StatusDot from '@/components/ds/core/StatusDot.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Avatar from '@/components/ds/data/Avatar.vue'
+import NavItem from '@/components/ds/navigation/NavItem.vue'
+import GameSwitcher from '@/components/ds/navigation/GameSwitcher.vue'
+import type { GameOption } from '@/components/ds/navigation/GameSwitcher.vue'
+import type { ActiveGame } from '@/composables/useThemeGame'
 
+// ---- Stores / composables ----
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const server = useServerStore()
-const sidebarOpen = ref(false)
+const { theme, activeGame, setActiveGame, toggleTheme } = useThemeGame()
 
-const navItems = [
-  { name: 'Dashboard', path: '/', icon: LayoutDashboard, permission: null },
-  { name: 'Server', path: '/server', icon: Server, permission: 'server.view' },
-  { name: 'Console', path: '/console', icon: Terminal, permission: 'console.view' },
-  { name: 'Players', path: '/players', icon: Users, permission: 'players.view' },
-  { name: 'Plugins', path: '/plugins', icon: Puzzle, permission: 'plugins.view' },
-  { name: 'File Manager', path: '/files', icon: FolderOpen, permission: 'files.view' },
-  { name: 'Loot Builder', path: '/loot-builder', icon: Crosshair, permission: 'loot.view' },
-  { name: 'Teleport Config', path: '/teleport-config', icon: Navigation2, permission: 'teleport.view' },
-  { name: 'Auto-Wiper', path: '/wipes', icon: RefreshCw, permission: 'wipes.view' },
-  { name: 'Maps', path: '/maps', icon: Map, permission: 'maps.view' },
-  { name: 'Chat Log', path: '/chat', icon: MessageSquare, permission: 'chat.view' },
-  { name: 'Analytics', path: '/analytics', icon: BarChart3, permission: 'analytics.view' },
-  { name: 'Schedules', path: '/schedules', icon: Clock, permission: 'schedules.view' },
-  { name: 'Alerts', path: '/alerts', icon: AlertTriangle, permission: 'alerts.view' },
-  { name: 'Notifications', path: '/notifications', icon: Bell, permission: 'notifications.view' },
-  { name: 'Team', path: '/team', icon: UserPlus, permission: null },
-  { name: 'Store', path: '/store/config', icon: ShoppingBag, permission: 'store.view' },
-  { name: 'Modules', path: '/modules', icon: Package, permission: 'modules.view' },
-  { name: 'Changelog', path: '/changelog', icon: FileText, permission: 'changelog.view' },
-  { name: 'Settings', path: '/settings', icon: Settings, permission: 'settings.view' },
+// ---- Mobile sidebar ----
+const sidebarOpen = ref(false)
+function closeSidebar() { sidebarOpen.value = false }
+
+// ---- App version ----
+const APP_VERSION = __APP_VERSION__
+
+// ---- Game switcher ----
+const GAME_OPTIONS: GameOption[] = [
+  { key: 'all',      label: 'All games',     icon: 'layers' },
+  { key: 'rust',     label: 'Rust',          icon: 'box' },
+  { key: 'dune',     label: 'Dune',          icon: 'sun' },
+  { key: 'conan',    label: 'Conan Exiles',  icon: 'swords' },
+  { key: 'soulmask', label: 'Soulmask',      icon: 'drama' },
 ]
 
+const GAME_LABEL: Record<string, string> = {
+  all: 'All games', rust: 'Rust', dune: 'Dune',
+  conan: 'Conan Exiles', soulmask: 'Soulmask',
+}
+
+function onActiveGame(val: string) {
+  setActiveGame(val as ActiveGame)
+}
+
+// ---- Navigation — driven by the game profile registry ----
+/**
+ * For 'all', fall back to rust (superset nav). For a specific game, look up
+ * its profile. noUncheckedIndexedAccess-safe: always ?? GAME_PROFILES.rust.
+ */
+const activeNavSections = computed<NavSection[]>(() => {
+  const game = activeGame.value === 'all' ? 'rust' : activeGame.value
+  return (useGameProfile(game)).nav
+})
+
 const adminNavItems = [
-  { name: 'Admin Home', path: '/admin', icon: Shield },
-  { name: 'Licenses', path: '/admin/licenses', icon: Key },
-  { name: 'Subscriptions', path: '/admin/subscriptions', icon: CreditCard },
-  { name: 'Users', path: '/admin/users', icon: Users },
-  { name: 'Server Fleet', path: '/admin/servers', icon: Network },
+  { name: 'Admin home', path: '/admin', icon: 'shield' },
+  { name: 'Licenses', path: '/admin/licenses', icon: 'key' },
+  { name: 'Subscriptions', path: '/admin/subscriptions', icon: 'credit-card' },
+  { name: 'Users', path: '/admin/users', icon: 'users' },
+  { name: 'Server fleet', path: '/admin/servers', icon: 'server' },
 ]
 
 function isActive(path: string): boolean {
@@ -75,141 +80,519 @@ function isActive(path: string): boolean {
   return route.path.startsWith(path)
 }
 
-function handleLogout() {
-  auth.logout()
-  router.push('/login')
+function navigate(path: string) {
+  router.push(path)
+  closeSidebar()
 }
 
-function closeSidebar() {
-  sidebarOpen.value = false
-}
-
-function canShowNavItem(item: typeof navItems[0]): boolean {
+function canShowNavItem(item: NavItemDef): boolean {
   if (!item.permission) return true
   return auth.hasPermission(item.permission)
 }
+
+function hasVisibleItems(section: NavSection): boolean {
+  return section.items.some(canShowNavItem)
+}
+
+// ---- Agent health ----
+const hasAgent = computed(() => server.connection !== null)
+
+const agentTone = computed(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'online' as const
+  if (cs === 'degraded') return 'warn' as const
+  return 'offline' as const
+})
+const agentLabel = computed(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'Healthy'
+  if (cs === 'degraded') return 'Degraded'
+  return 'Offline'
+})
+const agentName = computed(() => server.connection?.server_ip ?? 'Host agent')
+
+const agentMetaLine = computed(() => {
+  const cs = server.connection?.connection_status
+  let line = cs === 'connected' ? 'Connected' : server.connection?.companion_last_seen
+    ? `Last seen ${safeDate(server.connection.companion_last_seen)}`
+    : 'Awaiting first heartbeat'
+  if (server.stats) {
+    line += ` · ${server.stats.player_count}/${server.stats.max_players} players`
+  }
+  return line
+})
+
+// ---- Topbar ----
+const serverName = computed(() => auth.license?.server_name ?? 'Your servers')
+const userName = computed(() => auth.user?.username ?? '')
+const themeIcon = computed(() => theme.value === 'dark' ? 'sun' : 'moon')
 </script>
 
 <template>
-  <div class="flex h-screen bg-neutral-950">
-    <!-- Mobile Hamburger -->
-    <button
-      @click="sidebarOpen = true"
-      class="md:hidden fixed top-4 left-4 z-40 p-2 bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-300 hover:text-oxide-400 transition-colors"
-    >
-      <Menu class="w-5 h-5" />
-    </button>
-
-    <!-- Sidebar Overlay (Mobile) -->
+  <!-- Outer app grid: sidebar | main -->
+  <div class="app">
+    <!-- ===================================================== SIDEBAR ===== -->
+    <!-- Mobile overlay -->
     <div
       v-if="sidebarOpen"
+      class="sidebar-overlay"
       @click="closeSidebar"
-      class="md:hidden fixed inset-0 bg-black/50 z-40"
     />
 
-    <!-- Sidebar -->
     <aside
-      class="w-64 bg-neutral-900 border-r border-neutral-800 flex flex-col fixed inset-y-0 left-0 z-50 transform transition-transform"
-      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
+      class="app__sidebar"
+      :class="sidebarOpen ? 'app__sidebar--open' : ''"
     >
-      <!-- Logo -->
-      <div class="p-4 border-b border-neutral-800">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
-            <div>
-              <h1 class="text-sm font-bold text-oxide-500 tracking-wider">CORROSION</h1>
-              <p class="text-xs text-neutral-500">{{ auth.license?.server_name || 'Server Management' }}</p>
-            </div>
-          </div>
-          <button
-            @click="closeSidebar"
-            class="md:hidden text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            <X class="w-5 h-5" />
-          </button>
-        </div>
+      <!-- Brand -->
+      <div class="side__brand">
+        <Logo :size="22" />
+        <Badge tone="neutral" :mono="true" class="side__ver">{{ APP_VERSION }}</Badge>
       </div>
 
-      <!-- Server Status Indicator -->
-      <div class="px-4 py-3 border-b border-neutral-800">
-        <div class="flex items-center gap-2">
-          <div
-            class="w-2 h-2 rounded-full"
-            :class="{
-              'bg-green-500': server.connection?.connection_status === 'connected',
-              'bg-yellow-500': server.connection?.connection_status === 'degraded',
-              'bg-red-500': server.connection?.connection_status === 'offline' || !server.connection,
-            }"
+      <!-- Active game switcher -->
+      <div class="side__game">
+        <div class="t-eyebrow side__lbl">
+          Active game · {{ GAME_LABEL[activeGame] ?? 'All games' }}
+        </div>
+        <GameSwitcher
+          :model-value="activeGame"
+          :games="GAME_OPTIONS"
+          :show-labels="false"
+          @update:model-value="onActiveGame"
         />
-          <span class="text-sm text-neutral-400">
-            {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? 0 }} players
-          </span>
-        </div>
       </div>
 
-      <!-- Navigation -->
-      <nav class="flex-1 overflow-y-auto py-2">
-        <RouterLink
-          v-for="item in navItems"
+      <!-- Navigation — sections driven by GAME_PROFILES[activeGame].nav -->
+      <nav class="side__nav">
+        <template v-for="section in activeNavSections" :key="section.label">
+          <template v-if="hasVisibleItems(section)">
+            <div class="side__sec">
+              <div v-if="section.label" class="t-eyebrow side__lbl">{{ section.label }}</div>
+              <NavItem
+                v-for="item in section.items"
                 v-show="canShowNavItem(item)"
-          :key="item.path"
-          :to="item.path"
-          @click="closeSidebar"
-          class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
-          :class="isActive(item.path)
-            ? 'bg-oxide-500/10 text-oxide-400'
-            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
-        >
-          <component :is="item.icon" class="w-4 h-4" />
-          {{ item.name }}
-        </RouterLink>
+                :key="item.route"
+                :icon="item.icon"
+                :label="item.label"
+                :active="isActive(item.route)"
+                @click="navigate(item.route)"
+              />
+            </div>
+          </template>
+        </template>
 
-        <!-- Platform Admin Section (super-admin only) -->
-        <template v-if="auth.isSuperAdmin">
-          <div class="mt-4 mb-2 px-4">
-            <div class="flex items-center gap-2">
-              <div class="flex-1 border-t border-neutral-700" />
-              <span class="text-[10px] font-semibold uppercase tracking-widest text-oxide-500">Platform</span>
-              <div class="flex-1 border-t border-neutral-700" />
-            </div>
-          </div>
-          <RouterLink
+        <!-- Platform admin section (super-admin only) -->
+        <div v-if="auth.isSuperAdmin" class="side__sec">
+          <div class="t-eyebrow side__lbl side__lbl--platform">Platform</div>
+          <NavItem
             v-for="item in adminNavItems"
             :key="item.path"
-            :to="item.path"
-            @click="closeSidebar"
-            class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
-            :class="isActive(item.path)
-              ? 'bg-oxide-500/10 text-oxide-400'
-              : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
-          >
-            <component :is="item.icon" class="w-4 h-4" />
-            {{ item.name }}
-          </RouterLink>
-        </template>
+            :icon="item.icon"
+            :label="item.name"
+            :active="isActive(item.path)"
+            @click="navigate(item.path)"
+          />
+        </div>
       </nav>
 
-      <!-- User -->
-      <div class="p-4 border-t border-neutral-800">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-neutral-300">{{ auth.user?.username }}</p>
-            <p class="text-xs text-neutral-500">{{ auth.user?.email }}</p>
+      <!-- Host agent footer -->
+      <div class="side__foot">
+        <!-- Connected: real IP + status badge + meta line -->
+        <div v-if="hasAgent" class="agent">
+          <div class="agent__row">
+            <StatusDot :tone="agentTone" :pulse="agentTone === 'online'" />
+            <span class="agent__name">{{ agentName }}</span>
+            <Badge :tone="agentTone" size="md">{{ agentLabel }}</Badge>
           </div>
+          <div class="agent__meta">{{ agentMetaLine }}</div>
+        </div>
+        <!-- Not connected: honest empty state -->
+        <div v-else class="agent agent--empty">
+          <div class="agent__row">
+            <StatusDot tone="offline" />
+            <span class="agent__name agent__name--muted">No host agent connected</span>
+          </div>
+          <div class="agent__meta">Install the Corrosion host agent from the Server page</div>
+        </div>
+        <!-- User / logout row -->
+        <div class="side__user">
+          <span class="side__user-name">{{ auth.user?.username ?? '' }}</span>
           <button
-            @click="handleLogout"
-            class="text-neutral-500 hover:text-oxide-400 transition-colors"
+            type="button"
+            class="side__logout"
+            title="Sign out"
+            @click="() => { auth.logout(); router.push('/login') }"
           >
-            <LogOut class="w-4 h-4" />
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
+            </svg>
           </button>
         </div>
       </div>
     </aside>
 
-    <!-- Main Content (offset by sidebar width on desktop) -->
-    <main class="flex-1 overflow-y-auto md:pl-64">
+    <!-- ======================================================= MAIN ===== -->
+    <div class="app__main">
+      <!-- Topbar -->
+      <header class="app__topbar">
+        <!-- Mobile hamburger (left of topbar on small screens) -->
+        <button
+          class="topbar-hamburger"
+          type="button"
+          aria-label="Open navigation"
+          @click="sidebarOpen = true"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </button>
+
+        <!-- Breadcrumb -->
+        <div class="top__crumbs">
+          <span class="crumb">Corrosion</span>
+          <span class="crumb__sep">/</span>
+          <span class="crumb crumb--cluster">{{ serverName }}</span>
+        </div>
+
+        <!-- Search -->
+        <div class="top__search">
+          <svg class="top__search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+          </svg>
+          <input placeholder="Search servers, players, configs…" readonly />
+          <span class="top__kbd">
+            <kbd class="cc-kbd">⌘</kbd><kbd class="cc-kbd">K</kbd>
+          </span>
+        </div>
+
+        <!-- Actions -->
+        <div class="top__actions">
+          <IconButton
+            :icon="themeIcon"
+            label="Toggle theme"
+            @click="toggleTheme"
+          />
+          <IconButton icon="bell" label="Alerts" @click="router.push('/alerts')" />
+          <Button size="sm" icon="rocket">Deploy server</Button>
+          <Avatar
+            :name="userName"
+            :size="30"
+            status="online"
+          />
+        </div>
+      </header>
+
+      <!-- Page content -->
+      <main class="app__content">
         <RouterView />
       </main>
     </div>
+  </div>
 </template>
+
+<style>
+/* ============================================================ SHELL ===== */
+html, body { height: 100%; }
+body { margin: 0; overflow: hidden; }
+
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 228px) 1fr;
+  height: 100vh;
+  background: var(--surface-canvas, #0a0a0b);
+}
+
+/* ---- Sidebar ---- */
+.app__sidebar {
+  background: var(--surface-base);
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  z-index: 50;
+}
+
+.side__brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 16px 12px;
+}
+
+.side__ver {
+  font-family: var(--font-mono);
+}
+
+.side__game {
+  padding: 2px 14px 13px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.side__lbl {
+  margin-bottom: 7px;
+}
+
+.side__lbl--platform {
+  color: var(--accent-text);
+}
+
+.side__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 13px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.side__sec {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.side__sec .t-eyebrow {
+  margin: 0 0 5px 10px;
+}
+
+.side__foot {
+  padding: 11px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.agent {
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 11px;
+}
+
+.agent__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent__name {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.agent__meta {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 5px;
+  padding-left: 16px;
+}
+
+.agent--empty { opacity: 0.7; }
+
+.agent__name--muted {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.side__user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  padding: 4px 2px 0;
+}
+
+.side__user-name {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side__logout {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  flex: none;
+}
+.side__logout:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+/* ---- Main ---- */
+.app__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.app__topbar {
+  height: var(--topbar-h, 52px);
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-base);
+}
+
+.top__crumbs {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: var(--text-sm);
+}
+
+.crumb { color: var(--text-tertiary); }
+.crumb__sep { color: var(--text-muted); }
+.crumb--cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-primary);
+  font-weight: 600;
+  background: var(--surface-raised-2);
+  border: 0;
+  box-shadow: var(--ring-default);
+  height: 30px;
+  padding: 0 10px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+}
+
+.top__search {
+  flex: 1;
+  max-width: 440px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 34px;
+  padding: 0 11px;
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--text-tertiary);
+}
+
+.top__search-icon { flex: none; }
+
+.top__search input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  cursor: default;
+}
+
+.top__search input::placeholder { color: var(--text-muted); }
+
+.top__kbd { display: flex; gap: 3px; }
+
+.top__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.app__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px 24px 40px;
+}
+
+/* ---- Mobile hamburger ---- */
+.topbar-hamburger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  flex: none;
+}
+.topbar-hamburger:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+/* ---- Sidebar overlay (mobile) ---- */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 49;
+}
+
+/* ---- Kbd styling ---- */
+.cc-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: var(--surface-active);
+  border-radius: var(--radius-xs, 3px);
+  box-shadow: var(--ring-default);
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  line-height: 1;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 900px) {
+  .app {
+    grid-template-columns: 1fr;
+  }
+
+  .app__sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 228px;
+    transform: translateX(-100%);
+    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .app__sidebar--open {
+    transform: translateX(0);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .topbar-hamburger {
+    display: inline-flex;
+  }
+
+  .top__search {
+    display: none;
+  }
+}
+</style>

frontend/src/components/layout/MarketingLayout.vue

@@ -1,76 +1,80 @@
 <script setup lang="ts">
 import { RouterView, RouterLink } from 'vue-router'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+import '@/styles/marketing.css'
 
-const panelUrl = import.meta.env.VITE_PANEL_URL || ''
+const panelUrl = import.meta.env.VITE_PANEL_URL ?? ''
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex flex-col">
-    <!-- Navigation -->
-    <nav class="border-b border-neutral-800 bg-neutral-950/80 backdrop-blur-sm sticky top-0 z-50">
-      <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-        <RouterLink :to="{ name: 'landing' }" class="flex items-center gap-3">
-          <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
-          <span class="text-lg font-bold text-neutral-100">Corrosion</span>
+  <div>
+    <!-- Nav -->
+    <nav class="mkt-nav">
+      <div class="wrap mkt-nav__in">
+        <RouterLink :to="{ name: 'landing' }" class="brand">
+          <span class="mark"><CorrosionMark :size="26" /></span>
+          <b>Corrosion</b>
         </RouterLink>
-        <div class="hidden md:flex items-center gap-6">
-          <RouterLink :to="{ name: 'how-it-works' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">How It Works</RouterLink>
-          <RouterLink :to="{ name: 'pricing' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Pricing</RouterLink>
-          <RouterLink :to="{ name: 'roadmap' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Roadmap</RouterLink>
-          <RouterLink :to="{ name: 'faq' }" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">FAQ</RouterLink>
+        <div class="mkt-nav__links">
+          <RouterLink :to="{ name: 'landing' }" class="scroll-link">Features</RouterLink>
+          <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
+          <RouterLink :to="{ name: 'how-it-works' }">How it works</RouterLink>
+          <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
+          <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
         </div>
-        <div class="flex items-center gap-3">
-          <a :href="panelUrl + '/login'" class="text-sm text-neutral-400 hover:text-neutral-100 transition-colors">Sign In</a>
-          <a :href="panelUrl + '/register'" class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors">Get Started</a>
+        <div class="mkt-nav__cta">
+          <a class="mkt-nav__signin" :href="panelUrl + '/login'">Sign in</a>
+          <RouterLink class="btn btn--primary btn--sm" :to="{ name: 'early-access' }">
+            Early access
+          </RouterLink>
         </div>
       </div>
     </nav>
 
     <!-- Page content -->
-    <main class="flex-1">
     <RouterView />
-    </main>
 
     <!-- Footer -->
-    <footer class="border-t border-neutral-800 py-12">
-      <div class="max-w-6xl mx-auto px-6">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Product</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'how-it-works' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">How It Works</RouterLink>
-              <RouterLink :to="{ name: 'pricing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Pricing</RouterLink>
-              <RouterLink :to="{ name: 'roadmap' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Roadmap</RouterLink>
+    <footer class="mkt-footer">
+      <div class="wrap">
+        <div class="footer__cols">
+          <div class="footer__brand">
+            <RouterLink :to="{ name: 'landing' }" class="brand">
+              <span class="mark"><CorrosionMark :size="24" /></span>
+              <b>Corrosion</b>
+            </RouterLink>
+            <p>Game server operations for self-hosted communities.</p>
+          </div>
+          <div class="footer__col">
+            <h5>Product</h5>
+            <RouterLink :to="{ name: 'landing' }">Supported games</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Features</RouterLink>
+            <RouterLink :to="{ name: 'pricing' }">Pricing</RouterLink>
+            <RouterLink :to="{ name: 'roadmap' }">Roadmap</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Games</h5>
+            <RouterLink :to="{ name: 'landing' }">Rust</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Dune: Awakening</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Soulmask</RouterLink>
+            <RouterLink :to="{ name: 'landing' }">Conan Exiles</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Support</h5>
+            <RouterLink :to="{ name: 'faq' }">FAQ</RouterLink>
+            <a href="https://discord.gg/corrosion" target="_blank" rel="noopener">Discord</a>
+            <RouterLink to="/status">Status</RouterLink>
+          </div>
+          <div class="footer__col">
+            <h5>Company</h5>
+            <RouterLink :to="{ name: 'landing' }">About</RouterLink>
+            <RouterLink :to="{ name: 'roadmap' }">Changelog</RouterLink>
+            <a href="mailto:support@corrosionmgmt.com">Contact</a>
           </div>
         </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Support</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'faq' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">FAQ</RouterLink>
-              <a href="https://discord.gg/corrosion" target="_blank" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Discord</a>
-            </div>
-          </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Company</h4>
-            <div class="space-y-2">
-              <RouterLink :to="{ name: 'landing' }" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">About</RouterLink>
-              <RouterLink to="/status" class="block text-sm text-neutral-500 hover:text-neutral-300 transition-colors">Status</RouterLink>
-            </div>
-          </div>
-          <div>
-            <h4 class="text-sm font-semibold text-neutral-300 mb-3">Legal</h4>
-            <div class="space-y-2">
-              <span class="block text-sm text-neutral-600">Terms of Service</span>
-              <span class="block text-sm text-neutral-600">Privacy Policy</span>
-            </div>
-          </div>
-        </div>
-        <div class="border-t border-neutral-800 pt-6 flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-            <span class="text-sm text-neutral-600">&copy; 2026 Corrosion. All rights reserved.</span>
-          </div>
-          <span class="text-xs text-neutral-700">The Control Plane for Rust Servers.</span>
+        <div class="footer__bar">
+          <span>&copy; 2026 Corrosion. All rights reserved.</span>
+          <span>One control plane. Every game.</span>
         </div>
       </div>
     </footer>

frontend/src/components/layout/PublicLayout.vue

@@ -1,16 +1,33 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import Logo from '@/components/ds/brand/Logo.vue'
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950">
+  <div class="pub-shell">
     <RouterView />
 
-    <footer class="py-6 text-center text-neutral-600 text-sm border-t border-neutral-800">
-      <div class="flex items-center justify-center gap-2">
-        <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-        <span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
-      </div>
+    <footer class="pub-footer">
+      <Logo :size="18" :wordmark="true" />
     </footer>
   </div>
 </template>
+
+<style scoped>
+.pub-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  flex-direction: column;
+}
+
+.pub-footer {
+  margin-top: auto;
+  padding: var(--space-6) var(--space-6);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+</style>

frontend/src/components/loot/LootContainerSidebar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustContainers, containerCategories } from '@/data/rust-containers'
-import { Search, Box, Cylinder, Shield, Users, HelpCircle } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const props = defineProps<{
   lootTable: Record<string, any>
@@ -14,20 +15,21 @@ const emit = defineEmits<{
 
 const searchQuery = ref('')
 
-const categoryIcons: Record<string, any> = {
-  crates: Box,
-  barrels: Cylinder,
-  military: Shield,
-  npcs: Users,
-  other: HelpCircle,
+// Map container categories to DS icon names
+const categoryIcons: Record<string, string> = {
+  crates: 'box',
+  barrels: 'flask-conical',
+  military: 'shield',
+  npcs: 'users',
+  other: 'info',
 }
 
 const categoryLabels: Record<string, string> = {
-  crates: 'CRATES',
-  barrels: 'BARRELS',
-  military: 'MILITARY',
+  crates: 'Crates',
+  barrels: 'Barrels',
+  military: 'Military',
   npcs: 'NPCs',
-  other: 'OTHER',
+  other: 'Other',
 }
 
 const filteredContainers = computed(() => {
@@ -56,48 +58,136 @@ function isConfigured(prefab: string): boolean {
 </script>
 
 <template>
-  <div class="w-64 shrink-0 bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden flex flex-col">
+  <aside class="lcs-root">
     <!-- Search -->
-    <div class="p-3 border-b border-neutral-800">
-      <div class="relative">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
+    <div class="lcs-search">
+      <DsInput
         v-model="searchQuery"
-          placeholder="Search containers..."
-          class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200 placeholder-neutral-500"
+        icon="search"
+        placeholder="Search containers…"
+        size="sm"
       />
     </div>
+
+    <!-- Container list -->
+    <div class="lcs-list">
+      <template v-for="(containers, category) in groupedContainers" :key="category">
+        <!-- Category heading -->
+        <div class="lcs-cat">
+          <Icon
+            :name="categoryIcons[category] ?? 'box'"
+            :size="12"
+            class="lcs-cat__icon"
+          />
+          <span class="lcs-cat__label">{{ categoryLabels[category] ?? category }}</span>
         </div>
 
-    <!-- Container List -->
-    <div class="flex-1 overflow-y-auto py-2">
-      <template v-for="(containers, category) in groupedContainers" :key="category">
-        <div class="px-3 pt-3 pb-1">
-          <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-            <component :is="categoryIcons[category]" class="w-3 h-3" />
-            {{ categoryLabels[category] || category }}
-          </div>
-        </div>
+        <!-- Container rows -->
         <button
           v-for="c in containers"
           :key="c.prefab"
+          class="lcs-item"
+          :class="{ 'lcs-item--active': selected === c.prefab }"
           @click="emit('select', c.prefab)"
-          class="w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors"
-          :class="selected === c.prefab
-            ? 'bg-oxide-500/10 text-oxide-400'
-            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
         >
-          <span class="truncate flex-1">{{ c.name }}</span>
-          <span
-            v-if="isConfigured(c.prefab)"
-            class="w-1.5 h-1.5 rounded-full bg-oxide-500 shrink-0"
-          />
+          <span class="lcs-item__name">{{ c.name }}</span>
+          <span v-if="isConfigured(c.prefab)" class="lcs-item__dot" />
         </button>
       </template>
 
-      <div v-if="Object.keys(groupedContainers).length === 0" class="px-3 py-6 text-center text-neutral-500 text-sm">
+      <div v-if="Object.keys(groupedContainers).length === 0" class="lcs-empty">
         No containers match
       </div>
     </div>
-  </div>
+  </aside>
 </template>
+
+<style scoped>
+.lcs-root {
+  width: 240px;
+  flex: none;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.lcs-search {
+  padding: 10px 10px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.lcs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+/* Category heading */
+.lcs-cat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px 4px;
+}
+.lcs-cat__icon {
+  color: var(--text-muted);
+  flex: none;
+}
+.lcs-cat__label {
+  font-size: var(--text-2xs, 10px);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--text-muted);
+}
+
+/* Container row */
+.lcs-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-align: left;
+  transition: var(--transition-colors);
+  border-radius: 0;
+}
+.lcs-item:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lcs-item--active {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+.lcs-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lcs-item__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+}
+
+.lcs-empty {
+  padding: 20px 12px;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+</style>

frontend/src/components/loot/LootGroupEditor.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustItems } from '@/data/rust-items'
-import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 import type { LootGroupProfile } from '@/types'
 
 const props = defineProps<{
@@ -65,120 +71,260 @@ function updateGroupItemField(groupName: string, shortname: string, field: strin
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Add Group -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex gap-2">
-        <input
+  <div class="lge-root">
+    <!-- Add group panel -->
+    <Panel>
+      <div class="lge-add">
+        <DsInput
           v-model="newGroupName"
-          placeholder="New group name..."
-          class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+          placeholder="New group name…"
           @keydown.enter="addGroup"
         />
-        <button
-          @click="addGroup"
+        <Button
+          icon="plus"
           :disabled="!newGroupName.trim()"
-          class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+          @click="addGroup"
         >
-          <Plus class="w-4 h-4" />
-          Add Group
-        </button>
-      </div>
+          Add group
+        </Button>
       </div>
+    </Panel>
 
-    <!-- Group List -->
-    <div v-if="groupEntries.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
-      No loot groups defined. Groups let you create reusable item pools that can be assigned to multiple containers.
-    </div>
+    <!-- Empty state -->
+    <Panel v-if="groupEntries.length === 0">
+      <EmptyState
+        icon="layers"
+        title="No loot groups"
+        description="Groups let you create reusable item pools that can be assigned to multiple containers."
+      />
+    </Panel>
 
+    <!-- Group cards -->
     <div
       v-for="entry in groupEntries"
       :key="entry.name"
-      class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden"
+      class="lge-card"
     >
-      <!-- Group Header -->
+      <!-- Group header -->
       <button
+        class="lge-card__head"
         @click="toggleGroup(entry.name)"
-        class="w-full flex items-center justify-between px-4 py-3 hover:bg-neutral-800/50 transition-colors"
       >
-        <div class="flex items-center gap-3">
-          <component
-            :is="expandedGroup === entry.name ? ChevronDown : ChevronRight"
-            class="w-4 h-4 text-neutral-500"
+        <Icon
+          :name="expandedGroup === entry.name ? 'chevron-down' : 'chevron-right'"
+          :size="16"
+          class="lge-card__chevron"
         />
-          <span class="text-neutral-200 font-medium">{{ entry.name }}</span>
-          <span class="text-xs text-neutral-500">{{ entry.itemCount }} items</span>
-        </div>
-        <button
+        <span class="lge-card__name">{{ entry.name }}</span>
+        <Badge tone="neutral" mono>{{ entry.itemCount }}</Badge>
+        <IconButton
+          icon="trash-2"
+          variant="danger"
+          size="sm"
+          label="Delete group"
+          class="lge-card__del"
           @click.stop="deleteGroup(entry.name)"
-          class="text-neutral-600 hover:text-red-400 transition-colors p-1"
-        >
-          <Trash2 class="w-4 h-4" />
-        </button>
+        />
       </button>
 
-      <!-- Group Items -->
-      <div v-if="expandedGroup === entry.name" class="border-t border-neutral-800 p-4">
-        <table v-if="entry.itemCount > 0" class="w-full text-sm">
+      <!-- Expanded items -->
+      <div v-if="expandedGroup === entry.name" class="lge-card__body">
+        <table v-if="entry.itemCount > 0" class="lge-table">
           <thead>
-            <tr class="border-b border-neutral-800">
-              <th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
-              <th class="w-10"></th>
+            <tr>
+              <th class="lge-th">Item</th>
+              <th class="lge-th lge-th--num">Min</th>
+              <th class="lge-th lge-th--num">Max</th>
+              <th class="lge-th lge-th--num">Prob %</th>
+              <th class="lge-th lge-th--action"></th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="(itemData, shortname) in entry.data.ItemList"
               :key="shortname"
-              class="border-b border-neutral-800/50"
+              class="lge-tr"
             >
-              <td class="py-2 px-2 text-neutral-200">{{ getItemName(shortname as string) }}</td>
-              <td class="py-2 px-2">
+              <td class="lge-td">{{ getItemName(shortname as string) }}</td>
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Min ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Min', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Max ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Max', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Probability ?? 100"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Probability', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                   max="100"
                 />
               </td>
-              <td class="py-2 px-2">
-                <button
+              <td class="lge-td lge-td--action">
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Remove item"
                   @click="removeItemFromGroup(entry.name, shortname as string)"
-                  class="text-neutral-600 hover:text-red-400"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </td>
             </tr>
           </tbody>
         </table>
-        <p v-else class="text-neutral-500 text-sm text-center py-4">
+        <p v-else class="lge-card__empty">
           No items in this group yet. Add items from the container editor.
         </p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.lge-root {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Add group row */
+.lge-add {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+.lge-add > :first-child {
+  flex: 1;
+}
+
+/* Group card */
+.lge-card {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.lge-card__head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  text-align: left;
+  transition: var(--transition-colors);
+}
+.lge-card__head:hover {
+  background: var(--surface-hover);
+}
+.lge-card__chevron {
+  color: var(--text-muted);
+  flex: none;
+}
+.lge-card__name {
+  flex: 1;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.lge-card__del {
+  margin-left: auto;
+  flex: none;
+}
+
+/* Expanded body */
+.lge-card__body {
+  border-top: 1px solid var(--border-subtle);
+  padding: 12px;
+}
+.lge-card__empty {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+  padding: 16px 0 8px;
+}
+
+/* Table */
+.lge-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.lge-th {
+  padding: 6px 10px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+.lge-th--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-th--action {
+  width: 40px;
+}
+.lge-tr {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lge-tr:last-child {
+  border-bottom: 0;
+}
+.lge-tr:hover {
+  background: var(--surface-hover);
+}
+.lge-td {
+  padding: 7px 10px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+.lge-td--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-td--action {
+  width: 40px;
+  padding: 4px 6px;
+}
+
+/* Shared number input (same as LootItemEditor) */
+.cc-num-input {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 5px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  outline: none;
+  transition: var(--transition-colors);
+}
+.cc-num-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-num-input--center {
+  text-align: center;
+}
+</style>