fix: wire office dashboard to runtime state

2026-04-08 13:49:12 +09:00
parent bb36380c92
commit 88547e9464
10 changed files with 1166 additions and 631 deletions
--- a/backend/src/dashboard/dashboard.service.ts
+++ b/backend/src/dashboard/dashboard.service.ts
@@ -69,13 +69,23 @@ function nodeStateFromEvidence(params: {
  return 'idle';
 }

+function sanitizeSummary(text?: string | null) {
+  const raw = text?.trim();
+  if (!raw) return null;
+  if (/stderr:/i.test(raw) || /command not found/i.test(raw) || /bash:\s*line/i.test(raw)) {
+    return '내부 작업 중 오류가 발생했어. 자세한 시스템 로그는 관리자 로그에서 확인해.';
+  }
+  if (/^ssh failed/i.test(raw) || /ssh connection failed/i.test(raw)) {
+    return '원격 노드 연결에 실패했어.';
+  }
+  return raw;
+}
+
 function summarizeActivity(
  activity?: ActivityRecord | null,
  fallback = 'NO EVENT',
 ) {
-  return (
-    activity?.detail?.trim() || activity?.action?.replace(/_/g, ' ') || fallback
-  );
+  return sanitizeSummary(activity?.detail) || activity?.action?.replace(/_/g, ' ') || fallback;
 }

 function parseQaSummary(content: string): string {
--- a/backend/src/sisters/sister-detail.service.ts
+++ b/backend/src/sisters/sister-detail.service.ts
@@ -67,7 +67,7 @@ export class SisterDetailService {
        sister.ip,
        sister.user,
        sshKeyPath,
-        'SESSION_DIR=~/.hermes/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
+        'SESSION_DIR=~/.hermes/agents/main/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/agents/main/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
      );

      const lines = result.stdout
--- a/backend/src/sisters/sisters.controller.ts
+++ b/backend/src/sisters/sisters.controller.ts
@@ -1,10 +1,19 @@
-import { Controller, Get, Param, Res } from '@nestjs/common';
+import {
+  Body,
+  Controller,
+  Get,
+  Param,
+  Post,
+  Res,
+  UseGuards,
+} from '@nestjs/common';
 import type { Response } from 'express';
 import { SistersService } from './sisters.service';
 import { SisterDetailService } from './sister-detail.service';
 import { SisterNamePipe } from '../common/sister-name.pipe';
 import type { SisterName } from '../common/sister-name.pipe';
 import { AvatarService } from './avatar.service';
+import { JwtGuard } from '../auth/jwt.guard';

@Controller('api/sisters')
 export class SistersController {
@@ -14,11 +23,30 @@ export class SistersController {
    private readonly avatarService: AvatarService,
  ) {}

+  @Get('runtime')
+  async getSistersRuntime() {
+    return this.sistersService.getAllSistersRuntime();
+  }
+
  @Get()
  async getSistersStatus() {
    return this.sistersService.getAllSistersStatus();
  }

+  @Get(':name/runtime')
+  async getSisterRuntime(@Param('name', SisterNamePipe) name: SisterName) {
+    return this.sistersService.getSisterRuntime(name);
+  }
+
+  @UseGuards(JwtGuard)
+  @Post(':name/chat')
+  async chatWithSister(
+    @Param('name', SisterNamePipe) name: SisterName,
+    @Body('message') message: string,
+  ) {
+    return this.sistersService.sendChatMessage(name, message);
+  }
+
  @Get(':name/system')
  async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sistersService.getSystemInfo(name);
--- a/backend/src/sisters/sisters.module.ts
+++ b/backend/src/sisters/sisters.module.ts
@@ -1,16 +1,17 @@
 import { Module } from '@nestjs/common';
 import { SistersController } from './sisters.controller';
 import { SistersService } from './sisters.service';
-import { SisterDetailService } from './sister-detail.service';
 import { SshService } from './ssh.service';
 import { PrismaModule } from '../prisma/prisma.module';
-import { ConfigModule } from '@nestjs/config';
+import { SisterDetailService } from './sister-detail.service';
 import { AvatarService } from './avatar.service';
+import { ActivityModule } from '../activity/activity.module';
+import { AuthModule } from '../auth/auth.module';

@Module({
-  imports: [PrismaModule, ConfigModule],
+  imports: [PrismaModule, ActivityModule, AuthModule],
  controllers: [SistersController],
-  providers: [SistersService, SisterDetailService, SshService, AvatarService],
-  exports: [SistersService, SisterDetailService, SshService, AvatarService],
+  providers: [SistersService, SshService, SisterDetailService, AvatarService],
+  exports: [SistersService, SshService, SisterDetailService, AvatarService],
 })
 export class SistersModule {}
--- a/backend/src/sisters/sisters.service.ts
+++ b/backend/src/sisters/sisters.service.ts
@@ -1,9 +1,48 @@
-import { Injectable, Logger, Optional } from '@nestjs/common';
+import {
+  BadRequestException,
+  Injectable,
+  Logger,
+  Optional,
+} from '@nestjs/common';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
 import { ConfigService } from '@nestjs/config';
 import { ActivityService } from '../activity/activity.service';

+export type RuntimeState =
+  | 'idle'
+  | 'thinking'
+  | 'tool_calling'
+  | 'speaking'
+  | 'error';
+
+export interface RuntimeMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  ts: string | null;
+}
+
+export interface RuntimeSubagent {
+  name: string;
+  state: RuntimeState;
+  updatedAt: number | null;
+  currentTask: string | null;
+  sessionLabel: string | null;
+}
+
+export interface SisterRuntimeSnapshot {
+  name: string;
+  gatewayConnected: boolean;
+  mainState: RuntimeState;
+  currentTask: string | null;
+  activeSessionLabel: string | null;
+  activeSessionUpdatedAt: number | null;
+  controlSessionKey: string | null;
+  recentMessages: RuntimeMessage[];
+  subagents: RuntimeSubagent[];
+}
+
 export interface SisterStatus {
  id: number;
  name: string;
@@ -13,6 +52,28 @@ export interface SisterStatus {
  status: 'online' | 'offline' | 'working' | 'unknown';
  lastSeen: Date | null;
  currentTask: string | null;
+  liveState: RuntimeState;
+  activeSessionLabel: string | null;
+  gatewayConnected: boolean;
+  subagents: RuntimeSubagent[];
+}
+
+interface RuntimeProbeResult {
+  gatewayConnected?: boolean;
+  mainState?: RuntimeState;
+  currentTask?: string | null;
+  activeSessionLabel?: string | null;
+  activeSessionUpdatedAt?: number | null;
+  controlSessionKey?: string | null;
+  recentMessages?: RuntimeMessage[];
+  subagents?: RuntimeSubagent[];
+}
+
+interface ChatSendResult {
+  ok: boolean;
+  status: string;
+  reply: string;
+  raw?: string;
 }

 const SISTER_ROLES: Record<string, string> = {
@@ -22,6 +83,17 @@ const SISTER_ROLES: Record<string, string> = {
  erang: 'Infra Manager',
 };

+function runtimeStateToStatus(
+  state: RuntimeState,
+  connected: boolean,
+): 'online' | 'offline' | 'working' {
+  if (!connected || state === 'error') return 'offline';
+  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking') {
+    return 'working';
+  }
+  return 'online';
+}
+
@Injectable()
 export class SistersService {
  private readonly logger = new Logger(SistersService.name);
@@ -34,7 +106,7 @@ export class SistersService {
  ) {}

  async getAllSistersStatus(): Promise<SisterStatus[]> {
-    const sisters = await this.prisma.sisterConfig.findMany();
+    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
    if (!sshKeyPath) {
      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
@@ -49,19 +121,85 @@ export class SistersService {
        return result.value;
      }
      const sister = sisters[index];
-      return {
-        id: sister.id,
-        name: sister.name,
-        user: sister.user,
-        lxcId: sister.lxcId,
-        role: SISTER_ROLES[sister.name] ?? 'Unknown',
-        status: 'offline' as const,
-        lastSeen: sister.lastSeen,
-        currentTask: null,
-      };
+      return this.buildOfflineStatus(sister);
    });
  }

+  async getAllSistersRuntime(): Promise<SisterRuntimeSnapshot[]> {
+    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
+    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
+    if (!sshKeyPath) {
+      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
+    }
+
+    const results = await Promise.allSettled(
+      sisters.map(async (sister) => {
+        const runtime = await this.probeRuntime(sister, sshKeyPath, true);
+        return this.withRuntimeName(sister.name, runtime);
+      }),
+    );
+
+    return results.map((result, index) => {
+      if (result.status === 'fulfilled') return result.value;
+      return this.buildRuntimeFallback(sisters[index].name);
+    });
+  }
+
+  async getSisterRuntime(name: string): Promise<SisterRuntimeSnapshot> {
+    const sister = await this.findByName(name);
+    if (!sister) throw new Error(`Sister ${name} not found`);
+
+    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
+    if (!sshKeyPath) {
+      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
+    }
+
+    try {
+      const runtime = await this.probeRuntime(sister, sshKeyPath, true);
+      return this.withRuntimeName(sister.name, runtime);
+    } catch {
+      return this.buildRuntimeFallback(sister.name);
+    }
+  }
+
+  async sendChatMessage(name: string, message: string) {
+    const trimmed = message.trim();
+    if (!trimmed) {
+      throw new BadRequestException('message is required');
+    }
+
+    const sister = await this.findByName(name);
+    if (!sister) throw new Error(`Sister ${name} not found`);
+
+    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
+    if (!sshKeyPath) {
+      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
+    }
+
+    const sendResult = await this.ssh.executeCommand(
+      sister.ip,
+      sister.user,
+      sshKeyPath,
+      this.buildAgentSendCommand(trimmed),
+    );
+
+    const parsed = this.parseRemoteJson<ChatSendResult>(sendResult.stdout);
+    if (!parsed?.ok) {
+      throw new Error(parsed?.raw || 'Failed to send message to sister runtime');
+    }
+
+    const runtime = await this.getSisterRuntime(name).catch(() =>
+      this.buildRuntimeFallback(name),
+    );
+
+    return {
+      ok: true,
+      reply: parsed.reply,
+      status: parsed.status,
+      runtime,
+    };
+  }
+
  async findByName(name: string) {
    return this.prisma.sisterConfig.findUnique({ where: { name } });
  }
@@ -138,21 +276,17 @@ export class SistersService {
    sshKeyPath: string,
  ): Promise<SisterStatus> {
    try {
-      const result = await this.ssh.executeCommand(
-        sister.ip,
-        sister.user,
-        sshKeyPath,
-        'if systemctl --user is-active hermes-agent >/dev/null 2>&1; then echo active; elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then echo active; elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then echo active; elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then echo active; else echo inactive; fi',
-      );
-
-      const isActive = result.stdout.trim() === 'active';
-      const status: 'online' | 'offline' = isActive ? 'online' : 'offline';
+      const runtime = await this.probeRuntime(sister, sshKeyPath, false);
+      const gatewayConnected = Boolean(runtime.gatewayConnected);
+      const liveState = runtime.mainState ?? (gatewayConnected ? 'idle' : 'error');
+      const status = runtimeStateToStatus(liveState, gatewayConnected);
      const prevStatus = sister.status;
      const now = new Date();
+      const lastSeen = gatewayConnected ? now : sister.lastSeen;

      await this.prisma.sisterConfig.update({
        where: { id: sister.id },
-        data: { lastSeen: isActive ? now : sister.lastSeen, status },
+        data: { lastSeen, status },
      });

      if (prevStatus !== status && this.activity) {
@@ -172,22 +306,448 @@ export class SistersService {
        lxcId: sister.lxcId,
        role: SISTER_ROLES[sister.name] ?? 'Unknown',
        status,
-        lastSeen: isActive ? now : sister.lastSeen,
-        currentTask: null,
+        lastSeen,
+        currentTask: runtime.currentTask ?? null,
+        liveState,
+        activeSessionLabel: runtime.activeSessionLabel ?? null,
+        gatewayConnected,
+        subagents: runtime.subagents ?? [],
      };
    } catch {
      this.logger.warn(`Failed to check status for ${sister.name}`);
+      return this.buildOfflineStatus(sister);
+    }
+  }
+
+  private async probeRuntime(
+    sister: { name: string; ip: string; user: string },
+    sshKeyPath: string,
+    includeMessages: boolean,
+  ): Promise<RuntimeProbeResult> {
+    const result = await this.ssh.executeCommand(
+      sister.ip,
+      sister.user,
+      sshKeyPath,
+      this.buildRuntimeProbeCommand(includeMessages),
+    );
+
+    const parsed = this.parseRemoteJson<RuntimeProbeResult>(result.stdout);
+    if (parsed) {
+      return parsed;
+    }
+
+    const legacy = this.parseLegacyRuntimeResult(result.stdout);
+    if (legacy) {
+      return legacy;
+    }
+
+    throw new Error(`Runtime probe returned invalid JSON for ${sister.name}`);
+  }
+
+  private withRuntimeName(
+    name: string,
+    runtime: RuntimeProbeResult,
+  ): SisterRuntimeSnapshot {
+    return {
+      name,
+      gatewayConnected: Boolean(runtime.gatewayConnected),
+      mainState: runtime.mainState ?? 'error',
+      currentTask: runtime.currentTask ?? null,
+      activeSessionLabel: runtime.activeSessionLabel ?? null,
+      activeSessionUpdatedAt: runtime.activeSessionUpdatedAt ?? null,
+      controlSessionKey: runtime.controlSessionKey ?? null,
+      recentMessages: runtime.recentMessages ?? [],
+      subagents: runtime.subagents ?? [],
+    };
+  }
+
+  private buildOfflineStatus(sister: {
+    id: number;
+    name: string;
+    user: string;
+    lxcId: number;
+    lastSeen: Date | null;
+  }): SisterStatus {
+    return {
+      id: sister.id,
+      name: sister.name,
+      user: sister.user,
+      lxcId: sister.lxcId,
+      role: SISTER_ROLES[sister.name] ?? 'Unknown',
+      status: 'offline',
+      lastSeen: sister.lastSeen,
+      currentTask: null,
+      liveState: 'error',
+      activeSessionLabel: null,
+      gatewayConnected: false,
+      subagents: [],
+    };
+  }
+
+  private buildRuntimeFallback(name: string): SisterRuntimeSnapshot {
+    return {
+      name,
+      gatewayConnected: false,
+      mainState: 'error',
+      currentTask: null,
+      activeSessionLabel: null,
+      activeSessionUpdatedAt: null,
+      controlSessionKey: null,
+      recentMessages: [],
+      subagents: [],
+    };
+  }
+
+  private parseRemoteJson<T>(stdout: string): T | null {
+    const trimmed = stdout.trim();
+    const start = trimmed.indexOf('{');
+    const end = trimmed.lastIndexOf('}');
+    if (start === -1 || end === -1 || end <= start) return null;
+
+    try {
+      return JSON.parse(trimmed.slice(start, end + 1)) as T;
+    } catch {
+      return null;
+    }
+  }
+
+  private parseLegacyRuntimeResult(stdout: string): RuntimeProbeResult | null {
+    const trimmed = stdout.trim();
+    if (trimmed === 'active') {
      return {
-        id: sister.id,
-        name: sister.name,
-        user: sister.user,
-        lxcId: sister.lxcId,
-        role: SISTER_ROLES[sister.name] ?? 'Unknown',
-        status: 'offline',
-        lastSeen: sister.lastSeen,
+        gatewayConnected: true,
+        mainState: 'idle',
        currentTask: null,
+        activeSessionLabel: null,
+        activeSessionUpdatedAt: null,
+        controlSessionKey: null,
+        recentMessages: [],
+        subagents: [],
      };
    }
+
+    if (trimmed === 'inactive') {
+      return {
+        gatewayConnected: false,
+        mainState: 'error',
+        currentTask: null,
+        activeSessionLabel: null,
+        activeSessionUpdatedAt: null,
+        controlSessionKey: null,
+        recentMessages: [],
+        subagents: [],
+      };
+    }
+
+    return null;
+  }
+
+  private buildRuntimeProbeCommand(includeMessages: boolean): string {
+    return `
+GATEWAY_CONNECTED=0
+if systemctl --user is-active hermes-agent >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
+elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
+elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
+elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
+elif pgrep -f "openclaw.*gateway|openclaw.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; fi
+export GATEWAY_CONNECTED
+if command -v python3 >/dev/null 2>&1; then
+python3 - <<'PY'
+import json
+import os
+from pathlib import Path
+
+INCLUDE_MESSAGES = ${includeMessages ? 'True' : 'False'}
+MESSAGE_LIMIT = ${includeMessages ? '12' : '0'}
+
+
+def pick_base():
+    for name in ('.hermes', '.openclaw'):
+        candidate = Path.home() / name
+        if candidate.exists():
+            return candidate
+    return None
+
+
+def load_json(path: Path):
+    if not path.exists():
+        return {}
+    try:
+        return json.loads(path.read_text(errors='ignore'))
+    except Exception:
+        return {}
+
+
+def normalize_role(role):
+    if role in ('user', 'assistant'):
+        return role
+    if role in ('tool', 'toolResult'):
+        return 'tool'
+    return None
+
+
+def extract_text(content):
+    if isinstance(content, str):
+        return content.strip()
+    parts = []
+    if isinstance(content, list):
+        for item in content:
+            if not isinstance(item, dict):
+                continue
+            item_type = item.get('type')
+            text = item.get('text') or item.get('input') or item.get('content') or ''
+            if item_type in ('text', 'input_text', 'output_text') and text:
+                parts.append(str(text).strip())
+            elif item_type == 'tool_call':
+                tool_name = item.get('name') or item.get('toolName') or 'tool'
+                parts.append(f'[{tool_name}]')
+    return ' '.join(part for part in parts if part).strip()
+
+
+def compact(text, limit=160):
+    normalized = ' '.join((text or '').split())
+    if not normalized:
+        return ''
+    if normalized.startswith('A new session was started via /new or /reset.'):
+        return ''
+    if len(normalized) <= limit:
+        return normalized
+    return normalized[: limit - 1] + '…'
+
+
+def read_recent_messages(session_file, limit):
+    if not session_file or limit <= 0:
+        return []
+    path = Path(session_file)
+    if not path.exists():
+        return []
+
+    out = []
+    try:
+        lines = path.read_text(errors='ignore').splitlines()
+    except Exception:
+        return []
+
+    for line in reversed(lines):
+        try:
+            payload = json.loads(line)
+        except Exception:
+            continue
+        if payload.get('type') != 'message':
+            continue
+        message = payload.get('message') or {}
+        role = normalize_role(message.get('role'))
+        if not role:
+            continue
+        content = compact(extract_text(message.get('content')))
+        if not content:
+            continue
+        out.append(
+            {
+                'id': str(payload.get('id') or ''),
+                'role': role,
+                'content': content,
+                'ts': payload.get('timestamp') or message.get('timestamp'),
+            }
+        )
+        if len(out) >= limit:
+            break
+
+    out.reverse()
+    return out
+
+
+def pick_session(index, prefer_key=None):
+    if not isinstance(index, dict) or not index:
+        return None, None
+    if prefer_key and prefer_key in index:
+        return prefer_key, index.get(prefer_key)
+    items = sorted(index.items(), key=lambda item: item[1].get('updatedAt') or 0, reverse=True)
+    return items[0]
+
+
+def get_label(entry):
+    if not isinstance(entry, dict):
+        return None
+    return entry.get('displayName') or (entry.get('origin') or {}).get('label') or entry.get('lastTo')
+
+
+def latest_user_text(messages):
+    for item in reversed(messages):
+        if item.get('role') == 'user':
+            return item.get('content')
+    return None
+
+
+def age_minutes(updated_at):
+    if not updated_at:
+        return 10 ** 9
+    return max(0, (int(__import__('time').time() * 1000) - int(updated_at)) // 60000)
+
+
+def state_from(entry, messages, connected):
+    if not connected:
+        return 'error'
+    if not isinstance(entry, dict):
+        return 'idle'
+
+    status = entry.get('status') or ''
+    last_role = messages[-1]['role'] if messages else None
+    age_min = age_minutes(entry.get('updatedAt'))
+
+    if status == 'running':
+        if last_role == 'tool':
+            return 'tool_calling'
+        if last_role == 'assistant':
+            return 'speaking'
+        return 'thinking'
+
+    if age_min <= 2:
+        if last_role == 'assistant':
+            return 'speaking'
+        if last_role == 'tool':
+            return 'tool_calling'
+        if last_role == 'user':
+            return 'thinking'
+
+    if age_min <= 15 and last_role == 'assistant':
+        return 'speaking'
+
+    return 'idle'
+
+
+payload = {
+    'gatewayConnected': os.environ.get('GATEWAY_CONNECTED') == '1',
+    'mainState': 'error',
+    'currentTask': None,
+    'activeSessionLabel': None,
+    'activeSessionUpdatedAt': None,
+    'controlSessionKey': None,
+    'recentMessages': [],
+    'subagents': [],
+}
+
+base = pick_base()
+if not base:
+    print(json.dumps(payload, ensure_ascii=False))
+    raise SystemExit
+
+agents_root = base / 'agents'
+main_index = load_json(agents_root / 'main' / 'sessions' / 'sessions.json')
+active_key, active_entry = pick_session(main_index)
+control_key, control_entry = pick_session(main_index, 'agent:main:main')
+active_messages = read_recent_messages((active_entry or {}).get('sessionFile'), 8)
+control_messages = read_recent_messages(
+    (control_entry or active_entry or {}).get('sessionFile'),
+    MESSAGE_LIMIT if INCLUDE_MESSAGES else 0,
+)
+
+payload['mainState'] = state_from(active_entry, active_messages, payload['gatewayConnected'])
+payload['currentTask'] = latest_user_text(active_messages) or get_label(active_entry)
+payload['activeSessionLabel'] = get_label(active_entry)
+payload['activeSessionUpdatedAt'] = (active_entry or {}).get('updatedAt')
+payload['controlSessionKey'] = control_key or active_key
+payload['recentMessages'] = control_messages
+
+subagent_names = set()
+workspace_agents = base / 'workspace' / 'agents'
+if workspace_agents.exists():
+    subagent_names.update(path.stem for path in workspace_agents.glob('*.md'))
+if agents_root.exists():
+    subagent_names.update(
+        path.name for path in agents_root.iterdir() if path.is_dir() and path.name != 'main'
+    )
+
+for subagent in sorted(subagent_names):
+    sub_index = load_json(agents_root / subagent / 'sessions' / 'sessions.json')
+    _, sub_entry = pick_session(sub_index)
+    sub_messages = read_recent_messages((sub_entry or {}).get('sessionFile'), 4)
+    payload['subagents'].append(
+        {
+            'name': subagent,
+            'state': state_from(sub_entry, sub_messages, payload['gatewayConnected']),
+            'updatedAt': (sub_entry or {}).get('updatedAt'),
+            'currentTask': latest_user_text(sub_messages) or get_label(sub_entry),
+            'sessionLabel': get_label(sub_entry),
+        }
+    )
+
+print(json.dumps(payload, ensure_ascii=False))
+PY
+else
+printf '%s' '{"gatewayConnected":false,"mainState":"error","currentTask":null,"activeSessionLabel":null,"activeSessionUpdatedAt":null,"controlSessionKey":null,"recentMessages":[],"subagents":[]}'
+fi`.trim();
+  }
+
+  private buildAgentSendCommand(message: string): string {
+    const messageB64 = Buffer.from(message, 'utf8').toString('base64');
+
+    return `
+export MSG_B64='${messageB64}'
+if command -v python3 >/dev/null 2>&1 && command -v openclaw >/dev/null 2>&1; then
+python3 - <<'PY'
+import base64
+import json
+import os
+import subprocess
+
+message = base64.b64decode(os.environ['MSG_B64']).decode('utf-8')
+proc = subprocess.run(
+    [
+        'openclaw',
+        'agent',
+        '--agent',
+        'main',
+        '--message',
+        message,
+        '--json',
+        '--timeout',
+        '120',
+    ],
+    stdout=subprocess.PIPE,
+    stderr=subprocess.STDOUT,
+    text=True,
+)
+out = proc.stdout or ''
+
+start = out.find('{')
+end = out.rfind('}')
+payload = {}
+if start != -1 and end != -1 and end > start:
+    try:
+        payload = json.loads(out[start : end + 1])
+    except Exception:
+        payload = {}
+
+result = payload.get('result') if isinstance(payload.get('result'), dict) else {}
+payloads = result.get('payloads') if isinstance(result.get('payloads'), list) else []
+texts = []
+for item in payloads:
+    if not isinstance(item, dict):
+        continue
+    text = item.get('text') or item.get('message') or item.get('content')
+    if isinstance(text, str) and text.strip():
+        texts.append(text.strip())
+
+reply = '\n\n'.join(texts).strip()
+if not reply and proc.returncode == 0:
+    reply = str(payload.get('summary') or '응답 완료').strip()
+
+print(
+    json.dumps(
+        {
+            'ok': proc.returncode == 0,
+            'status': payload.get('status') or ('completed' if proc.returncode == 0 else 'failed'),
+            'reply': reply,
+            'raw': out[-4000:],
+        },
+        ensure_ascii=False,
+    )
+)
+PY
+else
+printf '%s' '{"ok":false,"status":"failed","reply":"","raw":"openclaw runtime unavailable"}'
+fi`.trim();
  }

  private parseUptime(stdout: string) {
--- a/frontend/app/office/page.tsx
+++ b/frontend/app/office/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, POLL_INTERVAL_MS } from '@/lib/config';
 import { useSocket } from '@/lib/useSocket';
@@ -17,17 +17,44 @@ import PipelinePanel from '@/components/office/PipelinePanel';
 import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
 import type { PipelineNode } from '@/components/dashboard/ActivePipeline';

-// ─── Types ───────────────────────────────────────────────────────────────────
+interface RuntimeSubagentItem {
+  name: string;
+  state: AgentState;
+  updatedAt: number | null;
+  currentTask: string | null;
+  sessionLabel: string | null;
+}
+
+interface SisterRuntimeItem {
+  name: SisterName;
+  gatewayConnected: boolean;
+  mainState: AgentState;
+  currentTask: string | null;
+  activeSessionLabel: string | null;
+  activeSessionUpdatedAt: number | null;
+  controlSessionKey: string | null;
+  recentMessages: Array<{
+    id: string;
+    role: 'user' | 'assistant' | 'tool';
+    content: string;
+    ts: string | null;
+  }>;
+  subagents: RuntimeSubagentItem[];
+}

 interface SisterApiItem {
  id?: number;
-  name: string;
+  name: SisterName;
  status: 'online' | 'offline' | 'working' | 'unknown';
  role?: string;
  currentTask?: string | null;
  lastSeen?: string | null;
  cpu?: number;
  memory?: { used?: number; total?: number };
+  liveState?: AgentState;
+  activeSessionLabel?: string | null;
+  gatewayConnected?: boolean;
+  subagents?: RuntimeSubagentItem[];
 }

 interface DashboardOpsData {
@@ -55,33 +82,31 @@ interface DashboardOpsData {
  };
 }

-// ─── Static subagent definitions ─────────────────────────────────────────────
-
 const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
  harang: [
-    { id: 'harang-planner',      name: 'planner',      label: 'planner' },
+    { id: 'harang-planner', name: 'planner', label: 'planner' },
    { id: 'harang-task-tracker', name: 'task-tracker', label: 'task-tracker' },
-    { id: 'harang-prd-writer',   name: 'prd-writer',   label: 'prd-writer' },
+    { id: 'harang-prd-writer', name: 'prd-writer', label: 'prd-writer' },
  ],
  narang: [
-    { id: 'narang-worker',       name: 'worker',       label: 'worker' },
-    { id: 'narang-db-designer',  name: 'db-designer',  label: 'db-designer' },
-    { id: 'narang-test-writer',  name: 'test-writer',  label: 'test-writer' },
-    { id: 'narang-refactorer',   name: 'refactorer',   label: 'refactorer' },
+    { id: 'narang-worker', name: 'worker', label: 'worker' },
+    { id: 'narang-db-designer', name: 'db-designer', label: 'db-designer' },
+    { id: 'narang-test-writer', name: 'test-writer', label: 'test-writer' },
+    { id: 'narang-refactorer', name: 'refactorer', label: 'refactorer' },
  ],
  darang: [
-    { id: 'darang-reviewer',         name: 'reviewer',         label: 'reviewer' },
-    { id: 'darang-code-reviewer',    name: 'code-reviewer',    label: 'code-rvw' },
-    { id: 'darang-qa-tester',        name: 'qa-tester',        label: 'qa-tester' },
-    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security' },
-    { id: 'darang-ux-reviewer',      name: 'ux-reviewer',      label: 'ux-reviewer' },
+    { id: 'darang-reviewer', name: 'reviewer', label: 'reviewer' },
+    { id: 'darang-code-reviewer', name: 'code-reviewer', label: 'code-reviewer' },
+    { id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
+    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security-auditor' },
+    { id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
  ],
  erang: [
-    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy' },
-    { id: 'erang-db-manager',     name: 'db-manager',     label: 'db-mgr' },
-    { id: 'erang-nginx-manager',  name: 'nginx-manager',  label: 'nginx' },
-    { id: 'erang-monitoring',     name: 'monitoring',     label: 'monitor' },
-    { id: 'erang-dns-manager',    name: 'dns-manager',    label: 'dns' },
+    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy-manager' },
+    { id: 'erang-db-manager', name: 'db-manager', label: 'db-manager' },
+    { id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx-manager' },
+    { id: 'erang-monitoring', name: 'monitoring', label: 'monitoring' },
+    { id: 'erang-dns-manager', name: 'dns-manager', label: 'dns-manager' },
  ],
 };

@@ -89,48 +114,26 @@ const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
+  erang: '이랑이',
 };

 const SISTER_ROLES: Record<SisterName, string> = {
  harang: 'Planning & Orchestration',
  narang: 'Development',
  darang: 'QA & Review',
-  erang:  'Infra & Deploy',
+  erang: 'Infra & Deploy',
 };

 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 const SUBAGENT_COUNT = Object.values(SUBAGENT_DEFS).reduce((total, defs) => total + defs.length, 0);

 const FALLBACK_SISTERS: SisterApiItem[] = [
-  {
-    name: 'harang',
-    status: 'working',
-    role: SISTER_ROLES.harang,
-    currentTask: 'SPRINT-016 scope lock',
-  },
-  {
-    name: 'narang',
-    status: 'working',
-    role: SISTER_ROLES.narang,
-    currentTask: 'Office scene dynamic movement',
-  },
-  {
-    name: 'darang',
-    status: 'online',
-    role: SISTER_ROLES.darang,
-    currentTask: 'Review loop standby',
-  },
-  {
-    name: 'erang',
-    status: 'online',
-    role: SISTER_ROLES.erang,
-    currentTask: 'Gateway health watch',
-  },
+  { name: 'harang', status: 'working', role: SISTER_ROLES.harang, currentTask: 'runtime snapshot 확인 중' },
+  { name: 'narang', status: 'working', role: SISTER_ROLES.narang, currentTask: '개발 세션 상태 동기화 중' },
+  { name: 'darang', status: 'online', role: SISTER_ROLES.darang, currentTask: '검증 상태 확인 중' },
+  { name: 'erang', status: 'online', role: SISTER_ROLES.erang, currentTask: '배포 런타임 확인 중' },
 ];

-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
 function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean): AgentState {
  if (status === 'offline') return 'error';
  if (status === 'working') return hasTask ? 'tool_calling' : 'thinking';
@@ -139,34 +142,77 @@ function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean):
 }

 function derivedSubagentState(parentState: AgentState, index: number): AgentState {
-  // Derive subagent state from parent with some variety
-  if (parentState === 'error') return 'idle'; // subagents idle when parent is offline
+  if (parentState === 'error') return 'idle';
  if (parentState === 'tool_calling' && index === 0) return 'thinking';
  if (parentState === 'speaking' && index <= 1) return 'thinking';
  return 'idle';
 }

+function normalizeSubagentState(state?: AgentState): AgentState {
+  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking' || state === 'error') {
+    return state;
+  }
+  return 'idle';
+}
+
+function mergeSisterData(
+  statuses: SisterApiItem[],
+  runtime: SisterRuntimeItem[],
+  previous: SisterApiItem[] = [],
+): SisterApiItem[] {
+  const previousMap = new Map(previous.map((item) => [item.name, item]));
+  const statusMap = new Map(statuses.map((item) => [item.name, item]));
+  const runtimeMap = new Map(runtime.map((item) => [item.name, item]));
+
+  return SISTER_ORDER.map((name) => {
+    const prev = previousMap.get(name);
+    const status = statusMap.get(name) ?? prev ?? FALLBACK_SISTERS.find((item) => item.name === name)!;
+    const live = runtimeMap.get(name);
+
+    return {
+      ...prev,
+      ...status,
+      name,
+      role: status.role ?? prev?.role ?? SISTER_ROLES[name],
+      currentTask: live?.currentTask ?? status.currentTask ?? prev?.currentTask ?? null,
+      liveState: live?.mainState ?? prev?.liveState,
+      activeSessionLabel: live?.activeSessionLabel ?? prev?.activeSessionLabel ?? null,
+      gatewayConnected: live?.gatewayConnected ?? prev?.gatewayConnected ?? false,
+      subagents: live?.subagents ?? prev?.subagents ?? [],
+    };
+  });
+}
+
 function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
  return SISTER_ORDER.map((name) => {
-    const apiItem = sisters.find((s) => s.name === name);
-    const status = apiItem?.status ?? 'unknown';
-    const hasTask = Boolean(apiItem?.currentTask);
-    const parentState = statusToAgentState(status, hasTask);
+    const item = sisters.find((s) => s.name === name);
+    const fallbackState = statusToAgentState(item?.status ?? 'unknown', Boolean(item?.currentTask));
+    const state = item?.gatewayConnected ? item.liveState ?? fallbackState : fallbackState;

-    const subDefs = SUBAGENT_DEFS[name];
-    const subagents: SubAgent[] = subDefs.map((def, i) => ({
-      ...def,
-      sister: name,
-      state: derivedSubagentState(parentState, i),
-    }));
+    const runtimeSubagents = item?.subagents ?? [];
+    const runtimeMap = new Map(runtimeSubagents.map((sub) => [sub.name, sub]));
+
+    const subagents: SubAgent[] = SUBAGENT_DEFS[name].map((def, index) => {
+      const runtime = runtimeMap.get(def.name);
+      return {
+        id: def.id,
+        name: def.name,
+        label: def.label,
+        sister: name,
+        state: runtime ? normalizeSubagentState(runtime.state) : derivedSubagentState(state, index),
+        currentTask: runtime?.currentTask ?? null,
+        updatedAt: runtime?.updatedAt ?? null,
+        sessionLabel: runtime?.sessionLabel ?? null,
+      };
+    });

    return {
      name,
      displayName: SISTER_DISPLAY[name],
-      role: apiItem?.role ?? SISTER_ROLES[name],
-      emoji: name === 'harang' || name === 'narang' ? '🦊' : name === 'darang' ? '🐱' : '🐺',
-      state: parentState,
-      currentTask: apiItem?.currentTask ?? null,
+      role: item?.role ?? SISTER_ROLES[name],
+      state,
+      currentTask: item?.currentTask ?? null,
+      activeSessionLabel: item?.activeSessionLabel ?? null,
      subagents,
    };
  });
@@ -174,35 +220,20 @@ function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {

 function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
  const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
-    const s = sisters.find((x) => x.name === name);
+    const sister = sisters.find((item) => item.name === name);
    return {
      id: `server-${name}`,
      label: SISTER_DISPLAY[name],
      type: 'sister' as const,
-      status: s?.status ?? 'unknown',
-      detail: s?.currentTask ?? null,
-      source: s ? sisterSource : 'fallback',
+      status: sister?.status ?? 'unknown',
+      detail: sister?.currentTask ?? sister?.activeSessionLabel ?? null,
+      source: sister ? sisterSource : 'fallback',
    };
  });

-  // Dev server and Docker are fallback (no direct API yet)
  const extraEntries: ServerEntry[] = [
-    {
-      id: 'server-dev',
-      label: 'Dev Server',
-      type: 'dev',
-      status: 'unknown',
-      detail: null,
-      source: 'fallback',
-    },
-    {
-      id: 'server-docker',
-      label: 'Docker / Infra',
-      type: 'docker',
-      status: 'unknown',
-      detail: null,
-      source: 'fallback',
-    },
+    { id: 'server-dev', label: 'Dev Server', type: 'dev', status: 'unknown', detail: null, source: 'fallback' },
+    { id: 'server-docker', label: 'Docker / Infra', type: 'docker', status: 'unknown', detail: null, source: 'fallback' },
  ];

  return [...sisterEntries, ...extraEntries];
@@ -216,8 +247,6 @@ function formatGeneratedAt(ts: string): string {
  }
 }

