claude-home 1.8.1 → 1.8.3

package/README.md

@@ -53,7 +53,7 @@ Direct links (`#/note/filename`) let you open a specific note instantly.
 Visual overview of all your Claude projects with session count, token usage, cost, and memory files. Drill into any project to browse its sessions, memory entries, and `CLAUDE.md` files.
 
 ### Plans
-Read and search your GSD/planning files from `~/.claude/plans/`. Export or publish as a Gist with one click.
+Read and search your GSD/planning files from `~/.claude/plans/` (or your configured config dir). Export or publish as a Gist with one click.
 
 ### Memory
 Inspect your auto-memory entries across all projects.
@@ -68,7 +68,7 @@ Read and edit your `CLAUDE.md` files (global and per-project). Inspect permissio
 
 ## No tokens. No cloud. No tracking.
 
-claude-home is a local Express server that reads your `~/.claude/` directory directly. It never calls the Claude API, never sends data anywhere, and works completely offline (except for the marketplace and Gist sharing features).
+claude-home is a local Express server that reads your Claude config directory (`~/.claude/` by default) directly. It never calls the Claude API, never sends data anywhere, and works completely offline (except for the marketplace and Gist sharing features).
 
 ---
 
@@ -86,15 +86,6 @@ npm install -g claude-home
 
 > Requires Node.js 18+.
 
-### From source
-
-```bash
-git clone https://github.com/ZenekeZene/claude-home
-cd claude-home
-npm install
-npm start
-```
-
 ---
 
 ## Usage
@@ -123,10 +114,12 @@ Or toggle it directly from the **Hooks** section in the UI.
 ```
 claude-home [options]
 
-  --port, -p <n>   Port to use (default: 3141)
-  --no-open        Don't open the browser automatically
-  --version, -v    Print version
-  --help, -h       Show help
+  --port, -p <n>      Port to use (default: 3141)
+  --no-open           Don't open the browser automatically
+  --config-dir <path> Claude config directory (default: ~/.claude)
+                        Also: CLAUDE_CONFIG_DIR env var
+  --version, -v       Print version
+  --help, -h          Show help
 
 Commands:
   setup-hook       Add SessionStart hook + /claude-home slash command
@@ -134,11 +127,28 @@ Commands:
   stop             Stop the running claude-home server
 ```
 
+### Multiple Claude installations
+
+If you use separate Claude Code configurations (e.g. `~/.claude` for personal and `~/.claude-work` for work), you can point claude-home at any of them:
+
+```bash
+# Via flag
+claude-home --config-dir ~/.claude-work
+
+# Via environment variable
+CLAUDE_CONFIG_DIR=~/.claude-work claude-home
+
+# Install the auto-start hook into the work config
+claude-home --config-dir ~/.claude-work setup-hook
+```
+
+The dashboard will read sessions, settings, skills, commands, agents, and plans from the specified directory. The UI will reflect the correct paths throughout.
+
 ---
 
 ## Claude integration (Notes & Today)
 
-claude-home can receive content directly from Claude during active sessions. Go to **Config → Integrations** and click **Set up** — this adds instructions to your `~/.claude/CLAUDE.md` and grants the necessary write permissions automatically.
+claude-home can receive content directly from Claude during active sessions. Go to **Config → Integrations** and click **Set up** — this adds instructions to your `CLAUDE.md` and grants the necessary write permissions automatically.
 
 Once set up, from any Claude session you can say:
 - *"Save this as a note"* → creates a note in the Notes view
@@ -157,7 +167,7 @@ Publish sessions or plans as public GitHub Gists. Go to **Config → Sharing**,
 
 claude-home includes a marketplace to discover and install skills from GitHub repositories.
 
