@bitseek/hermes-webui 0.1.0-beta.0

package/vendor/agent-frontend-shell/extensions/pages/ai-teammates/page.js

@@ -0,0 +1,487 @@
+/**
+ * AI Teammates Extension Page
+ * AI 同事 - 创建基于角色的 AI 同事，并进入他们的专属聊天
+ */
+(function() {
+  'use strict';
+
+  // ── i18n ──────────────────────────────────────────────────────────
+  if (typeof LOCALES !== 'undefined') {
+    function addTranslations(lang, translations) {
+      if (LOCALES[lang]) Object.assign(LOCALES[lang], translations);
+    }
+
+    addTranslations('en', {
+      tab_ai_teammates: 'AI Teammates',
+      ai_teammates_title: 'AI Teammates',
+      ai_teammates_subtitle: 'Create role-based AI teammates and enter their dedicated chats.',
+      ai_teammates_available_roles: 'Available roles',
+      ai_teammates_role_count: '{0} roles',
+      ai_teammates_refresh: 'Refresh',
+      ai_teammates_create: 'Create',
+      ai_teammates_loading: 'Loading...',
+      ai_teammates_empty: 'No AI teammates found.',
+      ai_teammates_error: 'Failed to load AI teammates: {0}',
+      ai_teammates_enter_chat: 'Enter Chat',
+      ai_teammates_create_title: 'Create AI Teammate',
+      ai_teammates_confirm_delete: 'Are you sure you want to delete this AI teammate?',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('zh', {
+      tab_ai_teammates: 'AI 同事',
+      ai_teammates_title: 'AI 同事',
+      ai_teammates_subtitle: '创建基于角色的 AI 同事，并进入他们的专属聊天。',
+      ai_teammates_available_roles: '可用角色',
+      ai_teammates_role_count: '{0} 个角色',
+      ai_teammates_refresh: '刷新',
+      ai_teammates_create: '创建',
+      ai_teammates_loading: '加载中...',
+      ai_teammates_empty: '暂未发现 AI 同事。',
+      ai_teammates_error: '加载 AI 同事失败：{0}',
+      ai_teammates_enter_chat: '进入聊天',
+      ai_teammates_create_title: '创建 AI 同事',
+      ai_teammates_confirm_delete: '确定要删除这个 AI 同事吗？',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('ja', {
+      tab_ai_teammates: 'AI同僚',
+      ai_teammates_title: 'AI同僚',
+      ai_teammates_subtitle: '役割ベースのAI同僚を作成し、専用チャットに入ります。',
+      ai_teammates_available_roles: '利用可能な役割',
+      ai_teammates_role_count: '{0}個の役割',
+      ai_teammates_refresh: '更新',
+      ai_teammates_create: '作成',
+      ai_teammates_loading: '読み込み中...',
+      ai_teammates_empty: 'AI同僚が見つかりません。',
+      ai_teammates_error: 'AI同僚の読み込みに失敗しました：{0}',
+      ai_teammates_enter_chat: 'チャットに入る',
+      ai_teammates_create_title: 'AI同僚を作成',
+      ai_teammates_confirm_delete: 'このAI同僚を削除してもよろしいですか？',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('ru', {
+      tab_ai_teammates: 'AI коллеги',
+      ai_teammates_title: 'AI коллеги',
+      ai_teammates_subtitle: 'Создавайте AI коллег на основе ролей и входите в их专属 чаты.',
+      ai_teammates_available_roles: 'Доступные роли',
+      ai_teammates_role_count: '{0} ролей',
+      ai_teammates_refresh: 'Обновить',
+      ai_teammates_create: 'Создать',
+      ai_teammates_loading: 'Загрузка...',
+      ai_teammates_empty: 'AI коллеги не найдены.',
+      ai_teammates_error: 'Не удалось загрузить AI коллег: {0}',
+      ai_teammates_enter_chat: 'Войти в чат',
+      ai_teammates_create_title: 'Создать AI коллегу',
+      ai_teammates_confirm_delete: 'Вы уверены, что хотите удалить этого AI коллегу?',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('es', {
+      tab_ai_teammates: 'Colegas AI',
+      ai_teammates_title: 'Colegas AI',
+      ai_teammates_subtitle: 'Crea colegas AI basados en roles y entra en sus chats dedicados.',
+      ai_teammates_available_roles: 'Roles disponibles',
+      ai_teammates_role_count: '{0} roles',
+      ai_teammates_refresh: 'Actualizar',
+      ai_teammates_create: 'Crear',
+      ai_teammates_loading: 'Cargando...',
+      ai_teammates_empty: 'No se encontraron colegas AI.',
+      ai_teammates_error: 'Error al cargar colegas AI: {0}',
+      ai_teammates_enter_chat: 'Entrar al chat',
+      ai_teammates_create_title: 'Crear colega AI',
+      ai_teammates_confirm_delete: '¿Estás seguro de que quieres eliminar este colega AI?',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('de', {
+      tab_ai_teammates: 'AI-Kollegen',
+      ai_teammates_title: 'AI-Kollegen',
+      ai_teammates_subtitle: 'Erstellen Sie rollenbasierte AI-Kollegen und betreten Sie deren dedizierte Chats.',
+      ai_teammates_available_roles: 'Verfügbare Rollen',
+      ai_teammates_role_count: '{0} Rollen',
+      ai_teammates_refresh: 'Aktualisieren',
+      ai_teammates_create: 'Erstellen',
+      ai_teammates_loading: 'Laden...',
+      ai_teammates_empty: 'Keine AI-Kollegen gefunden.',
+      ai_teammates_error: 'AI-Kollegen konnten nicht geladen werden: {0}',
+      ai_teammates_enter_chat: 'Chat beitreten',
+      ai_teammates_create_title: 'AI-Kollegen erstellen',
+      ai_teammates_confirm_delete: 'Sind Sie sicher, dass Sie diesen AI-Kollegen löschen möchten?',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+
+    addTranslations('it', {
+      tab_ai_teammates: 'Colleghi AI',
+      ai_teammates_title: 'Colleghi AI',
+      ai_teammates_subtitle: 'Crea colleghi AI basati sui ruoli e accedi alle loro chat dedicate.',
+      ai_teammates_available_roles: 'Ruoli disponibili',
+      ai_teammates_role_count: '{0} ruoli',
+      ai_teammates_refresh: 'Aggiorna',
+      ai_teammates_create: 'Crea',
+      ai_teammates_loading: 'Caricamento...',
+      ai_teammates_empty: 'Nessun collega AI trovato.',
+      ai_teammates_error: 'Impossibile caricare i colleghi AI: {0}',
+      ai_teammates_enter_chat: 'Entra nella chat',
+      ai_teammates_create_title: 'Crea collega AI',
+      ai_teammates_confirm_delete: 'Sei sicuro di voler eliminare questo collega AI?',
+      ai_teammates_profile_prefix: 'bitseek_',
+    });
+  }
+
+  // ── state ──────────────────────────────────────────────────────────
+  var _bitseekRoles = [];     // filtered bitseek_ profiles
+  var _isSwitching = false;   // prevent multiple clicks during profile switch
+  var _groupedRoles = {};     // { category: [role, ...] }
+  var _categoryOrder = [];    // sorted category names
+  var _isLoading = false;
+
+  // ── helpers ────────────────────────────────────────────────────────
+  function esc(s) {
+    if (typeof window.esc === 'function') return window.esc(s);
+    if (s == null) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function t(key) {
+    if (typeof window.t === 'function') {
+      // Pass all arguments after key for placeholder substitution
+      var args = Array.prototype.slice.call(arguments, 1);
+      return window.t.apply(null, [key].concat(args));
+    }
+    return key;
+  }
+
+  /**
+   * Parse a bitseek profile name into { category, displayName, initials }
+   * Pattern: bitseek_[category]_[displayName]
+   * e.g. bitseek_collaboration_dingtalk → { category: '协作办公', displayName: '钉钉助手' }
+   */
+  function parseBitseekName(name) {
+    var prefix = 'bitseek_';
+    if (!name || name.indexOf(prefix) !== 0) return null;
+    var rest = name.slice(prefix.length);
+    var parts = rest.split('_');
+    if (parts.length < 2) return null;
+
+    // The category is the first segment, everything after is the display name
+    // Categories may be in English (collaboration, marketing, sales) — we map them
+    var rawCategory = parts[0];
+    var rawDisplayName = parts.slice(1).join('_');
+
+    // Map English category keys to Chinese display names
+    var categoryMap = {
+      'collaboration': '协作办公',
+      'marketing': '营销增长',
+      'sales': '销售营收',
+      'support': '客户服务',
+      'hr': '人力资源',
+      'finance': '财务法务',
+      'product': '产品设计',
+      'tech': '技术研发',
+      'operations': '运营管理',
+      'data': '数据分析',
+    };
+
+    var category = categoryMap[rawCategory] || rawCategory;
+
+    // Convert raw display name to readable (snake_case → title case as fallback)
+    var displayName = rawDisplayName
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+
+    // Generate initials from display name (first 2 chars, uppercase)
+    var initials = displayName.slice(0, 2).toUpperCase();
+
+    return {
+      category: category,
+      displayName: displayName,
+      initials: initials,
+      rawName: name,
+    };
+  }
+
+  /**
+   * Group roles by category and sort them
+   */
+  function groupRoles(roles) {
+    var grouped = {};
+    var order = [];
+
+    roles.forEach(function(role) {
+      var cat = role.category;
+      if (!grouped[cat]) {
+        grouped[cat] = [];
+        order.push(cat);
+      }
+      grouped[cat].push(role);
+    });
+
+    // Sort categories by number of roles (descending), then alphabetically
+    order.sort(function(a, b) {
+      return grouped[b].length - grouped[a].length || a.localeCompare(b);
+    });
+
+    return { grouped: grouped, order: order };
+  }
+
+  /**
+   * Build the abbreviation text (first 2 chars uppercase)
+   */
+  function getInitials(displayName) {
+    // For Chinese names, take first 2 characters
+    // For English names, take first letter of each word (up to 2)
+    var isChinese = /[一-鿿]/.test(displayName);
+    if (isChinese) {
+      return displayName.slice(0, 2);
+    }
+    var words = displayName.split(/\s+/);
+    if (words.length >= 2) {
+      return (words[0][0] + words[1][0]).toUpperCase();
+    }
+    return displayName.slice(0, 2).toUpperCase();
+  }
+
+  // ── data loading ───────────────────────────────────────────────────
+  async function loadAiTeammates() {
+    if (_isLoading) return;
+    _isLoading = true;
+
+    var mainBody = document.getElementById('aiTeammatesBody');
+    if (mainBody) {
+      mainBody.innerHTML = '<div class="ai-teammates-loading">' + esc(t('ai_teammates_loading')) + '</div>';
+    }
+
+    try {
+      var data = await api('/api/profiles');
+
+      // Filter profiles with bitseek_ prefix
+      _bitseekRoles = (data.profiles || [])
+        .map(function(p) {
+          var parsed = parseBitseekName(p.name);
+          if (!parsed) return null;
+          return {
+            name: p.name,
+            category: parsed.category,
+            displayName: parsed.displayName,
+            initials: getInitials(parsed.displayName),
+            description: p.description || '',
+            model: p.model || '',
+            provider: p.provider || '',
+            is_active: p.is_active,
+            rawProfile: p,
+          };
+        })
+        .filter(Boolean);
+
+      // Group by category
+      var result = groupRoles(_bitseekRoles);
+      _groupedRoles = result.grouped;
+      _categoryOrder = result.order;
+
+      renderMainContent();
+    } catch (e) {
+      if (mainBody) {
+        mainBody.innerHTML = '<div class="ai-teammates-error">' + esc(t('ai_teammates_error', e.message)) + '</div>';
+      }
+      console.error('[ai-teammates] Failed to load:', e);
+    } finally {
+      _isLoading = false;
+    }
+  }
+
+  // ── rendering ──────────────────────────────────────────────────────
+  function renderMainContent() {
+    // Registry creates id as 'main' + capitalize(name) = 'mainAi-teammates'
+    var mainView = document.getElementById('mainAi-teammates');
+    if (!mainView) return;
+
+    var totalCount = _bitseekRoles.length;
+
+    var html = '';
+
+    // ── page header ──
+    html += '<div class="at-page-header">';
+    html += '  <h1 class="at-page-title" data-i18n="ai_teammates_title">' + esc(t('ai_teammates_title')) + '</h1>';
+    html += '  <p class="at-page-subtitle" data-i18n="ai_teammates_subtitle">' + esc(t('ai_teammates_subtitle')) + '</p>';
+    html += '</div>';
+
+    // ── content card ──
+    html += '<div class="at-content-card">';
+
+    // ── card header ──
+    html += '  <div class="at-card-header">';
+    html += '    <div class="at-card-header-left">';
+    html += '      <span class="at-card-title" data-i18n="ai_teammates_title">' + esc(t('ai_teammates_title')) + '</span>';
+    html += '      <span class="at-card-count">' + esc(t('ai_teammates_role_count', totalCount)) + '</span>';
+    html += '    </div>';
+    html += '    <div class="at-card-header-right">';
+    html += '      <button class="at-btn at-btn-outline" id="atBtnRefresh" onclick="window._atRefresh()">';
+    html += '        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>';
+    html += '        <span data-i18n="ai_teammates_refresh">' + esc(t('ai_teammates_refresh')) + '</span>';
+    html += '      </button>';
+    html += '      <button class="at-btn at-btn-primary" id="atBtnCreate" onclick="window._atCreate()" style="display:none">';
+    html += '        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>';
+    html += '        <span data-i18n="ai_teammates_create">' + esc(t('ai_teammates_create')) + '</span>';
+    html += '      </button>';
+    html += '    </div>';
+    html += '  </div>';
+
+    // ── categories ──
+    if (_categoryOrder.length === 0) {
+      html += '  <div class="at-empty">';
+      html += '    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted);opacity:0.4">';
+      html += '      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>';
+      html += '      <circle cx="9" cy="7" r="4"/>';
+      html += '      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>';
+      html += '      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>';
+      html += '    </svg>';
+      html += '    <div class="at-empty-text">' + esc(t('ai_teammates_empty')) + '</div>';
+      html += '  </div>';
+    } else {
+      _categoryOrder.forEach(function(category) {
+        var roles = _groupedRoles[category];
+
+        html += '<div class="at-category">';
+        html += '  <div class="at-category-header">';
+        html += '    <span class="at-category-dot"></span>';
+        html += '    <span class="at-category-name">' + esc(category) + '</span>';
+        html += '    <span class="at-category-count">' + esc(t('ai_teammates_role_count', roles.length)) + '</span>';
+        html += '  </div>';
+        html += '  <div class="at-role-grid">';
+
+        roles.forEach(function(role) {
+          html += renderRoleCard(role);
+        });
+
+        html += '  </div>';
+        html += '</div>';
+      });
+    }
+
+    html += '</div>'; // at-content-card
+
+    mainView.innerHTML = html;
+
+    // Apply i18n
+    if (typeof applyLocaleToDOM === 'function') {
+      applyLocaleToDOM();
+    }
+  }
+
+  function renderRoleCard(role) {
+    var html = '';
+    html += '<div class="at-role-card" data-profile="' + esc(role.name) + '" onclick="window._atEnterChat(\'' + esc(role.name) + '\')">';
+    html += '  <div class="at-role-card-body">';
+    html += '    <div class="at-role-avatar">';
+    html += '      <span class="at-role-initials">' + esc(role.initials) + '</span>';
+    html += '    </div>';
+    html += '    <div class="at-role-info">';
+    html += '      <div class="at-role-name">' + esc(role.displayName) + '</div>';
+    html += '      <div class="at-role-desc">' + esc(role.description || role.rawProfile?.description || '') + '</div>';
+    html += '    </div>';
+    html += '  </div>';
+    html += '  <div class="at-role-arrow">';
+    html += '    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+    html += '  </div>';
+    html += '</div>';
+    return html;
+  }
+
+  // ── actions ────────────────────────────────────────────────────────
+  window._atRefresh = function() {
+    loadAiTeammates();
+  };
+
+  window._atCreate = function() {
+    // Switch to profiles panel for creation
+    if (typeof switchPanel === 'function') {
+      switchPanel('profiles');
+    }
+    // Try to open profile create form
+    if (typeof openProfileCreate === 'function') {
+      setTimeout(openProfileCreate, 100);
+    }
+  };
+
+  window._atEnterChat = function(profileName) {
+    // Prevent click during switching
+    if (_isSwitching) return;
+
+    var card = document.querySelector('[data-profile="' + profileName + '"]');
+    if (!card) return;
+
+    _isSwitching = true;
+
+    // Show loading state on all cards
+    document.querySelectorAll('.at-role-card').forEach(function(c) {
+      c.classList.add('at-role-card--loading');
+    });
+
+    // Show spinner on clicked card
+    var arrow = card.querySelector('.at-role-arrow');
+    if (arrow) {
+      arrow.innerHTML = '<svg class="at-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>';
+    }
+
+    // Use the global switchToProfile function for proper profile switching
+    if (typeof switchToProfile === 'function') {
+      switchToProfile(profileName).then(function() {
+        // Reset switching state
+        _isSwitching = false;
+        // Navigate to chat page after switching
+        if (typeof switchPanel === 'function') {
+          switchPanel('chat');
+        }
+      }).catch(function() {
+        // Remove loading state on error
+        _isSwitching = false;
+        document.querySelectorAll('.at-role-card').forEach(function(c) {
+          c.classList.remove('at-role-card--loading');
+        });
+      });
+    } else {
+      console.error('[ai-teammates] switchToProfile function not available');
+      _isSwitching = false;
+      document.querySelectorAll('.at-role-card').forEach(function(c) {
+        c.classList.remove('at-role-card--loading');
+      });
+    }
+  };
+
+  // ── register panel ─────────────────────────────────────────────────
+  if (!window.hermes || typeof window.hermes.registerPanel !== 'function') {
+    console.warn('[ai-teammates] pages-registry.js not loaded');
+    return;
+  }
+
+  window.hermes.registerPanel({
+    name: 'ai-teammates',
+    label: 'AI Teammates',
+    labelKey: 'tab_ai_teammates',
+    tooltip: 'AI Teammates',
+    tooltipKey: 'tab_ai_teammates',
+    position: 'before-tasks',
+    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+
+    // No sidebar panel — main content only
+    panel: '',
+
+    // Main content area
+    main: '<div id="aiTeammatesBody" class="ai-teammates-body">' +
+      '<div class="ai-teammates-loading">' + esc(t('ai_teammates_loading')) + '</div>' +
+      '</div>',
+
+    onActivate: function() {
+      if (typeof applyLocaleToDOM === 'function') applyLocaleToDOM();
+      loadAiTeammates();
+    },
+
+    onDeactivate: function() {
+      // cleanup if needed
+    }
+  });
+
+})();

package/vendor/agent-frontend-shell/extensions/pages/manifest.json

@@ -0,0 +1,6 @@
+{
+  "pages": [
+    "/extensions/pages/ai-teammates/page.css",
+    "/extensions/pages/ai-teammates/page.js"
+  ]
+}

package/vendor/agent-frontend-shell/extensions/pages/registry.css

@@ -0,0 +1,56 @@
+/* Extension Pages Registry - Base CSS */
+
+.ext-panel-view {
+  display: none;
+  flex: 1;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.ext-panel-view.active {
+  display: flex;
+}
+
+.ext-main-view {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: none;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+.ext-main-view.active {
+  display: flex;
+}
+
+/* Coming soon placeholder */
+.ext-coming-soon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 32px;
+  text-align: center;
+  gap: 16px;
+}
+
+.ext-coming-soon-icon {
+  width: 64px;
+  height: 64px;
+  color: var(--muted);
+  opacity: 0.5;
+}
+
+.ext-coming-soon-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.ext-coming-soon-desc {
+  font-size: 14px;
+  color: var(--muted);
+  max-width: 320px;
+}