6239b156cb
- 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
154 lines
3.7 KiB
Markdown
154 lines
3.7 KiB
Markdown
# 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)
|