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
This commit is contained in:
Haze
153
build_process/commit_9_skills_browser.md
Normal file
153
build_process/commit_9_skills_browser.md
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user