Refactor team collaboration skills and update documentation

- Renamed `team-lifecycle-v5` to `team-lifecycle` across various documentation files for consistency.
- Updated references in code examples and usage sections to reflect the new skill name.
- Added a new command file for the `monitor` functionality in the `team-iterdev` skill, detailing the coordinator's monitoring events and task management.
- Introduced new components for dynamic pipeline visualization and session coordinates display in the frontend.
- Implemented utility functions for pipeline stage detection and status derivation based on message history.
- Enhanced the team role panel to map members to their respective pipeline roles with status indicators.
- Updated Chinese documentation to reflect the changes in skill names and descriptions.

ccw/frontend/src/pages/TeamPage.tsx

@@ -3,21 +3,24 @@
 // ========================================
 // Main page for team execution - list/detail dual view with tabbed detail
 
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { Package, MessageSquare, Maximize2, Minimize2 } from 'lucide-react';
+import { Package, MessageSquare, Maximize2, Minimize2, GitBranch } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/Card';
 import { cn } from '@/lib/utils';
 import { useAppStore, selectIsImmersiveMode } from '@/stores/appStore';
 import { TabsNavigation, type TabItem } from '@/components/ui/TabsNavigation';
 import { useTeamStore } from '@/stores/teamStore';
 import type { TeamDetailTab } from '@/stores/teamStore';
-import { useTeamMessages, useTeamStatus } from '@/hooks/useTeamData';
+import { useTeams, useTeamMessages, useTeamStatus } from '@/hooks/useTeamData';
 import { TeamHeader } from '@/components/team/TeamHeader';
-import { TeamPipeline } from '@/components/team/TeamPipeline';
-import { TeamMembersPanel } from '@/components/team/TeamMembersPanel';
+import { DynamicPipeline } from '@/components/team/DynamicPipeline';
+import { TeamRolePanel } from '@/components/team/TeamRolePanel';
+import { SessionCoordinates } from '@/components/team/SessionCoordinates';
 import { TeamMessageFeed } from '@/components/team/TeamMessageFeed';
 import { TeamArtifacts } from '@/components/team/TeamArtifacts';
 import { TeamListView } from '@/components/team/TeamListView';
+import { derivePipelineStages, detectMultiPhase } from '@/lib/pipeline-utils';
 
 export function TeamPage() {
   const { formatMessage } = useIntl();
@@ -34,11 +37,13 @@ export function TeamPage() {
     detailTab,
     setDetailTab,
     backToList,
+    locationFilter,
   } = useTeamStore();
   const isImmersiveMode = useAppStore(selectIsImmersiveMode);
   const toggleImmersiveMode = useAppStore((s) => s.toggleImmersiveMode);
 
-  // Data hooks (only active in detail mode)
+  // Data hooks
+  const { teams } = useTeams(locationFilter);
   const { messages, total: messageTotal } = useTeamMessages(
     viewMode === 'detail' ? selectedTeam : null,
     messageFilter
@@ -47,6 +52,31 @@ export function TeamPage() {
     viewMode === 'detail' ? selectedTeam : null
   );
 
+  // Find enriched team data from list response
+  const teamData = useMemo(
+    () => teams.find((t) => t.name === selectedTeam),
+    [teams, selectedTeam]
+  );
+
+  // Derive dynamic pipeline stages and multi-phase info
+  const stages = useMemo(
+    () =>
+      derivePipelineStages(
+        {
+          pipeline_stages: teamData?.pipeline_stages,
+          role_state: teamData?.role_state,
+          roles: teamData?.roles,
+        },
+        messages
+      ),
+    [teamData?.pipeline_stages, teamData?.role_state, teamData?.roles, messages]
+  );
+
+  const phaseInfo = useMemo(
+    () => detectMultiPhase(teamData?.role_state),
+    [teamData?.role_state]
+  );
+
   // List view
   if (viewMode === 'list' || !selectedTeam) {
     return (
@@ -57,6 +87,11 @@ export function TeamPage() {
   }
 
   const tabs: TabItem[] = [
+    {
+      value: 'pipeline',
+      label: formatMessage({ id: 'team.tabs.pipeline' }),
+      icon: <GitBranch className="h-4 w-4" />,
+    },
     {
       value: 'artifacts',
       label: formatMessage({ id: 'team.tabs.artifacts' }),
@@ -72,7 +107,7 @@ export function TeamPage() {
   // Detail view
   return (
     <div className={cn("space-y-6", isImmersiveMode && "h-screen overflow-hidden")}>
-      {/* Detail Header: back button + team name + stats + controls */}
+      {/* Detail Header */}
       <div className="flex items-center justify-between">
         <TeamHeader
           selectedTeam={selectedTeam}
@@ -81,6 +116,8 @@ export function TeamPage() {
           totalMessages={totalMessages}
           autoRefresh={autoRefresh}
           onToggleAutoRefresh={toggleAutoRefresh}
+          skillType={teamData?.team_name ? `team-${teamData.team_name}` : undefined}
+          pipelineMode={teamData?.pipeline_mode}
         />
         <button
           onClick={toggleImmersiveMode}
@@ -96,27 +133,45 @@ export function TeamPage() {
         </button>
       </div>
 
-      {/* Overview: Pipeline + Members (always visible) */}
+      {/* Overview: DynamicPipeline + TeamRolePanel */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <Card className="lg:col-span-2 flex flex-col">
           <CardContent className="p-4 flex-1">
-            <TeamPipeline messages={messages} />
+            <DynamicPipeline stages={stages} phaseInfo={phaseInfo} />
           </CardContent>
         </Card>
         <Card>
           <CardContent className="p-4">
-            <TeamMembersPanel members={members} />
+            <TeamRolePanel
+              members={members}
+              stages={stages}
+              roleState={teamData?.role_state}
+            />
           </CardContent>
         </Card>
       </div>
 
-      {/* Tab Navigation: Artifacts / Messages */}
+      {/* Session Coordinates (only for multi-phase sessions) */}
+      {phaseInfo && (
+        <SessionCoordinates phaseInfo={phaseInfo} />
+      )}
+
+      {/* Tab Navigation */}
       <TabsNavigation
         value={detailTab}
         onValueChange={(v) => setDetailTab(v as TeamDetailTab)}
         tabs={tabs}
       />
 
+      {/* Pipeline Tab */}
+      {detailTab === 'pipeline' && (
+        <Card>
+          <CardContent className="p-6">
+            <DynamicPipeline stages={stages} phaseInfo={phaseInfo} />
+          </CardContent>
+        </Card>
+      )}
+
       {/* Artifacts Tab */}
       {detailTab === 'artifacts' && (
         <TeamArtifacts teamName={selectedTeam} />