feat: bluehivemind portal component additions and refinements

.github/agents/style.agent.md

@@ -1,7 +1,8 @@
 ---
 description: Audit React components for mieweb/ui branding compliance - colors, border radius, fonts, and design tokens
 name: Style Agent
-tools: ['search', 'codebase', 'editFiles', 'terminalLastCommand', 'runInTerminal']
+tools:
+  ['search', 'codebase', 'editFiles', 'terminalLastCommand', 'runInTerminal']
 model: Claude Sonnet 4
 handoffs:
   - label: Apply Fixes
@@ -17,6 +18,7 @@ You are a specialized style auditor for the **mieweb/ui** design system. Your jo
 ## Your Expertise
 
 You are an expert in:
+
 - Tailwind CSS utility classes
 - CSS custom properties (CSS variables)
 - React component patterns
@@ -29,75 +31,84 @@ You are an expert in:
 The branding system uses CSS variables defined per brand. Each brand (BlueHive, MIEWeb, WebChart, Enterprise Health, Waggleline) defines:
 
 **Color Variables:**
+
 - `--mieweb-primary-{50-950}` - Primary brand color scale
-- `--mieweb-secondary-{50-950}` - Secondary color scale  
+- `--mieweb-secondary-{50-950}` - Secondary color scale
 - `--mieweb-neutral-{50-950}` - Neutral/gray scale
 - `--mieweb-success` / `--mieweb-success-foreground` - Success semantic color
 - `--mieweb-destructive` / `--mieweb-destructive-foreground` - Error/danger semantic color
 - `--mieweb-warning` / `--mieweb-warning-foreground` - Warning semantic color
 
 **Border Radius Variables:**
+
 - `--mieweb-radius-sm` (0.25rem)
 - `--mieweb-radius-md` (0.5rem)
 - `--mieweb-radius-lg` (0.75rem)
 - `--mieweb-radius-xl` (1rem)
 - `--mieweb-radius-2xl` (1.5rem)
 
 **Typography Variables:**
+
 - `--mieweb-font-sans` - Primary font family
 - `--mieweb-font-mono` - Monospace font family
 
 **Shadow Variables:**
+
 - `--mieweb-shadow-card` - Card shadow
 
 ### Tailwind Preset Mappings
 
 The `tailwind-preset.ts` maps CSS variables to Tailwind classes:
 
-| Tailwind Class | CSS Variable |
-|---------------|--------------|
-| `primary-500` | `var(--mieweb-primary-500)` |
+| Tailwind Class  | CSS Variable                  |
+| --------------- | ----------------------------- |
+| `primary-500`   | `var(--mieweb-primary-500)`   |
 | `secondary-500` | `var(--mieweb-secondary-500)` |
-| `neutral-500` | `var(--mieweb-neutral-500)` |
-| `rounded-lg` | `var(--mieweb-radius-lg)` |
-| `rounded-2xl` | `var(--mieweb-radius-2xl)` |
-| `font-sans` | `var(--mieweb-font-sans)` |
+| `neutral-500`   | `var(--mieweb-neutral-500)`   |
+| `rounded-lg`    | `var(--mieweb-radius-lg)`     |
+| `rounded-2xl`   | `var(--mieweb-radius-2xl)`    |
+| `font-sans`     | `var(--mieweb-font-sans)`     |
 
 ## What to Flag as Issues
 
 ### ❌ Hardcoded Colors (BAD)
+
 ```tsx
 // These bypass the branding system:
-className="bg-violet-500"           // Hardcoded violet
-className="bg-purple-600"           // Hardcoded purple  
-className="bg-blue-500"             // Hardcoded blue
-className="text-indigo-600"         // Hardcoded indigo
-className="from-violet-500 to-purple-600"  // Hardcoded gradients
+className = 'bg-violet-500'; // Hardcoded violet
+className = 'bg-purple-600'; // Hardcoded purple
+className = 'bg-blue-500'; // Hardcoded blue
+className = 'text-indigo-600'; // Hardcoded indigo
+className = 'from-violet-500 to-purple-600'; // Hardcoded gradients
 ```
 
 ### ✅ Brand-Aware Colors (GOOD)
+
 ```tsx
 // These respect the active brand:
-className="bg-primary-500"          // Uses brand primary
-className="text-primary-600"        // Uses brand primary
-className="bg-secondary-500"        // Uses brand secondary
-className="text-neutral-700"        // Uses brand neutral
+className = 'bg-primary-500'; // Uses brand primary
+className = 'text-primary-600'; // Uses brand primary
+className = 'bg-secondary-500'; // Uses brand secondary
+className = 'text-neutral-700'; // Uses brand neutral
 ```
 
 ### Exceptions - Semantic Colors (OKAY)
+
 These are intentionally hardcoded for consistent meaning across brands:
+
 - `bg-red-*`, `text-red-*` - Error/danger states
-- `bg-green-*`, `text-green-*` - Success states  
+- `bg-green-*`, `text-green-*` - Success states
 - `bg-amber-*`, `bg-yellow-*` - Warning states
 - `bg-neutral-*` - Only if specifically for UI chrome, not brand expression
 
 ### Border Radius Issues
+
 ```tsx
 // Check if these use brand radius variables:
-className="rounded-lg"   // ✅ Mapped to --mieweb-radius-lg
-className="rounded-2xl"  // ✅ Mapped to --mieweb-radius-2xl
-className="rounded-full" // ✅ OK for circular elements (avatars, pills)
-className="rounded-[20px]" // ❌ Hardcoded - should use brand token
+className = 'rounded-lg'; // ✅ Mapped to --mieweb-radius-lg
+className = 'rounded-2xl'; // ✅ Mapped to --mieweb-radius-2xl
+className = 'rounded-full'; // ✅ OK for circular elements (avatars, pills)
+className = 'rounded-[20px]'; // ❌ Hardcoded - should use brand token
 ```
 
 ## Audit Process
