claude-home 1.5.36 → 1.6.0

package/README.md

@@ -22,6 +22,8 @@ A daily task list that lives alongside your Claude work. Add tasks, provide cont
 
 Claude can add tasks directly from any session — just say "add this to today" or "remind me tomorrow to…"
 
+Tasks created from notes show a **↗ Note title** chip that navigates directly to the source note.
+
 ### Notes
 Your personal notepad — separate from Claude's memory. Notes are for you, not for Claude's context. Capture decisions, TILs, bug solutions, runbooks, snippets, or anything worth keeping.
 
@@ -29,6 +31,22 @@ Claude can save notes directly from any session — just say "save this as a not
 
 Direct links (`#/note/filename`) let you open a specific note instantly.
 
+**Note linking** — write `#slug` inside a note to link it to another, creating a network of connected notes. Backlinks appear automatically at the bottom of each note. An autocomplete dropdown appears as you type `#` in the editor.
+
+**Related notes** — notes with similar vocabulary are suggested below backlinks, using cosine similarity on tokenized content.
+
+**Scratch pad** — a session-only notepad (⚡) pinned at the top of the sidebar. Nothing is persisted until you hit *Save as note…*
+
+**Clipboard capture** — opening *New note* automatically pre-fills the content with whatever is in your clipboard.
+
+**Folders** — organize notes in folders (per project or custom). Create folders from the sidebar, move notes between folders via the toolbar dropdown, and rename folders inline with a hover button (✎).
+
+**Tags** — add `tags: [bug, idea]` in frontmatter. Filter by multiple tags in the sidebar. Hover any tag chip to rename or delete it globally across all notes.
+
+**Pinned notes** — mark important notes with 📌 to keep them always at the top of the list, both in root and inside folders.
+
+**Note → Today task** — hover any paragraph or list item in a note to reveal a **+** button that adds it directly to today's task list. A **+ Today** button in the toolbar adds the note title as a task. All tasks created from notes carry a link back to the source note.
+
 ### Projects
 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-home",
-  "version": "1.5.36",
+  "version": "1.6.0",
   "description": "Web dashboard for Claude Code — browse sessions, manage skills, hooks, commands, and agents",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -484,6 +484,164 @@
     .md-content th { background: var(--canvas); font-weight: 600; }
     .md-content hr { border: none; border-top: 1px solid var(--rule); margin: 10px 0; }
 
