diff --git a/desktop/src/components/DevQALoop.tsx b/desktop/src/components/DevQALoop.tsx
new file mode 100644
index 0000000..509bc8c
--- /dev/null
+++ b/desktop/src/components/DevQALoop.tsx
@@ -0,0 +1,468 @@
+/**
+ * DevQALoop - Developer ↔ QA Review Loop Interface
+ *
+ * Visualizes the iterative review cycle between Developer and QA agents,
+ * showing iteration count, feedback history, and current state.
+ *
+ * @module components/DevQALoop
+ */
+
+import { useState, useEffect } from 'react';
+import { useTeamStore } from '../store/teamStore';
+import type { DevQALoop as DevQALoopType, ReviewFeedback, ReviewIssue } from '../types/team';
+import {
+  RefreshCw, CheckCircle, XCircle, AlertTriangle, ArrowRight,
+  Clock, MessageSquare, FileCode, Bug, Lightbulb, ChevronDown, ChevronUp,
+  Send, ThumbsUp, ThumbsDown, AlertOctagon,
+} from 'lucide-react';
+
+// === Sub-Components ===
+
+interface FeedbackItemProps {
+  feedback: ReviewFeedback;
+  iteration: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function FeedbackItem({ feedback, iteration, isExpanded, onToggle }: FeedbackItemProps) {
+  const verdictColors = {
+    approved: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+    needs_work: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
+    rejected: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+  };
+
+  const verdictIcons = {
+    approved: <ThumbsUp className="w-4 h-4" />,
+    needs_work: <AlertTriangle className="w-4 h-4" />,
+    rejected: <ThumbsDown className="w-4 h-4" />,
+  };
+
+  const severityColors = {
+    critical: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+    major: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+    minor: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
+    suggestion: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  };
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="w-full px-4 py-3 flex items-center justify-between bg-gray-50 dark:bg-gray-800"
+      >
+        <div className="flex items-center gap-3">
+          <span className="w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-medium">
+            {iteration}
+          </span>
+          <span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${verdictColors[feedback.verdict]}`}>
+            {verdictIcons[feedback.verdict]}
+            {feedback.verdict.replace('_', ' ')}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {new Date(feedback.reviewedAt).toLocaleString()}
+          </span>
+        </div>
+        {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+      </button>
+
+      {isExpanded && (
+        <div className="p-4 space-y-4">
+          {/* Comments */}
+          {feedback.comments.length > 0 && (
+            <div>
+              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comments</h5>
+              <ul className="space-y-2">
+                {feedback.comments.map((comment, idx) => (
+                  <li key={idx} className="text-sm text-gray-600 dark:text-gray-400 flex items-start gap-2">
+                    <MessageSquare className="w-4 h-4 mt-0.5 text-gray-400" />
+                    {comment}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Issues */}
+          {feedback.issues.length > 0 && (
+            <div>
+              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Issues ({feedback.issues.length})</h5>
+              <div className="space-y-2">
+                {feedback.issues.map((issue, idx) => (
+                  <div key={idx} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${severityColors[issue.severity]}`}>
+                        {issue.severity}
+                      </span>
+                      {issue.file && (
+                        <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                          <FileCode className="w-3 h-3" />
+                          {issue.file}{issue.line ? `:${issue.line}` : ''}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-700 dark:text-gray-300">{issue.description}</p>
+                    {issue.suggestion && (
+                      <p className="mt-1 text-xs text-blue-600 dark:text-blue-400 flex items-start gap-1">
+                        <Lightbulb className="w-3 h-3 mt-0.5" />
+                        {issue.suggestion}
+                      </p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ReviewFormProps {
+  loopId: string;
+  teamId: string;
+  onSubmit: (feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => void;
+  onCancel: () => void;
+}
+
+function ReviewForm({ loopId, teamId, onSubmit, onCancel }: ReviewFormProps) {
+  const [verdict, setVerdict] = useState<ReviewFeedback['verdict']>('needs_work');
+  const [comment, setComment] = useState('');
+  const [issues, setIssues] = useState<ReviewIssue[]>([]);
+  const [newIssue, setNewIssue] = useState<Partial<ReviewIssue>>({});
+
+  const handleAddIssue = () => {
+    if (!newIssue.description) return;
+    setIssues([...issues, {
+      severity: newIssue.severity || 'minor',
+      description: newIssue.description,
+      file: newIssue.file,
+      line: newIssue.line,
+      suggestion: newIssue.suggestion,
+    } as ReviewIssue]);
+    setNewIssue({});
+  };
+
+  const handleSubmit = () => {
+    onSubmit({
+      verdict,
+      comments: comment ? [comment] : [],
+      issues,
+    });
+  };
+
+  return (
+    <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-4">
+      <h4 className="font-medium text-gray-900 dark:text-white">Submit Review</h4>
+
+      {/* Verdict */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Verdict</label>
+        <div className="flex gap-2">
+          {(['approved', 'needs_work', 'rejected'] as const).map(v => (
+            <button
+              key={v}
+              onClick={() => setVerdict(v)}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
+                verdict === v
+                  ? v === 'approved'
+                    ? 'bg-green-500 text-white'
+                    : v === 'needs_work'
+                    ? 'bg-yellow-500 text-white'
+                    : 'bg-red-500 text-white'
+                  : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+              }`}
+            >
+              {v.replace('_', ' ')}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Comment */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comment</label>
+        <textarea
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+          placeholder="Overall feedback..."
+          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+          rows={3}
+        />
+      </div>
+
+      {/* Add Issue */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Add Issue</label>
+        <div className="grid grid-cols-2 gap-2">
+          <select
+            value={newIssue.severity || 'minor'}
+            onChange={(e) => setNewIssue({ ...newIssue, severity: e.target.value as ReviewIssue['severity'] })}
+            className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
+          >
+            <option value="critical">Critical</option>
+            <option value="major">Major</option>
+            <option value="minor">Minor</option>
+            <option value="suggestion">Suggestion</option>
+          </select>
+          <input
+            type="text"
+            value={newIssue.file || ''}
+            onChange={(e) => setNewIssue({ ...newIssue, file: e.target.value })}
+            placeholder="File path"
+            className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
+          />
+          <input
+            type="number"
+            value={newIssue.line || ''}
+            onChange={(e) => setNewIssue({ ...newIssue, line: parseInt(e.target.value) || undefined })}
+            placeholder="Line"
+            className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
+          />
+          <input
+            type="text"
+            value={newIssue.description || ''}
+            onChange={(e) => setNewIssue({ ...newIssue, description: e.target.value })}
+            placeholder="Issue description"
+            className="px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
+          />
+        </div>
+        <input
+          type="text"
+          value={newIssue.suggestion || ''}
+          onChange={(e) => setNewIssue({ ...newIssue, suggestion: e.target.value })}
+          placeholder="Suggested fix (optional)"
+          className="w-full mt-2 px-2 py-1.5 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm"
+        />
+        <button
+          onClick={handleAddIssue}
+          disabled={!newIssue.description}
+          className="mt-2 px-3 py-1.5 text-sm bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50"
+        >
+          Add Issue
+        </button>
+      </div>
+
+      {/* Issues List */}
+      {issues.length > 0 && (
+        <div className="space-y-1">
+          {issues.map((issue, idx) => (
+            <div key={idx} className="flex items-center gap-2 text-sm p-2 bg-white dark:bg-gray-900 rounded">
+              <span className="px-1.5 py-0.5 rounded text-xs bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300">
+                {issue.severity}
+              </span>
+              <span className="flex-1 truncate">{issue.description}</span>
+              <button
+                onClick={() => setIssues(issues.filter((_, i) => i !== idx))}
+                className="text-gray-400 hover:text-red-500"
+              >
+                <XCircle className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex gap-2">
+        <button
+          onClick={handleSubmit}
+          className="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center justify-center gap-2"
+        >
+          <Send className="w-4 h-4" />
+          Submit Review
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// === Main Component ===
+
+interface DevQALoopPanelProps {
+  loop: DevQALoopType;
+  teamId: string;
+  developerName: string;
+  reviewerName: string;
+  taskTitle: string;
+}
+
+export function DevQALoopPanel({ loop, teamId, developerName, reviewerName, taskTitle }: DevQALoopPanelProps) {
+  const [expandedFeedback, setExpandedFeedback] = useState<number | null>(null);
+  const [showReviewForm, setShowReviewForm] = useState(false);
+
+  const { submitReview, updateLoopState } = useTeamStore();
+
+  const stateConfig = {
+    idle: { color: 'gray', icon: <Clock className="w-5 h-5" />, label: 'Idle' },
+    developing: { color: 'blue', icon: <FileCode className="w-5 h-5" />, label: 'Developing' },
+    reviewing: { color: 'yellow', icon: <RefreshCw className="w-5 h-5" />, label: 'Reviewing' },
+    revising: { color: 'orange', icon: <Bug className="w-5 h-5" />, label: 'Revising' },
+    approved: { color: 'green', icon: <CheckCircle className="w-5 h-5" />, label: 'Approved' },
+    escalated: { color: 'red', icon: <AlertOctagon className="w-5 h-5" />, label: 'Escalated' },
+  };
+
+  const config = stateConfig[loop.state];
+
+  const handleSubmitReview = async (feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => {
+    await submitReview(teamId, loop.id, feedback);
+    setShowReviewForm(false);
+  };
+
+  const handleStartRevising = async () => {
+    await updateLoopState(teamId, loop.id, 'revising');
+  };
+
+  const handleCompleteRevision = async () => {
+    await updateLoopState(teamId, loop.id, 'reviewing');
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header */}
+      <div className={`px-4 py-3 bg-${config.color}-50 dark:bg-${config.color}-900/20 border-b border-${config.color}-200 dark:border-${config.color}-800`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`text-${config.color}-500`}>{config.icon}</div>
+            <div>
+              <h3 className="font-semibold text-gray-900 dark:text-white">Dev↔QA Loop</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{taskTitle}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={`px-2 py-1 rounded text-xs font-medium bg-${config.color}-100 text-${config.color}-700 dark:bg-${config.color}-900/30 dark:text-${config.color}-300`}>
+              {config.label}
+            </span>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              Iteration {loop.iterationCount + 1}/{loop.maxIterations}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Flow Visualization */}
+      <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+              ['developing', 'revising'].includes(loop.state) ? 'bg-blue-500 text-white' : 'bg-gray-200 dark:bg-gray-700'
+            }`}>
+              <FileCode className="w-4 h-4" />
+            </div>
+            <div className="text-sm">
+              <div className="font-medium text-gray-900 dark:text-white">{developerName}</div>
+              <div className="text-xs text-gray-500">Developer</div>
+            </div>
+          </div>
+
+          <div className="flex-1 mx-4 flex items-center">
+            <div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
+            <RefreshCw className={`w-5 h-5 mx-2 ${loop.state === 'reviewing' ? 'text-yellow-500 animate-spin' : 'text-gray-400'}`} />
+            <div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="text-sm text-right">
+              <div className="font-medium text-gray-900 dark:text-white">{reviewerName}</div>
+              <div className="text-xs text-gray-500">QA Reviewer</div>
+            </div>
+            <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+              loop.state === 'reviewing' ? 'bg-yellow-500 text-white' : 'bg-gray-200 dark:bg-gray-700'
+            }`}>
+              <Bug className="w-4 h-4" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center gap-1">
+          {Array.from({ length: loop.maxIterations }).map((_, i) => (
+            <div
+              key={i}
+              className={`flex-1 h-2 rounded ${
+                i < loop.iterationCount
+                  ? 'bg-yellow-400'
+                  : i === loop.iterationCount && ['developing', 'reviewing', 'revising'].includes(loop.state)
+                  ? 'bg-blue-400'
+                  : 'bg-gray-200 dark:bg-gray-700'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Feedback History */}
+      <div className="p-4 space-y-3 max-h-64 overflow-y-auto">
+        <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">Feedback History</h4>
+        {loop.feedbackHistory.length === 0 ? (
+          <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
+            No feedback yet. First review pending.
+          </div>
+        ) : (
+          loop.feedbackHistory.map((feedback, idx) => (
+            <FeedbackItem
+              key={idx}
+              feedback={feedback}
+              iteration={idx + 1}
+              isExpanded={expandedFeedback === idx}
+              onToggle={() => setExpandedFeedback(expandedFeedback === idx ? null : idx)}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+        {loop.state === 'escalated' ? (
+          <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
+            <AlertOctagon className="w-6 h-6 mx-auto mb-2 text-red-500" />
+            <p className="text-sm text-red-700 dark:text-red-300">
+              Maximum iterations reached. Human intervention required.
+            </p>
+          </div>
+        ) : loop.state === 'approved' ? (
+          <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
+            <CheckCircle className="w-6 h-6 mx-auto mb-2 text-green-500" />
+            <p className="text-sm text-green-700 dark:text-green-300">
+              Task approved and completed!
+            </p>
+          </div>
+        ) : loop.state === 'reviewing' && !showReviewForm ? (
+          <button
+            onClick={() => setShowReviewForm(true)}
+            className="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 flex items-center justify-center gap-2"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Submit Review
+          </button>
+        ) : loop.state === 'revising' ? (
+          <button
+            onClick={handleCompleteRevision}
+            className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center justify-center gap-2"
+          >
+            <CheckCircle className="w-4 h-4" />
+            Complete Revision
+          </button>
+        ) : showReviewForm ? (
+          <ReviewForm
+            loopId={loop.id}
+            teamId={teamId}
+            onSubmit={handleSubmitReview}
+            onCancel={() => setShowReviewForm(false)}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default DevQALoopPanel;
diff --git a/desktop/src/components/TeamCollaborationView.tsx b/desktop/src/components/TeamCollaborationView.tsx
new file mode 100644
index 0000000..8873015
--- /dev/null
+++ b/desktop/src/components/TeamCollaborationView.tsx
@@ -0,0 +1,399 @@
+/**
+ * TeamCollaborationView - Real-time Team Collaboration Status
+ *
+ * Displays live collaboration events, member status, task progress,
+ * and team metrics in a unified dashboard view.
+ *
+ * @module components/TeamCollaborationView
+ */
+
+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,
+  ArrowRight, GitBranch, MessageSquare, FileCode, Bot, Zap,
+  TrendingUp, TrendingDown, Minus, Circle,
+} from 'lucide-react';
+
+// === Sub-Components ===
+
+interface EventFeedItemProps {
+  event: CollaborationEvent;
+  team: Team;
+}
+
+function EventFeedItem({ event, team }: EventFeedItemProps) {
+  const sourceMember = team.members.find(m => m.agentId === event.sourceAgentId);
+
+  const eventIcons: Record<CollaborationEvent['type'], React.ReactNode> = {
+    task_assigned: <ArrowRight className="w-4 h-4 text-blue-500" />,
+    task_started: <Play className="w-4 h-4 text-green-500" />,
+    task_completed: <CheckCircle className="w-4 h-4 text-green-600" />,
+    review_requested: <MessageSquare className="w-4 h-4 text-yellow-500" />,
+    review_submitted: <FileCode className="w-4 h-4 text-purple-500" />,
+    loop_state_change: <RefreshCw className="w-4 h-4 text-orange-500" />,
+    member_status_change: <Users className="w-4 h-4 text-gray-500" />,
+  };
+
+  const formatTime = (timestamp: string) => {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    if (diff < 60000) return 'Just now';
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  return (
+    <div className="flex items-start gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
+      <div className="mt-0.5">{eventIcons[event.type]}</div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-gray-900 dark:text-white text-sm">
+            {sourceMember?.name || 'System'}
+          </span>
+          <span className="text-xs text-gray-500 dark:text-gray-400">
+            {event.type.replace(/_/g, ' ')}
+          </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)}
+        </p>
+      </div>
+      <span className="text-xs text-gray-400 whitespace-nowrap">
+        {formatTime(event.timestamp)}
+      </span>
+    </div>
+  );
+}
+
+function RefreshCw({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 2v6h-6M3 22v-6h6M21 12A9 9 0 0 0 6 5.3L3 8M3 12a9 9 0 0 0 15 6.7l3-2.7" />
+    </svg>
+  );
+}
+
+interface MemberStatusBadgeProps {
+  member: TeamMember;
+}
+
+function MemberStatusBadge({ member }: MemberStatusBadgeProps) {
+  const statusConfig = {
+    idle: { color: 'bg-gray-400', label: 'Idle' },
+    running: { color: 'bg-green-500 animate-pulse', label: 'Active' },
+    paused: { color: 'bg-yellow-500', label: 'Paused' },
+    error: { color: 'bg-red-500', label: 'Error' },
+  };
+
+  const config = statusConfig[member.status];
+
+  return (
+    <div className="flex items-center gap-2 p-2 rounded-lg bg-gray-50 dark:bg-gray-800">
+      <div className="relative">
+        <div className={`w-3 h-3 rounded-full ${config.color}`} />
+        {member.currentTasks.length > 0 && (
+          <div className="absolute -top-1 -right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
+            <span className="text-[10px] text-white font-bold">{member.currentTasks.length}</span>
+          </div>
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
+            {member.name}
+          </span>
+          <span className="text-xs text-gray-500">{config.label}</span>
+        </div>
+        <div className="mt-1 h-1 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-blue-500 transition-all"
+            style={{ width: `${member.workload}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface TaskProgressCardProps {
+  task: TeamTask;
+  assignee?: TeamMember;
+}
+
+function TaskProgressCard({ task, assignee }: TaskProgressCardProps) {
+  const statusConfig: Record<TeamTask['status'], { color: string; icon: React.ReactNode }> = {
+    pending: { color: 'text-gray-400', icon: <Circle className="w-4 h-4" /> },
+    assigned: { color: 'text-blue-400', icon: <ArrowRight className="w-4 h-4" /> },
+    in_progress: { color: 'text-green-500', icon: <Play className="w-4 h-4" /> },
+    review: { color: 'text-yellow-500', icon: <MessageSquare className="w-4 h-4" /> },
+    blocked: { color: 'text-red-500', icon: <AlertTriangle className="w-4 h-4" /> },
+    completed: { color: 'text-green-600', icon: <CheckCircle className="w-4 h-4" /> },
+    failed: { color: 'text-red-600', icon: <AlertTriangle className="w-4 h-4" /> },
+  };
+
+  const config = statusConfig[task.status];
+
+  return (
+    <div className="p-3 rounded-lg border border-gray-200 dark:border-gray-700">
+      <div className="flex items-start gap-2">
+        <div className={config.color}>{config.icon}</div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-900 dark:text-white truncate">
+              {task.title}
+            </span>
+            <span className={`text-xs px-1.5 py-0.5 rounded ${
+              task.priority === 'critical' ? 'bg-red-100 text-red-700' :
+              task.priority === 'high' ? 'bg-orange-100 text-orange-700' :
+              task.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' :
+              'bg-gray-100 text-gray-700'
+            }`}>
+              {task.priority}
+            </span>
+          </div>
+          <div className="mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <span>{task.type}</span>
+            {assignee && (
+              <>
+                <span>·</span>
+                <span>{assignee.name}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface MetricCardProps {
+  label: string;
+  value: number | string;
+  trend?: 'up' | 'down' | 'neutral';
+  format?: 'number' | 'percent' | 'time';
+}
+
+function MetricCard({ label, value, trend, format = 'number' }: MetricCardProps) {
+  const formattedValue = format === 'percent' ? `${value}%` :
+    format === 'time' ? `${Math.floor((value as number) / 60000)}m` :
+    value;
+
+  return (
+    <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-gray-500 dark:text-gray-400">{label}</span>
+        {trend && (
+          trend === 'up' ? <TrendingUp className="w-3 h-3 text-green-500" /> :
+          trend === 'down' ? <TrendingDown className="w-3 h-3 text-red-500" /> :
+          <Minus className="w-3 h-3 text-gray-400" />
+        )}
+      </div>
+      <div className="mt-1 text-xl font-bold text-gray-900 dark:text-white">
+        {formattedValue}
+      </div>
+    </div>
+  );
+}
+
+// === Main Component ===
+
+interface TeamCollaborationViewProps {
+  teamId: string;
+  compact?: boolean;
+}
+
+export function TeamCollaborationView({ teamId, compact = false }: TeamCollaborationViewProps) {
+  const { teams, recentEvents, metrics, activeTeam } = useTeamStore();
+  const [autoScroll, setAutoScroll] = useState(true);
+  const eventFeedRef = useRef<HTMLDivElement>(null);
+
+  const team = teams.find(t => t.id === teamId) || activeTeam;
+
+  useEffect(() => {
+    if (autoScroll && eventFeedRef.current) {
+      eventFeedRef.current.scrollTop = 0;
+    }
+  }, [recentEvents, autoScroll]);
+
+  if (!team) {
+    return (
+      <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+        <Users className="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" />
+        <p>No team selected</p>
+      </div>
+    );
+  }
+
+  const tasksByStatus = {
+    active: team.tasks.filter(t => ['in_progress', 'review'].includes(t.status)),
+    pending: team.tasks.filter(t => ['pending', 'assigned'].includes(t.status)),
+    completed: team.tasks.filter(t => t.status === 'completed'),
+    blocked: team.tasks.filter(t => ['blocked', 'failed'].includes(t.status)),
+  };
+
+  if (compact) {
+    return (
+      <div className="p-4 space-y-4">
+        {/* Quick Stats */}
+        <div className="grid grid-cols-4 gap-2">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-500">{tasksByStatus.active.length}</div>
+            <div className="text-xs text-gray-500">Active</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-gray-400">{tasksByStatus.pending.length}</div>
+            <div className="text-xs text-gray-500">Pending</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-500">{tasksByStatus.completed.length}</div>
+            <div className="text-xs text-gray-500">Done</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-500">{tasksByStatus.blocked.length}</div>
+            <div className="text-xs text-gray-500">Blocked</div>
+          </div>
+        </div>
+
+        {/* Member Status */}
+        <div className="grid grid-cols-2 gap-2">
+          {team.members.slice(0, 4).map(member => (
+            <MemberStatusBadge key={member.id} member={member} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-white dark:bg-gray-900">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Users className="w-5 h-5 text-blue-500" />
+            <h3 className="font-semibold text-gray-900 dark:text-white">{team.name}</h3>
+            <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+              team.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' :
+              team.status === 'paused' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300' :
+              'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
+            }`}>
+              {team.status}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <GitBranch className="w-4 h-4" />
+            <span>{team.pattern}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Metrics */}
+      {metrics && (
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <div className="grid grid-cols-5 gap-3">
+            <MetricCard label="Completed" value={metrics.tasksCompleted} />
+            <MetricCard label="Pass Rate" value={metrics.passRate.toFixed(0)} format="percent" trend={metrics.passRate > 80 ? 'up' : 'down'} />
+            <MetricCard label="Avg Time" value={metrics.avgCompletionTime} format="time" />
+            <MetricCard label="Iterations" value={metrics.avgIterations.toFixed(1)} trend={metrics.avgIterations < 2 ? 'up' : 'neutral'} />
+            <MetricCard label="Efficiency" value={metrics.efficiency.toFixed(0)} format="percent" trend={metrics.efficiency > 70 ? 'up' : 'down'} />
+          </div>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left: Members & Tasks */}
+        <div className="w-1/2 border-r border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden">
+          {/* Members */}
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+              <Bot className="w-4 h-4" />
+              Team Members ({team.members.length})
+            </h4>
+            <div className="space-y-2 max-h-32 overflow-y-auto">
+              {team.members.map(member => (
+                <MemberStatusBadge key={member.id} member={member} />
+              ))}
+            </div>
+          </div>
+
+          {/* Tasks */}
+          <div className="flex-1 p-4 overflow-y-auto">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+              <Activity className="w-4 h-4" />
+              Active Tasks ({tasksByStatus.active.length})
+            </h4>
+            <div className="space-y-2">
+              {tasksByStatus.active.map(task => (
+                <TaskProgressCard
+                  key={task.id}
+                  task={task}
+                  assignee={team.members.find(m => m.id === task.assigneeId)}
+                />
+              ))}
+              {tasksByStatus.active.length === 0 && (
+                <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
+                  No active tasks
+                </p>
+              )}
+            </div>
+
+            {tasksByStatus.blocked.length > 0 && (
+              <>
+                <h4 className="text-sm font-medium text-red-600 dark:text-red-400 mt-4 mb-2 flex items-center gap-2">
+                  <AlertTriangle className="w-4 h-4" />
+                  Blocked ({tasksByStatus.blocked.length})
+                </h4>
+                <div className="space-y-2">
+                  {tasksByStatus.blocked.map(task => (
+                    <TaskProgressCard
+                      key={task.id}
+                      task={task}
+                      assignee={team.members.find(m => m.id === task.assigneeId)}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Event Feed */}
+        <div className="w-1/2 flex flex-col overflow-hidden">
+          <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
+              <Zap className="w-4 h-4" />
+              Live Events
+            </h4>
+            <label className="flex items-center gap-2 text-xs text-gray-500">
+              <input
+                type="checkbox"
+                checked={autoScroll}
+                onChange={(e) => setAutoScroll(e.target.checked)}
+                className="rounded"
+              />
+              Auto-scroll
+            </label>
+          </div>
+          <div ref={eventFeedRef} className="flex-1 overflow-y-auto p-2">
+            {recentEvents.filter(e => e.teamId === teamId).length === 0 ? (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                <Activity className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+                <p className="text-sm">No recent activity</p>
+              </div>
+            ) : (
+              recentEvents
+                .filter(e => e.teamId === teamId)
+                .map((event, idx) => (
+                  <EventFeedItem key={`${event.timestamp}-${idx}`} event={event} team={team} />
+                ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TeamCollaborationView;
diff --git a/desktop/src/components/TeamOrchestrator.tsx b/desktop/src/components/TeamOrchestrator.tsx
new file mode 100644
index 0000000..398ca33
--- /dev/null
+++ b/desktop/src/components/TeamOrchestrator.tsx
@@ -0,0 +1,508 @@
+/**
+ * TeamOrchestrator - Multi-Agent Team Orchestration UI
+ *
+ * Provides an interface for creating teams, assigning agents,
+ * managing tasks, and monitoring collaboration workflows.
+ *
+ * @module components/TeamOrchestrator
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useTeamStore } from '../store/teamStore';
+import { useGatewayStore } from '../store/gatewayStore';
+import type {
+  Team,
+  TeamMember,
+  TeamTask,
+  TeamMemberRole,
+  TaskPriority,
+  CollaborationPattern,
+} from '../types/team';
+import {
+  Users, Plus, Trash2, Edit2, Check, X, ChevronDown, ChevronUp,
+  Bot, GitBranch, ArrowRight, Clock, AlertTriangle, CheckCircle,
+  Play, Pause, Settings, UserPlus, FileText, Activity,
+} from 'lucide-react';
+
+// === Sub-Components ===
+
+interface MemberCardProps {
+  member: TeamMember;
+  isSelected: boolean;
+  onSelect: () => void;
+  onRoleChange: (role: TeamMemberRole) => void;
+  onRemove: () => void;
+}
+
+function MemberCard({ member, isSelected, onSelect, onRoleChange, onRemove }: MemberCardProps) {
+  const [showRoleMenu, setShowRoleMenu] = useState(false);
+
+  const roleColors: Record<TeamMemberRole, string> = {
+    orchestrator: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300',
+    developer: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+    reviewer: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+    tester: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
+    architect: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300',
+    specialist: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300',
+  };
+
+  const statusColors = {
+    idle: 'bg-gray-400',
+    running: 'bg-green-500 animate-pulse',
+    paused: 'bg-yellow-500',
+    error: 'bg-red-500',
+  };
+
+  return (
+    <div
+      className={`p-3 rounded-lg border cursor-pointer transition-all ${
+        isSelected
+          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+      }`}
+      onClick={onSelect}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${statusColors[member.status]}`} />
+          <Bot className="w-4 h-4 text-gray-500" />
+          <span className="font-medium text-gray-900 dark:text-white">{member.name}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={(e) => { e.stopPropagation(); setShowRoleMenu(!showRoleMenu); }}
+            className={`px-2 py-0.5 rounded text-xs font-medium ${roleColors[member.role]}`}
+          >
+            {member.role}
+          </button>
+          <button
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            className="p-1 text-gray-400 hover:text-red-500"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {showRoleMenu && (
+        <div className="mt-2 flex flex-wrap gap-1">
+          {(['orchestrator', 'developer', 'reviewer', 'tester', 'architect', 'specialist'] as TeamMemberRole[]).map(role => (
+            <button
+              key={role}
+              onClick={(e) => { e.stopPropagation(); onRoleChange(role); setShowRoleMenu(false); }}
+              className={`px-2 py-0.5 rounded text-xs ${roleColors[role]} hover:opacity-80`}
+            >
+              {role}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+        <span>Workload: {member.workload}%</span>
+        <span>Tasks: {member.currentTasks.length}</span>
+      </div>
+    </div>
+  );
+}
+
+interface TaskCardProps {
+  task: TeamTask;
+  members: TeamMember[];
+  isSelected: boolean;
+  onSelect: () => void;
+  onAssign: (memberId: string) => void;
+  onStatusChange: (status: TeamTask['status']) => void;
+}
+
+function TaskCard({ task, members, isSelected, onSelect, onAssign, onStatusChange }: TaskCardProps) {
+  const [showAssignMenu, setShowAssignMenu] = useState(false);
+
+  const priorityColors: Record<TaskPriority, string> = {
+    critical: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+    high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+    medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
+    low: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300',
+  };
+
+  const statusIcons: Record<TeamTask['status'], React.ReactNode> = {
+    pending: <Clock className="w-4 h-4 text-gray-400" />,
+    assigned: <UserPlus className="w-4 h-4 text-blue-400" />,
+    in_progress: <Play className="w-4 h-4 text-green-400" />,
+    review: <FileText className="w-4 h-4 text-yellow-400" />,
+    blocked: <AlertTriangle className="w-4 h-4 text-red-400" />,
+    completed: <CheckCircle className="w-4 h-4 text-green-500" />,
+    failed: <X className="w-4 h-4 text-red-500" />,
+  };
+
+  const assignee = members.find(m => m.id === task.assigneeId);
+
+  return (
+    <div
+      className={`p-3 rounded-lg border cursor-pointer transition-all ${
+        isSelected
+          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+      }`}
+      onClick={onSelect}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            {statusIcons[task.status]}
+            <span className="font-medium text-gray-900 dark:text-white">{task.title}</span>
+          </div>
+          {task.description && (
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
+              {task.description}
+            </p>
+          )}
+        </div>
+        <span className={`px-2 py-0.5 rounded text-xs font-medium ${priorityColors[task.priority]}`}>
+          {task.priority}
+        </span>
+      </div>
+
+      <div className="mt-2 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={(e) => { e.stopPropagation(); setShowAssignMenu(!showAssignMenu); }}
+            className={`px-2 py-1 rounded text-xs border ${
+              assignee
+                ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
+                : 'border-gray-200 text-gray-500 hover:border-gray-300 dark:border-gray-700 dark:text-gray-400'
+            }`}
+          >
+            {assignee ? assignee.name : 'Assign...'}
+          </button>
+          <span className="text-xs text-gray-400">{task.type}</span>
+        </div>
+        {task.estimate && (
+          <span className="text-xs text-gray-400">{task.estimate}pts</span>
+        )}
+      </div>
+
+      {showAssignMenu && (
+        <div className="mt-2 flex flex-wrap gap-1">
+          {members.map(member => (
+            <button
+              key={member.id}
+              onClick={(e) => { e.stopPropagation(); onAssign(member.id); setShowAssignMenu(false); }}
+              className="px-2 py-1 rounded text-xs border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
+            >
+              {member.name}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// === Main Component ===
+
+interface TeamOrchestratorProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function TeamOrchestrator({ isOpen, onClose }: TeamOrchestratorProps) {
+  const [view, setView] = useState<'teams' | 'tasks' | 'members'>('teams');
+  const [isCreating, setIsCreating] = useState(false);
+  const [newTeamName, setNewTeamName] = useState('');
+  const [newTeamPattern, setNewTeamPattern] = useState<CollaborationPattern>('sequential');
+
+  const {
+    teams,
+    activeTeam,
+    metrics,
+    isLoading,
+    error,
+    selectedTaskId,
+    selectedMemberId,
+    loadTeams,
+    createTeam,
+    deleteTeam,
+    setActiveTeam,
+    addTask,
+    updateTaskStatus,
+    assignTask,
+    addMember,
+    removeMember,
+    updateMemberRole,
+    setSelectedTask,
+    setSelectedMember,
+  } = useTeamStore();
+
+  const { clones } = useGatewayStore();
+
+  useEffect(() => {
+    if (isOpen) {
+      loadTeams();
+    }
+  }, [isOpen, loadTeams]);
+
+  const handleCreateTeam = async () => {
+    if (!newTeamName.trim()) return;
+    const team = await createTeam({
+      name: newTeamName.trim(),
+      pattern: newTeamPattern,
+      memberAgents: [],
+    });
+    if (team) {
+      setActiveTeam(team);
+      setNewTeamName('');
+      setIsCreating(false);
+    }
+  };
+
+  const handleAddMember = async (agentId: string) => {
+    if (!activeTeam) return;
+    await addMember(activeTeam.id, agentId, 'developer');
+  };
+
+  const handleAddTask = async () => {
+    if (!activeTeam) return;
+    await addTask({
+      teamId: activeTeam.id,
+      title: `Task ${activeTeam.tasks.length + 1}`,
+      priority: 'medium',
+      type: 'implementation',
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-[90vw] h-[85vh] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Users className="w-6 h-6 text-blue-500" />
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Team Orchestrator</h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {metrics && (
+              <div className="flex items-center gap-4 mr-4 text-sm text-gray-500 dark:text-gray-400">
+                <span>Completed: {metrics.tasksCompleted}</span>
+                <span>Pass Rate: {metrics.passRate.toFixed(0)}%</span>
+                <span>Efficiency: {metrics.efficiency.toFixed(0)}%</span>
+              </div>
+            )}
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
+              <X className="w-5 h-5 text-gray-500" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* Sidebar - Team List */}
+          <div className="w-64 border-r border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-semibold text-gray-900 dark:text-white">Teams</h3>
+              <button
+                onClick={() => setIsCreating(true)}
+                className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+              >
+                <Plus className="w-4 h-4 text-gray-500" />
+              </button>
+            </div>
+
+            {isCreating && (
+              <div className="mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                <input
+                  type="text"
+                  value={newTeamName}
+                  onChange={(e) => setNewTeamName(e.target.value)}
+                  placeholder="Team name..."
+                  className="w-full px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+                <select
+                  value={newTeamPattern}
+                  onChange={(e) => setNewTeamPattern(e.target.value as CollaborationPattern)}
+                  className="w-full mt-2 px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                >
+                  <option value="sequential">Sequential</option>
+                  <option value="parallel">Parallel</option>
+                  <option value="pipeline">Pipeline</option>
+                  <option value="review_loop">Dev↔QA Loop</option>
+                </select>
+                <div className="mt-2 flex gap-2">
+                  <button
+                    onClick={handleCreateTeam}
+                    className="flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"
+                  >
+                    Create
+                  </button>
+                  <button
+                    onClick={() => setIsCreating(false)}
+                    className="flex-1 px-2 py-1 text-xs border rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              {teams.map(team => (
+                <div
+                  key={team.id}
+                  onClick={() => setActiveTeam(team)}
+                  className={`p-3 rounded-lg cursor-pointer transition-all ${
+                    activeTeam?.id === team.id
+                      ? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium text-gray-900 dark:text-white">{team.name}</span>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); deleteTeam(team.id); }}
+                      className="p-1 text-gray-400 hover:text-red-500"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                  <div className="mt-1 flex items-center gap-2 text-xs text-gray-500">
+                    <Users className="w-3 h-3" />
+                    <span>{team.members.length} members</span>
+                    <span>·</span>
+                    <span>{team.tasks.length} tasks</span>
+                  </div>
+                  <div className="mt-1">
+                    <span className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 rounded">
+                      {team.pattern}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Main Content */}
+          {activeTeam ? (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {/* View Tabs */}
+              <div className="px-6 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center gap-4">
+                <button
+                  onClick={() => setView('tasks')}
+                  className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
+                    view === 'tasks'
+                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                      : 'text-gray-500 hover:text-gray-700 dark:text-gray-400'
+                  }`}
+                >
+                  Tasks
+                </button>
+                <button
+                  onClick={() => setView('members')}
+                  className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
+                    view === 'members'
+                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                      : 'text-gray-500 hover:text-gray-700 dark:text-gray-400'
+                  }`}
+                >
+                  Members
+                </button>
+              </div>
+
+              {/* Tasks View */}
+              {view === 'tasks' && (
+                <div className="flex-1 p-6 overflow-y-auto">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold text-gray-900 dark:text-white">Tasks</h3>
+                    <button
+                      onClick={handleAddTask}
+                      className="flex items-center gap-1 px-3 py-1.5 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                    >
+                      <Plus className="w-4 h-4" />
+                      Add Task
+                    </button>
+                  </div>
+
+                  <div className="space-y-3">
+                    {activeTeam.tasks.length === 0 ? (
+                      <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                        No tasks yet. Click "Add Task" to create one.
+                      </div>
+                    ) : (
+                      activeTeam.tasks.map(task => (
+                        <TaskCard
+                          key={task.id}
+                          task={task}
+                          members={activeTeam.members}
+                          isSelected={selectedTaskId === task.id}
+                          onSelect={() => setSelectedTask(task.id)}
+                          onAssign={(memberId) => assignTask(activeTeam.id, task.id, memberId)}
+                          onStatusChange={(status) => updateTaskStatus(activeTeam.id, task.id, status)}
+                        />
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Members View */}
+              {view === 'members' && (
+                <div className="flex-1 p-6 overflow-y-auto">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold text-gray-900 dark:text-white">Members</h3>
+                    <div className="flex items-center gap-2">
+                      <select
+                        className="px-3 py-1.5 text-sm border rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
+                        onChange={(e) => handleAddMember(e.target.value)}
+                        value=""
+                      >
+                        <option value="">Add Agent...</option>
+                        {clones.map(clone => (
+                          <option key={clone.id} value={clone.id}>
+                            {clone.name || clone.nickname || clone.id}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    {activeTeam.members.length === 0 ? (
+                      <div className="col-span-2 text-center py-8 text-gray-500 dark:text-gray-400">
+                        No members yet. Select an agent to add.
+                      </div>
+                    ) : (
+                      activeTeam.members.map(member => (
+                        <MemberCard
+                          key={member.id}
+                          member={member}
+                          isSelected={selectedMemberId === member.id}
+                          onSelect={() => setSelectedMember(member.id)}
+                          onRoleChange={(role) => updateMemberRole(activeTeam.id, member.id, role)}
+                          onRemove={() => removeMember(activeTeam.id, member.id)}
+                        />
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400">
+              <div className="text-center">
+                <Users className="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
+                <p>Select or create a team to get started</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
+          <span>{teams.length} teams total</span>
+          {error && <span className="text-red-500">{error}</span>}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/desktop/src/store/teamStore.ts b/desktop/src/store/teamStore.ts
new file mode 100644
index 0000000..86f4c55
--- /dev/null
+++ b/desktop/src/store/teamStore.ts
@@ -0,0 +1,587 @@
+/**
+ * Team Store - Multi-Agent Team Collaboration State Management
+ *
+ * Manages team orchestration, task assignment, Dev↔QA loops,
+ * and real-time collaboration state.
+ *
+ * @module store/teamStore
+ */
+
+import { create } from 'zustand';
+import type {
+  Team,
+  TeamMember,
+  TeamTask,
+  TeamTaskStatus,
+  TeamMemberRole,
+  DevQALoop,
+  DevQALoopState,
+  CollaborationPattern,
+  CreateTeamRequest,
+  AddTeamTaskRequest,
+  TeamMetrics,
+  CollaborationEvent,
+  ReviewFeedback,
+  TaskDeliverable,
+} from '../types/team';
+import { getGatewayClient } from '../lib/gateway-client';
+
+// === Store State ===
+
+interface TeamStoreState {
+  // Data
+  teams: Team[];
+  activeTeam: Team | null;
+  metrics: TeamMetrics | null;
+
+  // UI State
+  isLoading: boolean;
+  error: string | null;
+  selectedTaskId: string | null;
+  selectedMemberId: string | null;
+
+  // Real-time events
+  recentEvents: CollaborationEvent[];
+
+  // Actions - Team Management
+  loadTeams: () => Promise<void>;
+  createTeam: (request: CreateTeamRequest) => Promise<Team | null>;
+  deleteTeam: (teamId: string) => Promise<boolean>;
+  setActiveTeam: (team: Team | null) => void;
+
+  // Actions - Member Management
+  addMember: (teamId: string, agentId: string, role: TeamMemberRole) => Promise<TeamMember | null>;
+  removeMember: (teamId: string, memberId: string) => Promise<boolean>;
+  updateMemberRole: (teamId: string, memberId: string, role: TeamMemberRole) => Promise<boolean>;
+
+  // Actions - Task Management
+  addTask: (request: AddTeamTaskRequest) => Promise<TeamTask | null>;
+  updateTaskStatus: (teamId: string, taskId: string, status: TeamTaskStatus) => Promise<boolean>;
+  assignTask: (teamId: string, taskId: string, memberId: string) => Promise<boolean>;
+  submitDeliverable: (teamId: string, taskId: string, deliverable: TaskDeliverable) => Promise<boolean>;
+
+  // Actions - Dev↔QA Loop
+  startDevQALoop: (teamId: string, taskId: string, developerId: string, reviewerId: string) => Promise<DevQALoop | null>;
+  submitReview: (teamId: string, loopId: string, feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => Promise<boolean>;
+  updateLoopState: (teamId: string, loopId: string, state: DevQALoopState) => Promise<boolean>;
+
+  // Actions - Events
+  addEvent: (event: CollaborationEvent) => void;
+  clearEvents: () => void;
+
+  // Actions - UI
+  setSelectedTask: (taskId: string | null) => void;
+  setSelectedMember: (memberId: string | null) => void;
+  clearError: () => void;
+}
+
+// === Helper Functions ===
+
+const generateId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+const calculateMetrics = (team: Team): TeamMetrics => {
+  const completedTasks = team.tasks.filter(t => t.status === 'completed');
+  const totalTasks = team.tasks.length;
+  const reviewedTasks = completedTasks.filter(t => t.reviewFeedback);
+
+  const avgCompletionTime = completedTasks.length > 0
+    ? completedTasks.reduce((sum, t) => {
+        if (t.startedAt && t.completedAt) {
+          return sum + (new Date(t.completedAt).getTime() - new Date(t.startedAt).getTime());
+        }
+        return sum;
+      }, 0) / completedTasks.length
+    : 0;
+
+  const approvedReviews = reviewedTasks.filter(t => t.reviewFeedback?.verdict === 'approved');
+  const passRate = reviewedTasks.length > 0
+    ? (approvedReviews.length / reviewedTasks.length) * 100
+    : 0;
+
+  const totalIterations = team.activeLoops.reduce((sum, loop) => sum + loop.iterationCount, 0);
+  const avgIterations = team.activeLoops.length > 0
+    ? totalIterations / team.activeLoops.length
+    : 0;
+
+  const escalations = team.activeLoops.filter(loop => loop.state === 'escalated').length;
+
+  const efficiency = totalTasks > 0
+    ? Math.min(100, (completedTasks.length / totalTasks) * 100 * (passRate / 100))
+    : 0;
+
+  return {
+    tasksCompleted: completedTasks.length,
+    avgCompletionTime,
+    passRate,
+    avgIterations,
+    escalations,
+    efficiency,
+  };
+};
+
+// === Store Implementation ===
+
+export const useTeamStore = create<TeamStoreState>((set, get) => ({
+  // Initial State
+  teams: [],
+  activeTeam: null,
+  metrics: null,
+  isLoading: false,
+  error: null,
+  selectedTaskId: null,
+  selectedMemberId: null,
+  recentEvents: [],
+
+  // Team Management
+  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) : [];
+      set({ teams, isLoading: false });
+    } catch (error) {
+      set({ error: (error as Error).message, isLoading: false });
+    }
+  },
+
+  createTeam: async (request: CreateTeamRequest) => {
+    set({ isLoading: true, error: null });
+    try {
+      const now = new Date().toISOString();
+      const members: TeamMember[] = request.memberAgents.map((m, index) => ({
+        id: generateId(),
+        agentId: m.agentId,
+        name: `Agent-${m.agentId.slice(0, 4)}`,
+        role: m.role,
+        skills: [],
+        workload: 0,
+        status: 'idle',
+        maxConcurrentTasks: m.role === 'orchestrator' ? 5 : 2,
+        currentTasks: [],
+      }));
+
+      const team: Team = {
+        id: generateId(),
+        name: request.name,
+        description: request.description,
+        members,
+        tasks: [],
+        pattern: request.pattern,
+        activeLoops: [],
+        status: 'active',
+        createdAt: now,
+        updatedAt: now,
+      };
+
+      set(state => {
+        const teams = [...state.teams, team];
+        localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+        return { teams, activeTeam: team, isLoading: false };
+      });
+
+      return team;
+    } catch (error) {
+      set({ error: (error as Error).message, isLoading: false });
+      return null;
+    }
+  },
+
+  deleteTeam: async (teamId: string) => {
+    set({ isLoading: true, error: null });
+    try {
+      set(state => {
+        const teams = state.teams.filter(t => t.id !== teamId);
+        localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+        return {
+          teams,
+          activeTeam: state.activeTeam?.id === teamId ? null : state.activeTeam,
+          isLoading: false
+        };
+      });
+      return true;
+    } catch (error) {
+      set({ error: (error as Error).message, isLoading: false });
+      return false;
+    }
+  },
+
+  setActiveTeam: (team: Team | null) => {
+    set(state => ({
+      activeTeam: team,
+      metrics: team ? calculateMetrics(team) : null,
+    }));
+  },
+
+  // Member Management
+  addMember: async (teamId: string, agentId: string, role: TeamMemberRole) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return null;
+
+    const member: TeamMember = {
+      id: generateId(),
+      agentId,
+      name: `Agent-${agentId.slice(0, 4)}`,
+      role,
+      skills: [],
+      workload: 0,
+      status: 'idle',
+      maxConcurrentTasks: role === 'orchestrator' ? 5 : 2,
+      currentTasks: [],
+    };
+
+    const updatedTeam = {
+      ...team,
+      members: [...team.members, member],
+      updatedAt: new Date().toISOString(),
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return member;
+  },
+
+  removeMember: async (teamId: string, memberId: string) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const updatedTeam = {
+      ...team,
+      members: team.members.filter(m => m.id !== memberId),
+      updatedAt: new Date().toISOString(),
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return true;
+  },
+
+  updateMemberRole: async (teamId: string, memberId: string, role: TeamMemberRole) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const updatedTeam = {
+      ...team,
+      members: team.members.map(m =>
+        m.id === memberId ? { ...m, role, maxConcurrentTasks: role === 'orchestrator' ? 5 : 2 } : m
+      ),
+      updatedAt: new Date().toISOString(),
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return true;
+  },
+
+  // Task Management
+  addTask: async (request: AddTeamTaskRequest) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === request.teamId);
+    if (!team) return null;
+
+    const now = new Date().toISOString();
+    const task: TeamTask = {
+      id: generateId(),
+      title: request.title,
+      description: request.description,
+      status: request.assigneeId ? 'assigned' : 'pending',
+      priority: request.priority,
+      assigneeId: request.assigneeId,
+      dependencies: request.dependencies || [],
+      type: request.type,
+      estimate: request.estimate,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    const updatedTeam = {
+      ...team,
+      tasks: [...team.tasks, task],
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === request.teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === request.teamId ? updatedTeam : state.activeTeam,
+        metrics: state.activeTeam?.id === request.teamId ? calculateMetrics(updatedTeam) : state.metrics,
+      };
+    });
+
+    return task;
+  },
+
+  updateTaskStatus: async (teamId: string, taskId: string, status: TeamTaskStatus) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const now = new Date().toISOString();
+    const updatedTeam = {
+      ...team,
+      tasks: team.tasks.map(t => {
+        if (t.id !== taskId) return t;
+        const updates: Partial<TeamTask> = { status, updatedAt: now };
+        if (status === 'in_progress' && !t.startedAt) {
+          updates.startedAt = now;
+        }
+        if (status === 'completed') {
+          updates.completedAt = now;
+        }
+        return { ...t, ...updates };
+      }),
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+        metrics: state.activeTeam?.id === teamId ? calculateMetrics(updatedTeam) : state.metrics,
+      };
+    });
+
+    return true;
+  },
+
+  assignTask: async (teamId: string, taskId: string, memberId: string) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const now = new Date().toISOString();
+    const updatedTeam = {
+      ...team,
+      tasks: team.tasks.map(t =>
+        t.id === taskId
+          ? { ...t, assigneeId: memberId, status: 'assigned' as TeamTaskStatus, updatedAt: now }
+          : t
+      ),
+      members: team.members.map(m =>
+        m.id === memberId
+          ? { ...m, currentTasks: [...m.currentTasks, taskId], workload: (m.workload + 25) }
+          : m
+      ),
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return true;
+  },
+
+  submitDeliverable: async (teamId: string, taskId: string, deliverable: TaskDeliverable) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const now = new Date().toISOString();
+    const updatedTeam = {
+      ...team,
+      tasks: team.tasks.map(t =>
+        t.id === taskId
+          ? { ...t, deliverable, status: 'review' as TeamTaskStatus, updatedAt: now }
+          : t
+      ),
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return true;
+  },
+
+  // Dev↔QA Loop
+  startDevQALoop: async (teamId: string, taskId: string, developerId: string, reviewerId: string) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return null;
+
+    const now = new Date().toISOString();
+    const loop: DevQALoop = {
+      id: generateId(),
+      developerId,
+      reviewerId,
+      taskId,
+      state: 'developing',
+      iterationCount: 0,
+      maxIterations: 3,
+      feedbackHistory: [],
+      startedAt: now,
+      lastUpdatedAt: now,
+    };
+
+    const updatedTeam = {
+      ...team,
+      activeLoops: [...team.activeLoops, loop],
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return loop;
+  },
+
+  submitReview: async (teamId: string, loopId: string, feedback: Omit<ReviewFeedback, 'reviewedAt' | 'reviewerId'>) => {
+    const state = get();
+    const team = state.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const loop = team.activeLoops.find(l => l.id === loopId);
+    if (!loop) return false;
+
+    const now = new Date().toISOString();
+    const fullFeedback: ReviewFeedback = {
+      ...feedback,
+      reviewedAt: now,
+      reviewerId: loop.reviewerId,
+    };
+
+    let newState: DevQALoopState;
+    let newIterationCount = loop.iterationCount;
+
+    if (feedback.verdict === 'approved') {
+      newState = 'approved';
+    } else if (newIterationCount >= loop.maxIterations - 1) {
+      newState = 'escalated';
+    } else {
+      newState = 'revising';
+      newIterationCount++;
+    }
+
+    const updatedTeam = {
+      ...team,
+      tasks: team.tasks.map(t =>
+        t.id === loop.taskId
+          ? { ...t, reviewFeedback: fullFeedback, updatedAt: now }
+          : t
+      ),
+      activeLoops: team.activeLoops.map(l =>
+        l.id === loopId
+          ? {
+              ...l,
+              state: newState,
+              iterationCount: newIterationCount,
+              feedbackHistory: [...l.feedbackHistory, fullFeedback],
+              lastUpdatedAt: now,
+            }
+          : l
+      ),
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+        metrics: state.activeTeam?.id === teamId ? calculateMetrics(updatedTeam) : state.metrics,
+      };
+    });
+
+    return true;
+  },
+
+  updateLoopState: async (teamId: string, loopId: string, state: DevQALoopState) => {
+    const teamStore = get();
+    const team = teamStore.teams.find(t => t.id === teamId);
+    if (!team) return false;
+
+    const now = new Date().toISOString();
+    const updatedTeam = {
+      ...team,
+      activeLoops: team.activeLoops.map(l =>
+        l.id === loopId
+          ? { ...l, state, lastUpdatedAt: now }
+          : l
+      ),
+      updatedAt: now,
+    };
+
+    set(state => {
+      const teams = state.teams.map(t => t.id === teamId ? updatedTeam : t);
+      localStorage.setItem('zclaw-teams', JSON.stringify(teams));
+      return {
+        teams,
+        activeTeam: state.activeTeam?.id === teamId ? updatedTeam : state.activeTeam,
+      };
+    });
+
+    return true;
+  },
+
+  // Events
+  addEvent: (event: CollaborationEvent) => {
+    set(state => ({
+      recentEvents: [event, ...state.recentEvents].slice(0, 100),
+    }));
+  },
+
+  clearEvents: () => {
+    set({ recentEvents: [] });
+  },
+
+  // UI
+  setSelectedTask: (taskId: string | null) => {
+    set({ selectedTaskId: taskId });
+  },
+
+  setSelectedMember: (memberId: string | null) => {
+    set({ selectedMemberId: memberId });
+  },
+
+  clearError: () => {
+    set({ error: null });
+  },
+}));
diff --git a/desktop/src/types/index.ts b/desktop/src/types/index.ts
index 45e90d3..272877e 100644
--- a/desktop/src/types/index.ts
+++ b/desktop/src/types/index.ts
@@ -56,3 +56,24 @@ export type {
   WorkflowControlRequest,
   WorkflowControlResponse,
 } from './workflow';
+
+// Team Collaboration Types
+export type {
+  TeamMemberRole,
+  TeamTaskStatus,
+  TaskPriority,
+  TeamMember,
+  TeamTask,
+  TaskDeliverable,
+  ReviewFeedback,
+  ReviewIssue,
+  DevQALoopState,
+  DevQALoop,
+  CollaborationPattern,
+  Team,
+  CollaborationEvent,
+  TeamMetrics,
+  CreateTeamRequest,
+  AddTeamTaskRequest,
+  TeamResponse,
+} from './team';
diff --git a/desktop/src/types/team.ts b/desktop/src/types/team.ts
new file mode 100644
index 0000000..da4aacc
--- /dev/null
+++ b/desktop/src/types/team.ts
@@ -0,0 +1,296 @@
+/**
+ * Multi-Agent Team Collaboration Types for OpenFang
+ *
+ * This module defines types for multi-agent team orchestration,
+ * collaboration workflows, and Dev↔QA loops.
+ *
+ * @module types/team
+ */
+
+import type { Agent, AgentStatus } from './agent';
+
+// === Team Definition ===
+
+/**
+ * Role of an agent within a team
+ */
+export type TeamMemberRole =
+  | 'orchestrator'   // Team coordinator - assigns tasks, manages flow
+  | 'developer'      // Primary implementation agent
+  | 'reviewer'       // Code review and quality assurance
+  | 'tester'         // Testing and validation
+  | 'architect'      // System design and architecture
+  | 'specialist';    // Domain-specific expertise
+
+/**
+ * Possible states for a team task
+ */
+export type TeamTaskStatus =
+  | 'pending'        // Waiting to be assigned
+  | 'assigned'       // Assigned to an agent but not started
+  | 'in_progress'    // Currently being worked on
+  | 'review'         // Under review by another agent
+  | 'blocked'        // Blocked by dependency or issue
+  | 'completed'      // Successfully completed
+  | 'failed';        // Failed with error
+
+/**
+ * Priority levels for team tasks
+ */
+export type TaskPriority = 'critical' | 'high' | 'medium' | 'low';
+
+/**
+ * A member of a team (an agent with a specific role)
+ */
+export interface TeamMember {
+  /** Unique identifier for this team member */
+  id: string;
+  /** ID of the underlying agent */
+  agentId: string;
+  /** Agent display name */
+  name: string;
+  /** Role within the team */
+  role: TeamMemberRole;
+  /** Skills this member contributes */
+  skills: string[];
+  /** Current workload (0-100%) */
+  workload: number;
+  /** Current status */
+  status: AgentStatus;
+  /** Maximum concurrent tasks */
+  maxConcurrentTasks: number;
+  /** Current assigned task IDs */
+  currentTasks: string[];
+}
+
+/**
+ * A task that can be assigned to team members
+ */
+export interface TeamTask {
+  /** Unique task identifier */
+  id: string;
+  /** Task title */
+  title: string;
+  /** Detailed task description */
+  description?: string;
+  /** Current status */
+  status: TeamTaskStatus;
+  /** Priority level */
+  priority: TaskPriority;
+  /** ID of assigned team member */
+  assigneeId?: string;
+  /** IDs of tasks this depends on */
+  dependencies: string[];
+  /** Task type classification */
+  type: 'implementation' | 'review' | 'testing' | 'design' | 'deployment';
+  /** Estimated effort (story points or hours) */
+  estimate?: number;
+  /** ISO timestamp of creation */
+  createdAt: string;
+  /** ISO timestamp of last update */
+  updatedAt?: string;
+  /** ISO timestamp when work started */
+  startedAt?: string;
+  /** ISO timestamp of completion */
+  completedAt?: string;
+  /** Result or deliverable */
+  deliverable?: TaskDeliverable;
+  /** Review feedback if in review */
+  reviewFeedback?: ReviewFeedback;
+}
+
+/**
+ * Deliverable produced by a task
+ */
+export interface TaskDeliverable {
+  /** Type of deliverable */
+  type: 'code' | 'document' | 'test' | 'config' | 'report';
+  /** Description of what was produced */
+  description: string;
+  /** File paths modified/created */
+  files?: string[];
+  /** Key metrics or outcomes */
+  metrics?: Record<string, number | string>;
+}
+
+/**
+ * Feedback from a review
+ */
+export interface ReviewFeedback {
+  /** Review verdict */
+  verdict: 'approved' | 'needs_work' | 'rejected';
+  /** Detailed feedback */
+  comments: string[];
+  /** Issues found */
+  issues: ReviewIssue[];
+  /** ISO timestamp of review */
+  reviewedAt: string;
+  /** ID of reviewer */
+  reviewerId: string;
+}
+
+/**
+ * An issue found during review
+ */
+export interface ReviewIssue {
+  /** Issue severity */
+  severity: 'critical' | 'major' | 'minor' | 'suggestion';
+  /** Issue description */
+  description: string;
+  /** File location if applicable */
+  file?: string;
+  /** Line number if applicable */
+  line?: number;
+  /** Suggested fix */
+  suggestion?: string;
+}
+
+// === Dev↔QA Loop ===
+
+/**
+ * States in the Dev↔QA loop
+ */
+export type DevQALoopState =
+  | 'idle'           // No active loop
+  | 'developing'     // Developer is implementing
+  | 'reviewing'      // QA is reviewing
+  | 'revising'       // Developer is fixing issues
+  | 'approved'       // QA approved the work
+  | 'escalated';     // Too many retries, needs human intervention
+
+/**
+ * A Dev↔QA loop instance
+ */
+export interface DevQALoop {
+  /** Unique loop identifier */
+  id: string;
+  /** ID of the developer agent */
+  developerId: string;
+  /** ID of the QA/reviewer agent */
+  reviewerId: string;
+  /** Task being worked on */
+  taskId: string;
+  /** Current state */
+  state: DevQALoopState;
+  /** Number of revision cycles */
+  iterationCount: number;
+  /** Maximum iterations before escalation */
+  maxIterations: number;
+  /** All feedback history */
+  feedbackHistory: ReviewFeedback[];
+  /** ISO timestamp of loop start */
+  startedAt: string;
+  /** ISO timestamp of last state change */
+  lastUpdatedAt: string;
+}
+
+// === Team Collaboration ===
+
+/**
+ * Possible collaboration patterns
+ */
+export type CollaborationPattern =
+  | 'sequential'     // Tasks completed one after another
+  | 'parallel'       // Tasks completed simultaneously
+  | 'pipeline'       // Output of one feeds into next
+  | 'review_loop';   // Dev↔QA iteration pattern
+
+/**
+ * A team collaboration session
+ */
+export interface Team {
+  /** Unique team identifier */
+  id: string;
+  /** Team name */
+  name: string;
+  /** Team description */
+  description?: string;
+  /** Team members */
+  members: TeamMember[];
+  /** Active tasks */
+  tasks: TeamTask[];
+  /** Collaboration pattern */
+  pattern: CollaborationPattern;
+  /** Active Dev↔QA loops */
+  activeLoops: DevQALoop[];
+  /** Team status */
+  status: 'active' | 'paused' | 'completed' | 'error';
+  /** ISO timestamp of creation */
+  createdAt: string;
+  /** ISO timestamp of last activity */
+  updatedAt?: string;
+}
+
+/**
+ * Real-time collaboration event
+ */
+export interface CollaborationEvent {
+  /** Event type */
+  type: 'task_assigned' | 'task_started' | 'task_completed' |
+        'review_requested' | 'review_submitted' |
+        'loop_state_change' | 'member_status_change';
+  /** ID of the team */
+  teamId: string;
+  /** ID of the source agent */
+  sourceAgentId: string;
+  /** Event payload */
+  payload: Record<string, unknown>;
+  /** ISO timestamp */
+  timestamp: string;
+}
+
+/**
+ * Team performance metrics
+ */
+export interface TeamMetrics {
+  /** Total tasks completed */
+  tasksCompleted: number;
+  /** Average task completion time (ms) */
+  avgCompletionTime: number;
+  /** Review pass rate (0-100) */
+  passRate: number;
+  /** Average iterations per task */
+  avgIterations: number;
+  /** Escalation count */
+  escalations: number;
+  /** Team efficiency score (0-100) */
+  efficiency: number;
+}
+
+// === API Types ===
+
+/**
+ * Request to create a new team
+ */
+export interface CreateTeamRequest {
+  name: string;
+  description?: string;
+  memberAgents: Array<{
+    agentId: string;
+    role: TeamMemberRole;
+  }>;
+  pattern: CollaborationPattern;
+}
+
+/**
+ * Request to add a task to a team
+ */
+export interface AddTeamTaskRequest {
+  teamId: string;
+  title: string;
+  description?: string;
+  priority: TaskPriority;
+  type: TeamTask['type'];
+  assigneeId?: string;
+  dependencies?: string[];
+  estimate?: number;
+}
+
+/**
+ * Response for team operations
+ */
+export interface TeamResponse {
+  team: Team;
+  success: boolean;
+  error?: string;
+}
diff --git a/docs/SYSTEM_ANALYSIS.md b/docs/SYSTEM_ANALYSIS.md
index 64c6c17..b070334 100644
--- a/docs/SYSTEM_ANALYSIS.md
+++ b/docs/SYSTEM_ANALYSIS.md
@@ -429,9 +429,20 @@ ZCLAW 是基于 **OpenFang** (Rust Agent OS) 的 AI Agent 桌面客户端，核
 *Phase 1-4 已完成 ✅*
 *Phase 5 已完成 ✅*
   * 基础 Skills: 9 个 ✅
-  * agency-agents 集成: 60+ Skills ✅
+  * agency-agents 集成: 68 Skills ✅
   * 多 Agent 协作框架: 完整 ✅
     * 协作协议 (Handoff Templates)
     * Agent 激活提示
     * 7 阶段 Playbooks (Discovery → Operate)
-*下一步: 多 Agent Team 协作功能实现*
+*Phase 6 进行中 🔄*
+  * 多 Agent Team 协作 UI 实现:
+    * ✅ 类型定义 (`types/team.ts`)
+    * ✅ Team Store (`store/teamStore.ts`)
+    * ✅ Agent 编排器 UI (`components/TeamOrchestrator.tsx`)
+    * ✅ Dev↔QA 循环界面 (`components/DevQALoop.tsx`)
+    * ✅ 实时协作状态 (`components/TeamCollaborationView.tsx`)
+  * 待完成:
+    * 组件集成到主应用
+    * WebSocket 实时事件同步
+    * 与 OpenFang API 对接
+*下一步: 组件集成与 API 对接*