claude-home 1.5.9 → 1.5.27

package/package.json

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

package/public/index.html

@@ -1548,6 +1548,17 @@
         Plans
         <span class="nav-count" x-show="plans.length>0" x-text="plans.length"></span>
       </div>
+      <div class="nav-item" :class="{ active: view === 'notes' }" @click="view='notes';selectedSession=null;loadPersonalNotes()">
+        <span class="nav-icon">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5" stroke="currentColor">
+            <path d="M3 2h8l3 3v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
+            <polyline points="11 2 11 5 14 5"/>
+            <line x1="5" y1="7" x2="11" y2="7"/><line x1="5" y1="10" x2="9" y2="10"/>
+          </svg>
+        </span>
+        Notes
+        <span class="nav-count" x-show="personalNotes.length>0" x-text="personalNotes.length"></span>
+      </div>
     </div>
     <div class="nav-divider"></div>
     <div class="nav-section">
@@ -2252,25 +2263,32 @@
             </div>
           </div>
           <div style="display:flex;gap:6px;align-items:center;flex-shrink:0">
-            <button class="btn btn-sm" :class="cleanMode ? 'btn-primary' : ''" style="background:var(--canvas-2);color:var(--ink)" :style="cleanMode ? 'background:var(--blue);color:#fff' : ''" @click="cleanMode=!cleanMode" title="Toggle focus view">Focus</button>
+            <button class="btn btn-sm" :style="cleanMode ? 'background:var(--blue);color:#fff' : 'background:var(--canvas-2);color:var(--ink)'" @click="cleanMode=!cleanMode" title="Toggle focus view">Focus</button>
+            <div style="flex:1"></div>
+            <span x-show="exportMsg" x-text="exportMsg" style="font-size:12px;color:var(--green)" x-transition></span>
+            <span x-show="deletingSession" style="font-size:12px;color:var(--ink-3)">Deleting…</span>
+            <button class="btn btn-primary btn-sm" id="resume-detail" :disabled="!sessionDetail?.resumable" :title="!sessionDetail?.resumable ? 'Session file deleted — cannot resume' : 'Copy command to resume this session'" @click="sessionDetail?.resumable && resumeSession(selectedSession.sessionId, 'resume-detail', selectedSession.projectPath)">
+              Resume →
+            </button>
+            <!-- ⋮ dropdown -->
             <div style="position:relative">
-              <button class="btn btn-sm" style="background:var(--canvas-2);color:var(--ink);display:flex;align-items:center;gap:4px" @click="exportDropOpen=!exportDropOpen" @click.outside="exportDropOpen=false">
-                Export <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M2 3.5L5 6.5L8 3.5"/></svg>
+              <button class="btn btn-sm" style="background:var(--canvas-2);color:var(--ink);border:1px solid var(--rule);padding:4px 10px;display:flex;align-items:center" @click="exportDropOpen=!exportDropOpen" @click.outside="exportDropOpen=false" title="More options">
+                <svg width="3" height="15" viewBox="0 0 3 15" fill="currentColor"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="1.5" cy="7.5" r="1.5"/><circle cx="1.5" cy="13.5" r="1.5"/></svg>
               </button>
-              <div x-show="exportDropOpen" x-transition style="position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1px solid var(--rule);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:50;min-width:160px;overflow:hidden">
+              <div x-show="exportDropOpen" x-transition style="position:absolute;top:calc(100% + 4px);right:0;background:var(--canvas,#fff);border:1px solid var(--rule);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:50;min-width:180px;overflow:hidden">
                 <button class="export-drop-item" @click="exportSession(true); exportDropOpen=false">Download .md</button>
