chore: edit sidebar icons

Author: iBz-04

desktop/package.json

@@ -17,6 +17,8 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@hugeicons/core-free-icons": "^4.0.0",
+    "@hugeicons/vue": "^1.0.5",
     "@iconify-json/hugeicons": "^1.2.24",
     "@iconify-json/simple-icons": "^1.2.63",
     "@iconify/utils": "^3.1.0",

desktop/pnpm-lock.yaml

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { ToolCaseIcon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/vue'
 import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -8,14 +10,14 @@ const route = useRoute()
 const uiStore = useUIStateStore()
 const { state } = storeToRefs(uiStore)
 
-type LeafNavItem = { icon: string; label: string; to: string }
+type LeafNavItem = { icon?: string; hugeIcon?: object; label: string; to: string }
 type GroupNavItem = { icon: string; label: string; children: LeafNavItem[] }
 
 const isCollapsed = computed(() => state.value.leftSidebarCollapsed)
 
 const navItems: Array<LeafNavItem | GroupNavItem> = [
   { icon: 'hugeicons:dashboard-square-01', label: 'Dashboard', to: '/' },
-  { icon: 'hugeicons:tools', label: 'Tools', to: '/tools' },
+  { hugeIcon: ToolCaseIcon, label: 'Tools', to: '/tools' },
   { icon: 'hugeicons:calendar-03', label: 'Cron Jobs', to: '/cron-jobs' },
   { icon: 'hugeicons:puzzle', label: 'Integrations', to: '/integrations' },
   { icon: 'hugeicons:archive', label: 'Memory', to: '/memory' },
@@ -111,7 +113,7 @@ const getNavItemKey = (item: LeafNavItem | GroupNavItem) => (isGroupNavItem(item
                   : 'text-muted-foreground hover:text-foreground hover:bg-muted/25',
               ]"
             >
-              <Icon :icon="child.icon" class="size-4 shrink-0" />
+              <Icon :icon="child.icon ?? 'hugeicons:circle'" class="size-4 shrink-0" />
               <span>{{ child.label }}</span>
             </RouterLink>
           </div>
@@ -132,7 +134,15 @@ const getNavItemKey = (item: LeafNavItem | GroupNavItem) => (isGroupNavItem(item
           ]"
           :title="isCollapsed ? item.label : undefined"
         >
-          <Icon :icon="item.icon" class="size-[18px] shrink-0" />
+          <HugeiconsIcon
+            v-if="item.hugeIcon"
+            :icon="item.hugeIcon"
+            :size="18"
+            color="currentColor"
+            :stroke-width="1.5"
+            class="shrink-0"
+          />
+          <Icon v-else :icon="item.icon ?? 'hugeicons:circle'" class="size-[18px] shrink-0" />
           <span v-if="!isCollapsed">{{ item.label }}</span>
         </RouterLink>
       </template>

desktop/src/components/AppSidebar.vue

@@ -10,6 +10,13 @@ interface Integration {
   status: 'Available' | 'Active' | 'ComingSoon'
 }
 
+interface SkillCatalogEntry {
+  name: string
+  description: string
+  category?: string
+  status?: 'Available' | 'Active' | 'ComingSoon'
+}
+
 const auth = useAuthStore()
 const integrations = ref<Integration[]>([])
 const loading = ref(true)
@@ -101,7 +108,7 @@ function normalizeEntries(entries: Integration[]): Integration[] {
   }))
 }
 
-function normalizeResponse(response: Integration[] | { integrations?: Integration[] }): Integration[] {
+function normalizeIntegrationResponse(response: Integration[] | { integrations?: Integration[] }): Integration[] {
   if (Array.isArray(response)) {
     return normalizeEntries(response)
   }
@@ -111,6 +118,19 @@ function normalizeResponse(response: Integration[] | { integrations?: Integratio
   return []
 }
 
+function normalizeSkillsResponse(response: SkillCatalogEntry[] | { skills?: SkillCatalogEntry[] }): Integration[] {
+  const entries = Array.isArray(response)
+    ? response
+    : (response && Array.isArray(response.skills) ? response.skills : [])
+
+  return normalizeEntries(entries.map(skill => ({
+    name: skill.name,
+    description: skill.description,
+    category: skill.category ?? 'Skills',
+    status: skill.status ?? 'Active',
+  })))
+}
+
 function statusIcon(status: Integration['status']): string {
   if (status === 'Active') {
     return 'hugeicons:tick-02'
@@ -191,19 +211,50 @@ const integrationLogoMap: Record<string, IntegrationLogo> = {
   Android: { icon: 'simple-icons:android', color: '#3DDC84' },
 }
 
-function integrationIcon(name: string): string {
-  return integrationLogoMap[name]?.icon ?? 'hugeicons:puzzle'
+const skillIconMatchers: Array<{ pattern: RegExp, logo: IntegrationLogo }> = [
+  { pattern: /docx|word|document/, logo: { icon: 'simple-icons:microsoftword', color: '#2B579A' } },
+  { pattern: /xlsx|excel|sheet|spreadsheet/, logo: { icon: 'simple-icons:microsoftexcel', color: '#217346' } },
+  { pattern: /pptx|powerpoint|slides?|presentation/, logo: { icon: 'simple-icons:microsoftpowerpoint', color: '#B7472A' } },
+  { pattern: /pdf/, logo: { icon: 'simple-icons:adobeacrobatreader', color: '#EC1C24' } },
+  { pattern: /github/, logo: { icon: 'simple-icons:github' } },
+  { pattern: /slack/, logo: { icon: 'simple-icons:slack', color: '#4A154B' } },
+  { pattern: /notion/, logo: { icon: 'simple-icons:notion' } },
+  { pattern: /vercel/, logo: { icon: 'simple-icons:vercel' } },
+]
+
+function resolveIcon(name: string, category: string): IntegrationLogo | undefined {
+  if (category === 'Skills') {
+    for (const matcher of skillIconMatchers) {
+      if (matcher.pattern.test(name.toLowerCase())) {
+        return matcher.logo
+      }
+    }
+  }
+
+  return integrationLogoMap[name]
+}
+
+function integrationIcon(name: string, category: string): string {
+  const logo = resolveIcon(name, category)
+  if (logo) {
+    return logo.icon
+  }
+  if (category === 'Skills') {
+    return 'hugeicons:airplay-line'
+  }
+  return 'hugeicons:puzzle'
 }
 
-function integrationIconClass(name: string): string {
-  if (!integrationLogoMap[name]) {
+function integrationIconClass(name: string, category: string): string {
+  const logo = resolveIcon(name, category)
+  if (!logo) {
     return 'text-primary'
   }
-  return integrationLogoMap[name]?.color ? '' : 'text-foreground'
+  return logo.color ? '' : 'text-foreground'
 }
 
-function integrationIconStyle(name: string): { color: string } | undefined {
-  const color = integrationLogoMap[name]?.color
+function integrationIconStyle(name: string, category: string): { color: string } | undefined {
+  const color = resolveIcon(name, category)?.color
   return color ? { color } : undefined
 }
 
@@ -214,18 +265,33 @@ async function fetchIntegrations(showLoading = true) {
 
   error.value = null
 
-  try {
-    const response = await auth.fetchWithAuth<Integration[] | { integrations?: Integration[] }>('/api/integrations')
-    integrations.value = normalizeResponse(response)
+  const [integrationsResult, skillsResult] = await Promise.allSettled([
+    auth.fetchWithAuth<Integration[] | { integrations?: Integration[] }>('/api/integrations'),
+    auth.fetchWithAuth<SkillCatalogEntry[] | { skills?: SkillCatalogEntry[] }>('/api/skills'),
+  ])
+
+  const nextEntries: Integration[] = []
+  const nextErrors: string[] = []
+
+  if (integrationsResult.status === 'fulfilled') {
+    nextEntries.push(...normalizeIntegrationResponse(integrationsResult.value))
+  } else {
+    nextErrors.push('Failed to load integrations')
   }
-  catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : 'Failed to load integrations'
-    integrations.value = []
+
+  if (skillsResult.status === 'fulfilled') {
+    nextEntries.push(...normalizeSkillsResponse(skillsResult.value))
+  } else {
+    // Backward compatibility: older daemons do not expose /api/skills yet.
+    // Keep integrations usable and avoid surfacing a hard error for this optional section.
+    console.warn('Skills catalog unavailable:', skillsResult.reason)
   }
-  finally {
-    if (showLoading) {
-      loading.value = false
-    }
+
+  integrations.value = nextEntries
+  error.value = nextErrors.length > 0 ? nextErrors.join(' · ') : null
+
+  if (showLoading) {
+    loading.value = false
   }
 }
 
@@ -243,7 +309,7 @@ onMounted(() => {
           <input
             v-model="searchQuery"
             type="text"
-            placeholder="Search integrations..."
+            placeholder="Search integrations and skills..."
             class="w-full pl-10 pr-4 py-2 text-[13px] bg-card/50 border border-border/50 rounded-xl focus:outline-none focus:ring-1 focus:ring-primary/50 focus:border-primary/50 text-foreground placeholder:text-muted-foreground"
           >
         </div>
@@ -287,7 +353,7 @@ onMounted(() => {
         </div>
 
         <div v-if="Object.keys(groupedIntegrations).length === 0" class="flex items-center justify-center h-full">
-          <p class="text-muted-foreground text-[12px]">No integrations found.</p>
+          <p class="text-muted-foreground text-[12px]">No integrations or skills found.</p>
         </div>
 
         <div v-else class="space-y-6">
@@ -301,10 +367,10 @@ onMounted(() => {
               >
                 <div class="flex items-center gap-2 pr-2 mb-1">
                   <Icon
-                    :icon="integrationIcon(integration.name)"
+                    :icon="integrationIcon(integration.name, integration.category)"
                     class="size-[16px] shrink-0"
-                    :class="integrationIconClass(integration.name)"
-                    :style="integrationIconStyle(integration.name)"
+                    :class="integrationIconClass(integration.name, integration.category)"
+                    :style="integrationIconStyle(integration.name, integration.category)"
                   />
                   <h3 class="font-sans text-[15px] font-medium text-foreground truncate">{{ integration.name }}</h3>
                 </div>

desktop/src/pages/integrations.vue

@@ -515,6 +515,33 @@ pub async fn handle_api_integrations(
     Json(serde_json::json!({"integrations": integrations})).into_response()
 }
 
+/// GET /api/skills — list installed skills for desktop catalog views
+pub async fn handle_api_skills(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+) -> impl IntoResponse {
+    if let Err(e) = require_auth(&state, &headers) {
+        return e.into_response();
+    }
+
+    let config = state.config.lock().clone();
+    let skills = crate::skills::load_skills_with_config(&config.workspace_dir, &config);
+
+    let entries: Vec<serde_json::Value> = skills
+        .iter()
+        .map(|skill| {
+            serde_json::json!({
+                "name": skill.name,
+                "description": skill.description,
+                "category": "Skills",
+                "status": "Active",
+            })
+        })
+        .collect();
+
+    Json(serde_json::json!({"skills": entries})).into_response()
+}
+
 /// POST /api/doctor — run diagnostics
 pub async fn handle_api_doctor(
     State(state): State<AppState>,

src/gateway/api.rs

@@ -679,6 +679,7 @@ pub async fn run_gateway(host: &str, port: u16, config: Config) -> Result<()> {
         .route("/api/cron", post(api::handle_api_cron_add))
         .route("/api/cron/{id}", delete(api::handle_api_cron_delete))
         .route("/api/integrations", get(api::handle_api_integrations))
+        .route("/api/skills", get(api::handle_api_skills))
         .route(
             "/api/doctor",
             get(api::handle_api_doctor).post(api::handle_api_doctor),