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 @@
-1775809670
+1775812935

.gitignore

@@ -44,3 +44,4 @@ coverage/
 
 # TypeScript
 *.tsbuildinfo
+.claude/state/

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/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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { API_URL } from '@/lib/config';
 import {
@@ -8,18 +8,137 @@ import {
   type RailsPipelineSummary,
   type RailsSubTaskNode,
 } from '@/lib/useRailsSocket';
-import PipelineList from '@/components/rails/PipelineList';
 import SubTaskTree from '@/components/rails/SubTaskTree';
-import { LabelMeta } from '@/components/ui/base';
+import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
+
+const Page = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  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 TitleBlock = styled.div``;
+
+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 StartCard = styled.section`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const StartLabel = styled.div`
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+`;
+
+const StartRow = styled.div`
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) 1fr auto;
+  gap: 12px;
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const Input = styled.input`
+  padding: 12px 16px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: 10px;
+  font-size: 14px;
+  font-family: var(--font-sans);
+
+  &::placeholder {
+    color: var(--text-secondary);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #5fafff;
+    box-shadow: 0 0 0 3px rgba(95, 175, 255, 0.15);
+  }
+`;
+
+const StartButton = styled.button`
+  padding: 12px 28px;
+  background: #5fafff;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;
 
 const Layout = styled.div`
   display: grid;
-  grid-template-columns: minmax(320px, 380px) 1fr;
+  grid-template-columns: minmax(360px, 440px) 1fr;
-  gap: 16px;
+  gap: 24px;
-  padding: 16px;
-  min-height: calc(100vh - 120px);
 
-  @media (max-width: 900px) {
+  @media (max-width: 1100px) {
     grid-template-columns: 1fr;
   }
 `;
@@ -27,81 +146,158 @@ const Layout = styled.div`
 const Pane = styled.section`
   background: var(--bg-input);
   border: 1px solid var(--border-color);
-  border-radius: 12px;
+  border-radius: 16px;
-  padding: 16px;
+  padding: 24px 28px;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-height: 420px;
 `;
 
-const PaneHeader = styled.header`
+const PaneHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-color);
 `;
 
-const Dot = styled.span<{ $connected: boolean }>`
+const PaneTitle = styled.h2`
-  display: inline-block;
+  font-size: 12px;
-  width: 8px;
+  font-weight: 700;
-  height: 8px;
+  text-transform: uppercase;
-  border-radius: 50%;
+  letter-spacing: 0.08em;
-  margin-right: 6px;
+  color: var(--text-secondary);
-  background: ${({ $connected }) => ($connected ? '#22c55e' : '#6b7280')};
+  margin: 0;
 `;
 
-const StartBar = styled.div`
+const Counter = styled.span`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+`;
+
+const PipelineList = styled.div`
   display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const PipelineCard = styled.button<{ $selected: boolean; $state: string }>`
+  display: flex;
+  flex-direction: column;
   gap: 8px;
-  margin-bottom: 12px;
+  padding: 18px 20px;
-`;
+  background: ${({ $selected }) =>
-
+    $selected ? 'var(--bg-surface)' : 'transparent'};
-const Input = styled.input`
+  border: 1px solid ${({ $selected }) =>
-  flex: 1;
+    $selected ? '#5fafff' : 'var(--border-color)'};
-  padding: 8px 12px;
+  border-radius: 12px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  border-radius: 8px;
-  font-size: 13px;
-
-  &:focus {
-    outline: none;
-    border-color: #5fafff;
-  }
-`;
-
-const Button = styled.button`
-  padding: 8px 16px;
-  background: #5fafff;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
   cursor: pointer;
+  text-align: left;
+  color: var(--text-primary);
+  transition: all 0.15s;
 
   &:hover {
-    opacity: 0.9;
+    border-color: #5fafff;
+    background: var(--bg-surface);
   }
+`;
 
-  &:disabled {
+const CardTop = styled.div`
-    opacity: 0.5;
+  display: flex;
-    cursor: not-allowed;
+  align-items: center;
-  }
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const ProjectName = styled.span`
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+`;
+
+const StateBadge = styled.span<{ $state: string }>`
+  padding: 4px 12px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 20px;
+  color: #fff;
+  background: ${({ $state }) => stateBg($state)};
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+`;
+
+const CardMeta = styled.div`
+  display: flex;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+`;
+
+const Empty = styled.div`
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 13px;
 `;
 
 const DetailHeader = styled.div`
-  padding: 8px 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 18px;
   border-bottom: 1px solid var(--border-color);
-  margin-bottom: 12px;
 `;
 