-                <button class="export-drop-item" @click="copySessionMd(); exportDropOpen=false">Copy to clipboard</button>
+                <button class="export-drop-item" @click="copySessionMd(); exportDropOpen=false">Copy as Markdown</button>
+                <button class="export-drop-item" @click="shareSession(); exportDropOpen=false" :disabled="!!shareMsg"><span x-text="shareMsg || 'Publish to Gist'"></span></button>
+                <button class="export-drop-item" @click="navigator.clipboard.writeText(location.origin+location.pathname+'#/session/'+selectedSession.projectDir+'/'+selectedSession.sessionId);exportDropOpen=false">Copy local link</button>
+                <button class="export-drop-item" @click="saveNoteFromSession();exportDropOpen=false">Save as note</button>
+                <div style="height:1px;background:var(--rule);margin:4px 0"></div>
+                <button class="export-drop-item" style="color:var(--red)" @click="deleteSession();exportDropOpen=false" x-show="!deletingSession">Delete session</button>
               </div>
             </div>
-            <button class="btn btn-sm" style="background:var(--red-dim,#3a1a1a);color:var(--red);border:1px solid var(--red)" @click="deleteSession()" x-show="!deletingSession">Delete</button>
-            <span x-show="deletingSession" style="font-size:12px;color:var(--ink-3)">Deleting…</span>
-            <button class="btn btn-primary btn-sm" id="resume-detail" :disabled="!sessionDetail?.resumable" :title="!sessionDetail?.resumable ? 'Session file deleted — cannot resume' : 'Copy command to resume this session'" @click="sessionDetail?.resumable && resumeSession(selectedSession.sessionId, 'resume-detail', selectedSession.projectPath)">
-              Resume →
-            </button>
-            <span x-show="exportMsg" x-text="exportMsg" style="font-size:12px;color:var(--green)" x-transition></span>
           </div>
         </div>
 
+
         <div class="chat-messages">
           <template x-if="loadingDetail">
             <div class="loading"><div class="spinner"></div> Loading conversation…</div>
@@ -2528,8 +2546,10 @@
           <template x-if="selectedPlan">
             <div style="display:flex;align-items:center;gap:8px;margin-left:auto">
               <span class="save-msg" x-show="planExportMsg" x-text="planExportMsg"></span>
+              <span class="save-msg" x-show="planShareMsg" x-text="planShareMsg"></span>
               <button class="btn btn-sm btn-outline" @click="copyPlanMd()">Copy MD</button>
               <button class="btn btn-sm btn-outline" @click="downloadPlan()">Download</button>
+              <button class="btn btn-sm" style="background:var(--canvas-2);color:var(--ink)" title="Publish to GitHub Gist and copy public URL" @click="sharePlan(selectedPlan.filename)" :disabled="!!planShareMsg">Share</button>
               <button class="btn btn-sm" style="background:var(--red-dim,#3a1a1a);color:var(--red);border:1px solid var(--red)" @click="deletePlan()">Delete</button>
             </div>
           </template>
@@ -2575,6 +2595,103 @@
       </div>
     </template>
 
