feat: display team managers on team detail page header (#114)

Show configured managers as clickable links in the team detail header.
When no manager is configured, display guidance text with team-admin
names so users know who to contact. Adds a lightweight
GET /api/roles/members/:role endpoint (any authenticated user) and
getUsersByRole() to the role store.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: accorvin

modules/team-tracker/client/views/TeamRosterView.vue

@@ -63,6 +63,57 @@
           </div>
         </div>
 
+        <!-- Team managers -->
+        <div v-if="isInAppMode && !managersLoading" class="mt-2 flex flex-wrap items-center gap-x-1.5 text-sm text-gray-600 dark:text-gray-400">
+          <template v-if="teamManagers.length > 0">
+            <span class="text-gray-400 dark:text-gray-500 shrink-0">Manager{{ teamManagers.length > 1 ? 's' : '' }}:</span>
+            <template v-for="(mgr, i) in teamManagers" :key="mgr.uid">
+              <template v-if="i > 0">, </template>
+              <button
+                @click="navigateToPerson(mgr.uid)"
+                class="text-primary-600 dark:text-primary-400 hover:underline"
+              >{{ mgr.name || mgr.uid }}</button>
+            </template>
+            <button
+              v-if="canManageMembers"
+              @click="showManagersModal = true"
+              class="ml-1 p-0.5 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
+              title="Edit managers"
+            >
+              <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+            </button>
+          </template>
+          <template v-else>
+            <span class="text-gray-400 dark:text-gray-500 italic">
+              No manager configured.
+              <template v-if="teamAdminNames.length > 0">
+                Contact a Team Admin ({{ teamAdminNames.join(', ') }}) to assign one.
+              </template>
+              <template v-else>
+                Contact an admin to assign one.
+              </template>
+            </span>
+            <button
+              v-if="canManageMembers"
+              @click="showManagersModal = true"
+              class="ml-1 text-primary-600 dark:text-primary-400 hover:underline text-xs"
+            >
+              + Add manager
+            </button>
+          </template>
+        </div>
+
+        <!-- Team Managers Modal -->
+        <TeamManagersModal
+          v-if="showManagersModal"
+          :teamId="team.teamId"
+          :teamName="team.displayName"
+          @close="showManagersModal = false"
+          @updated="handleManagersUpdated"
+        />
+
         <!-- Team description -->
         <div v-if="isInAppMode && (team.description || canManageMembers)" class="mt-3">
           <template v-if="!editingDescription">
@@ -337,6 +388,7 @@ import TeamDeliveryTab from '../components/TeamDeliveryTab.vue'
 import TeamBacklogTab from '../components/TeamBacklogTab.vue'
 import TeamAutofixTab from '../components/autofix/TeamAutofixTab.vue'
 import TeamFieldEditor from '../components/TeamFieldEditor.vue'
+import TeamManagersModal from '../components/TeamManagersModal.vue'
 import ContributionBoundary from '@shared/client/components/ContributionBoundary.vue'
 import { getTeamDetailTabs, runGuard } from '../contributions'
 import RefreshModal from '@shared/client/components/RefreshModal.vue'
@@ -347,6 +399,7 @@ import { usePermissions } from '@shared/client/composables/usePermissions'
 import { useFieldDefinitions } from '@shared/client/composables/useFieldDefinitions'
 import { useOrgRoster } from '../composables/useOrgRoster'
 import { refreshMetrics, getTeamMetrics, apiRequest } from '@shared/client/services/api'
+import { useTeams } from '@shared/client/composables/useTeams'
 import { useManagerTutorial } from '../composables/useManagerTutorial'
 import { Marked } from 'marked'
 import DOMPurify from 'dompurify'
@@ -358,10 +411,41 @@ const { loadGitlabStats } = useGitlabStats()
 const { isAdmin } = useAuth()
 const { canEditTeam, managedUids } = usePermissions()
 const { definitions, fetchDefinitions } = useFieldDefinitions()
+const { fetchTeamManagers } = useTeams()
 const { resumeTourIfActive, destroyTour } = useManagerTutorial()
 
 const fromSotu = computed(() => nav.params.value?.from === 'sotu')
 
+// --- Team managers ---
+const teamManagers = ref([])
+const managersLoading = ref(true)
+const showManagersModal = ref(false)
+const teamAdminNames = ref([])
+
+async function fetchManagersForTeam() {
+  if (!team.value?.teamId) return
+  managersLoading.value = true
+  try {
+    teamManagers.value = await fetchTeamManagers(team.value.teamId)
+  } catch {
+    teamManagers.value = []
+  }
+  if (teamManagers.value.length === 0) {
+    try {
+      const data = await apiRequest('/roles/members/team-admin')
+      teamAdminNames.value = (data.members || []).map(m => m.name)
+    } catch {
+      teamAdminNames.value = []
+    }
+  }
+  managersLoading.value = false
+}
+
+async function handleManagersUpdated() {
+  await fetchManagersForTeam()
+  await reloadRoster()
+}
+
 function handleBack() {
   if (fromSotu.value) {
     window.location.hash = '#/'
@@ -726,6 +810,7 @@ onMounted(() => {
   fetchRfeConfig()
   loadGitlabStats()
   fetchDefinitions()
+  fetchManagersForTeam()
   resumeTourIfActive('team-detail')
 })
 
@@ -737,13 +822,15 @@ watch(() => nav.params.value?.teamKey, () => {
   fetchTeamMetrics()
   fetchTeamDetail()
   fetchRfeConfig()
+  fetchManagersForTeam()
 })
 
 // Retry loading once team resolves from roster async load
 watch(team, (newVal, oldVal) => {
   if (newVal && !oldVal) {
     if (!teamMetrics.value) fetchTeamMetrics()
     if (!teamDetail.value) fetchTeamDetail()
+    if (managersLoading.value) fetchManagersForTeam()
   }
 })
 </script>

server/routes/roles.js

@@ -6,7 +6,7 @@
  */
 
 function registerRoleRoutes(app, context) {
-  const { requireAdmin, requireScope, blockDuringImpersonation, roleStore, roleRegistry } = context;
+  const { requireAdmin, requireScope, blockDuringImpersonation, roleStore, roleRegistry, storage } = context;
 
   /**
    * @openapi
@@ -158,6 +158,83 @@ function registerRoleRoutes(app, context) {
     res.json({ roles: await roleStore.getRoles(req.userEmail) });
   });
 
+  /**
+   * @openapi
+   * /api/roles/members/{role}:
+   *   get:
+   *     tags: [Auth]
+   *     summary: Get names of users with a specific role
+   *     description: Returns display names of users who hold the given role. Available to any authenticated user.
+   *     parameters:
+   *       - in: path
+   *         name: role
+   *         required: true
+   *         schema:
+   *           type: string
+   *     responses:
+   *       200:
+   *         description: List of user names with the role
+   *         content:
+   *           application/json:
+   *             schema:
+   *               type: object
+   *               properties:
+   *                 members:
+   *                   type: array
+   *                   items:
+   *                     type: object
+   *                     properties:
+   *                       name:
+   *                         type: string
+   *       400:
+   *         description: Invalid role
+   *         content:
+   *           application/json:
+   *             schema:
+   *               $ref: '#/components/schemas/ErrorResponse'
+   */
+  app.get('/api/roles/members/:role', async function(req, res) {
+    try {
+      const { role } = req.params;
+      if (!role || (roleRegistry && !roleRegistry.isValid(role))) {
+        return res.status(400).json({ error: 'Invalid role' });
+      }
+
+      const emails = await roleStore.getUsersByRole(role);
+      if (emails.length === 0) {
+        return res.json({ members: [] });
+      }
+
+      let registry;
+      try {
+        registry = await storage.readFromStorage('team-data/registry.json');
+      } catch {
+        registry = null;
+      }
+
+      const emailIndex = new Map();
+      const uidIndex = new Map();
+      if (registry?.people) {
+        for (const [uid, person] of Object.entries(registry.people)) {
+          if (person.email) emailIndex.set(person.email.toLowerCase(), person.name);
+          if (uid) uidIndex.set(uid.toLowerCase(), person.name);
+        }
+      }
+
+      const members = emails.map(email => {
+        const lower = email.toLowerCase();
+        const name = emailIndex.get(lower)
+          || uidIndex.get(lower.split('@')[0]);
+        return { name: name || email };
+      });
+
+      res.json({ members });
+    } catch (error) {
+      console.error('Get role members error:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+
   app.get('/api/roles', requireAdmin, requireScope('admin:manage'), async function(req, res) {
     try {
       res.json({ assignments: await roleStore.listAssignments() });

shared/server/role-store.js

@@ -350,6 +350,19 @@ function createRoleStore(readFromStorage, writeToStorage, options = {}) {
       .map(([email]) => email);
   }
 
+  async function getUsersByRole(role) {
+    if (!role) return [];
+    if (RoleModel) {
+      const docs = await RoleModel.find({ roles: role }, { email: 1 }).lean();
+      return docs.map(d => d.email);
+    }
+
+    const data = await readRolesFile();
+    return Object.entries(data.assignments)
+      .filter(([, entry]) => entry.roles.includes(role))
+      .map(([email]) => email);
+  }
+
   async function migrateFromAllowlist() {
     if (RoleModel) {
       const count = await RoleModel.countDocuments();
@@ -525,6 +538,7 @@ function createRoleStore(readFromStorage, writeToStorage, options = {}) {
     revokeRole,
     listAssignments,
     getAdminEmails,
+    getUsersByRole,
     migrateFromAllowlist,
     migrateEmailDomains,
     invalidateCache