-const Meta = styled.div`
+const DetailTitle = styled.h3`
-  display: flex;
+  font-size: 22px;
-  gap: 16px;
+  font-weight: 700;
-  font-size: 12px;
+  margin: 0;
-  opacity: 0.7;
+  letter-spacing: -0.01em;
-  margin-top: 4px;
 `;
 
+const DetailMeta = styled.div`
+  display: flex;
+  gap: 18px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+`;
+
+function stateBg(state: string): string {
+  switch (state) {
+    case 'done':
+      return '#22c55e';
+    case 'escalated':
+      return '#ef4444';
+    case 'aborted':
+      return '#525252';
+    case 'planning':
+    case 'implementing':
+    case 'reviewing':
+    case 'deploying':
+      return '#f97316';
+    default:
+      return '#525252';
+  }
+}
+
+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 RailsPage() {
   const [pipelines, setPipelines] = useState<RailsPipelineSummary[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -109,38 +305,31 @@ 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) => {
       setPipelines(next);
-      if (!selectedId && next.length > 0) {
+      setSelectedId((prev) => prev ?? (next[0]?.id ?? null));
-        setSelectedId(next[0]!.id);
-      }
     },
     onSubTasksUpdated: (pipelineId, nextTree) => {
-      if (pipelineId === selectedId) {
+      setSelectedId((prev) => {
-        setTree(nextTree);
+        if (pipelineId === prev) setTree(nextTree);
-      }
+        return prev;
+      });
     },
   });
 
-  // Initial fetch
   useEffect(() => {
     fetch(`${API_URL}/api/rails/pipelines`, { credentials: 'include' })
       .then((r) => r.json())
       .then((data: { pipelines: RailsPipelineSummary[] }) => {
         setPipelines(data.pipelines);
-        if (!selectedId && data.pipelines.length > 0) {
+        if (data.pipelines.length > 0) setSelectedId(data.pipelines[0]!.id);
-          setSelectedId(data.pipelines[0]!.id);
-        }
       })
-      .catch(() => {
+      .catch(() => undefined);
-        /* ignore */
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // When selection changes, fetch tree once
   useEffect(() => {
     if (!selectedId) return;
     fetch(`${API_URL}/api/rails/pipelines/${selectedId}/sub-tasks`, {
@@ -175,69 +364,112 @@ export default function RailsPage() {
     }
   }, [projectInput, reqInput]);
 
-  const selected = pipelines.find((p) => p.id === selectedId) ?? null;
+  const selected = useMemo(
+    () => pipelines.find((p) => p.id === selectedId) ?? null,
+    [pipelines, selectedId],
+  );
 
   return (
-    <Layout>
+    <Page>
-      <Pane>
+      <Header>
-        <PaneHeader>
+        <TitleBlock>
-          <LabelMeta>
+          <Title>Rails Orchestrator</Title>
-            <Dot $connected={connected} />
+          <Subtitle>결정론적 4자매 파이프라인 관제</Subtitle>
-            PIPELINES
+        </TitleBlock>
-          </LabelMeta>
+        <Live $on={connected}>{connected ? 'LIVE' : 'OFFLINE'}</Live>
-          <span style={{ fontSize: 11, opacity: 0.6 }}>
+      </Header>
-            {pipelines.length} total
-          </span>
-        </PaneHeader>
 
-        <StartBar>
+      <StartCard>
+        <StartLabel>새 파이프라인 시작</StartLabel>
+        <StartRow>
           <Input
-            placeholder="project"
+            placeholder="프로젝트 이름"
             value={projectInput}
             onChange={(e) => setProjectInput(e.target.value)}
           />
-        </StartBar>
-        <StartBar>
           <Input
-            placeholder="requirements..."
+            placeholder="요구사항 (예: TODO 앱 MVP, 로그인 추가)"
             value={reqInput}
             onChange={(e) => setReqInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') void handleStart();
+            }}
           />
-          <Button disabled={starting || !projectInput} onClick={handleStart}>
+          <StartButton
-            Start
+            disabled={starting || !projectInput.trim()}
-          </Button>
+            onClick={handleStart}
-        </StartBar>
+          >
+            {starting ? '시작 중...' : 'Start'}
+          </StartButton>
+        </StartRow>
+      </StartCard>
 
-        <PipelineList
+      <Layout>
-          pipelines={pipelines}
+        <Pane>
-          selectedId={selectedId}
+          <PaneHeader>
-          onSelect={setSelectedId}
+            <PaneTitle>Pipelines</PaneTitle>
+            <Counter>{pipelines.length}건</Counter>
+          </PaneHeader>
+
+          {pipelines.length === 0 ? (
+            <Empty>파이프라인이 없어. 위에서 시작해봐.</Empty>
+          ) : (
+            <PipelineList>
+              {pipelines.map((p) => (
+                <PipelineCard
+                  key={p.id}
+                  $selected={p.id === selectedId}
+                  $state={p.currentState}
+                  onClick={() => setSelectedId(p.id)}
+                >
+                  <CardTop>
+                    <ProjectName>{p.projectName}</ProjectName>
+                    <StateBadge $state={p.currentState}>
+                      {p.currentState}
+                    </StateBadge>
+                  </CardTop>
+                  <CardMeta>
+                    <span>{p.id.slice(0, 12)}</span>
+                    <span>·</span>
+                    <span>{relTime(p.updatedAt)}</span>
+                  </CardMeta>
+                </PipelineCard>
+              ))}
+            </PipelineList>
+          )}
+        </Pane>
+
+        <Pane>
+          {selected ? (
+            <>
+              <DetailHeader>
+                <PaneTitle>Pipeline Detail</PaneTitle>
+                <DetailTitle>{selected.projectName}</DetailTitle>
+                <DetailMeta>
+                  <span>{selected.id}</span>
+                  <span>state: {selected.currentState}</span>
+                  <span>{new Date(selected.createdAt).toLocaleString('ko-KR')}</span>
+                </DetailMeta>
+              </DetailHeader>
+
+              {tree.length > 0 ? (
+                <SubTaskTree tree={tree} onSelectNode={setDetailNodeId} />
+              ) : (
+                <Empty>아직 sub-task 가 생성 안 됐어.</Empty>
+              )}
+            </>
+          ) : (
+            <Empty>왼쪽에서 파이프라인을 선택해.</Empty>
+          )}
+        </Pane>
+      </Layout>
+
+      {detailNodeId && (
+        <SubTaskDetailDrawer
+          subTaskId={detailNodeId}
+          onClose={() => setDetailNodeId(null)}
         />
-      </Pane>
+      )}
-
+    </Page>
-      <Pane>
-        {selected ? (
-          <>
-            <DetailHeader>
-              <LabelMeta>PIPELINE DETAIL</LabelMeta>
-              <div style={{ fontWeight: 700, fontSize: 18, marginTop: 4 }}>
-                {selected.projectName}
-              </div>
-              <Meta>
-                <span>id: {selected.id}</span>
-                <span>state: {selected.currentState}</span>
-                <span>created: {new Date(selected.createdAt).toLocaleString()}</span>
-              </Meta>
-            </DetailHeader>
-
-            <SubTaskTree tree={tree} />
-          </>
-        ) : (
-          <div style={{ opacity: 0.6, padding: 40, textAlign: 'center' }}>
-            Select a pipeline to view its sub-task tree.
-          </div>
-        )}
-      </Pane>
-    </Layout>
   );
 }

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

@@ -0,0 +1,427 @@
+'use client';
+
+import React, { useMemo } from 'react';
+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 },
+  { key: 'narang', label: '나랑', role: 'Generator', color: '#22c55e', accent: '#4ade80', x: 1, y: 0 },
+  { key: 'darang', label: '다랑', role: 'Evaluator', color: '#f43f5e', accent: '#fb7185', x: 0, y: 1 },
+  { key: 'erang', label: '이랑', role: 'Infra', color: '#f97316', accent: '#fb923c', x: 1, y: 1 },
+] as const;
+
+type SisterKey = (typeof SISTERS)[number]['key'];
+
+interface OfficeFloorProps {
+  pipelines: RailsPipelineSummary[];
+  treesByPipeline: Map<string, RailsSubTaskNode[]>;
+  selectedSister: SisterKey | null;
+  onSelectSister: (key: SisterKey | null) => void;
+}
+
+interface SisterStats {
+  total: number;
+  running: number;
+  done: number;
+  failed: number;
+  models: Set<string>;
+}
+
+const Wrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Floor = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 24px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  padding: 28px;
+  min-height: 540px;
+  position: relative;
+`;
+
+const Overlay = styled.svg`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+`;
+
+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`
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); }
+  50% { box-shadow: 0 0 0 8px rgba(255, 165, 0, 0); }
+`;
+
+const blink = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+
+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;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 220px;
+  text-align: left;
+  color: var(--text-primary);
+  animation: ${({ $running }) => ($running ? pulse : 'none')} 1.6s ease-in-out infinite;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: ${({ $color }) => $color};
+  }
+`;
+
+const DeskHead = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const SisterBadge = styled.div<{ $color: string }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+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;
+  flex-shrink: 0;
+  box-shadow: ${({ $color, $running }) =>
+    $running ? `0 4px 16px ${$color}60` : `0 2px 8px ${$color}30`};
+`;
+
+const NameBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Name = styled.span`
+  font-size: 18px;
+  font-weight: 700;
+`;
+
+const Role = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const StatusDot = styled.div<{ $running: boolean }>`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: ${({ $running }) => ($running ? '#22c55e' : '#525252')};
+  flex-shrink: 0;
+  ${({ $running }) =>
+    $running &&
+    `
+    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
+    animation: ${blink} 1.4s ease-in-out infinite;
+  `}
+`;
+
+const Stats = styled.div`
+  display: flex;
+  gap: 18px;
+  padding-top: 12px;
+  border-top: 1px dashed var(--border-color);
+`;
+
+const Stat = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const StatNum = styled.span`
+  font-family: var(--font-mono);
+  font-size: 20px;
+  font-weight: 700;
+`;
+
+const StatLabel = styled.span`
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+
+const Workers = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 28px;
+`;
+
+const Worker = styled.div<{ $role: string; $state: string }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 600;
+  background: ${({ $role }) => roleColor($role)}20;
+  border: 1px solid ${({ $role }) => roleColor($role)}60;
+  color: ${({ $role }) => roleColor($role)};
+  ${({ $state }) =>
+    $state === 'running' &&
+    `animation: ${blink} 1.2s ease-in-out infinite;`}
+`;
+
+const Empty = styled.span`
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-style: italic;
+`;
+
+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 flattenWorkers(tree: RailsSubTaskNode[]): RailsSubTaskNode[] {
+  const out: RailsSubTaskNode[] = [];
+  const walk = (nodes: RailsSubTaskNode[]) => {
+    for (const n of nodes) {
+      out.push(n);
+      if (n.children?.length) walk(n.children);
+    }
+  };
+  walk(tree);
+  return out;
+}
+
+function statsFor(workers: RailsSubTaskNode[]): SisterStats {
+  const stats: SisterStats = {
+    total: workers.length,
+    running: 0,
+    done: 0,
+    failed: 0,
+    models: new Set(),
+  };
+  for (const w of workers) {
+    if (w.state === 'running' || w.state === 'queued') stats.running += 1;
+    else if (w.state === 'done') stats.done += 1;
+    else if (w.state === 'failed' || w.state === 'escalated') stats.failed += 1;
+    if (w.model) stats.models.add(w.model);
+  }
+  return stats;
+}
+
+export default function OfficeFloor({
+  pipelines,
+  treesByPipeline,
+  selectedSister,
+  onSelectSister,
+}: OfficeFloorProps) {
+  // Aggregate workers per sister across active pipelines
+  const workersBySister = useMemo(() => {
+    const map = new Map<SisterKey, RailsSubTaskNode[]>();
+    for (const sister of SISTERS) map.set(sister.key, []);
+
+    const activePipelines = pipelines.filter(
+      (p) => !['done', 'aborted'].includes(p.currentState),
+    );
+    const sourcePipelines = activePipelines.length > 0 ? activePipelines : pipelines.slice(0, 4);
+
+    for (const pipeline of sourcePipelines) {
+      const tree = treesByPipeline.get(pipeline.id) ?? [];
+      const flat = flattenWorkers(tree);
+      for (const node of flat) {
+        const sisterKey = node.agentName as SisterKey;
+        const target = map.get(sisterKey);
+        if (target) target.push(node);
+      }
+    }
+    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);
+          const running = stats.running > 0;
+          const isSelected = selectedSister === sister.key;
+
+          return (
+            <Desk
+              key={sister.key}
+              $color={sister.color}
+              $active={stats.total > 0}
+              $running={running}
+              $selected={isSelected}
+              onClick={() => onSelectSister(isSelected ? null : sister.key)}
+            >
+              <DeskHead>
+                <SisterBadge $color={sister.color}>
+                  <AvatarFrame $color={sister.color} $running={running}>
+                    <SisterAvatar name={sister.key} size={54} />
+                  </AvatarFrame>
+                  <NameBlock>
+                    <Name>{sister.label}</Name>
+                    <Role>{sister.role}</Role>
+                  </NameBlock>
+                </SisterBadge>
+                <StatusDot $running={running} />
+              </DeskHead>
+
+              <Workers>
+                {workers.length === 0 ? (
+                  <Empty>대기 중</Empty>
+                ) : (
+                  workers.slice(0, 12).map((w) => (
+                    <Worker key={w.id} $role={w.role} $state={w.state}>
+                      {w.role}
+                    </Worker>
+                  ))
+                )}
+                {workers.length > 12 && (
+                  <Worker $role="" $state="">
+                    +{workers.length - 12}
+                  </Worker>
+                )}
+              </Workers>
+
+              <Stats>
+                <Stat>
+                  <StatNum>{stats.total}</StatNum>
+                  <StatLabel>workers</StatLabel>
+                </Stat>
+                <Stat>
+                  <StatNum style={{ color: '#22c55e' }}>{stats.running}</StatNum>
+                  <StatLabel>active</StatLabel>
+                </Stat>
+                <Stat>
+                  <StatNum>{stats.done}</StatNum>
+                  <StatLabel>done</StatLabel>
+                </Stat>
+                {stats.failed > 0 && (
+                  <Stat>
+                    <StatNum style={{ color: '#ef4444' }}>{stats.failed}</StatNum>
+                    <StatLabel>fail</StatLabel>
+                  </Stat>
+                )}
+              </Stats>
+            </Desk>
+          );
+        })}
+      </Floor>
+    </Wrap>
+  );
+}

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,40 +3,62 @@
 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-mono, monospace);
+  font-family: var(--font-sans);
   font-size: 13px;
   line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;
 
-const Node = styled.div<{ $state: string }>`
+const Node = styled.button<{ $state: string }>`
-  padding: 4px 8px;
+  padding: 12px 16px;
   border-left: 3px solid ${({ $state }) => stateColor($state)};
-  margin: 2px 0;
   background: var(--bg-surface);
-  border-radius: 4px;
+  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 }>`
   display: inline-block;