+    <!-- Notes view -->
+    <template x-if="view === 'notes' && !selectedSession">
+      <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
+        <div class="topbar">
+          <span class="topbar-title">Notes</span>
+          <span style="font-size:11px;color:var(--ink-3);padding:2px 8px;background:var(--canvas-2);border:1px solid var(--rule);border-radius:4px" title="These are your personal notes — Claude doesn't read or use them as context. They're only for you.">Your notepad · not Claude's memory</span>
+          <input class="search-input" type="text" placeholder="Search notes…" x-model="noteSearch" style="font-size:12px;width:200px;padding:4px 10px" />
+          <span style="font-size:11px;color:var(--ink-3)" x-show="personalNotes.length>0" x-text="personalNotes.length + ' notes'"></span>
+          <div style="display:flex;align-items:center;gap:8px;margin-left:auto">
+            <template x-if="selectedNote && noteEditing">
+              <div style="display:flex;align-items:center;gap:8px">
+                <span class="save-msg" x-show="noteMsg==='Saved'" x-text="noteMsg"></span>
+                <span class="err-msg" x-show="noteMsg && noteMsg!=='Saved'" x-text="noteMsg"></span>
+                <button class="btn btn-sm btn-outline" @click="noteEditing=false">Cancel</button>
+                <button class="btn btn-primary btn-sm" @click="savePersonalNote()" :disabled="noteSaving" x-text="noteSaving?'Saving…':'Save'"></button>
+              </div>
+            </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" 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>
+          </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()" />
+            <textarea class="settings-input" placeholder="Content (optional)…" x-model="noteNewBody" rows="3" style="width:100%;resize:vertical;font-size:12px;font-family:inherit"></textarea>
+            <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-primary btn-sm" @click="createPersonalNote()" :disabled="noteSaving||!noteNewTitle.trim()">Create</button>
+            </div>
+          </div>
+        </template>
+
+        <div style="flex:1;overflow:hidden;">
+          <template x-if="personalNotesLoading"><div class="loading"><div class="spinner"></div> Loading…</div></template>
+          <template x-if="!personalNotesLoading && noteClaudeInstalled === false">
+            <div style="margin:12px 20px;padding:10px 14px;background:var(--canvas-2);border:1px solid var(--rule);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px">
+              <div>
+                <div style="font-size:12px;font-weight:600;margin-bottom:2px">Claude doesn't know about Notes yet</div>
+                <div style="font-size:11px;color:var(--ink-3)">Add one instruction to your CLAUDE.md so Claude can save notes when you ask.</div>
+              </div>
+              <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
+                <span x-show="noteSetupMsg" x-text="noteSetupMsg" style="font-size:11px;color:var(--green)"></span>
+                <button class="btn btn-primary btn-sm" @click="setupClaudeNotes()" :disabled="!!noteSetupMsg">Set up</button>
+              </div>
+            </div>
+          </template>
+          <template x-if="!personalNotesLoading && personalNotes.length === 0">
+            <div class="empty"><div class="empty-mark">✎</div>No notes yet. Create one or ask Claude to save one for you.</div>
+          </template>
+          <template x-if="!personalNotesLoading && personalNotes.length > 0">
+            <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>
+                    <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>
+                    </div>
+                  </div>
+                </template>
+              </div>
+              <div class="resize-handle" @mousedown.prevent="startResize($event)"></div>
+              <div class="memory-detail">
+                <template x-if="!selectedNote"><div class="memory-empty"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>Select a note</div></template>
+                <template x-if="selectedNote && !noteEditing">
+                  <div>
+                    <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">
+                        <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>
+                  </div>
+                </template>
+                <template x-if="selectedNote && noteEditing">
+                  <div style="display:flex;flex-direction:column;height:100%;gap:10px">
+                    <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>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+
     <!-- Memory view -->
     <template x-if="view === 'memory' && !selectedSession">
       <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">
@@ -3380,6 +3497,58 @@
                   </div>
                   <template x-if="config.settings?.statusLine?.command"><div class="config-row"><div class="config-key">Status line</div><div class="config-val" x-text="config.settings.statusLine.command"></div></div></template>
                 </div>
