*p5.brush
p5.brush.js is a versatile library for the p5.js ecosystem, tailored for artists, designers, and hobbyists who wish to explore natural textures in generative art. This library extends the drawing capa
Claude Code IDE pane mod: agent board, file tree and HWP/PDF viewer, system status, Claude/Codex/Antigravity usage band, session handoff
PluginsTypeScript · JavaScriptGitHub @jkf87Self-installOwner unconfirmed
Paste into Claude or ChatGPT for installation instructions suited to your environment.
Have you tried it? One tap is enough. No sign-in needed.
Loading the full README. The saved excerpt is shown below.
Claude Code 안에 IDE 창을 띄우는 모드(function-hooks 플러그인)예요. 입력창 위에는 이 세션의 컨텍스트·캐시 적중·생성 속도(tok/s)와 Claude·Codex·Antigravity 사용 한도가 도트 게이지 한 줄로 늘 떠요. 창 위쪽에는 에이전트 보드가, 아래쪽에는 파일 트리와 탭 에디터가 있어요. 탭에서 HWP·HWPX·PDF 문서를 쪽 모양 그대로 열어 보고, 왼쪽 칸을 이번 세션의 요청 기록으로 바꿔 볼 수 있어요. 입력창 위에는 강의 자막과 한국어 문체 게이트가 떠요. 데모 녹화: docs/demo.tape (VHS) · 샘플 문서는 행정안전부 「2025년 주요업무 추진계획」(공공 문서) Claude Code 터미널 세션에서 아래 한 줄을 입력하세요. 마켓플레이스를 추가할지 물으면 y를 누르고 범위(user 권장)를 고르면 돼요. 설치한 세션에서 바로 동작해요. function hooks는 Claude Code의 early access API예요. 2.1.290에서 만들고 시험했어요. 버전이 바뀌면 API가 달라질 수 있어요.Read the full README ↗
Claude Code 안에 IDE 창을 띄우는 모드(function-hooks 플러그인)예요. 입력창 위에는 **이 세션의 컨텍스트·캐시 적중·생성 속도(tok/s)**와 Claude·Codex·Antigravity 사용 한도가 도트 게이지 한 줄로 늘 떠요. 창 위쪽에는 에이전트 보드가, 아래쪽에는 파일 트리와 탭 에디터가 있어요. 탭에서 HWP·HWPX·PDF 문서를 쪽 모양 그대로 열어 보고, 왼쪽 칸을 이번 세션의 요청 기록으로 바꿔 볼 수 있어요. 입력창 위에는 강의 자막과 한국어 문체 게이트가 떠요.
트리의 파일과 폴더는 g·f 한 번으로 Mac의 실제 앱과 Finder에서 열려요. 이 세션은 링크 하나로 다른 컴퓨터에 넘길 수 있어요(→ 다른 컴퓨터로 핸드오프).
데모 녹화: docs/demo.tape (VHS) · 샘플 문서는 행정안전부 「2025년 주요업무 추진계획」(공공 문서)
에이전트 ● opus 5.5 1M · xhigh · 서브 1개 작업 중 / 1개 끝남 a: 보드 접기 h: 끝난 것 숨기기 s: 요약 끄기(haiku) x: 끝난 것 지우기
● 메인 opus 5.5 1M · xhigh 작업 중 3m12s · 도구 14 로그인 버그 고쳐줘
요약 인증 흐름을 서브에이전트에 나눠 조사하는 중
├─ ● Explore haiku 4.5 작업 중 34s · 도구 6 인증 코드 찾기
│ 지금 Grep login
└─ ✓ general-purpose sonnet 5.5 · medium 완료 1m02s 테스트 작성
결과 login.test.ts에 실패 케이스 3개 추가
──────────────────────────────────────────────────────────────────────────────
g: 앱으로 열기 f: 폴더 열기(src) t: 트리 접기 u: 상위 폴더 r: 새로고침 p: @프롬프트 c: 경로 복사 w: 탭 닫기
my-project 1-24/57 k ▲ j ▼ │ ▎app.ts ● README.md
▾ src/ │ src/app.ts · 1.2 KB · 1-21/88줄
▾ auth/ ● │ 1 import { login } from './auth'
login.ts ● │ 2
app.ts ● │ 3 export const answer = 42
▸ tests/ │ …
README.md │
Claude Code 터미널 세션에서 아래 한 줄을 입력하세요.
/plugin install ide-mod --marketplace jkf87/ide-mod
마켓플레이스를 추가할지 물으면 y를 누르고 범위(user 권장)를 고르면 돼요. 설치한 세션에서 바로 동작해요.
function hooks는 Claude Code의 early access API예요. 2.1.290에서 만들고 시험했어요. 버전이 바뀌면 API가 달라질 수 있어요.
| 명령 | 하는 일 |
|---|---|
/ide | IDE 창을 열어요 (처음엔 작업 폴더). 새 세션은 저절로 열려요 |
/ide auto on|off | 세션을 시작할 때 IDE 창을 저절로 열지 정해요 (기본 켜짐) |
/open <경로> | 폴더면 트리의 뿌리로, 파일이면 탭으로 열어요. ~, 상대 경로, @경로 모두 돼요 |
/lecture [on|off] | 강의 모드: Claude가 하는 일을 입력창 위에 쉬운 한국어 자막으로 보여줘요 |
/handoff [세션 이름] [메모] | 이 세션을 다른 에이전트 세션에 넘겨요. 이름을 주면 그 세션에 핸드오프 글을 바로 보내고, 없으면 글을 보여 주고 핸드오프 화면을 열어요 |
/handoff share [메모] · publish · receive <링크> | 다른 PC의 사람에게 넘겨요. share 한 번으로 인수인계서를 써서 비공개 Artifact에 올리고 링크를 보여 줘요. publish는 다시 게시, 받는 사람은 receive로 입력창에 받아요 |
/cache [now|keep 2h|off] | 프롬프트 캐시 수명과 유지 상태를 보고, 지금 살리거나 유지 시간을 바꿔요 |
/limits [line|rows|off|refresh] | 입력창 위 사용 한도 띠의 모양을 바꾸거나 지금 다시 받아요. 인자 없이 치면 현재 값을 글로 보여 줘요 |
/style-gate [파일|on|off] | 한국어 원고의 AI티 지표를 검사해요. 켜 두면 Claude가 .md·.txt를 쓸 때마다 자동으로 검사해요 |
전체 화면 레이아웃(fullscreen)에서 쓰면 창이 대화 옆에 넓게 붙어서 IDE처럼 보여요. 창 크기는 직접 끌어서 바꿀 수 있어요.
g·f)툴바 맨 앞에 두 버튼이 늘 떠 있어요.
g: 앱으로 열기 f: 폴더 열기(src) t: 트리 접기 …
| 키 | 하는 일 |
|---|---|
g | 지금 탭에 열린 파일을 그 파일의 기본 앱으로 열어요. .hwpx는 한컴, .pptx는 키노트·파워포인트, .pdf는 미리보기처럼 Mac에서 더블클릭했을 때와 같아요 |
f | 트리에서 마지막으로 누른 폴더를 Finder로 열어요. 괄호 안이 열릴 폴더 이름이고, 그 폴더 줄은 색으로 표시돼요. 폴더를 고르지 않았으면 지금 파일이 든 폴더를 열고 그 파일을 골라 보여 줘요 |
open, Linux는 xdg-open, Windows는 탐색기로 열어요.하던 작업을 다른 컴퓨터의 Claude Code로 넘길 수 있어요. 내 다른 맥으로 옮겨 가서 이어 해도 되고, 다른 사람에게 넘겨도 돼요. 대화 기록 파일을 옮기는 게 아니라, Claude가 이 대화를 읽고 쓴 인수인계서를 비공개 Artifact 링크 하나로 넘기는 방식이에요.
보내는 컴퓨터
i(핸드오프)를 누른 뒤 f(다른 사람에게)를 눌러요. 또는 입력창에 /handoff share를 쳐요. 뒤에 메모를 붙일 수 있어요: /handoff share 로그인 테스트부터 이어서.받는 컴퓨터
/handoff receive <링크>를 입력해요. 인수인계서가 입력창에 들어가기만 하고 보내지지는 않아요. 읽어 보고 Enter를 누르면 Claude가 이어서 일해요.비밀번호·토큰·API 키·IP·이메일은 쓰지 않게 하고, 쓴 뒤에 한 번 더 걸러 [비공개]로 가려요. 내가 보낸 요청 원문과 커밋하지 않은 변경 내용도 싣지 않아요. 같은 컴퓨터의 다른 세션에 넘기는 방법은 아래 핸드오프에 있어요.
이 세션과 모든 사용 한도를 한 줄에 도트 게이지로 보여 줘요.
세션 컨텍스트 ⣿⣀⣀⣀ 18% 캐시 ⣿⣿⣿⡇ 94% 114 tok/s │ Claude 5h ⣀⣀⣀⣀ 4% 주 ⣿⣿⣿⣿ 96% 2일 Fable ⣿⣿⣀⣀ 54% │ Codex 주 ⣿⣿⣿⣀ 78% 4일 │ Gemini 5h ⣀⣀⣀⣀ 5% 주 ⡇⣀⣀⣀ 9% │ AG Claude·GPT …
2일)이 붙어요./usage와 같은 사용량 응답을 1분마다 받아요(토큰은 mod에 보이지 않아요). 못 받으면 엔진이 응답마다 주는 5시간·주간 한도를 써요.codex app-server)에 5분마다 물어요. Antigravity는 bin/agy-usage.sh가 agy /usage를 부르는데, 결과를 ~/.cache/ide-mod에 두고 모든 세션이 15분 동안 나눠 써요. agy 로그인 토큰을 갱신하는 주소의 DNS가 안 풀리면 agy를 띄우지 않고, 실패하면 30분 쉬어요. 세션마다 자주 띄우면 토큰 갱신이 실패할 때마다 agy가 인증 코드를 묻기 때문이에요. 설치돼 있지 않으면 그 묶음은 나오지 않아요./limits rows로 출처마다 한 줄(막대·리셋 시각), /limits line으로 다시 한 줄, /limits off로 숨겨요./cache)프롬프트 캐시는 마지막 요청 뒤 수명(구독은 보통 1시간, API 키는 5분)이 지나면 사라져요. 그다음 요청은 대화 전체를 다시 캐시에 써야 해서 느리고 비싸요.
캐시 99% 52분에서 뒤 숫자가 캐시가 사라지기까지 남은 시간이에요. 사라지면 만료가 노랗게 떠요.$.model.fork). 캐시에서 읽히면서 수명이 다시 시작돼요./cache 상태 보기, /cache now 지금 한 번 살리기, /cache keep 2h · 90m · off로 유지 시간 바꾸기.agy에도 같은 도트 게이지 한 줄을 띄울 수 있어요. agy 안에서 한 번 입력하세요.
/statusline node ~/ide-mod/bin/agy-statusline.mjs
Gemini 3.8 Flash 컨텍스트 ⡇⣀⣀⣀ 12% 작업 중 │ Gemini 5h ⣀⣀⣀⣀ 3% 주 ⡇⣀⣀⣀ 13% │ AG Claude·GPT 5h 0% 주 2% │ Claude 5h 3% 주 98% 1일 │ Codex 주 82% 3일
핸드오프 agy --conversation <세션 ID>도 표시해요. 다른 터미널에서 명령을 실행하면 해당 대화를 이어받아요. 창이 좁으면 사용량 묶음을 줄이고, 더 좁으면 전체 세션 ID를 우선 표시해요. ID는 현재 agy가 넘긴 값만 사용해요.~/.cache/ide-mod/limits.json에 남긴 값을 읽어요(30분 넘은 값은 안 써요).~/.cache/ide-mod/agy-usage.tsv에 남겨서, agy를 쓰는 동안에는 ide-mod도 agy를 띄우지 않고 이 값을 써요./statusline delete.z를 누르면 메모리를 많이 쓰는 앱 6개를 보여 줘요. 앱의 도우미 프로세스는 앱 이름으로 묶어요(Google Chrome Helper → Google Chrome).sysctl·vm_stat·df·ps로, Linux는 /proc/meminfo로 읽어요. 보드를 접어도 이 줄은 남아요.s로 끌 수 있고, 3번 연속 실패하면 스스로 꺼져요.◆ opus 5.5 · xhigh ⇉ 서브에이전트 N개 작업 중이 떠요.z 메모리 많이 쓰는 앱, i 핸드오프, a 보드 접기/펼치기, h 끝난 것 숨기기(돌고 있는 자손은 남아요), s 요약 켜기/끄기, x 끝난 것 지우기m을 누르면 렌더 화면으로 바뀌어요.j/k는 트리를 반 화면씩 넘겨요. 끝에 닿았거나 움직일 게 없으면 휠을 앱에 돌려줘서 데스크톱 앱의 대화가 그대로 스크롤돼요. 최근 휠 40개는 ~/.cache/ide-mod/scroll.log에 남아요(스크롤 문제를 볼 때).g는 지금 파일을 기본 앱으로, f는 고른 폴더를 Finder로 열어요(→ 파일·폴더를 실제 앱으로 열기). 같은 줄을 1.2초 안에 두 번 눌러도 열려요. 누름 기록은 ~/.cache/ide-mod/press.log에 남아요.●이 붙고, 열려 있으면 다시 읽어요. 거절되거나 실패한 수정은 표시하지 않아요.t를 누르면 트리로 돌아와요.t 트리 접기, q 파일 트리/요청 기록, l 요청 모두 보기/하나만, v 요청 전체 세션/이 세션(요청 기록에서), u 상위 폴더, r 새로고침, m 렌더/원문, v HWP 문서/그림 보기, e HWP 편집 창, o HWP 미리보기로 열기, b·n HWP 앞뒤 쪽, p 입력창에 @경로 넣기, c 경로 복사, w 탭 닫기, g 기본 앱으로 열기, f 폴더를 Finder로 열기.hwp·.hwpx·.pdf를 누르면 탭으로 열려요. HWP 엔진은 rhwp(Rust→WASM, MIT, vendor/rhwp), PDF 엔진은 pdf.js(Apache-2.0, vendor/pdfjs)예요. 둘 다 같은 문서 보기 렌더러(bin/grid.mjs)를 써요.pdftoppm으로 만들어요(brew install poppler). o는 PDF 원본을 미리보기로 바로 열어요.…로 줄여요. 그래픽이 없는 터미널(macOS 터미널 등)에서도 HWP 모양으로 보여요. 쪽 끝까지 내리면 다음 쪽으로 넘어가요.v): rhwp가 그린 실제 쪽 그림이에요. 터미널은 PNG(kitty·Ghostty 같은 그래픽 터미널), 데스크톱 앱은 SVG로 그려요.e): 브라우저 앱 창(Chrome·Edge·Brave, 없으면 기본 브라우저)에 rhwp 편집기(MIT, vendor/rhwp-editor)를 띄워 메뉴·툴바·표 편집까지 위지윅으로 고쳐요. 위 막대의 저장(막대를 누른 뒤 ⌘S/Ctrl+S도 돼요)을 누르면 원래 파일에 다시 쓰고, IDE 창의 보기도 새로 읽어요.
edwardkim.github.io/rhwp에서 받아 와서 인터넷이 필요해요. 문서는 브라우저 안에서만 다루고, 이 컴퓨터의 작은 서버(bin/rhwp-edit.mjs, 127.0.0.1·무작위 토큰 주소)가 파일을 읽고 써요. 창을 닫으면 30초 뒤 서버도 끝나요.~/.cache/ide-mod/hwp-backup/에 남겨요..hwp는 저장한 것을 다시 읽어 쪽 수가 그대로일 때만 덮어써요. 아니면 HWPX로 따로 저장을 쓰세요(같은 이름의 .hwpx).o): 지금 쪽을 그림으로 만들어 macOS 미리보기로 열어요. 한컴에서 보는 모양 그대로 확인할 때 써요.b/n으로 앞뒤 쪽을 넘기고, 치환이 안 된 {{키}} 칸은 빨갛게 표시하고 개수를 위에 보여줘요.bin/rhwp-view.mjs를 Node.js로 실행해요. 그림 변환은 rsvg-convert → resvg → macOS qlmanage+sips 순서로 있는 것을 써요.i)i를 누르면 탐색기가 핸드오프 화면으로 바뀌어요.r로 목록을 새로 받아요.claude --resume <ID> --fork-session), 사용자가 보낸 요청(최근 20개, 시각과 함께), 에이전트가 마지막에 하던 일이 들어가요. 받은 쪽은 대화 기록을 읽고 이어서 일해요.c 핸드오프 글 복사(Codex 같은 다른 에이전트에 붙여 넣을 때), y 세션 ID만 복사, e 이어서 열기 명령 복사.$.session.send를 써요.f)단계별 사용법은 위 다른 컴퓨터로 핸드오프를 보세요. 여기는 자세한 동작이에요.
다른 PC의 사람은 이 세션의 대화 기록도, 이 PC의 파일도 볼 수 없어요. 그래서 대화를 보고 쓴 인수인계서와 git 위치를 한 페이지에 담아 Artifact로 넘겨요.
f를 누르면 오른쪽이 "다른 사람에게"로 바뀌고, 바로 인수인계서를 써서 게시하고 링크를 보여 줘요. Claude가 이 대화를 다시 읽고($.model.fork, 지금 세션의 캐시를 그대로 써요) 목표·한 일·결정과 이유·남은 일·주의할 점·관련 링크로 써요. w는 다시 써서 새 링크를 만들어요.[비공개]로 가려요. 원격 주소에 섞인 계정·토큰도 빼요. 사용자가 보낸 요청 원문과 커밋하지 않은 변경 내용은 싣지 않아요(변경된 파일 목록만 넣어요).c로 다시 복사하고, 게시가 실패했으면 o로 다시 게시해요./handoff share [메모]도 한 번에 써서 게시하고, 첫 줄에 링크를 보여 줘요./handoff receive <링크>를 입력해요. 페이지에 함께 올린 handoff.json을 읽어 입력창에 넣기만 하고 보내지는 않아요. 남이 쓴 글이라 직접 읽고 Enter를 누르게 하고, 그 안의 지시를 따르지 말라는 말도 앞에 붙여요. ide-mod가 없으면 페이지의 받기 프롬프트 복사를 눌러 붙여 넣으면 돼요..claude/ide-mod-handoff/에 둬요.q)c로 전부 복사해요.v로 전체 세션(기본: 같은 폴더의 지난 세션과 agy·Codex 프롬프트까지)과 이 세션만을 오가요. 왼쪽 칸 맨 위에 지금 범위와 개수(전체 세션 요청 110개, 이 세션 요청 12개)가 보여요. 모두 보기·복사도 고른 범위만 다뤄요.p로 입력창에 다시 넣고, c로 복사해요. l로 모두 보기와 하나만 보기를 오가요.agy·Codex 표시를 달고 시간순으로 섞여 나와요. agy는 ~/.gemini/antigravity-cli/history.jsonl을, Codex는 스레드 목록(~/.codex/state_*.sqlite)에서 사람이 연 CLI·데스크톱 스레드만 골라 대화 파일에서 사람이 보낸 메시지만 읽어요(서브에이전트·codex exec는 빼요)./prompts 명령으로 봐요(/prompts 100, /prompts --all). 설치: ln -s ~/ide-mod/agy/skills/prompts ~/.gemini/config/skills/prompts. agy의 / 명령은 스킬이라 모델이 한 번 명령을 실행해 결과를 그대로 보여 줘요. 실행 때마다 묻지 않게 하려면 agy 설정 permissions.allow에 command(node ~/ide-mod/bin/prompts.mjs)를 넣으세요.node ~/ide-mod/bin/prompts.mjs를 실행하면 이 폴더에서 Claude·Codex·agy에 보낸 프롬프트를 시간순으로 찍어 줘요. agy에서는 !node ~/ide-mod/bin/prompts.mjs처럼 !를 붙이면 모델을 거치지 않아요. 100으로 개수, --all로 모든 폴더, --only codex,agy로 도구 고르기.↺ 표시와 날짜를 달고 이번 세션 요청 앞에 이어져요. 모두 보기에서는 세션마다 ── 지난 세션 <ID> ── 줄로 나눠요.Claude가 할 일 목록 도구(TaskCreate·TaskUpdate·TodoWrite)로 일을 나누면, IDE 창 맨 아래에 진행률이 떠요. 할 일이 없으면 아무것도 그리지 않아요.
작업 진행 ███░░░░░░░ 33% 완료 1 · 진행 중 1 · 대기 1
◐ 진행 중 요약 문장 만들기
○ 대기 그래프 그리기
✓ 완료 엑셀 불러오기
… 외 N개로 줄여요. 탐색기는 10행 이상 남겨요.TodoWrite는 메인 목록을 덮지 않아요. 거절되거나 실패한 호출은 반영하지 않아요./lecture): "파일을 읽고 있어요 · login.ts", "터미널에서: 테스트 실행"처럼 지금 하는 일과 방금 한 일, 단계 수, 경과 시간, 일하는 서브에이전트 수를 테두리 상자에 보여줘요. 모델 호출 없이 도구 호출만으로 만들어요./style-gate): noslop-ko의 결정적 패턴 16개(대조 구문, 접속어 뒤 쉼표, 맺음 상투어, 과장 어휘, 번역투 등)를 세서 통과·경고·중단을 판정해요. 경고 이상이면 입력창 위에 뜨고, g로 예문을 펼치고 d로 닫아요. 한글이 50자 넘는 원고만 검사하고 코드 블록은 빼요.패널에 포커스가 있을 때(클릭하거나 ctrl+x tab) 단축키가 먹어요. Esc를 누르면 입력창으로 돌아가요.
r을 누르거나 다음에 다시 그려질 때 반영돼요.claude plugin validate . # 매니페스트·훅 모듈 검사
claude plugin test . # tests/*.test.tsx
claude --plugin-dir . # 이 폴더를 그대로 로드해서 써 보기
타입 정의(.claude-plugin/types/)와 tsconfig.json은 Claude Code가 이 폴더를 한 번 로드할 때 깔아 줘요. 그 뒤에 npx tsc -p .로 타입 검사를 할 수 있어요. 둘 다 .gitignore에 들어 있어요.
구조는 hooks/register.tsx 파일 하나예요. 엔진이 $를 같은 파일 안의 함수로만 따라가서, 보드와 탐색기를 한 파일에 나눠 적었어요.
MIT. 함께 들어 있는 rhwp(vendor/rhwp)는 Edward Kim의 MIT 라이선스, pdf.js(vendor/pdfjs)는 Mozilla의 Apache-2.0 라이선스예요.