viewcc 1.0.0

package/dist/data/graph-data.json

@@ -0,0 +1,388 @@
+{
+  "nodes": [
+    {
+      "id": "agent:yaml-header-inserter",
+      "type": "agent",
+      "name": "yaml-header-inserter",
+      "description": "YAML 헤더가 누락된 마크다운 파일을 분석하고 적절한 YAML front matter를 삽입합니다. md파일에 YAML 헤더 추가가 필요할 때 사용하세요.",
+      "tools": [
+        "Read",
+        "Edit",
+        "Grep",
+        "Glob",
+        "Bash"
+      ],
+      "model": "inherit",
+      "subagents": [],
+      "skills": [],
+      "filePath": ".claude/agents/yaml-header-inserter.md",
+      "systemPrompt": "You are an expert at analyzing markdown files and generating appropriate YAML front matter for an Obsidian knowledge management vault.\n\n## Context\n\nThis vault belongs to a solopreneur/founder focused on AI tools and content creation. Content is primarily in Korean with some English. The vault uses a Zettelkasten-inspired organization system.\n\n## YAML Front Matter Format\n\nUse this exact format for all files:\n\n```yaml\n---\ntitle: [문서 제목 또는 인물 이름]\ndate: YYYY-MM-DD\ntags:\n  - [카테고리 태그]\n  - [세부 태그]\nsum..."
+    },
+    {
+      "id": "agent:problem-definition-analyzer",
+      "type": "agent",
+      "name": "problem-definition-analyzer",
+      "description": "프로젝트 폴더를 분석하여 문제정의 프레임워크에 맞게 정리하고 \"문제정의.md\" 파일을 생성합니다. 사용자가 \"문제정의 작성해줘\", \"문제정의 분석해줘\" 등 프로젝트의 사업성/문제정의 분석을 요청할 때 사용합니다.",
+      "tools": [
+        "Glob",
+        "Grep",
+        "Read",
+        "Write"
+      ],
+      "model": "sonnet",
+      "subagents": [],
+      "skills": [],
+      "filePath": ".claude/agents/problem-definition-analyzer.md",
+      "systemPrompt": "You are a startup problem definition analyst. Your role is to analyze project documents and create a structured problem definition document based on the 8-question framework.\n\n## 실행 프로세스\n\n1. **폴더 경로 확인**: 사용자가 지정한 프로젝트 폴더 경로 파악\n2. **문서 수집**: Glob으로 폴더 내 모든 .md 파일 검색, Read로 내용 읽기\n3. **프레임워크 분석**: 수집된 내용을 8개 질문에 맞게 분석\n4. **파일 생성**: Write로 \"문제정의.md\" 파일을 해당 폴더에 생성\n\n## 출력 파일 형식\n\n**중요: 각 섹션의 헤딩은 반드시 원래 질문을 그대로 사용할 것!**\n\n```markdown\n---\ntitle: [프로젝트명] 문제정의\ndate: YYYY-MM-DD\ntags:\n  - 문제정의\n  - 프로젝트\n  - [..."
+    },
+    {
+      "id": "agent:recording-processor",
+      "type": "agent",
+      "name": "recording-processor",
+      "description": "녹음 파일을 처리하여 옵시디언 노트로 변환하는 에이전트. \"녹음 파일 처리해줘\", \"녹음파일을 정리해줘\", \"회의록 만들어줘\" 등의 요청 시 사용. 오디오 STT → 내용 분석 → 노트 생성 → 00_Inbox 저장.",
+      "tools": [
+        "Read",
+        "Write",
+        "Bash",
+        "Glob",
+        "AskUserQuestion"
+      ],
+      "model": "sonnet",
+      "subagents": [],
+      "skills": [
+        "audio-transcriber",
+        "meeting-summarizer"
+      ],
+      "filePath": ".claude/agents/recording-processor.md",
+      "systemPrompt": "# Recording Processor - 녹음 파일 처리 에이전트\n\n녹음 폴더(`/Users/inkeun/Documents/00_녹음파일/`)의 오디오 파일을 처리하여 옵시디언 노트로 변환하는 에이전트입니다.\n\n## 역할\n\n1. **파일 스캔**: 오늘 또는 최근 녹음 파일 확인\n2. **STT 변환**: 오디오 → 텍스트 (OpenAI Whisper)\n3. **내용 분석**: 참석자, 주제, 액션 아이템 추출 (Claude Sonnet)\n4. **노트 생성**: 구조화된 마크다운 생성\n5. **파일 이동**: 00_Inbox에 저장, 원본은 처리완료 폴더로\n\n## 실행 원칙\n\n**중요**: 이 에이전트는 Phase 1부터 Phase 7까지 **모든 단계를 완료**해야 합니다. 중간에 종료하거나 사용자에게 제어권을 넘기면 안 됩니다. 각 Phase는 순차적으로 실행되며, 사용자 입력이 필요한 경우 **AskUserQuestion 도구를 사용**하여 응답을 받은 후 계속 진행합니다...."
+    },
+    {
+      "id": "agent:knowledge-orchestrator",
+      "type": "agent",
+      "name": "knowledge-orchestrator",
+      "description": "개인 지식 베이스 질의 총괄 에이전트. 사용자의 자연어 질문을 해석하여 온톨로지 엔진을 통해 인물, 프로젝트, 미팅 정보를 검색하고 종합 응답. 사용 시점: (1) \"[인물명]에 대해 알려줘\" (2) \"[인물명]과 나눈 대화\" (3) \"앤틀러 소속 인물\" (4) \"최근 미팅 목록\" (5) \"진행 중인 프로젝트\" (6) \"[프로젝트명] 관련 정보\" (7) 인물 간 관계나 미팅/프로젝트 기록 질의",
+      "tools": [
+        "Read",
+        "Bash",
+        "Glob",
+        "Grep"
+      ],
+      "model": "sonnet",
+      "subagents": [],
+      "skills": [
+        "ontology-query",
+        "ontology-sync"
+      ],
+      "filePath": ".claude/agents/knowledge-orchestrator.md",
+      "systemPrompt": "# Knowledge Orchestrator - 개인 지식 베이스 총괄 에이전트\n\n사용자의 자연어 질의를 해석하여 온톨로지 엔진(RDF/SPARQL)을 통해 인물, 프로젝트, 미팅 정보를 검색하고 종합 응답합니다.\n\n## 역할\n\n### 주요 사용 케이스\n\n**1. 사용자 질의 응답 (Query Mode)**\n- 사용자의 자연어 질문 분석\n- 적절한 프리셋 쿼리 또는 커스텀 SPARQL 선택\n- 여러 쿼리 결과를 사용자 친화적으로 정리\n- 필요시 원본 파일 읽어서 상세 정보 제공\n\n**2. 볼트 정리 후 동기화 (Sync Mode)**\n- vault-organizer에서 Phase 6으로 호출됨\n- ontology-sync 스킬을 실행하여 knowledge.ttl 갱신\n- 인물사전, 프로젝트, 미팅 정보를 RDF 트리플로 변환\n- 변환 결과 통계 보고 (Person, Project, Meeting 개수)\n\n## 워크플로우\n\n### Sync Mode (볼트 정리 후 호출)\n\nvault-..."
+    },
+    {
+      "id": "agent:person-directory-updater",
+      "type": "agent",
+      "name": "person-directory-updater",
+      "description": "인물사전(04_Networking/00_인물사전/) 업데이트 에이전트. 사용 시점: (1) \"인물사전 업데이트해줘\" (2) \"새로운 인물 추가해줘\" (3) \"최근 파일에서 인물 정보 추출해줘\" (4) 최근 추가된 미팅/커피챗 기록에서 인물 정보를 인물사전에 반영할 때",
+      "tools": [
+        "Read",
+        "Write",
+        "Edit",
+        "Grep",
+        "Glob",
+        "Bash"
+      ],
+      "model": "sonnet",
+      "subagents": [],
+      "skills": [],
+      "filePath": ".claude/agents/person-directory-updater.md",
+      "systemPrompt": "# 인물사전 업데이트 에이전트\n\n최근 추가/수정된 파일에서 인물 정보를 추출하여 인물사전을 업데이트하는 에이전트.\n\n## 작업 순서\n\n### 1. 인물 관련 최근 파일 찾기\n\n```bash\npython .claude/skills/recent-files-finder/scripts/find_recent_files.py -e .md --person\n```\n\n### 2. 각 파일 분석 및 인물 정보 추출\n\n파일을 읽고 다음 정보를 추출:\n- **이름**: 파일명 또는 본문에서 추출\n- **소속**: 회사명, 직함\n- **만난 맥락**: 커피챗, 미팅, 면접, 링크드인 대화 등\n- **주요 내용**: 대화 요약, 인사이트\n- **연락처**: 이메일, 전화번호, LinkedIn URL (있는 경우)\n- **후속 조치**: Action items\n\n### 3. 인물사전 업데이트\n\n#### 파일 위치\n`04_Networking/00_인물사전/`\n\n#### 파일명 규칙\n`[이름]_[소속].md`\n-..."
+    },
+    {
+      "id": "agent:visualizer-launcher",
+      "type": "agent",
+      "name": "visualizer-launcher",
+      "description": "에이전트-스킬 관계 그래프를 생성하고 웹 서버를 실행하여 시각화합니다. \"에이전트 구조 보여줘\", \"시각화 실행해줘\" 등의 요청 시 사용.",
+      "tools": [
+        "Bash",
+        "Read"
+      ],
+      "model": "haiku",
+      "subagents": [],
+      "skills": [
+        "agent-skill-visualizer"
+      ],
+      "filePath": ".claude/agents/visualizer-launcher.md",
+      "systemPrompt": "# Visualizer Launcher - 에이전트 시각화 실행\n\nagent-skill-visualizer를 자동으로 실행하여 에이전트와 스킬 관계를 웹 브라우저에서 시각화합니다.\n\n## 역할\n\n1. **그래프 데이터 생성**: 프로젝트 스캔하여 JSON 생성\n2. **SSE 서버 시작**: 실시간 스트리밍 백엔드 (port 3001)\n3. **웹앱 실행**: React 개발 서버 (port 5174)\n4. **브라우저 열기**: 자동으로 시각화 페이지 오픈\n\n## 실행 워크플로우\n\n### Phase 1: 환경 확인\n\n먼저 필요한 파일과 의존성 확인:\n\n```bash\n# 1. 스킬 디렉토리 확인\nls -la .claude/skills/agent-skill-visualizer/\n\n# 2. Python 가상환경 확인 (SSE 서버용)\ntest -f .venv/bin/python && echo \"✓ Python venv exists\" || echo \"✗ venv not found\"\n\n# ..."
+    },
+    {
+      "id": "agent:vault-organizer",
+      "type": "agent",
+      "name": "vault-organizer",
+      "description": "옵시디언 볼트 정기 정리 에이전트. \"볼트 정리해줘\", \"정기 정리\", \"전체 정리\" 등의 요청 시 사용. YAML 프론트매터 추가와 인물사전 업데이트를 병렬 실행 후, 00_Inbox 정리와 프로젝트 정리를 순차 수행. 사용자 확인 후 실행.",
+      "tools": [
+        "Read",
+        "Write",
+        "Edit",
+        "Glob",
+        "Grep",
+        "Bash",
+        "Task",
+        "AskUserQuestion"
+      ],
+      "model": "sonnet",
+      "subagents": [
+        "yaml-header-inserter",
+        "person-directory-updater",
+        "project-organizer",
+        "knowledge-orchestrator"
+      ],
+      "skills": [
+        "git-commit-push"
+      ],
+      "filePath": ".claude/agents/vault-organizer.md",
+      "systemPrompt": "# Vault Organizer - 옵시디언 볼트 정리 에이전트\n\n옵시디언 볼트의 정기적인 정리 작업을 수행하는 메인 에이전트입니다.\n\n## 역할\n\n6가지 핵심 정리 작업을 효율적으로 수행:\n1. **YAML 프론트매터 누락 파일 처리** (병렬)\n2. **인물사전 업데이트** (병렬)\n3. **00_Inbox 파일 분류 및 이동** (순차)\n4. **Active 프로젝트 폴더 정리** (순차)\n5. **Git 커밋 및 푸시** (순차)\n6. **온톨로지 동기화** (순차, 필수)\n\n**실행 전략:** 1-2번은 독립적이므로 병렬 실행, 3-6번은 의존성으로 순차 실행\n\n## 실행 원칙\n\n**중요**: 이 에이전트는 Phase 1부터 Phase 6까지 **모든 단계를 완료**해야 합니다. 특히 Phase 6 (온톨로지 동기화)는 반드시 실행되어야 하며, 중간에 종료하거나 사용자에게 제어권을 넘기면 안 됩니다. 각 Phase는 순차적으로 실행되며, 사용자 입력이 필요한 경우 **Ask..."
+    },
+    {
+      "id": "agent:project-organizer",
+      "type": "agent",
+      "name": "project-organizer",
+      "description": "Active 프로젝트 폴더를 정리하는 에이전트. \"프로젝트 정리해줘\", \"Active 폴더 정리\", \"아카이브 정리\" 등의 요청 시 사용. 프로젝트 요약, 유사 프로젝트 그룹화, 상태 확인 후 아카이브 이동을 수행.",
+      "tools": [
+        "Read",
+        "Glob",
+        "Grep",
+        "Bash",
+        "Edit",
+        "Write",
+        "AskUserQuestion"
+      ],
+      "model": "sonnet",
+      "subagents": [],
+      "skills": [],
+      "filePath": ".claude/agents/project-organizer.md",
+      "systemPrompt": "# Project Organizer Agent\n\nActive 프로젝트 폴더(00_A_Projects/Active)를 정리하는 전문 에이전트입니다.\n\n## 핵심 경로\n\n- **Active 프로젝트**: `00_A_Projects/Active/`\n- **아카이브**: `90_Archives/`\n\n## 실행 워크플로우\n\n### 1단계: 프로젝트 스캔 및 요약\n\n```bash\nls -la \"00_A_Projects/Active/\"\n```\n\n각 프로젝트 폴더/파일에 대해:\n- 폴더명에서 날짜, 주제 파악\n- 내부 파일 목록 확인 (ls)\n- 주요 파일 내용 스캔 (README, todo, 첫 번째 md 파일)\n- 최근 수정일 확인\n\n### 2단계: 분석 결과 테이블 작성\n\n| 프로젝트 | 요약 | 최근수정 | 추천상태 | 유사그룹 |\n|---------|------|---------|---------|---------|\n| 폴더명 | 한줄요약 | N일전 | 진행/완료/중단 | 그룹명 |\n\n#..."
+    },
+    {
+      "id": "skill:audio-transcriber",
+      "type": "skill",
+      "name": "audio-transcriber",
+      "description": "OpenAI Whisper API를 사용하여 오디오 파일을 텍스트로 변환합니다. m4a, WAV 등 다양한 포맷 지원.",
+      "triggers": [
+        "\"녹음 파일 변환해줘\"",
+        "\"오디오를 텍스트로 만들어줘\"",
+        "\"STT 해줘\""
+      ],
+      "filePath": ".claude/skills/audio-transcriber/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:ontology-sync",
+      "type": "skill",
+      "name": "ontology-sync",
+      "description": "Obsidian 볼트를 RDF/TTL 온톨로지로 변환하는 스킬. 인물사전, 프로젝트, 미팅 정보를 추출하여 knowledge.ttl 파일 생성. vault-organizer의 정리 작업 후 자동 호출되어 지식 베이스 동기화.",
+      "triggers": [],
+      "filePath": ".claude/skills/ontology-sync/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:recent-files-finder",
+      "type": "skill",
+      "name": "recent-files-finder",
+      "description": "Git status 기반으로 최근 추가/수정된 파일을 찾는 스킬. 사용 시점: (1) \"최근 추가된 파일 찾아줘\" (2) \"새로 만든 파일 목록\" (3) \"수정된 파일 확인\" (4) \"인물 관련 새 파일 찾기\" (5) 인물사전 업데이트 전 대상 파일 파악 시",
+      "triggers": [],
+      "filePath": ".claude/skills/recent-files-finder/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:slash-command-creator",
+      "type": "skill",
+      "name": "slash-command-creator",
+      "description": "Guide for creating Claude Code slash commands. Use when the user wants to create a new slash command, update an existing slash command, or asks about slash command syntax, frontmatter options, or best practices.",
+      "triggers": [],
+      "filePath": ".claude/skills/slash-command-creator/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:ontology-engine",
+      "type": "skill",
+      "name": "ontology-engine",
+      "description": "Obsidian 볼트를 인물/프로젝트 중심 RDF/TTL 온톨로지로 변환하고 SPARQL 질의를 수행하는 개인 지식 엔진. 사용 시점: (1) \"[인물명]에 대해 알려줘/설명해줘\" (2) \"[인물명]과 나눈 대화 보여줘\" (3) \"앤틀러 소속 인물 찾아줘\" (4) \"인물사전에서 [키워드] 검색\" (5) \"최근 미팅 목록\" (6) \"진행 중인 프로젝트 보여줘\" (7) \"[프로젝트명] 관련 정보\" (8) \"챗봇 관련 프로젝트 찾아줘\" (9) 인물 간 관계나 미팅/프로젝트 기록을 구조적으로 질의할 때.",
+      "triggers": [],
+      "filePath": ".claude/skills/ontology-engine/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:subagent-creator",
+      "type": "skill",
+      "name": "subagent-creator",
+      "description": "Create specialized Claude Code sub-agents with custom system prompts and tool configurations. Use when users ask to create a new sub-agent, custom agent, specialized assistant, or want to configure task-specific AI workflows for Claude Code.",
+      "triggers": [],
+      "filePath": ".claude/skills/subagent-creator/SKILL.md",
+      "hasScripts": false,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:skill-creator",
+      "type": "skill",
+      "name": "skill-creator",
+      "description": "Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.",
+      "triggers": [],
+      "filePath": ".claude/skills/skill-creator/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:git-commit-push",
+      "type": "skill",
+      "name": "git-commit-push",
+      "description": "Git 변경사항을 분석하여 요약 커밋 메시지를 작성하고 커밋/푸시를 수행합니다. 사용 시점: (1) \"커밋해줘\" (2) \"푸시해줘\" (3) \"백업해줘\" (4) \"변경사항 커밋하고 푸시\" (5) 작업 완료 후 저장이 필요할 때",
+      "triggers": [],
+      "filePath": ".claude/skills/git-commit-push/SKILL.md",
+      "hasScripts": false,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:hook-creator",
+      "type": "skill",
+      "name": "hook-creator",
+      "description": "Create and configure Claude Code hooks for customizing agent behavior. Use when the user wants to (1) create a new hook, (2) configure automatic formatting, logging, or notifications, (3) add file protection or custom permissions, (4) set up pre/post tool execution actions, or (5) asks about hook events like PreToolUse, PostToolUse, Notification, etc.",
+      "triggers": [],
+      "filePath": ".claude/skills/hook-creator/SKILL.md",
+      "hasScripts": false,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:meeting-summarizer",
+      "type": "skill",
+      "name": "meeting-summarizer",
+      "description": "녹음 또는 회의 텍스트를 분석하여 요약, 참석자, 주요 주제, 액션 아이템을 추출합니다. Claude Sonnet 활용.",
+      "triggers": [
+        "\"회의록 정리해줘\"",
+        "\"녹음 내용 요약해줘\"",
+        "\"미팅 노트 만들어줘\""
+      ],
+      "filePath": ".claude/skills/meeting-summarizer/SKILL.md",
+      "hasScripts": false,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:agent-skill-visualizer",
+      "type": "skill",
+      "name": "agent-skill-visualizer",
+      "description": "Claude Code 프로젝트의 에이전트와 스킬 관계를 D3.js 노드 그래프로 시각화합니다. 에이전트-스킬 의존성을 파악하고 구조를 탐색할 때 사용하세요.",
+      "triggers": [
+        "\"에이전트 구조 보여줘\"",
+        "\"스킬 의존성 확인해줘\"",
+        "\"에이전트와 스킬 관계 시각화해줘\"",
+        "\"프로젝트 구조 그래프로 보고 싶어\""
+      ],
+      "filePath": ".claude/skills/agent-skill-visualizer/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": true
+    },
+    {
+      "id": "skill:ontology-query",
+      "type": "skill",
+      "name": "ontology-query",
+      "description": "TTL 온톨로지에 SPARQL 질의를 수행하는 스킬. 인물, 프로젝트, 미팅 정보를 검색하고 knowledge-orchestrator가 호출.",
+      "triggers": [],
+      "filePath": ".claude/skills/ontology-query/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    },
+    {
+      "id": "skill:yaml-header-finder",
+      "type": "skill",
+      "name": "yaml-header-finder",
+      "description": "YAML 헤더가 누락된 마크다운 파일을 찾습니다. md파일에서 YAML front matter가 없는 파일을 검색하거나, yaml-header-inserter 서브에이전트 실행 전에 대상 파일을 파악할 때 사용하세요.",
+      "triggers": [],
+      "filePath": ".claude/skills/yaml-header-finder/SKILL.md",
+      "hasScripts": true,
+      "hasWebapp": false
+    }
+  ],
+  "edges": [
+    {
+      "source": "agent:recording-processor",
+      "target": "skill:audio-transcriber",
+      "type": "uses"
+    },
+    {
+      "source": "agent:recording-processor",
+      "target": "skill:meeting-summarizer",
+      "type": "uses"
+    },
+    {
+      "source": "agent:knowledge-orchestrator",
+      "target": "skill:ontology-query",
+      "type": "uses"
+    },
+    {
+      "source": "agent:knowledge-orchestrator",
+      "target": "skill:ontology-sync",
+      "type": "uses"
+    },
+    {
+      "source": "agent:visualizer-launcher",
+      "target": "skill:agent-skill-visualizer",
+      "type": "uses"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "agent:yaml-header-inserter",
+      "type": "calls"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "agent:person-directory-updater",
+      "type": "calls"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "agent:project-organizer",
+      "type": "calls"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "agent:knowledge-orchestrator",
+      "type": "calls"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "skill:git-commit-push",
+      "type": "uses"
+    },
+    {
+      "source": "agent:yaml-header-inserter",
+      "target": "skill:yaml-header-finder",
+      "type": "uses"
+    },
+    {
+      "source": "agent:knowledge-orchestrator",
+      "target": "skill:ontology-engine",
+      "type": "uses"
+    },
+    {
+      "source": "agent:person-directory-updater",
+      "target": "skill:recent-files-finder",
+      "type": "uses"
+    },
+    {
+      "source": "agent:vault-organizer",
+      "target": "skill:ontology-sync",
+      "type": "uses"
+    }
+  ],
+  "metadata": {
+    "generatedAt": "2026-01-03T13:11:44.066792",
+    "projectPath": "/Users/inkeun/projects/obsidian",
+    "projectName": "obsidian",
+    "agentCount": 8,
+    "skillCount": 13,
+    "commandCount": 0,
+    "edgeCount": 14
+  }
+}

package/dist/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent-Skill Visualizer</title>
+    <style>
+      html, body, #root {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
+    <script type="module" crossorigin src="./assets/index-BQSevtzO.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-lL8g_3Ei.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/lib/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export declare function run(): Promise<void>;
+//# sourceMappingURL=cli.d.ts.map

package/lib/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAuBA,wBAAsB,GAAG,kBA6HxB"}

package/lib/cli.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import chalk from 'chalk';
+import * as path from 'path';
+import open from 'open';
+import { fileURLToPath } from 'url';
+import { scanProject } from './scanner.js';
+import { startServer } from './server.js';
+import { validateClaudeProject, findAvailablePort, ensureVisualizerDir } from './utils.js';
+const DEFAULT_PORT = 3000;
+const VISUALIZER_DIR = '.claude/visualizer';
+const DATA_FILE = 'graph-data.json';
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export async function run() {
+    const program = new Command();
+    program
+        .name('viewcc')
+        .description('Interactive visualization for Claude Code projects')
+        .version('1.0.0')
+        .option('-p, --port <number>', 'Server port (default: 3000)', '3000')
+        .option('--no-open', "Don't open browser automatically")
+        .option('--no-scan', 'Skip scanning, use existing data')
+        .option('-v, --verbose', 'Verbose logging')
+        .parse(process.argv);
+    const options = program.opts();
+    const cwd = process.cwd();
+    try {
+        // 1. Validate Claude Code project
+        if (options.verbose) {
+            console.log(chalk.dim('Checking for .claude directory...'));
+        }
+        const isValid = await validateClaudeProject(cwd);
+        if (!isValid) {
+            console.error(chalk.red('✗ No .claude directory found'));
+            console.error(chalk.yellow('  Run this command from a Claude Code project root'));
+            console.error(chalk.yellow('  Or run "claude init" to create a new project'));
+            process.exit(1);
+        }
+        console.log(chalk.green('✓ Claude Code project detected'));
+        // 2. Setup visualizer directory
+        const vizDir = path.join(cwd, VISUALIZER_DIR);
+        await ensureVisualizerDir(vizDir);
+        if (options.verbose) {
+            console.log(chalk.dim(`Created ${VISUALIZER_DIR}/`));
+        }
+        // 3. Scan project (unless --no-scan)
+        const dataPath = path.join(vizDir, DATA_FILE);
+        if (options.scan !== false) {
+            console.log(chalk.blue('📊 Scanning project structure...'));
+            const stats = await scanProject(cwd, dataPath);
+            console.log(chalk.green('✓ Scan complete'));
+            console.log(chalk.dim(`  Agents: ${stats.agentCount}`));
+            console.log(chalk.dim(`  Skills: ${stats.skillCount}`));
+            console.log(chalk.dim(`  Commands: ${stats.commandCount}`));
+            console.log(chalk.dim(`  Edges: ${stats.edgeCount}`));
+        }
+        else {
+            console.log(chalk.yellow('⊘ Skipping scan (using existing data)'));
+        }
+        // 4. Find available port
+        const requestedPort = parseInt(options.port);
+        const port = await findAvailablePort(requestedPort);
+        if (port !== requestedPort) {
+            console.log(chalk.yellow(`⚠ Port ${requestedPort} in use, using ${port} instead`));
+        }
+        // 5. Start server
+        console.log(chalk.blue('🚀 Starting server...'));
+        // Find dist directory (relative to this compiled file in lib/)
+        const distDir = path.join(__dirname, '..', 'dist');
+        const server = await startServer({
+            port,
+            projectRoot: cwd,
+            distDir,
+            dataPath
+        });
+        const url = `http://localhost:${port}`;
+        console.log(chalk.green('✓ Server running'));
+        // 6. Open browser
+        if (options.open !== false) {
+            console.log(chalk.blue('🌐 Opening browser...'));
+            try {
+                await open(url);
+            }
+            catch (error) {
+                console.log(chalk.yellow('⚠ Could not open browser automatically'));
+                console.log(chalk.dim(`  Please open ${url} manually`));
+            }
+        }
+        // 7. Show success message
+        console.log('');
+        console.log(chalk.green.bold('✨ Claude Code Visualizer is ready!'));
+        console.log('');
+        console.log(`   ${chalk.cyan.bold(url)}`);
+        console.log('');
+        console.log(chalk.dim('   Controls:'));
+        console.log(chalk.dim('   • Click nodes to view details'));
+        console.log(chalk.dim('   • Drag to pan, scroll to zoom'));
+        console.log(chalk.dim('   • Use search to filter nodes'));
+        console.log('');
+        console.log(`   Press ${chalk.yellow('Ctrl+C')} to stop`);
+        console.log('');
+        // 8. Graceful shutdown
+        const shutdown = async () => {
+            console.log('');
+            console.log(chalk.blue('👋 Shutting down...'));
+            await new Promise((resolve) => {
+                server.close(() => {
+                    console.log(chalk.green('✓ Server stopped'));
+                    resolve();
+                });
+            });
+            process.exit(0);
+        };
+        process.on('SIGINT', shutdown);
+        process.on('SIGTERM', shutdown);
+    }
+    catch (error) {
+        console.error('');
+        console.error(chalk.red.bold('✗ Error:'), error.message);
+        if (options.verbose && error.stack) {
+            console.error(chalk.dim(error.stack));
+        }
+        process.exit(1);
+    }
+}
+// Execute if run directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+    run();
+}
+//# sourceMappingURL=cli.js.map

package/lib/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/lib/scanner.d.ts

@@ -0,0 +1,15 @@
+interface GraphMetadata {
+    generatedAt: string;
+    projectPath: string;
+    projectName: string;
+    agentCount: number;
+    skillCount: number;
+    commandCount: number;
+    edgeCount: number;
+}
+/**
+ * Scan a Claude Code project and generate graph data
+ */
+export declare function scanProject(projectPath: string, outputPath: string): Promise<GraphMetadata>;
+export {};
+//# sourceMappingURL=scanner.d.ts.map

package/lib/scanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scanner.d.ts","sourceRoot":"","sources":["../src/scanner.ts"],"names":[],"mappings":"AAsCA,UAAU,aAAa;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAoVD;;GAEG;AACH,wBAAsB,WAAW,CAC/B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,aAAa,CAAC,CA2CxB"}