+
+                <div class="config-section">
+                  <div class="config-section-title" style="display:flex;align-items:center;justify-content:space-between">
+                    Sharing
+                    <div style="display:flex;align-items:center;gap:8px">
+                      <span class="save-msg" x-show="githubTokenMsg==='Saved'" x-text="githubTokenMsg"></span>
+                      <span class="err-msg"  x-show="githubTokenMsg && githubTokenMsg!=='Saved'" x-text="githubTokenMsg"></span>
+                      <button class="btn btn-primary btn-sm" @click="saveGithubToken()" :disabled="githubTokenSaving || !githubTokenDraft">
+                        <span x-text="githubTokenSaving?'Saving…':'Save'"></span>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="config-row">
+                    <div class="config-key">GitHub token</div>
+                    <div class="config-val" style="flex:1">
+                      <input type="password" class="settings-input" x-model="githubTokenDraft" placeholder="ghp_…" style="width:100%;font-family:monospace" />
+                      <div style="font-size:11px;color:var(--ink-3);margin-top:4px">
+                        <template x-if="githubTokenSet">
+                          <span>Token saved (<span x-text="githubTokenMasked"></span>). Enter a new value to replace it.</span>
+                        </template>
+                        <template x-if="!githubTokenSet">
+                          <span>Required to publish sessions and plans as public GitHub Gists. Generate a classic token at github.com/settings/tokens with the <strong>gist</strong> scope checked.</span>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="config-section">
+                  <div class="config-section-title">Integrations</div>
+                  <div class="config-row">
+                    <div class="config-key">Notes</div>
+                    <div class="config-val" style="flex:1">
+                      <div style="display:flex;align-items:center;gap:10px">
+                        <template x-if="noteClaudeInstalled">
+                          <span style="font-size:12px;color:var(--green);display:flex;align-items:center;gap:4px">
+                            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="2"><polyline points="2 7 5 10 11 3"/></svg>
+                            Enabled
+                          </span>
+                        </template>
+                        <template x-if="!noteClaudeInstalled">
+                          <div style="display:flex;align-items:center;gap:8px">
+                            <span x-show="noteSetupMsg" x-text="noteSetupMsg" style="font-size:12px;color:var(--green)"></span>
+                            <button class="btn btn-primary btn-sm" @click="setupClaudeNotes()" :disabled="!!noteSetupMsg">Set up</button>
+                          </div>
+                        </template>
+                      </div>
+                      <div style="font-size:11px;color:var(--ink-3);margin-top:4px">Adds an instruction to your CLAUDE.md so Claude can save notes when you ask. Notes are your personal notepad — Claude won't read them as context.</div>
+                    </div>
+                  </div>
+                </div>
+
               </div>
             </div>
           </template>
@@ -4165,8 +4334,24 @@
         exportDropOpen: false,
         exportMsg: '',
         cleanMode: true,
+
         planExportMsg: '',
         planExportOpen: false,
+        planShareMsg: '',
+        personalNotes: [],
+        personalNotesLoading: false,
+        selectedNote: null,
+        noteEditing: false,
+        noteTitleDraft: '',
+        noteBodyDraft: '',
+        noteMsg: '',
+        noteSaving: false,
+        noteSearch: '',
+        noteCreating: false,
+        noteNewTitle: '',
+        noteNewBody: '',
+        noteClaudeInstalled: null,
+        noteSetupMsg: '',
         sidebarW: parseInt(localStorage.getItem('cm:sidebarW') || '260'),
         historyEntries: [],
         historyLoading: false,
@@ -4210,6 +4395,13 @@
         settingsDraft: { model: '', language: '', voiceEnabled: false, outputStyle: '', effortLevel: '', defaultMode: '' },
         settingsSaving: false,
         settingsMsg: '',
+        githubTokenDraft: '',
+        githubTokenSet: false,
+        githubTokenMasked: '',
+        githubTokenSaving: false,
+        githubTokenMsg: '',
+        shareMsg: '',
+        shareUrl: '',
         permsDraft: { allow: [], deny: [], ask: [] },
         permsNewRule: { allow: '', deny: '', ask: '' },
         ruleBuilder: { type: 'deny', tool: 'Bash', specifier: '', pathType: './' },
@@ -4325,16 +4517,37 @@
           this.loadCosts();
           this.loadStatus();
           this.loadInsights();