-// ─── Styled Components ────────────────────────────────────────────────────────
-
 const Shell = styled.div`
  display: flex;
  flex-direction: column;
@@ -259,10 +288,7 @@ const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
-  color: ${({ $type }) =>
-    $type === 'live'     ? '#00BFA5'
-    : $type === 'snapshot' ? '#FF9800'
-    : '#555'};
+  color: ${({ $type }) => ($type === 'live' ? '#00BFA5' : $type === 'snapshot' ? '#FF9800' : '#777')};
  border: 1px solid currentColor;
  padding: 2px 6px;
  opacity: 0.8;
@@ -314,68 +340,63 @@ const LoadingOverlay = styled.div`
  letter-spacing: 0.08em;
 `;

-// ─── Main Component ───────────────────────────────────────────────────────────
-
 export default function OfficePage() {
  const [sisters, setSisters] = useState<SisterApiItem[]>([]);
  const [opsData, setOpsData] = useState<DashboardOpsData | null>(null);
  const [loading, setLoading] = useState(true);
-
  const [selected, setSelected] = useState<SelectedAgent | null>(null);
  const [chatSister, setChatSister] = useState<SisterName | null>(null);

-  // Live WebSocket connection
  const { connected } = useSocket<SisterApiItem>({
-    onSistersUpdate: (updatedSisters) => {
-      setSisters(updatedSisters);
+    onSistersUpdate: (updated) => {
+      setSisters((prev) => mergeSisterData(updated, [], prev));
    },
  });

-  // Initial data fetch
-  useEffect(() => {
-    const fetchAll = async () => {
-      try {
-        const [sistersRes, opsRes] = await Promise.allSettled([
-          fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
-          fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
-        ]);
+  const fetchAll = useCallback(async () => {
+    const [sistersRes, opsRes, runtimeRes] = await Promise.allSettled([
+      fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
+      fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
+      fetch(`${API_URL}/api/sisters/runtime`).then((r) => r.json()),
+    ]);

-        if (sistersRes.status === 'fulfilled') {
-          setSisters(Array.isArray(sistersRes.value) ? sistersRes.value : []);
-        }
-        if (opsRes.status === 'fulfilled') {
-          setOpsData(opsRes.value);
-        }
+    setSisters((prev) => {
+      const base = sistersRes.status === 'fulfilled' && Array.isArray(sistersRes.value) ? sistersRes.value as SisterApiItem[] : prev;
+      const runtime = runtimeRes.status === 'fulfilled' && Array.isArray(runtimeRes.value) ? runtimeRes.value as SisterRuntimeItem[] : [];
+      return mergeSisterData(base, runtime, prev);
+    });
+
+    if (opsRes.status === 'fulfilled') {
+      setOpsData(opsRes.value as DashboardOpsData);
+    }
+  }, []);
+
+  useEffect(() => {
+    const boot = async () => {
+      try {
+        await fetchAll();
      } finally {
        setLoading(false);
      }
    };

-    void fetchAll();
-
-    // Polling fallback
+    void boot();
    const interval = setInterval(() => {
-      fetch(`${API_URL}/api/sisters`)
-        .then((r) => r.json())
-        .then((data: SisterApiItem[]) => {
-          if (Array.isArray(data)) setSisters(data);
-        })
-        .catch(() => {/* ignore polling errors */});
+      void fetchAll();
    }, POLL_INTERVAL_MS);

    return () => clearInterval(interval);
-  }, []);
+  }, [fetchAll]);

  const hasSisterSnapshot = sisters.length > 0;
-  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected
-    ? 'live'
-    : hasSisterSnapshot
-      ? 'snapshot'
-      : 'fallback';
+  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
  const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
+  const sisterNodes = useMemo(() => buildSisterNodes(effectiveSisters), [effectiveSisters]);
+  const serverEntries = useMemo(() => buildServerEntries(effectiveSisters, sisterDataMode), [effectiveSisters, sisterDataMode]);

-  const sisterNodes = buildSisterNodes(effectiveSisters);
-  const serverEntries = buildServerEntries(effectiveSisters, sisterDataMode);
+  const subagentMode: 'live' | 'fallback' = useMemo(() => {
+    return effectiveSisters.some((item) => (item.subagents?.length ?? 0) > 0) ? 'live' : 'fallback';
+  }, [effectiveSisters]);

  const handleSelectSister = useCallback((name: SisterName) => {
    setSelected({ type: 'sister', name });
@@ -391,17 +412,9 @@ export default function OfficePage() {
    setChatSister(sisterName);
  }, []);

-  const handleCloseChat = useCallback(() => {
-    setChatSister(null);
-  }, []);
-
-  const handleClearSelection = useCallback(() => {
-    setSelected(null);
-  }, []);
-
  const pipeline = opsData?.pipeline ?? {
    activeTask: 'SPRINT-016',
-    focus: 'Isometric Office Dashboard',
+    focus: 'Office runtime sync',
    reviewLoopCount: 0,
    escalationCount: 0,
    deployState: '—',
@@ -428,12 +441,10 @@ export default function OfficePage() {
          <FreshnessBadge $type={sisterDataMode}>
            자매: {sisterDataMode === 'live' ? 'live · ws' : sisterDataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc'}
          </FreshnessBadge>
-          <FreshnessBadge $type="fallback">
-            서브에이전트: fallback
-          </FreshnessBadge>
-          <FreshnessBadge $type="snapshot">
-            pipeline: snapshot
+          <FreshnessBadge $type={subagentMode === 'live' ? 'live' : 'fallback'}>
+            서브에이전트: {subagentMode === 'live' ? 'live · runtime' : 'fallback'}
          </FreshnessBadge>
+          <FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
        </FreshnessBar>
      </PageHeader>

@@ -445,14 +456,12 @@ export default function OfficePage() {
            onSelectSister={handleSelectSister}
            onSelectSubagent={handleSelectSubagent}
            dataMode={sisterDataMode}
+            subagentMode={subagentMode}
          />

          {chatSister && (
            <ChatArea>
-              <ChatWorkspace
-                initialSister={chatSister}
-                onClose={handleCloseChat}
-              />
+              <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
            </ChatArea>
          )}
        </SceneColumn>
@@ -461,7 +470,7 @@ export default function OfficePage() {
          selected={selected}
          sisters={sisterNodes}
          onOpenChat={handleOpenChat}
-          onClear={handleClearSelection}
+          onClear={() => setSelected(null)}
        />
      </MainArea>

--- a/frontend/components/common/SisterAvatar.tsx
+++ b/frontend/components/common/SisterAvatar.tsx
@@ -46,10 +46,10 @@ interface SisterAvatarProps {
 }

 export default function SisterAvatar({ name, size = 32, className, style }: SisterAvatarProps) {
-  const [failed, setFailed] = useState(false);
+  const [failedFor, setFailedFor] = useState<string | null>(null);
  const initial = SISTER_INITIALS[name] ?? name.slice(0, 1).toUpperCase();

-  if (failed) {
+  if (failedFor === name) {
    return <Fallback $size={size} className={className} style={style}>{initial}</Fallback>;
  }

@@ -60,7 +60,7 @@ export default function SisterAvatar({ name, size = 32, className, style }: Sist
      alt={name}
      className={className}
      style={style}
-      onError={() => setFailed(true)}
+      onError={() => setFailedFor(name)}
    />
  );
 }
--- a/frontend/components/office/ChatWorkspace.tsx
+++ b/frontend/components/office/ChatWorkspace.tsx
@@ -2,9 +2,25 @@

 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import styled, { keyframes } from 'styled-components';
-import type { SisterName } from './OfficeScene';
+import SisterAvatar from '@/components/common/SisterAvatar';
+import { API_URL } from '@/lib/config';
+import type { SisterName, AgentState } from './OfficeScene';

-// ─── Types ───────────────────────────────────────────────────────────────────
+interface RuntimeMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  ts: string | null;
+}
+
+interface RuntimeSnapshot {
+  name: SisterName;
+  gatewayConnected: boolean;
+  mainState: AgentState;
+  currentTask: string | null;
+  activeSessionLabel: string | null;
+  recentMessages: RuntimeMessage[];
+}

 interface ChatMessage {
  id: string;
@@ -19,40 +35,27 @@ interface ChatWorkspaceProps {
  onClose: () => void;
 }

-// ─── Static data ──────────────────────────────────────────────────────────────
-
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
-};
-
-const SISTER_EMOJIS: Record<SisterName, string> = {
-  harang: '🦊',
-  narang: '🦊',
-  darang: '🐱',
-  erang:  '🐺',
+  erang: '이랑이',
 };

 const SISTER_ROLES: Record<SisterName, string> = {
  harang: 'Planning & Orchestration',
  narang: 'Development & Implementation',
  darang: 'QA & Review',
-  erang:  'Infra & Deploy',
+  erang: 'Infra & Deploy',
 };

 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];

-// ─── Animations ──────────────────────────────────────────────────────────────
-
 const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  to { opacity: 1; transform: translateY(0); }
 `;