+    /* Note folders */
+    .note-folder-row {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      padding: 7px 12px;
+      cursor: pointer;
+      font-size: 12.5px;
+      color: var(--ink);
+    }
+    .note-folder-row:hover { background: var(--canvas); }
+    .note-folder-row:hover .note-folder-rename-btn { opacity: 1 !important; }
+    .note-folder-icon { font-size: 8px; color: var(--ink-3); }
+    .note-folder-name { flex: 1; font-weight: 500; }
+    .note-folder-count { font-size: 10px; color: var(--ink-3); background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 0 5px; }
+    .note-folder-create-row { padding: 4px 10px 6px; }
+    .note-folder-add { font-size: 11px; color: var(--ink-3); cursor: pointer; }
+    .note-folder-add:hover { color: var(--blue); }
+    .note-folder-back {
+      display: flex;
+      align-items: center;
+      padding: 7px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      border-bottom: 1px solid var(--rule);
+    }
+    .note-folder-back:hover { background: var(--canvas); }
+
+    /* Note tags */
+    .note-tag-filter {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 6px 10px;
+      border-bottom: 1px solid var(--rule);
+    }
+    .note-tag-chip {
+      font-size: 10px;
+      padding: 2px 7px;
+      border-radius: 20px;
+      border: 1px solid var(--rule-2);
+      background: var(--canvas);
+      color: var(--ink-3);
+      cursor: pointer;
+      user-select: none;
+    }
+    .note-tag-chip:hover { border-color: var(--ink-3); color: var(--ink); }
+    .note-tag-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
+    .note-tag-mgmt-btn { font-size: 12px; color: var(--ink-3); cursor: pointer; padding: 0 2px; opacity: 0; transition: opacity .15s; line-height: 1; }
+    .note-tag-chip-wrap:hover .note-tag-mgmt-btn { opacity: 1; }
+    .note-tag-menu { position: absolute; top: 100%; left: 0; z-index: 50; background: var(--canvas); border: 1px solid var(--rule-2); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); min-width: 160px; padding: 4px 0; margin-top: 2px; }
+    .note-tag-menu-item { font-size: 12px; padding: 5px 12px; cursor: pointer; color: var(--ink-2); }
+    .note-tag-menu-item:hover { background: var(--canvas-2); color: var(--ink); }
+    .note-tag-menu-danger { color: var(--red) !important; }
+    .note-tag-menu-danger:hover { background: var(--red-dim, #3a1a1a) !important; }
+    .note-row-tags { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
+    .note-row-tag {
+      font-size: 9px;
+      padding: 1px 5px;
+      border-radius: 20px;
+      background: color-mix(in srgb, var(--blue) 10%, transparent);
+      color: var(--blue);
+      cursor: pointer;
+    }
+
+    .md-content p, .md-content li { position: relative; }
+    .para-add-task-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      position: absolute; left: -22px; top: 2px;
+      width: 16px; height: 16px; border-radius: 50%;
+      background: var(--blue); color: #fff;
+      border: none; cursor: pointer; font-size: 12px; line-height: 1;
+      opacity: 0; transition: opacity .15s; padding: 0;
+      font-weight: 700;
+    }
+    .md-content p:hover .para-add-task-btn,
+    .md-content li:hover .para-add-task-btn { opacity: 1; }
+    .note-task-toast {
+      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+      background: var(--ink); color: var(--white);
+      padding: 8px 16px; border-radius: 20px; font-size: 12px;
+      z-index: 300; pointer-events: none;
+      animation: toastIn .2s ease;
+    }
+    @keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
+    .note-ref-chip { display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,transparent);border-radius:4px;padding:1px 5px;cursor:pointer;text-decoration:none; }
+    .note-row-tag:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); }
+
+    /* Scratch row */
+    .scratch-row {
+      border-bottom: 1px solid var(--rule);
+      background: color-mix(in srgb, var(--canvas) 60%, var(--white));
+    }
+    .scratch-row.active { background: color-mix(in srgb, var(--blue) 6%, var(--white)); }
+
+    /* Note-to-note links */
+    .note-ref-link {
+      color: var(--blue);
+      background: color-mix(in srgb, var(--blue) 8%, transparent);
+      border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
+      border-radius: 3px;
+      padding: 0 4px;
+      font-size: 0.92em;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .note-ref-link:hover { background: color-mix(in srgb, var(--blue) 15%, transparent); }
+
+    /* Backlinks */
+    .note-backlinks {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      padding: 14px 20px;
+      border-top: 1px solid var(--rule);
+      margin-top: 8px;
+    }
+    .note-backlinks-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-right: 2px; }
+    .note-backlink-chip {
+      font-size: 11px;
+      background: var(--canvas);
+      border: 1px solid var(--rule-2);
+      border-radius: 20px;
+      padding: 2px 9px;
+      cursor: pointer;
+      color: var(--ink-2);
+    }
+    .note-backlink-chip:hover { border-color: var(--blue); color: var(--blue); }
+    .note-related-chip { color: var(--ink-3); border-style: dashed; }
+    .note-related-chip:hover { border-color: var(--ink-2); color: var(--ink); border-style: solid; }
+
+    /* Note editor autocomplete */
+    .note-autocomplete {
+      position: absolute;
+      bottom: calc(100% + 4px);
+      left: 0;
+      background: var(--white);
+      border: 1px solid var(--rule-2);
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0,0,0,.12);
+      z-index: 200;
+      min-width: 220px;
+      overflow: hidden;
+    }
+    .note-autocomplete-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--ink);
+    }
+    .note-autocomplete-item.active, .note-autocomplete-item:hover { background: var(--canvas); }
+    .note-ac-hash { color: var(--blue); font-weight: 600; }
+    .note-ac-title { color: var(--ink-3); font-size: 11px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
     /* Collapsibles */
     .collapsible {
       border: 1px solid var(--rule);
@@ -2581,7 +2739,10 @@
                     <template x-for="task in todayData.tasks.filter(t => t.carriedOver && !t.done)" :key="task.id">
                       <div style="display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:4px;background:var(--canvas-2);border:1px solid var(--rule);border-left:3px solid var(--ink-3);border-radius:4px">
                         <input type="checkbox" :checked="task.done" @change="toggleTodayTask(task.id)" style="flex-shrink:0;cursor:pointer" />
-                        <span x-text="task.text" style="flex:1;font-size:13px;color:var(--ink-2)"></span>
+                        <span style="flex:1;font-size:13px;color:var(--ink-2)">
+                          <span x-text="task.text"></span>
+                          <template x-if="task.noteRef"><a class="note-ref-chip" @click.prevent="view='notes';selectedNote=personalNotes.find(n=>n.path===task.noteRef.path)||null" href="#" x-text="'↗ '+task.noteRef.title"></a></template>
+                        </span>
                         <button @click="deleteTodayTask(task.id)" style="background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:14px;padding:0 2px;line-height:1" title="Remove">×</button>
                       </div>
                     </template>
@@ -2592,7 +2753,10 @@
                 <template x-for="task in todayData.tasks.filter(t => !t.carriedOver && !t.done)" :key="task.id">
                   <div style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)">
                     <input type="checkbox" :checked="task.done" @change="toggleTodayTask(task.id)" style="flex-shrink:0;cursor:pointer" />
-                    <span x-text="task.text" style="flex:1;font-size:13px;color:var(--ink)"></span>
+                    <span style="flex:1;font-size:13px;color:var(--ink)">
+                      <span x-text="task.text"></span>
+                      <template x-if="task.noteRef"><a class="note-ref-chip" @click.prevent="view='notes';selectedNote=personalNotes.find(n=>n.path===task.noteRef.path)||null" href="#" x-text="'↗ '+task.noteRef.title"></a></template>
+                    </span>
                     <button @click="deleteTodayTask(task.id)" style="background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:14px;padding:0 2px;line-height:1" title="Remove">×</button>
                   </div>
                 </template>
@@ -2604,7 +2768,10 @@
                     <template x-for="task in todayData.tasks.filter(t => t.done)" :key="task.id">
                       <div style="display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);opacity:0.5">
                         <input type="checkbox" :checked="task.done" @change="toggleTodayTask(task.id)" style="flex-shrink:0;cursor:pointer" />
-                        <span x-text="task.text" style="flex:1;font-size:13px;text-decoration:line-through;color:var(--ink-3)"></span>
+                        <span style="flex:1;font-size:13px;text-decoration:line-through;color:var(--ink-3)">
+                          <span x-text="task.text"></span>
+                          <template x-if="task.noteRef"><a class="note-ref-chip" @click.prevent="view='notes';selectedNote=personalNotes.find(n=>n.path===task.noteRef.path)||null" href="#" x-text="'↗ '+task.noteRef.title"></a></template>
+                        </span>
                         <button @click="deleteTodayTask(task.id)" style="background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:14px;padding:0 2px;line-height:1" title="Remove">×</button>
                       </div>
                     </template>
@@ -2704,21 +2871,44 @@
             </template>
             <template x-if="selectedNote && !noteEditing">
               <div style="display:flex;align-items:center;gap:8px">
-                <button class="btn btn-sm btn-outline" @click="noteEditing=true;noteTitleDraft=selectedNote.title;noteBodyDraft=selectedNote.content">Edit</button>
+                <button class="btn btn-sm btn-outline" :style="selectedNote.pinned ? 'color:var(--yellow,#f59e0b);border-color:var(--yellow,#f59e0b)' : ''" @click="togglePinNote()" :title="selectedNote.pinned ? 'Unpin' : 'Pin note'">📌</button>
+                <button class="btn btn-sm btn-outline" @click="addNoteTask(selectedNote.title, selectedNote)" title="Add note title as Today task">+ Today</button>
+                <button class="btn btn-sm btn-outline" @click="noteEditing=true;noteTitleDraft=selectedNote.title;noteBodyDraft=selectedNote.content;noteTagsDraft=(selectedNote.tags||[]).join(', ')">Edit</button>
+                <select class="filter-select" style="font-size:12px" @change="movePersonalNote($event.target.value);$event.target.value='__current__'" x-init="">
+                  <option value="__current__">Move to…</option>
+                  <option value="">/ root</option>
+                  <template x-for="f in noteAllFolders().filter(f=>f!==(selectedNote.folder??''))" :key="f">
+                    <option :value="f" x-text="'/ '+f"></option>
+                  </template>
+                </select>
                 <button class="btn btn-sm" style="background:var(--red-dim,#3a1a1a);color:var(--red);border:1px solid var(--red)" @click="deletePersonalNote()">Delete</button>
               </div>
             </template>
-            <button class="btn btn-primary btn-sm" @click="noteCreating=true;noteNewTitle='';noteNewBody=''">+ New note</button>
+            <button class="btn btn-primary btn-sm" @click="openNewNote()">+ New note</button>
           </div>
         </div>
 
         <!-- New note form -->
         <template x-if="noteCreating">
           <div style="padding:16px 20px;border-bottom:1px solid var(--rule);background:var(--canvas-2)">
-            <input class="settings-input" type="text" placeholder="Note title…" x-model="noteNewTitle" style="width:100%;margin-bottom:8px;font-size:13px" @keydown.enter="createPersonalNote()" />
+            <input class="settings-input" type="text" placeholder="Note title…" x-model="noteNewTitle" style="width:100%;margin-bottom:8px;font-size:13px" @keydown.enter="createPersonalNote()" x-init="$nextTick(()=>$el.focus())" />
+            <div style="position:relative">
+              <div style="display:flex;gap:8px;margin-bottom:8px">
+              <input class="settings-input" type="text" placeholder="Tags (bug, idea, trabajo)…" x-model="noteNewTags" style="flex:1;font-size:12px" />
+              <select class="filter-select" x-model="noteNewFolder" style="font-size:12px;min-width:100px">
+                <option value="">/ root</option>
+                <template x-for="f in noteAllFolders()" :key="f">
+                  <option :value="f" x-text="'/ '+f"></option>
+                </template>
+              </select>
+            </div>
             <textarea class="settings-input" placeholder="Content (optional)…" x-model="noteNewBody" rows="3" style="width:100%;resize:vertical;font-size:12px;font-family:inherit"></textarea>
+              <template x-if="noteFromClipboard">
+                <span style="position:absolute;top:6px;right:8px;font-size:10px;background:var(--canvas);border:1px solid var(--rule-2);border-radius:3px;padding:1px 5px;color:var(--ink-3);pointer-events:none">from clipboard</span>
+              </template>
+            </div>
             <div style="display:flex;gap:8px;margin-top:8px;justify-content:flex-end">
-              <button class="btn btn-sm btn-outline" @click="noteCreating=false">Cancel</button>
+              <button class="btn btn-sm btn-outline" @click="noteCreating=false;noteFromClipboard=false">Cancel</button>
               <button class="btn btn-primary btn-sm" @click="createPersonalNote()" :disabled="noteSaving||!noteNewTitle.trim()">Create</button>
             </div>
           </div>
@@ -2738,42 +2928,143 @@
               </div>
             </div>
           </template>
-          <template x-if="!personalNotesLoading && personalNotes.length === 0">
-            <div style="max-width:480px;margin:40px auto;padding:0 24px;text-align:center">
-              <div style="font-size:28px;margin-bottom:12px">✎</div>
-              <div style="font-size:15px;font-weight:600;margin-bottom:8px">Your personal notepad</div>
-              <div style="font-size:13px;color:var(--ink-3);margin-bottom:24px;line-height:1.6">Notes are <strong>for you</strong>, not for Claude. Claude won't read them as context or memory — they're a place to capture what matters to you across your sessions.</div>
-              <div style="background:var(--canvas-2);border:1px solid var(--rule);border-radius:8px;padding:16px;text-align:left;margin-bottom:20px">
-                <div style="font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px">Try saying to Claude</div>
-                <div style="display:flex;flex-direction:column;gap:7px">
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Save this as a note"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Save this last output as a note"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Add this decision to my notes"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Save this as a TIL"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Show me my last note"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"What notes do I have?"</span></div>
-                  <div style="font-size:12px"><span style="font-family:monospace;background:var(--canvas);border:1px solid var(--rule);padding:2px 6px;border-radius:4px">"Show me my notes"</span> <span style="font-size:11px;color:var(--ink-3)">→ http://localhost:3141</span></div>
-                </div>
-              </div>
-              <div style="font-size:11px;color:var(--ink-3)">Or create a note manually with the <strong>+ New note</strong> button above.</div>
-            </div>
-          </template>
-          <template x-if="!personalNotesLoading && personalNotes.length > 0">
+          <template x-if="!personalNotesLoading">
             <div class="memory-layout">
               <div class="memory-sidebar" :style="'width:'+sidebarW+'px'">
-                <template x-for="n in personalNotes.filter(n => !noteSearch || n.title.toLowerCase().includes(noteSearch.toLowerCase()) || n.content.toLowerCase().includes(noteSearch.toLowerCase()))" :key="n.filename">
-                  <div class="plan-row" :class="{active: selectedNote?.filename === n.filename}" @click="selectedNote=n;noteEditing=false;window.location.hash='#/note/'+n.filename">
-                    <div class="plan-row-title" x-text="n.title"></div>
+                <!-- Scratch — always pinned at top -->
+                <div class="plan-row scratch-row" :class="{active: scratchActive}" @click="scratchActive=true;selectedNote=null;noteEditing=false;window.location.hash=''">
+                  <div style="display:flex;align-items:center;gap:5px">
+                    <span style="font-size:11px;opacity:.7">⚡</span>
+                    <span style="font-size:12.5px;font-weight:500">Scratch</span>
+                    <span style="font-size:10px;color:var(--ink-3);margin-left:2px">session only</span>
+                  </div>
+                  <div x-show="scratchContent.length > 0" style="font-size:10px;color:var(--ink-3)" x-text="scratchContent.slice(0,40) + (scratchContent.length>40?'…':'')"></div>
+                </div>
+                <div style="border-top:1px solid var(--rule)"></div>
+                <!-- Folder nav: at root show folders + create; inside folder show back -->
+                <template x-if="noteFolderPath === ''">
+                  <div>
+                    <template x-for="f in noteAllFolders()" :key="f">
+                      <div class="note-folder-row" @click="if(noteRenamingFolder!==f)noteFolderPath=f;selectedNote=null;scratchActive=false">
+                        <template x-if="noteRenamingFolder !== f">
+                          <span class="note-folder-icon">▶</span>
+                        </template>
+                        <template x-if="noteRenamingFolder === f">
+                          <input class="settings-input" style="flex:1;font-size:11px;padding:2px 5px;margin-right:4px" x-model="noteRenameFolderDraft"
+                            @click.stop
+                            x-init="$nextTick(()=>$el.focus())"
+                            @keydown.enter.stop="renameFolderConfirm(f)"
+                            @keydown.escape.stop="noteRenamingFolder=null;noteRenameFolderDraft=''" />
+                        </template>
+                        <template x-if="noteRenamingFolder !== f">
+                          <span class="note-folder-name" x-text="f"></span>
+                        </template>
+                        <template x-if="noteRenamingFolder !== f">
+                          <span class="note-folder-count" x-text="personalNotes.filter(n=>(n.folder??'')===f).length"></span>
+                        </template>
+                        <template x-if="noteRenamingFolder !== f">
+                          <span style="font-size:10px;color:var(--ink-3);padding:0 2px;opacity:0;transition:opacity .15s" class="note-folder-rename-btn"
+                            @click.stop="noteRenamingFolder=f;noteRenameFolderDraft=f" title="Rename">✎</span>
+                        </template>
+                        <template x-if="noteRenamingFolder === f">
+                          <button class="btn btn-sm btn-primary" style="padding:1px 7px;font-size:11px" @click.stop="renameFolderConfirm(f)">OK</button>
+                        </template>
+                      </div>
+                    </template>
+                    <div class="note-folder-create-row">
+                      <template x-if="!noteCreatingFolder">
+                        <span class="note-folder-add" @click="noteCreatingFolder=true">+ New folder</span>
+                      </template>
+                      <template x-if="noteCreatingFolder">
+                        <div style="display:flex;gap:4px;padding:4px 10px">
+                          <input class="settings-input" style="flex:1;font-size:11px;padding:3px 6px" x-model="newFolderName" placeholder="folder name…" x-init="$nextTick(()=>$el.focus())" @keydown.enter="createFolder()" @keydown.escape="noteCreatingFolder=false;newFolderName=''" />
+                          <button class="btn btn-sm btn-primary" style="padding:2px 8px;font-size:11px" @click="createFolder()">Create</button>
+                        </div>
+                      </template>
+                    </div>
+                    <template x-if="noteAllFolders().length > 0">
+                      <div style="border-top:1px solid var(--rule);margin:2px 0"></div>
+                    </template>
+                  </div>
+                </template>
+                <template x-if="noteFolderPath !== ''">
+                  <div class="note-folder-back" @click="noteFolderPath='';selectedNote=null">
+                    <span style="color:var(--blue)">← All notes</span>
+                    <span style="color:var(--ink-3)">&nbsp;/&nbsp;</span>
+                    <span style="font-weight:500" x-text="noteFolderPath"></span>
+                  </div>
+                </template>
+                <!-- Tag filter (scoped to current folder) -->
+                <template x-if="noteAllTags().length > 0">
+                  <div class="note-tag-filter" @click.window="noteTagMenu=null;noteTagRenaming=false">
+                    <template x-for="t in noteAllTags()" :key="t.tag">
+                      <span class="note-tag-chip-wrap" style="position:relative;display:inline-flex;align-items:center">
+                        <span class="note-tag-chip" :class="{active: noteTagFilter.includes(t.tag)}"
+                          @click="noteTagFilter.includes(t.tag) ? noteTagFilter.splice(noteTagFilter.indexOf(t.tag),1) : noteTagFilter.push(t.tag)"
+                          x-text="t.tag + ' (' + t.count + ')'"></span>
+                        <span class="note-tag-mgmt-btn" @click.stop="noteTagMenu===t.tag ? noteTagMenu=null : (noteTagMenu=t.tag, noteTagRenameDraft=t.tag)" title="Manage tag">⋮</span>
+                        <template x-if="noteTagMenu === t.tag">
+                          <div class="note-tag-menu" @click.stop>
+                            <template x-if="!noteTagRenaming">
+                              <div>
+                                <div class="note-tag-menu-item" @click="noteTagRenaming=true;$nextTick(()=>$refs['tagRenameInput_'+t.tag]?.focus())">Rename…</div>
+                                <div class="note-tag-menu-item note-tag-menu-danger" @click="deleteTag(t.tag)">Delete from all notes</div>
+                              </div>
+                            </template>
+                            <template x-if="noteTagRenaming">
+                              <div style="display:flex;gap:4px;padding:2px">
+                                <input class="settings-input" style="font-size:11px;padding:2px 5px;width:100px"
+                                  x-model="noteTagRenameDraft"
+                                  :ref="'tagRenameInput_'+t.tag"
+                                  x-init="$nextTick(()=>$el.focus())"
+                                  @keydown.enter="renameTag(t.tag, noteTagRenameDraft)"
+                                  @keydown.escape="noteTagRenaming=false" />
+                                <button class="btn btn-sm btn-primary" style="padding:1px 6px;font-size:11px" @click="renameTag(t.tag, noteTagRenameDraft)">OK</button>
+                              </div>
+                            </template>
+                          </div>
+                        </template>
+                      </span>
+                    </template>
+                  </div>
+                </template>
+                <!-- Note list (scoped to current folder) -->
+                <template x-for="n in noteFolderNotes()" :key="n.path">
+                  <div class="plan-row" :class="{active: selectedNote?.path === n.path}" @click="selectedNote=n;scratchActive=false;noteEditing=false;window.location.hash='#/note/'+n.path"
+                    <div class="plan-row-title" style="display:flex;align-items:center;gap:4px">
+                      <template x-if="n.pinned"><span style="font-size:10px;line-height:1" title="Pinned">📌</span></template>
+                      <span x-text="n.title"></span>
+                    </div>
                     <div class="plan-row-meta">
                       <span x-text="formatDate(n.modified)"></span>
-                      <template x-if="n.session"><span style="color:var(--blue);font-size:10px">session</span></template>
+                      <template x-if="n.session && n.session.length>=32"><span style="color:var(--blue);font-size:10px">session</span></template>
                     </div>
+                    <template x-if="(n.tags||[]).length > 0">
+                      <div class="note-row-tags">
+                        <template x-for="tag in n.tags" :key="tag">
+                          <span class="note-row-tag" x-text="tag" @click.stop="noteTagFilter.includes(tag) ? noteTagFilter.splice(noteTagFilter.indexOf(tag),1) : noteTagFilter.push(tag)"></span>
+                        </template>
+                      </div>
+                    </template>
                   </div>
                 </template>
               </div>
               <div class="resize-handle" @mousedown.prevent="startResize($event)"></div>
               <div class="memory-detail">
-                <template x-if="!selectedNote">
+                <!-- Scratch detail -->
+                <template x-if="scratchActive">
+                  <div style="display:flex;flex-direction:column;height:100%;gap:10px">
+                    <div style="display:flex;align-items:center;justify-content:space-between;flex-shrink:0">
+                      <span style="font-size:11px;color:var(--ink-3)">⚡ Not saved · cleared on page reload</span>
+                      <div style="display:flex;gap:8px">
+                        <button class="btn btn-sm btn-outline" @click="scratchContent='';sessionStorage.removeItem('cs:scratch')" x-show="scratchContent.length>0">Clear</button>
+                        <button class="btn btn-primary btn-sm" @click="promoteScratch()" :disabled="!scratchContent.trim()">Save as note…</button>
+                      </div>
+                    </div>
+                    <textarea class="settings-input" x-model="scratchContent" @input="sessionStorage.setItem('cs:scratch',scratchContent)" style="flex:1;resize:none;font-family:monospace;font-size:12px;min-height:0;width:100%" placeholder="Scratch pad — nothing here is persisted. Use ↑ Save as note to keep it."></textarea>
+                  </div>
+                </template>
+                <template x-if="!scratchActive && !selectedNote">
                   <div style="padding:24px;max-width:380px">
                     <div style="font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)">Your personal notepad</div>
                     <div style="font-size:12px;color:var(--ink-3);margin-bottom:16px;line-height:1.6">Notes are <strong>for you</strong>, not for Claude. He won't read them as context — they're yours to capture, review and revisit.</div>
@@ -2793,17 +3084,53 @@
                     <div class="memory-detail-title" x-text="selectedNote.title"></div>
                     <div class="memory-detail-meta">
                       <span style="font-size:11px;color:var(--ink-3)" x-text="formatDate(selectedNote.modified)"></span>
-                      <template x-if="selectedNote.session">
+                      <template x-if="selectedNote.session && selectedNote.session.length >= 32">
                         <span style="font-size:11px;color:var(--blue);cursor:pointer" @click="openSessionById(selectedNote.session)" x-text="'→ Session ' + selectedNote.session.slice(0,8) + '…'"></span>
                       </template>
                     </div>
-                    <div class="memory-content md-content" x-html="selectedNote.content ? renderMd(selectedNote.content) : '<span style=\'color:var(--ink-3)\'>Empty note. Click Edit to add content.</span>'"></div>
+                    <template x-if="(selectedNote.tags||[]).length > 0">
+                      <div style="display:flex;gap:5px;flex-wrap:wrap;padding:0 20px 10px">
+                        <template x-for="tag in selectedNote.tags" :key="tag">
+                          <span class="note-tag-chip active" style="cursor:pointer" @click="noteTagFilter.includes(tag) ? noteTagFilter.splice(noteTagFilter.indexOf(tag),1) : noteTagFilter.push(tag)" x-text="tag"></span>
+                        </template>
+                      </div>
+                    </template>
+                    <div class="memory-content md-content" @click="handleNoteLinkClick($event)" x-html="selectedNote.content ? renderNotesMd(selectedNote.content) : '<span style=\'color:var(--ink-3)\'>Empty note. Click Edit to add content.</span>'"></div>
+                    <template x-if="noteBacklinks(selectedNote).length > 0">
+                      <div class="note-backlinks">
+                        <span class="note-backlinks-label">Referenced by</span>
+                        <template x-for="bl in noteBacklinks(selectedNote)" :key="bl.filename">
+                          <span class="note-backlink-chip" @click="selectedNote=bl;noteEditing=false;window.location.hash='#/note/'+bl.path" x-text="bl.title"></span>
+                        </template>
+                      </div>
+                    </template>
+                    <template x-if="noteRelated(selectedNote).length > 0">
+                      <div class="note-backlinks">
+                        <span class="note-backlinks-label">Related</span>
+                        <template x-for="rn in noteRelated(selectedNote)" :key="rn.filename">
+                          <span class="note-backlink-chip note-related-chip" @click="selectedNote=rn;noteEditing=false;window.location.hash='#/note/'+rn.path" x-text="rn.title"></span>
+                        </template>
+                      </div>
+                    </template>
                   </div>
                 </template>
                 <template x-if="selectedNote && noteEditing">
-                  <div style="display:flex;flex-direction:column;height:100%;gap:10px">
+                  <div style="display:flex;flex-direction:column;height:100%;gap:10px;position:relative">
                     <input class="settings-input" type="text" x-model="noteTitleDraft" style="font-size:14px;font-weight:600;width:100%" />
-                    <textarea class="settings-input" x-model="noteBodyDraft" style="flex:1;resize:none;font-family:monospace;font-size:12px;min-height:300px;width:100%"></textarea>
+                    <input class="settings-input" type="text" x-model="noteTagsDraft" placeholder="Tags (comma separated: bug, idea, trabajo)…" style="font-size:12px;width:100%" />
+                    <div style="position:relative;flex:1;display:flex;flex-direction:column">
+                      <textarea class="settings-input note-body-ta" x-model="noteBodyDraft" @input="noteEditorInput($event)" @keydown="noteEditorKeydown($event)" @blur="setTimeout(()=>noteAutocomplete.visible=false,150)" style="flex:1;resize:none;font-family:monospace;font-size:12px;min-height:300px;width:100%"></textarea>
+                      <template x-if="noteAutocomplete.visible">
+                        <div class="note-autocomplete">
+                          <template x-for="(n, i) in noteAutocomplete.results" :key="n.filename">
+                            <div class="note-autocomplete-item" :class="{active: i===noteAutocomplete.pos}" @mousedown.prevent="noteAutocompleteSelect(n)">
+                              <span class="note-ac-hash">#</span><span x-text="n.filename.replace(/\.md$/,'').replace(/^\d{4}-\d{2}-\d{2}-/,'')"></span>
+                              <span class="note-ac-title" x-text="n.title"></span>
+                            </div>
+                          </template>
+                        </div>
+                      </template>
+                    </div>
                   </div>
                 </template>
               </div>
@@ -4478,6 +4805,23 @@
         noteNewBody: '',
         noteClaudeInstalled: null,
         noteSetupMsg: '',
+        noteAutocomplete: { visible: false, query: '', results: [], pos: 0 },
+        noteFromClipboard: false,
+        scratchContent: sessionStorage.getItem('cs:scratch') || '',
+        scratchActive: false,
+        noteTagFilter: [],
+        noteTagsDraft: '',
+        noteNewTags: '',
+        noteFolderPath: '',
+        noteNewFolder: '',
+        noteCreatingFolder: false,
+        newFolderName: '',
+        noteFolders: [],
+        noteRenamingFolder: null,
+        noteRenameFolderDraft: '',
+        noteTagMenu: null,
+        noteTagRenaming: false,
+        noteTagRenameDraft: '',
         sidebarW: parseInt(localStorage.getItem('cm:sidebarW') || '260'),
         historyEntries: [],
         historyLoading: false,
@@ -4626,7 +4970,11 @@
           if (savedFrom) this.filterFrom = savedFrom;
           if (savedTo)   this.filterTo   = savedTo;
 
-          this.$watch('view',          v => localStorage.setItem('cs:view',       v));
+          this.$watch('view', v => {
+            localStorage.setItem('cs:view', v);
+            if (v !== 'notes' && window.location.hash.startsWith('#/note/')) window.location.hash = '';
+            if (v !== 'sessions' && window.location.hash.startsWith('#/session/')) window.location.hash = '';
+          });
           this.$watch('filterProject', v => localStorage.setItem('cs:project',    v));
           this.$watch('filterBranch',  v => localStorage.setItem('cs:branch',     v));
           this.$watch('filterText',    v => localStorage.setItem('cs:filterText', v));
@@ -4658,7 +5006,7 @@
           if (mNote) {
             const notes = await fetch('/api/notes').then(r => r.json()).catch(() => []);
             this.personalNotes = notes;
-            const note = this.personalNotes.find(n => n.filename === mNote[1]);
+            const note = this.personalNotes.find(n => n.path === mNote[1]);
             if (note) { this.view = 'notes'; this.selectedNote = note; }
           }
           // Clear hash when closing
@@ -5043,6 +5391,229 @@
 
         renderMd(text) { try { return marked.parse(text); } catch { return text; } },
 
+        renderNotesMd(text) {
+          const processed = text.replace(/(^|[^&\w])#([a-zA-Z][\w-]+)/g, (match, pre, slug) => {
+            const note = this.personalNotes.find(n => {
+              const base = n.filename.replace(/\.md$/, '');
+              const slugPart = base.replace(/^\d{4}-\d{2}-\d{2}-/, '');
+              return slugPart === slug || base === slug;
+            });
+            if (!note) return match;
+            return `${pre}[#${slug}](#/note/${note.path})`;
+          });
+          let html;
+          try { html = marked.parse(processed); } catch { html = processed; }
+          // Mark note-ref links so we can style/intercept them
+          html = html.replace(/href="#\/note\//g, 'class="note-ref-link" href="#/note/');
+          // Inject + buttons into paragraphs and list items
+          const btn = '<button class="para-add-task-btn" title="Add to Today">+</button>';
+          html = html.replace(/<p>/g, `<p>${btn}`);
+          html = html.replace(/<li>/g, `<li>${btn}`);
+          return html;
+        },
+
+        handleNoteLinkClick(e) {
+          const btn = e.target.closest('.para-add-task-btn');
+          if (btn) {
+            e.preventDefault();
+            const block = btn.closest('p,li');
+            const text = block ? block.innerText.replace('+', '').trim() : '';
+            if (text) this.addNoteTask(text, this.selectedNote || this.noteHovered);
+            return;
+          }
+          const a = e.target.closest('a.note-ref-link');
+          if (!a) return;
+          e.preventDefault();
+          const notepath = a.getAttribute('href').replace('#/note/', '');
+          const note = this.personalNotes.find(n => n.path === notepath);
+          if (note) { this.selectedNote = note; this.noteEditing = false; window.location.hash = '#/note/' + note.path; }
+        },
+
+        noteAllFolders() {
+          const fromNotes = this.personalNotes.map(n => n.folder ?? '').filter(Boolean);
+          return [...new Set([...this.noteFolders, ...fromNotes])].sort();
+        },
+
+        noteFolderNotes() {
+          const filtered = this.personalNotes.filter(n => {
+            if ((n.folder ?? '') !== this.noteFolderPath) return false;
+            if (this.noteTagFilter.length > 0 && !this.noteTagFilter.some(t => (n.tags||[]).includes(t))) return false;
+            if (!this.noteSearch) return true;
+            return n.title.toLowerCase().includes(this.noteSearch.toLowerCase()) || (n.content||'').toLowerCase().includes(this.noteSearch.toLowerCase());
+          });
+          return filtered.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
+        },
+
+        async createFolder() {
+          if (!this.newFolderName.trim()) return;
+          const res = await fetch('/api/notes/folders', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name: this.newFolderName.trim() }),
+          }).then(r => r.json()).catch(() => null);
+          if (res?.name && !this.noteFolders.includes(res.name)) {
+            this.noteFolders.push(res.name);
+            this.noteFolders.sort();
+          }
+          this.noteCreatingFolder = false;
+          this.newFolderName = '';
+        },
+
+        async renameFolderConfirm(oldName) {
+          const newName = this.noteRenameFolderDraft.trim();
+          if (!newName || newName === oldName) { this.noteRenamingFolder = null; return; }
+          const res = await fetch(`/api/notes/folders/${encodeURIComponent(oldName)}/rename`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ newName }),
+          }).then(r => r.json()).catch(() => null);
+          if (!res?.name) { alert(res?.error || 'Rename failed'); return; }
+          // Update noteFolders list
+          const idx = this.noteFolders.indexOf(oldName);
+          if (idx !== -1) this.noteFolders.splice(idx, 1, res.name);
+          else { this.noteFolders.push(res.name); }
+          this.noteFolders.sort();
+          // Update folder field in all affected notes
+          for (const n of this.personalNotes) {
+            if ((n.folder ?? '') === oldName) {
+              n.folder = res.name;
+              n.path = res.name + '/' + n.filename;
+            }
+          }
+          if (this.noteFolderPath === oldName) this.noteFolderPath = res.name;
+          if (this.selectedNote?.folder === oldName) {
+            this.selectedNote.folder = res.name;
+            this.selectedNote.path = res.name + '/' + this.selectedNote.filename;
+          }
+          this.noteRenamingFolder = null;
+          this.noteRenameFolderDraft = '';
+        },
+
+        noteAllTags() {
+          const counts = {};
+          const scoped = this.personalNotes.filter(n => (n.folder ?? '') === this.noteFolderPath);
+          for (const n of scoped) {
+            for (const t of (n.tags || [])) counts[t] = (counts[t] || 0) + 1;
+          }
+          return Object.entries(counts).sort((a, b) => b[1] - a[1]).map(([tag, count]) => ({ tag, count }));
+        },
+
+        async renameTag(oldName, newName) {
+          newName = newName.trim();
+          if (!newName || newName === oldName) { this.noteTagMenu = null; this.noteTagRenaming = false; return; }
+          const res = await fetch(`/api/notes/tags/${encodeURIComponent(oldName)}/rename`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ newName }),
+          }).then(r => r.json()).catch(() => null);
+          if (!res || res.error) { alert(res?.error || 'Rename failed'); return; }
+          for (const n of this.personalNotes) {
+            if ((n.tags || []).includes(oldName)) {
+              n.tags = n.tags.map(t => t === oldName ? res.to : t);
+            }
+          }
+          if (this.noteTagFilter.includes(oldName)) {
+            this.noteTagFilter.splice(this.noteTagFilter.indexOf(oldName), 1, res.to);
+          }
+          if (this.selectedNote?.tags?.includes(oldName)) {
+            this.selectedNote.tags = this.selectedNote.tags.map(t => t === oldName ? res.to : t);
+          }
+          this.noteTagMenu = null;
+          this.noteTagRenaming = false;
+        },
+
+        async deleteTag(name) {
+          if (!confirm(`Remove tag "${name}" from all notes?`)) return;
+          const res = await fetch(`/api/notes/tags/${encodeURIComponent(name)}`, { method: 'DELETE' })
+            .then(r => r.json()).catch(() => null);
+          if (!res || res.error) { alert(res?.error || 'Delete failed'); return; }
+          for (const n of this.personalNotes) {
+            if ((n.tags || []).includes(name)) n.tags = n.tags.filter(t => t !== name);
+          }
+          const fi = this.noteTagFilter.indexOf(name);
+          if (fi !== -1) this.noteTagFilter.splice(fi, 1);
+          if (this.selectedNote?.tags?.includes(name)) {
+            this.selectedNote.tags = this.selectedNote.tags.filter(t => t !== name);
+          }
+          this.noteTagMenu = null;
+        },
+
+        noteTokens(note) {
+          const STOP = new Set(['the','a','an','and','or','but','in','on','at','to','for','of','with','by','from','is','are','was','were','be','been','have','has','had','do','does','did','will','would','could','should','may','might','that','this','it','its','as','if','not','no','so','up','out','de','la','el','en','que','se','los','las','un','una','con','por','para','como','más','una','sus','del','al','lo','le','les','nos','pero','fue','si','ya','también','este','esta','estos','estas','hay','una']);
+          const text = (note.title + ' ' + (note.content || '')).toLowerCase();
+          return new Set(text.match(/[a-záéíóúüñ]{3,}/g)?.filter(w => !STOP.has(w)) || []);
+        },
+
+        noteRelated(note, limit = 4) {
+          if (!note) return [];
+          const ta = this.noteTokens(note);
+          if (ta.size === 0) return [];
+          const backlinked = new Set(this.noteBacklinks(note).map(n => n.filename));
+          return this.personalNotes
+            .filter(n => n.filename !== note.filename && !backlinked.has(n.filename))
+            .map(n => {
+              const tb = this.noteTokens(n);
+              const shared = [...ta].filter(w => tb.has(w)).length;
+              const score = shared / Math.sqrt(ta.size * tb.size);
+              return { note: n, score };
+            })
+            .filter(x => x.score > 0.08)
+            .sort((a, b) => b.score - a.score)
+            .slice(0, limit)
+            .map(x => x.note);
+        },
+
+        noteBacklinks(note) {
+          if (!note) return [];
+          const slug = note.filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '');
+          const fullBase = note.filename.replace(/\.md$/, '');
+          return this.personalNotes.filter(n => {
+            if (n.filename === note.filename) return false;
+            return n.content && (n.content.includes('#' + slug) || n.content.includes('#' + fullBase));
+          });
+        },
+
+        noteEditorInput(e) {
+          const ta = e.target;
+          const val = ta.value;
+          const pos = ta.selectionStart;
+          // Find # trigger: look back from cursor for #word (no spaces)
+          const before = val.slice(0, pos);
+          const m = before.match(/#([a-zA-Z][\w-]*)$/);
+          if (m) {
+            const query = m[1].toLowerCase();
+            const results = this.personalNotes.filter(n => {
+              const base = n.filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '');
+              return base.includes(query) || n.title.toLowerCase().includes(query);
+            }).slice(0, 6);
+            this.noteAutocomplete = { visible: results.length > 0, query: m[1], results, pos: 0 };
+          } else {
+            this.noteAutocomplete.visible = false;
+          }
+        },
+
+        noteEditorKeydown(e) {
+          const ac = this.noteAutocomplete;
+          if (!ac.visible) return;
+          if (e.key === 'ArrowDown') { e.preventDefault(); ac.pos = Math.min(ac.pos + 1, ac.results.length - 1); }
+          else if (e.key === 'ArrowUp') { e.preventDefault(); ac.pos = Math.max(ac.pos - 1, 0); }
+          else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); this.noteAutocompleteSelect(ac.results[ac.pos]); }
+          else if (e.key === 'Escape') { ac.visible = false; }
+        },
+
+        noteAutocompleteSelect(note) {
+          const slug = note.filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-/, '');
+          const ta = document.querySelector('textarea.note-body-ta');
+          if (!ta) return;
+          const pos = ta.selectionStart;
+          const before = ta.value.slice(0, pos);
+          const after = ta.value.slice(pos);
+          const replaced = before.replace(/#([a-zA-Z][\w-]*)$/, '#' + slug);
+          this.noteBodyDraft = replaced + after;
+          this.noteAutocomplete.visible = false;
+          this.$nextTick(() => { ta.focus(); ta.selectionStart = ta.selectionEnd = replaced.length; });
+        },
+
         renderInlineCode(text) {
           const esc = text
             .replace(/&/g, '&amp;').replace(/</g, '&lt;')
@@ -5530,15 +6101,41 @@
           setTimeout(() => this.planShareMsg = '', 5000);
         },
 
