-
#
+
#
SENSITIVE
@@ -358,7 +437,7 @@
- Importance:
+ Importance:
diff --git a/src/claude_memory/ui/static/js/dashboard.js b/src/claude_memory/ui/static/js/dashboard.js
index 7e15a0d..efb5695 100644
--- a/src/claude_memory/ui/static/js/dashboard.js
+++ b/src/claude_memory/ui/static/js/dashboard.js
@@ -9,7 +9,7 @@ function dashboardComponent() {
this.loading = true;
try {
this.stats = await api.get('/api/stats');
- this.$nextTick(() => this.renderCharts());
+ setTimeout(() => this.renderCharts(), 50);
} catch (e) {
console.error('Failed to load stats:', e);
}
@@ -36,13 +36,13 @@ function dashboardComponent() {
type: 'doughnut',
data: {
labels,
- datasets: [{ data, backgroundColor: colors, borderColor: '#1e293b', borderWidth: 2 }],
+ datasets: [{ data, backgroundColor: colors, borderColor: '#252019', borderWidth: 2 }],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
- legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 12 } },
+ legend: { position: 'bottom', labels: { color: '#c4b8a8', padding: 12 } },
},
},
});
@@ -63,7 +63,7 @@ function dashboardComponent() {
datasets: [{
label: 'Memories',
data,
- backgroundColor: '#6366f1',
+ backgroundColor: '#d4a04a',
borderRadius: 4,
}],
},
@@ -71,8 +71,8 @@ function dashboardComponent() {
responsive: true,
maintainAspectRatio: false,
scales: {
- x: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' } },
- y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' }, beginAtZero: true },
+ x: { ticks: { color: '#c4b8a8' }, grid: { color: '#3a3228' } },
+ y: { ticks: { color: '#c4b8a8' }, grid: { color: '#3a3228' }, beginAtZero: true },
},
plugins: { legend: { display: false } },
},
@@ -97,16 +97,16 @@ function dashboardComponent() {
{
label: 'Created',
data: created,
- borderColor: '#22c55e',
- backgroundColor: 'rgba(34,197,94,0.1)',
+ borderColor: '#7a8b6f',
+ backgroundColor: 'rgba(122,139,111,0.1)',
fill: true,
tension: 0.3,
},
{
label: 'Updated',
data: updated,
- borderColor: '#f59e0b',
- backgroundColor: 'rgba(245,158,11,0.1)',
+ borderColor: '#d4a04a',
+ backgroundColor: 'rgba(212,160,74,0.1)',
fill: true,
tension: 0.3,
},
@@ -116,10 +116,10 @@ function dashboardComponent() {
responsive: true,
maintainAspectRatio: false,
scales: {
- x: { ticks: { color: '#94a3b8', maxTicksLimit: 10 }, grid: { color: '#334155' } },
- y: { ticks: { color: '#94a3b8' }, grid: { color: '#334155' }, beginAtZero: true },
+ x: { ticks: { color: '#c4b8a8', maxTicksLimit: 10 }, grid: { color: '#3a3228' } },
+ y: { ticks: { color: '#c4b8a8' }, grid: { color: '#3a3228' }, beginAtZero: true },
},
- plugins: { legend: { labels: { color: '#94a3b8' } } },
+ plugins: { legend: { labels: { color: '#c4b8a8' } } },
},
});
},
@@ -128,8 +128,8 @@ function dashboardComponent() {
function generateColors(count) {
const palette = [
- '#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#06b6d4',
- '#ec4899', '#8b5cf6', '#14b8a6', '#f97316', '#64748b',
+ '#d4a04a', '#7a8b6f', '#c4785a', '#8b7355', '#6b8e8e',
+ '#b8860b', '#9aad82', '#d4764a', '#7a6b55', '#5f8a8a',
];
const result = [];
for (let i = 0; i < count; i++) result.push(palette[i % palette.length]);
diff --git a/src/claude_memory/ui/static/js/graph.js b/src/claude_memory/ui/static/js/graph.js
index 97fa2c6..6fa4d60 100644
--- a/src/claude_memory/ui/static/js/graph.js
+++ b/src/claude_memory/ui/static/js/graph.js
@@ -82,7 +82,7 @@ function graphComponent() {
});
const categoryColors = {};
- const palette = ['#6366f1', '#22c55e', '#f59e0b', '#ef4444', '#06b6d4', '#ec4899', '#8b5cf6', '#14b8a6', '#f97316', '#64748b'];
+ const palette = ['#d4a04a', '#7a8b6f', '#c4785a', '#8b7355', '#6b8e8e', '#b8860b', '#9aad82', '#d4764a', '#7a6b55', '#5f8a8a'];
this.categories.forEach((c, i) => categoryColors[c] = palette[i % palette.length]);
const svg = d3.select(container)
@@ -110,8 +110,8 @@ function graphComponent() {
.selectAll('line')
.data(links)
.join('line')
- .attr('stroke', '#334155')
- .attr('stroke-opacity', 0.4)
+ .attr('stroke', '#3a3228')
+ .attr('stroke-opacity', 0.5)
.attr('stroke-width', 1);
const node = g.append('g')
@@ -119,8 +119,8 @@ function graphComponent() {
.data(nodes)
.join('circle')
.attr('r', d => 5 + d.importance * 15)
- .attr('fill', d => categoryColors[d.category] || '#64748b')
- .attr('stroke', '#1e293b')
+ .attr('fill', d => categoryColors[d.category] || '#8b7355')
+ .attr('stroke', '#252019')
.attr('stroke-width', 1.5)
.attr('cursor', 'pointer')
.on('click', (event, d) => {
diff --git a/src/claude_memory/ui/static/js/memories.js b/src/claude_memory/ui/static/js/memories.js
index 5c37495..167eff7 100644
--- a/src/claude_memory/ui/static/js/memories.js
+++ b/src/claude_memory/ui/static/js/memories.js
@@ -15,9 +15,17 @@ function memoriesBrowser() {
sharesExpanded: null,
sharesData: [],
deleteConfirm: null,
+ // Add memory
+ showAddForm: false,
+ addForm: { content: '', category: 'facts', tags: '', importance: 0.5 },
+ // Share memory
+ allUsers: [],
+ showShareForm: null,
+ shareForm: { user: '', permission: 'read' },
+ shareUserFilter: '',
async init() {
- await Promise.all([this.loadMemories(), this.loadShared(), this.loadCategories()]);
+ await Promise.all([this.loadMemories(), this.loadShared(), this.loadCategories(), this.loadUsers()]);
},
async loadCategories() {
@@ -27,6 +35,13 @@ function memoriesBrowser() {
} catch (e) { console.error('Failed to load categories:', e); }
},
+ async loadUsers() {
+ try {
+ const data = await api.get('/api/users');
+ this.allUsers = data.users;
+ } catch (e) { console.error('Failed to load users:', e); }
+ },
+
async loadMemories() {
this.loading = true;
try {
@@ -68,6 +83,7 @@ function memoriesBrowser() {
this.expandedId = this.expandedId === id ? null : id;
this.editingId = null;
this.sharesExpanded = null;
+ this.showShareForm = null;
},
startEdit(mem) {
@@ -125,6 +141,72 @@ function memoriesBrowser() {
} catch (e) { console.error('Failed to load shares:', e); }
},
+ // Add memory
+ resetAddForm() {
+ this.addForm = { content: '', category: 'facts', tags: '', importance: 0.5 };
+ this.showAddForm = false;
+ },
+
+ get addFormCharCount() {
+ return (this.addForm.content || '').length;
+ },
+
+ async addMemory() {
+ if (!this.addForm.content.trim()) return;
+ try {
+ await api.post('/api/memories', {
+ content: this.addForm.content,
+ category: this.addForm.category,
+ tags: this.addForm.tags,
+ importance: parseFloat(this.addForm.importance),
+ });
+ this.resetAddForm();
+ this.offset = 0;
+ await Promise.all([this.loadMemories(), this.loadCategories()]);
+ } catch (e) {
+ alert('Failed to add memory: ' + e.message);
+ }
+ },
+
+ // Share memory
+ openShareForm(memId) {
+ this.showShareForm = memId;
+ this.shareForm = { user: '', permission: 'read' };
+ this.shareUserFilter = '';
+ },
+
+ closeShareForm() {
+ this.showShareForm = null;
+ },
+
+ get filteredUsers() {
+ const q = this.shareForm.user.toLowerCase();
+ if (!q) return this.allUsers.slice(0, 10);
+ return this.allUsers.filter(u => u.toLowerCase().includes(q));
+ },
+
+ selectShareUser(user) {
+ this.shareForm.user = user;
+ },
+
+ async shareMemory(memId) {
+ if (!this.shareForm.user.trim()) return;
+ try {
+ await api.post(`/api/memories/${memId}/share`, {
+ shared_with: this.shareForm.user,
+ permission: this.shareForm.permission,
+ });
+ this.closeShareForm();
+ // Refresh shares if expanded
+ if (this.sharesExpanded === memId) {
+ await this.toggleShares(memId);
+ await this.toggleShares(memId);
+ }
+ } catch (e) {
+ alert('Share failed: ' + e.message);
+ }
+ },
+
preview(content, len = 100) {
if (!content) return '';
return content.length > len ? content.substring(0, len) + '...' : content;