-On first run it comes pre-configured with the [Anthropic Official skills repo](https://github.com/anthropics/skills). You can add your own sources (including private repos) by editing `~/.claude/claude-home/marketplace.json`:
+On first run it comes pre-configured with the [Anthropic Official skills repo](https://github.com/anthropics/skills). You can add your own sources (including private repos) by editing `~/.claude/claude-home/marketplace.json` (or the equivalent in your configured config dir):
 
 ```json
 {
@@ -175,7 +185,7 @@ On first run it comes pre-configured with the [Anthropic Official skills repo](h
 }
 ```
 
-For private repos, set your token in `~/.claude/claude-home/.env`:
+For private repos, set your token in `~/.claude/claude-home/.env` (or your config dir equivalent):
 
 ```
 GITHUB_TOKEN=ghp_your_token_here

package/bin/cli.js

@@ -9,18 +9,7 @@ const os = require('os');
 
 const pkg = require('../package.json');
 
-// ─── Ensure data dir exists (always, before any subcommand) ──────────────────
-const DATA_DIR = path.join(os.homedir(), '.claude', 'claude-home');
-try {
-  if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
-  const marketplaceDest = path.join(DATA_DIR, 'marketplace.json');
-  if (!fs.existsSync(marketplaceDest)) {
-    const defaultSrc = path.join(__dirname, '..', 'marketplace.default.json');
-    if (fs.existsSync(defaultSrc)) fs.copyFileSync(defaultSrc, marketplaceDest);
-  }
-} catch { /* ignore */ }
-
-// ─── Arg parsing ─────────────────────────────────────────────────────────────
+// ─── Arg parsing (must happen before path derivation) ────────────────────────
 
 const args = process.argv.slice(2);
 const subcommand = args[0];
@@ -31,9 +20,25 @@ function getFlag(name, def) {
   return args[idx + 1];
 }
 
+const configDirFlag = getFlag('--config-dir', '');
+if (configDirFlag) process.env.CLAUDE_CONFIG_DIR = path.resolve(configDirFlag);
+
 const port = parseInt(getFlag('--port', getFlag('-p', process.env.PORT || 3141)), 10);
 const noOpen = args.includes('--no-open');
 
+// ─── Config directory + data dir ─────────────────────────────────────────────
+const CLAUDE_DIR = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), '.claude');
+const DATA_DIR   = path.join(CLAUDE_DIR, 'claude-home');
+
+try {
+  if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
+  const marketplaceDest = path.join(DATA_DIR, 'marketplace.json');
+  if (!fs.existsSync(marketplaceDest)) {
+    const defaultSrc = path.join(__dirname, '..', 'marketplace.default.json');
+    if (fs.existsSync(defaultSrc)) fs.copyFileSync(defaultSrc, marketplaceDest);
+  }
+} catch { /* ignore */ }
+
 if (args.includes('--version') || args.includes('-v')) {
   console.log(pkg.version);
   process.exit(0);
@@ -48,10 +53,12 @@ if (args.includes('--help') || args.includes('-h')) {
     claude-home setup-hook
 
   Options:
-    --port, -p <n>   Port to use (default: 3141)
-    --no-open        Don't open the browser automatically
-    --version, -v    Print version
-    --help, -h       Show help
+    --port, -p <n>      Port to use (default: 3141)
+    --no-open           Don't open the browser automatically
+    --config-dir <path> Claude config directory (default: ~/.claude)
+                          Also: CLAUDE_CONFIG_DIR env var
+    --version, -v       Print version
+    --help, -h          Show help
 
   Commands:
     setup-hook       Add SessionStart hook and /claude-home slash command
@@ -102,7 +109,7 @@ promptSetupHookIfNeeded().then(() => {
 // ─── Update check ────────────────────────────────────────────────────────────
 
 function checkForUpdates() {
-  const cacheFile = path.join(os.homedir(), '.claude', 'claude-home', '.update-check');
+  const cacheFile = path.join(DATA_DIR, '.update-check');
   const TTL = 24 * 60 * 60 * 1000; // 24h
 
   try {
@@ -149,8 +156,8 @@ function isPortFree(p) {
 }
 
 function promptSetupHookIfNeeded() {
-  const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
-  const sentinelPath = path.join(os.homedir(), '.claude', 'claude-home', '.hook-prompted');
+  const settingsPath = path.join(CLAUDE_DIR, 'settings.json');
+  const sentinelPath = path.join(DATA_DIR, '.hook-prompted');
 
   // Already prompted before, or hook already set up
   if (fs.existsSync(sentinelPath)) return Promise.resolve();
@@ -186,8 +193,8 @@ function openBrowser(url) {
 }
 
 function setupHook() {
-  const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
-  const commandsDir = path.join(os.homedir(), '.claude', 'commands');
+  const settingsPath = path.join(CLAUDE_DIR, 'settings.json');
+  const commandsDir = path.join(CLAUDE_DIR, 'commands');
   const commandPath = path.join(commandsDir, 'claude-home.md');
   const hookCommand = `lsof -ti:${port} >/dev/null 2>&1 || (claude-home --no-open &>/dev/null &)`;
 
@@ -235,9 +242,9 @@ function setupHook() {
 }
 
 function removeHook() {
-  const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
-  const commandPath = path.join(os.homedir(), '.claude', 'commands', 'claude-home.md');
-  const sentinelPath = path.join(os.homedir(), '.claude', 'claude-home', '.hook-prompted');
+  const settingsPath = path.join(CLAUDE_DIR, 'settings.json');
+  const commandPath = path.join(CLAUDE_DIR, 'commands', 'claude-home.md');
+  const sentinelPath = path.join(DATA_DIR, '.hook-prompted');
 
   // Remove SessionStart hook
   let removed = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-home",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Web dashboard for Claude Code — browse sessions, manage skills, hooks, commands, and agents",
   "main": "server.js",
   "bin": {
@@ -14,7 +14,12 @@
     "README.md"
   ],
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "engines": {
     "node": ">=18"
@@ -35,6 +40,20 @@
   "author": "ZenekeZene",
   "license": "MIT",
   "dependencies": {
-    "express": "^4.18.2"
+    "@tanstack/react-query": "^5.96.2",
+    "express": "^4.18.2",
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.3"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.0.2",
+    "vitest": "^3.2.4"
   }
 }

package/public/index.html

@@ -2182,7 +2182,7 @@
       </div>
     </div>
 
-    <template x-if="showToday || showInsights || showNotes || showTemplates">
+    <template x-if="showToday || showInsights || showNotes || showTemplates || showWebmd">
       <div>
         <div class="nav-divider"></div>
         <div class="nav-section-label" @click="widgetsOpen=!widgetsOpen;localStorage.setItem('cs:widgetsOpen',widgetsOpen)" style="cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding-right:12px;user-select:none">
@@ -2235,6 +2235,19 @@
             <span class="nav-text">Prompts</span>
             <span class="nav-count" x-show="templates.length>0" x-text="templates.length"></span>
           </div>
+          <div x-show="showWebmd" class="nav-item nav-widget" :class="{ active: view === 'webmd' }" @click="view='webmd';selectedSession=null;loadWebmd()">
+            <span class="nav-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M9 2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6z"/>
+                <polyline points="9 2 9 6 13 6"/>
+                <line x1="5" y1="9" x2="11" y2="9"/>
+                <line x1="5" y1="12" x2="8" y2="12"/>
+                <path d="M10.5 11.5 L12 10 L13.5 11.5" stroke-linecap="round"/>
+              </svg>
+            </span>
+            <span class="nav-text">URL to MD</span>
+            <span class="nav-count" x-show="webmdItems.length>0" x-text="webmdItems.length"></span>
+          </div>
         </div>
       </div>
     </template>
@@ -4141,14 +4154,14 @@
             </div>
           </template>
         </div>
-        <span class="section-sub">Implementation plans Claude saves to ~/.claude/plans</span>
+        <span class="section-sub" x-text="'Implementation plans Claude saves to ' + (status?.claudeDir || '~/.claude') + '/plans'"></span>
         <div style="flex:1;overflow:hidden;">
           <template x-if="plansLoading"><div class="loading"><div class="spinner"></div> Loading…</div></template>
           <template x-if="!plansLoading && plans.length === 0">
             <div class="empty">
               <div class="empty-mark"><svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="12" height="12"/><line x1="5" y1="6" x2="11" y2="6"/><line x1="5" y1="9" x2="9" y2="9"/></svg></div>
               <div style="font-size:13px;color:var(--ink-2);font-weight:500;margin-bottom:4px">No plans yet</div>
-              <div style="font-size:12px;color:var(--ink-4);max-width:300px;text-align:center;line-height:1.5">When Claude creates a plan, it saves a Markdown file to <code style="font-size:11px;background:var(--canvas-2);padding:1px 4px;border-radius:3px">~/.claude/plans/</code>. Plans will appear here automatically.</div>
+              <div style="font-size:12px;color:var(--ink-4);max-width:300px;text-align:center;line-height:1.5">When Claude creates a plan, it saves a Markdown file to <code style="font-size:11px;background:var(--canvas-2);padding:1px 4px;border-radius:3px" x-text="(status?.claudeDir || '~/.claude') + '/plans/'"></code>. Plans will appear here automatically.</div>
             </div>
           </template>
           <template x-if="!plansLoading && plans.length > 0 && filteredPlans().length === 0">
@@ -5141,7 +5154,7 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
             </template>
           </select>
         </div>
-        <span class="section-sub">Subagents Claude can delegate tasks to — stored in ~/.claude/agents</span>
+        <span class="section-sub" x-text="'Subagents Claude can delegate tasks to — stored in ' + (status?.claudeDir || '~/.claude') + '/agents'"></span>
         <!-- Tabs -->
         <div class="tools-tabs" style="border-bottom:1px solid var(--rule);flex-shrink:0">
           <div class="tools-tab" :class="{active:agentsTab==='marketplace'}" @click="agentsTab='marketplace';loadAgentsMarketplace();loadAgentsMarketplaceSources()">
@@ -5598,6 +5611,97 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
       </div>
     </template>
 
+    <!-- URL to Markdown widget -->
+    <template x-if="view === 'webmd' && !selectedSession">
+      <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
+        <div class="topbar">
+          <span class="topbar-title">URL to MD</span>
+          <span style="font-size:11px;color:var(--ink-3)" x-show="webmdItems.length>0" x-text="webmdItems.length + ' saved'"></span>
+        </div>
+        <div style="flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px">
+
+          <!-- Input area -->
+          <div style="display:flex;gap:8px">
+            <input type="text" x-model="webmdUrl" placeholder="https://example.com/article" @keydown.enter="fetchWebmd()"
+              style="flex:1;font-size:13px;padding:6px 10px;border:1px solid var(--rule-2);border-radius:6px;background:var(--white);color:var(--ink)">
+            <button class="btn btn-primary btn-sm" @click="fetchWebmd()" :disabled="webmdLoading||!webmdUrl.trim()">
+              <span x-show="!webmdLoading">Convertir</span>
+              <span x-show="webmdLoading" style="display:flex;align-items:center;gap:5px"><span class="spinner" style="width:12px;height:12px;border-width:2px"></span>Cargando…</span>
+            </button>
+          </div>
+          <!-- Options -->
+          <div style="display:flex;gap:16px;flex-wrap:wrap">
+            <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none">
+              <input type="checkbox" x-model="webmdOptTitle" @change="localStorage.setItem('cs:webmdOptTitle',webmdOptTitle)">
+              Include Title
+            </label>
+            <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none">
+              <input type="checkbox" x-model="webmdOptLinks" @change="localStorage.setItem('cs:webmdOptLinks',webmdOptLinks)">
+              Ignore Links
+            </label>
+            <label style="display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none">
+              <input type="checkbox" x-model="webmdOptClean" @change="localStorage.setItem('cs:webmdOptClean',webmdOptClean)">
+              Clean / Filter
+            </label>
+          </div>
+          <div x-show="webmdError" style="font-size:12px;color:var(--red);padding:6px 10px;background:rgba(220,50,50,.07);border-radius:5px" x-text="webmdError"></div>
+
+          <!-- Result -->
+          <template x-if="webmdResult">
+            <div style="display:flex;flex-direction:column;gap:10px">
+              <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap">
+                <div style="font-size:13px;font-weight:600;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" x-text="webmdResult.title"></div>
+                <div style="display:flex;gap:6px;flex-shrink:0">
+                  <button class="btn btn-outline btn-sm" @click="webmdShowRaw=!webmdShowRaw" x-text="webmdShowRaw ? 'Ver preview' : 'Ver raw'"></button>
+                  <button class="btn btn-outline btn-sm" @click="copyWebmd()" title="Copiar Markdown">
+                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                      <rect x="5" y="5" width="9" height="9" rx="1"/>
+                      <path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1"/>
+                    </svg>
+                    Copiar MD
+                  </button>
+                  <button class="btn btn-primary btn-sm" @click="saveWebmd()">Guardar</button>
+                </div>
+              </div>
+              <!-- Raw view -->
+              <template x-if="webmdShowRaw">
+                <pre style="background:var(--canvas);border:1px solid var(--rule);border-radius:6px;padding:12px;font-size:12px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;color:var(--ink-2);margin:0;height:calc(100vh - 300px)" x-text="processedWebmd()"></pre>
+              </template>
+              <!-- Rendered view -->
+              <template x-if="!webmdShowRaw">
+                <div class="markdown-body" style="font-size:13px;line-height:1.6;overflow-y:auto;padding:12px;border:1px solid var(--rule);border-radius:6px;background:var(--white);flex:1;min-height:0" x-html="marked.parse(processedWebmd())"></div>
+              </template>
+            </div>
+          </template>
+
+          <!-- Saved items -->
+          <template x-if="webmdItems.length > 0">
+            <div style="border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:8px">
+              <div style="font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.05em">Guardadas</div>
+              <template x-for="item in webmdItems" :key="item.slug">
+                <div style="padding:10px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--white);display:flex;align-items:center;gap:10px">
+                  <div style="flex:1;min-width:0">
+                    <div style="font-size:13px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap" x-text="item.title"></div>
+                    <div style="font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" x-text="item.url"></div>
+                    <div style="font-size:11px;color:var(--ink-3);margin-top:1px" x-text="new Date(item.savedAt).toLocaleDateString('es-ES',{day:'2-digit',month:'short',year:'numeric'})"></div>
+                  </div>
+                  <div style="display:flex;gap:5px;flex-shrink:0">
+                    <button class="btn btn-outline btn-sm" @click="webmdResult={title:item.title,markdown:item.markdown};webmdUrl=item.url;webmdShowRaw=false">Ver</button>
+                    <button class="btn btn-outline btn-sm" @click="navigator.clipboard.writeText(item.markdown)" title="Copiar">
+                      <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M3 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1"/></svg>
+                    </button>
+                    <button class="btn btn-outline btn-sm" style="color:var(--red)" @click="deleteWebmd(item.slug)">×</button>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </template>
+          <div x-show="webmdItemsLoading" class="loading"><div class="spinner"></div> Cargando…</div>
+
+        </div>
+      </div>
+    </template>
+
     <!-- Commands / Skills / Config -->
     <template x-if="(view === 'commands' || view === 'skills' || view === 'config' || view === 'instructions' || view === 'permissions' || view === 'hooks') && !selectedSession">
       <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
@@ -5624,7 +5728,7 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
             <button @click="showCliRef=true;cliRefTab='slash'" style="background:none;border:1px solid var(--rule);border-radius:50%;width:20px;height:20px;font-size:11px;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;margin-left:auto" title="CLI Reference">?</button>
           </template>
         </div>
-        <span class="section-sub" x-text="view==='commands' ? 'Custom slash commands in ~/.claude/commands' : view==='skills' ? 'Reusable capabilities for Claude Code' : view==='instructions' ? 'Global and per-project CLAUDE.md files' : view==='permissions' ? 'Tool permission controls' : view==='hooks' ? 'Scripts triggered by Claude Code events' : 'Application settings'"></span>
+        <span class="section-sub" x-text="view==='commands' ? 'Custom slash commands in ' + (status?.claudeDir || '~/.claude') + '/commands' : view==='skills' ? 'Reusable capabilities for Claude Code' : view==='instructions' ? 'Global and per-project CLAUDE.md files' : view==='permissions' ? 'Tool permission controls' : view==='hooks' ? 'Scripts triggered by Claude Code events' : 'Application settings'"></span>
         <div style="flex:1;overflow:hidden;">
           <template x-if="toolsLoading||(configLoading&&(view==='config'||view==='instructions'||view==='permissions'))"><div class="loading"><div class="spinner"></div> Loading…</div></template>
           <template x-if="!toolsLoading&&(view==='commands'||view==='skills')">
@@ -6768,7 +6872,7 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
                       <div>
                         <label style="font-size:11px;color:var(--ink-3);display:block;margin-bottom:6px">Save to</label>
                         <div style="display:flex;gap:16px;flex-wrap:wrap">
-                          <template x-for="sc in [{v:'user',d:'~/.claude/settings.json'},{v:'project',d:'.claude/settings.json'},{v:'local',d:'.claude/settings.local.json'}]" :key="sc.v">
+                          <template x-for="sc in [{v:'user',d:(status?.claudeDir||'~/.claude')+'/settings.json'},{v:'project',d:'.claude/settings.json'},{v:'local',d:'.claude/settings.local.json'}]" :key="sc.v">
                             <label style="display:flex;align-items:center;gap:5px;cursor:pointer">
                               <input type="radio" :value="sc.v" x-model="hookBuilder.scope">
                               <span style="font-size:12px;color:var(--ink-2)" x-text="sc.v"></span>
@@ -7018,7 +7122,7 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
                           <input type="radio" value="global" x-model="instrNew.audience" style="margin-top:2px;accent-color:var(--accent,#4a9);flex-shrink:0">
                           <div style="flex:1;min-width:0">
                             <div style="font-size:12px;font-weight:600;color:var(--ink-1)">Solo yo, en todos mis proyectos</div>
-                            <div style="font-size:11px;color:var(--ink-3);margin-top:1px">Se guarda en <code>~/.claude/CLAUDE.md</code>. Claude lo lee en cualquier proyecto.</div>
+                            <div style="font-size:11px;color:var(--ink-3);margin-top:1px">Se guarda en <code x-text="(status?.claudeDir || '~/.claude') + '/CLAUDE.md'"></code>. Claude lo lee en cualquier proyecto.</div>
                           </div>
                         </label>
 
@@ -7743,6 +7847,17 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
         widgetsOpen: localStorage.getItem('cs:widgetsOpen') !== 'false',
         showNotes: localStorage.getItem('cs:showNotes') !== 'false',
         showTemplates: localStorage.getItem('cs:showTemplates') !== 'false',
+        showWebmd: localStorage.getItem('cs:showWebmd') !== 'false',
+        webmdUrl: '',
+        webmdResult: null,
+        webmdLoading: false,
+        webmdError: '',
+        webmdShowRaw: true,
+        webmdOptTitle: localStorage.getItem('cs:webmdOptTitle') !== 'false',
+        webmdOptLinks: localStorage.getItem('cs:webmdOptLinks') === 'true',
+        webmdOptClean: localStorage.getItem('cs:webmdOptClean') === 'true',
+        webmdItems: [],
+        webmdItemsLoading: false,
         defaultView: localStorage.getItem('cs:defaultView') || '',
 
         // ── Live session monitor ──────────────────────────────
@@ -9352,6 +9467,60 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
           this.templatesLoading = false;
         },
 
+        async loadWebmd() {
+          if (this.webmdItems.length > 0) return;
+          this.webmdItemsLoading = true;
+          this.webmdItems = await fetch('/api/webmd').then(r => r.json()).catch(() => []);
+          this.webmdItemsLoading = false;
+        },
+
+        async fetchWebmd() {
+          if (!this.webmdUrl.trim()) return;
+          this.webmdLoading = true;
+          this.webmdError = '';
+          this.webmdResult = null;
+          try {
+            const r = await fetch('/api/webmd/fetch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: this.webmdUrl.trim() }) });
+            const data = await r.json();
+            if (!r.ok) throw new Error(data.error || 'Error desconocido');
+            this.webmdResult = data;
+          } catch (e) { this.webmdError = e.message; }
+          this.webmdLoading = false;
+        },
+
+        async saveWebmd() {
+          if (!this.webmdResult) return;
+          this.webmdError = '';
+          try {
+            const r = await fetch('/api/webmd/save', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: this.webmdUrl.trim(), title: this.webmdResult.title, markdown: this.processedWebmd() }) });
+            const entry = await r.json();
+            if (!r.ok) throw new Error(entry.error || 'Error desconocido');
+            this.webmdItems.unshift(entry);
+          } catch (e) { this.webmdError = e.message; }
+        },
+
+        async deleteWebmd(slug) {
+          await fetch('/api/webmd/' + slug, { method: 'DELETE' });
+          this.webmdItems = this.webmdItems.filter(i => i.slug !== slug);
+        },
+
+        processedWebmd() {
+          if (!this.webmdResult) return '';
+          let md = this.webmdResult.markdown;
+          if (!this.webmdOptTitle) md = md.replace(/^#[^\n]*\n+/, '');
+          if (this.webmdOptLinks) md = md.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+          if (this.webmdOptClean) {
+            md = md.replace(/!\[[^\]]*\]\([^)]*\)/g, '');        // remove images
+            md = md.replace(/^(Title:|URL:|Published:|Source:)[^\n]*\n?/gm, ''); // Jina metadata lines
+            md = md.replace(/\n{3,}/g, '\n\n').trim();           // collapse blank lines
+          }
+          return md;
+        },
+
+        copyWebmd() {
+          navigator.clipboard.writeText(this.processedWebmd()).catch(() => {});
+        },
+
         async createTemplate() {
           this.templateNew.saving = true; this.templateNew.msg = '';
           try {
@@ -9792,12 +9961,12 @@ Los **agents**, **slash commands** (\`/spec\`, \`/plan\`, \`/build\`, \`/test\`,
         hookTemplates() {
           return [
             { name: 'Notify on finish',    desc: 'macOS notification when Claude stops responding',   event: 'Stop',        matcher: '',     type: 'command', command: `osascript -e 'display notification "Claude finished" with title "Claude Code" sound name "Glass"'` },
-            { name: 'Log session start',   desc: 'Append session start + working dir to hooks.log',   event: 'SessionStart',matcher: '',     type: 'command', command: `echo "[$(date -Iseconds)] Session started in $PWD" >> ~/.claude/hooks.log` },
+            { name: 'Log session start',   desc: 'Append session start + working dir to hooks.log',   event: 'SessionStart',matcher: '',     type: 'command', command: `echo "[$(date -Iseconds)] Session started in $PWD" >> ${this.status?.claudeDir || '~/.claude'}/hooks.log` },
             { name: 'Git status on start', desc: 'Print git status when a session begins',             event: 'SessionStart',matcher: '',     type: 'command', command: `git status --short 2>/dev/null || true` },
             { name: 'Block rm -rf',        desc: 'Cancel any Bash command containing rm -rf (exit 2)',event: 'PreToolUse',  matcher: 'Bash', type: 'command', command: `python3 -c "import json,sys; d=json.load(sys.stdin); c=d.get('tool_input',{}).get('command',''); (sys.stderr.write('BLOCKED: rm -rf\\n'), sys.exit(2)) if 'rm -rf' in c else None"` },
             { name: 'Block force push',    desc: 'Cancel git push --force commands (exit 2)',          event: 'PreToolUse',  matcher: 'Bash', type: 'command', command: `python3 -c "import json,sys; d=json.load(sys.stdin); c=d.get('tool_input',{}).get('command',''); (sys.stderr.write('BLOCKED: force push\\n'), sys.exit(2)) if 'git push' in c and ('--force' in c or ' -f ' in c) else None"` },
-            { name: 'Audit Bash commands', desc: 'Append every shell command run to bash-audit.log',  event: 'PostToolUse', matcher: 'Bash', type: 'command', command: `python3 -c "import json,sys,os,datetime; d=json.load(sys.stdin); c=d.get('tool_input',{}).get('command','')[:200]; open(os.path.expanduser('~/.claude/bash-audit.log'),'a').write(datetime.datetime.now().isoformat()+' '+c+'\\n')"` },
-            { name: 'Audit file edits',    desc: 'Log every edited file path to edit-audit.log',      event: 'PostToolUse', matcher: 'Edit', type: 'command', command: `python3 -c "import json,sys,os,datetime; d=json.load(sys.stdin); p=d.get('tool_input',{}).get('file_path','?'); open(os.path.expanduser('~/.claude/edit-audit.log'),'a').write(datetime.datetime.now().isoformat()+' '+p+'\\n')"` },
+            { name: 'Audit Bash commands', desc: 'Append every shell command run to bash-audit.log',  event: 'PostToolUse', matcher: 'Bash', type: 'command', command: `python3 -c "import json,sys,os,datetime; d=json.load(sys.stdin); c=d.get('tool_input',{}).get('command','')[:200]; open(os.path.expanduser('${this.status?.claudeDir || '~/.claude'}/bash-audit.log'),'a').write(datetime.datetime.now().isoformat()+' '+c+'\\n')"` },
+            { name: 'Audit file edits',    desc: 'Log every edited file path to edit-audit.log',      event: 'PostToolUse', matcher: 'Edit', type: 'command', command: `python3 -c "import json,sys,os,datetime; d=json.load(sys.stdin); p=d.get('tool_input',{}).get('file_path','?'); open(os.path.expanduser('${this.status?.claudeDir || '~/.claude'}/edit-audit.log'),'a').write(datetime.datetime.now().isoformat()+' '+p+'\\n')"` },
             { name: 'HTTP webhook on stop',desc: 'POST to a webhook URL when Claude finishes',         event: 'Stop',        matcher: '',     type: 'http',    url: 'https://your-webhook.example.com/claude-stop' },
           ];
         },

package/server.js

@@ -5,8 +5,17 @@ const os = require('os');
 const readline = require('readline');
 const https = require('https');
 
-// ─── Data directory (user config, separate from package install location) ─────
-const DATA_DIR = path.join(os.homedir(), '.claude', 'claude-home');
+// ─── Config directory (supports CLAUDE_CONFIG_DIR override) ──────────────────
+const CLAUDE_DIR          = process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), '.claude');
+const DATA_DIR            = path.join(CLAUDE_DIR, 'claude-home');
+const CLAUDE_SETTINGS_PATH = path.join(CLAUDE_DIR, 'settings.json');
+const PROJECTS_DIR        = path.join(CLAUDE_DIR, 'projects');
+
+function tildePrefix(p) {
+  const home = os.homedir();
+  return p.startsWith(home + path.sep) ? '~' + p.slice(home.length) : p;
+}
+const CLAUDE_DIR_DISPLAY = tildePrefix(CLAUDE_DIR);
 
 function ensureDataDir() {
   if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
@@ -24,10 +33,9 @@ function ensureDataDir() {
 ensureDataDir();
 
 // ─── Claude Code permissions (auto-allow notes/todos writes) ──────────────────
-const CLAUDE_SETTINGS_PATH = path.join(os.homedir(), '.claude', 'settings.json');
 const CLAUDE_HOME_PERMISSIONS = [
-  'Write(~/.claude/claude-home/notes/*)',
-  'Write(~/.claude/claude-home/todos/*)',
+  `Write(${tildePrefix(path.join(DATA_DIR, 'notes', '*'))})`,
+  `Write(${tildePrefix(path.join(DATA_DIR, 'todos', '*'))})`,
 ];
 
 function ensureClaudePermissions() {
@@ -64,8 +72,6 @@ try {
 const app = express();
 app.use(express.json({ limit: '1mb' }));
 const PORT = parseInt(process.env.PORT, 10) || 3141;
-const PROJECTS_DIR = path.join(os.homedir(), '.claude', 'projects');
-const CLAUDE_DIR   = path.join(os.homedir(), '.claude');
 
 // ─── Marketplace ──────────────────────────────────────────────────────────────
 const MARKETPLACE_CONFIG_PATH = path.join(DATA_DIR, 'marketplace.json');
@@ -1341,7 +1347,7 @@ app.get('/api/costs', async (req, res) => {
 
 // GET /api/plans
 app.get('/api/plans', (req, res) => {
-  const plansDir = path.join(os.homedir(), '.claude', 'plans');
+  const plansDir = path.join(CLAUDE_DIR, 'plans');
   try {
     if (!fs.existsSync(plansDir)) return res.json([]);
     const files = fs.readdirSync(plansDir).filter(f => f.endsWith('.md'));
@@ -1367,7 +1373,7 @@ app.get('/api/plans', (req, res) => {
 // GET /api/history
 app.get('/api/history', async (req, res) => {
   const { q, project } = req.query;
-  const historyPath = path.join(os.homedir(), '.claude', 'history.jsonl');
+  const historyPath = path.join(CLAUDE_DIR, 'history.jsonl');
   try {
     const entries = [];
     const rl = readline.createInterface({ input: fs.createReadStream(historyPath), crlfDelay: Infinity });
@@ -1409,7 +1415,7 @@ function writeScope(scope, projectPath, data) {
 
 // GET /api/config
 app.get('/api/config', (req, res) => {
-  const claudeDir = path.join(os.homedir(), '.claude');
+  const claudeDir = CLAUDE_DIR;
   const projectPath = req.query.projectPath || '';
   try {
     const settings = readScope('user', '');
@@ -1496,10 +1502,10 @@ function buildPluginAttribution() {
   const agentSlugs = {};  // slug → pluginId
   const commandSlugs = {}; // "namespace:slug" → pluginId
 
-  const cacheBase = path.join(os.homedir(), '.claude', 'plugins', 'cache');
+  const cacheBase = path.join(CLAUDE_DIR, 'plugins', 'cache');
   let installedPluginIds = [];
   try {
-    const installedJson = path.join(os.homedir(), '.claude', 'plugins', 'installed_plugins.json');
+    const installedJson = path.join(CLAUDE_DIR, 'plugins', 'installed_plugins.json');
     if (fs.existsSync(installedJson)) {
       const installed = JSON.parse(fs.readFileSync(installedJson, 'utf8'));
       installedPluginIds = Object.keys(installed.plugins || {});
@@ -1564,13 +1570,13 @@ app.get('/api/tools/commands', (req, res) => {
   }
 
   try {
-    readCommandsDir(path.join(os.homedir(), '.claude', 'commands'), 'user');
+    readCommandsDir(path.join(CLAUDE_DIR, 'commands'), 'user');
     if (projectPath) {
       readCommandsDir(path.join(projectPath, '.claude', 'commands'), 'project');
     }
     // Also include commands from installed plugins
     try {
-      const installedJson = path.join(os.homedir(), '.claude', 'plugins', 'installed_plugins.json');
+      const installedJson = path.join(CLAUDE_DIR, 'plugins', 'installed_plugins.json');
       if (fs.existsSync(installedJson)) {
         const installed = JSON.parse(fs.readFileSync(installedJson, 'utf8'));
         for (const [pluginId, entries] of Object.entries(installed.plugins || {})) {
@@ -1610,7 +1616,7 @@ app.delete('/api/tools/commands/:slug', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'commands');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'commands');
+    baseDir = path.join(CLAUDE_DIR, 'commands');
   }
 
   const filePath = namespace
@@ -1647,14 +1653,14 @@ app.get('/api/tools/agents', (req, res) => {
   }
 
   try {
-    readAgentsDir(path.join(os.homedir(), '.claude', 'agents'), 'user');
+    readAgentsDir(path.join(CLAUDE_DIR, 'agents'), 'user');
     if (projectPath) {
       const pp = path.resolve(projectPath);
       if (pp.startsWith(os.homedir())) readAgentsDir(path.join(pp, '.claude', 'agents'), 'project');
     }
     // Also include agents from installed plugins
     try {
-      const installedJson = path.join(os.homedir(), '.claude', 'plugins', 'installed_plugins.json');
+      const installedJson = path.join(CLAUDE_DIR, 'plugins', 'installed_plugins.json');
       if (fs.existsSync(installedJson)) {
         const installed = JSON.parse(fs.readFileSync(installedJson, 'utf8'));
         for (const [pluginId, entries] of Object.entries(installed.plugins || {})) {
@@ -1692,7 +1698,7 @@ app.post('/api/tools/agents', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'agents');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'agents');
+    baseDir = path.join(CLAUDE_DIR, 'agents');
   }
 
   const agentPath = path.join(baseDir, slug + '.md');
@@ -1719,7 +1725,7 @@ app.put('/api/tools/agents/:slug', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'agents');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'agents');
+    baseDir = path.join(CLAUDE_DIR, 'agents');
   }
 
   const agentPath = path.join(baseDir, slug + '.md');
@@ -1750,7 +1756,7 @@ app.delete('/api/tools/agents/:slug', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'agents');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'agents');
+    baseDir = path.join(CLAUDE_DIR, 'agents');
   }
 
   const agentPath = path.join(baseDir, slug + '.md');
@@ -1784,13 +1790,13 @@ app.get('/api/tools/skills', (req, res) => {
   }
 
   try {
-    readSkillsDir(path.join(os.homedir(), '.claude', 'skills'), 'user');
+    readSkillsDir(path.join(CLAUDE_DIR, 'skills'), 'user');
     if (projectPath) {
       readSkillsDir(path.join(projectPath, '.claude', 'skills'), 'project');
     }
     // Also include skills from installed plugins (plugin items live in cache, not ~/.claude/skills)
     try {
-      const installedJson = path.join(os.homedir(), '.claude', 'plugins', 'installed_plugins.json');
+      const installedJson = path.join(CLAUDE_DIR, 'plugins', 'installed_plugins.json');
       if (fs.existsSync(installedJson)) {
         const installed = JSON.parse(fs.readFileSync(installedJson, 'utf8'));
         for (const [pluginId, entries] of Object.entries(installed.plugins || {})) {
@@ -1829,7 +1835,7 @@ app.post('/api/tools/skills', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'skills');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'skills');
+    baseDir = path.join(CLAUDE_DIR, 'skills');
   }
 
   const skillDir = path.join(baseDir, slug);
@@ -1855,7 +1861,7 @@ app.put('/api/tools/skills/:slug', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'skills');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'skills');
+    baseDir = path.join(CLAUDE_DIR, 'skills');
   }
 
   const skillMdPath = path.join(baseDir, slug, 'SKILL.md');
@@ -1885,7 +1891,7 @@ app.delete('/api/tools/skills/:slug', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'skills');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'skills');
+    baseDir = path.join(CLAUDE_DIR, 'skills');
   }
 
   const skillDir = path.join(baseDir, slug);
@@ -1909,7 +1915,7 @@ app.get('/api/status', (req, res) => {
     claudeVersion = out.split('\n')[0];
   } catch {}
   const appVersion = require('./package.json').version;
-  res.json({ claudeVersion, appVersion });
+  res.json({ claudeVersion, appVersion, claudeDir: CLAUDE_DIR_DISPLAY });
 });
 
 // ─── Marketplace endpoints ───────────────────────────────────────────────────
@@ -2017,7 +2023,7 @@ app.post('/api/marketplace/install', (req, res) => {
     if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
     baseDir = path.join(pp, '.claude', 'skills');
   } else {
-    baseDir = path.join(os.homedir(), '.claude', 'skills');
+    baseDir = path.join(CLAUDE_DIR, 'skills');
   }
 
   const skillDir = path.join(baseDir, slug);
@@ -2037,7 +2043,7 @@ app.get('/api/marketplace/check-installed', (req, res) => {
   if (!slugs) return res.json({});
   const slugList = slugs.split(',').map(s => s.trim()).filter(Boolean);
   const result = {};
-  const userSkillsDir = path.join(os.homedir(), '.claude', 'skills');
+  const userSkillsDir = path.join(CLAUDE_DIR, 'skills');
   let projectSkillsDir = null;
   if (projectPath) {
     const pp = path.resolve(projectPath);
@@ -2804,7 +2810,7 @@ app.post('/api/share/plan/:filename', async (req, res) => {
   if (!githubToken) return res.status(400).json({ error: 'GitHub token not configured. Add it in Settings → Sharing.' });
   const filename = path.basename(req.params.filename);
   if (!filename.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
-  const filePath = path.join(os.homedir(), '.claude', 'plans', filename);
+  const filePath = path.join(CLAUDE_DIR, 'plans', filename);
   try {
     const content = fs.readFileSync(filePath, 'utf8');
     const titleMatch = content.match(/^#\s+(.+)$/m);
@@ -2859,27 +2865,29 @@ function scanNotes(dir, base) {
   return results;
 }
 
-const NOTES_CLAUDE_MD_SNIPPET = `
+function notesClaudeMdSnippet() {
+  const d = CLAUDE_DIR_DISPLAY;
+  return `
 ## Personal Notes
 
 When the user asks you to "save a note", "add to notes", "guarda esto como nota", or similar:
-1. Create a markdown file in \`~/.claude/claude-home/notes/\` with this exact format:
+1. Create a markdown file in \`${d}/claude-home/notes/\` with this exact format:
    - Filename: \`YYYY-MM-DD-short-slug.md\` (e.g. \`2026-03-31-bug-fix-auth.md\`)
    - Content:
      \`\`\`
      ---
      title: <descriptive title>
      date: <current ISO date>
-     session: <run: ls -t ~/.claude/projects/$(pwd | sed 's|/|-|g' | sed 's|^-||')/*.jsonl 2>/dev/null | head -1 | xargs basename 2>/dev/null | sed 's/\.jsonl//'>
+     session: <run: ls -t ${d}/projects/$(pwd | sed 's|/|-|g' | sed 's|^-||')/*.jsonl 2>/dev/null | head -1 | xargs basename 2>/dev/null | sed 's/\\.jsonl//'>
      ---
 
      <the content the user wants to save>
      \`\`\`
 2. **Folder**: Save in a subfolder when appropriate:
-   - Project-specific note → \`~/.claude/claude-home/notes/<basename-of-pwd>/\` (e.g. working in \`mono-genially\` → folder \`mono-genially\`)
-   - Global/cross-project note → root \`~/.claude/claude-home/notes/\`
+   - Project-specific note → \`${d}/claude-home/notes/<basename-of-pwd>/\` (e.g. working in \`mono-genially\` → folder \`mono-genially\`)
+   - Global/cross-project note → root \`${d}/claude-home/notes/\`
    - User-specified folder → use that folder name
-3. **Note linking**: If the note references concepts in other notes, use \`#slug\` syntax (\`2026-03-31-my-slug.md\` → \`#my-slug\`). Glob \`~/.claude/claude-home/notes/**/*.md\` to discover existing slugs.
+3. **Note linking**: If the note references concepts in other notes, use \`#slug\` syntax (\`2026-03-31-my-slug.md\` → \`#my-slug\`). Glob \`${d}/claude-home/notes/**/*.md\` to discover existing slugs.
 4. Use the Write tool to create the file (not Bash).
 5. Confirm with: "Saved to Notes: http://localhost:3141/#/note/<folder/filename or filename>"
 
@@ -2889,7 +2897,7 @@ The notes directory may not exist yet — the app creates it automatically on fi
 
 When the user asks to add a task "for today", "for tomorrow", "to review later", or similar:
 1. Determine the target date (today = current date, tomorrow = current date + 1 day)
-2. Read the existing file if it exists: \`~/.claude/claude-home/todos/YYYY-MM-DD.json\`
+2. Read the existing file if it exists: \`${d}/claude-home/todos/YYYY-MM-DD.json\`
 3. Use the Write tool to save the updated file with this format:
    \`\`\`json
    {
@@ -2910,9 +2918,10 @@ When the user asks to add a task "for today", "for tomorrow", "to review later",
 
 The todos directory may not exist yet — the app creates it automatically on first load.
 `;
+}
 
 app.get('/api/notes/claude-md-status', (req, res) => {
-  const claudeMdPath = path.join(os.homedir(), '.claude', 'CLAUDE.md');
+  const claudeMdPath = path.join(CLAUDE_DIR, 'CLAUDE.md');
   try {
     const content = fs.existsSync(claudeMdPath) ? fs.readFileSync(claudeMdPath, 'utf8') : '';
     res.json({ installed: content.includes('Personal Notes') });
@@ -2920,22 +2929,19 @@ app.get('/api/notes/claude-md-status', (req, res) => {
 });
 
 app.post('/api/notes/setup-claude', (req, res) => {
-  const claudeMdPath = path.join(os.homedir(), '.claude', 'CLAUDE.md');
-  const settingsPath = path.join(os.homedir(), '.claude', 'settings.json');
+  const claudeMdPath = path.join(CLAUDE_DIR, 'CLAUDE.md');
+  const settingsPath = CLAUDE_SETTINGS_PATH;
   try {
     const current = fs.existsSync(claudeMdPath) ? fs.readFileSync(claudeMdPath, 'utf8') : '';
     if (current.includes('Personal Notes')) return res.json({ ok: true, alreadyInstalled: true });
     // Append CLAUDE.md snippet
-    fs.writeFileSync(claudeMdPath, current + '\n' + NOTES_CLAUDE_MD_SNIPPET, 'utf8');
+    fs.writeFileSync(claudeMdPath, current + '\n' + notesClaudeMdSnippet(), 'utf8');
     // Add Write permission for notes dir to settings.json
     try {
       const settings = fs.existsSync(settingsPath) ? JSON.parse(fs.readFileSync(settingsPath, 'utf8')) : {};
       if (!settings.permissions) settings.permissions = {};
       if (!settings.permissions.allow) settings.permissions.allow = [];
-      const rules = [
-        `Write(${path.join(os.homedir(), '.claude', 'claude-home', 'notes', '*')})`,
-        `Write(${path.join(os.homedir(), '.claude', 'claude-home', 'todos', '*')})`,
-      ];
+      const rules = CLAUDE_HOME_PERMISSIONS;
       let changed = false;
       for (const rule of rules) {
         if (!settings.permissions.allow.includes(rule)) {
@@ -3286,6 +3292,62 @@ app.post('/api/today/pull', (req, res) => {
   res.json({ ok: true });
 });
 
+// ─── URL to Markdown ─────────────────────────────────────────────────────────
+const WEBMD_DIR = path.join(DATA_DIR, 'webmd');
+function ensureWebmdDir() { if (!fs.existsSync(WEBMD_DIR)) fs.mkdirSync(WEBMD_DIR, { recursive: true }); }
+
+function slugify(url) {
+  return url.replace(/^https?:\/\//, '').replace(/[^a-z0-9]/gi, '-').toLowerCase().slice(0, 60)
+    + '-' + Date.now();
+}
+
+app.post('/api/webmd/fetch', async (req, res) => {
+  try {
+    const { url } = req.body;
+    if (!url || !/^https?:\/\//i.test(url)) return res.status(400).json({ error: 'URL inválida' });
+    const jinaUrl = 'https://r.jina.ai/' + url;
+    const raw = await fetchRemote(jinaUrl);
+    if (raw.length > 500_000) return res.status(413).json({ error: 'Página demasiado grande (>500KB)' });
+    // Extract title from first markdown heading or URL
+    const titleMatch = raw.match(/^#\s+(.+)$/m);
+    const title = titleMatch ? titleMatch[1].trim() : url;
+    res.json({ title, markdown: raw });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.get('/api/webmd', (req, res) => {
+  ensureWebmdDir();
+  try {
+    const files = fs.readdirSync(WEBMD_DIR).filter(f => f.endsWith('.json')).sort().reverse();
+    const items = files.map(f => {
+      try { return JSON.parse(fs.readFileSync(path.join(WEBMD_DIR, f), 'utf8')); } catch { return null; }
+    }).filter(Boolean);
+    res.json(items);
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/webmd/save', (req, res) => {
+  ensureWebmdDir();
+  try {
+    const { url, title, markdown } = req.body;
+    if (!url || !markdown) return res.status(400).json({ error: 'url y markdown requeridos' });
+    const slug = slugify(url);
+    const entry = { slug, url, title: title || url, markdown, savedAt: new Date().toISOString() };
+    fs.writeFileSync(path.join(WEBMD_DIR, `${slug}.json`), JSON.stringify(entry, null, 2), 'utf8');
+    res.json(entry);
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.delete('/api/webmd/:slug', (req, res) => {
+  try {
+    const slug = req.params.slug.replace(/[^a-z0-9-]/gi, '');
+    const filePath = path.join(WEBMD_DIR, `${slug}.json`);
+    if (!filePath.startsWith(WEBMD_DIR + path.sep)) return res.status(400).json({ error: 'Invalid slug' });
+    if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+    res.json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 // ─── Start ────────────────────────────────────────────────────────────────────
 
 function startServer(port) {
@@ -3449,7 +3511,7 @@ async function fetchToolItemContent(source, treePath) {
 
 // Scan local plugin marketplace dirs for .md files in a given subdir
 function getPluginToolItems(subdir) {
-  const marketplacesDir = path.join(os.homedir(), '.claude', 'plugins', 'marketplaces');
+  const marketplacesDir = path.join(CLAUDE_DIR, 'plugins', 'marketplaces');
   const items = [];
   try {
     for (const mkt of fs.readdirSync(marketplacesDir)) {
@@ -3555,7 +3617,7 @@ function makeToolMarketplaceRoutes(prefix, configPath, itemsPathKey, localSubdir
       if (!pp.startsWith(os.homedir())) return res.status(403).json({ error: 'Forbidden' });
       baseDir = path.join(pp, '.claude', localSubdir);
     } else {
-      baseDir = path.join(os.homedir(), '.claude', localSubdir);
+      baseDir = path.join(CLAUDE_DIR, localSubdir);
     }
     const dest = path.join(baseDir, slug + '.md');
     if (fs.existsSync(dest)) return res.status(409).json({ error: `"${slug}" ya está instalado` });
@@ -3571,7 +3633,7 @@ function makeToolMarketplaceRoutes(prefix, configPath, itemsPathKey, localSubdir
   app.get(`/api/${prefix}/check-installed`, (req, res) => {
     const { slugs, projectPath } = req.query;
     if (!slugs) return res.json({});
-    const dirs = [path.join(os.homedir(), '.claude', localSubdir)];
+    const dirs = [path.join(CLAUDE_DIR, localSubdir)];
     if (projectPath) dirs.push(path.join(path.resolve(projectPath), '.claude', localSubdir));
     const result = {};
     for (const slug of slugs.split(',')) {
@@ -3615,7 +3677,7 @@ app.get('/api/plugins/detail', (req, res) => {
   const name = atIdx >= 0 ? pluginId.slice(0, atIdx) : pluginId;
   const marketplace = atIdx >= 0 ? pluginId.slice(atIdx + 1) : null;
 
-  const pluginsBase = path.join(os.homedir(), '.claude', 'plugins', 'marketplaces');
+  const pluginsBase = path.join(CLAUDE_DIR, 'plugins', 'marketplaces');
   const candidates = [];
 
   if (marketplace) {
@@ -3636,7 +3698,7 @@ app.get('/api/plugins/detail', (req, res) => {
 
   // Also check install cache from installed_plugins.json
   try {
-    const installedJson = path.join(os.homedir(), '.claude', 'plugins', 'installed_plugins.json');
+    const installedJson = path.join(CLAUDE_DIR, 'plugins', 'installed_plugins.json');
     if (fs.existsSync(installedJson)) {
       const installed = JSON.parse(fs.readFileSync(installedJson, 'utf8'));
       const entries = installed.plugins?.[pluginId] || [];
@@ -3691,7 +3753,7 @@ app.get('/api/plugins/items', (req, res) => {
   const pName = atIdx >= 0 ? pluginId.slice(0, atIdx) : pluginId;
   const marketplace = atIdx >= 0 ? pluginId.slice(atIdx + 1) : null;
 
-  const cacheBase = path.join(os.homedir(), '.claude', 'plugins', 'cache');
+  const cacheBase = path.join(CLAUDE_DIR, 'plugins', 'cache');
   let pluginDir = null;
 
   // Find from versioned cache: cache/<marketplace>/<plugin>/<latest-version>