+          // Load counts for nav badges without blocking
+          this.loadPlans();
+          this.loadAgents();
+          this.loadTools();
+          this.loadMemory();
+          this.loadPersonalNotes();
+          // Parse URL hash for direct links
+          const hash = window.location.hash;
+          const mSession = hash.match(/^#\/session\/([^/]+)\/([^/]+)$/);
+          const mNote = hash.match(/^#\/note\/(.+)$/);
+          if (mSession) { this.view = 'sessions'; await this.openSessionById(mSession[2], mSession[1]); }
+          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]);
+            if (note) { this.view = 'notes'; this.selectedNote = note; }
+          }
+          // Clear hash when closing
+          this.$watch('selectedSession', v => { if (!v) { if (window.location.hash.startsWith('#/session/')) window.location.hash = ''; } });
+          this.$watch('selectedNote', v => { if (!v) { if (window.location.hash.startsWith('#/note/')) window.location.hash = ''; } });
         },
 
         initView(v) {
           if (v === 'dashboard')            { this.loadStats(); this.loadInsights(); }
           if (v === 'projects')             { this.loadProjects(); }
           if (v === 'memory')               { this.loadMemory(); }
+          if (v === 'notes')                { this.loadPersonalNotes(); }
           if (v === 'plans')                { this.loadPlans(); }
           if (v === 'commands' || v === 'skills') { this.loadTools(); }
           if (v === 'agents') { this.loadAgents(); }
-          if (v === 'config' || v === 'instructions' || v === 'permissions' || v === 'hooks') { this.loadConfig(); }
+          if (v === 'config' || v === 'instructions' || v === 'permissions' || v === 'hooks') { this.loadConfig(); this.checkNoteClaudeStatus(); }
         },
 
         async loadProjects() {
@@ -4425,6 +4638,8 @@
           this.selectedSession = session;
           this.loadingDetail = true;
           this.sessionDetail = null;
+
+          window.location.hash = `#/session/${session.projectDir}/${session.sessionId}`;
           const data = await fetch(`/api/sessions/${session.projectDir}/${session.sessionId}`).then(r => r.json());
           this.sessionDetail = data;
           this.loadingDetail = false;
@@ -4439,6 +4654,7 @@
           await this.openSession(s);
         },
 
+
         async resumeSession(sessionId, btnId, projectPath) {
           const cmd = projectPath
             ? `cd "${projectPath}" && claude -r ${sessionId}`
@@ -5147,6 +5363,136 @@
           } catch (e) { alert('Error: ' + e.message); }
         },
 
