+
+
+```
+
+## UI Components and Styling
+
+### TailwindCSS Integration
+
+The frontend uses TailwindCSS for styling with the shadcn-vue component library for consistent UI elements.
+
+#### Installing New shadcn-vue Components
+
+```bash
+npx shadcn-vue@latest add button
+npx shadcn-vue@latest add input
+npx shadcn-vue@latest add dialog
+```
+
+#### Custom Component Example
+
+```vue
+
+ {{ displayTitle }}
+ +
+
+
+```
+
+### Icons
+
+The project uses Lucide Icons through the `lucide-vue-next` package.
+
+#### Using Icons
+
+```vue
+
+
+
+ + MCP Server Status +
+
+
+ Running
+
+
+
+
+
+```
+
+## Environment Configuration
+
+The frontend supports environment variables for both development and production environments.
+
+### Development Environment
+
+Create a `.env` file in the `services/frontend` directory:
+
+```bash
+VITE_API_URL=http://localhost:3000
+VITE_APP_TITLE=DeployStack (Development)
+VITE_ENABLE_DEBUG=true
+```
+
+### Production Environment
+
+Environment variables can be passed to the Docker container:
+
+```bash
+docker run -it -p 80:80 \
+ -e VITE_API_URL="https://api.deploystack.io" \
+ -e VITE_APP_TITLE="DeployStack" \
+ -e VITE_ENABLE_DEBUG="false" \
+ deploystack/frontend:latest
+```
+
+### Accessing Environment Variables
+
+Use the `getEnv` utility function for consistent access:
+
+```typescript
+import { getEnv } from '@/utils/env'
+
+// In your components
+const apiUrl = getEnv('VITE_API_URL')
+const appTitle = getEnv('VITE_APP_TITLE')
+const debugMode = getEnv('VITE_ENABLE_DEBUG') === 'true'
+```
+
+### Adding New Environment Variables
+
+1. **Add type definitions** in `env.d.ts`:
+
+```typescript
+interface ImportMetaEnv {
+ readonly VITE_API_URL: string
+ readonly VITE_APP_TITLE: string
+ readonly VITE_ENABLE_DEBUG: string
+ readonly VITE_NEW_VARIABLE: string
+}
+
+interface Window {
+ RUNTIME_ENV?: {
+ VITE_API_URL?: string
+ VITE_APP_TITLE?: string
+ VITE_ENABLE_DEBUG?: string
+ VITE_NEW_VARIABLE?: string
+ // Non-VITE variables
+ CUSTOM_VAR?: string
+ }
+}
+```
+
+2. **For non-VITE variables** in Docker, update `env-config.sh`:
+
+```bash
+# Add specific non-VITE_ variables you want to expose
+for var in CUSTOM_VAR OTHER_VAR; do
+ # Script logic here
+done
+```
+
+## API Integration
+
+### Service Layer Pattern
+
+The frontend uses a service layer pattern for API communication:
+
+```typescript
+// services/mcpServerService.ts
+export class McpServerService {
+ private static baseUrl = getEnv('VITE_API_URL')
+
+ static async getAllServers(): Promise
+
+
+
+
+
+
+
+
+
+```
+
+### Advanced Usage with Computed Properties
+
+```vue
+
+
+
+ {{ $t('mcpServers.title') }}
+ + +{{ t('mcpServers.subtitle') }}
+ + +{{ $t('common.validation.minLength', { min: 8 }) }}
+ + + + + +{{ $t('common.messages.loading') }}
+
+
+ {{ statusText }}
+
+
+
+
+```
+
+### Form Validation with i18n
+
+```vue
+
+
+
+
+
+```
+
+## Adding New Languages
+
+### 1. Create Language Directory
+
+```bash
+mkdir -p src/i18n/locales/de
+```
+
+### 2. Create Translation Files
+
+Start with the common translations:
+
+```typescript
+// src/i18n/locales/de/common.ts
+export default {
+ navigation: {
+ dashboard: 'Dashboard',
+ mcpServers: 'MCP Server',
+ deployments: 'Bereitstellungen',
+ settings: 'Einstellungen',
+ logout: 'Abmelden'
+ },
+
+ buttons: {
+ save: 'Speichern',
+ cancel: 'Abbrechen',
+ delete: 'Löschen',
+ edit: 'Bearbeiten',
+ create: 'Erstellen',
+ deploy: 'Bereitstellen',
+ stop: 'Stoppen',
+ restart: 'Neu starten',
+ view: 'Anzeigen',
+ download: 'Herunterladen'
+ },
+
+ // ... continue with other translations
+}
+```
+
+### 3. Create Locale Index
+
+```typescript
+// src/i18n/locales/de/index.ts
+import common from './common'
+import login from './login'
+import register from './register'
+// ... import other feature translations
+
+export default {
+ common,
+ login,
+ register,
+ // ... export other translations
+}
+```
+
+### 4. Update Main i18n Configuration
+
+```typescript
+// src/i18n/index.ts
+import en from './locales/en'
+import de from './locales/de'
+
+const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ fallbackLocale: 'en',
+ messages: {
+ en,
+ de // Add the new language
+ }
+})
+```
+
+## Language Switching
+
+### Language Selector Component
+
+```vue
+
+
+
+
+
+
+
+```
+
+## Best Practices
+
+### 1. Translation Key Naming
+
+Use descriptive, hierarchical naming:
+
+```typescript
+// Good
+'mcpServers.deployment.credentials.title'
+'common.validation.passwordTooShort'
+'dashboard.widgets.serverStatus.healthy'
+
+// Avoid
+'title'
+'error1'
+'msg'
+```
+
+### 2. Parameterized Messages
+
+Use parameters for dynamic content:
+
+```typescript
+// Translation file
+export default {
+ messages: {
+ welcomeUser: 'Welcome back, {userName}!',
+ itemsCount: 'You have {count} {count, plural, one {item} other {items}}',
+ deploymentTime: 'Deployed {timeAgo} ago'
+ }
+}
+
+// Usage
+t('messages.welcomeUser', { userName: 'John' })
+t('messages.itemsCount', { count: 5 })
+```
+
+### 3. Context-Aware Translations
+
+Group related translations together:
+
+```typescript
+export default {
+ serverStatus: {
+ running: {
+ label: 'Running',
+ description: 'Server is operating normally',
+ action: 'Stop Server'
+ },
+ stopped: {
+ label: 'Stopped',
+ description: 'Server is not running',
+ action: 'Start Server'
+ }
+ }
+}
+```
+
+### 4. Handle Missing Translations
+
+Always provide fallback values:
+
+```vue
+
+
+ {{ $t('page.title', 'Default Page Title') }}
+ +``` + +## TypeScript Integration + +### Translation Key Types + +Create type definitions for better IDE support: + +```typescript +// types/i18n.ts +export interface I18nMessages { + common: { + buttons: { + save: string + cancel: string + // ... other button translations + } + // ... other common translations + } + mcpServers: { + title: string + deployment: { + title: string + // ... other deployment translations + } + // ... other MCP server translations + } +} + +// Extend the vue-i18n module +declare module 'vue-i18n' { + export interface DefineLocaleMessage extends I18nMessages {} +} +``` + +### Typed Translation Function + +```typescript +import { useI18n } from 'vue-i18n' +import type { I18nMessages } from '@/types/i18n' + +// Create a typed version of the translation function +export function useTypedI18n() { + const { t, ...rest } = useI18n
+
+
+```
+
+### 5. Add Plugin State Management
+
+Create a Pinia store for your plugin:
+
+```typescript
+// src/plugins/mcp-metrics-plugin/store.ts
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export interface MetricsData {
+ totalServers: number
+ activeDeployments: number
+ totalRequests: number
+ responseTime: string
+ uptime: string
+ errorRate: string
+ throughput: string
+}
+
+export interface ChartDataPoint {
+ hour: number
+ requests: number
+ errors: number
+}
+
+export const useMetricsStore = defineStore('mcp-metrics', () => {
+ // State
+ const metrics = ref
+
+
+
+
+
+
+
+ + Comprehensive analytics and performance metrics for your MCP server deployments +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ detailedMetrics.responseTime }}
+ Avg Response Time
+
+
+
+
+
+
+
+ {{ detailedMetrics.uptime }}
+ Uptime
+
+
+
+
+
+
+
+ {{ detailedMetrics.errorRate }}
+ Error Rate
+
+
+
+
+
+
+ {{ detailedMetrics.throughput }}
+ Throughput
+
+
+ 24-Hour Request Pattern
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Registering Components at Extension Points
+
+In your plugin's initialize method:
+
+```typescript
+// Register a single component
+registerExtensionPoint(
+ 'dashboard-widgets', // Extension point ID
+ MetricsWidget, // Vue component
+ this.meta.id, // Plugin ID
+ {
+ order: 10, // Display order (optional)
+ props: { // Props to pass to component (optional)
+ refreshInterval: 30000
+ }
+ }
+)
+
+// Register multiple components
+registerExtensionPoint('action-buttons', RefreshButton, this.meta.id, { order: 1 })
+registerExtensionPoint('action-buttons', ExportButton, this.meta.id, { order: 2 })
+```
+
+### Conditional Rendering
+
+Show specific plugin components based on conditions:
+
+```vue
+
+
+ Dashboard
+ + + + + + + + +
+
+
+
+
+
+
+```
+
+#### Plugin State Issues
+
+```typescript
+// Debug plugin state
+class DebuggablePlugin implements Plugin {
+ async initialize(app: App, router: Router, pinia: Pinia) {
+ // Add global debug method
+ app.config.globalProperties.$debugPlugin = (pluginId: string) => {
+ console.log('Plugin Debug Info:', {
+ id: this.meta.id,
+ routes: router.getRoutes().filter(r => r.meta?.pluginId === pluginId),
+ stores: pinia._s,
+ extensionPoints: this.getRegisteredExtensionPoints()
+ })
+ }
+ }
+
+ private getRegisteredExtensionPoints() {
+ // Return extension points registered by this plugin
+ return []
+ }
+}
+```
+
+### Performance Debugging
+
+```typescript
+// Performance monitoring for plugins
+class PerformanceMonitoredPlugin implements Plugin {
+ async initialize(app: App, router: Router, pinia: Pinia) {
+ const startTime = performance.now()
+
+ try {
+ await this.doInitialization()
+
+ const endTime = performance.now()
+ console.log(`${this.meta.id} initialization took ${endTime - startTime}ms`)
+ } catch (error) {
+ const endTime = performance.now()
+ console.error(`${this.meta.id} failed after ${endTime - startTime}ms:`, error)
+ throw error
+ }
+ }
+
+ private async doInitialization() {
+ // Your plugin initialization logic
+ }
+}
+```
+
+This comprehensive plugin system documentation provides everything needed to create powerful, maintainable, and well-tested plugins for the DeployStack frontend. The modular architecture ensures that functionality can be extended cleanly while maintaining the core application's stability and performance.
diff --git a/docs/deploystack/development/frontend/router-optimization.mdx b/docs/deploystack/development/frontend/router-optimization.mdx
new file mode 100644
index 0000000..0117876
--- /dev/null
+++ b/docs/deploystack/development/frontend/router-optimization.mdx
@@ -0,0 +1,1022 @@
+---
+title: Router Optimization & Authentication Caching
+description: Complete guide to the router performance optimizations and smart authentication caching system implemented in DeployStack frontend.
+---
+
+# Router Optimization & Authentication Caching
+
+This guide documents the comprehensive optimization implemented to eliminate unnecessary API calls and improve navigation performance in the DeployStack frontend, particularly focusing on authentication flows and route-specific optimizations.
+
+## Overview
+
+The DeployStack frontend implements a smart caching and route optimization system that significantly reduces API calls while maintaining security and data freshness. This system addresses performance bottlenecks in user authentication flows and provides an optimal user experience.
+
+## Problem Analysis
+
+### Original Performance Issues
+
+Before optimization, the frontend exhibited several performance problems:
+
+1. **Redundant Authentication Calls**: `GET /api/users/me` was called multiple times during single navigation events
+2. **Unnecessary Public Route Checks**: Authentication verification on routes like `/login` and `/register` where users shouldn't be authenticated
+3. **Team Data Over-fetching**: `GET /api/users/me/teams` was called repeatedly across component mounts
+4. **Router Guard Inefficiency**: Navigation guards performed duplicate user checks within the same routing cycle
+
+### Performance Impact Measurements
+
+- **2+ API calls per navigation**: Router navigation guard was making redundant authentication checks
+- **Backend load**: Unauthenticated requests unnecessarily hitting the backend
+- **Poor user experience**: Network delays affecting navigation responsiveness
+- **Console pollution**: Authentication errors on public routes cluttering browser console
+
+## Solution Architecture
+
+### 1. Smart Caching Strategy
+
+The optimization implements an intelligent caching system with the following characteristics:
+
+#### Cache Design Principles
+
+```typescript
+interface CacheEntry {
+ data: User | null
+ timestamp: number
+ promise?: PromiseDebug Extension Points
+
+ {{ id }}: {{ point.length }} components
+
+ -
+
- + {{ ext.pluginId }} (order: {{ ext.options?.order || 0 }}) + +
+
+
+
+