+        async openNewNote() {
+          this.noteNewTitle = '';
+          this.noteNewBody = '';
+          this.noteNewTags = '';
+          this.noteNewFolder = this.noteFolderPath;
+          this.noteFromClipboard = false;
+          this.noteCreating = true;
+          try {
+            const text = await navigator.clipboard.readText();
+            if (text && text.trim().length > 0) {
+              this.noteNewBody = text.trim();
+              this.noteFromClipboard = true;
+            }
+          } catch (e) { /* clipboard access denied or empty */ }
+        },
+
+        promoteScratch() {
+          this.noteNewTitle = '';
+          this.noteNewBody = this.scratchContent;
+          this.noteFromClipboard = false;
+          this.scratchActive = false;
+          this.noteCreating = true;
+        },
+
         async loadPersonalNotes() {
           if (this.personalNotesLoading) return;
           this.personalNotesLoading = true;
-          const [notes, status] = await Promise.all([
+          const [notes, status, folders] = await Promise.all([
             fetch('/api/notes').then(r => r.json()).catch(() => []),
             fetch('/api/notes/claude-md-status').then(r => r.json()).catch(() => ({})),
+            fetch('/api/notes/folders').then(r => r.json()).catch(() => []),
           ]);
           this.personalNotes = notes;
           this.noteClaudeInstalled = status.installed ?? null;
+          this.noteFolders = Array.isArray(folders) ? folders : [];
           this.personalNotesLoading = false;
         },
 
@@ -5565,13 +6162,14 @@
             const note = await fetch('/api/notes', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ title: this.noteNewTitle, content: this.noteNewBody }),
+              body: JSON.stringify({ title: this.noteNewTitle, content: this.noteNewBody, tags: this.noteNewTags ? this.noteNewTags.split(',').map(t=>t.trim()).filter(Boolean) : [], folder: this.noteNewFolder }),
             }).then(r => r.json());
             this.personalNotes.unshift(note);
             this.selectedNote = note;
             this.noteCreating = false;
             this.noteNewTitle = '';
             this.noteNewBody = '';
