feat(all): implement breadcrumbs and several frontend and UI improvements

Author: Lasim

services/backend/api-spec.json

@@ -18065,9 +18065,17 @@
                     "description": "Website URL"
                   },
                   "icon_url": {
-                    "type": "string",
-                    "format": "uri",
-                    "description": "Icon/logo URL"
+                    "oneOf": [
+                      {
+                        "type": "string",
+                        "maxLength": 0
+                      },
+                      {
+                        "type": "string",
+                        "format": "uri"
+                      }
+                    ],
+                    "description": "Icon/logo URL (empty string or valid URI)"
                   },
                   "github_account_id": {
                     "type": "string",
@@ -18708,9 +18716,17 @@
                     "description": "Website URL"
                   },
                   "icon_url": {
-                    "type": "string",
-                    "format": "uri",
-                    "description": "Icon/logo URL"
+                    "oneOf": [
+                      {
+                        "type": "string",
+                        "maxLength": 0
+                      },
+                      {
+                        "type": "string",
+                        "format": "uri"
+                      }
+                    ],
+                    "description": "Icon/logo URL (empty string or valid URI)"
                   },
                   "github_account_id": {
                     "type": "string",

services/backend/api-spec.yaml

@@ -12698,9 +12698,12 @@ paths:
                   format: uri
                   description: Website URL
                 icon_url:
-                  type: string
-                  format: uri
-                  description: Icon/logo URL
+                  oneOf:
+                    - type: string
+                      maxLength: 0
+                    - type: string
+                      format: uri
+                  description: Icon/logo URL (empty string or valid URI)
                 github_account_id:
                   type: string
                   description: GitHub Account ID (owner.id from GitHub API)
@@ -13180,9 +13183,12 @@ paths:
                   format: uri
                   description: Website URL
                 icon_url:
-                  type: string
-                  format: uri
-                  description: Icon/logo URL
+                  oneOf:
+                    - type: string
+                      maxLength: 0
+                    - type: string
+                      format: uri
+                  description: Icon/logo URL (empty string or valid URI)
                 github_account_id:
                   type: string
                   description: GitHub Account ID (owner.id from GitHub API)

services/backend/src/routes/mcp/servers/schemas.ts

@@ -55,7 +55,13 @@ const SERVER_FIELDS = {
   repository_subfolder: { type: 'string', description: 'Subfolder path for monorepos' },
   git_branch: { type: 'string', description: 'Git branch (defaults to main)' },
   website_url: { type: 'string', format: 'uri', description: 'Website URL' },
-  icon_url: { type: 'string', format: 'uri', description: 'Icon/logo URL' },
+  icon_url: {
+    oneOf: [
+      { type: 'string', maxLength: 0 },
+      { type: 'string', format: 'uri' }
+    ],
+    description: 'Icon/logo URL (empty string or valid URI)'
+  },
   language: { type: 'string', minLength: 1, description: 'Programming language is required' },
   runtime: { type: 'string', minLength: 1, description: 'Runtime environment is required' },
   transport_type: { type: 'string', enum: ['stdio', 'http', 'sse'], description: 'MCP transport type' },
@@ -582,9 +588,11 @@ export const CREATE_GLOBAL_SERVER_REQUEST_SCHEMA = {
       description: 'Website URL'
     },
     icon_url: {
-      type: 'string',
-      format: 'uri',
-      description: 'Icon/logo URL'
+      oneOf: [
+        { type: 'string', maxLength: 0 },
+        { type: 'string', format: 'uri' }
+      ],
+      description: 'Icon/logo URL (empty string or valid URI)'
     },
     github_account_id: {
       type: 'string',

services/backend/src/utils/banner.ts

@@ -15,7 +15,7 @@ export const displayStartupBanner = (port: number, logger: FastifyBaseLogger): v
   ║  \x1b[38;5;93m██████╔╝███████╗██║     ███████╗╚██████╔╝   ██║   ███████║   ██║   ██║  ██║╚██████╗██║  ██╗\x1b[38;5;51m  
   ║  \x1b[38;5;93m╚═════╝ ╚══════╝╚═╝     ╚══════╝ ╚═════╝    ╚═╝   ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝\x1b[38;5;51m  
   ║                                                                                               
-  ║         \x1b[38;5;82mDeployStack CI/CD Backend \x1b[38;5;196mv${version}\x1b[38;5;51m                                                      
+  ║         \x1b[38;5;82mDeployStack Backend \x1b[38;5;196mv${version}\x1b[38;5;51m                                                      
   ║         \x1b[38;5;82mRunning on port \x1b[38;5;196m${port}\x1b[38;5;51m                                                                  
   ║         \x1b[38;5;82mEnvironment: \x1b[38;5;196m${process.env.NODE_ENV || 'development'}\x1b[38;5;51m                                                              
   ║                                                                                               

services/backend/tests/unit/utils/banner.test.ts

@@ -84,7 +84,7 @@ describe('banner.ts', () => {
       const bannerOutput = logCall[1] as string;
       // Check for parts of the ASCII art
       expect(bannerOutput).toContain('██████╗ ███████╗██████╗ ██╗      ██████╗ ██╗   ██╗███████╗████████╗ █████╗  ██████╗██╗  ██╗');
-      expect(bannerOutput).toContain('DeployStack CI/CD Backend');
+      expect(bannerOutput).toContain('DeployStack Backend');
     });
 
     it('should include ANSI color codes', () => {
@@ -177,7 +177,7 @@ describe('banner.ts', () => {
       expect(bannerOutput).toContain('╔═══'); // Top border
       expect(bannerOutput).toContain('╚═══'); // Bottom border
       expect(bannerOutput).toContain('║'); // Side borders
-      expect(bannerOutput).toContain('DeployStack CI/CD Backend');
+      expect(bannerOutput).toContain('DeployStack Backend');
       expect(bannerOutput).toContain('Running on port');
       expect(bannerOutput).toContain('Environment:');
     });

services/frontend/src/components/DashboardLayout.vue

@@ -1,44 +1,30 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { StyleValue } from 'vue'
-import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
 import AppSidebar from '@/components/AppSidebar.vue'
-
-interface Props {
-  title: string
-}
-const props = defineProps<Props>()
+import SiteHeader from '@/components/SiteHeader.vue'
 
 // TODO: Implement cookie-based persistence for defaultOpen if needed, like in the shadcn/ui example.
 // For now, defaulting to true.
 const defaultOpen = true
 
 // Define sidebar width using custom values
-// Override the collapsed width to 30rem for testing
 const sidebarStyle = computed(() => ({
   '--sidebar-width': '16rem',
   '--sidebar-width-mobile': '18rem',
   '--sidebar-width-icon': '4rem',
 } as StyleValue))
-
-// A simple ref for the SiteHeader, can be expanded later
-// For now, just using the title prop.
 </script>
 
 <template>
   <SidebarProvider :default-open="defaultOpen" :style="sidebarStyle">
     <AppSidebar variant="inset" />
     <SidebarInset class="px-5">
-      <!-- SiteHeader equivalent -->
-      <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-        <div class="flex items-center gap-2 px-4">
-          <SidebarTrigger class="-ml-1" />
-          <h1 class="text-lg font-semibold md:text-xl">{{ props.title }}</h1>
-        </div>
-      </header>
+      <SiteHeader />
 
-      <Separator class="my-6 max-w-7xl" />
+      <Separator class="mb-6 max-w-7xl" />
 
       <!-- Content area -->
       <div class="flex flex-1 flex-col gap-4 py-4 pt-0 max-w-7xl">

services/frontend/src/components/SiteHeader.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+import { Separator } from '@/components/ui/separator'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
+
+const { breadcrumbs } = useBreadcrumbs()
+</script>
+
+<template>
+  <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+    <div class="flex items-center gap-2 px-4">
+      <SidebarTrigger class="-ml-1" />
+      <Separator orientation="vertical" class="mr-2! h-4! bg-muted-foreground/50" />
+      <Breadcrumb>
+        <BreadcrumbList>
+          <template v-for="(item, index) in breadcrumbs" :key="index">
+            <BreadcrumbItem :class="{ 'hidden md:block': index < breadcrumbs.length - 1 }">
+              <BreadcrumbLink v-if="item.href" as-child>
+                <RouterLink :to="item.href">
+                  {{ item.label }}
+                </RouterLink>
+              </BreadcrumbLink>
+              <BreadcrumbPage v-else>
+                {{ item.label }}
+              </BreadcrumbPage>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator
+              v-if="index < breadcrumbs.length - 1"
+              class="hidden md:block"
+            />
+          </template>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  </header>
+</template>

services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue

@@ -66,6 +66,7 @@ interface McpServerAddFormData {
     auto_install_new_default_team: boolean
     transport_type: string
     website_url: string
+    icon_url: string
   }
 }
 
@@ -192,7 +193,8 @@ const formData = ref<McpServerAddFormData>({
     featured: false,
     auto_install_new_default_team: false,
     transport_type: 'auto',
-    website_url: ''
+    website_url: '',
+    icon_url: ''
   }
 })
 
@@ -374,6 +376,7 @@ const autoPopulateFromGitHub = (repositoryData: any) => {
     license: repositoryData.license?.spdx_id || repositoryData.license || '',
     tags: repositoryData.topics || repositoryData.tags || [],
     website_url: repositoryData.homepage || '',
+    icon_url: repositoryData.owner?.avatar_url || repositoryData.icon_url || '',
     // Keep existing values for these properties
     featured: formData.value.basic.featured,
     auto_install_new_default_team: formData.value.basic.auto_install_new_default_team,
@@ -437,6 +440,7 @@ const submitForm = async () => {
       tags: formData.value.basic.tags,
       featured: formData.value.basic.featured,
       auto_install_new_default_team: formData.value.basic.auto_install_new_default_team,
+      icon_url: formData.value.basic.icon_url,
 
       // New Configuration Schema (ADR-007)
       configuration_schema: formData.value.configuration_schema,

services/frontend/src/components/admin/mcp-catalog/steps/BasicInfoStepAdd.vue

@@ -18,13 +18,13 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Switch } from '@/components/ui/switch'
 import { X, Plus, CheckCircle } from 'lucide-vue-next'
+import { DynamicIcon } from '@/components/ui/dynamic-icon'
 import type { BasicInfoFormData } from '@/views/admin/mcp-server-catalog/types'
 import { useCategories } from '@/composables/admin/mcp-catalog/useCategories'
 import { useTagManager } from '@/composables/admin/mcp-catalog/useTagManager'
@@ -66,6 +66,11 @@ const isAutoPopulated = computed(() => {
   return props.formData?.github?.auto_populated || false
 })
 
+// Get selected category for displaying icon in trigger
+const selectedCategory = computed(() => {
+  return categories.value.find(c => c.id === localData.value.category_id)
+})
+
 // Update field helper
 const updateField = <K extends keyof BasicInfoFormData>(field: K, value: BasicInfoFormData[K]) => {
   const newData = {
@@ -125,19 +130,31 @@ loadCategories()
             :disabled="categoriesLoading"
           >
             <SelectTrigger>
-              <SelectValue
-                :placeholder="categoriesLoading
-                  ? 'Loading categories...'
-                  : t('mcpCatalog.form.basic.category.placeholder')"
-              />
+              <div class="flex items-center gap-2">
+                <DynamicIcon
+                  v-if="selectedCategory?.icon"
+                  :name="selectedCategory.icon"
+                  class="h-4 w-4 shrink-0 text-muted-foreground"
+                />
+                <span class="truncate">
+                  {{ selectedCategory?.name || (categoriesLoading ? 'Loading categories...' : t('mcpCatalog.form.basic.category.placeholder')) }}
+                </span>
+              </div>
             </SelectTrigger>
             <SelectContent>
               <SelectItem
                 v-for="category in categories"
                 :key="category.id"
                 :value="category.id"
               >
-                {{ category.name }}
+                <div class="flex items-center gap-2">
+                  <DynamicIcon
+                    v-if="category.icon"
+                    :name="category.icon"
+                    class="h-4 w-4 shrink-0 text-muted-foreground"
+                  />
+                  <span>{{ category.name }}</span>
+                </div>
               </SelectItem>
             </SelectContent>
           </Select>
@@ -273,6 +290,20 @@ loadCategories()
           />
         </SharedFormField>
 
+        <!-- Icon URL -->
+        <SharedFormField
+          label="Icon URL"
+          description="URL to the server icon image (auto-generated from GitHub avatar if not provided)"
+        >
+          <Input
+            id="icon_url"
+            :model-value="localData.icon_url"
+            @update:model-value="(value) => updateField('icon_url', String(value))"
+            placeholder="https://example.com/icon.png"
+            type="url"
+          />
+        </SharedFormField>
+
         <!-- Tags -->
         <SharedFormField
           :label="t('mcpCatalog.form.basic.tags.label')"