@juho0719/cckit 0.2.3 → 0.2.5

package/assets/hooks/agent-track.sh

@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+# Agent 툴 실행 추적 — 여러 에이전트 동시 지원
+# @hook-event PreToolUse|Agent|pre
+# @hook-event PostToolUse|Agent|post
+
+AGENT_STATE_DIR="/tmp/claude-agents"
+mkdir -p "$AGENT_STATE_DIR"
+
+EVENT="${1:-post}"
+INPUT=$(cat)
+
+# subagent_type + description으로 고유 파일명 생성
+AGENT_ID=$(echo "$INPUT" | python3 -c "
+import sys, json, hashlib
+try:
+    d = json.load(sys.stdin)
+    ti = d.get('tool_input', {})
+    key = (ti.get('subagent_type', '') or '') + '|' + (ti.get('description', '') or '')
+    print(hashlib.md5(key.encode()).hexdigest()[:12])
+except:
+    print('')
+" 2>/dev/null)
+
+if [ -z "$AGENT_ID" ]; then
+  exit 0
+fi
+
+if [ "$EVENT" = "pre" ]; then
+  SUBAGENT_TYPE=$(echo "$INPUT" | python3 -c "
+import sys, json
+try:
+    d = json.load(sys.stdin)
+    print(d.get('tool_input', {}).get('subagent_type', '') or '')
+except:
+    print('')
+" 2>/dev/null)
+
+  DESCRIPTION=$(echo "$INPUT" | python3 -c "
+import sys, json
+try:
+    d = json.load(sys.stdin)
+    desc = d.get('tool_input', {}).get('description', '') or ''
+    print(desc[:50] if len(desc) > 50 else desc)
+except:
+    print('')
+" 2>/dev/null)
+
+  if [ -n "$SUBAGENT_TYPE" ]; then
+    echo "${SUBAGENT_TYPE}|${DESCRIPTION}" > "${AGENT_STATE_DIR}/${AGENT_ID}"
+  fi
+else
+  rm -f "${AGENT_STATE_DIR}/${AGENT_ID}"
+fi

package/assets/hooks/auto-commit-push.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+# Auto commit & push hook - runs when Claude Code finishes a response
+# @hook-event Stop||
+# Compatible with bash 3.2 (macOS default)
+
+# Get the working directory from the hook input
+WORK_DIR=$(echo "$CLAUDE_HOOK_INPUT" | jq -r '.cwd // empty' 2>/dev/null)
+if [ -z "$WORK_DIR" ]; then
+  WORK_DIR="$(pwd)"
+fi
+
+cd "$WORK_DIR" 2>/dev/null || exit 0
+
+# Check if we're in a git repo
+if ! git rev-parse --is-inside-work-tree &>/dev/null; then
+  exit 0
+fi
+
+# Check if there are any changes
+if git diff --quiet && git diff --cached --quiet && [ -z "$(git ls-files --others --exclude-standard)" ]; then
+  exit 0
+fi
+
+BRANCH=$(git symbolic-ref --short HEAD 2>/dev/null)
+if [ -z "$BRANCH" ]; then
+  exit 0
+fi
+
+# Stage all changes
+git add -A
+
+# ── 변경 파일 목록 수집 ───────────────────────────────
+ADDED_FILES=$(git diff --cached --diff-filter=A --name-only)
+MODIFIED_FILES=$(git diff --cached --diff-filter=M --name-only)
+DELETED_FILES=$(git diff --cached --diff-filter=D --name-only)
+
+ALL_FILES=$(git diff --cached --name-only)
+ADDED_COUNT=$(echo "$ADDED_FILES"   | grep -c . || true)
+MODIFIED_COUNT=$(echo "$MODIFIED_FILES" | grep -c . || true)
+DELETED_COUNT=$(echo "$DELETED_FILES"  | grep -c . || true)
+
+# ── 커밋 타입 감지 ────────────────────────────────────
+# test: 파일이 모두 테스트/설정 관련이면 test/chore
+HAS_TEST=$(echo "$ALL_FILES" | grep -E "(\.test\.|\.spec\.|__tests__|e2e/)" | head -1)
+HAS_CONFIG=$(echo "$ALL_FILES" | grep -E "\.(config|json|yaml|yml|env|toml)$" | head -1)
+HAS_ROADMAP=$(echo "$ALL_FILES" | grep -E "roadmap|ROADMAP|\.md$" | head -1)
+HAS_SRC=$(echo "$ALL_FILES" | grep -E "^src/" | head -1)
+
+if [ -n "$HAS_TEST" ] && [ -z "$HAS_SRC" ]; then
+  COMMIT_TYPE="test"
+elif [ -n "$HAS_CONFIG" ] && [ -z "$HAS_SRC" ]; then
+  COMMIT_TYPE="chore"
+elif [ -n "$HAS_ROADMAP" ] && [ -z "$HAS_SRC" ]; then
+  COMMIT_TYPE="docs"
+else
+  COMMIT_TYPE="feat"
+fi
+
+# ── 스코프: 가장 많이 변경된 2단계 디렉토리 ────────────
+SCOPE=$(echo "$ALL_FILES" \
+  | awk -F'/' 'NF>=2 {print $1"/"$2} NF==1 {print $1}' \
+  | sort | uniq -c | sort -rn \
+  | awk 'NR==1{print $2}')
+[ -z "$SCOPE" ] && SCOPE="root"
+
+# ── Subject: 주요 파일명 나열 (확장자 제거, 최대 3개) ───
+key_files() {
+  echo "$1" | while IFS= read -r f; do
+    [ -n "$f" ] && basename "$f" | sed 's/\.[^.]*$//'
+  done | head -3 | tr '\n' ',' | sed 's/,$//' | sed 's/,/, /g'
+}
+
+ADDED_NAMES=$(key_files "$ADDED_FILES")
+MODIFIED_NAMES=$(key_files "$MODIFIED_FILES")
+DELETED_NAMES=$(key_files "$DELETED_FILES")
+
+SUBJECT_PARTS=""
+[ -n "$ADDED_NAMES" ]   && SUBJECT_PARTS="${SUBJECT_PARTS}add ${ADDED_NAMES}"
+[ -n "$MODIFIED_NAMES" ] && SUBJECT_PARTS="${SUBJECT_PARTS:+$SUBJECT_PARTS; }update ${MODIFIED_NAMES}"
+[ -n "$DELETED_NAMES" ]  && SUBJECT_PARTS="${SUBJECT_PARTS:+$SUBJECT_PARTS; }remove ${DELETED_NAMES}"
+
+# 파일이 4개 이상이면 개수도 병기
+TOTAL=$((ADDED_COUNT + MODIFIED_COUNT + DELETED_COUNT))
+if [ "$TOTAL" -gt 3 ]; then
+  SUBJECT_PARTS="${SUBJECT_PARTS} (+$((TOTAL - 3)) more)"
+fi
+
+SUBJECT="${COMMIT_TYPE}(${SCOPE}): ${SUBJECT_PARTS}"
+
+# ── Body: 전체 파일 목록 ─────────────────────────────
+BODY=""
+if [ -n "$ADDED_FILES" ]; then
+  BODY="${BODY}New files:\n"
+  while IFS= read -r f; do
+    [ -n "$f" ] && BODY="${BODY}  + ${f}\n"
+  done <<< "$ADDED_FILES"
+fi
+if [ -n "$MODIFIED_FILES" ]; then
+  [ -n "$BODY" ] && BODY="${BODY}\n"
+  BODY="${BODY}Modified:\n"
+  while IFS= read -r f; do
+    [ -n "$f" ] && BODY="${BODY}  ~ ${f}\n"
+  done <<< "$MODIFIED_FILES"
+fi
+if [ -n "$DELETED_FILES" ]; then
+  [ -n "$BODY" ] && BODY="${BODY}\n"
+  BODY="${BODY}Deleted:\n"
+  while IFS= read -r f; do
+    [ -n "$f" ] && BODY="${BODY}  - ${f}\n"
+  done <<< "$DELETED_FILES"
+fi
+
+FULL_MSG="${SUBJECT}\n\n${BODY}"
+
+git commit -m "$(printf "%b" "$FULL_MSG")" --no-verify 2>/dev/null
+
+# Push to remote if available
+REMOTE=$(git remote 2>/dev/null | head -1)
+if [ -n "$REMOTE" ]; then
+  git push "$REMOTE" "$BRANCH" --no-verify 2>/dev/null
+fi
+
+exit 0

package/assets/hooks/on-prompt-start.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+# 새 요청 시작 시 agent 상태 파일 초기화
+# @hook-event UserPromptSubmit||
+
+rm -f /tmp/claude-agents/* 2>/dev/null
+exit 0

package/assets/hooks/skill-track.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+# Skill 툴 실행 추적
+# @hook-event PreToolUse|Skill|pre
+# @hook-event PostToolUse|Skill|post
+
+SKILL_STATE_FILE="/tmp/claude-active-skill.txt"
+
+EVENT="${1:-post}"
+INPUT=$(cat)
+
+if [ "$EVENT" = "pre" ]; then
+  SKILL_NAME=$(echo "$INPUT" | python3 -c "
+import sys, json
+try:
+    d = json.load(sys.stdin)
+    print(d.get('tool_input', {}).get('skill', '') or '')
+except:
+    print('')
+" 2>/dev/null)
+
+  if [ -n "$SKILL_NAME" ]; then
+    echo "$SKILL_NAME" > "$SKILL_STATE_FILE"
+  fi
+else
+  rm -f "$SKILL_STATE_FILE"
+fi

package/assets/hooks/subagent-notify.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+# 응답 완료 시 macOS 알림 발송 — 마지막 커밋 메시지를 요약으로 표시
+# @hook-event Stop||
+
+WORK_DIR=$(echo "$CLAUDE_HOOK_INPUT" | jq -r '.cwd // empty' 2>/dev/null)
+if [ -z "$WORK_DIR" ]; then
+  WORK_DIR="$(pwd)"
+fi
+
+# 마지막 git 커밋 메시지를 알림 본문으로 사용
+MSG=""
+if git -C "$WORK_DIR" rev-parse --is-inside-work-tree &>/dev/null; then
+  MSG=$(git -C "$WORK_DIR" log --oneline -1 --format="%s" 2>/dev/null)
+fi
+
+if [ -z "$MSG" ]; then
+  MSG="응답이 완료됐습니다."
+fi
+
+osascript -e "display notification \"${MSG}\" with title \"Claude Code\" subtitle \"응답 완료\" sound name \"Glass\""

package/assets/skills/plan-viewer/SKILL.md

@@ -0,0 +1,162 @@
+---
+name: plan-viewer
+description: "아키텍처/계획 단계의 구성을 브라우저 기반 비주얼 뷰어로 보여주는 스킬. 컨텍스트 탐색 → 질문 → 접근안 제시 → 디자인 제시 → 스펙 문서 → 리뷰 루프 → 계획 작성 순서로 진행. 시각 자료가 필요한 질문에서만 브라우저를 활성화."
+argument-hint: [topic or feature description]
+allowed-tools: Bash, Read, Write, Edit, Glob, Grep, Agent
+---
+
+# Plan Viewer
+
+아키텍처와 계획 단계의 구성을 브라우저 기반 비주얼 뷰어로 보여주는 스킬.
+세션 전체를 브라우저 모드로 바꾸지 않고, **질문 단위로 시각 자료가 더 나을 때만** 브라우저를 활성화한다.
+
+<HARD-GATE>
+이 스킬은 설계/계획 단계 전용이다. 코드 구현, 스캐폴딩 등 실행 작업은 수행하지 않는다.
+설계가 완료되고 사용자 승인을 받은 후에야 구현 단계로 넘어갈 수 있다.
+</HARD-GATE>
+
+## 체크리스트
+
+반드시 아래 순서를 따른다:
+
+1. **컨텍스트 탐색** — 프로젝트 파일, 문서, 최근 커밋 확인
+2. **비주얼 뷰어 제안** — 시각적 질문이 예상될 때 사용자 동의 요청 (별도 메시지)
+3. **질문** — 한 번에 하나씩, 목적/제약/성공 기준 파악
+4. **접근안 2~3개 제시** — 트레이드오프와 추천안 포함
+5. **디자인 제시** — 섹션별로 나눠서 제시, 각 섹션마다 사용자 승인
+6. **스펙 문서 작성** — `docs/specs/YYYY-MM-DD-<topic>-design.md`에 저장
+7. **리뷰 루프** — spec-reviewer 서브에이전트로 검증, 문제 발견 시 수정 후 재검증 (최대 5회)
+8. **사용자 스펙 리뷰** — 사용자에게 작성된 스펙 검토 요청
+9. **계획 작성** — `docs/plans/YYYY-MM-DD-<topic>-plan.md`에 구현 계획 저장
+
+## 프로세스 흐름
+
+```
+컨텍스트 탐색
+    ↓
+시각적 질문 예상? ─yes─→ 비주얼 뷰어 제안 (별도 메시지)
+    │no                         ↓
+    ↓                     사용자 수락?
+질문 (한 번에 하나)  ←──────────┘
+    ↓
+접근안 2~3개 제시
+    ↓
+디자인 제시 (섹션별)
+    ↓
+사용자 승인? ─no─→ 수정 후 재제시
+    │yes
+    ↓
+스펙 문서 작성
+    ↓
+리뷰 루프 (최대 5회)
+    ↓
+사용자 스펙 리뷰
+    ↓
+계획(md) 작성
+```
+
+## 비주얼 뷰어
+
+브라우저 기반 비주얼 뷰어. 세션 모드가 아닌 **도구**로 사용한다.
+사용자가 수락하더라도 **매 질문마다** 브라우저/터미널 중 적절한 것을 판단한다.
+
+### 제안 메시지
+
+시각적 질문이 예상될 때 **별도 메시지**로 제안한다 (다른 내용과 섞지 않는다):
+
+> "이후 논의에서 아키텍처 다이어그램, 레이아웃 비교, 플로우차트 등 시각 자료가 도움이 될 수 있습니다. 브라우저에서 시각 자료를 보여드릴까요? (로컬 URL을 열어야 합니다)"
+
+### 브라우저 vs 터미널 판단 기준
+
+**브라우저 사용** — 콘텐츠 자체가 시각적일 때:
+- 아키텍처 다이어그램 — 시스템 컴포넌트, 데이터 흐름, 관계도
+- UI 목업 — 와이어프레임, 레이아웃, 네비게이션 구조
+- 비교 뷰 — 두 아키텍처 비교, 두 레이아웃 비교
+- 플로우차트 — 상태 머신, 프로세스 흐름
+- 시퀀스 다이어그램 — 서비스 간 통신 흐름
+
+**터미널 사용** — 텍스트/표로 충분할 때:
+- 요구사항, 스코프 질문
+- 개념적 A/B/C 선택
+- 트레이드오프 비교표
+- 기술 의사결정 (API 설계, 데이터 모델링)
+- 명확화 질문
+
+> 아키텍처 "주제"에 대한 질문이라고 해서 자동으로 시각적 질문이 되는 것은 아니다.
+> "마이크로서비스로 갈까요, 모놀리스로 갈까요?"는 개념적 질문 → 터미널.
+> "이 두 아키텍처 다이어그램 중 어느 것이 적합할까요?"는 시각적 질문 → 브라우저.
+
+### 서버 시작
+
+```bash
+# 프로젝트 디렉터리에 영구 저장
+scripts/start-server.sh --project-dir /path/to/project
+
+# 반환: {"type":"server-started","port":52341,"url":"http://localhost:52341",
+#         "screen_dir":"/path/to/project/.plan-viewer/sessions/12345-1706000000"}
+```
+
+`screen_dir`을 저장하고, 사용자에게 URL을 알려준다.
+
+### 비주얼 뷰어 사용 시 상세 가이드
+
+사용자가 뷰어를 수락하면, 상세 가이드를 읽고 진행한다:
+`skills/plan-viewer/visual-guide.md`
+
+## 프로세스 상세
+
+### 1. 컨텍스트 탐색
+
+- 프로젝트 구조, 기존 문서, 최근 커밋을 확인
+- 프로젝트의 기술 스택, 아키텍처 패턴을 파악
+
+### 2. 질문
+
+- **한 번에 하나씩** — 여러 질문을 한꺼번에 하지 않는다
+- 가능하면 **객관식** 형태로 제시
+- 목적, 제약 조건, 성공 기준에 집중
+- 범위가 너무 넓으면 먼저 분해를 제안
+
+### 3. 접근안 2~3개 제시
+
+- 각 접근안의 트레이드오프를 명확히 제시
+- 추천안을 먼저 제시하고 이유를 설명
+- 시각적 비교가 유용하면 브라우저로 보여줌
+
+### 4. 디자인 제시
+
+- 복잡도에 비례하여 섹션 크기 조절
+- 각 섹션 후 사용자 승인 확인
+- 다루는 내용: 아키텍처, 컴포넌트, 데이터 흐름, 에러 처리, 테스트
+
+### 5. 스펙 문서 작성
+
+- `docs/specs/YYYY-MM-DD-<topic>-design.md`에 저장
+- git commit
+
+### 6. 리뷰 루프
+
+스펙 문서 작성 후 spec-reviewer 서브에이전트를 실행:
+
+1. 서브에이전트 실행 (spec-reviewer-prompt.md 참조)
+2. 문제 발견 시: 수정 → 재실행 반복
+3. 5회 초과 시 사용자에게 에스컬레이션
+
+### 7. 사용자 스펙 리뷰
+
+> "스펙이 `<path>`에 작성되었습니다. 구현 계획 작성 전에 검토해 주세요."
+
+### 8. 계획 작성
+
+- `docs/plans/YYYY-MM-DD-<topic>-plan.md`에 구현 계획 저장
+- 구현 순서, 의존성, 마일스톤 포함
+- git commit
+
+## 핵심 원칙
+
+- **한 번에 하나의 질문** — 사용자를 압도하지 않는다
+- **시각 자료는 선택적** — 세션 전체가 아닌 질문 단위로 판단
+- **YAGNI** — 불필요한 기능은 설계에서 제외
+- **접근안 탐색** — 반드시 2~3가지 접근안을 비교
+- **점진적 검증** — 섹션별 승인, 스펙 리뷰 루프
+- **계획으로 마무리** — 최종 산출물은 항상 md 계획 파일

package/assets/skills/plan-viewer/scripts/frame-template.html

@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Plan Viewer</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; overflow: hidden; }
+
+    /* ===== THEME VARIABLES ===== */
+    :root {
+      --bg-primary: #f5f5f7;
+      --bg-secondary: #ffffff;
+      --bg-tertiary: #e5e5e7;
+      --border: #d1d1d6;
+      --text-primary: #1d1d1f;
+      --text-secondary: #86868b;
+      --text-tertiary: #aeaeb2;
+      --accent: #5856d6;
+      --accent-hover: #6866e0;
+      --success: #34c759;
+      --warning: #ff9f0a;
+      --error: #ff3b30;
+      --selected-bg: #eeedf9;
+      --selected-border: #5856d6;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg-primary: #1d1d1f;
+        --bg-secondary: #2d2d2f;
+        --bg-tertiary: #3d3d3f;
+        --border: #424245;
+        --text-primary: #f5f5f7;
+        --text-secondary: #86868b;
+        --text-tertiary: #636366;
+        --accent: #7d7aff;
+        --accent-hover: #9492ff;
+        --selected-bg: rgba(125, 122, 255, 0.15);
+        --selected-border: #7d7aff;
+      }
+    }
+
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      display: flex;
+      flex-direction: column;
+      line-height: 1.5;
+    }
+
+    /* ===== FRAME STRUCTURE ===== */
+    .header {
+      background: var(--bg-secondary);
+      padding: 0.5rem 1.5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .header h1 { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
+    .header .status { font-size: 0.7rem; color: var(--success); display: flex; align-items: center; gap: 0.4rem; }
+    .header .status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
+
+    .main { flex: 1; overflow-y: auto; }
+    #claude-content { padding: 2rem; min-height: 100%; }
+
+    .indicator-bar {
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border);
+      padding: 0.5rem 1.5rem;
+      flex-shrink: 0;
+      text-align: center;
+    }
+    .indicator-bar span {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+    }
+    .indicator-bar .selected-text {
+      color: var(--accent);
+      font-weight: 500;
+    }
+
+    /* ===== TYPOGRAPHY ===== */
+    h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
+    h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
+    .subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }
+    .section { margin-bottom: 2rem; }
+    .label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+
+    /* ===== OPTIONS (A/B/C choices) ===== */
+    .options { display: flex; flex-direction: column; gap: 0.75rem; }
+    .option {
+      background: var(--bg-secondary);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 1rem 1.25rem;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+    .option:hover { border-color: var(--accent); }
+    .option.selected { background: var(--selected-bg); border-color: var(--selected-border); }
+    .option .letter {
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      width: 1.75rem; height: 1.75rem;
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 600; font-size: 0.85rem; flex-shrink: 0;
+    }
+    .option.selected .letter { background: var(--accent); color: white; }
+    .option .content { flex: 1; }
+    .option .content h3 { font-size: 0.95rem; margin-bottom: 0.15rem; }
+    .option .content p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
+
+    /* ===== CARDS ===== */
+    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
+    .card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+    .card.selected { border-color: var(--selected-border); border-width: 2px; }
+    .card-image { background: var(--bg-tertiary); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
+    .card-body { padding: 1rem; }
+    .card-body h3 { margin-bottom: 0.25rem; }
+    .card-body p { color: var(--text-secondary); font-size: 0.85rem; }
+
+    /* ===== MOCKUP CONTAINER ===== */
+    .mockup {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      margin-bottom: 1.5rem;
+    }
+    .mockup-header {
+      background: var(--bg-tertiary);
+      padding: 0.5rem 1rem;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      border-bottom: 1px solid var(--border);
+    }
+    .mockup-body { padding: 1.5rem; }
+
+    /* ===== SPLIT VIEW ===== */
+    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+    @media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
+
+    /* ===== PROS/CONS ===== */
+    .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
+    .pros, .cons { background: var(--bg-secondary); border-radius: 8px; padding: 1rem; }
+    .pros h4 { color: var(--success); font-size: 0.85rem; margin-bottom: 0.5rem; }
+    .cons h4 { color: var(--error); font-size: 0.85rem; margin-bottom: 0.5rem; }
+    .pros ul, .cons ul { margin-left: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); }
+    .pros li, .cons li { margin-bottom: 0.25rem; }
+
+    /* ===== PLACEHOLDER ===== */
+    .placeholder {
+      background: var(--bg-tertiary);
+      border: 2px dashed var(--border);
+      border-radius: 8px;
+      padding: 2rem;
+      text-align: center;
+      color: var(--text-tertiary);
+    }
+
+    /* ===== ARCHITECTURE DIAGRAM HELPERS ===== */
+    .arch-diagram {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 1.5rem;
+    }
+    .arch-row {
+      display: flex;
+      gap: 1rem;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .arch-box {
+      background: var(--bg-secondary);
+      border: 2px solid var(--accent);
+      border-radius: 10px;
+      padding: 1rem 1.5rem;
+      text-align: center;
+      min-width: 120px;
+    }
+    .arch-box strong { display: block; font-size: 0.9rem; }
+    .arch-box small { color: var(--text-secondary); font-size: 0.75rem; }
+    .arch-arrow {
+      color: var(--text-secondary);
+      font-size: 1.2rem;
+      line-height: 1;
+    }
+    .arch-connector {
+      width: 2px;
+      height: 24px;
+      background: var(--border);
+    }
+
+    /* ===== FLOW CHART HELPERS ===== */
+    .flow-step {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.75rem 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .flow-step .step-num {
+      background: var(--accent);
+      color: white;
+      width: 1.5rem; height: 1.5rem;
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
+    }
+    .flow-step.decision {
+      border-color: var(--warning);
+      background: rgba(255, 159, 10, 0.08);
+    }
+
+    /* ===== MOCK ELEMENTS ===== */
+    .mock-nav { background: var(--accent); color: white; padding: 0.75rem 1rem; display: flex; gap: 1.5rem; font-size: 0.9rem; }
+    .mock-sidebar { background: var(--bg-tertiary); padding: 1rem; min-width: 180px; }
+    .mock-content { padding: 1.5rem; flex: 1; }
+    .mock-button { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
+    .mock-input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; width: 100%; }
+
+    /* ===== SEQUENCE DIAGRAM HELPERS ===== */
+    .seq-diagram { font-family: monospace; font-size: 0.85rem; line-height: 2; }
+    .seq-diagram .seq-actor { font-weight: bold; color: var(--accent); }
+    .seq-diagram .seq-arrow { color: var(--text-secondary); }
+    .seq-diagram .seq-msg { color: var(--text-primary); }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Plan Viewer</h1>
+    <div class="status">Connected</div>
+  </div>
+
+  <div class="main">
+    <div id="claude-content">
+      <!-- CONTENT -->
+    </div>
+  </div>
+
+  <div class="indicator-bar">
+    <span id="indicator-text">옵션을 클릭한 후 터미널로 돌아가세요</span>
+  </div>
+
+</body>
+</html>