/gi, '')
- .replace(/\son\w+="[^"]*"/gi, '');
-}
-
-function highlightTextNodes(rootEl, query) {
- if (!query) return;
- const q = query.toLowerCase();
- const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_TEXT, null);
- const nodes = [];
- while (walker.nextNode()) nodes.push(walker.currentNode);
- for (const node of nodes) {
- const text = node.nodeValue;
- if (!text) continue;
- const lower = text.toLowerCase();
- if (!lower.includes(q)) continue;
- const frag = document.createDocumentFragment();
- let last = 0, i = lower.indexOf(q);
- while (i !== -1) {
- if (i > last) frag.appendChild(document.createTextNode(text.slice(last, i)));
- const mark = document.createElement('mark');
- mark.textContent = text.slice(i, i + q.length);
- frag.appendChild(mark);
- last = i + q.length;
- i = lower.indexOf(q, last);
- }
- if (last < text.length) frag.appendChild(document.createTextNode(text.slice(last)));
- node.parentNode.replaceChild(frag, node);
- }
-}
-
-function renderMarkdown(text, opts = {}) {
- if (text == null) return '';
- const html = sanitizeMarkdown(marked.parse(text));
- const cls = opts.variant === 'msg' ? 'markdown-msg'
- : opts.variant === 'compact' ? 'markdown-compact'
- : 'markdown-body';
- const container = document.createElement('div');
- container.className = cls;
- container.innerHTML = html;
- if (opts.query) highlightTextNodes(container, opts.query.trim());
- return container.outerHTML;
-}
-
-// --- DOM helpers ---
-
-const $ = sel => document.querySelector(sel);
-
-function ensureVisible(el, wrapSel) {
- const wrap = $(wrapSel);
- if (!wrap || !el) return;
- const elRect = el.getBoundingClientRect();
- const wrapRect = wrap.getBoundingClientRect();
- if (elRect.top < wrapRect.top + 30) wrap.scrollTop -= (wrapRect.top + 30 - elRect.top);
- else if (elRect.bottom > wrapRect.bottom - 10) wrap.scrollTop += (elRect.bottom - wrapRect.bottom + 10);
-}
-
-// --- Data filtering (mirrors render.js) ---
-
-function dominantRowStatus(m) {
- if (m.health === 'broken') return 'broken';
- if (m.health === 'partial') return 'partial';
- if (m.archived) return 'archived';
- return null;
-}
-
-function statusGlyphHTML(status) {
- if (!status) return '';
- const glyphs = {
- broken: `${glyphs[status] || ''} `;
-}
-
-function formatProjectLabel(slug) {
- if (!slug) return '(no project)';
- const session = state.sessions.find(s => s.project === slug && s.project_path);
- if (session?.project_path) {
- const parts = session.project_path.split('/');
- return parts.slice(-2).join('/');
- }
- return slug.replace(/^-/, '');
-}
-
-export function visibleMemories() {
- const q = state.query.trim().toLowerCase();
- return state.memories
- .filter(m => {
- if (state.view === 'archived') return m.archived;
- return !m.archived;
- })
- .filter(m => state.projectFilter === 'all' || m.project === state.projectFilter)
- .filter(m => !q || (m.path || '').toLowerCase().includes(q) || (m.summary || '').toLowerCase().includes(q))
- .sort((a, b) => state.sortDesc ? b.ts - a.ts : a.ts - b.ts);
-}
-
-// --- Memory list ---
-
-export function renderMemoryList() {
- const items = visibleMemories();
- const list = $('#list');
- if (!list) return;
- if (!items.length) {
- list.innerHTML = `No memories${state.view === 'archived' ? ' archived' : ''} here.${state.query ? 'Try a different search term.' : 'Press / to search.'}
`;
- return;
- }
- list.innerHTML = items.map(m => renderMemoryRow(m)).join('');
- if (state.cursorId) {
- const cursorEl = list.querySelector(`.row[data-id="${state.cursorId}"]`);
- if (cursorEl) ensureVisible(cursorEl, '#list-wrap');
- }
-}
-
-function renderMemoryRow(m) {
- const isCursor = state.cursorId === m.id;
- const isSelected = state.selection.has(m.id);
- const q = state.query.trim();
- const showProjectPrefix = state.projectFilter === 'all';
- const status = dominantRowStatus(m);
- const actionLabel = m.archived
- ? `RestoreD `
- : `ArchiveD `;
- return `
-
-
-
-
-
- ${statusGlyphHTML(status)}
- ${showProjectPrefix ? `${escapeHTML(formatProjectLabel(m.project))} / ` : ''}
- ${highlightPlain(m.path || '', q)}
-
-
${highlightPlain(m.summary || '', q)}
-
-
-
${fmtListTime(m.ts)}
-
${actionLabel}
-
-
- ${m.session_id ? `
- ${FOLDER_SVG}Source session
- ${fmtRelative(m.ts)}
-
- `;
-
- let markdownHTML;
- if (m.markdown == null) {
- markdownHTML = `File not found or empty.
`;
- } else if (state.showSource) {
- markdownHTML = `${escapeHTML(m.markdown)} `;
- } else {
- markdownHTML = renderMarkdown(m.markdown, { variant: 'body' });
- }
-
- detail.innerHTML = `
-
-
-
- Body
-
- ${state.showSource ? 'Show rendered' : 'Show source'}
-
-
- ${markdownHTML}
-
- BackEsc
-
- ${m.archived ? 'Restore' : 'Archive'}D
-
-
- `;
-
- // Wire event listeners via registry (avoids circular imports)
- $('#detail-back')?.addEventListener('click', () => {
- if (registry.exitDetail) registry.exitDetail();
- });
- $('#detail-archive')?.addEventListener('click', () => {
- if (m.archived) { if (registry.restore) registry.restore([m.id]); }
- else { if (registry.archive) registry.archive([m.id]); }
- });
- detail.querySelectorAll('[data-action]').forEach(el => {
- el.addEventListener('click', e => {
- e.stopPropagation();
- if (el.dataset.action === 'toggle-source') {
- state.showSource = !state.showSource;
- renderMemoryDetail();
- } else if (el.dataset.action === 'open-session' && el.dataset.session) {
- if (registry.navigateToSession) registry.navigateToSession(el.dataset.session, null);
- }
- });
- });
-}
diff --git a/app/src/renderer/js/registry.js b/app/src/renderer/js/registry.js
deleted file mode 100644
index 5fb5f75..0000000
--- a/app/src/renderer/js/registry.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Shared registry to break circular dependencies between modules.
-const registry = {};
-export default registry;
diff --git a/app/src/renderer/js/render.js b/app/src/renderer/js/render.js
deleted file mode 100644
index 00c409e..0000000
--- a/app/src/renderer/js/render.js
+++ /dev/null
@@ -1,246 +0,0 @@
-// Rendering coordinator -- thin orchestration layer.
-// Delegates to extracted modules; keeps only cross-module functions locally.
-
-import { state } from './state.js';
-import { archiveMemory, restoreMemory } from './data.js';
-import registry from './registry.js';
-
-// --- Module imports ---
-import { escapeHTML, $ } from './utils.js';
-import { renderSidebar, renderBreadcrumb, updateWindowTitle } from './sidebar.js';
-import { visibleMemories as _visibleMemories, renderMemoryList, renderMemoryDetail } from './memory-list.js';
-import { renderSessionList, renderSessionDetail } from './session-list.js';
-import { renderUsage } from './usage.js';
-
-// --- Data filtering (coordinator owns the cross-module view) ---
-
-export function visibleMemories() { return _visibleMemories(); }
-
-export function visibleSessions() {
- const q = state.query.trim().toLowerCase();
- return state.sessions
- .filter(s => state.projectFilter === 'all' || s.project === state.projectFilter)
- .map(s => {
- if (!q) return { ...s, messageHit: null };
- const topMatch = (s.title || '').toLowerCase().includes(q) ||
- (s.project || '').toLowerCase().includes(q) ||
- (s.git_branch || '').toLowerCase().includes(q);
- if (topMatch) return { ...s, messageHit: null };
- return null;
- })
- .filter(Boolean)
- .sort((a, b) => {
- const ta = new Date(a.started_at || 0).getTime();
- const tb = new Date(b.started_at || 0).getTime();
- return state.sortDesc ? tb - ta : ta - tb;
- });
-}
-
-// --- Cursor / selection ---
-
-export function flatList() { return visibleMemories(); }
-
-export function cursorIndex() {
- const flat = flatList();
- if (!state.cursorId) return -1;
- return flat.findIndex(m => m.id === state.cursorId);
-}
-
-export function moveCursor(delta, extendSelection = false) {
- const flat = flatList();
- if (!flat.length) return;
- let idx = cursorIndex();
- if (idx === -1) idx = 0;
- else idx = Math.max(0, Math.min(flat.length - 1, idx + delta));
- const newId = flat[idx].id;
- if (extendSelection) { state.selection.add(state.cursorId); state.selection.add(newId); }
- state.cursorId = newId;
- renderMemoryList(); renderStatus();
-}
-
-export function setCursor(id, opts = {}) {
- state.cursorId = id;
- if (!opts.keepSelection) state.selection.clear();
- renderMemoryList(); renderStatus();
-}
-
-// --- Mutations ---
-
-export function archive(ids) { if (!ids.length) return; doMutation(ids, true); }
-export function restore(ids) { if (!ids.length) return; doMutation(ids, false); }
-
-async function doMutation(ids, toArchived) {
- for (const id of ids) {
- if (toArchived) await archiveMemory(id);
- else await restoreMemory(id);
- }
- state.selection = new Set();
- if (state.mode === 'detail' && state.route === 'memory' && ids.includes(state.detailId)) exitDetail();
- const flat = flatList();
- if (state.cursorId && !flat.find(m => m.id === state.cursorId)) state.cursorId = flat[0]?.id ?? null;
- state.lastArchiveSnapshot = ids;
- state.undoExpires = Date.now() + 5000;
- clearInterval(state.undoTimer);
- state.undoTimer = setInterval(() => {
- if (Date.now() >= state.undoExpires) { state.lastArchiveSnapshot = null; clearInterval(state.undoTimer); }
- renderStatus();
- }, 500);
- renderAll();
-}
-
-export async function doUndo() {
- if (!state.lastArchiveSnapshot) return;
- for (const id of state.lastArchiveSnapshot) {
- const m = state.memories.find(x => x.id === id);
- if (m) {
- if (m.archived) await restoreMemory(id);
- else await archiveMemory(id);
- }
- }
- state.lastArchiveSnapshot = null;
- clearInterval(state.undoTimer);
- renderAll();
-}
-
-// --- Navigation ---
-
-export function navigateToSession(sessionId, focusUuid) {
- state.route = 'sessions'; state.mode = 'detail';
- state.detailId = sessionId;
- state.subagentId = null;
- state.subagentDescription = null;
- state.pendingFocusUuid = focusUuid || null;
- state.query = '';
- const searchEl = $('#search');
- if (searchEl) searchEl.value = '';
- switchView(); renderAll();
-}
-
-export function navigateToSubagent(agentId, description) {
- state.subagentId = agentId;
- state.subagentDescription = description || agentId;
- switchView(); renderAll();
-}
-
-export function enterDetail(id) { state.detailId = id; state.mode = 'detail'; state.showSource = false; switchView(); renderAll(); }
-
-export function exitDetail() {
- if (state.subagentId) {
- state.subagentId = null;
- state.subagentDescription = null;
- switchView(); renderAll();
- return;
- }
- state.mode = 'list'; state.detailId = null; state.pendingFocusUuid = null; switchView(); renderAll();
-}
-
-export function setRoute(route) {
- state.route = route; state.mode = 'list'; state.detailId = null;
- state.cursorId = null; state.selection.clear();
- state.query = ''; const s = $('#search'); if (s) s.value = '';
- switchView(); renderAll();
- if (route === 'memory') { const flat = visibleMemories(); if (flat.length) state.cursorId = flat[0].id; }
-}
-
-export function setView(v) {
- state.route = 'memory'; state.view = v; state.mode = 'list'; state.detailId = null;
- state.cursorId = null; state.selection.clear(); state.projectFilter = 'all';
- switchView(); renderAll();
- const flat = visibleMemories();
- if (flat.length) state.cursorId = flat[0].id;
- renderMemoryList();
-}
-
-export function setProject(p) {
- state.projectFilter = p; state.cursorId = null; state.selection.clear();
- state.mode = 'list'; state.detailId = null;
- switchView(); renderAll();
- if (state.route === 'memory') { const flat = visibleMemories(); if (flat.length) state.cursorId = flat[0].id; }
-}
-
-export function toggleSort() {
- state.sortDesc = !state.sortDesc;
- const btn = $('#sort-toggle');
- if (btn) { btn.classList.toggle('desc', state.sortDesc); btn.classList.toggle('asc', !state.sortDesc); }
- const lbl = $('#sort-label');
- if (lbl) lbl.textContent = state.sortDesc ? 'newest' : 'oldest';
- if (state.route === 'sessions') renderSessionList();
- else renderMemoryList();
-}
-
-export function switchView() {
- const showList = state.mode === 'list';
- const showSessions = state.route === 'sessions';
- const showUsage = state.route === 'usage';
- const inSessionDetail = !showList && showSessions;
- const inSubagent = inSessionDetail && !!state.subagentId;
- const el = (id, show) => { const e = $(id); if (e) e.style.display = show ? '' : 'none'; };
- el('#list-wrap', showList && !showSessions && !showUsage);
- el('#detail-wrap', !showList && !showSessions && !showUsage);
- el('#session-list-wrap', showList && showSessions);
- el('#session-detail-wrap', inSessionDetail && !inSubagent);
- el('#subagent-detail-wrap', inSubagent);
- el('#usage-wrap', showUsage);
- el('#search-wrap', showList && !showUsage);
- el('#sort-toggle', showList && !showUsage);
- el('#search-msgs-toggle', showList && showSessions);
-}
-
-// --- Status bar ---
-
-export function renderStatus() {
- const left = $('#status-left');
- const right = $('#status-right');
- if (!left || !right) return;
-
- if (state.route === 'sessions' && state.mode === 'list') {
- right.innerHTML = `⏎ open/ searchEsc backEsc backD archive↑↓ nav⏎ openD archive/ searchAction pending ${escapeHTML(target)} Undo ${secs}s `;
- $('#undo-btn')?.addEventListener('click', doUndo);
- return;
- }
- left.textContent = '';
-}
-
-// --- Master render ---
-
-export function renderAll() {
- renderSidebar();
- renderBreadcrumb();
- switchView();
- if (state.route === 'usage') {
- renderUsage();
- } else if (state.route === 'sessions') {
- if (state.mode === 'list') renderSessionList();
- else renderSessionDetail();
- } else {
- if (state.mode === 'list') renderMemoryList();
- else renderMemoryDetail();
- }
- renderStatus();
- updateWindowTitle();
-}
-
-// --- Registry (break circular deps for child modules) ---
-
-registry.navigateToSession = navigateToSession;
-registry.navigateToSubagent = navigateToSubagent;
-registry.exitDetail = exitDetail;
-registry.archive = archive;
-registry.restore = restore;
-
-// --- Re-exports for app.js and keys.js ---
-
-export { renderMemoryList, renderSessionList, escapeHTML };
diff --git a/app/src/renderer/js/session-list.js b/app/src/renderer/js/session-list.js
deleted file mode 100644
index 07acf75..0000000
--- a/app/src/renderer/js/session-list.js
+++ /dev/null
@@ -1,530 +0,0 @@
-// Session list and detail rendering module.
-// Extracted from render.js -- all session/subagent DOM generation.
-
-import { state } from './state.js';
-import { loadSessionDetail, loadSubagentDetail, isTextTruncated, loadFullText } from './data.js';
-import { escapeHTML, highlightPlain, fmtListTime, fmtRelative, fmtClockTime, renderMarkdown, formatProjectLabel, $ } from './utils.js';
-import { FOLDER_SVG } from './state.js';
-import registry from './registry.js';
-
-// --- Session list ---
-
-export function renderSessionList() {
- const items = visibleSessions();
- const list = $('#session-list');
- if (!list) return;
- if (!items.length) {
- list.innerHTML = `No sessions here.${state.query ? 'Try a different search term.' : 'Press / to search.'}
`;
- return;
- }
- list.innerHTML = items.map(s => renderSessionRow(s)).join('');
-}
-
-function renderSessionRow(s) {
- const q = state.query.trim();
- const showProjectPrefix = state.projectFilter === 'all';
- const startedTs = new Date(s.started_at || 0).getTime();
- return `
-
-
-
${highlightPlain(s.title || '(untitled)', q)}
-
- ${showProjectPrefix ? `${escapeHTML(formatProjectLabel(s.project))} ${s.message_count || 0} msg
-
-
-
${fmtListTime(startedTs)}
-
${messagesHTML}
`;
- detail.dataset.renderedSession = state.detailId;
-
- // Progress bar: track scroll position relative to messages
- const progressFill = detail.querySelector('#session-progress-fill');
- if (wrap && progressFill) {
- const updateProgress = () => {
- const msgs = detail.querySelectorAll('.msg, .wf-card');
- if (!msgs.length) return;
- const wrapTop = wrap.getBoundingClientRect().top;
- let topMsgIdx = 0;
- for (let i = 0; i < msgs.length; i++) {
- if (msgs[i].getBoundingClientRect().top <= wrapTop + 50) topMsgIdx = i;
- else break;
- }
- const pct = msgs.length <= 1 ? 100 : Math.round((topMsgIdx / (msgs.length - 1)) * 100);
- progressFill.style.width = pct + '%';
-
- // Show/hide back-to-top button
- const topBtn = detail.querySelector('#back-to-top');
- if (topBtn) topBtn.classList.toggle('show', wrap.scrollTop > 300);
- };
- wrap.addEventListener('scroll', updateProgress);
- updateProgress();
- }
-
- // Back to top button
- const topBtn = document.createElement('button');
- topBtn.id = 'back-to-top';
- topBtn.className = 'back-to-top';
- topBtn.innerHTML = `${messagesHTML}
`;
-
- // Wire up toggles
- detail.querySelectorAll('.toolcall-toggle').forEach(btn => {
- btn.addEventListener('click', e => { e.stopPropagation(); btn.closest('.msg-tool').classList.toggle('open'); });
- });
- detail.querySelectorAll('.summary-toggle').forEach(btn => {
- btn.addEventListener('click', e => { e.stopPropagation(); btn.closest('.msg-summary').classList.toggle('open'); });
- });
- detail.querySelectorAll('.thinking-toggle').forEach(btn => {
- btn.addEventListener('click', e => { e.stopPropagation(); btn.closest('.msg-thinking').classList.toggle('open'); });
- });
- detail.querySelectorAll('.meta-toggle').forEach(btn => {
- btn.addEventListener('click', e => { e.stopPropagation(); btn.closest('.msg-meta-collapsed').classList.toggle('open'); });
- });
- detail.querySelectorAll('.truncated-btn').forEach(btn => {
- btn.addEventListener('click', async e => {
- e.stopPropagation();
- const uuid = btn.dataset.uuid;
- btn.textContent = 'Loading…';
- const fullText = await loadFullText(uuid);
- if (fullText) {
- const msgEl = btn.closest('.msg');
- const bodyEl = msgEl.querySelector('.markdown-msg') || msgEl.querySelector('.markdown-compact');
- const variant = bodyEl?.classList.contains('markdown-compact') ? 'compact' : 'msg';
- const rendered = renderMarkdown(fullText, { variant, query: state.query });
- if (bodyEl) bodyEl.outerHTML = rendered;
- btn.remove();
- } else {
- btn.textContent = 'Failed to load full text';
- }
- });
- });
- // Nested subagent navigation
- detail.querySelectorAll('[data-action="open-subagent"]').forEach(btn => {
- btn.addEventListener('click', e => {
- e.stopPropagation();
- registry.navigateToSubagent(btn.dataset.agentId, btn.dataset.agentDesc);
- });
- });
-
- // Progress bar
- const progressFill = detail.querySelector('#session-progress-fill');
- if (wrap && progressFill) {
- const updateProgress = () => {
- const msgs = detail.querySelectorAll('.msg');
- if (!msgs.length) return;
- const wrapTop = wrap.getBoundingClientRect().top;
- let topMsgIdx = 0;
- for (let i = 0; i < msgs.length; i++) {
- if (msgs[i].getBoundingClientRect().top <= wrapTop + 50) topMsgIdx = i;
- else break;
- }
- const pct = msgs.length <= 1 ? 100 : Math.round((topMsgIdx / (msgs.length - 1)) * 100);
- progressFill.style.width = pct + '%';
- };
- wrap.addEventListener('scroll', updateProgress);
- updateProgress();
- }
-}
-
-function renderMessage(msg, idx, opts = {}) {
- const isUser = msg.type === 'user';
- const isThinking = msg.content_type === 'thinking';
- const isMeta = msg.is_meta === 1;
- const tools = (msg.tool_calls || []).map(renderToolCall).join('');
-
- // In subagent context, all user text messages are prompts (from main agent or human)
- let roleLabel = isUser ? 'You' : 'Assistant';
- if (opts.isSubagent && isUser) {
- roleLabel = 'Prompt';
- }
-
- // Meta messages: collapsed by default, shown as a small system indicator
- if (isMeta) {
- const preview = (msg.text || '').replace(/<[^>]+>/g, '').slice(0, 80);
- const truncated = isTextTruncated(msg.text);
- return `
-
- `;
- }
-
- // Workflow as standalone card (not inside assistant bubble)
- const workflowCall = (msg.tool_calls || []).find(tc => tc.name === 'Workflow' && tc.workflow);
- if (workflowCall && !isUser) {
- const wf = workflowCall.workflow;
- const wfName = wf.workflow_name || 'Workflow';
- const agents = wf.agents || [];
-
- const phases = {};
- for (const a of agents) {
- const phase = a.phase || 'Other';
- if (!phases[phase]) phases[phase] = [];
- phases[phase].push(a);
- }
-
- const phasesHTML = Object.entries(phases).map(([phase, agentList]) => `
-
-
${escapeHTML(phase)}
- ${agentList.map(a => `
-
- ${escapeHTML(a.label || a.agent_id)}
- ${a.state === 'error' ? `error ` : ''}
- →
-
- `).join('')}
-
-
-
- Thinking
-
-
${renderMarkdown(msg.text, { variant: 'msg', query: state.query })}
-
-
-
- Thinking
-
-
${renderMarkdown(msg._thinking, { variant: 'msg', query: state.query })}
-
(no text content)
');
- if (truncated) {
- textHTML += `Message truncated — click to load full text `;
- }
-
- let summaryHTML = '';
- if (msg.summary) {
- summaryHTML = `
-
-
- Session summary
- ${escapeHTML(msg.summary.source || '')}
-
-
${renderMarkdown(msg.summary.content, { variant: 'compact' })}
-
-
- ${roleLabel}
- ${msg.timestamp ? fmtClockTime(msg.timestamp) : ''}
-
- ${thinkingHTML}
- ${textHTML}
- ${tools ? `
${tools}
` : ''}
- ${summaryHTML}
-
-
-
- ${agentList.map(a => `
-
- ${escapeHTML(a.label || a.agent_id)}
- ${escapeHTML(a.state || '')}
-
- `).join('')}
-
-
Agents · ${agents.length}
- ${phasesHTML}
- ` : '';
-
- return `
-
- `;
- }
-
- let argPreview = '';
- try {
- const j = JSON.parse(tc.input_json || '{}');
- if (j.file_path) argPreview = j.file_path;
- else if (j.command) argPreview = j.command;
- else if (j.path) argPreview = j.path;
- else if (j.description) argPreview = j.description;
- else argPreview = JSON.stringify(j).slice(0, 100);
- } catch { argPreview = (tc.input_json || '').slice(0, 100); }
-
- return `
-
- `;
-}
-
-// --- Private helper: visibleSessions (same logic as render.js) ---
-
-function visibleSessions() {
- const q = state.query.trim().toLowerCase();
- return state.sessions
- .filter(s => state.projectFilter === 'all' || s.project === state.projectFilter)
- .map(s => {
- if (!q) return { ...s, messageHit: null };
- const topMatch = (s.title || '').toLowerCase().includes(q) ||
- (s.project || '').toLowerCase().includes(q) ||
- (s.git_branch || '').toLowerCase().includes(q);
- if (topMatch) return { ...s, messageHit: null };
- return null;
- })
- .filter(Boolean)
- .sort((a, b) => {
- const ta = new Date(a.started_at || 0).getTime();
- const tb = new Date(b.started_at || 0).getTime();
- return state.sortDesc ? tb - ta : ta - tb;
- });
-}
diff --git a/app/src/renderer/js/sidebar.js b/app/src/renderer/js/sidebar.js
deleted file mode 100644
index 13aca10..0000000
--- a/app/src/renderer/js/sidebar.js
+++ /dev/null
@@ -1,137 +0,0 @@
-// Sidebar, breadcrumb, and window title rendering.
-// Extracted from render.js for modularity.
-
-import { state, FOLDER_SVG } from './state.js';
-import { $, $$, escapeHTML, formatProjectLabel } from './utils.js';
-
-// --- Data helpers (sidebar-local) ---
-
-function projectCountsForCurrentRoute() {
- const counts = {};
- if (state.route === 'sessions') {
- for (const s of state.sessions) if (s.project) counts[s.project] = (counts[s.project] || 0) + 1;
- } else {
- for (const m of state.memories) {
- const matches = state.view === 'archived' ? m.archived : !m.archived;
- if (!matches) continue;
- if (m.project) counts[m.project] = (counts[m.project] || 0) + 1;
- }
- }
- return counts;
-}
-
-// --- Sidebar ---
-
-export function renderSidebar() {
- const activeCount = state.memories.filter(m => !m.archived).length;
- const archivedCount = state.memories.filter(m => m.archived).length;
- const el = id => $(id);
- if (el('#count-sessions')) el('#count-sessions').textContent = state.sessions.length;
- if (el('#count-memory-total')) el('#count-memory-total').textContent = activeCount + archivedCount;
- if (el('#count-active')) el('#count-active').textContent = activeCount;
- if (el('#count-archived')) el('#count-archived').textContent = archivedCount;
-
- $$('.sidebar-item').forEach(item => {
- let isActive = false;
- if (item.dataset.route === 'sessions' && state.route === 'sessions' && state.projectFilter === 'all') isActive = true;
- else if (item.dataset.route === 'usage' && state.route === 'usage') isActive = true;
- else if (item.dataset.route === 'memory' && item.dataset.view === state.view && state.projectFilter === 'all') isActive = true;
- else if (item.dataset.project && item.dataset.project === state.projectFilter) isActive = true;
- if (item.dataset.route === 'memory' && !item.classList.contains('sub')) isActive = false;
- item.classList.toggle('active', isActive);
- });
-
- const counts = projectCountsForCurrentRoute();
- let projects = [...new Set(
- (state.route === 'sessions' ? state.sessions : state.memories)
- .filter(item => {
- if (state.route === 'sessions') return true;
- return state.view === 'archived' ? item.archived : !item.archived;
- })
- .map(item => item.project)
- .filter(Boolean)
- )];
- if (state.projectSearch) {
- const q = state.projectSearch.toLowerCase();
- projects = projects.filter(p => p.toLowerCase().includes(q));
- }
- projects.sort((a, b) => formatProjectLabel(a).localeCompare(formatProjectLabel(b)));
- const projectsEl = $('#sidebar-projects');
- if (projectsEl) {
- projectsEl.innerHTML = projects.map(p => `
-
- `).join('') || `No projects
`;
- }
-}
-
-// --- Breadcrumb ---
-
-export function renderBreadcrumb() {
- const bc = $('#breadcrumb');
- if (!bc) return;
- if (state.route === 'sessions') {
- if (state.mode === 'detail') {
- const s = state.sessions.find(x => x.id === state.detailId);
- if (!s) return;
- if (state.subagentId) {
- bc.innerHTML = `Sessions / ${escapeHTML((s.title || s.id).slice(0, 30))} / ${escapeHTML((state.subagentDescription || '').slice(0, 40))} `;
- } else {
- bc.innerHTML = `Sessions / ${escapeHTML(s.title || s.id)} `;
- }
- } else {
- let html = `Sessions `;
- if (state.projectFilter !== 'all') html += `/ ${escapeHTML(formatProjectLabel(state.projectFilter))} `;
- bc.innerHTML = html;
- }
- } else if (state.route === 'usage') {
- bc.innerHTML = `Usage `;
- } else {
- if (state.mode === 'detail') {
- const m = state.memories.find(x => x.id === state.detailId);
- if (!m) return;
- bc.innerHTML = `Memory / ${escapeHTML(m.path.split('/').pop())} `;
- } else {
- let html = `Memory `;
- if (state.projectFilter !== 'all') html += `/ ${escapeHTML(formatProjectLabel(state.projectFilter))} `;
- bc.innerHTML = html;
- }
- }
-}
-
-// --- Window title ---
-
-export function updateWindowTitle() {
- const appName = 'Obelisk';
- let scopeText = '';
- if (state.route === 'usage') {
- scopeText = 'Usage';
- } else if (state.route === 'sessions') {
- if (state.mode === 'detail') {
- const s = state.sessions.find(x => x.id === state.detailId);
- scopeText = s ? `Sessions · ${s.title}` : 'Sessions';
- } else {
- const proj = state.projectFilter !== 'all' ? ` · ${formatProjectLabel(state.projectFilter)}` : '';
- scopeText = `Sessions${proj}`;
- }
- } else {
- if (state.mode === 'detail') {
- const m = state.memories.find(x => x.id === state.detailId);
- scopeText = m ? `Memory · ${m.path.split('/').pop()}` : 'Memory';
- } else {
- const viewLabel = state.view === 'archived' ? 'Archived' : 'Active';
- const proj = state.projectFilter !== 'all' ? ` · ${formatProjectLabel(state.projectFilter)}` : '';
- scopeText = `Memory · ${viewLabel}${proj}`;
- }
- }
- const titleEl = $('#titlebar-text');
- if (titleEl) {
- const truncated = scopeText.length > 50 ? scopeText.slice(0, 50) + '…' : scopeText;
- titleEl.innerHTML = `${appName} — ${escapeHTML(truncated)} `;
- titleEl.title = `${appName} — ${scopeText}`;
- }
- document.title = `${appName} — ${scopeText}`;
-}
diff --git a/app/src/renderer/js/state.js b/app/src/renderer/js/state.js
deleted file mode 100644
index 5588778..0000000
--- a/app/src/renderer/js/state.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// App state -- single source of truth for the renderer process.
-// Loaded collections (memories, sessions, projects) start empty and are
-// populated from the DB at boot.
-
-export const state = {
- memories: [],
- sessions: [],
- projects: [],
- route: 'memory',
- view: 'active', // 'active' | 'archived'
- mode: 'list', // 'list' | 'detail'
- detailId: null,
- subagentId: null,
- subagentDescription: null,
- pendingFocusUuid: null,
- query: '',
- projectFilter: 'all',
- projectSearch: '',
- sortDesc: true,
- includeMessageBodies: false,
- cursorId: null,
- selection: new Set(),
- showSource: false,
- lastArchiveSnapshot: null,
- undoTimer: null,
- undoExpires: 0
-};
-
-// Platform detection
-export const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
-
-// SVG icon constants
-export const FOLDER_SVG = `${m.label} `
- ).join('');
-
- // Streak calculation — check gaps between consecutive active days
- let longestStreak = 0;
- let streak = 0;
- const sortedDays = [...daily].filter(d => d.tokens > 0).sort((a, b) => a.day.localeCompare(b.day));
- for (let i = 0; i < sortedDays.length; i++) {
- if (i === 0) {
- streak = 1;
- } else {
- const prev = new Date(sortedDays[i - 1].day).getTime();
- const curr = new Date(sortedDays[i].day).getTime();
- if (curr - prev === dayMs) {
- streak++;
- } else {
- streak = 1;
- }
- }
- if (streak > longestStreak) longestStreak = streak;
- }
- // Current streak: find the most recent active day, then count consecutive days backwards
- let currentStreak = 0;
- let startedCounting = false;
- for (let i = 0; i <= 365; i++) {
- const d = new Date(today.getTime() - i * dayMs).toISOString().slice(0, 10);
- if (dailyMap[d] && dailyMap[d] > 0) {
- startedCounting = true;
- currentStreak++;
- } else if (startedCounting) {
- break;
- }
- }
-
- usage.innerHTML = `
-
-
-
-
- ${fmtTokens(totalTokens)}
- Lifetime tokens
-
-
- ${peakDay ? fmtTokens(peakDay.tokens) : '—'}
- Peak tokens
-
-
- ${longestTurn ? fmtDuration(longestTurn.turn_duration_ms) : '—'}
- Longest task
-
-
- ${currentStreak}d
- Current streak
-
-
- ${longestStreak}d
- Longest streak
-
-
-
- ${cellsHTML}
- ${monthLabelsHTML}
-
-
- Less
- More
-
-
-
- `;
-
- // Heatmap tooltip
- const heatmapTooltip = document.createElement('div');
- heatmapTooltip.className = 'chart-tooltip';
- usage.appendChild(heatmapTooltip);
- usage.querySelectorAll('.heatmap-cell[data-label]').forEach(cell => {
- cell.addEventListener('mouseenter', () => {
- heatmapTooltip.textContent = cell.dataset.label;
- heatmapTooltip.classList.add('show');
- });
- cell.addEventListener('mousemove', e => {
- positionTooltip(heatmapTooltip, e.clientX, e.clientY);
- });
- cell.addEventListener('mouseleave', () => heatmapTooltip.classList.remove('show'));
- cell.addEventListener('click', () => {
- usage.querySelectorAll('.heatmap-cell.selected').forEach(c => c.classList.remove('selected'));
- cell.classList.add('selected');
- const date = cell.dataset.label.match(/on (.+)$/)?.[1] || '';
- const dateKey = cell.getAttribute('data-label').split(' tokens')[0]; // not ideal
- // Extract ISO date from cells array by matching position
- const allCells = [...usage.querySelectorAll('.heatmap-cell[data-label]')];
- const idx = allCells.indexOf(cell);
- if (idx >= 0 && idx < cells.length) {
- showDaySessions(cells[idx].key);
- }
- });
- });
-
- async function showDaySessions(dateKey) {
- const panel = usage.querySelector('#day-sessions');
- if (!panel) return;
- const dayStart = dateKey + 'T00:00:00';
- const dayEnd = dateKey + 'T23:59:59';
-
- // Find sessions active on this day
- const daySessions = state.sessions.filter(s => {
- if (!s.started_at) return false;
- const end = s.ended_at || s.started_at;
- return s.started_at <= dayEnd && end >= dayStart;
- });
-
- // Classify each session
- const classified = daySessions.map(s => {
- const isNew = s.started_at.slice(0, 10) === dateKey;
- let kind = 'continued'; // default: session spans this day
- if (isNew) {
- // Check if this project had any session before this one
- const hasEarlierSession = state.sessions.some(
- other => other.project === s.project && other.id !== s.id && other.started_at < s.started_at
- );
- kind = hasEarlierSession ? 'new-session' : 'new-workspace';
- }
- return { ...s, kind };
- });
-
- if (!classified.length) {
- panel.innerHTML = ``;
- return;
- }
-
- // Group by kind for visual hierarchy
- const newWorkspaces = classified.filter(s => s.kind === 'new-workspace');
- const newSessions = classified.filter(s => s.kind === 'new-session');
- const continued = classified.filter(s => s.kind === 'continued');
-
- let html = ``;
-
- if (newWorkspaces.length) {
- html += `
-
-
-
- ${newWorkspaces.map(s => `
-
- ${escapeHTML(formatProjectLabel(s.project))} ${escapeHTML(s.title || '(untitled)')}${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- if (newSessions.length) {
- // Group new sessions by project
- const byProject = {};
- for (const s of newSessions) {
- const p = s.project || '(none)';
- if (!byProject[p]) byProject[p] = [];
- byProject[p].push(s);
- }
- html += `
-
-
-
- ${newSessions.map(s => `
-
- ${escapeHTML(s.title || '(untitled)')}
- ${escapeHTML(formatProjectLabel(s.project))} · ${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- if (continued.length) {
- html += `
-
-
-
- ${continued.map(s => `
-
- ${escapeHTML(s.title || '(untitled)')}
- ${escapeHTML(formatProjectLabel(s.project))} · ${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- html += `
`;
-
- if (newWorkspaces.length) {
- html += `
-
-
-
- ${newWorkspaces.map(s => `
-
- ${escapeHTML(formatProjectLabel(s.project))} ${escapeHTML(s.title || '(untitled)')}${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- if (newSessions.length) {
- const byProject = {};
- for (const s of newSessions) { const p = s.project || '(none)'; if (!byProject[p]) byProject[p] = []; byProject[p].push(s); }
- html += `
-
-
-
- ${newSessions.map(s => `
-
- ${escapeHTML(s.title || '(untitled)')}
- ${escapeHTML(formatProjectLabel(s.project))} · ${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- if (continued.length) {
- html += `
-
-
-
- ${continued.map(s => `
-
- ${escapeHTML(s.title || '(untitled)')}
- ${escapeHTML(formatProjectLabel(s.project))} · ${s.message_count || 0} msg
-
- `).join('')}
-
-
- `;
- }
-
- if (!classified.length) html += `
No sessions this month.
`;
- html += `
No data
'; return; }
-
- const maxVal = Math.max(...weeks.map(w => w.tokens), 1);
- const barWidth = 10;
- const barGap = 3;
- const chartHeight = 120;
- const chartWidth = weeks.length * (barWidth + barGap);
- const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
- // Month labels
- const labels = [];
- let lastMonth = -1;
- for (let i = 0; i < weeks.length; i++) {
- const m = weeks[i].weekStart.getMonth();
- if (m !== lastMonth) { labels.push({ i, label: months[m] }); lastMonth = m; }
- }
-
- const barsHTML = weeks.map((w, i) => {
- const h = maxVal > 0 ? (w.tokens / maxVal) * chartHeight : 0;
- const x = i * (barWidth + barGap);
- return `${l.label} `;
- }).join('');
-
- container.innerHTML = `
-
-
- ${barsHTML}
- ${labelsHTML}
-
- `;
-
- // Tooltip on hover
- const tooltip = container.querySelector('#chart-tooltip');
- container.querySelectorAll('.bar-fill').forEach(bar => {
- bar.addEventListener('mouseenter', e => {
- tooltip.textContent = bar.dataset.label;
- tooltip.classList.add('show');
- });
- bar.addEventListener('mousemove', e => {
- positionTooltip(tooltip, e.clientX, e.clientY);
- });
- bar.addEventListener('mouseleave', () => tooltip.classList.remove('show'));
- });
-}
-
-export function renderCumulativeChart(container, daily) {
- const sorted = [...daily].sort((a, b) => a.day.localeCompare(b.day));
- if (!sorted.length) { container.innerHTML = 'No data
'; return; }
-
- let cumulative = 0;
- const points = sorted.map(d => { cumulative += d.tokens; return { day: d.day, total: cumulative }; });
- const maxVal = points[points.length - 1].total;
-
- const chartWidth = 700;
- const chartHeight = 140;
- const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
- // Scale x by index, y by value
- const xScale = (i) => (i / (points.length - 1)) * chartWidth;
- const yScale = (v) => chartHeight - (v / maxVal) * chartHeight;
-
- // Build path
- const pathParts = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${xScale(i).toFixed(1)},${yScale(p.total).toFixed(1)}`);
- const linePath = pathParts.join(' ');
- const areaPath = linePath + ` L${chartWidth},${chartHeight} L0,${chartHeight} Z`;
-
- // Month labels
- const labels = [];
- let lastMonth = -1;
- for (let i = 0; i < points.length; i++) {
- const m = new Date(points[i].day).getMonth();
- if (m !== lastMonth) { labels.push({ x: xScale(i), label: months[m] }); lastMonth = m; }
- }
- const labelsHTML = labels.map(l => `${l.label} `).join('');
-
- // Invisible hover dots for tooltip
- const dotsHTML = points.map((p, i) => {
- return `
-
-
- `;
-
- const tooltip = container.querySelector('#chart-tooltip-cum');
- container.querySelectorAll('.cumulative-dot').forEach(dot => {
- dot.addEventListener('mouseenter', e => {
- tooltip.textContent = dot.dataset.label;
- tooltip.classList.add('show');
- });
- dot.addEventListener('mousemove', e => {
- positionTooltip(tooltip, e.clientX, e.clientY);
- });
- dot.addEventListener('mouseleave', () => tooltip.classList.remove('show'));
- });
-}
diff --git a/app/src/renderer/js/utils.js b/app/src/renderer/js/utils.js
deleted file mode 100644
index 570819c..0000000
--- a/app/src/renderer/js/utils.js
+++ /dev/null
@@ -1,194 +0,0 @@
-// Utility functions extracted from render.js
-// Pure helpers with no side-effects on global state (except formatProjectLabel which reads state).
-
-import { state } from './state.js';
-
-// --- Time / formatting ---
-
-export function pad2(n) { return String(n).padStart(2, '0'); }
-
-export function isSameDay(a, b) {
- return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-
-export function fmtListTime(ts) {
- const d = new Date(ts);
- const now = new Date();
- const hhmm = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
- if (isSameDay(d, now)) return hhmm;
- const mmdd = `${pad2(d.getMonth() + 1)}/${pad2(d.getDate())}`;
- if (d.getFullYear() === now.getFullYear()) return `${mmdd} ${hhmm}`;
- return `${d.getFullYear()}/${mmdd} ${hhmm}`;
-}
-
-export function fmtRelative(ts) {
- const diff = Date.now() - ts;
- const min = 60000, hr = 3600000, day = 86400000;
- if (diff < 0) return 'in the future';
- if (diff < min) return 'just now';
- if (diff < hr) return Math.floor(diff / min) + 'm ago';
- if (diff < day) return Math.floor(diff / hr) + 'h ago';
- if (diff < day * 30) return Math.floor(diff / day) + 'd ago';
- if (diff < day * 365) return Math.floor(diff / (day * 30)) + 'mo ago';
- return Math.floor(diff / (day * 365)) + 'y ago';
-}
-
-export function fmtClockTime(iso) {
- const d = new Date(iso);
- return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-}
-
-export function fmtSize(bytes) {
- if (!bytes) return '-';
- if (bytes < 1024) return bytes + 'B';
- if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'K';
- return (bytes / 1024 / 1024).toFixed(1) + 'M';
-}
-
-// --- HTML / Markdown ---
-
-export function escapeHTML(s) { return String(s || '').replace(/&/g, '&').replace(//g, '>'); }
-
-export function highlightPlain(text, query) {
- if (!query) return escapeHTML(text);
- const safe = escapeHTML(text);
- const q = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
- return safe.replace(new RegExp(q, 'gi'), m => `${m} `);
-}
-
-export function sanitizeMarkdown(html) {
- return html
- .replace(//gi, '')
- .replace(//gi, '')
- .replace(//gi, '')
- .replace(/\son\w+="[^"]*"/gi, '');
-}
-
-export function highlightTextNodes(rootEl, query) {
- if (!query) return;
- const q = query.toLowerCase();
- const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_TEXT, null);
- const nodes = [];
- while (walker.nextNode()) nodes.push(walker.currentNode);
- for (const node of nodes) {
- const text = node.nodeValue;
- if (!text) continue;
- const lower = text.toLowerCase();
- if (!lower.includes(q)) continue;
- const frag = document.createDocumentFragment();
- let last = 0, i = lower.indexOf(q);
- while (i !== -1) {
- if (i > last) frag.appendChild(document.createTextNode(text.slice(last, i)));
- const mark = document.createElement('mark');
- mark.textContent = text.slice(i, i + q.length);
- frag.appendChild(mark);
- last = i + q.length;
- i = lower.indexOf(q, last);
- }
- if (last < text.length) frag.appendChild(document.createTextNode(text.slice(last)));
- node.parentNode.replaceChild(frag, node);
- }
-}
-
-export function renderMarkdown(text, opts = {}) {
- if (text == null) return '';
- const html = sanitizeMarkdown(marked.parse(text));
- const cls = opts.variant === 'msg' ? 'markdown-msg'
- : opts.variant === 'compact' ? 'markdown-compact'
- : 'markdown-body';
- const container = document.createElement('div');
- container.className = cls;
- container.innerHTML = html;
- if (opts.query) highlightTextNodes(container, opts.query.trim());
- return container.outerHTML;
-}
-
-// --- Duration / tokens / tooltip ---
-
-export function fmtDuration(ms) {
- if (!ms) return '—';
- const s = Math.floor(ms / 1000);
- const d = Math.floor(s / 86400);
- const h = Math.floor((s % 86400) / 3600);
- const m = Math.floor((s % 3600) / 60);
- const sec = s % 60;
- const parts = [];
- if (d) parts.push(`${d}d`);
- if (h) parts.push(`${h}h`);
- if (m) parts.push(`${m}m`);
- if (sec || !parts.length) parts.push(`${sec}s`);
- return parts.join(' ');
-}
-
-export function fmtTokens(n) {
- if (!n) return '0';
- if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(2) + 'B';
- if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
- if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
- return String(n);
-}
-
-export function fmtTooltipDate(isoDay) {
- const d = new Date(isoDay + 'T00:00:00');
- const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
- const day = d.getDate();
- const suffix = day === 1 || day === 21 || day === 31 ? 'st' : day === 2 || day === 22 ? 'nd' : day === 3 || day === 23 ? 'rd' : 'th';
- const thisYear = new Date().getFullYear();
- if (d.getFullYear() === thisYear) return `${months[d.getMonth()]} ${day}${suffix}`;
- return `${months[d.getMonth()]} ${day}${suffix}, ${d.getFullYear()}`;
-}
-
-export function positionTooltip(el, x, y) {
- const pad = 12;
- const rect = el.getBoundingClientRect();
- let left = x + pad;
- if (left + rect.width > window.innerWidth - pad) left = x - rect.width - pad;
- el.style.left = left + 'px';
- el.style.top = (y - 28) + 'px';
-}
-
-// --- DOM helpers ---
-
-export const $ = sel => document.querySelector(sel);
-export const $$ = sel => Array.from(document.querySelectorAll(sel));
-
-export function ensureVisible(el, wrapSel) {
- const wrap = $(wrapSel);
- if (!wrap || !el) return;
- const elRect = el.getBoundingClientRect();
- const wrapRect = wrap.getBoundingClientRect();
- if (elRect.top < wrapRect.top + 30) wrap.scrollTop -= (wrapRect.top + 30 - elRect.top);
- else if (elRect.bottom > wrapRect.bottom - 10) wrap.scrollTop += (elRect.bottom - wrapRect.bottom + 10);
-}
-
-// --- Project label ---
-
-export function formatProjectLabel(slug) {
- if (!slug) return '(no project)';
- // Use project_path if available from sessions, otherwise show slug as-is
- const session = state.sessions.find(s => s.project === slug && s.project_path);
- if (session?.project_path) {
- const parts = session.project_path.split('/');
- return parts.slice(-2).join('/');
- }
- return slug.replace(/^-/, '');
-}
-
-// --- Row status ---
-
-export function dominantRowStatus(m) {
- if (m.health === 'broken') return 'broken';
- if (m.health === 'partial') return 'partial';
- if (m.archived) return 'archived';
- return null;
-}
-
-export function statusGlyphHTML(status) {
- if (!status) return '';
- const glyphs = {
- broken: `${glyphs[status] || ''} `;
-}
diff --git a/app/src/renderer/src/App.vue b/app/src/renderer/src/App.vue
index d889807..a6c2d53 100644
--- a/app/src/renderer/src/App.vue
+++ b/app/src/renderer/src/App.vue
@@ -1,13 +1,13 @@
-
-
-
-
-
-
diff --git a/app/src/renderer/src/components/Toolbar.vue b/app/src/renderer/src/components/Toolbar.vue
deleted file mode 100644
index c6f227f..0000000
--- a/app/src/renderer/src/components/Toolbar.vue
+++ /dev/null
@@ -1,381 +0,0 @@
-
-
-
-
-
-
-
diff --git a/app/src/renderer/src/data.js b/app/src/renderer/src/data.js
index af5ba5e..6837df8 100644
--- a/app/src/renderer/src/data.js
+++ b/app/src/renderer/src/data.js
@@ -2,7 +2,7 @@
// All DB access goes through this module.
import { markRaw } from 'vue';
-import { state, clearUndo } from './store.js';
+import { state } from './store.js';
/**
* Load initial data from the DB and populate state.memories, state.sessions,
diff --git a/app/src/renderer/src/keyboard-shortcuts.mjs b/app/src/renderer/src/keyboard-shortcuts.mjs
new file mode 100644
index 0000000..7ffea25
--- /dev/null
+++ b/app/src/renderer/src/keyboard-shortcuts.mjs
@@ -0,0 +1,62 @@
+export function normalizeShortcutKey(event) {
+ return event.key.length === 1 ? event.key.toLowerCase() : event.key;
+}
+
+export function resolveGlobalShortcut(event, context) {
+ if (event.defaultPrevented) return null;
+
+ const key = normalizeShortcutKey(event);
+ const modifier = event.metaKey || event.ctrlKey;
+ if (modifier) {
+ if (key === '1') return 'open-sessions';
+ if (key === '2') return 'open-active-memories';
+ if (key === '3') return 'open-archived-memories';
+ return null;
+ }
+ if (event.altKey) return null;
+
+ if (context.isTextInput) {
+ return key === 'Escape' ? 'blur-input' : null;
+ }
+
+ if (key === '/' && context.isListRoute) return 'focus-search';
+ if (key === 's' && context.isListRoute) return 'toggle-sort';
+
+ if (key === 'Escape') {
+ if (context.hasSelection) return 'clear-selection';
+ if (context.hasQuery) return 'clear-query';
+ }
+
+ return null;
+}
+
+export function resolveMemoryShortcut(event, context) {
+ if (event.defaultPrevented || context.isTextInput) return null;
+
+ const key = normalizeShortcutKey(event);
+ const modifier = event.metaKey || event.ctrlKey;
+ if (modifier) {
+ if (key === 'z' && !event.shiftKey && context.hasUndo) return { type: 'undo' };
+ return null;
+ }
+ if (event.altKey) return null;
+
+ if (context.showDetail) {
+ if (key === 'Escape') return { type: 'close-detail' };
+ if (key === 'd') return { type: 'mutate-detail' };
+ return null;
+ }
+
+ if (key === 'j' || key === 'ArrowDown') {
+ return { type: 'move-cursor', direction: 1, extend: Boolean(event.shiftKey) };
+ }
+ if (key === 'k' || key === 'ArrowUp') {
+ return { type: 'move-cursor', direction: -1, extend: Boolean(event.shiftKey) };
+ }
+ if (key === 'Enter' && context.hasCursor) return { type: 'open-detail' };
+ if (key === 'x' && context.hasCursor) return { type: 'toggle-selection' };
+ if (key === 'd') return { type: 'mutate-selection' };
+ if (key === 'u' && context.hasUndo) return { type: 'undo' };
+
+ return null;
+}
diff --git a/app/src/renderer/src/main.js b/app/src/renderer/src/main.js
index fdb2a79..9051684 100644
--- a/app/src/renderer/src/main.js
+++ b/app/src/renderer/src/main.js
@@ -6,7 +6,7 @@ import router from './router.js';
import { loadInitialData } from './data.js';
import { noteSessionUpdated, sessionLiveState } from './session-live.mjs';
-// Import all original CSS globally
+// Import shared renderer CSS globally
import '../styles/base.css';
import '../styles/sidebar.css';
import '../styles/toolbar.css';
diff --git a/app/src/renderer/src/router.js b/app/src/renderer/src/router.js
index c2ccba9..6455d76 100644
--- a/app/src/renderer/src/router.js
+++ b/app/src/renderer/src/router.js
@@ -8,7 +8,6 @@ const SessionList = () => import('./views/SessionList.vue');
const SessionDetail = () => import('./views/SessionDetail.vue');
const SubagentDetail = () => import('./views/SubagentDetail.vue');
const MemoryList = () => import('./views/MemoryList.vue');
-const MemoryDetail = () => import('./views/MemoryDetail.vue');
const Activity = () => import('./views/Activity.vue');
const Recap = () => import('./views/RecapList.vue');
const RecapDetail = () => import('./views/RecapDetail.vue');
@@ -42,7 +41,7 @@ const routes = [
{
path: '/memory/:id',
name: 'MemoryDetail',
- component: MemoryDetail,
+ component: MemoryList,
props: true
},
{
diff --git a/app/src/renderer/src/store.js b/app/src/renderer/src/store.js
index 48a1a9f..3b0070c 100644
--- a/app/src/renderer/src/store.js
+++ b/app/src/renderer/src/store.js
@@ -1,5 +1,5 @@
-// Reactive store -- Vue 3 reactive() replaces the plain object from state.js.
-// All state fields are ported; action functions mutate the reactive state.
+// Shared renderer state. Navigation state belongs to Vue Router; this store
+// holds only data and cross-view UI preferences.
import { reactive, markRaw } from 'vue';
@@ -8,12 +8,7 @@ export const state = reactive({
sessions: [],
projects: [],
stats: {},
- route: 'memory',
view: 'active', // 'active' | 'archived'
- mode: 'list', // 'list' | 'detail'
- detailId: null,
- subagentId: null,
- subagentDescription: null,
pendingFocusUuid: null,
query: '',
projectFilter: 'all',
@@ -23,92 +18,45 @@ export const state = reactive({
includeMessageBodies: false,
cursorId: null,
selection: markRaw(new Set()),
- showSource: false,
- lastArchiveSnapshot: null,
- undoTimer: null,
- undoExpires: 0,
loaded: false
});
-// Platform detection
-export const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);
-
// SVG icon constants
export const FOLDER_SVG = `
-
-
-
-
-
- Body
- {{ showSource ? 'Show rendered' : 'Show source' }}
-
-
Loading…
-
File not found or empty.
-
{{ markdown }}
-
-
-
-
- Anchors {{ memory.anchors.length }}
-
-
-
-
-
- {{ a.path }}
- :{{ a.line }}
-
-
-
-
- Back
-
- {{ memory.archived ? 'Restore' : 'Archive' }}
-
-
-
diff --git a/app/src/renderer/src/views/MemoryList.vue b/app/src/renderer/src/views/MemoryList.vue
index 0ea0ef9..45ebb2f 100644
--- a/app/src/renderer/src/views/MemoryList.vue
+++ b/app/src/renderer/src/views/MemoryList.vue
@@ -1,11 +1,13 @@