feat(sprint-003): sister detail + org chart + settings viewer

Sprint 002 non-blocking: - API_URL/POLL_INTERVAL lib/config.ts 공통 추출 - 폴링 간격 NEXT_PUBLIC_POLL_INTERVAL_MS env화 Sprint 003 본문: - TASK-008: SisterDetailService (config/sessions/subagents/activity 조회) - TASK-008: GET /api/sisters/:name/{config,sessions,subagents,activity} - TASK-008: GET /api/org → 조직도 + 파이프라인 데이터 - TASK-009: /sisters 목록 페이지 (카드 클릭 → 상세 이동) - TASK-009: /sisters/[name] 상세 페이지 (탭: 개요/설정/세션/서브에이전트) - TASK-009: SisterCard → /sisters/:name 링크 연결 - TASK-010: /org 조직도 페이지 (OrgTree 컴포넌트, 호버 팝업) - TASK-011: /settings 설정 뷰어 페이지 (자매 선택 드롭다운) - 테스트 16/16 pass, FE build 성공 (7 routes)
2026-04-04 11:55:14 +09:00
parent dd6a2595f7
commit 4015e5f22f
20 changed files with 1553 additions and 8 deletions
--- a/frontend/app/sisters/[name]/page.tsx
+++ b/frontend/app/sisters/[name]/page.tsx
@@ -0,0 +1,195 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import styled from 'styled-components';
+import Link from 'next/link';
+import SisterHeader from '@/components/sisters/SisterHeader';
+import ConfigViewer from '@/components/sisters/ConfigViewer';
+import SessionList from '@/components/sisters/SessionList';
+import SubagentList from '@/components/sisters/SubagentList';
+import ActivityFeed from '@/components/dashboard/ActivityFeed';
+import TabNav from '@/components/common/TabNav';
+import { theme } from '@/styles/theme';
+import { API_URL } from '@/lib/config';
+
+type Status = 'online' | 'offline' | 'working' | 'unknown';
+
+const TABS = [
+  { id: 'overview', label: '개요', icon: '👤' },
+  { id: 'config', label: '설정', icon: '⚙️' },
+  { id: 'sessions', label: '세션', icon: '💬' },
+  { id: 'subagents', label: '서브에이전트', icon: '🤖' },
+];
+
+const Page = styled.div`
+  padding: 32px;
+  min-height: 100vh;
+  background: ${theme.colors.bg};
+`;
+
+const BackLink = styled(Link)`
+  font-size: 13px;
+  color: ${theme.colors.textSecondary};
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 20px;
+  transition: color 0.15s;
+  &:hover { color: ${theme.colors.textPrimary}; }
+`;
+
+const Card = styled.div`
+  background: ${theme.colors.cardBg};
+  border: 1px solid ${theme.colors.border};
+  border-radius: 12px;
+  padding: 24px;
+`;
+
+const OverviewGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const SectionTitle = styled.h3`
+  font-size: 13px;
+  font-weight: 600;
+  color: ${theme.colors.textSecondary};
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 14px;
+`;
+
+const CurrentTaskBox = styled.div`
+  padding: 12px 16px;
+  background: rgba(88,166,255,0.06);
+  border: 1px solid rgba(88,166,255,0.2);
+  border-radius: 8px;
+  font-size: 13px;
+  color: ${theme.colors.accent};
+  margin-bottom: 20px;
+`;
+
+const ErrorBanner = styled.div`
+  padding: 10px 14px;
+  background: rgba(255,23,68,0.08);
+  border: 1px solid rgba(255,23,68,0.3);
+  border-radius: 8px;
+  font-size: 13px;
+  color: ${theme.colors.offline};
+  margin-bottom: 20px;
+`;
+
+export default function SisterDetailPage() {
+  const { name } = useParams<{ name: string }>();
+  const [sisters, setSisters] = useState<any[]>([]);
+  const [configData, setConfigData] = useState<any>(null);
+  const [sessions, setSessions] = useState<any[]>([]);
+  const [subagents, setSubagents] = useState<any[]>([]);
+  const [activity, setActivity] = useState<any[]>([]);
+  const [tab, setTab] = useState('overview');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const [sistersRes, configRes, sessionsRes, subagentsRes, activityRes] = await Promise.allSettled([
+          fetch(`${API_URL}/api/sisters`),
+          fetch(`${API_URL}/api/sisters/${name}/config`),
+          fetch(`${API_URL}/api/sisters/${name}/sessions`),
+          fetch(`${API_URL}/api/sisters/${name}/subagents`),
+          fetch(`${API_URL}/api/sisters/${name}/activity`),
+        ]);
+
+        if (sistersRes.status === 'fulfilled' && sistersRes.value.ok) {
+          setSisters(await sistersRes.value.json());
+        }
+        if (configRes.status === 'fulfilled' && configRes.value.ok) {
+          setConfigData(await configRes.value.json());
+        }
+        if (sessionsRes.status === 'fulfilled' && sessionsRes.value.ok) {
+          setSessions(await sessionsRes.value.json());
+        }
+        if (subagentsRes.status === 'fulfilled' && subagentsRes.value.ok) {
+          setSubagents(await subagentsRes.value.json());
+        }
+        if (activityRes.status === 'fulfilled' && activityRes.value.ok) {
+          const d = await activityRes.value.json();
+          setActivity(d.items ?? []);
+        }
+        setError(null);
+      } catch {
+        setError('API 연결 실패');
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [name]);
+
+  const sisterInfo = sisters.find((s) => s.name === name);
+
+  return (
+    <Page>
+      <BackLink href="/">‹ 대시보드</BackLink>
+
+      {error && <ErrorBanner>⚠️ {error}</ErrorBanner>}
+
+      {loading ? (
+        <div style={{ color: theme.colors.textSecondary, fontSize: '14px' }}>로딩 중...</div>
+      ) : (
+        <>
+          <SisterHeader
+            name={name}
+            role={configData?.role ?? ''}
+            description={configData?.description ?? ''}
+            status={(sisterInfo?.status ?? 'unknown') as Status}
+            lastSeen={sisterInfo?.lastSeen ?? null}
+            lxcId={sisterInfo?.lxcId ?? 0}
+          />
+
+          <Card>
+            <TabNav tabs={TABS} active={tab} onChange={setTab} />
+
+            {tab === 'overview' && (
+              <>
+                {sisterInfo?.currentTask && (
+                  <CurrentTaskBox>📌 현재 작업: {sisterInfo.currentTask}</CurrentTaskBox>
+                )}
+                <SectionTitle>최근 활동</SectionTitle>
+                <ActivityFeed items={activity.slice(0, 5)} />
+              </>
+            )}
+
+            {tab === 'config' && (
+              <>
+                <SectionTitle>SOUL.md / AGENTS.md</SectionTitle>
+                <ConfigViewer content={configData?.raw ?? ''} />
+              </>
+            )}
+
+            {tab === 'sessions' && (
+              <>
+                <SectionTitle>최근 세션</SectionTitle>
+                <SessionList sessions={sessions} />
+              </>
+            )}
+
+            {tab === 'subagents' && (
+              <>
+                <SectionTitle>서브에이전트 목록</SectionTitle>
+                <SubagentList agents={subagents} />
+              </>
+            )}
+          </Card>
+        </>
+      )}
+    </Page>
+  );
+}
--- a/frontend/app/sisters/page.tsx
+++ b/frontend/app/sisters/page.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import StatusBadge from '@/components/common/StatusBadge';
+import { theme } from '@/styles/theme';
+import { API_URL } from '@/lib/config';
+
+const sisterEmojis: Record<string, string> = {
+  harang: '🦊', narang: '🦊', darang: '🐱', erang: '🐺',
+};
+
+const sisterDisplayNames: Record<string, string> = {
+  harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이',
+};
+
+const Page = styled.div`
+  padding: 32px;
+  min-height: 100vh;
+  background: ${theme.colors.bg};
+`;
+
+const PageTitle = styled.h1`
+  font-size: 22px;
+  font-weight: 700;
+  color: ${theme.colors.textPrimary};
+  margin-bottom: 6px;
+`;
+
+const PageSubtitle = styled.p`
+  font-size: 14px;
+  color: ${theme.colors.textSecondary};
+  margin-bottom: 28px;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+`;
+
+const Card = styled(Link)`
+  display: block;
+  background: ${theme.colors.cardBg};
+  border: 1px solid ${theme.colors.border};
+  border-radius: 14px;
+  padding: 24px;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  text-decoration: none;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
+    border-color: rgba(88,166,255,0.3);
+  }
+`;
+
+const CardTop = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 14px;
+`;
+
+const Avatar = styled.div`
+  font-size: 36px;
+  line-height: 1;
+`;
+
+const NameBlock = styled.div``;
+
+const Name = styled.div`
+  font-size: 18px;
+  font-weight: 700;
+  color: ${theme.colors.textPrimary};
+  margin-bottom: 4px;
+`;
+
+const Role = styled.div`
+  font-size: 12px;
+  color: ${theme.colors.textSecondary};
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  background: ${theme.colors.border};
+  margin: 12px 0;
+`;
+
+const MetaItem = styled.div`
+  font-size: 12px;
+  color: ${theme.colors.textSecondary};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+`;
+
+const TaskBox = styled.div`
+  margin-top: 10px;
+  padding: 8px 12px;
+  background: rgba(88,166,255,0.06);
+  border: 1px solid rgba(88,166,255,0.15);
+  border-radius: 6px;
+  font-size: 12px;
+  color: ${theme.colors.accent};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+function formatLastSeen(lastSeen: string | null): string {
+  if (!lastSeen) return '기록 없음';
+  const diff = Date.now() - new Date(lastSeen).getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return '방금 전';
+  if (min < 60) return `${min}분 전`;
+  const hr = Math.floor(min / 60);
+  return hr < 24 ? `${hr}시간 전` : `${Math.floor(hr / 24)}일 전`;
+}
+
+export default function SistersListPage() {
+  const [sisters, setSisters] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/sisters`);
+        if (res.ok) setSisters(await res.json());
+      } catch {
+        // silent
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+    const interval = setInterval(load, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Page>
+      <PageTitle>자매</PageTitle>
+      <PageSubtitle>하나랑 4자매 멀티에이전트 현황. 카드 클릭으로 상세 보기.</PageSubtitle>
+
+      {loading ? (
+        <div style={{ color: theme.colors.textSecondary, fontSize: '14px' }}>로딩 중...</div>
+      ) : (
+        <Grid>
+          {sisters.map((s) => (
+            <Card key={s.id} href={`/sisters/${s.name}`}>
+              <CardTop>
+                <Avatar>{sisterEmojis[s.name] ?? '🤖'}</Avatar>
+                <NameBlock>
+                  <Name>{sisterDisplayNames[s.name] ?? s.name}</Name>
+                  <Role>{s.role}</Role>
+                </NameBlock>
+              </CardTop>
+              <StatusBadge status={s.status} />
+              <Divider />
+              <MetaItem>🕐 마지막 활동: {formatLastSeen(s.lastSeen)}</MetaItem>
+              <MetaItem>🖥️ LXC {s.lxcId}</MetaItem>
+              {s.currentTask && <TaskBox>📌 {s.currentTask}</TaskBox>}
+            </Card>
+          ))}
+        </Grid>
+      )}
+    </Page>
+  );
+}