+            this.noteNewTags = '';
             this.noteEditing = false;
           } catch (e) { this.noteMsg = 'Error: ' + e.message; }
           this.noteSaving = false;
@@ -5581,10 +6179,10 @@
           if (!this.selectedNote) return;
           this.noteSaving = true; this.noteMsg = '';
           try {
-            const updated = await fetch(`/api/notes/${this.selectedNote.filename}`, {
+            const updated = await fetch(`/api/notes/${this.selectedNote.path}`, {
               method: 'PUT',
               headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ title: this.noteTitleDraft, content: this.noteBodyDraft }),
+              body: JSON.stringify({ title: this.noteTitleDraft, content: this.noteBodyDraft, tags: this.noteTagsDraft.split(',').map(t=>t.trim()).filter(Boolean) }),
             }).then(r => r.json());
             const idx = this.personalNotes.findIndex(n => n.filename === this.selectedNote.filename);
             if (idx !== -1) this.personalNotes[idx] = updated;
@@ -5598,12 +6196,44 @@
 
         async deletePersonalNote() {
           if (!this.selectedNote || !confirm(`Delete "${this.selectedNote.title}"?`)) return;
-          await fetch(`/api/notes/${this.selectedNote.filename}`, { method: 'DELETE' });
+          await fetch(`/api/notes/${this.selectedNote.path}`, { method: 'DELETE' });
           this.personalNotes = this.personalNotes.filter(n => n.filename !== this.selectedNote.filename);
           this.selectedNote = null;
           this.noteEditing = false;
         },
 
+        async togglePinNote() {
+          if (!this.selectedNote) return;
+          const newPinned = !this.selectedNote.pinned;
+          const updated = await fetch(`/api/notes/${this.selectedNote.path}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ pinned: newPinned }),
+          }).then(r => r.json());
+          if (updated.error) { alert(updated.error); return; }
+          const idx = this.personalNotes.findIndex(n => n.path === this.selectedNote.path);
+          if (idx !== -1) this.personalNotes.splice(idx, 1, updated);
+          this.selectedNote = updated;
+        },
+
+
+        async movePersonalNote(targetFolder) {
+          if (!this.selectedNote || targetFolder === '__current__') return;
+          const currentFolder = this.selectedNote.folder ?? '';
+          if (targetFolder === currentFolder) return;
+          const updated = await fetch(`/api/notes/${this.selectedNote.path}/move`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ folder: targetFolder }),
+          }).then(r => r.json());
+          if (updated.error) { alert(updated.error); return; }
+          const idx = this.personalNotes.findIndex(n => n.path === this.selectedNote.path);
+          if (idx !== -1) this.personalNotes.splice(idx, 1, updated);
+          this.selectedNote = updated;
+          this.noteFolderPath = targetFolder;
+          window.location.hash = `#/note/${updated.path}`;
+        },
+
         async saveNoteFromSession() {
           const title = this.selectedSession?.firstPrompt?.slice(0, 60) || 'Session note';
           const sessionId = this.selectedSession?.sessionId || '';
@@ -5654,6 +6284,25 @@
           this.saveToday();
         },
 
+        addNoteTask(text, note) {
+          if (!text || !this.todayData) return;
+          this.todayData.tasks.push({
+            id: Math.random().toString(36).slice(2),
+            text: text.slice(0, 200),
+            done: false,
+            carriedOver: false,
+            createdAt: new Date().toISOString(),
+            noteRef: note ? { title: note.title, path: note.path } : undefined,
+          });
+          this.saveToday();
+          // Toast
+          const el = document.createElement('div');
+          el.className = 'note-task-toast';
+          el.textContent = '✓ Added to Today';
+          document.body.appendChild(el);
+          setTimeout(() => el.remove(), 2000);
+        },
+
         toggleTodayTask(id) {
           const task = this.todayData?.tasks.find(t => t.id === id);
           if (task) { task.done = !task.done; this.saveToday(); }

package/server.js

@@ -399,7 +399,12 @@ function parseFrontmatter(raw) {
     const kv = line.match(/^([\w-]+):\s*(.*)$/);
     if (kv) {
       currentKey = kv[1];
-      meta[currentKey] = kv[2].trim();
+      const val = kv[2].trim();
+      if (val.startsWith('[') && val.endsWith(']')) {
+        meta[currentKey] = val.slice(1, -1).split(',').map(s => s.trim()).filter(Boolean);
+      } else {
+        meta[currentKey] = val;
+      }
     } else if (currentKey && line.match(/^\s+-\s+(.+)$/)) {
       const val = line.match(/^\s+-\s+(.+)$/)[1].trim();
       if (!Array.isArray(meta[currentKey])) meta[currentKey] = meta[currentKey] ? [meta[currentKey]] : [];
@@ -1902,21 +1907,47 @@ app.post('/api/share/plan/:filename', async (req, res) => {
 const NOTES_DIR = path.join(DATA_DIR, 'notes');
 function ensureNotesDir() { if (!fs.existsSync(NOTES_DIR)) fs.mkdirSync(NOTES_DIR, { recursive: true }); }
 
-function parseNoteFile(filename) {
-  const filePath = path.join(NOTES_DIR, filename);
+function parseNoteFile(notepath) {
+  const filePath = path.join(NOTES_DIR, notepath);
   const stat = fs.statSync(filePath);
   const raw = fs.readFileSync(filePath, 'utf8');
   const { meta, content: body } = parseFrontmatter(raw);
+  const tags = Array.isArray(meta.tags) ? meta.tags : (meta.tags ? [meta.tags] : []);
+  const parts = notepath.replace(/\\/g, '/').split('/');
+  const filename = parts[parts.length - 1];
+  const folder = parts.slice(0, -1).join('/');
   return {
     filename,
+    path: notepath,
+    folder,
     title: meta.title || filename.replace('.md', ''),
     date: meta.date || stat.mtimeMs,
     session: meta.session || '',
+    tags,
+    pinned: meta.pinned === true || meta.pinned === 'true',
     content: body.trim(),
     modified: new Date(stat.mtimeMs).toISOString(),
   };
 }
 
+function scanNotes(dir, base) {
+  if (dir === undefined) dir = NOTES_DIR;
+  if (base === undefined) base = '';
+  const results = [];
+  try {
+    for (const entry of fs.readdirSync(dir)) {
+      const fullPath = path.join(dir, entry);
+      const relPath = base ? `${base}/${entry}` : entry;
+      if (fs.statSync(fullPath).isDirectory()) {
+        results.push(...scanNotes(fullPath, relPath));
+      } else if (entry.endsWith('.md')) {
+        results.push(parseNoteFile(relPath));
+      }
+    }
+  } catch (e) { /* ignore unreadable dirs */ }
+  return results;
+}
+
 const NOTES_CLAUDE_MD_SNIPPET = `
 ## Personal Notes
 
@@ -1928,13 +1959,18 @@ When the user asks you to "save a note", "add to notes", "guarda esto como nota"
      ---
      title: <descriptive title>
      date: <current ISO date>
-     session: <current session ID if known>
+     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//'>
      ---
 
      <the content the user wants to save>
      \`\`\`
-2. Use the Write tool to create the file (not Bash).
-3. Confirm with: "Saved to Notes: http://localhost:3141/#/note/<filename>"
+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/\`
+   - 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.
+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>"
 
 The notes directory may not exist yet — the app creates it automatically on first load.
 
@@ -2002,51 +2038,161 @@ app.post('/api/notes/setup-claude', (req, res) => {
   } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
+app.get('/api/notes/folders', (req, res) => {
+  ensureNotesDir();
+  try {
+    const folders = fs.readdirSync(NOTES_DIR).filter(e => fs.statSync(path.join(NOTES_DIR, e)).isDirectory());
+    res.json(folders.sort());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/notes/folders', (req, res) => {
+  ensureNotesDir();
+  const { name } = req.body;
+  if (!name) return res.status(400).json({ error: 'name required' });
+  const safeName = name.trim().replace(/[^a-zA-Z0-9_-]/g, '-').replace(/^-+|-+$/g, '').slice(0, 50);
+  if (!safeName) return res.status(400).json({ error: 'invalid name' });
+  const folderPath = path.join(NOTES_DIR, safeName);
+  if (!folderPath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid name' });
+  try {
+    if (!fs.existsSync(folderPath)) fs.mkdirSync(folderPath, { recursive: true });
+    res.json({ name: safeName });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.patch('/api/notes/folders/:name/rename', (req, res) => {
+  ensureNotesDir();
+  const { name } = req.params;
+  const { newName } = req.body;
+  if (!name || !newName) return res.status(400).json({ error: 'name and newName required' });
+  const safeName = newName.trim().replace(/[^a-zA-Z0-9_-]/g, '-').replace(/^-+|-+$/g, '').slice(0, 50);
+  if (!safeName) return res.status(400).json({ error: 'invalid newName' });
+  const srcPath = path.join(NOTES_DIR, name);
+  const destPath = path.join(NOTES_DIR, safeName);
+  if (!srcPath.startsWith(NOTES_DIR) || !destPath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
+  try {
+    if (!fs.existsSync(srcPath)) return res.status(404).json({ error: 'folder not found' });
+    if (fs.existsSync(destPath)) return res.status(409).json({ error: 'folder already exists' });
+    fs.renameSync(srcPath, destPath);
+    res.json({ name: safeName });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+function rewriteNoteTags(notepath, updatedTags) {
+  const filePath = path.join(NOTES_DIR, notepath);
+  const existing = parseNoteFile(notepath);
+  const sessionLine = existing.session ? `\nsession: ${existing.session}` : '';
+  const tagsLine = updatedTags.length > 0 ? `\ntags: [${updatedTags.join(', ')}]` : '';
+  const pinnedLine = existing.pinned ? `\npinned: true` : '';
+  const raw = `---\ntitle: ${existing.title}\ndate: ${existing.date}${sessionLine}${tagsLine}${pinnedLine}\n---\n\n${existing.content}`;
+  fs.writeFileSync(filePath, raw, 'utf8');
+}
+
+app.patch('/api/notes/tags/:name/rename', (req, res) => {
+  const { name } = req.params;
+  const { newName } = req.body;
+  if (!name || !newName) return res.status(400).json({ error: 'name and newName required' });
+  const safe = newName.trim().replace(/[^a-zA-Z0-9_-]/g, '-').replace(/^-+|-+$/g, '').slice(0, 40);
+  if (!safe) return res.status(400).json({ error: 'invalid newName' });
+  ensureNotesDir();
+  try {
+    const affected = scanNotes().filter(n => (n.tags || []).includes(name));
+    for (const n of affected) {
+      const tags = n.tags.map(t => t === name ? safe : t);
+      rewriteNoteTags(n.path, tags);
+    }
+    res.json({ renamed: name, to: safe, count: affected.length });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.delete('/api/notes/tags/:name', (req, res) => {
+  const { name } = req.params;
+  if (!name) return res.status(400).json({ error: 'name required' });
+  ensureNotesDir();
+  try {
+    const affected = scanNotes().filter(n => (n.tags || []).includes(name));
+    for (const n of affected) {
+      const tags = n.tags.filter(t => t !== name);
+      rewriteNoteTags(n.path, tags);
+    }
+    res.json({ deleted: name, count: affected.length });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 app.get('/api/notes', (req, res) => {
   ensureNotesDir();
   try {
-    const files = fs.readdirSync(NOTES_DIR).filter(f => f.endsWith('.md'));
-    const notes = files.map(f => parseNoteFile(f)).sort((a, b) => b.modified.localeCompare(a.modified));
+    const notes = scanNotes().sort((a, b) => b.modified.localeCompare(a.modified));
     res.json(notes);
   } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
 app.post('/api/notes', (req, res) => {
   ensureNotesDir();
-  const { title, content, session } = req.body;
+  const { title, content, session, tags, folder } = req.body;
   if (!title) return res.status(400).json({ error: 'title required' });
   const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40) || 'note';
   const date = new Date().toISOString();
   const datePrefix = date.slice(0, 10);
+  const safeFolder = folder ? folder.trim().replace(/[^a-zA-Z0-9_/-]/g, '-').replace(/^\/+|\/+$/g, '') : '';
+  const noteDir = safeFolder ? path.join(NOTES_DIR, safeFolder) : NOTES_DIR;
+  if (!noteDir.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid folder' });
+  if (!fs.existsSync(noteDir)) fs.mkdirSync(noteDir, { recursive: true });
   let filename = `${datePrefix}-${slug}.md`;
-  // avoid collisions
   let i = 1;
-  while (fs.existsSync(path.join(NOTES_DIR, filename))) { filename = `${datePrefix}-${slug}-${i++}.md`; }
+  while (fs.existsSync(path.join(noteDir, filename))) { filename = `${datePrefix}-${slug}-${i++}.md`; }
+  const notepath = safeFolder ? `${safeFolder}/${filename}` : filename;
   const sessionLine = session ? `\nsession: ${session}` : '';
-  const raw = `---\ntitle: ${title}\ndate: ${date}${sessionLine}\n---\n\n${content || ''}`;
-  fs.writeFileSync(path.join(NOTES_DIR, filename), raw, 'utf8');
-  res.json(parseNoteFile(filename));
+  const tagsArr = Array.isArray(tags) ? tags.filter(Boolean) : [];
+  const tagsLine = tagsArr.length > 0 ? `\ntags: [${tagsArr.join(', ')}]` : '';
+  const raw = `---\ntitle: ${title}\ndate: ${date}${sessionLine}${tagsLine}\n---\n\n${content || ''}`;
+  fs.writeFileSync(path.join(NOTES_DIR, notepath), raw, 'utf8');
+  res.json(parseNoteFile(notepath));
+});
+
+app.patch('/api/notes/*/move', (req, res) => {
+  const notepath = req.params[0];
+  if (!notepath || !notepath.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
+  const srcPath = path.join(NOTES_DIR, notepath);
+  if (!srcPath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
+  const { folder } = req.body;
+  const filename = path.basename(notepath);
+  const destDir = folder ? path.join(NOTES_DIR, folder) : NOTES_DIR;
+  const destPath = path.join(destDir, filename);
+  if (!destPath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid destination' });
+  try {
+    if (!fs.existsSync(srcPath)) return res.status(404).json({ error: 'note not found' });
+    if (destPath === srcPath) return res.json(parseNoteFile(notepath));
+    if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
+    fs.renameSync(srcPath, destPath);
+    const newRelPath = folder ? `${folder}/${filename}` : filename;
+    res.json(parseNoteFile(newRelPath));
+  } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
-app.put('/api/notes/:filename', (req, res) => {
-  const filename = path.basename(req.params.filename);
-  if (!filename.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
-  const filePath = path.join(NOTES_DIR, filename);
+app.put('/api/notes/*', (req, res) => {
+  const notepath = req.params[0];
+  if (!notepath || !notepath.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
+  const filePath = path.join(NOTES_DIR, notepath);
   if (!filePath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
-  const { title, content } = req.body;
+  const { title, content, tags, pinned } = req.body;
   try {
-    const existing = parseNoteFile(filename);
+    const existing = parseNoteFile(notepath);
+    const resolvedTags = Array.isArray(tags) ? tags : existing.tags;
+    const resolvedPinned = pinned !== undefined ? pinned : existing.pinned;
     const sessionLine = existing.session ? `\nsession: ${existing.session}` : '';
-    const raw = `---\ntitle: ${title || existing.title}\ndate: ${existing.date}${sessionLine}\n---\n\n${content ?? existing.content}`;
+    const tagsLine = resolvedTags.length > 0 ? `\ntags: [${resolvedTags.join(', ')}]` : '';
+    const pinnedLine = resolvedPinned ? `\npinned: true` : '';
+    const raw = `---\ntitle: ${title || existing.title}\ndate: ${existing.date}${sessionLine}${tagsLine}${pinnedLine}\n---\n\n${content ?? existing.content}`;
     fs.writeFileSync(filePath, raw, 'utf8');
-    res.json(parseNoteFile(filename));
+    res.json(parseNoteFile(notepath));
   } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
-app.delete('/api/notes/:filename', (req, res) => {
-  const filename = path.basename(req.params.filename);
-  if (!filename.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
-  const filePath = path.join(NOTES_DIR, filename);
+app.delete('/api/notes/*', (req, res) => {
+  const notepath = req.params[0];
+  if (!notepath || !notepath.endsWith('.md')) return res.status(400).json({ error: 'invalid filename' });
+  const filePath = path.join(NOTES_DIR, notepath);
   if (!filePath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
   try {
     if (fs.existsSync(filePath)) fs.unlinkSync(filePath);