-  padding: 1px 8px;
+  padding: 3px 10px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
-  border-radius: 10px;
+  letter-spacing: 0.04em;
+  border-radius: 12px;
   color: #fff;
-  margin-right: 8px;
+  margin-right: 10px;
   background: ${({ $role }) => roleColor($role)};
 `;
 
 const StateDot = styled.span<{ $state: string }>`
   display: inline-block;
-  width: 8px;
+  width: 10px;
-  height: 8px;
+  height: 10px;
   border-radius: 50%;
-  margin-right: 8px;
+  margin-right: 12px;
   background: ${({ $state }) => stateColor($state)};
+  flex-shrink: 0;
   animation: ${({ $state }) => ($state === 'running' ? 'pulse 1.2s infinite' : 'none')};
 
   @keyframes pulse {
@@ -46,24 +68,45 @@ const StateDot = styled.span<{ $state: string }>`
 `;
 
 const Model = styled.span`
-  font-size: 10px;
+  font-size: 11px;
-  opacity: 0.6;
+  opacity: 0.55;
-  margin-left: 8px;
+  margin-left: 12px;
+  font-family: var(--font-mono);
 `;
 
 const Duration = styled.span`
-  font-size: 10px;
+  font-size: 11px;
-  opacity: 0.6;
+  opacity: 0.55;
   margin-left: auto;
+  font-family: var(--font-mono);
+`;
+
+const Title = styled.span`
+  font-size: 13px;
+  font-weight: 500;
+`;
+
+const Meta = styled.span`
+  font-size: 11px;
+  opacity: 0.55;
+  margin-left: 22px;
+  font-family: var(--font-mono);
 `;
 
 const Row = styled.div`
   display: flex;
   align-items: center;
+  gap: 4px;
 `;
 
 const Children = styled.div`
-  margin-left: 24px;
+  margin-left: 28px;
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-left: 1px dashed var(--border-color);
+  padding-left: 16px;
 `;
 
 function stateColor(state: string): string {
@@ -108,29 +151,36 @@ 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>
-          <span>{node.title.slice(0, 80)}</span>
+          <Title>{node.title.slice(0, 100)}</Title>
           <Model>{node.model || '—'}</Model>
           <Duration>{duration(node.startedAt, node.completedAt)}</Duration>
         </Row>
         {node.complexityTier && (
-          <Row>
+          <Meta>
-            <span style={{ marginLeft: 22, fontSize: 10, opacity: 0.6 }}>
+            complexity: {node.complexityTier} ({node.complexityScore})
-              complexity: {node.complexityTier} ({node.complexityScore})
+          </Meta>
-            </span>
-          </Row>
         )}
       </Node>
       {node.children.length > 0 && (
         <Children>
           {node.children.map((c) => (
-            <NodeRow key={c.id} node={c} />
+            <NodeRow key={c.id} node={c} onSelect={onSelect} />
           ))}
         </Children>
       )}
@@ -140,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>
   );