-// ─── Styled Components ────────────────────────────────────────────────────────
-
 const Workspace = styled.div`
  display: flex;
  height: 100%;
@@ -65,7 +68,6 @@ const Workspace = styled.div`
  }
 `;

-// Left sidebar - sister tabs
 const SisterTabs = styled.nav`
  width: 200px;
  flex-shrink: 0;
@@ -125,11 +127,6 @@ const SisterTab = styled.button<{ $active: boolean }>`
  }
 `;

-const TabEmoji = styled.span`
-  font-size: 16px;
-  line-height: 1;
-`;
-
 const TabMeta = styled.div`
  display: flex;
  flex-direction: column;
@@ -150,7 +147,6 @@ const TabRole = styled.div`
  }
 `;

-// Center - message timeline
 const MessageArea = styled.div`
  flex: 1;
  display: flex;
@@ -167,10 +163,6 @@ const MessageHeader = styled.div`
  flex-shrink: 0;
 `;

-const HeaderEmoji = styled.span`
-  font-size: 20px;
-`;
-
 const HeaderMeta = styled.div`
  flex: 1;
 `;
@@ -186,11 +178,11 @@ const HeaderRole = styled.div`
  color: var(--text-secondary);
 `;

-const HeaderBadge = styled.div`
+const HeaderBadge = styled.div<{ $ok: boolean }>`
  font-family: var(--font-mono);
  font-size: 10px;
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
+  color: ${({ $ok }) => ($ok ? '#00BFA5' : 'var(--text-secondary)')};
+  border: 1px solid currentColor;
  padding: 2px var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
