feat: markdown preview + new session button (v0.15.0)

- Render markdown in detail panel for memories, skills, rules, plans, agents, commands
- Load marked.js v15 from CDN with graceful fallback
- Strip YAML frontmatter before rendering
- Full CSS for headers, code blocks, tables, blockquotes, lists (light/dark mode)
- Add "＋ New" button on session category bar — copies `cd <dir> && claude` to clipboard
- Add AI_INDEX.md reference to README

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ithiria894

README.md

@@ -1,5 +1,7 @@
 # Claude Code Organizer
 
+> **AI agents: read [AI_INDEX.md](AI_INDEX.md) first.** It is the navigation manifest for this codebase — where to find every module, how they connect, and where to look before making any claim about the code.
+
 [![npm version](https://img.shields.io/npm/v/@mcpware/claude-code-organizer)](https://www.npmjs.com/package/@mcpware/claude-code-organizer)
 [![npm downloads](https://img.shields.io/npm/dt/@mcpware/claude-code-organizer?label=downloads)](https://www.npmjs.com/package/@mcpware/claude-code-organizer)
 [![GitHub stars](https://img.shields.io/github/stars/mcpware/claude-code-organizer)](https://github.com/mcpware/claude-code-organizer/stargazers)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpware/claude-code-organizer",
-  "version": "0.14.13",
+  "version": "0.15.0",
   "description": "Organize all your Claude Code memories, skills, MCP servers, commands, agents, rules, and hooks — see what loads globally vs per-project, then move items between scopes",
   "type": "module",
   "files": [

src/ui/app.js

@@ -322,6 +322,17 @@ function setupItemList() {
       return;
     }
 
+    const newSessionBtn = event.target.closest(".new-session-btn");
+    if (newSessionBtn) {
+      const scope = getScopeById(newSessionBtn.dataset.scopeId);
+      const dir = scope?.repoDir || "~";
+      const cmd = `cd ${dir} && claude`;
+      navigator.clipboard.writeText(cmd).then(() => {
+        toast("Copied: " + cmd);
+      });
+      return;
+    }
+
     const sortBtn = event.target.closest(".sort-btn");
     if (sortBtn) {
       const cat = sortBtn.dataset.cat;
@@ -339,7 +350,7 @@ function setupItemList() {
     }
 
     const catHdr = event.target.closest(".cat-hdr");
-    if (catHdr && !event.target.closest(".sort-btn")) {
+    if (catHdr && !event.target.closest(".sort-btn") && !event.target.closest(".new-session-btn")) {
       const key = `${selectedScopeId}::${catHdr.dataset.cat}`;
       if (uiState.collapsedCats.has(key)) uiState.collapsedCats.delete(key);
       else uiState.collapsedCats.add(key);
@@ -842,6 +853,7 @@ function renderMainContent() {
           <span class="cat-hdr-ico">${config.icon}</span>
           <span class="cat-hdr-nm">${esc(config.label)}</span>
           <span class="cat-hdr-cnt">${pluralize(catItems.length, "item")}</span>
+          ${category === "session" ? `<button type="button" class="new-session-btn" data-scope-id="${esc(scope.id)}" title="Copy command to start a new session">＋ New</button>` : ""}
           ${category === "mcp" ? "" : `<span class="cat-hdr-sort">
             <button type="button" class="sort-btn${(uiState.sortBy[`${scope.id}::${category}`]?.field === "size") ? " active" : ""}" data-cat="${esc(category)}" data-sort="size">Size ${sortArrow(`${scope.id}::${category}`, "size")}</button>
             <button type="button" class="sort-btn${(uiState.sortBy[`${scope.id}::${category}`]?.field === "date") ? " active" : ""}" data-cat="${esc(category)}" data-sort="date">Date ${sortArrow(`${scope.id}::${category}`, "date")}</button>
@@ -1901,7 +1913,16 @@ async function loadPreview(item) {
 
     const res = await fetchJson(`/api/file-content?path=${encodeURIComponent(filePath)}`);
     if (currentKey !== detailPreviewKey) return;
-    preview.textContent = res.ok ? res.content : (res.error || "Cannot load preview");
+    if (!res.ok) { preview.textContent = res.error || "Cannot load preview"; return; }
+
+    // Render markdown for file-based categories (.md files)
+    const isMd = filePath.endsWith(".md") || ["memory", "skill", "rule", "plan", "agent", "command", "config"].includes(item.category);
+    if (isMd) {
+      preview.textContent = "";
+      preview.innerHTML = `<div class="md-preview">${renderMarkdown(res.content)}</div>`;
+    } else {
+      preview.textContent = res.content;
+    }
   } catch {
     if (currentKey !== detailPreviewKey) return;
     preview.textContent = "Failed to load preview";
@@ -2741,6 +2762,20 @@ function esc(value) {
     .replace(/"/g, "&quot;");
 }
 
+/**
+ * Render markdown to HTML using marked.js.
+ * Strips YAML frontmatter (---...---) common in memory/skill files.
+ * Falls back to escaped plain text if marked is not loaded.
+ */
+function renderMarkdown(text) {
+  if (!text) return "";
+  // Strip YAML frontmatter
+  let content = text.replace(/^---\n[\s\S]*?\n---\n?/, "").trim();
+  // Fallback if marked CDN failed to load
+  if (typeof marked === "undefined") return `<pre>${esc(content)}</pre>`;
+  return marked.parse(content);
+}
+
 function cssEscape(value) {
   if (window.CSS?.escape) return window.CSS.escape(value);
   return String(value).replace(/["\\]/g, "\\$&");

src/ui/index.html

@@ -6,7 +6,7 @@
   <title>Claude Code Organizer</title>
   <link rel="stylesheet" href="/style.css">
   <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <!-- SortableJS disabled — drag-and-drop removed, use Move button instead -->
+  <script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>
 </head>
 <body>
   <div class="app" id="app">

src/ui/style.css

@@ -444,6 +444,21 @@ body {
   border-radius: 10px;
 }
 
+.new-session-btn {
+  margin-left: 8px;
+  padding: 2px 10px;
+  border-radius: 6px;
+  font-size: 0.62rem;
+  font-weight: 600;
+  border: 1px solid var(--accent-light);
+  background: var(--accent-light);
+  color: var(--accent-text);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 100ms;
+}
+.new-session-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+
 .cat-hdr-sort { display: flex; gap: 4px; margin-left: 8px; }
 .sort-btn {
   padding: 2px 8px;
@@ -664,6 +679,46 @@ body {
   white-space: pre-wrap;
 }
 
+/* ── Markdown preview (memories, skills, rules, plans, agents, commands) ── */
+.d-preview:has(.md-preview) { white-space: normal; font-family: "Lato", sans-serif; font-size: 0.8rem; line-height: 1.7; }
+.md-preview h1 { font-size: 1.15rem; font-weight: 900; color: var(--text-primary); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
+.md-preview h2 { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); }
+.md-preview h3 { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 12px 0 4px; }
+.md-preview h4, .md-preview h5, .md-preview h6 { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); margin: 10px 0 4px; }
+.md-preview p { margin: 0 0 8px; color: var(--text-secondary); }
+.md-preview p:last-child { margin-bottom: 0; }
+.md-preview a { color: var(--accent); text-decoration: none; font-weight: 500; }
+.md-preview a:hover { text-decoration: underline; }
+.md-preview strong { font-weight: 700; color: var(--text-primary); }
+.md-preview em { font-style: italic; }
+.md-preview ul, .md-preview ol { margin: 4px 0 8px; padding-left: 20px; }
+.md-preview li { margin-bottom: 3px; }
+.md-preview li > ul, .md-preview li > ol { margin: 2px 0 0; }
+.md-preview blockquote {
+  margin: 8px 0; padding: 6px 12px;
+  border-left: 3px solid var(--accent); background: var(--accent-light);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+.md-preview blockquote p { color: var(--accent-text); margin-bottom: 4px; }
+.md-preview pre {
+  background: var(--bg); border: 1px solid var(--border-light);
+  border-radius: var(--radius); padding: 8px 10px; margin: 6px 0;
+  overflow-x: auto; white-space: pre;
+  font-family: "Geist Mono", monospace; font-size: 0.72rem; line-height: 1.5;
+}
+.md-preview pre code { background: none; border: none; padding: 0; font-size: inherit; }
+.md-preview code {
+  background: var(--bg); border: 1px solid var(--border-light);
+  border-radius: 3px; padding: 1px 4px;
+  font-family: "Geist Mono", monospace; font-size: 0.72rem;
+}
+.md-preview table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.75rem; }
+.md-preview th { text-align: left; font-weight: 700; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-faint); padding: 4px 8px; border-bottom: 2px solid var(--border-light); }
+.md-preview td { padding: 4px 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
+.md-preview tr:last-child td { border-bottom: none; }
+.md-preview hr { border: none; border-top: 1px solid var(--border-light); margin: 12px 0; }
+.md-preview img { max-width: 100%; border-radius: var(--radius); }
+
 /* ── Session chat preview ──────────────────────────────────────── */
 .d-preview:has(.chat-container) { white-space: normal; padding: 6px 10px; }
 .chat-container { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }