# Group Status UI Visibility Enhancement

> This enhancement adds dynamic UI visibility controls that hide creation and upload elements when a group is in a restricted status (locked, upload_disabled, or inactive).

- Skill: `tools-only/group-status-ui-visibility-enhancement` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/group-status-ui-visibility-enhancement`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/group-status-ui-visibility-enhancement/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/group-status-ui-visibility-enhancement

---

# Group Status UI Visibility Enhancement

**Version:** 0.234.004  
**Implemented in:** 0.234.004  
**Type:** Feature Enhancement  
**Related Feature:** Group Status Management

## Overview

This enhancement adds dynamic UI visibility controls that hide creation and upload elements when a group is in a restricted status (locked, upload_disabled, or inactive). This provides a better user experience by preventing users from attempting operations that will be blocked by backend enforcement.

## Problem Statement

Previously, even when a group had a restricted status:
- Users could still see the upload area and attempt to upload documents
- Create buttons for prompts, agents, and actions were visible
- Users would click these elements and then receive error messages from the backend
- This created confusion and poor user experience

## Solution

Added JavaScript functions that automatically hide/show UI elements based on the active group's status:

### New Functions

#### 1. `updateGroupStatusAlert()`
Updates the alert box at the top of the page to display the appropriate message based on group status.

**Status Messages:**
- **Locked**: Warning alert - "Group is currently locked. You cannot upload, delete, or chat."
- **Upload Disabled**: Info alert - "Document uploads are currently disabled. You can still view documents and chat."
- **Inactive**: Danger alert - "This group is inactive. All operations are disabled."
- **Active**: Alert box is hidden

#### 2. `updateGroupUIBasedOnStatus()`
Hides or shows UI creation elements based on the group's status and permission rules.

**Elements Controlled:**
- `upload-area` - Document upload drop zone (line 300)
- `create-group-prompt-btn` - New Prompt button (line 530)
- `create-group-agent-btn` - New Agent button (line 634)
- `create-group-plugin-btn` - New Action button (line 688)

**Visibility Rules:**
| Status | Upload Area | Create Buttons | Chat |
|--------|-------------|----------------|------|
| active | ✅ Visible | ✅ Visible | ✅ Enabled |
| locked | ❌ Hidden | ❌ Hidden | ✅ Enabled |
| upload_disabled | ❌ Hidden | ❌ Hidden | ✅ Enabled |
| inactive | ❌ Hidden | ❌ Hidden | ❌ Disabled |

## Implementation Details

### Integration Points

The new functions are called automatically at the following points:

1. **Initial Page Load** (`fetchUserGroups()`)
   - When the page first loads and groups are fetched
   - Both functions are called after the active group is identified
   - Line ~1987 in `group_workspaces.html`

2. **Group Change** (`onChangeActiveGroup()`)
   - When user switches to a different active group
   - Functions are called through `fetchUserGroups()` after the group change
   - Ensures UI updates immediately when switching between groups

### Code Location

**File:** `group_workspaces.html`  
**Lines:** ~1755-1810 (function definitions)  
**Integration:** Line ~1987 (function calls)

### Function Implementation

```javascript
/**
 * Update the group status alert box based on the active group's status
 */
function updateGroupStatusAlert() {
  const activeGroup = userGroups.find(g => g.id === activeGroupId);
  const alertBox = document.getElementById("group-status-alert");
  
  if (!activeGroup || !alertBox) {
    return;
  }
  
  const status = activeGroup.status || 'active';
  const statusMessages = {
    'locked': {
      type: 'warning',
      icon: 'bi-lock-fill',
      title: 'Group Locked',
      message: 'This group is currently locked...'
    },
    // ... other status configurations
  };
  
  if (status === 'active') {
    alertBox.classList.add('d-none');
  } else {
    // Show appropriate alert
  }
}

/**
 * Hide/show UI elements based on the active group's status
 */
