ideaco 1.1.5

package/src/components/TeamDetail.jsx

@@ -0,0 +1,697 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useStore } from '@/lib/client-store';
+import AgentDetailModal from './AgentDetailModal';
+import AgentChatModal from './AgentChatModal';
+import { useI18n } from '@/lib/i18n';
+import CachedAvatar from './CachedAvatar';
+import FilesView from './FilesView';
+import GroupChatView from './GroupChatView';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export default function TeamDetail() {
+  const { t } = useI18n();
+  const {
+    company, loading, activeTeamId, activeSprintId, setActiveSprintId,
+    navigateBackFromTeam, fetchTeamDetail, updateTeam, deleteTeam,
+    createSprint, discussSprint, approveSprint, fetchSprintDetail,
+    sendSprintMessage, deleteSprint,
+    fetchWorkspaceFile, navigateToRequirement,
+  } = useStore();
+
+  const [team, setTeam] = useState(null);
+  const [activeTab, setActiveTab] = useState('overview'); // overview | sprints | files
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [chatAgent, setChatAgent] = useState(null);
+
+  // Sprint form
+  const [showNewSprint, setShowNewSprint] = useState(false);
+  const [sprintTitle, setSprintTitle] = useState('');
+  const [sprintGoal, setSprintGoal] = useState('');
+
+  // Sprint detail
+  const [sprintDetail, setSprintDetail] = useState(null);
+  const [chatInput, setChatInput] = useState('');
+  const chatEndRef = useRef(null);
+
+  // Skills editing
+  const [editingSkills, setEditingSkills] = useState(false);
+  const [skillsInput, setSkillsInput] = useState('');
+
+  // Workspace
+  const [showWorkspaceSelector, setShowWorkspaceSelector] = useState(false);
+  const [workspaceInput, setWorkspaceInput] = useState('');
+  const [browseDirs, setBrowseDirs] = useState([]);
+  const [browseCurrentPath, setBrowseCurrentPath] = useState('');
+  const [browseParentPath, setBrowseParentPath] = useState(null);
+  const [browseLoading, setBrowseLoading] = useState(false);
+
+  // Files
+  const [previewFile, setPreviewFile] = useState(null); // { path, content, loading }
+
+  const fetchDirs = async (dirPath) => {
+    setBrowseLoading(true);
+    try {
+      const url = dirPath ? `/api/browse-dir?path=${encodeURIComponent(dirPath)}` : '/api/browse-dir';
+      const res = await fetch(url);
+      const data = await res.json();
+      if (!data.error) {
+        setBrowseDirs(data.dirs || []);
+        setBrowseCurrentPath(data.current || '');
+        setBrowseParentPath(data.parent || null);
+      }
+    } catch (e) { /* handled */ }
+    setBrowseLoading(false);
+  };
+
+  // Fetch team detail
+  const loadTeam = async () => {
+    if (!activeTeamId) return;
+    const data = await fetchTeamDetail(activeTeamId);
+    if (data) setTeam(data);
+  };
+
+  useEffect(() => {
+    loadTeam();
+  }, [activeTeamId]);
+
+  // Auto-refresh sprint detail
+  useEffect(() => {
+    if (!activeSprintId || !activeTeamId) { setSprintDetail(null); return; }
+    let running = true;
+    const load = async () => {
+      const data = await fetchSprintDetail(activeTeamId, activeSprintId);
+      if (data && running) setSprintDetail(data);
+    };
+    load();
+    const interval = setInterval(load, 5000);
+    return () => { running = false; clearInterval(interval); };
+  }, [activeSprintId, activeTeamId]);
+
+  // Scroll chat to bottom
+  useEffect(() => {
+    setTimeout(() => {
+      chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 80);
+  }, [sprintDetail?.groupChat?.length]);
+
+  // File preview
+  const loadFilePreview = useCallback(async (filePath) => {
+    if (!team?.departmentId) return;
+    setPreviewFile({ path: filePath, content: null, loading: true });
+    try {
+      const content = await fetchWorkspaceFile(team.departmentId, filePath);
+      setPreviewFile({ path: filePath, content: content?.content || content || '', loading: false });
+    } catch {
+      setPreviewFile({ path: filePath, content: 'Failed to read file', loading: false });
+    }
+  }, [team?.departmentId, fetchWorkspaceFile]);
+
+  if (!team) {
+    return (
+      <div className="p-6 text-center text-[var(--muted)]">
+        <div className="animate-pulse text-4xl mb-4">👥</div>
+        <p>{t('common.loading')}</p>
+      </div>
+    );
+  }
+
+  const handleCreateSprint = async () => {
+    if (!sprintTitle || !sprintGoal) return;
+    const result = await createSprint(activeTeamId, sprintTitle, sprintGoal);
+    if (result?.id) {
+      setShowNewSprint(false);
+      setSprintTitle('');
+      setSprintGoal('');
+      loadTeam();
+      setActiveSprintId(result.id);
+    }
+  };
+
+  const handleDiscuss = async (sprintId) => {
+    await discussSprint(activeTeamId, sprintId);
+    loadTeam();
+    const data = await fetchSprintDetail(activeTeamId, sprintId);
+    if (data) setSprintDetail(data);
+  };
+
+  const handleApprove = async (sprintId) => {
+    await approveSprint(activeTeamId, sprintId);
+    loadTeam();
+    const data = await fetchSprintDetail(activeTeamId, sprintId);
+    if (data) setSprintDetail(data);
+  };
+
+  const handleSendChat = async () => {
+    if (!chatInput.trim() || !activeSprintId) return;
+    const msg = chatInput;
+    setChatInput('');
+    await sendSprintMessage(activeTeamId, activeSprintId, msg);
+    const data = await fetchSprintDetail(activeTeamId, activeSprintId);
+    if (data) setSprintDetail(data);
+  };
+
+  const handleSaveSkills = async () => {
+    const skills = skillsInput.split(',').map(s => s.trim()).filter(Boolean);
+    await updateTeam(activeTeamId, { skills });
+    setEditingSkills(false);
+    loadTeam();
+  };
+
+  const handleSetWorkspace = async (path) => {
+    await updateTeam(activeTeamId, { workspacePath: path });
+    setShowWorkspaceSelector(false);
+    loadTeam();
+  };
+
+  const statusCfg = {
+    draft: { label: t('team.sprint.draft'), color: 'text-gray-400', bg: 'bg-gray-900/30', icon: '📝' },
+    discussing: { label: t('team.sprint.discussing'), color: 'text-blue-400', bg: 'bg-blue-900/30', icon: '💬' },
+    pending_approval: { label: t('team.sprint.pendingApproval'), color: 'text-yellow-400', bg: 'bg-yellow-900/30', icon: '⏳' },
+    in_progress: { label: t('team.sprint.inProgress'), color: 'text-green-400', bg: 'bg-green-900/30', icon: '⚙️' },
+    completed: { label: t('team.sprint.completed'), color: 'text-emerald-400', bg: 'bg-emerald-900/30', icon: '✅' },
+    failed: { label: t('team.sprint.failed'), color: 'text-red-400', bg: 'bg-red-900/30', icon: '❌' },
+  };
+
+  // Sprint detail view (inline) — two-column layout like RequirementDetail
+  const renderSprintDetail = () => {
+    if (!sprintDetail) return null;
+    const st = statusCfg[sprintDetail.status] || statusCfg.draft;
+    const groupChat = (sprintDetail.groupChat || []).filter(m => m.visibility !== 'flow');
+
+    // Build agentMap for GroupChatView
+    const chatAgentMap = {};
+    if (company?.departments) {
+      for (const dept of company.departments) {
+        for (const agent of (dept.members || dept.agents || [])) {
+          chatAgentMap[agent.id] = agent.name;
+        }
+      }
+    }
+
+    // Adapt sendSprintMessage to GroupChatView's (id, msg) signature
+    const handleSprintChatSend = async (_id, msg) => {
+      await sendSprintMessage(activeTeamId, sprintDetail.id, msg);
+    };
+    const handleSprintChatRefresh = async () => {
+      const data = await fetchSprintDetail(activeTeamId, sprintDetail.id);
+      if (data) setSprintDetail(data);
+    };
+
+    // Find leader info for typing indicator
+    const leaderMsg = groupChat.find(m => m.from?.id !== 'boss' && m.from?.role !== 'system' && m.type !== 'system');
+    const chatLeaderInfo = leaderMsg ? { name: leaderMsg.from?.name, avatar: leaderMsg.from?.avatar } : null;
+
+    return (
+      <div className="flex-1 min-h-0 flex flex-col">
+        {/* Sprint header */}
+        <div className="shrink-0 border-b border-[var(--border)] bg-[var(--card)]/50 px-6 py-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => { setActiveSprintId(null); setSprintDetail(null); }}
+                className="text-[var(--muted)] hover:text-[var(--foreground)] text-sm"
+              >
+                ← {t('team.sprint.backToList')}
+              </button>
+              <div className="w-px h-5 bg-[var(--border)]" />
+              <span className="text-lg font-bold">{sprintDetail.title}</span>
+              <span className={`text-xs px-2 py-0.5 rounded-full ${st.bg} ${st.color}`}>{st.icon} {st.label}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              {sprintDetail.status === 'draft' && (
+                <button className="btn-primary text-xs" disabled={loading} onClick={() => handleDiscuss(sprintDetail.id)}>
+                  {loading ? t('team.sprint.discussing') : t('team.sprint.startDiscussion')}
+                </button>
+              )}
+              {sprintDetail.status === 'pending_approval' && (
+                <button className="btn-primary text-xs" disabled={loading} onClick={() => handleApprove(sprintDetail.id)}>
+                  {loading ? '...' : t('team.sprint.approve')}
+                </button>
+              )}
+              {sprintDetail.requirementId && (
+                <button
+                  className="text-xs px-3 py-1 rounded bg-blue-600/20 text-blue-400 hover:bg-blue-600/30 font-medium"
+                  onClick={() => navigateToRequirement(sprintDetail.requirementId)}
+                >
+                  {t('team.sprint.viewRequirement')}
+                </button>
+              )}
+              <button
+                className="text-xs px-2 py-1 rounded bg-red-600/15 text-red-400 hover:bg-red-600/25"
+                onClick={async () => {
+                  if (confirm(t('team.sprint.confirmDelete'))) {
+                    await deleteSprint(activeTeamId, sprintDetail.id);
+                    setActiveSprintId(null);
+                    setSprintDetail(null);
+                    loadTeam();
+                  }
+                }}
+              >
+                🗑️
+              </button>
+            </div>
+          </div>
+          {/* Goal & Plan summary */}
+          <div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]">
+            <span>🎯 {sprintDetail.goal}</span>
+            {sprintDetail.workflow?.nodes?.length > 0 && (
+              <span>📊 {sprintDetail.workflow.nodes.filter(n => n.status === 'completed').length}/{sprintDetail.workflow.nodes.length}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Two-column body */}
+        <div className="flex-1 min-h-0 flex">
+          {/* Left: Group Chat */}
+          <div className="w-[380px] shrink-0 border-r border-white/[0.06] flex flex-col bg-[var(--background)]">
+            <div className="px-4 py-2.5 border-b border-white/[0.06] bg-[var(--card)] flex items-center justify-between">
+              <span className="text-sm font-medium">💬 {t('team.sprint.chat')}</span>
+              <span className="text-[10px] bg-white/10 px-1.5 py-0.5 rounded-full text-[var(--muted)]">{groupChat.length}</span>
+            </div>
+            <GroupChatView
+              groupChat={groupChat}
+              agentMap={chatAgentMap}
+              bossAvatar={company?.bossAvatar}
+              bossName={company?.boss || 'Boss'}
+              requirementId={sprintDetail.id}
+              onSendMessage={handleSprintChatSend}
+              fetchDetail={handleSprintChatRefresh}
+              leaderInfo={chatLeaderInfo}
+              chatEndRef={chatEndRef}
+              embedded
+            />
+          </div>
+
+          {/* Right: Sprint Plan */}
+          <div className="flex-1 min-w-0 flex flex-col">
+            <div className="flex items-center gap-2 px-6 py-2.5 border-b border-white/[0.06] bg-[var(--card)]">
+              <span className="text-sm font-medium">📋 {t('team.sprint.plan')}</span>
+            </div>
+
+            <div className="flex-1 min-h-0 overflow-auto p-4">
+              {sprintDetail.plan ? (
+                <div className="prose prose-invert prose-xs max-w-none font-mono text-xs leading-relaxed">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{sprintDetail.plan}</ReactMarkdown>
+                </div>
+              ) : (
+                <div className="text-center py-8 text-[var(--muted)] text-sm">
+                  <div className="text-3xl mb-2">📋</div>
+                  <p>{t('team.sprint.noPlan')}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-full flex flex-col animate-fade-in">
+      {/* Top bar */}
+      <div className="shrink-0 border-b border-[var(--border)] bg-[var(--card)]/50 backdrop-blur-sm px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4 min-w-0">
+            <button
+              onClick={navigateBackFromTeam}
+              className="text-[var(--muted)] hover:text-[var(--foreground)] transition-colors text-sm flex items-center gap-1 shrink-0"
+            >
+              ← {t('team.back')}
+            </button>
+            <div className="w-px h-6 bg-[var(--border)]" />
+            <div className="flex items-center gap-3 min-w-0">
+              <div className="w-10 h-10 bg-gradient-to-br from-violet-600 to-purple-700 rounded-lg flex items-center justify-center text-lg shrink-0">
+                👥
+              </div>
+              <div className="min-w-0">
+                <h1 className="text-lg font-bold flex items-center gap-2 truncate">
+                  {team.name}
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-purple-900/30 text-purple-400">
+                    {team.departmentName}
+                  </span>
+                </h1>
+                <p className="text-xs text-[var(--muted)] truncate">{team.description || t('team.noDescription')}</p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <button
+              className="btn-primary flex items-center gap-1.5 text-sm"
+              onClick={() => { setShowNewSprint(true); setSprintTitle(''); setSprintGoal(''); }}
+            >
+              🚀 {t('team.newSprint')}
+            </button>
+          </div>
+        </div>
+        {/* Stats */}
+        <div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]">
+          <span>👥 {team.memberIds?.length || 0} {t('team.members')}</span>
+          <span>👔 {team.leaderName}</span>
+          <span>🔄 {team.sprints?.length || 0} {t('team.sprints')}</span>
+          {team.workspacePath && <span>📁 {team.workspacePath}</span>}
+        </div>
+        {/* Tabs */}
+        <div className="flex gap-1 mt-3">
+          {[
+            { key: 'overview', label: t('team.tab.overview') },
+            { key: 'sprints', label: t('team.tab.sprints') },
+            { key: 'files', label: t('team.tab.files') },
+          ].map(tab => (
+            <button
+              key={tab.key}
+              onClick={() => { setActiveTab(tab.key); setActiveSprintId(null); setSprintDetail(null); }}
+              className={`text-xs px-3 py-1.5 rounded-lg transition-colors ${
+                activeTab === tab.key
+                  ? 'bg-[var(--accent)] text-white'
+                  : 'text-[var(--muted)] hover:bg-white/5'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className={`flex-1 min-h-0 flex flex-col ${
+        activeSprintId
+          ? 'overflow-hidden'
+          : `p-6 space-y-6 ${activeTab === 'files' ? 'overflow-hidden' : 'overflow-auto'}`
+      }`}>
+
+        {/* New Sprint Form */}
+        {showNewSprint && (
+          <div className="card border-[var(--accent)]/30 animate-fade-in space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-base font-semibold">🚀 {t('team.newSprint')}</h3>
+              <button onClick={() => setShowNewSprint(false)} className="text-[var(--muted)] hover:text-white text-lg">✕</button>
+            </div>
+            <div>
+              <label className="block text-sm mb-1 text-[var(--muted)]">{t('team.sprint.titleLabel')}</label>
+              <input
+                className="input w-full"
+                placeholder={t('team.sprint.titlePlaceholder')}
+                value={sprintTitle}
+                onChange={e => setSprintTitle(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <div>
+              <label className="block text-sm mb-1 text-[var(--muted)]">{t('team.sprint.goalLabel')}</label>
+              <textarea
+                className="input w-full h-24 resize-none"
+                placeholder={t('team.sprint.goalPlaceholder')}
+                value={sprintGoal}
+                onChange={e => setSprintGoal(e.target.value)}
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button className="btn-secondary" onClick={() => setShowNewSprint(false)}>{t('common.cancel')}</button>
+              <button
+                className="btn-primary"
+                disabled={!sprintTitle || !sprintGoal || loading}
+                onClick={handleCreateSprint}
+              >
+                {loading ? t('common.loading') : t('team.sprint.createBtn')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Overview tab */}
+        {activeTab === 'overview' && !activeSprintId && (
+          <>
+            {/* Members */}
+            <div>
+              <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-3">{t('team.membersTitle')}</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {(team.membersDetail || []).map(member => (
+                  <div
+                    key={member.id}
+                    className="card hover:border-[var(--accent)]/30 transition-all cursor-pointer group"
+                    onClick={() => setSelectedAgent(member.id)}
+                  >
+                    <div className="flex items-start gap-3">
+                      <CachedAvatar src={member.avatar} alt={member.name} className="w-12 h-12 rounded-full bg-[var(--border)] shrink-0" />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium text-sm truncate">{member.name}</span>
+                          {team.leaderId === member.id && (
+                            <span className="text-[10px] bg-yellow-900/30 text-yellow-400 px-1.5 py-0.5 rounded">{t('team.leader')}</span>
+                          )}
+                          <span className={`status-dot ${member.status}`} />
+                        </div>
+                        <div className="text-xs text-[var(--muted)]">{member.role}</div>
+                        {member.signature && <div className="text-[10px] text-[var(--muted)] italic mt-1 truncate">"{member.signature}"</div>}
+                      </div>
+                      <button
+                        className="opacity-0 group-hover:opacity-100 text-blue-400 hover:text-blue-300 text-sm transition-opacity"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setChatAgent({ id: member.id, name: member.name, avatar: member.avatar, role: member.role, signature: member.signature, department: team.departmentName });
+                        }}
+                      >
+                        💬
+                      </button>
+                    </div>
+                    <div className="flex gap-1 mt-2 flex-wrap">
+                      {member.skills?.slice(0, 4).map((s, i) => (
+                        <span key={i} className="text-[10px] text-[var(--muted)] bg-white/5 px-1.5 py-0.5 rounded">{s}</span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Skills */}
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">{t('team.skillsTitle')}</h2>
+                <button
+                  className="text-xs text-[var(--accent)] hover:underline"
+                  onClick={() => { setEditingSkills(true); setSkillsInput((team.skills || []).join(', ')); }}
+                >
+                  ✏️ {t('team.editSkills')}
+                </button>
+              </div>
+              {editingSkills ? (
+                <div className="card space-y-3">
+                  <textarea
+                    className="input w-full h-16 resize-none text-sm"
+                    placeholder={t('team.skillsPlaceholder')}
+                    value={skillsInput}
+                    onChange={e => setSkillsInput(e.target.value)}
+                  />
+                  <div className="flex justify-end gap-2">
+                    <button className="btn-secondary text-xs" onClick={() => setEditingSkills(false)}>{t('common.cancel')}</button>
+                    <button className="btn-primary text-xs" onClick={handleSaveSkills}>{t('common.save')}</button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex gap-2 flex-wrap">
+                  {(team.skills || []).length > 0 ? (
+                    team.skills.map((s, i) => (
+                      <span key={i} className="text-xs bg-purple-900/30 text-purple-400 px-2 py-1 rounded">{s}</span>
+                    ))
+                  ) : (
+                    <span className="text-xs text-[var(--muted)]">{t('team.noSkills')}</span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* Workspace */}
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">{t('team.workspaceTitle')}</h2>
+                <button
+                  className="text-xs text-[var(--accent)] hover:underline"
+                  onClick={() => { setShowWorkspaceSelector(true); setWorkspaceInput(team.workspacePath || ''); fetchDirs(team.workspacePath || ''); }}
+                >
+                  📁 {t('team.selectWorkspace')}
+                </button>
+              </div>
+              {team.workspacePath ? (
+                <div className="card text-sm font-mono">{team.workspacePath}</div>
+              ) : (
+                <div className="card text-sm text-[var(--muted)]">{t('team.noWorkspace')}</div>
+              )}
+            </div>
+
+            {/* Recent sprints */}
+            <div>
+              <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-3">{t('team.recentSprints')}</h2>
+              {(team.sprints || []).length > 0 ? (
+                <div className="space-y-2">
+                  {team.sprints.slice(0, 5).map(sprint => {
+                    const st = statusCfg[sprint.status] || statusCfg.draft;
+                    return (
+                      <div
+                        key={sprint.id}
+                        className="card cursor-pointer hover:border-[var(--accent)]/30 transition-all"
+                        onClick={() => { setActiveTab('sprints'); setActiveSprintId(sprint.id); }}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <span>{st.icon}</span>
+                            <span className="text-sm font-medium">{sprint.title}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className={`text-[10px] px-1.5 py-0.5 rounded ${st.bg} ${st.color}`}>{st.label}</span>
+                            {sprint.workflow && <span className="text-[10px] text-[var(--muted)]">📊 {sprint.workflow.completedCount || 0}/{sprint.workflow.nodeCount || 0}</span>}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="card text-center py-6 text-[var(--muted)]">
+                  <div className="text-2xl mb-2">🚀</div>
+                  <p className="text-sm">{t('team.noSprints')}</p>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* Sprints tab / Sprint detail */}
+        {activeTab === 'sprints' && (
+          activeSprintId ? renderSprintDetail() : (
+            <div>
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">{t('team.tab.sprints')}</h2>
+                <button
+                  className="text-xs text-[var(--accent)] hover:underline"
+                  onClick={() => { setShowNewSprint(true); setSprintTitle(''); setSprintGoal(''); }}
+                >
+                  + {t('team.newSprint')}
+                </button>
+              </div>
+              {(team.sprints || []).length > 0 ? (
+                <div className="space-y-2">
+                  {team.sprints.map(sprint => {
+                    const st = statusCfg[sprint.status] || statusCfg.draft;
+                    return (
+                      <div
+                        key={sprint.id}
+                        className="card cursor-pointer hover:border-[var(--accent)]/30 transition-all"
+                        onClick={() => setActiveSprintId(sprint.id)}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <span>{st.icon}</span>
+                            <span className="text-sm font-medium">{sprint.title}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <span className={`text-[10px] px-1.5 py-0.5 rounded ${st.bg} ${st.color}`}>{st.label}</span>
+                            {sprint.chatCount > 0 && <span className="text-[10px] text-[var(--muted)]">💬 {sprint.chatCount}</span>}
+                            {sprint.workflow && <span className="text-[10px] text-[var(--muted)]">📊 {sprint.workflow.completedCount || 0}/{sprint.workflow.nodeCount || 0}</span>}
+                          </div>
+                        </div>
+                        <p className="text-xs text-[var(--muted)] mt-1 truncate">🎯 {sprint.goal}</p>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="card text-center py-8 text-[var(--muted)]">
+                  <div className="text-3xl mb-2">🚀</div>
+                  <p className="text-sm">{t('team.noSprints')}</p>
+                </div>
+              )}
+            </div>
+          )
+        )}
+
+        {/* Overview + active sprint */}
+        {activeTab === 'overview' && activeSprintId && renderSprintDetail()}
+
+        {/* Files tab */}
+        {activeTab === 'files' && (
+          <div className="flex-1 min-h-0">
+            {team.workspacePath ? (
+              <div className="h-full">
+                <FilesView
+                  departmentId={team.departmentId}
+                  previewFile={previewFile}
+                  onPreview={loadFilePreview}
+                  onClosePreview={() => setPreviewFile(null)}
+                />
+              </div>
+            ) : (
+              <div className="card text-center py-8 text-[var(--muted)]">
+                <div className="text-3xl mb-2">📁</div>
+                <p className="text-sm">{t('team.noWorkspace')}</p>
+                <button
+                  className="btn-secondary mt-3 text-sm"
+                  onClick={() => { setShowWorkspaceSelector(true); fetchDirs(''); }}
+                >
+                  {t('team.selectWorkspace')}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      {selectedAgent && <AgentDetailModal agentId={selectedAgent} onClose={() => setSelectedAgent(null)} />}
+      {chatAgent && (
+        <AgentChatModal
+          agentId={chatAgent.id}
+          agentName={chatAgent.name}
+          agentAvatar={chatAgent.avatar}
+          agentRole={chatAgent.role}
+          agentSignature={chatAgent.signature}
+          agentDepartment={chatAgent.department}
+          onClose={() => setChatAgent(null)}
+        />
+      )}
+
+      {/* Workspace selector modal */}
+      {showWorkspaceSelector && (
+        <div className="fixed inset-0 z-[70] bg-black/70 flex items-center justify-center !m-0" onClick={() => setShowWorkspaceSelector(false)}>
+          <div className="card max-w-lg w-full mx-4 max-h-[70vh] flex flex-col" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between pb-3 border-b border-[var(--border)]">
+              <h3 className="text-base font-semibold">📁 {t('team.selectWorkspace')}</h3>
+              <button onClick={() => setShowWorkspaceSelector(false)} className="text-[var(--muted)] hover:text-white text-lg">✕</button>
+            </div>
+            <div className="flex items-center gap-2 py-2 px-1 bg-[var(--background)] rounded-lg mt-3 mb-2">
+              <span className="text-xs text-[var(--muted)] shrink-0">📍</span>
+              <span className="text-xs font-mono text-[var(--foreground)] truncate">{browseCurrentPath}</span>
+            </div>
+            <div className="flex-1 overflow-auto space-y-0.5 min-h-[200px]">
+              {browseLoading ? (
+                <div className="text-center py-8 text-[var(--muted)] text-sm animate-pulse">{t('common.loading')}</div>
+              ) : (
+                <>
+                  {browseParentPath !== null && (
+                    <div className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5 cursor-pointer text-sm" onClick={() => fetchDirs(browseParentPath)}>
+                      <span>📂</span><span className="text-[var(--muted)]">..</span>
+                    </div>
+                  )}
+                  {browseDirs.map(dir => (
+                    <div key={dir.path} className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/5 cursor-pointer text-sm" onClick={() => fetchDirs(dir.path)}>
+                      <span>📁</span><span className="truncate">{dir.name}</span>
+                    </div>
+                  ))}
+                </>
+              )}
+            </div>
+            <div className="flex gap-2 pt-3 border-t border-[var(--border)] mt-2">
+              <button className="btn-secondary flex-1" onClick={() => setShowWorkspaceSelector(false)}>{t('common.cancel')}</button>
+              <button className="btn-primary flex-1" onClick={() => handleSetWorkspace(browseCurrentPath)}>
+                {t('dept.newReq.selectDir')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}