나랑이
a40b6eda32
TASK-057: 자매 상세 설정 탭 제거 (개요/세션/활동/하네스/로그만 유지) TASK-058: 관리 > 자매 관리 카드 이모지 제거, SisterAvatar 적용 TASK-059: 프로젝트 상세 이력 API/history 추가, Sprint + Hotfix timeline 표시 TASK-060: GlobalStyle에 user-select 정책 추가 (기본 none, 편집/로그/입력/코드만 text) 테스트 23/23 pass, FE 16 routes build 성공
164 lines
12 KiB
TypeScript
164 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState, useCallback } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import styled from 'styled-components';
|
|
import Link from 'next/link';
|
|
import { LabelMeta, SectionTitle, TechBar, TechBarFill, Timeline, TimelineItem, TimeStamp, TimelineContent, Btn } from '@/components/ui/base';
|
|
import { API_URL } from '@/lib/config';
|
|
import SisterAvatar from '@/components/common/SisterAvatar';
|
|
import { SISTER_ROLES } from '@/lib/sisters';
|
|
import { adminFetch } from '@/lib/adminFetch';
|
|
import CodeEditor from '@/components/admin/CodeEditor';
|
|
import LogTerminal from '@/components/admin/LogTerminal';
|
|
|
|
const Breadcrumb = styled.div`font-family: var(--font-mono);font-size: 11px;color: var(--text-secondary);margin-bottom: var(--space-md);a { color: var(--text-secondary); text-decoration: none; &:hover { color: var(--text-primary); } }`;
|
|
const Hero = styled.section`display:grid;grid-template-columns:128px 1fr;gap:var(--space-xl);align-items:center;padding:var(--space-xl);border:1px solid var(--border-color);margin-bottom:var(--space-xl);@media (max-width:767px){grid-template-columns:1fr;justify-items:start;}`;
|
|
const HeroMeta = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
|
|
const HeroName = styled.div`font-size:36px;font-weight:700;letter-spacing:-0.03em;color:var(--text-primary);`;
|
|
const HeroRole = styled.div`font-size:14px;color:var(--text-secondary);font-family:var(--font-mono);`;
|
|
const HeroStatus = styled.div`display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;`;
|
|
const StatusDot = styled.div<{ $on: boolean }>`width:10px;height:10px;border-radius:50%;background:${({$on})=>$on?'#FFF':'#555'};${({$on})=>$on&&`box-shadow:0 0 8px rgba(255,255,255,0.3);`}`;
|
|
const HeroStats = styled.div`display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg);@media (max-width:767px){grid-template-columns:repeat(2,minmax(0,1fr));}`;
|
|
const StatCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);`;
|
|
const StatLabel = styled.div`font-size:10px;color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:6px;`;
|
|
const StatValue = styled.div`font-size:18px;color:var(--text-primary);font-family:var(--font-mono);`;
|
|
const DetailGrid = styled.div`display:grid;grid-template-columns:320px 1fr;gap:var(--space-xxl);align-items:start;@media (max-width:1199px){grid-template-columns:1fr;gap:var(--space-xl);}`;
|
|
const MetaPanel = styled.div`display:flex;flex-direction:column;gap:var(--space-lg);`;
|
|
const MetaCard = styled.div`border:1px solid var(--border-color);padding:var(--space-lg);`;
|
|
const ConfigPre = styled.pre`background:#0d0d0d;border:1px solid var(--border-color);padding:var(--space-md);font-family:var(--font-mono);font-size:11px;color:#8888aa;overflow:auto;max-height:400px;white-space:pre-wrap;word-break:break-word;line-height:1.6;`;
|
|
const TabBar = styled.div`display:flex;gap:var(--space-lg);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-lg);overflow:auto;`;
|
|
const TabBtn = styled.button<{ $active: boolean }>`font-size:13px;font-weight:500;color:${({$active})=>$active?'var(--text-primary)':'var(--text-secondary)'};background:transparent;border:none;border-bottom:1px solid ${({$active})=>$active?'var(--text-primary)':'transparent'};padding:var(--space-sm) 0;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;&:hover{color:var(--text-primary);}`;
|
|
const Toolbar = styled.div`display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;`;
|
|
const Select = styled.select`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;cursor:pointer;outline:none;option{background:#1a1f2a;}`;
|
|
const LinesInput = styled.input`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;width:80px;outline:none;`;
|
|
const ResultMsg = styled.div<{ $success: boolean }>`padding:8px 12px;border-radius:6px;font-size:12px;font-family:monospace;background:${({$success})=>$success?'rgba(0,230,118,0.08)':'rgba(255,23,68,0.08)'};color:${({$success})=>$success?'#00FF00':'#FF1744'};border:1px solid ${({$success})=>$success?'rgba(0,230,118,0.3)':'rgba(255,23,68,0.3)'};margin-bottom:12px;`;
|
|
const SessionCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);margin-bottom:var(--space-sm);`;
|
|
const SISTER_DISPLAY: Record<string, string> = { harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이' };
|
|
const FILES = ['SOUL.md', 'AGENTS.md', 'TOOLS.md', 'PROTOCOL.md', 'HEARTBEAT.md'];
|
|
|
|
export default function SisterDetailPage() {
|
|
const { name } = useParams<{ name: string }>();
|
|
const [sisterInfo, setSisterInfo] = useState<any>(null);
|
|
const [systemInfo, setSystemInfo] = useState<any>(null);
|
|
const [configData, setConfigData] = useState<any>(null);
|
|
const [activity, setActivity] = useState<any[]>([]);
|
|
const [sessions, setSessions] = useState<any[]>([]);
|
|
const [tab, setTab] = useState('overview');
|
|
const [loading, setLoading] = useState(true);
|
|
const [logLines, setLogLines] = useState<string[]>([]);
|
|
const [logLoading, setLogLoading] = useState(false);
|
|
const [lines, setLines] = useState(100);
|
|
const [selectedFile, setSelectedFile] = useState('SOUL.md');
|
|
const [content, setContent] = useState('');
|
|
const [saved, setSaved] = useState('');
|
|
const [saveResult, setSaveResult] = useState<{ success: boolean; msg: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
Promise.allSettled([
|
|
fetch(`${API_URL}/api/sisters`),
|
|
fetch(`${API_URL}/api/sisters/${name}/config`),
|
|
fetch(`${API_URL}/api/sisters/${name}/activity`),
|
|
fetch(`${API_URL}/api/sisters/${name}/system`),
|
|
fetch(`${API_URL}/api/sisters/${name}/sessions`),
|
|
]).then(([sRes, cRes, aRes, syRes, ssRes]) => {
|
|
if (sRes.status === 'fulfilled' && sRes.value.ok) sRes.value.json().then((d: any[]) => setSisterInfo(d.find((s) => s.name === name)));
|
|
if (cRes.status === 'fulfilled' && cRes.value.ok) cRes.value.json().then(setConfigData);
|
|
if (aRes.status === 'fulfilled' && aRes.value.ok) aRes.value.json().then((d: any) => setActivity(d.items ?? []));
|
|
if (syRes.status === 'fulfilled' && syRes.value.ok) syRes.value.json().then(setSystemInfo);
|
|
if (ssRes.status === 'fulfilled' && ssRes.value.ok) ssRes.value.json().then((d: any) => setSessions(d.sessions ?? d.items ?? []));
|
|
}).finally(() => setLoading(false));
|
|
}, [name]);
|
|
|
|
const fetchLogs = useCallback(async () => {
|
|
setLogLoading(true);
|
|
try {
|
|
const res = await adminFetch(`/api/admin/logs/${name}?lines=${lines}`);
|
|
const d = await res.json();
|
|
setLogLines(d.lines ?? []);
|
|
} catch {
|
|
setLogLines(['(로그 로드 실패)']);
|
|
} finally {
|
|
setLogLoading(false);
|
|
}
|
|
}, [name, lines]);
|
|
|
|
useEffect(() => { if (tab === 'logs') fetchLogs(); }, [tab, fetchLogs]);
|
|
|
|
useEffect(() => {
|
|
if (tab !== 'harness') return;
|
|
setSaveResult(null);
|
|
adminFetch(`/api/admin/harness/${name}/${selectedFile}`)
|
|
.then((r) => r.json())
|
|
.then((d) => { setContent(d.content ?? ''); setSaved(d.content ?? ''); })
|
|
.catch(() => setContent('(로드 실패)'));
|
|
}, [tab, name, selectedFile]);
|
|
|
|
const handleSave = async () => {
|
|
setSaveResult(null);
|
|
try {
|
|
const res = await adminFetch(`/api/admin/harness/${name}/${selectedFile}`, { method: 'PUT', body: JSON.stringify({ content }) });
|
|
const d = await res.json();
|
|
if (d.success) { setSaved(content); setSaveResult({ success: true, msg: '저장 완료' }); }
|
|
else setSaveResult({ success: false, msg: d.error ?? '저장 실패' });
|
|
} catch (e) {
|
|
setSaveResult({ success: false, msg: (e as Error).message });
|
|
}
|
|
};
|
|
|
|
const isActive = sisterInfo?.status === 'online' || sisterInfo?.status === 'working';
|
|
|
|
return (
|
|
<>
|
|
<Breadcrumb><Link href="/sisters">자매 노드 관리</Link> / {SISTER_DISPLAY[name] ?? name}</Breadcrumb>
|
|
{loading ? <div style={{ color: 'var(--text-secondary)', fontSize: '13px', fontFamily: 'var(--font-mono)' }}>LOADING...</div> : <>
|
|
<Hero>
|
|
<SisterAvatar name={name} size={120} />
|
|
<HeroMeta>
|
|
<HeroName>{SISTER_DISPLAY[name] ?? name}</HeroName>
|
|
<HeroRole>{SISTER_ROLES[name] ?? 'UNKNOWN'}</HeroRole>
|
|
<HeroStatus>
|
|
<StatusDot $on={isActive} />
|
|
<LabelMeta>{isActive ? 'ACTIVE' : 'STANDBY'}</LabelMeta>
|
|
<LabelMeta><span>LXC:</span>{sisterInfo?.lxcId ?? '--'}</LabelMeta>
|
|
</HeroStatus>
|
|
<HeroStats>
|
|
<StatCard><StatLabel>UPTIME</StatLabel><StatValue>{systemInfo?.uptime ?? '--:--:--'}</StatValue></StatCard>
|
|
<StatCard><StatLabel>CPU</StatLabel><StatValue>{systemInfo?.cpu?.toFixed?.(1) ?? '0.0'}%</StatValue></StatCard>
|
|
<StatCard><StatLabel>MEM</StatLabel><StatValue>{systemInfo?.memory?.used ?? 0}/{systemInfo?.memory?.total ?? 0}MB</StatValue></StatCard>
|
|
<StatCard><StatLabel>DISK</StatLabel><StatValue>{systemInfo?.disk?.used ?? '0G'}/{systemInfo?.disk?.total ?? '0G'}</StatValue></StatCard>
|
|
</HeroStats>
|
|
</HeroMeta>
|
|
</Hero>
|
|
|
|
<DetailGrid>
|
|
<MetaPanel>
|
|
<MetaCard>
|
|
<LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>SYSTEM SUMMARY</LabelMeta>
|
|
<div style={{ margin: 'var(--space-md) 0', fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
|
|
LAST_SEEN: {sisterInfo?.lastSeen ? new Date(sisterInfo.lastSeen).toLocaleString() : '--'}<br />
|
|
ROLE: {SISTER_ROLES[name] ?? '--'}<br />
|
|
STATUS: {String(sisterInfo?.status ?? 'unknown').toUpperCase()}<br />
|
|
HOST_USER: {sisterInfo?.user ?? '--'}
|
|
</div>
|
|
<TechBar><TechBarFill $width={isActive ? 100 : 0} /></TechBar>
|
|
</MetaCard>
|
|
{configData?.description && <MetaCard><LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>DESC</LabelMeta><div style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>{configData.description}</div></MetaCard>}
|
|
</MetaPanel>
|
|
<div>
|
|
<TabBar>
|
|
{[{ id: 'overview', label: '개요' }, { id: 'sessions', label: '세션' }, { id: 'activity', label: '활동' }, { id: 'harness', label: '하네스' }, { id: 'logs', label: '로그' }].map((t) => <TabBtn key={t.id} $active={tab === t.id} onClick={() => setTab(t.id)}>{t.label}</TabBtn>)}
|
|
</TabBar>
|
|
|
|
{tab === 'overview' && <Timeline>{activity.slice(0, 8).map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
|
|
{tab === 'sessions' && <>{sessions.length === 0 ? <div style={{ color: 'var(--text-secondary)' }}>세션 없음</div> : sessions.map((s: any, i: number) => <SessionCard key={i}><div style={{ color: 'var(--text-primary)', fontSize: '13px' }}>{s.title ?? s.label ?? s.id ?? 'session'}</div><div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)' }}>{s.status ?? ''}</div></SessionCard>)}</>}
|
|
{tab === 'activity' && <Timeline>{activity.map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
|
|
{tab === 'harness' && <><Toolbar><Select value={selectedFile} onChange={(e) => setSelectedFile(e.target.value)}>{FILES.map((f) => <option key={f} value={f}>{f}</option>)}</Select><Btn onClick={() => { setContent(saved); setSaveResult(null); }}>되돌리기</Btn><Btn onClick={handleSave}>저장</Btn></Toolbar>{saveResult && <ResultMsg $success={saveResult.success}>{saveResult.msg}</ResultMsg>}<CodeEditor value={content} onChange={setContent} /></>}
|
|
{tab === 'logs' && <><Toolbar><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>최근</span><LinesInput type="number" value={lines} onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)} min={10} max={500} /><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>줄</span><Btn onClick={fetchLogs}>{logLoading ? '로딩 중...' : '로그 가져오기'}</Btn></Toolbar><LogTerminal lines={logLines} /></>}
|
|
</div>
|
|
</DetailGrid>
|
|
</>}
|
|
</>
|
|
);
|
|
}
|