function updateGroupUIBasedOnStatus() {
  const activeGroup = userGroups.find(g => g.id === activeGroupId);
  
  if (!activeGroup) {
    return;
  }
  
  const status = activeGroup.status || 'active';
  
  // Get elements
  const uploadArea = document.getElementById('upload-area');
  const createPromptBtn = document.getElementById('create-group-prompt-btn');
  const createAgentBtn = document.getElementById('create-group-agent-btn');
  const createPluginBtn = document.getElementById('create-group-plugin-btn');
  
  // Determine permissions
  const canUpload = (status === 'active');
  const canCreateItems = (status === 'active');
  
  // Update visibility
  if (uploadArea) uploadArea.style.display = canUpload ? '' : 'none';
  if (createPromptBtn) createPromptBtn.style.display = canCreateItems ? '' : 'none';
  if (createAgentBtn) createAgentBtn.style.display = canCreateItems ? '' : 'none';
  if (createPluginBtn) createPluginBtn.style.display = canCreateItems ? '' : 'none';
  
  console.log(`UI updated for group ${activeGroupId} with status: ${status}`);
}
```

## User Experience Improvements

### Before This Enhancement
1. User sees upload area even in locked group
2. User attempts to upload a document
3. Backend rejects with error message
4. User confused about why upload failed

### After This Enhancement
1. User sees that upload area is hidden
2. User sees alert explaining group is locked
3. User understands limitations without attempting actions
4. Reduced friction and clearer communication

## Testing

### Test Coverage
**File:** `functional_tests/test_group_status_ui_visibility.py`

Tests validate:
1. ✅ UI visibility logic for all four status types
2. ✅ JavaScript functions exist in template
3. ✅ Functions are called in appropriate places
4. ✅ All target HTML elements exist
5. ✅ Version number updated

### Test Results
```
📊 Test Summary: 3/3 tests passed
✅ All tests passed! UI hiding functionality is correctly implemented.
```

## Related Features

- **Group Status Management** - Backend enforcement of status restrictions
- **Activity Logging** - Status changes are logged for audit trail
- **Control Center** - Admin interface for managing group status
- **Status Badges** - Visual indicators in group dropdown

## Future Enhancements

Possible future improvements:
1. Add tooltips to hidden button placeholders explaining why they're hidden
2. Implement progressive disclosure (show disabled buttons with explanations)
3. Add status-specific action suggestions (e.g., "Contact admin to unlock")
4. Animate transitions when status changes

## Dependencies

- Group status must be returned by `/api/groups` endpoint
- `userGroups` array must include `status` field
- HTML elements must have correct IDs
- Bootstrap 5 for alert styling
- Bootstrap Icons for status icons

## Configuration

No configuration required - behavior is automatic based on group status.

## Version History

- **0.234.004** - Initial implementation of UI visibility controls
- **0.234.003** - Added status alert boxes and badges
- **0.234.002** - Fixed status persistence bug
- **0.234.001** - Fixed status display bug
- **0.233.321** - Added dynamic help text in Control Center
- **0.233.320** - Fixed backend status reading
- **0.233.319** - Fixed frontend status saving
- **0.233.318** - Initial group status management implementation

## Technical Notes

### Performance Considerations
- Functions execute synchronously after group data loads
- No additional API calls required (status comes with group data)
- Minimal DOM manipulation (only 5 elements affected)
- Console logging for debugging can be removed in production

### Browser Compatibility
- Uses standard JavaScript DOM APIs
- Compatible with all modern browsers
- Requires ES6 support (arrow functions, template literals)

### Accessibility
- Hidden elements are removed from tab order
- Alert boxes use semantic Bootstrap classes
- Screen readers will announce alert messages
- Consider adding ARIA labels in future enhancement

## Summary

This feature completes the group status management system by ensuring the UI accurately reflects the permissions available to users based on the group's status. By hiding restricted actions proactively, we create a more intuitive and less error-prone user experience.