tokenbill-mcp 1.1.6 → 1.1.9

package/README.md

@@ -1,4 +1,4 @@
-# Tokenbill (토큰빌) — 내 AI 토큰, 한 화면에서
+# Tokenbill (토큰빌) — 내 AI 작업실
 
 AI는 쓰는 것으로 끝. 기록은 Tokenbill이 쌓고, 쌓인 기록은 실력이 됩니다.
 

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "tokenbill-mcp",
-  "version": "1.1.6",
-  "description": "AI 쓰는 만큼 쌓이는 기록 — tokenbill.my 리더보드로 겨루고, 로컬 대화 뷰어·작업 보드로 관리하세요. Your AI usage, recorded: compete on the tokenbill.my leaderboard, with a local transcript viewer and task board.",
+  "version": "1.1.9",
+  "description": "내 AI 작업실 — AI 쓰는 만큼 쌓이는 기록으로 tokenbill.my 리더보드, 로컬 대화 뷰어, 작업 보드·스프린트를. Your AI workshop: a leaderboard, a local transcript viewer and a task board built from your AI work logs.",
   "bin": {
     "tokenbill-mcp": "uploader/index.js"
   },
   "files": [
     "uploader/",
-    "!uploader/duet/test/"
+    "!uploader/duet/test/",
+    "!uploader/test/"
   ],
   "scripts": {
-    "test": "node --test uploader/duet/test/core.test.js",
+    "test": "node --test uploader/duet/test/core.test.js uploader/test/toolbox.test.js",
     "smoke": "node uploader/duet/test/smoke.js"
   },
   "repository": {

package/uploader/toolbox.js

@@ -0,0 +1,245 @@
+/**
+ * 스킬·MCP 관리기 — 이 PC에 흩어진 스킬과 MCP 설정을 찾아 모은다.
+ *
+ * 읽기만 하고(설치는 viewer 쪽에서 ~/.claude/skills 안으로만), 어떤 것도 밖으로 보내지 않는다.
+ * 토큰처럼 보이는 값은 찾는 즉시 마스킹해서 화면에도 원문이 가지 않게 한다.
+ */
+"use strict";
+const fs = require("fs");
+const path = require("path");
+const os = require("os");
+const crypto = require("crypto");
+
+const HOME = os.homedir();
+const SKILLS_HOME = path.join(HOME, ".claude", "skills");   // Claude Code가 실제로 읽는 자리
+const SKIP_DIRS = new Set(["node_modules", ".git", "dist", "build", "__pycache__", ".venv", "venv", ".next", "target"]);
+
+// ── 공통 ────────────────────────────────────────────────────
+function* findSkillFiles(root, maxDepth) {
+  const stack = [[root, 0]];
+  let seen = 0;
+  while (stack.length) {
+    const [dir, depth] = stack.pop();
+    if (depth > maxDepth) continue;
+    if (++seen > 20000) return;   // 폴더가 너무 많으면 여기서 멈춘다 (PC가 느려지지 않게)
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { continue; }
+    for (const e of entries) {
+      if (e.isFile() && e.name === "SKILL.md") yield path.join(dir, e.name);
+      else if (e.isDirectory() && !SKIP_DIRS.has(e.name)) stack.push([path.join(dir, e.name), depth + 1]);
+    }
+  }
+}
+
+/** SKILL.md 머리말에서 이름·설명을 꺼낸다. 없으면 폴더 이름으로 대신한다. */
+function readSkillMeta(file) {
+  let text = "";
+  try { text = fs.readFileSync(file, "utf8").slice(0, 4000); } catch { return null; }
+  const dir = path.dirname(file);
+  const meta = { name: path.basename(dir), description: "" };
+  const fm = /^---\r?\n([\s\S]*?)\r?\n---/.exec(text);
+  if (fm) {
+    const name = /^name:\s*(.+)$/m.exec(fm[1]);
+    if (name) meta.name = name[1].trim().replace(/^["']|["']$/g, "");
+    const lines = fm[1].split(/\r?\n/);
+    const at = lines.findIndex((l) => /^description:/.test(l));
+    if (at >= 0) {
+      let v = lines[at].replace(/^description:\s*/, "").trim();
+      if (v === "|" || v === ">" || v === "|-" || v === ">-") {
+        // YAML 블록 — 들여쓴 다음 줄들이 본문이다
+        const block = [];
+        for (let i = at + 1; i < lines.length && /^\s+\S/.test(lines[i]); i++) block.push(lines[i].trim());
+        v = block.join(" ");
+      }
+      meta.description = v.replace(/^["']|["']$/g, "");
+    }
+  }
+  if (!meta.description) {
+    // 제목·표·목록 기호로 시작하는 줄은 설명으로 쓰지 않는다 (표로 시작하는 SKILL.md 대비)
+    const body = text.replace(/^---[\s\S]*?---/, "").split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter((l) => l.length > 8 && !/^[#|>`\-*=]/.test(l));
+    meta.description = (body[0] || "").slice(0, 160);
+  }
+  let mtime = 0, size = 0;
+  try { const st = fs.statSync(file); mtime = st.mtimeMs; size = st.size; } catch {}
+  return { ...meta, dir, file, mtime, size,
+    hash: crypto.createHash("sha1").update(text).digest("hex").slice(0, 12),
+    files: safeList(dir) };
+}
+function safeList(dir) {
+  try { return fs.readdirSync(dir).filter((n) => n !== "SKILL.md").slice(0, 12); } catch { return []; }
+}
+const short = (p) => p.replace(HOME, "~").replace(/\\/g, "/");
+
+/** Claude Code가 기억하는 프로젝트 폴더들 — 저장소 안 .claude/skills를 여기서 찾는다. */
+function claudeProjects() {
+  try {
+    const j = JSON.parse(fs.readFileSync(path.join(HOME, ".claude.json"), "utf8"));
+    return Object.keys(j.projects || {}).filter((p) => { try { return fs.statSync(p).isDirectory(); } catch { return false; } });
+  } catch { return []; }
+}
+
+// ── 스킬 모으기 ─────────────────────────────────────────────
+// Claude Code가 공식적으로 스킬을 읽는 자리만 본다.
+//   개인:     ~/.claude/skills/<이름>/SKILL.md        — 어느 폴더에서 열든 읽힘
+//   프로젝트: <저장소>/.claude/skills/<이름>/SKILL.md — 그 폴더에서 열 때만 읽힘
+//   플러그인: ~/.claude/plugins/…/skills/<이름>/SKILL.md
+// 다른 도구의 스킬 폴더나 내려받은 폴더는 Claude Code가 읽지 않으므로 목록에 넣지 않는다.
+function scanSkills() {
+  const roots = [
+    { root: SKILLS_HOME, depth: 2, source: "personal", label: "개인 — 어디서 열든" },
+    { root: path.join(HOME, ".claude", "plugins"), depth: 6, source: "plugin", label: "플러그인" },
+  ];
+  for (const p of claudeProjects()) {
+    roots.push({ root: path.join(p, ".claude", "skills"), depth: 2, source: "project",
+      label: `프로젝트 — ${path.basename(p)}에서 열 때만`, project: short(p) });
+  }
+
+  const found = [], seenDir = new Set();
+  for (const r of roots) {
+    for (const file of findSkillFiles(r.root, r.depth)) {
+      const dir = path.dirname(file);
+      if (seenDir.has(dir)) continue;
+      seenDir.add(dir);
+      const meta = readSkillMeta(file);
+      if (!meta) continue;
+      // 플러그인 폴더에서는 skills/ 아래 것만 스킬이다 (다른 SKILL.md 사본 제외)
+      if (r.source === "plugin" && path.basename(path.dirname(dir)) !== "skills") continue;
+      found.push({ ...meta, source: r.source, origin: r.label, dir_short: short(dir), project: r.project || "",
+        installed: r.source === "personal" });
+    }
+  }
+  // 같은 스킬이 여러 자리에 있으면 하나로 묶는다 (이름 기준, 사본 목록을 함께)
+  const byName = new Map();
+  for (const s of found.sort((a, b) => Number(b.installed) - Number(a.installed) || b.mtime - a.mtime)) {
+    const key = s.name.toLowerCase();
+    if (!byName.has(key)) byName.set(key, { ...s, copies: [] });
+    else byName.get(key).copies.push({ dir_short: s.dir_short, origin: s.origin, hash: s.hash, mtime: s.mtime });
+  }
+  const list = [...byName.values()].sort((a, b) =>
+    Number(b.installed) - Number(a.installed) || a.name.localeCompare(b.name, "ko"));
+  return { skills: list, installed_dir: short(SKILLS_HOME), total: found.length };
+}
+
+// ── MCP 모으기 ──────────────────────────────────────────────
+const SECRET_KEYS = /(token|key|secret|password|pass|credential|api)/i;
+const SECRET_VALUE = /^(tbu_|acv_|sk-|ghp_|github_pat_|npm_|xox[baprs]-)/i;
+// `--token` 같은 플래그 바로 뒤 값만 비밀로 본다. 경로에 'token'이 들어간 것(…/tokenbill/…)과 헷갈리지 않게.
+const SECRET_FLAG = /^--?[a-z0-9-]*(token|key|secret|password|pass|credential)$/i;
+const isSecretArg = (args, i) => SECRET_VALUE.test(String(args[i])) || (i > 0 && SECRET_FLAG.test(String(args[i - 1])));
+
+/** 토큰처럼 보이는 값을 가린다. 화면에도 원문은 보내지 않는다. */
+function maskArgs(args) {
+  const list = args || [];
+  return list.map((v, i) => {
+    const a = String(v);
+    return isSecretArg(list, i) ? a.slice(0, 4) + "…" + a.slice(-2) : a;
+  });
+}
+function maskEnv(env) {
+  const out = {};
+  for (const [k, v] of Object.entries(env || {})) {
+    out[k] = SECRET_KEYS.test(k) || SECRET_VALUE.test(String(v))
+      ? String(v).slice(0, 4) + "…" + String(v).slice(-2) : v;
+  }
+  return out;
+}
+function mcpEntry(name, cfg, scope, where) {
+  return {
+    name, scope, where: short(where),
+    type: cfg.type || (cfg.url ? "http" : "stdio"),
+    command: cfg.command || cfg.url || "",
+    args: maskArgs(cfg.args),
+    env: maskEnv(cfg.env),
+    has_secret: (cfg.args || []).some((a, i) => isSecretArg(cfg.args, i)) ||
+      Object.entries(cfg.env || {}).some(([k, v]) => SECRET_KEYS.test(k) || SECRET_VALUE.test(String(v))),
+  };
+}
+function scanMcp() {
+  const out = [];
+  const cfgPath = path.join(HOME, ".claude.json");
+  let j = null;
+  try { j = JSON.parse(fs.readFileSync(cfgPath, "utf8")); } catch {}
+  if (j) {
+    for (const [name, cfg] of Object.entries(j.mcpServers || {})) out.push(mcpEntry(name, cfg, "user", cfgPath));
+    for (const [proj, v] of Object.entries(j.projects || {})) {
+      for (const [name, cfg] of Object.entries((v && v.mcpServers) || {})) {
+        out.push(mcpEntry(name, cfg, "local", `${cfgPath} → ${path.basename(proj)}`));
+      }
+    }
+  }
+  for (const p of claudeProjects()) {
+    const f = path.join(p, ".mcp.json");
+    try {
+      const k = JSON.parse(fs.readFileSync(f, "utf8"));
+      for (const [name, cfg] of Object.entries(k.mcpServers || {})) out.push(mcpEntry(name, cfg, "project", f));
+    } catch {}
+  }
+  return { servers: out, config: short(cfgPath) };
+}
+
+/** 다른 PC로 옮길 때 쓰는 .mcp.json 템플릿 — 비밀값은 환경변수 자리표시자로. */
+function mcpTemplate(names) {
+  const cfgPath = path.join(HOME, ".claude.json");
+  let j = {};
+  try { j = JSON.parse(fs.readFileSync(cfgPath, "utf8")); } catch {}
+  const pick = names && names.length ? names : Object.keys(j.mcpServers || {});
+  const servers = {};
+  for (const name of pick) {
+    const cfg = (j.mcpServers || {})[name];
+    if (!cfg) continue;
+    const args = (cfg.args || []).map((a, i) =>
+      isSecretArg(cfg.args, i) ? "${" + name.toUpperCase().replace(/[^A-Z0-9]/g, "_") + "_TOKEN}" : a);
+    const env = {};
+    for (const [k, v] of Object.entries(cfg.env || {})) {
+      env[k] = SECRET_KEYS.test(k) || SECRET_VALUE.test(String(v)) ? "${" + k + "}" : v;
+    }
+    servers[name] = { ...(cfg.type ? { type: cfg.type } : {}), command: cfg.command, args,
+      ...(Object.keys(env).length ? { env } : {}) };
+  }
+  return { mcpServers: servers };
+}
+
+// ── 옮기기 (쓰기는 ~/.claude/skills 안에서만) ───────────────
+function destFor(name) {
+  const clean = String(name || "").trim().replace(/[\\/:*?"<>|]/g, "-");
+  if (!clean || clean.startsWith(".")) throw new Error("스킬 이름이 이상합니다");
+  const dest = path.resolve(SKILLS_HOME, clean);
+  if (!dest.startsWith(path.resolve(SKILLS_HOME) + path.sep)) throw new Error("허용되지 않는 경로입니다");
+  return dest;
+}
+function copyDir(from, to) {
+  fs.mkdirSync(to, { recursive: true });
+  for (const e of fs.readdirSync(from, { withFileTypes: true })) {
+    if (SKIP_DIRS.has(e.name)) continue;
+    const a = path.join(from, e.name), b = path.join(to, e.name);
+    if (e.isDirectory()) copyDir(a, b);
+    else if (e.isFile()) fs.copyFileSync(a, b);
+  }
+}
+/** 스킬 폴더를 Claude Code가 읽는 자리로 복사한다. */
+function installSkill(dir, { overwrite = false } = {}) {
+  const src = path.resolve(String(dir || ""));
+  if (!fs.existsSync(path.join(src, "SKILL.md"))) throw new Error("SKILL.md가 없는 폴더입니다");
+  // Claude Code 공식 자리(프로젝트의 .claude/skills)에 있는 것만 개인 폴더로 옮긴다
+  const official = claudeProjects().some((p) =>
+    src.toLowerCase().startsWith(path.resolve(p, ".claude", "skills").toLowerCase() + path.sep));
+  if (!official) throw new Error("Claude Code 스킬 폴더(.claude/skills)에 있는 스킬만 옮길 수 있습니다");
+  const meta = readSkillMeta(path.join(src, "SKILL.md"));
+  const dest = destFor(meta.name);
+  const exists = fs.existsSync(dest);
+  if (exists && !overwrite) return { ok: false, exists: true, name: meta.name, dest: short(dest) };
+  if (exists) fs.rmSync(dest, { recursive: true, force: true });
+  copyDir(src, dest);
+  return { ok: true, name: meta.name, dest: short(dest), from: short(src) };
+}
+/** 설치된 스킬만 지운다. */
+function removeSkill(name) {
+  const dest = destFor(name);
+  if (!fs.existsSync(dest)) throw new Error("설치되어 있지 않습니다");
+  fs.rmSync(dest, { recursive: true, force: true });
+  return { ok: true, name, dest: short(dest) };
+}
+
+module.exports = { scanSkills, scanMcp, mcpTemplate, installSkill, removeSkill, SKILLS_HOME, short };

package/uploader/viewer.js

@@ -10,6 +10,7 @@ const fs = require("fs");
 const path = require("path");
 const os = require("os");
 const http = require("http");
+const toolbox = require("./toolbox");
 
 const BASES = {
   "claude-code": path.join(os.homedir(), ".claude", "projects"),
@@ -328,6 +329,31 @@ header .note{font-size:.72rem;color:var(--muted)}
 #filters select{padding:5px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.75rem;max-width:220px}
 #sum{margin-left:auto;font-size:.73rem;color:var(--muted);font-variant-numeric:tabular-nums}
 main{flex:1;display:flex;min-height:0}
+.hidden{display:none!important}
+.vtabs{display:flex;gap:2px;margin-left:8px}
+.vtabs button{border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);padding:6px 12px;
+  border-bottom:2px solid transparent;cursor:pointer}
+.vtabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
+#toolbox{flex:1;overflow-y:auto;padding:18px 22px}
+.tb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
+.tb-head h2{font-size:1rem;font-weight:700}
+.tb-head .note2{font-size:.76rem;color:var(--muted)}
+.tb-group{font-size:.74rem;font-weight:700;color:var(--muted);margin:16px 0 6px;letter-spacing:.03em}
+.tb-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px 14px;margin-bottom:7px;
+  display:flex;gap:12px;align-items:flex-start}
+.tb-card .body{flex:1;min-width:0}
+.tb-card .nm{font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
+.tb-card .ds{font-size:.76rem;color:var(--ink-2);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.tb-card .pth{font-size:.68rem;color:var(--muted);font-family:ui-monospace,Consolas,monospace;margin-top:4px;word-break:break-all}
+.tb-badge{font-size:.62rem;border-radius:999px;padding:1px 8px;border:1px solid var(--border);color:var(--muted)}
+.tb-badge.ok{background:color-mix(in srgb,var(--good-ink) 12%,transparent);color:var(--good-ink);border-color:transparent}
+.tb-badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn-ink);border-color:transparent}
+.tb-pre{background:var(--chip);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:.7rem;
+  font-family:ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-all;margin-top:8px}
+.btn2{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:7px;padding:5px 11px;
+  font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;flex:none}
+.btn2:hover{background:var(--chip)}
+.btn2.primary{background:var(--accent);border-color:var(--accent);color:#fff}
 #side{width:360px;flex:none;border-right:1px solid var(--grid);overflow-y:auto;padding:8px;background:var(--page)}
 .sess{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:9px;border:1px solid var(--border);border-left:3px solid var(--grid);cursor:pointer;margin-bottom:5px;background:var(--surface)}
 .sess:hover{background:var(--chip)}.sess.on{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
@@ -350,8 +376,11 @@ main{flex:1;display:flex;min-height:0}
 .sumcard .bigtok{margin-left:auto;font-size:.95rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
 @media(max-width:760px){#side{width:220px}}
 </style></head><body>
-<header><h1>Token<b>bill</b> 로컬 뷰어</h1>
-<span class="note">이 PC의 로그만 읽습니다 — 아무것도 업로드되지 않아요</span>
+<header><h1>Token<b>bill</b> <span id="hTitle">로컬 뷰어</span></h1>
+<span class="note">이 PC의 것만 읽습니다 — 아무것도 업로드되지 않아요</span>
+<nav class="vtabs">
+  <button data-v="chat" class="on">대화</button><button data-v="skill">스킬</button><button data-v="mcp">MCP</button>
+</nav>
 <input id="q" placeholder="대화 내용 검색 (Enter)"></header>
 <div id="filters">
   <span id="chips"></span>
@@ -364,6 +393,7 @@ main{flex:1;display:flex;min-height:0}
   <span id="sum"></span>
 </div>
 <main><div id="side"></div><div id="view"><p class="empty">왼쪽에서 세션을 선택하세요</p></div></main>
+<section id="toolbox" class="hidden"></section>
 <script>
 (function(){
 "use strict";
@@ -474,7 +504,151 @@ function loadSession(s){
 projSel.addEventListener("change",function(){F.proj=this.value;refresh()});
 perSel.addEventListener("change",function(){F.per=this.value;refresh()});
 qIn.addEventListener("keydown",function(ev){if(ev.key==="Enter")refresh()});
+/* ── 스킬·MCP 관리기 ── */
+function toast(msg){
+  var t = document.getElementById("tbToast");
+  if (!t) { t = el("div",""); t.id = "tbToast"; document.body.appendChild(t);
+    t.style.cssText = "position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--page);"
+      + "padding:9px 16px;border-radius:8px;font-size:.82rem;z-index:30;max-width:80vw;text-align:center"; }
+  t.textContent = msg; t.style.display = "block";
+  clearTimeout(t._h); t._h = setTimeout(function(){ t.style.display = "none"; }, 3200);
+}
+var tb = null;   // 서버에서 받은 스캔 결과
+function tbLoad(force){
+  if (tb && !force) return Promise.resolve(tb);
+  return fetch("/api/toolbox").then(function(r){return r.json()}).then(function(j){ tb = j; return j; });
+}
+function tbPost(path, body){
+  return fetch(path, { method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify(body) })
+    .then(function(r){ return r.json(); });
+}
+function badge(text, cls){ var b = el("span","tb-badge"+(cls?" "+cls:""),text); return b; }
+function card(nameNode, desc, pathText, actions){
+  var c = el("div","tb-card"), body = el("div","body");
+  body.appendChild(nameNode);
+  if (desc) body.appendChild(el("div","ds",desc));
+  if (pathText) body.appendChild(el("div","pth",pathText));
+  c.appendChild(body);
+  (actions||[]).forEach(function(a){ c.appendChild(a); });
+  return c;
+}
+function renderSkills(){
+  var box = document.getElementById("toolbox");
+  box.textContent = "";
+  var head = el("div","tb-head");
+  head.appendChild(el("h2","","스킬 " + tb.skills.length + "개"));
+  head.appendChild(el("span","note2","Claude Code가 공식적으로 읽는 자리만 보여줍니다 — 개인(" + tb.installed_dir + ") · 프로젝트(.claude/skills) · 플러그인"));
+  box.appendChild(head);
+  if (!tb.skills.length) {
+    box.appendChild(el("p","empty","아직 Claude Code 스킬이 없어요. " + tb.installed_dir + "/<이름>/SKILL.md 로 두면 어느 폴더에서든 읽힙니다."));
+    return;
+  }
+  // 개인 → 프로젝트 → 플러그인 순서
+  var ORDER = { personal: 0, project: 1, plugin: 2 };
+  var groups = {};
+  tb.skills.forEach(function(s){ (groups[s.origin] = groups[s.origin] || []).push(s); });
+  Object.keys(groups).sort(function(a,b){
+    return (ORDER[groups[a][0].source] - ORDER[groups[b][0].source]) || a.localeCompare(b,"ko");
+  })
+  .forEach(function(g){
+    box.appendChild(el("div","tb-group", g + " · " + groups[g].length));
+    groups[g].forEach(function(s){
+      var nm = el("div","nm");
+      nm.appendChild(document.createTextNode(s.name));
+      if (s.source === "personal") nm.appendChild(badge("어디서나 사용","ok"));
+      if (s.source === "project") nm.appendChild(badge("이 폴더에서만"));
+      if (s.source === "plugin") nm.appendChild(badge("플러그인"));
+      if (s.copies.length) nm.appendChild(badge("사본 " + s.copies.length));
+      if (s.files.length) nm.appendChild(badge(s.files.join(", ").slice(0,40)));
+      // 플러그인 스킬은 플러그인이 관리한다 — 여기서 건드리지 않는다
+      if (s.source === "plugin") { box.appendChild(card(nm, s.description, s.dir_short, [])); return; }
+      var btn = el("button","btn2" + (s.installed ? "" : " primary"), s.installed ? "제거" : "어디서나 쓰기");
+      btn.title = s.installed ? "개인 스킬 폴더에서 지웁니다" : "개인 스킬 폴더(" + tb.installed_dir + ")로 복사해 어느 폴더에서든 쓰게 합니다";
+      btn.addEventListener("click", function(){
+        if (s.installed) {
+          if (!confirm(s.name + " 스킬을 " + tb.installed_dir + " 에서 지울까요?")) return;
+          tbPost("/api/skills/remove", { name: s.name }).then(function(r){
+            toast(r.error ? r.error : s.name + " 제거됨"); tbLoad(true).then(renderSkills);
+          });
+        } else {
+          tbPost("/api/skills/install", { dir: s.dir }).then(function(r){
+            if (r.exists && !r.ok) {
+              if (!confirm(s.name + " 이(가) 이미 있습니다. 덮어쓸까요?")) return;
+              return tbPost("/api/skills/install", { dir: s.dir, overwrite: true }).then(function(r2){
+                toast(r2.error ? r2.error : s.name + " 설치됨"); tbLoad(true).then(renderSkills);
+              });
+            }
+            toast(r.error ? r.error : s.name + " 설치됨 → " + r.dest);
+            tbLoad(true).then(renderSkills);
+          });
+        }
+      });
+      box.appendChild(card(nm, s.description, s.dir_short, [btn]));
+    });
+  });
+}
+function renderMcp(){
+  var box = document.getElementById("toolbox");
+  box.textContent = "";
+  var head = el("div","tb-head");
+  head.appendChild(el("h2","","MCP " + tb.servers.length + "개"));
+  head.appendChild(el("span","note2","설정 파일: " + tb.config + " · 토큰은 가려서 보여줍니다"));
+  box.appendChild(head);
+  var SCOPE = { user: "사용자 전역", local: "이 폴더에서만", project: "저장소 공유(.mcp.json)" };
+  tb.servers.forEach(function(s){
+    var nm = el("div","nm");
+    nm.appendChild(document.createTextNode(s.name));
+    nm.appendChild(badge(SCOPE[s.scope] || s.scope));
+    if (s.has_secret) nm.appendChild(badge("토큰 포함","warn"));
+    var cmd = s.command + " " + (s.args || []).join(" ");
+    var btn = el("button","btn2","등록 명령 복사");
+    btn.addEventListener("click", function(){
+      var line = "claude mcp add -s user " + s.name + " -- " + cmd;
+      if (navigator.clipboard) navigator.clipboard.writeText(line).then(function(){ toast("복사됨 — 토큰 자리는 직접 채우세요"); });
+    });
+    box.appendChild(card(nm, cmd, s.where, [btn]));
+  });
+  var tHead = el("div","tb-group","다른 PC로 옮기기");
+  box.appendChild(tHead);
+  var note = el("div","ds","아래 내용을 저장소의 .mcp.json 으로 저장하면 팀원·다른 PC가 같은 MCP를 씁니다. 토큰은 환경변수 자리표시자로 바꿔 두었습니다.");
+  box.appendChild(note);
+  var pre = el("pre","tb-pre","불러오는 중…");
+  box.appendChild(pre);
+  fetch("/api/mcp/template").then(function(r){return r.json()}).then(function(j){
+    pre.textContent = JSON.stringify(j, null, 2);
+  });
+  var copy = el("button","btn2","템플릿 복사");
+  copy.style.marginTop = "8px";
+  copy.addEventListener("click", function(){
+    if (navigator.clipboard) navigator.clipboard.writeText(pre.textContent).then(function(){ toast("템플릿 복사됨"); });
+  });
+  box.appendChild(copy);
+}
+var TITLES = { chat: "로컬 뷰어", skill: "스킬 관리", mcp: "MCP 설정" };
+function setTab(v){
+  document.querySelectorAll(".vtabs button").forEach(function(b){ b.classList.toggle("on", b.dataset.v === v); });
+  var chat = v === "chat";
+  document.querySelector("main").classList.toggle("hidden", !chat);
+  document.getElementById("filters").classList.toggle("hidden", !chat);
+  document.getElementById("q").classList.toggle("hidden", !chat);
+  document.getElementById("toolbox").classList.toggle("hidden", chat);
+  document.getElementById("hTitle").textContent = TITLES[v];
+  try { localStorage.setItem("tb-viewer-tab", v); } catch (e) {}
+  if (!chat) tbLoad().then(v === "skill" ? renderSkills : renderMcp)
+    .catch(function(){ document.getElementById("toolbox").textContent = "불러오지 못했습니다"; });
+}
+document.querySelectorAll(".vtabs button").forEach(function(b){
+  b.addEventListener("click", function(){ setTab(b.dataset.v); });
+});
 loadList();
+// 주소의 #skill·#mcp로 바로 들어올 수 있다 (포탈 도구 메뉴가 이 주소를 쓴다)
+var fromHash = (location.hash || "").replace("#", "");
+if (fromHash === "skill" || fromHash === "mcp" || fromHash === "chat") setTab(fromHash);
+else { try { var saved = localStorage.getItem("tb-viewer-tab"); if (saved && saved !== "chat") setTab(saved); } catch (e) {} }
+window.addEventListener("hashchange", function () {
+  var v = (location.hash || "").replace("#", "");
+  if (v === "skill" || v === "mcp" || v === "chat") setTab(v);
+});
 })();
 </script></body></html>`;
 
@@ -526,6 +700,30 @@ function start(port, opts) {
         const q = (u.searchParams.get("q") || "").trim();
         return json(res, q.length >= 2 ? searchSessions(q) : []);
       }
+      // ── 스킬·MCP 관리기 (전부 이 PC 안에서만) ──
+      if (u.pathname === "/api/toolbox") {
+        return json(res, { ...toolbox.scanSkills(), ...toolbox.scanMcp() });
+      }
+      if (u.pathname === "/api/mcp/template") {
+        const names = (u.searchParams.get("names") || "").split(",").map((s) => s.trim()).filter(Boolean);
+        return json(res, toolbox.mcpTemplate(names));
+      }
+      if (req.method === "POST" && (u.pathname === "/api/skills/install" || u.pathname === "/api/skills/remove")) {
+        let body = "";
+        req.on("data", (c) => { body += c; if (body.length > 1e5) req.destroy(); });
+        return req.on("end", () => {
+          try {
+            const b = JSON.parse(body || "{}");
+            const out = u.pathname.endsWith("install")
+              ? toolbox.installSkill(b.dir, { overwrite: !!b.overwrite })
+              : toolbox.removeSkill(b.name);
+            json(res, out);
+          } catch (e) {
+            res.writeHead(400, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(JSON.stringify({ error: String(e.message || e) }));
+          }
+        });
+      }
       res.writeHead(404); res.end("not found");
     } catch (e) {
       res.writeHead(500); res.end(String(e.message || e));