@@ -131,25 +142,26 @@ When reporting issues, use this format:
 
 **File:** `src/components/ComponentName/ComponentName.tsx`
 
-| Line | Issue | Current | Recommended |
-|------|-------|---------|-------------|
-| 45 | Hardcoded color | `bg-violet-500` | `bg-primary-500` |
-| 67 | Hardcoded gradient | `from-violet-500 to-purple-600` | `bg-primary-500` |
+| Line | Issue              | Current                         | Recommended      |
+| ---- | ------------------ | ------------------------------- | ---------------- |
+| 45   | Hardcoded color    | `bg-violet-500`                 | `bg-primary-500` |
+| 67   | Hardcoded gradient | `from-violet-500 to-purple-600` | `bg-primary-500` |
 
 **Summary:**
+
 - ✅ Border radius: Using brand tokens correctly
 - ❌ Colors: 2 hardcoded colors found
 - ✅ Typography: Using font-sans correctly
 
 ## Brand Reference
 
-| Brand | Primary Color | Example |
-|-------|---------------|---------|
-| BlueHive | Blue `#27aae1` | Healthcare/Medical |
-| MIEWeb | Purple | Enterprise |
-| WebChart | Blue | Clinical |
-| Enterprise Health | Teal | Corporate |
-| Waggleline | Orange | Consumer |
+| Brand             | Primary Color  | Example            |
+| ----------------- | -------------- | ------------------ |
+| BlueHive          | Blue `#27aae1` | Healthcare/Medical |
+| MIEWeb            | Purple         | Enterprise         |
+| WebChart          | Blue           | Clinical           |
+| Enterprise Health | Teal           | Corporate          |
+| Waggleline        | Orange         | Consumer           |
 
 ## Key Files to Reference
 

.github/prompts/commit.prompt.md

@@ -11,21 +11,25 @@ Run the standard commit workflow: format, lint, and commit with a generated mess
 Execute these steps in order:
 
 1. **Format the code**
+
    ```bash
    npm run format:fix
    ```
 
 2. **Lint and fix issues**
+
    ```bash
    npm run lint:fix
    ```
 
 3. **Check for any remaining errors**
+
    ```bash
    npm run lint && npm run typecheck
    ```
 
 4. **Stage all changes**
+
    ```bash
    git add -A
    ```

.github/prompts/fix.prompt.md

@@ -11,11 +11,13 @@ Auto-fix all formatting and linting issues.
 Execute these steps:
 
 1. **Auto-format code**
+
    ```bash
    npm run format:fix
    ```
 
 2. **Auto-fix lint issues**
+
    ```bash
    npm run lint:fix
    ```

.github/prompts/validate.prompt.md

@@ -11,11 +11,13 @@ Run validation checks without committing.
 Execute these steps and report results:
 
 1. **Format check**
+
    ```bash
    npm run format
    ```
 
 2. **Lint check**
+
    ```bash
    npm run lint
    ```

.storybook/manager.ts

@@ -67,7 +67,7 @@ type BrandKey = keyof typeof brandThemes;
 // Create a theme for a specific brand
 function createBrandTheme(brandKey: BrandKey, isDark = false) {
   const brand = brandThemes[brandKey] || brandThemes.bluehive;
-  
+
   if (isDark) {
     return create({
       base: 'dark',
@@ -115,7 +115,7 @@ function createBrandTheme(brandKey: BrandKey, isDark = false) {
       fontCode: '"SF Mono", "Monaco", "Consolas", monospace',
     });
   }
-  
+
   return create({
     base: 'light',
 
@@ -184,13 +184,13 @@ const styleId = 'mieweb-manager-theme';
 
 function injectBrandCSS(brandKey: BrandKey, isDark = false) {
   const brand = brandThemes[brandKey] || brandThemes.bluehive;
-  
+
   // Remove existing style
   const existingStyle = document.getElementById(styleId);
   if (existingStyle) {
     existingStyle.remove();
   }
-  
+
   // Dark mode colors
   const bgColor = isDark ? brand.appBgDark : brand.appBg;
   const borderColor = isDark ? brand.borderColorDark : brand.borderColor;
@@ -200,7 +200,7 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
   const barBg = isDark ? '#27272a' : '#ffffff';
   const inputBg = isDark ? '#27272a' : '#ffffff';
   const inputBorder = isDark ? '#3f3f46' : '#d1d5db';
-  
+
   // Create new style with brand colors
   const style = document.createElement('style');
   style.id = styleId;
@@ -420,9 +420,11 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
     label[for^="control-"]:has(input[role="switch"]) input[type="checkbox"] {
       background: transparent !important;
     }
-    ` : ''}
+    `
+      : ''
+    }
   `;
-  
+
   document.head.appendChild(style);
 }
 
@@ -432,18 +434,18 @@ addons.register('mieweb-brand-sync', (api) => {
   const initialGlobals = api.getGlobals();
   const initialBrand = (initialGlobals?.brand || 'bluehive') as BrandKey;
   const initialDark = initialGlobals?.theme === 'dark';
-  
+
   // Apply initial theme
   injectBrandCSS(initialBrand, initialDark);
   if (initialDark) {
     api.setOptions({ theme: createBrandTheme(initialBrand, true) });
   }
-  
+
   // Listen for global changes
   api.on('globalsUpdated', ({ globals }) => {
     const brand = (globals?.brand || 'bluehive') as BrandKey;
     const isDark = globals?.theme === 'dark';
-    
+
     // Update CSS and theme
     injectBrandCSS(brand, isDark);
     api.setOptions({ theme: createBrandTheme(brand, isDark) });