Initial commit: Clean DSS implementation

Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved

admin-ui/js/components/layout/ds-activity-bar.js

@@ -0,0 +1,132 @@
+/**
+ * ds-activity-bar.js
+ * Activity bar component - team/project switcher
+ */
+
+class DSActivityBar extends HTMLElement {
+  constructor() {
+    super();
+    this.currentTeam = 'ui';
+    this.advancedMode = this.loadAdvancedMode();
+    this.teams = [
+      { id: 'ui', label: 'UI', icon: '🎨' },
+      { id: 'ux', label: 'UX', icon: '👁️' },
+      { id: 'qa', label: 'QA', icon: '🔍' },
+      { id: 'admin', label: 'Admin', icon: '🛡️' }
+    ];
+  }
+
+  loadAdvancedMode() {
+    try {
+      return localStorage.getItem('dss-advanced-mode') === 'true';
+    } catch (e) {
+      return false;
+    }
+  }
+
+  saveAdvancedMode() {
+    try {
+      localStorage.setItem('dss-advanced-mode', this.advancedMode.toString());
+    } catch (e) {
+      console.error('Failed to save advanced mode preference:', e);
+    }
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.innerHTML = `
+      ${this.teams.map(team => `
+        <div class="activity-item ${team.id === this.currentTeam ? 'active' : ''}"
+             data-team="${team.id}"
+             title="${team.label} Team">
+          <span style="font-size: 20px;">${team.icon}</span>
+        </div>
+      `).join('')}
+
+      <div style="flex: 1;"></div>
+
+      <div class="activity-item"
+           data-action="chat"
+           title="AI Chat">
+        <span style="font-size: 18px;">💬</span>
+      </div>
+
+      <div class="activity-item ${this.advancedMode ? 'active' : ''}"
+           data-action="advanced-mode"
+           title="Advanced Mode: ${this.advancedMode ? 'ON' : 'OFF'}">
+        <span style="font-size: 18px;">🔧</span>
+      </div>
+
+      <div class="activity-item"
+           data-action="settings"
+           title="Settings">
+        <span style="font-size: 18px;">⚙️</span>
+      </div>
+    `;
+  }
+
+  setupEventListeners() {
+    this.querySelectorAll('.activity-item[data-team]').forEach(item => {
+      item.addEventListener('click', (e) => {
+        const teamId = e.currentTarget.dataset.team;
+        this.switchTeam(teamId);
+      });
+    });
+
+    this.querySelector('.activity-item[data-action="chat"]')?.addEventListener('click', () => {
+      // Toggle chat sidebar visibility
+      const chatSidebar = document.querySelector('ds-ai-chat-sidebar');
+      if (chatSidebar && chatSidebar.toggleCollapse) {
+        chatSidebar.toggleCollapse();
+      }
+    });
+
+    this.querySelector('.activity-item[data-action="advanced-mode"]')?.addEventListener('click', () => {
+      this.toggleAdvancedMode();
+    });
+
+    this.querySelector('.activity-item[data-action="settings"]')?.addEventListener('click', () => {
+      // Dispatch settings-open event to parent shell
+      this.dispatchEvent(new CustomEvent('settings-open', {
+        bubbles: true,
+        detail: { action: 'open-settings' }
+      }));
+    });
+  }
+
+  toggleAdvancedMode() {
+    this.advancedMode = !this.advancedMode;
+    this.saveAdvancedMode();
+    this.render();
+    this.setupEventListeners();
+
+    // Dispatch advanced-mode-change event to parent shell
+    this.dispatchEvent(new CustomEvent('advanced-mode-change', {
+      bubbles: true,
+      detail: { advancedMode: this.advancedMode }
+    }));
+  }
+
+  switchTeam(teamId) {
+    if (teamId === this.currentTeam) return;
+
+    this.currentTeam = teamId;
+
+    // Update active state
+    this.querySelectorAll('.activity-item[data-team]').forEach(item => {
+      item.classList.toggle('active', item.dataset.team === teamId);
+    });
+
+    // Dispatch team-switch event to parent shell
+    this.dispatchEvent(new CustomEvent('team-switch', {
+      bubbles: true,
+      detail: { team: teamId }
+    }));
+  }
+}
+
+customElements.define('ds-activity-bar', DSActivityBar);