feat(ui): parse LLM resultJson and render as markdown in detail drawer

- resultJson was showing as raw {"text":"..."} JSON string
- Now parses the JSON and renders the text via react-markdown
- Pretty rendering: headings, lists, code blocks, blockquotes, links
- Shows status dot + model name header
- Fallback to raw view when text field is empty

.claude/sessions/.last_inbox_check

@@ -1 +1 @@
-1775810293
+1775812935

backend/src/rails/rails.controller.ts

@@ -44,6 +44,44 @@ export class RailsController {
     return { pipelineId: id, tree };
   }
 
+  @Get('sub-tasks/:id')
+  async subTaskDetail(@Param('id') id: string) {
+    const detail = await this.rails.getSubTaskDetail(id);
+    if (!detail) {
+      throw new HttpException('sub-task not found', HttpStatus.NOT_FOUND);
+    }
+    return detail;
+  }
+
+  @Get('transitions')
+  async transitions(
+    @Query('pipelineId') pipelineId?: string,
+    @Query('eventType') eventType?: string,
+    @Query('limit') limit?: string,
+  ) {
+    const opts: { pipelineId?: string; eventType?: string; limit?: number } = {};
+    if (pipelineId) opts.pipelineId = pipelineId;
+    if (eventType) opts.eventType = eventType;
+    if (limit) opts.limit = parseInt(limit, 10);
+    const transitions = await this.rails.listTransitions(opts);
+    return { transitions };
+  }
+
+  @Get('escalations')
+  async escalations(
+    @Query('pipelineId') pipelineId?: string,
+    @Query('resolved') resolved?: string,
+    @Query('limit') limit?: string,
+  ) {
+    const opts: { pipelineId?: string; resolved?: boolean; limit?: number } = {};
+    if (pipelineId) opts.pipelineId = pipelineId;
+    if (resolved === 'true') opts.resolved = true;
+    else if (resolved === 'false') opts.resolved = false;
+    if (limit) opts.limit = parseInt(limit, 10);
+    const escalations = await this.rails.listEscalations(opts);
+    return { escalations };
+  }
+
   @Post('pipelines/start')
   async start(
     @Body() body: { project: string; requirements: string },

backend/src/rails/rails.service.ts

@@ -72,6 +72,44 @@ export class RailsService {
     return data.tree ?? [];
   }
 
+  async getSubTaskDetail(id: string): Promise<unknown | null> {
+    try {
+      return await this.fetchJson(`/api/sub-tasks/${id}`);
+    } catch {
+      return null;
+    }
+  }
+
+  async listTransitions(opts: {
+    pipelineId?: string;
+    eventType?: string;
+    limit?: number;
+  }): Promise<unknown[]> {
+    const params = new URLSearchParams();
+    if (opts.pipelineId) params.set('pipelineId', opts.pipelineId);
+    if (opts.eventType) params.set('eventType', opts.eventType);
+    params.set('limit', String(opts.limit ?? 100));
+    const data = await this.fetchJson<{ transitions: unknown[] }>(
+      `/api/transitions?${params.toString()}`,
+    );
+    return data.transitions ?? [];
+  }
+
+  async listEscalations(opts: {
+    pipelineId?: string;
+    resolved?: boolean;
+    limit?: number;
+  }): Promise<unknown[]> {
+    const params = new URLSearchParams();
+    if (opts.pipelineId) params.set('pipelineId', opts.pipelineId);
+    if (opts.resolved !== undefined) params.set('resolved', String(opts.resolved));
+    params.set('limit', String(opts.limit ?? 50));
+    const data = await this.fetchJson<{ escalations: unknown[] }>(
+      `/api/escalations?${params.toString()}`,
+    );
+    return data.escalations ?? [];
+  }
+
   async startPipeline(input: {
     project: string;
     requirements: string;

frontend/app/office/page.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/lib/useRailsSocket';
 import OfficeFloor from '@/components/office/OfficeFloor';
 import SubTaskTree from '@/components/rails/SubTaskTree';
+import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
 
 type SisterKey = 'harang' | 'narang' | 'darang' | 'erang';
 
@@ -110,6 +111,7 @@ export default function OfficePage() {
   const [pipelines, setPipelines] = useState<RailsPipelineSummary[]>([]);
   const [trees, setTrees] = useState<Map<string, RailsSubTaskNode[]>>(new Map());
   const [selectedSister, setSelectedSister] = useState<SisterKey | null>(null);
+  const [detailNodeId, setDetailNodeId] = useState<string | null>(null);
 
   const { connected } = useRailsSocket({
     onPipelinesSnapshot: (next) => setPipelines(next),
@@ -223,7 +225,7 @@ export default function OfficePage() {
           </CardTitle>
           {selectedSister ? (
             selectedSubTree.length > 0 ? (
-              <SubTaskTree tree={selectedSubTree} />
+              <SubTaskTree tree={selectedSubTree} onSelectNode={setDetailNodeId} />
             ) : (
               <Empty>{selectedSister}는 지금 노는 중</Empty>
             )
@@ -232,6 +234,13 @@ export default function OfficePage() {
           )}
         </Card>
       </TwoCol>
+
+      {detailNodeId && (
+        <SubTaskDetailDrawer
+          subTaskId={detailNodeId}
+          onClose={() => setDetailNodeId(null)}
+        />
+      )}
     </Page>
   );
 }

frontend/app/rails/escalations/page.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { API_URL } from '@/lib/config';
+
+interface Escalation {
+  id: string;
+  pipelineId: string;
+  reason: string;
+  errorCategory: string;
+  stage: string;
+  attempts: number;
+  contextSnapshot: string;
+  resolvedAt: string | null;
+  resolution: string | null;
+  createdAt: string;
+}
+
+const Page = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 32px 36px;
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+`;
+
+const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 16px;
+`;
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  letter-spacing: -0.01em;
+`;
+
+const Subtitle = styled.p`
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+`;
+
+const Filters = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const FilterBtn = styled.button<{ $active: boolean }>`
+  padding: 8px 16px;
+  background: ${({ $active }) => ($active ? '#5fafff' : 'transparent')};
+  color: ${({ $active }) => ($active ? '#0a0a0a' : 'var(--text-primary)')};
+  border: 1px solid ${({ $active }) => ($active ? '#5fafff' : 'var(--border-color)')};
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const Card = styled.div<{ $resolved: boolean }>`
+  background: var(--bg-input);
+  border: 1px solid ${({ $resolved }) => ($resolved ? 'var(--border-color)' : '#ef444460')};
+  border-left: 4px solid ${({ $resolved }) => ($resolved ? '#525252' : '#ef4444')};
+  border-radius: 12px;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+`;
+
+const Reason = styled.h3`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  flex: 1;
+  word-break: break-word;
+`;
+
+const Tags = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const Tag = styled.span<{ $color: string }>`
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 12px;
+  background: ${({ $color }) => $color}20;
+  color: ${({ $color }) => $color};
+  border: 1px solid ${({ $color }) => $color}60;
+`;
+
+const Meta = styled.div`
+  display: flex;
+  gap: 18px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  flex-wrap: wrap;
+`;
+
+const Snapshot = styled.details`
+  margin-top: 4px;
+
+  summary {
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--text-secondary);
+    user-select: none;
+  }
+
+  pre {
+    margin: 8px 0 0;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 11px;
+    overflow-x: auto;
+  }
+`;
+
+const Empty = styled.div`
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+`;
+
+function categoryColor(c: string): string {
+  switch (c) {
+    case 'timeout':
+      return '#f97316';
+    case 'rate_limit':
+      return '#eab308';
+    case 'network':
+      return '#3b82f6';
+    case 'permission':
+      return '#ef4444';
+    case 'config':
+      return '#a855f7';
+    case 'invariant':
+      return '#ec4899';
+    default:
+      return '#6b7280';
+  }
+}
+
+function relTime(iso: string): string {
+  try {
+    const ms = Date.now() - new Date(iso).getTime();
+    const sec = Math.floor(ms / 1000);
+    if (sec < 60) return `${sec}s 전`;
+    if (sec < 3600) return `${Math.floor(sec / 60)}m 전`;
+    if (sec < 86400) return `${Math.floor(sec / 3600)}h 전`;
+    return `${Math.floor(sec / 86400)}d 전`;
+  } catch {
+    return iso;
+  }
+}
+
+export default function EscalationsPage() {
+  const [escalations, setEscalations] = useState<Escalation[]>([]);
+  const [filter, setFilter] = useState<'all' | 'unresolved' | 'resolved'>('all');
+
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.set('limit', '100');
+    if (filter === 'unresolved') params.set('resolved', 'false');
+    if (filter === 'resolved') params.set('resolved', 'true');
+
+    fetch(`${API_URL}/api/rails/escalations?${params.toString()}`, {
+      credentials: 'include',
+    })
+      .then((r) => r.json())
+      .then((data: { escalations: Escalation[] }) => setEscalations(data.escalations))
+      .catch(() => setEscalations([]));
+  }, [filter]);
+
+  return (
+    <Page>
+      <Header>
+        <div>
+          <Title>Escalations</Title>
+          <Subtitle>
+            자동 재시도 후에도 실패한 파이프라인 — 사용자 개입 대기
+          </Subtitle>
+        </div>
+        <Filters>
+          <FilterBtn $active={filter === 'all'} onClick={() => setFilter('all')}>
+            전체
+          </FilterBtn>
+          <FilterBtn
+            $active={filter === 'unresolved'}
+            onClick={() => setFilter('unresolved')}
+          >
+            미해결
+          </FilterBtn>
+          <FilterBtn
+            $active={filter === 'resolved'}
+            onClick={() => setFilter('resolved')}
+          >
+            해결됨
+          </FilterBtn>
+        </Filters>
+      </Header>
+
+      {escalations.length === 0 ? (
+        <Empty>
+          {filter === 'unresolved' ? '미해결 에스컬레이션 없음 ✓' : '에스컬레이션 없음'}
+        </Empty>
+      ) : (
+        <Cards>
+          {escalations.map((e) => (
+            <Card key={e.id} $resolved={!!e.resolvedAt}>
+              <CardHeader>
+                <Reason>{e.reason}</Reason>
+                <Tags>
+                  <Tag $color={categoryColor(e.errorCategory)}>
+                    {e.errorCategory}
+                  </Tag>
+                  {e.stage && <Tag $color="#6b7280">stage: {e.stage}</Tag>}
+                  <Tag $color="#a855f7">attempts: {e.attempts}</Tag>
+                  {e.resolvedAt ? (
+                    <Tag $color="#22c55e">{e.resolution ?? 'resolved'}</Tag>
+                  ) : (
+                    <Tag $color="#ef4444">unresolved</Tag>
+                  )}
+                </Tags>
+              </CardHeader>
+              <Meta>
+                <span>id: {e.id}</span>
+                <span>pipeline: {e.pipelineId.slice(0, 12)}...</span>
+                <span>created: {relTime(e.createdAt)}</span>
+                {e.resolvedAt && <span>resolved: {relTime(e.resolvedAt)}</span>}
+              </Meta>
+              {e.contextSnapshot && (
+                <Snapshot>
+                  <summary>Context snapshot</summary>
+                  <pre>
+                    {(() => {
+                      try {
+                        return JSON.stringify(JSON.parse(e.contextSnapshot), null, 2);
+                      } catch {
+                        return e.contextSnapshot;
+                      }
+                    })()}
+                  </pre>
+                </Snapshot>
+              )}
+            </Card>
+          ))}
+        </Cards>
+      )}
+    </Page>
+  );
+}

frontend/app/rails/log/page.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { API_URL } from '@/lib/config';
+import { useRailsSocket } from '@/lib/useRailsSocket';
+
+interface Transition {
+  id: number;
+  pipelineId: string;
+  fromState: string;
+  toState: string;
+  eventType: string;
+  timestamp: string;
+}
+
+const Page = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 32px 36px;
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+`;
+
+const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 24px;
+  flex-wrap: wrap;
+`;
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 4px;
+  letter-spacing: -0.01em;
+`;
+
+const Subtitle = styled.p`
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+`;
+
+const Live = styled.span<{ $on: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: ${({ $on }) => ($on ? '#22c55e' : 'var(--text-secondary)')};
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: ${({ $on }) => ($on ? '#22c55e' : '#525252')};
+    box-shadow: ${({ $on }) =>
+      $on ? '0 0 0 4px rgba(34, 197, 94, 0.15)' : 'none'};
+  }
+`;
+
+const Filters = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 14px 18px;
+`;
+
+const Input = styled.input`
+  padding: 8px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: var(--font-mono);
+  min-width: 280px;
+`;
+
+const Select = styled.select`
+  padding: 8px 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: 8px;
+  font-size: 13px;
+`;
+
+const ClearBtn = styled.button`
+  padding: 8px 16px;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #5fafff;
+    color: var(--text-primary);
+  }
+`;
+
+const Counter = styled.div`
+  margin-left: auto;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+`;
+
+const LogTable = styled.div`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  overflow: hidden;
+`;
+
+const Row = styled.div<{ $type: string }>`
+  display: grid;
+  grid-template-columns: 180px 90px 130px minmax(200px, 1fr) 130px;
+  gap: 16px;
+  padding: 12px 18px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  border-bottom: 1px solid var(--border-color);
+  align-items: center;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--bg-surface);
+  }
+`;
+
+const HeaderRow = styled(Row)`
+  background: var(--bg-surface);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+  color: var(--text-secondary);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`;
+
+const Time = styled.span`
+  color: var(--text-secondary);
+`;
+
+const EventBadge = styled.span<{ $type: string }>`
+  display: inline-block;
+  padding: 3px 10px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 12px;
+  color: #fff;
+  background: ${({ $type }) => eventColor($type)};
+`;
+
+const StateChip = styled.span<{ $state: string }>`
+  display: inline-block;
+  padding: 3px 10px;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 12px;
+  background: ${({ $state }) => stateColor($state)}30;
+  color: ${({ $state }) => stateColor($state)};
+  border: 1px solid ${({ $state }) => stateColor($state)}60;
+`;
+
+const Arrow = styled.span`
+  color: var(--text-secondary);
+  margin: 0 6px;
+`;
+
+const PidChip = styled.button`
+  background: transparent;
+  border: 1px dashed var(--border-color);
+  color: var(--text-primary);
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #5fafff;
+    border-style: solid;
+  }
+`;
+
+const Empty = styled.div`
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+`;
+
+function eventColor(type: string): string {
+  switch (type) {
+    case 'REQUEST':
+      return '#8b5cf6';
+    case 'PLAN_READY':
+    case 'IMPL_DONE':
+    case 'APPROVE':
+    case 'DEPLOY_DONE':
+      return '#22c55e';
+    case 'REQUEST_CHANGES':
+      return '#f97316';
+    case 'ERROR':
+    case 'TIMEOUT':
+      return '#ef4444';
+    case 'ABORT':
+      return '#525252';
+    case 'RESUME':
+    case 'RETRY':
+      return '#5fafff';
+    default:
+      return '#6b7280';
+  }
+}
+
+function stateColor(state: string): string {
+  switch (state) {
+    case 'idle':
+      return '#6b7280';
+    case 'planning':
+    case 'implementing':
+    case 'reviewing':
+    case 'deploying':
+      return '#f97316';
+    case 'done':
+      return '#22c55e';
+    case 'escalated':
+      return '#ef4444';
+    case 'aborted':
+      return '#525252';
+    default:
+      return '#6b7280';
+  }
+}
+
+const EVENT_TYPES = [
+  '',
+  'REQUEST',
+  'PLAN_READY',
+  'IMPL_DONE',
+  'APPROVE',
+  'REQUEST_CHANGES',
+  'DEPLOY_DONE',
+  'ERROR',
+  'TIMEOUT',
+  'ABORT',
+  'RESUME',
+];
+
+export default function RailsLogPage() {
+  const [transitions, setTransitions] = useState<Transition[]>([]);
+  const [pipelineFilter, setPipelineFilter] = useState('');
+  const [eventFilter, setEventFilter] = useState('');
+  const [tick, setTick] = useState(0);
+
+  const { connected } = useRailsSocket({
+    onPipelineUpdated: () => setTick((n) => n + 1),
+  });
+
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.set('limit', '300');
+    if (pipelineFilter) params.set('pipelineId', pipelineFilter);
+    if (eventFilter) params.set('eventType', eventFilter);
+    fetch(`${API_URL}/api/rails/transitions?${params.toString()}`, {
+      credentials: 'include',
+    })
+      .then((r) => r.json())
+      .then((data: { transitions: Transition[] }) => setTransitions(data.transitions))
+      .catch(() => setTransitions([]));
+  }, [pipelineFilter, eventFilter, tick]);
+
+  const visible = useMemo(() => transitions, [transitions]);
+
+  return (
+    <Page>
+      <Header>
+        <div>
+          <Title>SIEM Log</Title>
+          <Subtitle>Rails state transitions — 결정론적 이벤트 스트림</Subtitle>
+        </div>
+        <Live $on={connected}>{connected ? 'LIVE' : 'OFFLINE'}</Live>
+      </Header>
+
+      <Filters>
+        <Input
+          placeholder="pipeline id 필터 (ULID)"
+          value={pipelineFilter}
+          onChange={(e) => setPipelineFilter(e.target.value.trim())}
+        />
+        <Select
+          value={eventFilter}
+          onChange={(e) => setEventFilter(e.target.value)}
+        >
+          {EVENT_TYPES.map((t) => (
+            <option key={t || 'all'} value={t}>
+              {t || '— all events —'}
+            </option>
+          ))}
+        </Select>
+        {(pipelineFilter || eventFilter) && (
+          <ClearBtn
+            onClick={() => {
+              setPipelineFilter('');
+              setEventFilter('');
+            }}
+          >
+            필터 초기화
+          </ClearBtn>
+        )}
+        <Counter>{visible.length} entries</Counter>
+      </Filters>
+
+      <LogTable>
+        <HeaderRow $type="">
+          <span>Timestamp</span>
+          <span>Event</span>
+          <span>Pipeline</span>
+          <span>Transition</span>
+          <span>—</span>
+        </HeaderRow>
+        {visible.length === 0 ? (
+          <Empty>No transitions matching the filters.</Empty>
+        ) : (
+          visible.map((t) => (
+            <Row key={t.id} $type={t.eventType}>
+              <Time>{new Date(t.timestamp).toLocaleString('ko-KR')}</Time>
+              <EventBadge $type={t.eventType}>{t.eventType}</EventBadge>
+              <PidChip onClick={() => setPipelineFilter(t.pipelineId)}>
+                {t.pipelineId.slice(0, 12)}...
+              </PidChip>
+              <span>
+                <StateChip $state={t.fromState}>{t.fromState}</StateChip>
+                <Arrow>→</Arrow>
+                <StateChip $state={t.toState}>{t.toState}</StateChip>
+              </span>
+              <span />
+            </Row>
+          ))
+        )}
+      </LogTable>
+    </Page>
+  );
+}

frontend/app/rails/page.tsx

@@ -9,6 +9,7 @@ import {
   type RailsSubTaskNode,
 } from '@/lib/useRailsSocket';
 import SubTaskTree from '@/components/rails/SubTaskTree';
+import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
 
 const Page = styled.main`
   display: flex;