+        async saveGithubToken() {
+          this.githubTokenSaving = true; this.githubTokenMsg = '';
+          try {
+            const r = await fetch('/api/app-settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ githubToken: this.githubTokenDraft }) });
+            if (!r.ok) throw new Error((await r.json()).error);
+            this.githubTokenSet = !!this.githubTokenDraft;
+            this.githubTokenMasked = this.githubTokenDraft ? this.githubTokenDraft.slice(0,4) + '…' + this.githubTokenDraft.slice(-4) : '';
+            this.githubTokenDraft = '';
+            this.githubTokenMsg = 'Saved';
+            setTimeout(() => this.githubTokenMsg = '', 2000);
+          } catch (e) { this.githubTokenMsg = 'Error: ' + e.message; }
+          this.githubTokenSaving = false;
+        },
+
+        async shareSession() {
+          this.shareMsg = 'Sharing…'; this.shareUrl = '';
+          try {
+            const r = await fetch(`/api/share/session/${this.selectedSession.projectDir}/${this.selectedSession.sessionId}`, { method: 'POST' });
+            const data = await r.json();
+            if (!r.ok) throw new Error(data.error);
+            this.shareUrl = data.url;
+            await navigator.clipboard.writeText(data.url);
+            this.shareMsg = 'Link copied!';
+          } catch (e) { this.shareMsg = e.message; }
+          setTimeout(() => { this.shareMsg = ''; this.shareUrl = ''; }, 5000);
+        },
+
+        async sharePlan(filename) {
+          this.planShareMsg = 'Sharing…';
+          try {
+            const r = await fetch(`/api/share/plan/${filename}`, { method: 'POST' });
+            const data = await r.json();
+            if (!r.ok) throw new Error(data.error);
+            await navigator.clipboard.writeText(data.url);
+            this.planShareMsg = 'Link copied!';
+          } catch (e) { this.planShareMsg = e.message; }
+          setTimeout(() => this.planShareMsg = '', 5000);
+        },
+
+        async loadPersonalNotes() {
+          if (this.personalNotesLoading) return;
+          this.personalNotesLoading = true;
+          const [notes, status] = await Promise.all([
+            fetch('/api/notes').then(r => r.json()).catch(() => []),
+            fetch('/api/notes/claude-md-status').then(r => r.json()).catch(() => ({})),
+          ]);
+          this.personalNotes = notes;
+          this.noteClaudeInstalled = status.installed ?? null;
+          this.personalNotesLoading = false;
+        },
+
+        async checkNoteClaudeStatus() {
+          const s = await fetch('/api/notes/claude-md-status').then(r => r.json()).catch(() => ({}));
+          this.noteClaudeInstalled = s.installed ?? null;
+        },
+
+        async setupClaudeNotes() {
+          this.noteSetupMsg = 'Installing…';
+          try {
+            const r = await fetch('/api/notes/setup-claude', { method: 'POST' });
+            const d = await r.json();
+            this.noteClaudeInstalled = true;
+            this.noteSetupMsg = d.alreadyInstalled ? 'Already installed' : 'Installed!';
+          } catch (e) { this.noteSetupMsg = 'Error: ' + e.message; }
+          setTimeout(() => this.noteSetupMsg = '', 3000);
+        },
+
+        async createPersonalNote() {
+          if (!this.noteNewTitle.trim()) return;
+          this.noteSaving = true;
+          try {
+            const note = await fetch('/api/notes', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ title: this.noteNewTitle, content: this.noteNewBody }),
+            }).then(r => r.json());
+            this.personalNotes.unshift(note);
+            this.selectedNote = note;
+            this.noteCreating = false;
+            this.noteNewTitle = '';
+            this.noteNewBody = '';
+            this.noteEditing = false;
+          } catch (e) { this.noteMsg = 'Error: ' + e.message; }
+          this.noteSaving = false;
+        },
+
+        async savePersonalNote() {
+          if (!this.selectedNote) return;
+          this.noteSaving = true; this.noteMsg = '';
+          try {
+            const updated = await fetch(`/api/notes/${this.selectedNote.filename}`, {
+              method: 'PUT',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ title: this.noteTitleDraft, content: this.noteBodyDraft }),
+            }).then(r => r.json());
+            const idx = this.personalNotes.findIndex(n => n.filename === this.selectedNote.filename);
+            if (idx !== -1) this.personalNotes[idx] = updated;
+            this.selectedNote = updated;
+            this.noteEditing = false;
+            this.noteMsg = 'Saved';
+            setTimeout(() => this.noteMsg = '', 2000);
+          } catch (e) { this.noteMsg = 'Error: ' + e.message; }
+          this.noteSaving = false;
+        },
+
+        async deletePersonalNote() {
+          if (!this.selectedNote || !confirm(`Delete "${this.selectedNote.title}"?`)) return;
+          await fetch(`/api/notes/${this.selectedNote.filename}`, { method: 'DELETE' });
+          this.personalNotes = this.personalNotes.filter(n => n.filename !== this.selectedNote.filename);
+          this.selectedNote = null;
+          this.noteEditing = false;
+        },
+
+        async saveNoteFromSession() {
+          const title = this.selectedSession?.firstPrompt?.slice(0, 60) || 'Session note';
+          const sessionId = this.selectedSession?.sessionId || '';
+          const note = await fetch('/api/notes', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title, content: '', session: sessionId }),
+          }).then(r => r.json());
+          this.personalNotes.unshift(note);
+          this.selectedNote = note;
+          this.noteEditing = true;
+          this.noteTitleDraft = note.title;
+          this.noteBodyDraft = note.content;
+          this.view = 'notes';
+          this.selectedSession = null;
+        },
+
         async saveSettings() {
           this.settingsSaving = true; this.settingsMsg = '';
           try {
@@ -5576,6 +5922,10 @@
           const proj = this.projects?.find(p => p.dirName === this.configProject);
           const pp = proj?.projectPath ? '?projectPath=' + encodeURIComponent(proj.projectPath) : '';
           this.config = await fetch('/api/config' + pp).then(r => r.json());
+          const as = await fetch('/api/app-settings').then(r => r.json()).catch(() => ({}));
+          this.githubTokenSet = as.githubTokenSet || false;
+          this.githubTokenMasked = as.githubTokenMasked || '';
+          this.githubTokenDraft = '';
           this.settingsDraft = {
             model:        this.config.settings?.model        || '',
             language:     this.config.settings?.language     || '',

package/server.js

@@ -1767,6 +1767,234 @@ app.get('/api/sessions/:project/:sessionId/export', async (req, res) => {
   } catch (e) { res.status(500).json({ error: e.message }); }
 });
 
+// ─── App settings (claude-home specific, not Claude's settings.json) ─────────
+const APP_SETTINGS_FILE = path.join(DATA_DIR, 'app-settings.json');
+
+function readAppSettings() {
+  try { return JSON.parse(fs.readFileSync(APP_SETTINGS_FILE, 'utf8')); } catch { return {}; }
+}
+
+app.get('/api/app-settings', (req, res) => {
+  const s = readAppSettings();
+  // Mask token for display
+  const masked = s.githubToken ? s.githubToken.slice(0, 4) + '…' + s.githubToken.slice(-4) : '';
+  res.json({ githubTokenSet: !!s.githubToken, githubTokenMasked: masked });
+});
+
+app.put('/api/app-settings', (req, res) => {
+  try {
+    const current = readAppSettings();
+    const { githubToken } = req.body;
+    if (githubToken !== undefined) current.githubToken = githubToken;
+    ensureDataDir();
+    fs.writeFileSync(APP_SETTINGS_FILE, JSON.stringify(current, null, 2), 'utf8');
+    res.json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+// ─── Gist sharing ─────────────────────────────────────────────────────────────
+function postGist(token, description, filename, content) {
+  return new Promise((resolve, reject) => {
+    const body = JSON.stringify({ description, public: true, files: { [filename]: { content } } });
+    const opts = {
+      hostname: 'api.github.com',
+      path: '/gists',
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        'User-Agent': 'claude-home',
+        'Accept': 'application/vnd.github+json',
+        'Content-Length': Buffer.byteLength(body),
+      },
+    };
+    const req = https.request(opts, res => {
+      let data = '';
+      res.on('data', c => data += c);
+      res.on('end', () => {
+        try {
+          const json = JSON.parse(data);
+          if (json.html_url) resolve(json.html_url);
+          else {
+            const msg = json.message || 'GitHub API error';
+            const hint = (msg === 'Not Found' || msg === 'Bad credentials')
+              ? `${msg} — check your token has the "gist" scope`
+              : msg;
+            reject(new Error(hint));
+          }
+        } catch { reject(new Error('Invalid response from GitHub')); }
+      });
+    });
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
+}
+
+app.post('/api/share/session/:project/:sessionId', async (req, res) => {
+  const { githubToken } = readAppSettings();
+  if (!githubToken) return res.status(400).json({ error: 'GitHub token not configured. Add it in Settings → Sharing.' });
+  const { project, sessionId } = req.params;
+  const filePath = path.join(PROJECTS_DIR, project, `${sessionId}.jsonl`);
+  if (!filePath.startsWith(PROJECTS_DIR)) return res.status(400).json({ error: 'invalid path' });
+  try {
+    const messages = await parseJsonl(filePath);
+    const lines = [`# Session ${sessionId}`, `**Project:** ${project}`, ''];
+    for (const m of messages) {
+      if (m.type === 'user') {
+        const text = typeof m.message?.content === 'string' ? m.message.content
+          : (m.message?.content || []).filter(b => b.type === 'text').map(b => b.text).join('\n');
+        if (text.trim()) lines.push(`## Human\n\n${text.trim()}`, '');
+      } else if (m.type === 'assistant') {
+        const text = typeof m.message?.content === 'string' ? m.message.content
+          : (m.message?.content || []).filter(b => b.type === 'text').map(b => b.text).join('\n');
+        if (text.trim()) lines.push(`## Claude\n\n${text.trim()}`, '');
+      }
+    }
+    const url = await postGist(githubToken, `Claude session — ${project}`, `${sessionId}.md`, lines.join('\n'));
+    res.json({ url });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/share/plan/:filename', async (req, res) => {
+  const { githubToken } = readAppSettings();
+  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);
+  try {
+    const content = fs.readFileSync(filePath, 'utf8');
+    const titleMatch = content.match(/^#\s+(.+)$/m);
+    const description = titleMatch ? titleMatch[1].trim() : filename;
+    const url = await postGist(githubToken, `Claude plan — ${description}`, filename, content);
+    res.json({ url });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+// ─── Personal Notes ───────────────────────────────────────────────────────────
+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);
+  const stat = fs.statSync(filePath);
+  const raw = fs.readFileSync(filePath, 'utf8');
+  const { meta, content: body } = parseFrontmatter(raw);
+  return {
+    filename,
+    title: meta.title || filename.replace('.md', ''),
+    date: meta.date || stat.mtimeMs,
+    session: meta.session || '',
+    content: body.trim(),
+    modified: new Date(stat.mtimeMs).toISOString(),
+  };
+}
+
+const NOTES_CLAUDE_MD_SNIPPET = `
+## 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:
+   - 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: <current session ID if known>
+     ---
+
+     <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>"
+
+The notes directory may not exist yet — create it if needed with \`mkdir -p\`.
+`;
+
+app.get('/api/notes/claude-md-status', (req, res) => {
+  const claudeMdPath = path.join(os.homedir(), '.claude', 'CLAUDE.md');
+  try {
+    const content = fs.existsSync(claudeMdPath) ? fs.readFileSync(claudeMdPath, 'utf8') : '';
+    res.json({ installed: content.includes('Personal Notes') });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+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');
+  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');
+    // 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 rule = `Write(${path.join(os.homedir(), '.claude', 'claude-home', 'notes', '*')})`;
+      if (!settings.permissions.allow.includes(rule)) {
+        settings.permissions.allow.push(rule);
+        fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n', 'utf8');
+      }
+    } catch {}
+    res.json({ ok: true });
+  } 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));
+    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;
+  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);
+  let filename = `${datePrefix}-${slug}.md`;
+  // avoid collisions
+  let i = 1;
+  while (fs.existsSync(path.join(NOTES_DIR, filename))) { filename = `${datePrefix}-${slug}-${i++}.md`; }
+  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));
+});
+
+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);
+  if (!filePath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
+  const { title, content } = req.body;
+  try {
+    const existing = parseNoteFile(filename);
+    const sessionLine = existing.session ? `\nsession: ${existing.session}` : '';
+    const raw = `---\ntitle: ${title || existing.title}\ndate: ${existing.date}${sessionLine}\n---\n\n${content ?? existing.content}`;
+    fs.writeFileSync(filePath, raw, 'utf8');
+    res.json(parseNoteFile(filename));
+  } 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);
+  if (!filePath.startsWith(NOTES_DIR)) return res.status(400).json({ error: 'invalid path' });
+  try {
+    if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+    res.json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 // ─── Start ────────────────────────────────────────────────────────────────────
 
 function startServer(port) {