@@ -209,7 +201,7 @@ const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
  display: flex;
  flex-direction: column;
  gap: 4px;
-  align-items: ${({ $role }) => $role === 'user' ? 'flex-end' : 'flex-start'};
+  align-items: ${({ $role }) => ($role === 'user' ? 'flex-end' : 'flex-start')};
  animation: ${fadeIn} 0.2s ease;
 `;

@@ -223,15 +215,15 @@ const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
    $role === 'user'
      ? 'rgba(255,255,255,0.06)'
      : $role === 'tool'
-      ? 'rgba(255, 152, 0, 0.06)'
-      : 'rgba(255,255,255,0.02)'};
+        ? 'rgba(255, 152, 0, 0.06)'
+        : 'rgba(255,255,255,0.02)'};
  border: 1px solid ${({ $role }) =>
    $role === 'user'
      ? 'rgba(255,255,255,0.12)'
      : $role === 'tool'
-      ? 'rgba(255,152,0,0.2)'
-      : 'rgba(255,255,255,0.06)'};
-  font-family: ${({ $role }) => $role === 'tool' ? 'var(--font-mono)' : 'inherit'};
+        ? 'rgba(255,152,0,0.2)'
+        : 'rgba(255,255,255,0.06)'};
+  font-family: ${({ $role }) => ($role === 'tool' ? 'var(--font-mono)' : 'inherit')};
 `;

 const BubbleMeta = styled.div`
@@ -241,16 +233,6 @@ const BubbleMeta = styled.div`
  opacity: 0.6;
 `;

-const ToolCallBadge = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: #FF9800;
-  margin-bottom: 2px;
-`;
-
 const EmptyTimeline = styled.div`
  flex: 1;
  display: flex;
@@ -263,7 +245,7 @@ const EmptyTimeline = styled.div`
  text-align: center;
 `;

-const GatewayNotice = styled.div`
+const RuntimeNotice = styled.div`
  border: 1px solid var(--border-color);
  padding: var(--space-md);
  font-family: var(--font-mono);
@@ -272,11 +254,10 @@ const GatewayNotice = styled.div`
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
-  max-width: 280px;
+  max-width: 320px;
  text-align: center;
 `;

-// Input area
 const InputArea = styled.div`
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
@@ -298,7 +279,6 @@ const MessageInput = styled.textarea`
  min-height: 40px;
  max-height: 120px;
  line-height: 1.5;
-  transition: border-color 0.15s;

  &:focus {
    outline: none;
@@ -341,13 +321,12 @@ const InputMeta = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
-  opacity: 0.5;
+  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
 `;

