feat(skills): enhance skills browser with bundles and categories

- Add skill bundles with batch enable/disable functionality
- Create SkillDetailDialog for viewing skill metadata
- Add Tabs component for All Skills / Bundles navigation
- Implement category filtering with skill counts
- Add search functionality for skills
- Show Gateway connection status awareness
- Add configuration and dependency badges
- Include recommended bundle highlighting

build_process/commit_9_skills_browser.md

@@ -0,0 +1,153 @@
+# Commit 9: Skills Browser
+
+## Summary
+Enhance the Skills page with skill bundles, category filtering, detail dialogs, and improved user experience for managing AI capabilities.
+
+## Changes
+
+### React Renderer
+
+#### `src/pages/Skills/index.tsx`
+Complete rewrite with enhanced features:
+
+**New Components:**
+- `SkillDetailDialog` - Modal showing skill details, dependencies, and configuration
+- `BundleCard` - Skill bundle display with enable/disable actions
+
+**Features:**
+- Tabbed interface: "All Skills" and "Bundles"
+- Category filtering with skill counts
+- Search functionality
+- Gateway connection status awareness
+- Skill bundles with batch enable/disable
+- Skill detail dialog with metadata
+- Configuration indicator badges
+- Toast notifications on skill toggle
+
+**UI Improvements:**
+- Category icons for visual distinction
+- Enabled state highlighting (border and background)
+- Hover states for cards
+- Recommended bundle badges
+- Statistics bar with counts
+
+#### `src/components/ui/tabs.tsx` (New)
+Tabs component based on shadcn/ui and Radix Tabs:
+- `Tabs` - Root container
+- `TabsList` - Tab navigation bar
+- `TabsTrigger` - Individual tab button
+- `TabsContent` - Tab panel content
+
+### Data Structures
+
+#### Skill Bundles
+Predefined bundles:
+- **Productivity Pack** - Calendar, reminders, notes, tasks, timer
+- **Developer Tools** - Code assist, git ops, docs lookup
+- **Information Hub** - Web search, news, weather, translate
+- **Smart Home** - Lights, thermostat, security cam, routines
+
+## Technical Details
+
+### Component Architecture
+
+```
+Skills Page
+    |
+    +-- TabsList
+    |     |
+    |     +-- "All Skills" Tab
+    |     +-- "Bundles" Tab
+    |
+    +-- TabsContent: All Skills
+    |     |
+    |     +-- Search/Filter Bar
+    |     +-- Category Buttons
+    |     +-- Skills Grid
+    |           |
+    |           +-- SkillCard (click -> SkillDetailDialog)
+    |
+    +-- TabsContent: Bundles
+    |     |
+    |     +-- BundleCard Grid
+    |
+    +-- Statistics Bar
+    |
+    +-- SkillDetailDialog (modal)
+```
+
+### Category Configuration
+
+| Category | Icon | Label |
+|----------|------|-------|
+| productivity | 📋 | Productivity |
+| developer | 💻 | Developer |
+| smart-home | 🏠 | Smart Home |
+| media | 🎬 | Media |
+| communication | 💬 | Communication |
+| security | 🔒 | Security |
+| information | 📰 | Information |
+| utility | 🔧 | Utility |
+| custom | ⚡ | Custom |
+
+### Bundle Operations
+
+**Enable Bundle:**
+```typescript
+for (const skill of bundleSkills) {
+  if (!skill.enabled) {
+    await enableSkill(skill.id);
+  }
+}
+```
+
+**Disable Bundle:**
+```typescript
+for (const skill of bundleSkills) {
+  if (!skill.isCore) {
+    await disableSkill(skill.id);
+  }
+}
+```
+
+### State Management
+
+**Local State:**
+- `searchQuery` - Search input value
+- `selectedCategory` - Active category filter
+- `selectedSkill` - Skill for detail dialog
+- `activeTab` - Current tab ("all" | "bundles")
+
+**Store Integration:**
+- `useSkillsStore` - Skills data and actions
+- `useGatewayStore` - Connection status
+
+### Filtering Logic
+
+```typescript
+const filteredSkills = skills.filter((skill) => {
+  const matchesSearch = 
+    skill.name.toLowerCase().includes(searchQuery) ||
+    skill.description.toLowerCase().includes(searchQuery);
+  const matchesCategory = 
+    selectedCategory === 'all' || 
+    skill.category === selectedCategory;
+  return matchesSearch && matchesCategory;
+});
+```
+
+### UI States
+
+**Skill Card:**
+- Default: Standard border, white background
+- Enabled: Primary border (50% opacity), primary background (5% opacity)
+- Hover: Primary border (50% opacity)
+- Core: Lock icon, switch disabled
+
+**Bundle Card:**
+- Default: Standard styling
+- All Enabled: Primary border, primary background
+- Recommended: Amber badge with sparkle icon
+
+## Version
+v0.1.0-alpha (incremental)

build_process/process.md

@@ -14,6 +14,7 @@
 * [commit_6] Auto-update functionality - electron-updater integration with UI
 * [commit_7] Packaging and distribution - CI/CD, multi-platform builds, icon generation
 * [commit_8] Chat interface - Markdown support, typing indicator, welcome screen
+* [commit_9] Skills browser - Bundles, categories, detail dialog
 
 ### Plan:
 1. ~~Initialize project structure~~ ✅
@@ -24,7 +25,7 @@
 6. ~~Add auto-update functionality~~ ✅
 7. ~~Packaging and distribution setup~~ ✅
 8. ~~Chat interface~~ ✅
-9. Skills browser/enable page
+9. ~~Skills browser/enable page~~ ✅
 10. Cron tasks management
 
 ## Version Milestones