@@ -304,6 +305,7 @@ export default function RailsPage() {
   const [projectInput, setProjectInput] = useState('');
   const [reqInput, setReqInput] = useState('');
   const [starting, setStarting] = useState(false);
+  const [detailNodeId, setDetailNodeId] = useState<string | null>(null);
 
   const { connected } = useRailsSocket({
     onPipelinesSnapshot: (next) => {
@@ -451,7 +453,7 @@ export default function RailsPage() {
               </DetailHeader>
 
               {tree.length > 0 ? (
-                <SubTaskTree tree={tree} />
+                <SubTaskTree tree={tree} onSelectNode={setDetailNodeId} />
               ) : (
                 <Empty>아직 sub-task 가 생성 안 됐어.</Empty>
               )}
@@ -461,6 +463,13 @@ export default function RailsPage() {
           )}
         </Pane>
       </Layout>
+
+      {detailNodeId && (
+        <SubTaskDetailDrawer
+          subTaskId={detailNodeId}
+          onClose={() => setDetailNodeId(null)}
+        />
+      )}
     </Page>
   );
 }

frontend/components/common/Sidebar.tsx

@@ -9,6 +9,8 @@ import { useAuth } from '@/lib/AuthContext';
 const NAV_ITEMS = [
   { href: '/', label: '대시' },
   { href: '/rails', label: '레일' },
+  { href: '/rails/log', label: '로그' },
+  { href: '/rails/escalations', label: '경보' },
   { href: '/office', label: '오피스' },
   { href: '/projects', label: '프로' },
   { href: '/activities', label: '활동' },

frontend/components/office/OfficeFloor.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useMemo } from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled, { keyframes, css } from 'styled-components';
 import type { RailsSubTaskNode, RailsPipelineSummary } from '@/lib/useRailsSocket';
+import SisterAvatar from '@/components/common/SisterAvatar';
 
 const SISTERS = [
   { key: 'harang', label: '하랑', role: 'Planner', color: '#3b82f6', accent: '#60a5fa', x: 0, y: 0 },
@@ -45,28 +46,32 @@ const Floor = styled.div`
   padding: 28px;
   min-height: 540px;
   position: relative;
+`;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 28px;
-    right: 28px;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
-    pointer-events: none;
-  }
+const Overlay = styled.svg`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+`;
 
-  &::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 28px;
-    bottom: 28px;
-    width: 1px;
-    background: linear-gradient(180deg, transparent, var(--border-color), transparent);
-    pointer-events: none;
-  }
+const flowDash = keyframes`
+  to { stroke-dashoffset: -8; }
+`;
+
+const FlowLine = styled.line<{ $flowing: boolean }>`
+  stroke: ${({ $flowing }) =>
+    $flowing ? '#5fafff' : 'rgba(95, 175, 255, 0.15)'};
+  stroke-width: 0.4;
+  stroke-dasharray: ${({ $flowing }) => ($flowing ? '1.6 1.2' : '0.6 0.6')};
+  animation: ${({ $flowing }) =>
+    $flowing
+      ? css`
+          ${flowDash} 1.2s linear infinite
+        `
+      : 'none'};
 `;
 
 const pulse = keyframes`
@@ -81,6 +86,7 @@ const blink = keyframes`
 
 const Desk = styled.button<{ $color: string; $active: boolean; $running: boolean; $selected: boolean }>`
   position: relative;
+  z-index: 1;
   background: ${({ $color }) => `${$color}10`};
   border: 1.5px solid ${({ $color, $selected }) => ($selected ? $color : `${$color}50`)};
   border-radius: 12px;
@@ -114,17 +120,15 @@ const SisterBadge = styled.div<{ $color: string }>`
   gap: 12px;
 `;
 
-const Avatar = styled.div<{ $color: string; $running: boolean }>`
-  width: 56px;
-  height: 56px;
-  border-radius: 14px;
-  background: linear-gradient(135deg, ${({ $color }) => $color}, ${({ $color }) => `${$color}80`});
+const AvatarFrame = styled.div<{ $color: string; $running: boolean }>`
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  padding: 3px;
+  background: linear-gradient(135deg, ${({ $color }) => $color}, ${({ $color }) => `${$color}60`});
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 22px;
-  font-weight: 700;
-  color: #fff;
   flex-shrink: 0;
   box-shadow: ${({ $color, $running }) =>
     $running ? `0 4px 16px ${$color}60` : `0 2px 8px ${$color}30`};
@@ -289,9 +293,66 @@ export default function OfficeFloor({
     return map;
   }, [pipelines, treesByPipeline]);
 
+  // Determine which stages are currently running for animation
+  const activeStages = useMemo(() => {
+    const set = new Set<string>();
+    for (const sister of SISTERS) {
+      const stats = statsFor(workersBySister.get(sister.key) ?? []);
+      if (stats.running > 0) set.add(sister.key);
+    }
+    return set;
+  }, [workersBySister]);
+
+  // SVG flow lines: harang→narang→darang→erang following the pipeline order
+  // Coordinates are normalized 0-100 (viewBox 100x100)
+  const POS: Record<string, { x: number; y: number }> = {
+    harang: { x: 25, y: 25 },
+    narang: { x: 75, y: 25 },
+    darang: { x: 25, y: 75 },
+    erang: { x: 75, y: 75 },
+  };
+  // Order: plan→implement→review→deploy
+  const FLOW: Array<[keyof typeof POS, keyof typeof POS]> = [
+    ['harang', 'narang'],
+    ['narang', 'darang'],
+    ['darang', 'erang'],
+  ];
+
   return (
     <Wrap>
       <Floor>
+        <Overlay viewBox="0 0 100 100" preserveAspectRatio="none">
+          <defs>
+            <marker
+              id="arrowhead"
+              markerWidth="10"
+              markerHeight="10"
+              refX="9"
+              refY="5"
+              orient="auto"
+            >
+              <polygon points="0 0, 10 5, 0 10" fill="#5fafff" />
+            </marker>
+          </defs>
+          {FLOW.map(([from, to]) => {
+            const fromActive = activeStages.has(from);
+            const toActive = activeStages.has(to);
+            const flowing = fromActive || toActive;
+            const a = POS[from]!;
+            const b = POS[to]!;
+            return (
+              <FlowLine
+                key={`${from}-${to}`}
+                x1={a.x}
+                y1={a.y}
+                x2={b.x}
+                y2={b.y}
+                $flowing={flowing}
+                markerEnd="url(#arrowhead)"
+              />
+            );
+          })}
+        </Overlay>
         {SISTERS.map((sister) => {
           const workers = workersBySister.get(sister.key) ?? [];
           const stats = statsFor(workers);
@@ -309,9 +370,9 @@ export default function OfficeFloor({
             >
               <DeskHead>
                 <SisterBadge $color={sister.color}>
-                  <Avatar $color={sister.color} $running={running}>
-                    {sister.label[0]}
-                  </Avatar>
+                  <AvatarFrame $color={sister.color} $running={running}>
+                    <SisterAvatar name={sister.key} size={54} />
+                  </AvatarFrame>
                   <NameBlock>
                     <Name>{sister.label}</Name>
                     <Role>{sister.role}</Role>

frontend/components/rails/SubTaskDetailDrawer.tsx

@@ -0,0 +1,634 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
+import { API_URL } from '@/lib/config';
+import SisterAvatar from '@/components/common/SisterAvatar';
+
+const SISTER_NAMES = new Set(['harang', 'narang', 'darang', 'erang']);
+
+function parseResult(
+  raw: string | null,
+): { text: string; ok: boolean; extra?: Record<string, unknown> } | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    if (typeof parsed === 'object' && parsed !== null) {
+      const text = typeof parsed.text === 'string' ? parsed.text : '';
+      const ok = parsed.ok !== false;
+      const { text: _t, ok: _o, ...rest } = parsed as {
+        text?: unknown;
+        ok?: unknown;
+      } & Record<string, unknown>;
+      void _t;
+      void _o;
+      return { text, ok, extra: Object.keys(rest).length > 0 ? rest : undefined };
+    }
+  } catch {
+    return { text: raw, ok: true };
+  }
+  return null;
+}
+
+interface SubTaskEvent {
+  id: number;
+  eventType: string;
+  payload: unknown;
+  timestamp: string;
+}
+
+interface ParentLink {
+  id: string;
+  role: string;
+  title: string;
+}
+
+interface ChildSummary {
+  id: string;
+  role: string;
+  agentName: string;
+  title: string;
+  state: string;
+  model: string;
+  startedAt: string | null;
+  completedAt: string | null;
+}
+
+interface SubTaskDetail {
+  id: string;
+  pipelineId: string;
+  parentId: string | null;
+  role: string;
+  agentName: string;
+  title: string;
+  description: string;
+  state: string;
+  complexityScore: number | null;
+  complexityTier: string | null;
+  model: string;
+  resultJson: string | null;
+  errorReason: string | null;
+  startedAt: string | null;
+  completedAt: string | null;
+  createdAt: string;
+  parents: ParentLink[];
+  childrenList: ChildSummary[];
+  events: SubTaskEvent[];
+}
+
+const Backdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 50;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const Drawer = styled.div`
+  width: min(640px, 95vw);
+  height: 100%;
+  background: var(--bg-main);
+  border-left: 1px solid var(--border-color);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Header = styled.div`
+  position: sticky;
+  top: 0;
+  background: var(--bg-main);
+  padding: 24px 28px 18px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const RoleBadge = styled.span<{ $role: string }>`
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-radius: 14px;
+  color: #fff;
+  background: ${({ $role }) => roleColor($role)};
+`;
+
+const Close = styled.button`
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  padding: 6px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:hover {
+    border-color: #5fafff;
+  }
+`;
+
+const Title = styled.h2`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.01em;
+  word-break: break-word;
+`;
+
+const Breadcrumb = styled.div`
+  display: flex;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  flex-wrap: wrap;
+`;
+
+const Body = styled.div`
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const SectionLabel = styled.h3`
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+  margin: 0;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+`;
+
+const Field = styled.div`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const FieldLabel = styled.span`
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+`;
+
+const FieldValue = styled.span`
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  word-break: break-all;
+`;
+
+const StateBadge = styled.span<{ $state: string }>`
+  display: inline-block;
+  padding: 3px 10px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 12px;
+  color: #fff;
+  background: ${({ $state }) => stateColor($state)};
+`;
+
+const Description = styled.p`
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-input);
+  padding: 14px 16px;
+  border-radius: 10px;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+`;
+
+const LlmOutput = styled.div<{ $ok: boolean }>`
+  background: var(--bg-input);
+  border: 1px solid ${({ $ok }) => ($ok ? 'var(--border-color)' : '#ef444460')};
+  border-left: 4px solid ${({ $ok }) => ($ok ? '#5fafff' : '#ef4444')};
+  padding: 18px 22px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.75;
+  color: var(--text-primary);
+
+  & > *:first-child { margin-top: 0; }
+  & > *:last-child { margin-bottom: 0; }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 14px;
+    font-weight: 700;
+    margin: 14px 0 6px;
+    color: var(--text-primary);
+  }
+
+  p { margin: 10px 0; }
+
+  ul, ol {
+    margin: 10px 0;
+    padding-left: 22px;
+  }
+
+  li { margin: 4px 0; }
+
+  code {
+    background: var(--bg-surface);
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    color: #5fafff;
+  }
+
+  pre {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    padding: 12px 14px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 10px 0;
+
+    code {
+      background: transparent;
+      padding: 0;
+      color: inherit;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--border-color);
+    padding-left: 12px;
+    margin: 10px 0;
+    color: var(--text-secondary);
+  }
+
+  a {
+    color: #5fafff;
+    text-decoration: none;
+    &:hover { text-decoration: underline; }
+  }
+
+  strong { font-weight: 700; }
+`;
+
+const OutputHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+`;
+
+const OutputStatusDot = styled.span<{ $ok: boolean }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${({ $ok }) => ($ok ? '#22c55e' : '#ef4444')};
+`;
+
+const ChildList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const ChildCard = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  font-size: 12px;
+`;
+
+const ChildTitle = styled.span`
+  flex: 1;
+  font-size: 12px;
+`;
+
+const Events = styled.ol`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const EventRow = styled.li`
+  display: flex;
+  gap: 12px;
+  padding: 10px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+`;
+
+const EventType = styled.span<{ $type: string }>`
+  font-weight: 700;
+  text-transform: uppercase;
+  color: ${({ $type }) => eventColor($type)};
+  flex-shrink: 0;
+  width: 90px;
+`;
+
+const EventTime = styled.span`
+  color: var(--text-secondary);
+  flex-shrink: 0;
+`;
+
+const EventPayload = styled.pre`
+  margin: 0;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  flex: 1;
+  color: var(--text-primary);
+  opacity: 0.8;
+`;
+
+const Loading = styled.div`
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+`;
+
+function roleColor(role: string): string {
+  switch (role) {
+    case 'manager':
+      return '#8b5cf6';
+    case 'principal':
+      return '#3b82f6';
+    case 'lead':
+      return '#f97316';
+    case 'junior':
+      return '#22c55e';
+    default:
+      return '#6b7280';
+  }
+}
+
+function stateColor(state: string): string {
+  switch (state) {
+    case 'done':
+      return '#22c55e';
+    case 'running':
+      return '#f97316';
+    case 'failed':
+    case 'escalated':
+      return '#ef4444';
+    case 'queued':
+      return '#6b7280';
+    default:
+      return '#525252';
+  }
+}
+
+function eventColor(type: string): string {
+  switch (type) {
+    case 'spawned':
+      return '#8b5cf6';
+    case 'started':
+      return '#f97316';
+    case 'progress':
+    case 'output':
+      return '#5fafff';
+    case 'completed':
+      return '#22c55e';
+    case 'failed':
+    case 'escalated':
+      return '#ef4444';
+    default:
+      return '#6b7280';
+  }
+}
+
+function duration(start: string | null, end: string | null): string {
+  if (!start) return '—';
+  const s = new Date(start).getTime();
+  const e = end ? new Date(end).getTime() : Date.now();
+  const ms = e - s;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(2)}s`;
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
+}
+
+interface Props {
+  subTaskId: string;
+  onClose: () => void;
+}
+
+export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
+  const [detail, setDetail] = useState<SubTaskDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const llmResult = useMemo(
+    () => (detail ? parseResult(detail.resultJson) : null),
+    [detail],
+  );
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`${API_URL}/api/rails/sub-tasks/${subTaskId}`, {
+      credentials: 'include',
+    })
+      .then((r) => r.json())
+      .then((data: SubTaskDetail) => {
+        setDetail(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [subTaskId]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  return (
+    <Backdrop onClick={onClose}>
+      <Drawer onClick={(e) => e.stopPropagation()}>
+        {loading || !detail ? (
+          <Loading>로딩 중...</Loading>
+        ) : (
+          <>
+            <Header>
+              <TopRow>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                  {SISTER_NAMES.has(detail.agentName) && (
+                    <SisterAvatar name={detail.agentName} size={40} />
+                  )}
+                  <RoleBadge $role={detail.role}>{detail.role}</RoleBadge>
+                </div>
+                <Close onClick={onClose}>닫기 ESC</Close>
+              </TopRow>
+              <Title>{detail.title}</Title>
+              {detail.parents.length > 0 && (
+                <Breadcrumb>
+                  {detail.parents.map((p, i) => (
+                    <React.Fragment key={p.id}>
+                      <span>{p.role}</span>
+                      <span>›</span>
+                      {i === detail.parents.length - 1 && <span>현재</span>}
+                    </React.Fragment>
+                  ))}
+                </Breadcrumb>
+              )}
+            </Header>
+
+            <Body>
+              <Section>
+                <SectionLabel>상태 / 모델</SectionLabel>
+                <Grid>
+                  <Field>
+                    <FieldLabel>State</FieldLabel>
+                    <FieldValue>
+                      <StateBadge $state={detail.state}>{detail.state}</StateBadge>
+                    </FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Agent</FieldLabel>
+                    <FieldValue>{detail.agentName}</FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Model</FieldLabel>
+                    <FieldValue>{detail.model || '—'}</FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Duration</FieldLabel>
+                    <FieldValue>
+                      {duration(detail.startedAt, detail.completedAt)}
+                    </FieldValue>
+                  </Field>
+                  {detail.complexityTier && (
+                    <Field>
+                      <FieldLabel>Complexity</FieldLabel>
+                      <FieldValue>
+                        {detail.complexityTier} ({detail.complexityScore})
+                      </FieldValue>
+                    </Field>
+                  )}
+                  <Field>
+                    <FieldLabel>ID</FieldLabel>
+                    <FieldValue>{detail.id.slice(0, 16)}...</FieldValue>
+                  </Field>
+                </Grid>
+              </Section>
+
+              {detail.description && (
+                <Section>
+                  <SectionLabel>설명</SectionLabel>
+                  <Description>{detail.description}</Description>
+                </Section>
+              )}
+
+              {detail.errorReason && (
+                <Section>
+                  <SectionLabel>에러</SectionLabel>
+                  <Description>{detail.errorReason}</Description>
+                </Section>
+              )}
+
+              {llmResult && llmResult.text && (
+                <Section>
+                  <SectionLabel>LLM 응답</SectionLabel>
+                  <LlmOutput $ok={llmResult.ok}>
+                    <OutputHeader>
+                      <OutputStatusDot $ok={llmResult.ok} />
+                      <span style={{ fontSize: 11, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
+                        {llmResult.ok ? 'success' : 'failed'} · {detail.model || 'default'}
+                      </span>
+                    </OutputHeader>
+                    <ReactMarkdown>{llmResult.text}</ReactMarkdown>
+                  </LlmOutput>
+                </Section>
+              )}
+
+              {llmResult && !llmResult.text && detail.resultJson && (
+                <Section>
+                  <SectionLabel>원본 결과 (텍스트 없음)</SectionLabel>
+                  <Description>{detail.resultJson}</Description>
+                </Section>
+              )}
+
+              {detail.childrenList.length > 0 && (
+                <Section>
+                  <SectionLabel>
+                    하위 노드 ({detail.childrenList.length})
+                  </SectionLabel>
+                  <ChildList>
+                    {detail.childrenList.map((c) => (
+                      <ChildCard key={c.id}>
+                        <RoleBadge $role={c.role}>{c.role}</RoleBadge>
+                        <ChildTitle>{c.title}</ChildTitle>
+                        <StateBadge $state={c.state}>{c.state}</StateBadge>
+                        <span style={{ fontSize: 10, opacity: 0.6 }}>
+                          {duration(c.startedAt, c.completedAt)}
+                        </span>
+                      </ChildCard>
+                    ))}
+                  </ChildList>
+                </Section>
+              )}
+
+              <Section>
+                <SectionLabel>이벤트 ({detail.events.length})</SectionLabel>
+                <Events>
+                  {detail.events.map((ev) => (
+                    <EventRow key={ev.id}>
+                      <EventType $type={ev.eventType}>{ev.eventType}</EventType>
+                      <EventTime>
+                        {new Date(ev.timestamp).toLocaleTimeString('ko-KR')}
+                      </EventTime>
+                      <EventPayload>
+                        {typeof ev.payload === 'string'
+                          ? ev.payload
+                          : JSON.stringify(ev.payload)}
+                      </EventPayload>
+                    </EventRow>
+                  ))}
+                </Events>
+              </Section>
+            </Body>
+          </>
+        )}
+      </Drawer>
+    </Backdrop>
+  );
+}

frontend/components/rails/SubTaskTree.tsx

@@ -3,6 +3,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import type { RailsSubTaskNode } from '@/lib/useRailsSocket';
+import SisterAvatar from '@/components/common/SisterAvatar';
+
+const SISTER_NAMES = new Set(['harang', 'narang', 'darang', 'erang']);
 
 const Wrap = styled.div`
   font-family: var(--font-sans);
@@ -13,14 +16,26 @@ const Wrap = styled.div`
   gap: 8px;
 `;
 
-const Node = styled.div<{ $state: string }>`
+const Node = styled.button<{ $state: string }>`
   padding: 12px 16px;
   border-left: 3px solid ${({ $state }) => stateColor($state)};
   background: var(--bg-surface);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   gap: 6px;
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  width: 100%;
+  transition: all 0.15s;
+
+  &:hover {
+    background: var(--bg-input);
+    border-color: #5fafff;
+  }
 `;
 
 const RoleBadge = styled.span<{ $role: string }>`
@@ -136,12 +151,21 @@ function duration(startedAt: string | null, completedAt: string | null): string
   return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
 }
 
-function NodeRow({ node }: { node: RailsSubTaskNode }) {
+function NodeRow({
+  node,
+  onSelect,
+}: {
+  node: RailsSubTaskNode;
+  onSelect?: (id: string) => void;
+}) {
   return (
     <>
-      <Node $state={node.state}>
+      <Node $state={node.state} onClick={() => onSelect?.(node.id)}>
         <Row>
           <StateDot $state={node.state} />
+          {SISTER_NAMES.has(node.agentName) && (
+            <SisterAvatar name={node.agentName} size={20} style={{ marginRight: 8 }} />
+          )}
           <RoleBadge $role={node.role}>{node.role}</RoleBadge>
           <Title>{node.title.slice(0, 100)}</Title>
           <Model>{node.model || '—'}</Model>
@@ -156,7 +180,7 @@ function NodeRow({ node }: { node: RailsSubTaskNode }) {
       {node.children.length > 0 && (
         <Children>
           {node.children.map((c) => (
-            <NodeRow key={c.id} node={c} />
+            <NodeRow key={c.id} node={c} onSelect={onSelect} />
           ))}
         </Children>
       )}
@@ -166,16 +190,17 @@ function NodeRow({ node }: { node: RailsSubTaskNode }) {
 
 interface Props {
   tree: RailsSubTaskNode[];
+  onSelectNode?: (id: string) => void;
 }
 
-export default function SubTaskTree({ tree }: Props) {
+export default function SubTaskTree({ tree, onSelectNode }: Props) {
   if (tree.length === 0) {
     return <Wrap>No sub-tasks yet.</Wrap>;
   }
   return (
     <Wrap>
       {tree.map((node) => (
-        <NodeRow key={node.id} node={node} />
+        <NodeRow key={node.id} node={node} onSelect={onSelectNode} />
       ))}
     </Wrap>
   );