-// Right - sister context
 const SisterContext = styled.aside`
  width: 220px;
  flex-shrink: 0;
@@ -391,7 +370,6 @@ const CtxMono = styled.div`
  color: var(--text-secondary);
 `;

-// Close button
 const CloseBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
@@ -403,7 +381,6 @@ const CloseBtn = styled.button`
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-family: var(--font-mono);
-  transition: all 0.15s;

  &:hover {
    border-color: var(--border-hover);
@@ -411,8 +388,6 @@ const CloseBtn = styled.button`
  }
 `;

-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
 function formatTs(ts: string): string {
  const date = new Date(ts);
  const diff = Date.now() - date.getTime();
@@ -424,80 +399,171 @@ function formatTs(ts: string): string {
  return `${Math.floor(hr / 24)}일 전`;
 }

-// ─── Component ────────────────────────────────────────────────────────────────
+function runtimeStateLabel(state: AgentState): string {
+  if (state === 'thinking') return 'thinking';
+  if (state === 'tool_calling') return 'tool_calling';
+  if (state === 'speaking') return 'speaking';
+  if (state === 'error') return 'error';
+  return 'idle';
+}
+
+function getToken(): string {
+  if (typeof window === 'undefined') return '';
+  return localStorage.getItem('hanarang_access_token') ?? '';
+}
+
+function mergeMessages(prev: ChatMessage[], incoming: ChatMessage[]) {
+  const map = new Map<string, ChatMessage>();
+  [...prev, ...incoming].forEach((item) => {
+    map.set(item.id, item);
+  });
+  return Array.from(map.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
+}
+
+function mapRuntimeMessages(items: RuntimeMessage[]): ChatMessage[] {
+  return items.map((item, index) => ({
+    id: item.id || `${item.role}-${item.ts ?? 'none'}-${index}`,
+    role: item.role,
+    content: item.content,
+    ts: item.ts ?? new Date().toISOString(),
+  }));
+}

 export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceProps) {
  const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
-  // Per-sister message maps avoid setState-in-effect for clearing on switch
  const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
+  const [runtimeBySister, setRuntimeBySister] = useState<Partial<Record<SisterName, RuntimeSnapshot>>>({});
  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
  const timelineRef = useRef<HTMLDivElement>(null);

  const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
+  const runtime = runtimeBySister[activeSister] ?? null;
+  const hasToken = Boolean(getToken());

-  const setMessages = useCallback(
-    (updater: (prev: ChatMessage[]) => ChatMessage[]) => {
-      setAllMessages((prev) => ({
-        ...prev,
-        [activeSister]: updater(prev[activeSister] ?? []),
-      }));
-    },
-    [activeSister],
-  );
+  useEffect(() => {
+    setActiveSister(initialSister);
+  }, [initialSister]);

-  // Scroll to bottom on new messages
  useEffect(() => {
    if (timelineRef.current) {
      timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
    }
  }, [messages]);

-  // Mock send — in production this would go via OpenClaw Gateway
-  const handleSend = useCallback(() => {
-    const text = input.trim();
-    if (!text) return;
+  const setMessages = useCallback((sister: SisterName, updater: (prev: ChatMessage[]) => ChatMessage[]) => {
+    setAllMessages((prev) => ({
+      ...prev,
+      [sister]: updater(prev[sister] ?? []),
+    }));
+  }, []);

-    const userMsg: ChatMessage = {
-      id: `msg-${Date.now()}`,
+  const loadRuntime = useCallback(async (sister: SisterName) => {
+    try {
+      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`);
+      if (!res.ok) return;
+      const data = (await res.json()) as RuntimeSnapshot;
+      setRuntimeBySister((prev) => ({ ...prev, [sister]: data }));
+      const runtimeMessages = mapRuntimeMessages(data.recentMessages ?? []);
+      if (runtimeMessages.length > 0) {
+        setMessages(sister, (prev) => mergeMessages(prev, runtimeMessages));
+      }
+    } catch {
+      // ignore runtime refresh failures
+    }
+  }, [setMessages]);
+
+  useEffect(() => {
+    void loadRuntime(activeSister);
+    const interval = setInterval(() => {
+      void loadRuntime(activeSister);
+    }, 8000);
+    return () => clearInterval(interval);
+  }, [activeSister, loadRuntime]);
+
+  const handleSend = useCallback(async () => {
+    const text = input.trim();
+    if (!text || sending) return;
+
+    const token = getToken();
+    if (!token) {
+      setMessages(activeSister, (prev) => mergeMessages(prev, [{
+        id: `sys-${Date.now()}`,
+        role: 'assistant',
+        content: '로그인이 풀린 것 같아. 다시 로그인한 뒤 시도해줘.',
+        ts: new Date().toISOString(),
+      }]));
+      return;
+    }
+
+    const userMessage: ChatMessage = {
+      id: `user-${Date.now()}`,
      role: 'user',
      content: text,
      ts: new Date().toISOString(),
    };

-    setMessages((prev) => [...prev, userMsg]);
+    setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
    setInput('');
+    setSending(true);

-    // Gateway connection pending — show system notice
-    setTimeout(() => {
-      const sysMsg: ChatMessage = {
-        id: `msg-${Date.now() + 1}`,
+    try {
+      const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ message: text }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data?.message || '채팅 전송 실패');
+      }
+
+      if (data?.runtime) {
+        setRuntimeBySister((prev) => ({ ...prev, [activeSister]: data.runtime as RuntimeSnapshot }));
+      }
+
+      const reply = String(data?.reply || '').trim();
+      if (reply) {
+        setMessages(activeSister, (prev) => mergeMessages(prev, [{
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: reply,
+          ts: new Date().toISOString(),
+        }]));
+      }
+
+      void loadRuntime(activeSister);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : '채팅 전송 중 오류가 발생했어.';
+      setMessages(activeSister, (prev) => mergeMessages(prev, [{
+        id: `error-${Date.now()}`,
        role: 'assistant',
-        content: `[Gateway 연결 대기] ${SISTER_DISPLAY[activeSister]} OpenClaw Gateway가 아직 연결되지 않았습니다. 직접 채팅 기능은 Gateway WebSocket 연결 후 활성화됩니다.`,
+        content: `전송 실패: ${message}`,
        ts: new Date().toISOString(),
-      };
-      setMessages((prev) => [...prev, sysMsg]);
-    }, 400);
-  }, [activeSister, input, setMessages]);
+      }]));
+    } finally {
+      setSending(false);
+    }
+  }, [activeSister, input, loadRuntime, sending, setMessages]);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
-      handleSend();
+      void handleSend();
    }
  };

  return (
    <Workspace>
-      {/* Left: sister tabs */}
      <SisterTabs>
        <SisterTabHeader>direct chat</SisterTabHeader>
        {SISTER_ORDER.map((name) => (
-          <SisterTab
-            key={name}
-            $active={activeSister === name}
-            onClick={() => setActiveSister(name)}
-          >
-            <TabEmoji>{SISTER_EMOJIS[name]}</TabEmoji>
+          <SisterTab key={name} $active={activeSister === name} onClick={() => setActiveSister(name)}>
+            <SisterAvatar name={name} size={22} />
            <TabMeta>
              <TabName>{SISTER_DISPLAY[name]}</TabName>
              <TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
@@ -506,35 +572,33 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
        ))}
      </SisterTabs>

-      {/* Center: message timeline */}
      <MessageArea>
        <MessageHeader>
-          <HeaderEmoji>{SISTER_EMOJIS[activeSister]}</HeaderEmoji>
+          <SisterAvatar name={activeSister} size={28} />
          <HeaderMeta>
            <HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
            <HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
          </HeaderMeta>
-          <HeaderBadge>Gateway 대기</HeaderBadge>
+          <HeaderBadge $ok={Boolean(runtime?.gatewayConnected)}>
+            {runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}
+          </HeaderBadge>
          <CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
        </MessageHeader>

        <Timeline ref={timelineRef}>
          {messages.length === 0 ? (
            <EmptyTimeline>
-              <div>{SISTER_EMOJIS[activeSister]}</div>
-              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내세요.</div>
-              <GatewayNotice>
-                openclaw gateway 연결 대기 중<br />
-                메시지 입력은 가능하나<br />
-                실시간 응답은 gateway 연결 후 활성화
-              </GatewayNotice>
+              <SisterAvatar name={activeSister} size={32} />
+              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내봐.</div>
+              <RuntimeNotice>
+                {runtime?.gatewayConnected
+                  ? '직접 채팅이 자매 runtime으로 연결돼 있어. 입력하면 바로 전달돼.'
+                  : 'runtime 상태를 확인 중이야. 연결이 느려도 메시지는 다시 시도할 수 있어.'}
+              </RuntimeNotice>
            </EmptyTimeline>
          ) : (
            messages.map((msg) => (
              <MessageBubble key={msg.id} $role={msg.role}>
-                {msg.role === 'tool' && (
-                  <ToolCallBadge>🔧 tool · {msg.toolName}</ToolCallBadge>
-                )}
                <BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
                <BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
              </MessageBubble>
@@ -543,61 +607,48 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
        </Timeline>

        <InputMeta>
-          shift+enter = 줄바꿈 · enter = 전송 · gateway: 연결 대기
+          shift+enter = 줄바꿈 · enter = 전송 · runtime: {runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}
        </InputMeta>

        <InputArea>
          <MessageInput
-            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시하세요...`}
+            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            rows={1}
          />
-          <SendBtn onClick={handleSend} disabled={!input.trim()}>
-            전송
+          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending || !hasToken}>
+            {sending ? '전송 중' : '전송'}
          </SendBtn>
        </InputArea>
      </MessageArea>

-      {/* Right: sister context */}
      <SisterContext>
        <ContextSection>
          <CtxLabel>agent</CtxLabel>
-          <CtxValue>
-            {SISTER_EMOJIS[activeSister]} {SISTER_DISPLAY[activeSister]}
-          </CtxValue>
+          <CtxValue>{SISTER_DISPLAY[activeSister]}</CtxValue>
          <CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
        </ContextSection>

        <ContextSection>
          <CtxLabel>채팅 상태</CtxLabel>
-          <CtxValue>Gateway 연결 대기</CtxValue>
-          <CtxMono>openclaw websocket</CtxMono>
+          <CtxValue>{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}</CtxValue>
+          <CtxMono>{runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}</CtxMono>
        </ContextSection>

        <ContextSection>
          <CtxLabel>data source</CtxLabel>
          <CtxMono>
-            live: ws (pending)<br />
-            fallback: ui-only
+            control: ssh → openclaw agent
+            <br />
+            activity: runtime session snapshot
          </CtxMono>
        </ContextSection>

        <ContextSection>
-          <CtxLabel>상세</CtxLabel>
-          <CtxValue>
-            <a
-              href={`/sisters/${activeSister}`}
-              style={{
-                color: 'var(--text-secondary)',
-                textDecoration: 'none',
-                fontSize: '12px',
-              }}
-            >
-              → 자매 상세 보기
-            </a>
-          </CtxValue>
+          <CtxLabel>current task</CtxLabel>
+          <CtxValue>{runtime?.currentTask ?? runtime?.activeSessionLabel ?? '작업 정보 없음'}</CtxValue>
        </ContextSection>
      </SisterContext>
    </Workspace>
--- a/frontend/components/office/ContextPanel.tsx
+++ b/frontend/components/office/ContextPanel.tsx
@@ -3,10 +3,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
+import SisterAvatar from '@/components/common/SisterAvatar';
 import type { SisterNode, SubAgent, SisterName, AgentState, SelectedAgent } from './OfficeScene';

-// ─── Types ───────────────────────────────────────────────────────────────────
-
 interface ContextPanelProps {
  selected: SelectedAgent | null;
  sisters: SisterNode[];
@@ -14,8 +13,6 @@ interface ContextPanelProps {
  onClear: () => void;
 }

-// ─── Styled Components ────────────────────────────────────────────────────────
-
 const Panel = styled.aside`
  width: 300px;
  flex-shrink: 0;
@@ -33,7 +30,7 @@ const Panel = styled.aside`
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
-    max-height: 220px;
+    max-height: 260px;
  }
 `;

@@ -91,10 +88,11 @@ const AgentHeader = styled.div`
  gap: var(--space-md);
 `;

-const AgentEmoji = styled.div`
-  font-size: 28px;
-  line-height: 1;
+const AgentAvatarWrap = styled.div`
  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;

 const AgentMeta = styled.div`
@@ -279,40 +277,27 @@ const FallbackNote = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
-  opacity: 0.5;
+  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;

-// ─── Sister display data ──────────────────────────────────────────────────────
-
-const SISTER_EMOJIS: Record<SisterName, string> = {
-  harang: '🦊',
-  narang: '🦊',
-  darang: '🐱',
-  erang:  '🐺',
-};
-
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
+  erang: '이랑이',
 };

-// ─── Component ────────────────────────────────────────────────────────────────
+function SisterDetail({ sister, onOpenChat }: { sister: SisterNode; onOpenChat: (name: SisterName) => void }) {
+  const hasLiveSubagentState = sister.subagents.some((item) => item.sessionLabel || item.currentTask || item.updatedAt);

-function SisterDetail({
-  sister,
-  onOpenChat,
-}: {
-  sister: SisterNode;
-  onOpenChat: (name: SisterName) => void;
-}) {
  return (
    <>
      <AgentHeader>
-        <AgentEmoji>{SISTER_EMOJIS[sister.name]}</AgentEmoji>
+        <AgentAvatarWrap>
+          <SisterAvatar name={sister.name} size={40} />
+        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{SISTER_DISPLAY[sister.name]}</AgentName>
          <AgentRole>{sister.role}</AgentRole>
@@ -325,10 +310,10 @@ function SisterDetail({
        <StateLabel $state={sister.state}>{sister.state}</StateLabel>
      </StateRow>

-      {sister.currentTask && (
+      {(sister.currentTask || sister.activeSessionLabel) && (
        <Section>
          <SectionLabel>current task</SectionLabel>
-          <CurrentTaskBox>{sister.currentTask}</CurrentTaskBox>
+          <CurrentTaskBox>{sister.currentTask ?? sister.activeSessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
        </Section>
      )}

@@ -343,16 +328,12 @@ function SisterDetail({
            </SubagentRow>
          ))}
        </SubagentGrid>
-        <FallbackNote>subagent state: fallback</FallbackNote>
+        <FallbackNote>{hasLiveSubagentState ? 'subagent state: live runtime' : 'subagent state: fallback'}</FallbackNote>
      </Section>

      <ActionRow>
-        <ActionBtn onClick={() => onOpenChat(sister.name)}>
-          채팅
-        </ActionBtn>
-        <ActionLink href={`/sisters/${sister.name}`}>
-          상세
-        </ActionLink>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>채팅</ActionBtn>
+        <ActionLink href={`/sisters/${sister.name}`}>상세</ActionLink>
      </ActionRow>
    </>
  );
@@ -367,10 +348,14 @@ function SubagentDetail({
  sister: SisterNode;
  onOpenChat: (name: SisterName) => void;
 }) {
+  const liveNote = sub.sessionLabel || sub.currentTask || sub.updatedAt;
+
  return (
    <>
      <AgentHeader>
-        <AgentEmoji>🤖</AgentEmoji>
+        <AgentAvatarWrap>
+          <SisterAvatar name={sister.name} size={40} />
+        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{sub.label}</AgentName>
          <AgentRole>{sub.name}</AgentRole>
@@ -385,62 +370,44 @@ function SubagentDetail({

      <Section>
        <SectionLabel>parent</SectionLabel>
-        <SectionValue>
-          {SISTER_EMOJIS[sister.name]} {SISTER_DISPLAY[sister.name]} · {sister.role}
-        </SectionValue>
+        <SectionValue>{SISTER_DISPLAY[sister.name]} · {sister.role}</SectionValue>
      </Section>

-      <FallbackNote>subagent state: fallback · no direct api</FallbackNote>
+      {(sub.currentTask || sub.sessionLabel) && (
+        <Section>
+          <SectionLabel>current task</SectionLabel>
+          <CurrentTaskBox>{sub.currentTask ?? sub.sessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
+        </Section>
+      )}
+
+      <FallbackNote>{liveNote ? 'subagent state: live runtime' : 'subagent state: fallback · no direct api'}</FallbackNote>

      <ActionRow>
-        <ActionBtn onClick={() => onOpenChat(sister.name)}>
-          {SISTER_DISPLAY[sister.name]} 채팅
-        </ActionBtn>
-        <ActionLink href={`/sisters/${sister.name}`}>
-          자매 상세
-        </ActionLink>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>{SISTER_DISPLAY[sister.name]} 채팅</ActionBtn>
+        <ActionLink href={`/sisters/${sister.name}`}>자매 상세</ActionLink>
      </ActionRow>
    </>
  );
 }

-export default function ContextPanel({
-  selected,
-  sisters,
-  onOpenChat,
-  onClear,
-}: ContextPanelProps) {
+export default function ContextPanel({ selected, sisters, onOpenChat, onClear }: ContextPanelProps) {
  const getSister = (name: SisterName) => sisters.find((s) => s.name === name);

  let content: React.ReactNode = (
    <EmptyState>
-      에이전트를 선택하면<br />
+      에이전트를 선택하면
+      <br />
      상세 정보가 표시됩니다.
    </EmptyState>
  );

  if (selected?.type === 'sister') {
-    const sisterData = getSister(selected.name);
-    if (sisterData) {
-      content = (
-        <SisterDetail
-          sister={sisterData}
-          onOpenChat={onOpenChat}
-        />
-      );
-    }
+    const sister = getSister(selected.name);
+    if (sister) content = <SisterDetail sister={sister} onOpenChat={onOpenChat} />;
  } else if (selected?.type === 'subagent') {
-    const sisterData = getSister(selected.sister);
-    const subData = sisterData?.subagents.find((s) => s.id === selected.id);
-    if (sisterData && subData) {
-      content = (
-        <SubagentDetail
-          sub={subData}
-          sister={sisterData}
-          onOpenChat={onOpenChat}
-        />
-      );
-    }
+    const sister = getSister(selected.sister);
+    const sub = sister?.subagents.find((item) => item.id === selected.id);
+    if (sister && sub) content = <SubagentDetail sub={sub} sister={sister} onOpenChat={onOpenChat} />;
  }

  return (
--- a/frontend/components/office/OfficeScene.tsx
+++ b/frontend/components/office/OfficeScene.tsx
@@ -2,8 +2,7 @@

 import React, { useCallback } from 'react';
 import styled from 'styled-components';
-
-// ─── Types ───────────────────────────────────────────────────────────────────
+import { API_URL } from '@/lib/config';

 export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
 export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
@@ -14,15 +13,18 @@ export interface SubAgent {
  label: string;
  sister: SisterName;
  state: AgentState;
+  currentTask?: string | null;
+  updatedAt?: number | null;
+  sessionLabel?: string | null;
 }

 export interface SisterNode {
  name: SisterName;
  displayName: string;
  role: string;
-  emoji: string;
  state: AgentState;
  currentTask: string | null;
+  activeSessionLabel?: string | null;
  subagents: SubAgent[];
 }

@@ -36,10 +38,9 @@ interface OfficeSceneProps {
  onSelectSister: (name: SisterName) => void;
  onSelectSubagent: (id: string, sister: SisterName) => void;
  dataMode: 'live' | 'snapshot' | 'fallback';
+  subagentMode: 'live' | 'fallback';
 }

-// ─── Styled wrappers ──────────────────────────────────────────────────────────
-
 const SceneWrapper = styled.div`
  position: relative;
  width: 100%;
@@ -73,68 +74,60 @@ const WsDot = styled.span<{ $connected: boolean }>`
  vertical-align: middle;
 `;

-// ─── SVG constants ────────────────────────────────────────────────────────────
-
 const VB_W = 800;
 const VB_H = 460;
 type Point = [number, number];

-// Zone rects [x, y, w, h]
 const ZONES = {
-  harang: [5,   5,   345, 200] as const,
-  darang: [450, 5,   345, 200] as const,
-  narang: [5,   260, 345, 195] as const,
-  erang:  [450, 260, 345, 195] as const,
+  harang: [5, 5, 345, 200] as const,
+  darang: [450, 5, 345, 200] as const,
+  narang: [5, 260, 345, 195] as const,
+  erang: [450, 260, 345, 195] as const,
 };

-// Sister desk center positions
 const SISTER_POS: Record<SisterName, [number, number]> = {
-  harang: [75,  105],
+  harang: [75, 105],
  darang: [725, 105],
-  narang: [75,  358],
-  erang:  [725, 358],
+  narang: [75, 358],
+  erang: [725, 358],
 };

-// Conference room
 const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };

-// Subagent grid positions (cx, cy) per sister
 const SUBAGENT_POSITIONS: Record<SisterName, Point[]> = {
  harang: [[175, 65], [270, 65], [220, 160]],
  darang: [[460, 65], [560, 65], [660, 65], [460, 160], [560, 160]],
  narang: [[175, 295], [270, 295], [175, 395], [270, 395]],
-  erang:  [[460, 295], [555, 295], [650, 295], [460, 395], [555, 395]],
+  erang: [[460, 295], [555, 295], [650, 295], [460, 395], [555, 395]],
 };

 const SUBAGENT_TARGETS: Record<SisterName, Point[]> = {
  harang: [[295, 112], [338, 148], [365, 190]],
  darang: [[505, 94], [560, 112], [462, 148], [438, 188], [520, 196]],
  narang: [[292, 332], [330, 302], [362, 276], [344, 374]],
-  erang:  [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
+  erang: [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
 };

-// Zone accent colors
 const ZONE_COLORS: Record<SisterName, string> = {
  harang: 'rgba(41, 121, 255, 0.06)',
  narang: 'rgba(0, 191, 165, 0.06)',
  darang: 'rgba(255, 64, 129, 0.06)',
-  erang:  'rgba(255, 109, 0, 0.06)',
+  erang: 'rgba(255, 109, 0, 0.06)',
 };

 const ZONE_BORDER: Record<SisterName, string> = {
  harang: 'rgba(41, 121, 255, 0.25)',
  narang: 'rgba(0, 191, 165, 0.25)',
  darang: 'rgba(255, 64, 129, 0.25)',
-  erang:  'rgba(255, 109, 0, 0.25)',
+  erang: 'rgba(255, 109, 0, 0.25)',
 };

-// State ring colors
 const STATE_COLORS: Record<AgentState, string> = {
-  idle:        '#444444',
-  thinking:    '#2979FF',
-  tool_calling:'#FF9800',
-  speaking:    '#00BFA5',
-  error:       '#FF1744',
+  idle: '#444444',
+  thinking: '#2979FF',
+  tool_calling: '#FF9800',
+  speaking: '#00BFA5',
+  error: '#FF1744',
 };

 const STATE_PROGRESS: Record<AgentState, number> = {
@@ -161,37 +154,39 @@ function getSubagentPosition(sister: SisterName, index: number, state: AgentStat
 function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
  const phase = index % 2 === 0 ? 1 : -1;

-  if (state === 'thinking') {
-    return { dx: 5 * phase, dy: -6, dur: '3.6s' };
-  }
-
-  if (state === 'tool_calling') {
-    return { dx: 10 * phase, dy: -14, dur: '2s' };
-  }
-
-  if (state === 'speaking') {
-    return { dx: 6 * phase, dy: -4, dur: '2.8s' };
-  }
-
+  if (state === 'thinking') return { dx: 5 * phase, dy: -6, dur: '3.6s' };
+  if (state === 'tool_calling') return { dx: 10 * phase, dy: -14, dur: '2s' };
+  if (state === 'speaking') return { dx: 6 * phase, dy: -4, dur: '2.8s' };
  return null;
 }

-// ─── Helper: AgentCircle (rendered as SVG group) ──────────────────────────────
-
 function SisterCircle({
-  cx, cy, r, state, emoji, selected, onClick,
+  cx,
+  cy,
+  r,
+  state,
+  name,
+  selected,
+  onClick,
 }: {
-  cx: number; cy: number; r: number;
-  state: AgentState; emoji: string; selected: boolean;
+  cx: number;
+  cy: number;
+  r: number;
+  state: AgentState;
+  name: SisterName;
+  selected: boolean;
  onClick: () => void;
 }) {
  const color = STATE_COLORS[state];
+  const clipId = `avatar-clip-${name}`;
+
  return (
    <g onClick={onClick} style={{ cursor: 'pointer' }}>
-      {/* Outer selection ring */}
      {selected && (
        <circle
-          cx={cx} cy={cy} r={r + 8}
+          cx={cx}
+          cy={cy}
+          r={r + 8}
          fill="none"
          stroke="var(--text-primary)"
          strokeWidth={1}
@@ -199,45 +194,40 @@ function SisterCircle({
          opacity={0.6}
        />
      )}
-      {/* State ring */}
      <circle
-        cx={cx} cy={cy} r={r + 4}
+        cx={cx}
+        cy={cy}
+        r={r + 4}
        fill="none"
        stroke={color}
        strokeWidth={state === 'error' ? 2.5 : 1.5}
        opacity={state === 'idle' ? 0.4 : 1}
      >
        {state === 'thinking' && (
-          <animate
-            attributeName="opacity"
-            values="0.45;1;0.45"
-            dur="1.8s"
-            repeatCount="indefinite"
-          />
+          <animate attributeName="opacity" values="0.45;1;0.45" dur="1.8s" repeatCount="indefinite" />
        )}
        {state === 'tool_calling' && (
-          <animate
-            attributeName="stroke-opacity"
-            values="1;0.2;1"
-            dur="0.9s"
-            repeatCount="indefinite"
-          />
+          <animate attributeName="stroke-opacity" values="1;0.2;1" dur="0.9s" repeatCount="indefinite" />
        )}
      </circle>
-      {/* Body */}
      <circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
-      {/* Emoji */}
+      <defs>
+        <clipPath id={clipId}>
+          <circle cx={cx} cy={cy} r={r - 2} />
+        </clipPath>
+      </defs>
+      <image
+        href={`${API_URL}/api/sisters/${name}/avatar`}
+        x={cx - r + 2}
+        y={cy - r + 2}
+        width={(r - 2) * 2}
+        height={(r - 2) * 2}
+        preserveAspectRatio="xMidYMid slice"
+        clipPath={`url(#${clipId})`}
+      />
      <text
-        x={cx} y={cy + 7}
-        textAnchor="middle"
-        fontSize={r * 0.9}
-        style={{ userSelect: 'none', pointerEvents: 'none' }}
-      >
-        {emoji}
-      </text>
-      {/* State label below */}
-      <text
-        x={cx} y={cy + r + 16}
+        x={cx}
+        y={cy + r + 16}
        textAnchor="middle"
        fontSize={9}
        fontFamily="var(--font-mono)"
@@ -251,15 +241,28 @@ function SisterCircle({
 }

 function SubagentCircle({
-  cx, cy, r, state, label, selected, motion, motionBegin, onClick,
+  cx,
+  cy,
+  r,
+  state,
+  label,
+  selected,
+  motion,
+  motionBegin,
+  onClick,
 }: {
-  cx: number; cy: number; r: number;
-  state: AgentState; label: string; selected: boolean;
+  cx: number;
+  cy: number;
+  r: number;
+  state: AgentState;
+  label: string;
+  selected: boolean;
  motion: { dx: number; dy: number; dur: string } | null;
  motionBegin: string;
  onClick: () => void;
 }) {
  const color = STATE_COLORS[state];
+
  return (
    <g onClick={onClick} style={{ cursor: 'pointer' }}>
      {motion && (
@@ -275,23 +278,15 @@ function SubagentCircle({
      {selected && (
        <circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
      )}
-      <circle
-        cx={cx} cy={cy} r={r + 2}
-        fill="none" stroke={color} strokeWidth={1}
-        opacity={state === 'idle' ? 0.3 : 0.8}
-      >
+      <circle cx={cx} cy={cy} r={r + 2} fill="none" stroke={color} strokeWidth={1} opacity={state === 'idle' ? 0.3 : 0.8}>
        {state === 'thinking' && (
-          <animate
-            attributeName="opacity"
-            values="0.35;0.95;0.35"
-            dur="2s"
-            repeatCount="indefinite"
-          />
+          <animate attributeName="opacity" values="0.35;0.95;0.35" dur="2s" repeatCount="indefinite" />
        )}
      </circle>
      <circle cx={cx} cy={cy} r={r} fill="#1a1a1a" stroke={color} strokeWidth={0.8} />
      <text
-        x={cx} y={cy + 4}
+        x={cx}
+        y={cy + 4}
        textAnchor="middle"
        fontSize={8}
        fontFamily="var(--font-mono)"
@@ -299,42 +294,30 @@ function SubagentCircle({
        opacity={0.9}
        style={{ userSelect: 'none', pointerEvents: 'none' }}
      >
-        {label.length > 8 ? label.slice(0, 7) + '…' : label}
+        {label.length > 8 ? `${label.slice(0, 7)}…` : label}
      </text>
    </g>
  );
 }

-function ConnectorLine({
-  x1, y1, x2, y2, active,
-}: {
-  x1: number; y1: number; x2: number; y2: number; active: boolean;
-}) {
+function ConnectorLine({ x1, y1, x2, y2, active }: { x1: number; y1: number; x2: number; y2: number; active: boolean }) {
  return (
    <line
-      x1={x1} y1={y1} x2={x2} y2={y2}
+      x1={x1}
+      y1={y1}
+      x2={x2}
+      y2={y2}
      stroke={active ? 'rgba(245,245,245,0.35)' : 'rgba(255,255,255,0.08)'}
      strokeWidth={active ? 1.5 : 1}
      strokeDasharray={active ? '6 4' : '3 4'}
      strokeDashoffset={active ? 40 : 0}
    >
-      {active && (
-        <animate
-          attributeName="stroke-dashoffset"
-          values="40;0"
-          dur="1.4s"
-          repeatCount="indefinite"
-        />
-      )}
+      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.4s" repeatCount="indefinite" />}
    </line>
  );
 }

-function PathConnector({
-  d, active,
-}: {
-  d: string; active: boolean;
-}) {
+function PathConnector({ d, active }: { d: string; active: boolean }) {
  return (
    <path
      d={d}
@@ -344,27 +327,11 @@ function PathConnector({
      strokeDasharray={active ? '6 4' : '3 4'}
      strokeDashoffset={active ? 40 : 0}
    >
-      {active && (
-        <animate
-          attributeName="stroke-dashoffset"
-          values="40;0"
-          dur="1.8s"
-          repeatCount="indefinite"
-        />
-      )}
+      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.8s" repeatCount="indefinite" />}
    </path>
  );
 }

-// ─── Main Component ───────────────────────────────────────────────────────────
-
-const SISTER_EMOJIS: Record<SisterName, string> = {
-  harang: '🦊',
-  narang: '🦊',
-  darang: '🐱',
-  erang:  '🐺',
-};
-
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];

 export default function OfficeScene({
@@ -373,6 +340,7 @@ export default function OfficeScene({
  onSelectSister,
  onSelectSubagent,
  dataMode,
+  subagentMode,
 }: OfficeSceneProps) {
  const getSister = useCallback(
    (name: SisterName) => sisters.find((s) => s.name === name),
@@ -381,161 +349,101 @@ export default function OfficeScene({

  const isActive = useCallback(
    (name: SisterName) => {
-      const s = getSister(name);
-      return s?.state === 'thinking' || s?.state === 'tool_calling' || s?.state === 'speaking';
+      const sister = getSister(name);
+      return sister?.state === 'thinking' || sister?.state === 'tool_calling' || sister?.state === 'speaking';
    },
    [getSister],
  );

-  const isSisterSelected = (name: SisterName) =>
-    selected?.type === 'sister' && selected.name === name;
+  const isSisterSelected = (name: SisterName) => selected?.type === 'sister' && selected.name === name;
+  const isSubSelected = (id: string) => selected?.type === 'subagent' && selected.id === id;

-  const isSubSelected = (id: string) =>
-    selected?.type === 'subagent' && selected.id === id;
-
-  // Derive active handoff lines from sister states
  const harangActive = isActive('harang');
  const narangActive = isActive('narang');
  const darangActive = isActive('darang');
-  const erangActive  = isActive('erang');
+  const erangActive = isActive('erang');

  return (
    <SceneWrapper>
      <FreshnessLabel>
        <WsDot $connected={dataMode === 'live'} />
        {dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
-        {' · subagents: fallback'}
+        {subagentMode === 'live' ? ' · subagents: live · runtime' : ' · subagents: fallback'}
      </FreshnessLabel>

-      <svg
-        viewBox={`0 0 ${VB_W} ${VB_H}`}
-        width="100%"
-        height="100%"
-        style={{ display: 'block' }}
-      >
-        {/* ── Zone backgrounds ── */}
+      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} width="100%" height="100%" style={{ display: 'block' }}>
        {SISTER_ORDER.map((name) => {
          const [zx, zy, zw, zh] = ZONES[name];
          return (
-            <g key={`zone-${name}`}>
-              <rect
-                x={zx} y={zy} width={zw} height={zh}
-                rx={4}
-                fill={ZONE_COLORS[name]}
-                stroke={ZONE_BORDER[name]}
-                strokeWidth={1}
-              />
-            </g>
+            <rect
+              key={`zone-${name}`}
+              x={zx}
+              y={zy}
+              width={zw}
+              height={zh}
+              rx={4}
+              fill={ZONE_COLORS[name]}
+              stroke={ZONE_BORDER[name]}
+              strokeWidth={1}
+            />
          );
        })}

-        {/* ── Center corridor (vertical) ── */}
        <rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
-
-        {/* ── Center corridor (horizontal) ── */}
        <rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />

-        {/* ── Conference room ── */}
-        <ellipse
-          cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry}
-          fill="#1a1a1a"
-          stroke="rgba(255,255,255,0.15)"
-          strokeWidth={1}
-        />
-        <text
-          x={CONF.cx} y={CONF.cy + 4}
-          textAnchor="middle"
-          fontSize={9}
-          fontFamily="var(--font-mono)"
-          fill="rgba(255,255,255,0.4)"
-          style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
-        >
+        <ellipse cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry} fill="#1a1a1a" stroke="rgba(255,255,255,0.15)" strokeWidth={1} />
+        <text x={CONF.cx} y={CONF.cy + 4} textAnchor="middle" fontSize={9} fontFamily="var(--font-mono)" fill="rgba(255,255,255,0.4)">
          회의실
        </text>

-        {/* ── Connectors ── */}
+        <ConnectorLine x1={SISTER_POS.harang[0]} y1={SISTER_POS.harang[1] + 30} x2={SISTER_POS.narang[0]} y2={SISTER_POS.narang[1] - 30} active={harangActive || narangActive} />
+        <ConnectorLine x1={SISTER_POS.darang[0]} y1={SISTER_POS.darang[1] + 30} x2={SISTER_POS.erang[0]} y2={SISTER_POS.erang[1] - 30} active={darangActive || erangActive} />
+        <ConnectorLine x1={SISTER_POS.harang[0] + 30} y1={SISTER_POS.harang[1]} x2={SISTER_POS.darang[0] - 30} y2={SISTER_POS.darang[1]} active={harangActive || darangActive} />
+        <ConnectorLine x1={SISTER_POS.narang[0] + 30} y1={SISTER_POS.narang[1]} x2={SISTER_POS.erang[0] - 30} y2={SISTER_POS.erang[1]} active={narangActive || erangActive} />
+        <PathConnector d={`M${SISTER_POS.narang[0] + 20},${SISTER_POS.narang[1] - 20} Q${CONF.cx},${CONF.cy} ${SISTER_POS.darang[0] - 20},${SISTER_POS.darang[1] + 20}`} active={narangActive && darangActive} />

-        {/* harang ↔ narang (left vertical through corridor) */}
-        <ConnectorLine
-          x1={SISTER_POS.harang[0]} y1={SISTER_POS.harang[1] + 30}
-          x2={SISTER_POS.narang[0]} y2={SISTER_POS.narang[1] - 30}
-          active={harangActive || narangActive}
-        />
-
-        {/* darang ↔ erang (right vertical through corridor) */}
-        <ConnectorLine
-          x1={SISTER_POS.darang[0]} y1={SISTER_POS.darang[1] + 30}
-          x2={SISTER_POS.erang[0]}  y2={SISTER_POS.erang[1] - 30}
-          active={darangActive || erangActive}
-        />
-
-        {/* harang ↔ darang (through conference, horizontal top) */}
-        <ConnectorLine
-          x1={SISTER_POS.harang[0] + 30} y1={SISTER_POS.harang[1]}
-          x2={SISTER_POS.darang[0] - 30} y2={SISTER_POS.darang[1]}
-          active={harangActive || darangActive}
-        />
-
-        {/* narang ↔ erang (horizontal bottom) */}
-        <ConnectorLine
-          x1={SISTER_POS.narang[0] + 30} y1={SISTER_POS.narang[1]}
-          x2={SISTER_POS.erang[0] - 30}  y2={SISTER_POS.erang[1]}
-          active={narangActive || erangActive}
-        />
-
-        {/* narang → darang (review path through conference, curved) */}
-        <PathConnector
-          d={`M${SISTER_POS.narang[0] + 20},${SISTER_POS.narang[1] - 20} Q${CONF.cx},${CONF.cy} ${SISTER_POS.darang[0] - 20},${SISTER_POS.darang[1] + 20}`}
-          active={narangActive && darangActive}
-        />
-
-        {/* ── Zone labels ── */}
        {([
-          ['harang', 18,  22,  '하랑이 · Planning'] as const,
-          ['darang', 463, 22,  '다랑이 · QA'] as const,
-          ['narang', 18,  272, '나랑이 · Dev'] as const,
-          ['erang',  463, 272, '이랑이 · Infra'] as const,
+          ['harang', 18, 22, '하랑이 · Planning'] as const,
+          ['darang', 463, 22, '다랑이 · QA'] as const,
+          ['narang', 18, 272, '나랑이 · Dev'] as const,
+          ['erang', 463, 272, '이랑이 · Infra'] as const,
        ] as const).map(([name, lx, ly, text]) => (
-          <text
-            key={`label-${name}`}
-            x={lx} y={ly}
-            fontSize={10}
-            fontFamily="var(--font-mono)"
-            fill={ZONE_BORDER[name]}
-            style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
-          >
+          <text key={`label-${name}`} x={lx} y={ly} fontSize={10} fontFamily="var(--font-mono)" fill={ZONE_BORDER[name]}>
            {text}
          </text>
        ))}

-        {/* ── Sister nodes ── */}
        {SISTER_ORDER.map((name) => {
-          const sisterData = getSister(name);
-          const state: AgentState = sisterData?.state ?? 'idle';
+          const sister = getSister(name);
+          const state: AgentState = sister?.state ?? 'idle';
          const [cx, cy] = SISTER_POS[name];
          return (
            <SisterCircle
              key={`sister-${name}`}
-              cx={cx} cy={cy} r={28}
+              cx={cx}
+              cy={cy}
+              r={28}
              state={state}
-              emoji={SISTER_EMOJIS[name]}
+              name={name}
              selected={isSisterSelected(name)}
              onClick={() => onSelectSister(name)}
            />
          );
        })}

-        {/* ── Subagent nodes ── */}
        {SISTER_ORDER.map((sisterName) => {
-          const sisterData = getSister(sisterName);
-          const subagents = sisterData?.subagents ?? [];
+          const sister = getSister(sisterName);
+          const subagents = sister?.subagents ?? [];
          return subagents.map((sub, i) => {
            const pos = getSubagentPosition(sisterName, i, sub.state);
            const motion = getSubagentMotion(sub.state, i);
            return (
              <SubagentCircle
                key={sub.id}
-                cx={pos[0]} cy={pos[1]} r={14}
+                cx={pos[0]}
+                cy={pos[1]}
+                r={14}
                state={sub.state}
                label={sub.name}
                selected={isSubSelected(sub.id)}
@@ -547,10 +455,9 @@ export default function OfficeScene({
          });
        })}

-        {/* ── Subagent → Sister connector lines (thin) ── */}
        {SISTER_ORDER.map((sisterName) => {
-          const sisterData = getSister(sisterName);
-          const subagents = sisterData?.subagents ?? [];
+          const sister = getSister(sisterName);
+          const subagents = sister?.subagents ?? [];
          const [sx, sy] = SISTER_POS[sisterName];
          return subagents.map((sub, i) => {
            const pos = getSubagentPosition(sisterName, i, sub.state);
@@ -558,8 +465,10 @@ export default function OfficeScene({
            return (
              <line
                key={`conn-${sub.id}`}
-                x1={sx} y1={sy}
-                x2={pos[0]} y2={pos[1]}
+                x1={sx}
+                y1={sy}
+                x2={pos[0]}
+                y2={pos[1]}
                stroke={active ? ZONE_BORDER[sisterName] : 'rgba(255,255,255,0.05)'}
                strokeWidth={active ? 0.8 : 0.5}
                strokeDasharray="2 3"