fix(team): resolve TypeScript errors in team collaboration module

- Remove unused imports and variables in Team components
- Fix CollaborationEvent type import in useTeamEvents
- Add proper type guards for Hand status in gatewayStore
- Fix Session status type compatibility in gateway-client
- Remove unused getGatewayClient import from teamStore
- Handle unknown payload types in TeamCollaborationView

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

desktop/src/components/DevQALoop.tsx

@@ -7,11 +7,11 @@
  * @module components/DevQALoop
  */
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useTeamStore } from '../store/teamStore';
 import type { DevQALoop as DevQALoopType, ReviewFeedback, ReviewIssue } from '../types/team';
 import {
-  RefreshCw, CheckCircle, XCircle, AlertTriangle, ArrowRight,
+  RefreshCw, CheckCircle, XCircle, AlertTriangle,
   Clock, MessageSquare, FileCode, Bug, Lightbulb, ChevronDown, ChevronUp,
   Send, ThumbsUp, ThumbsDown, AlertOctagon,
 } from 'lucide-react';
@@ -126,7 +126,7 @@ interface ReviewFormProps {
   onCancel: () => void;
 }
 
-function ReviewForm({ loopId, teamId, onSubmit, onCancel }: ReviewFormProps) {
+function ReviewForm({ loopId: _loopId, teamId: _teamId, onSubmit, onCancel }: ReviewFormProps) {
   const [verdict, setVerdict] = useState<ReviewFeedback['verdict']>('needs_work');
   const [comment, setComment] = useState('');
   const [issues, setIssues] = useState<ReviewIssue[]>([]);
@@ -316,10 +316,6 @@ export function DevQALoopPanel({ loop, teamId, developerName, reviewerName, task
     setShowReviewForm(false);
   };
 
-  const handleStartRevising = async () => {
-    await updateLoopState(teamId, loop.id, 'revising');
-  };
-
   const handleCompleteRevision = async () => {
     await updateLoopState(teamId, loop.id, 'reviewing');
   };

desktop/src/components/TeamCollaborationView.tsx

@@ -11,7 +11,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useTeamStore } from '../store/teamStore';
 import type { Team, TeamMember, TeamTask, CollaborationEvent } from '../types/team';
 import {
-  Activity, Users, CheckCircle, Clock, AlertTriangle, Play, Pause,
+  Activity, Users, CheckCircle, AlertTriangle, Play,
   ArrowRight, GitBranch, MessageSquare, FileCode, Bot, Zap,
   TrendingUp, TrendingDown, Minus, Circle,
 } from 'lucide-react';
@@ -56,7 +56,9 @@ function EventFeedItem({ event, team }: EventFeedItemProps) {
           </span>
         </div>
         <p className="text-sm text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2">
-          {event.payload.description || JSON.stringify(event.payload).slice(0, 100)}
+          {typeof event.payload.description === 'string'
+            ? event.payload.description
+            : JSON.stringify(event.payload).slice(0, 100)}
         </p>
       </div>
       <span className="text-xs text-gray-400 whitespace-nowrap">

desktop/src/components/TeamOrchestrator.tsx

@@ -7,11 +7,10 @@
  * @module components/TeamOrchestrator
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect } from 'react';
 import { useTeamStore } from '../store/teamStore';
 import { useGatewayStore } from '../store/gatewayStore';
 import type {
-  Team,
   TeamMember,
   TeamTask,
   TeamMemberRole,
@@ -19,9 +18,9 @@ import type {
   CollaborationPattern,
 } from '../types/team';
 import {
-  Users, Plus, Trash2, Edit2, Check, X, ChevronDown, ChevronUp,
+  Users, Plus, Trash2, X,
-  Bot, GitBranch, ArrowRight, Clock, AlertTriangle, CheckCircle,
+  Bot, Clock, AlertTriangle, CheckCircle,
-  Play, Pause, Settings, UserPlus, FileText, Activity,
+  Play, UserPlus, FileText,
 } from 'lucide-react';
 
 // === Sub-Components ===
@@ -115,7 +114,7 @@ interface TaskCardProps {
   onStatusChange: (status: TeamTask['status']) => void;
 }
 
-function TaskCard({ task, members, isSelected, onSelect, onAssign, onStatusChange }: TaskCardProps) {
+function TaskCard({ task, members, isSelected, onSelect, onAssign, onStatusChange: _onStatusChange }: TaskCardProps) {
   const [showAssignMenu, setShowAssignMenu] = useState(false);
 
   const priorityColors: Record<TaskPriority, string> = {
@@ -216,7 +215,6 @@ export function TeamOrchestrator({ isOpen, onClose }: TeamOrchestratorProps) {
     teams,
     activeTeam,
     metrics,
-    isLoading,
     error,
     selectedTaskId,
     selectedMemberId,

desktop/src/lib/gateway-client.ts

@@ -967,12 +967,42 @@ export class GatewayClient {
   // === OpenFang Hands API ===
 
   /** List available Hands */
-  async listHands(): Promise<{ hands: { id: string; name: string; description: string; status: string; requirements_met?: boolean; category?: string }[] }> {
+  async listHands(): Promise<{
+    hands: {
+      id?: string;
+      name: string;
+      description?: string;
+      status?: string;
+      requirements_met?: boolean;
+      category?: string;
+      icon?: string;
+      tool_count?: number;
+      tools?: string[];
+      metric_count?: number;
+      metrics?: string[];
+    }[]
+  }> {
     return this.restGet('/api/hands');
   }
 
   /** Get Hand details */
-  async getHand(name: string): Promise<{ name: string; description: string; config: Record<string, unknown> }> {
+  async getHand(name: string): Promise<{
+    id?: string;
+    name?: string;
+    description?: string;
+    status?: string;
+    requirements_met?: boolean;
+    category?: string;
+    icon?: string;
+    provider?: string;
+    model?: string;
+    requirements?: { description?: string; name?: string; met?: boolean; satisfied?: boolean; details?: string; hint?: string }[];
+    tools?: string[];
+    metrics?: string[];
+    config?: Record<string, unknown>;
+    tool_count?: number;
+    metric_count?: number;
+  }> {
     return this.restGet(`/api/hands/${name}`);
   }
 
@@ -1097,7 +1127,7 @@ export class GatewayClient {
       created_at: string;
       updated_at?: string;
       message_count?: number;
-      status?: string;
+      status?: 'active' | 'archived' | 'expired';
     }>;
   }> {
     const params = new URLSearchParams();
@@ -1113,7 +1143,7 @@ export class GatewayClient {
     created_at: string;
     updated_at?: string;
     message_count?: number;
-    status?: string;
+    status?: 'active' | 'archived' | 'expired';
     metadata?: Record<string, unknown>;
   }> {
     return this.restGet(`/api/sessions/${sessionId}`);

desktop/src/lib/team-client.ts

@@ -23,6 +23,9 @@ import type {
   TeamMetrics,
 } from '../types/team';
 
+// Re-export types for consumers
+export type { CollaborationEvent } from '../types/team';
+
 // === Configuration ===
 
 const API_BASE = '/api';  // Uses Vite proxy

desktop/src/lib/useTeamEvents.ts

@@ -10,7 +10,7 @@
 import { useEffect, useRef, useCallback } from 'react';
 import { useTeamStore } from '../store/teamStore';
 import { useGatewayStore } from '../store/gatewayStore';
-import type { TeamEventMessage, TeamEventType } from '../lib/team-client';
+import type { TeamEventMessage, TeamEventType, CollaborationEvent } from '../lib/team-client';
 
 interface UseTeamEventsOptions {
   /** Subscribe to specific team only, or null for all teams */
@@ -25,12 +25,11 @@ interface UseTeamEventsOptions {
  * Hook for subscribing to real-time team collaboration events
  */
 export function useTeamEvents(options: UseTeamEventsOptions = {}) {
-  const { teamId = null, eventTypes, maxEvents = 100 } = options;
+  const { teamId = null, eventTypes } = options;
   const unsubscribeRef = useRef<(() => void) | null>(null);
 
   const {
     addEvent,
-    setActiveTeam,
     updateTaskStatus,
     updateLoopState,
     loadTeams,

desktop/src/store/gatewayStore.ts

@@ -1039,17 +1039,23 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
       try {
         const result = await get().client.listHands();
         // Map API response to Hand interface
-        const hands: Hand[] = (result?.hands || []).map(h => ({
+        const validStatuses = ['idle', 'running', 'needs_approval', 'error', 'unavailable', 'setup_needed'] as const;
+        const hands: Hand[] = (result?.hands || []).map(h => {
+          const status = validStatuses.includes(h.status as any)
+            ? h.status as Hand['status']
+            : (h.requirements_met ? 'idle' : 'setup_needed');
+          return {
             id: h.id || h.name,
             name: h.name,
             description: h.description || '',
-          status: h.status || (h.requirements_met ? 'idle' : 'setup_needed'),
+            status,
             requirements_met: h.requirements_met,
             category: h.category,
             icon: h.icon,
             toolCount: h.tool_count || h.tools?.length,
             metricCount: h.metric_count || h.metrics?.length,
-        }));
+          };
+        });
         set({ hands, isLoading: false });
       } catch {
         set({ isLoading: false });
@@ -1062,24 +1068,39 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
         const result = await get().client.getHand(name);
         if (!result) return undefined;
 
+        // Helper to extract string from unknown config
+        const getStringFromConfig = (key: string): string | undefined => {
+          const val = result.config?.[key];
+          return typeof val === 'string' ? val : undefined;
+        };
+        const getArrayFromConfig = (key: string): string[] | undefined => {
+          const val = result.config?.[key];
+          return Array.isArray(val) ? val : undefined;
+        };
+
+        const validStatuses = ['idle', 'running', 'needs_approval', 'error', 'unavailable', 'setup_needed'] as const;
+        const status = validStatuses.includes(result.status as any)
+          ? result.status as Hand['status']
+          : (result.requirements_met ? 'idle' : 'setup_needed');
+
         // Map API response to extended Hand interface
         const hand: Hand = {
           id: result.id || result.name || name,
           name: result.name || name,
           description: result.description || '',
-          status: result.status || (result.requirements_met ? 'idle' : 'setup_needed'),
+          status,
           requirements_met: result.requirements_met,
           category: result.category,
           icon: result.icon,
-          provider: result.provider || result.config?.provider,
+          provider: result.provider || getStringFromConfig('provider'),
-          model: result.model || result.config?.model,
+          model: result.model || getStringFromConfig('model'),
           requirements: result.requirements?.map((r: any) => ({
             description: r.description || r.name || String(r),
             met: r.met ?? r.satisfied ?? true,
             details: r.details || r.hint,
           })),
-          tools: result.tools || result.config?.tools,
+          tools: result.tools || getArrayFromConfig('tools'),
-          metrics: result.metrics || result.config?.metrics,
+          metrics: result.metrics || getArrayFromConfig('metrics'),
           toolCount: result.tool_count || result.tools?.length || 0,
           metricCount: result.metric_count || result.metrics?.length || 0,
         };
@@ -1119,7 +1140,7 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
     triggerHand: async (name: string, params?: Record<string, unknown>) => {
       try {
         const result = await get().client.triggerHand(name, params);
-        return result ? { runId: result.runId, status: result.status } : undefined;
+        return result ? { runId: result.runId, status: result.status, startedAt: new Date().toISOString() } : undefined;
       } catch (err: any) {
         set({ error: err.message });
         return undefined;
@@ -1446,7 +1467,7 @@ export const useGatewayStore = create<GatewayStore>((set, get) => {
           agentId: result.agent_id,
           createdAt: result.created_at,
           status: 'active',
-          metadata: result.metadata,
+          metadata: metadata,
         };
         set(state => ({ sessions: [...state.sessions, session] }));
         return session;

desktop/src/store/teamStore.ts

@@ -16,7 +16,6 @@ import type {
   TeamMemberRole,
   DevQALoop,
   DevQALoopState,
-  CollaborationPattern,
   CreateTeamRequest,
   AddTeamTaskRequest,
   TeamMetrics,
@@ -24,7 +23,6 @@ import type {
   ReviewFeedback,
   TaskDeliverable,
 } from '../types/team';
-import { getGatewayClient } from '../lib/gateway-client';
 
 // === Store State ===
 
@@ -136,7 +134,6 @@ export const useTeamStore = create<TeamStoreState>((set, get) => ({
   loadTeams: async () => {
     set({ isLoading: true, error: null });
     try {
-      const client = getGatewayClient();
       // For now, load from localStorage until API is available
       const stored = localStorage.getItem('zclaw-teams');
       const teams: Team[] = stored ? JSON.parse(stored) : [];
@@ -150,7 +147,7 @@ export const useTeamStore = create<TeamStoreState>((set, get) => ({
     set({ isLoading: true, error: null });
     try {
       const now = new Date().toISOString();
-      const members: TeamMember[] = request.memberAgents.map((m, index) => ({
+      const members: TeamMember[] = request.memberAgents.map((m) => ({
         id: generateId(),
         agentId: m.agentId,
         name: `Agent-${m.agentId.slice(0, 4)}`,
@@ -208,7 +205,7 @@ export const useTeamStore = create<TeamStoreState>((set, get) => ({
   },
 
   setActiveTeam: (team: Team | null) => {
-    set(state => ({
+    set(() => ({
       activeTeam: team,
       metrics: team ? calculateMetrics(team) : null,
     }));

desktop/src/types/team.ts

@@ -7,7 +7,7 @@
  * @module types/team
  */
 
-import type { Agent, AgentStatus } from './agent';
+import type { AgentStatus } from './agent';
 
 // === Team Definition ===