claude-simple 0.1.0

package/public/router.js

@@ -0,0 +1,71 @@
+// router.js — Hash routing: #/  #/session/:id  #/session/:id/:tab
+import { createRouter, watch } from './lib.js';
+import { currentTab, ctx } from './state.js';
+
+export const router = createRouter({
+  '/':                  () => {},
+  '/session/*':         () => {},
+  '/session/*/*':       () => {},
+  '*':                  () => {},
+});
+
+let _resumeSession = null;
+let _switchTab     = null;
+let _ignoreNext    = false;  // prevent feedback loop when we set hash programmatically
+
+// Called by app.js after shell+chat are initialised
+export function initRouter(resumeSession, switchTab) {
+  _resumeSession = resumeSession;
+  _switchTab     = switchTab;
+
+  // Handle hash changes (back/forward/manual)
+  window.addEventListener('hashchange', () => {
+    if (_ignoreNext) { _ignoreNext = false; return; }
+    applyHash(location.hash.slice(1) || '/');
+  });
+
+  // Keep hash in sync when session/tab changes
+  watch(currentTab, tab => {
+    if (ctx.sessionId) setHash(`/session/${ctx.sessionId}/${tab}`);
+  });
+}
+
+/** Parse `#/session/:id/:tab?` → { id, tab } or null */
+export function parseHashPath(path) {
+  const m = (path || '').match(/^\/session\/([^/]+)(?:\/([^/]+))?$/);
+  if (!m) return null;
+  return { id: m[1], tab: m[2] || null };
+}
+
+// Called by app.js when hash is not already handled by showApp deep-link
+export function applyInitialRoute() {
+  applyHash(location.hash.slice(1) || '/');
+}
+
+function applyHash(path) {
+  // /session/:id  or  /session/:id/:tab
+  const parsed = parseHashPath(path);
+  if (!parsed) {
+    document.dispatchEvent(new CustomEvent('router:home'));
+    return;
+  }
+  const { id, tab } = parsed;
+  if (!_resumeSession || !_switchTab) return;
+
+  if (id !== ctx.sessionId) {
+    // Need to look up cwd from loaded sessions — defer to shell
+    document.dispatchEvent(new CustomEvent('router:session', { detail: { id, tab } }));
+  } else if (tab && tab !== currentTab.peek()) {
+    _switchTab(tab);
+  }
+}
+
+export function setHash(path) {
+  _ignoreNext = true;
+  location.hash = path;
+}
+
+// Convenience: call after resumeSession completes to set URL
+export function syncHash() {
+  if (ctx.sessionId) setHash(`/session/${ctx.sessionId}/${currentTab.peek()}`);
+}

package/public/settings.js

@@ -0,0 +1,90 @@
+// settings.js — Workspace settings modal
+import { esc, $ } from './lib.js';
+import { api } from './api.js';
+import { workspacesData } from './state.js';
+import { setCachedWorkspaces } from './cache.js';
+
+export function initSettings() {
+  document.getElementById('root').insertAdjacentHTML('beforeend', `
+    <dialog id="modal-settings" class="modal">
+      <div class="modal-box max-w-lg">
+        <h3 class="font-bold text-base mb-4">⚙️ Settings — Workspaces</h3>
+        <div id="ws-list" class="flex flex-col gap-2 mb-4"></div>
+        <div class="border-t border-base-300 pt-4">
+          <div class="text-xs uppercase tracking-wider text-base-content/50 mb-2">Add workspace</div>
+          <div class="flex gap-2 mb-2">
+            <input id="ws-new-name" type="text" placeholder="Name (e.g. personal)" class="input input-sm input-bordered flex-1">
+            <input id="ws-new-dir"  type="text" placeholder="~/.claude-personal"    class="input input-sm input-bordered flex-[2]">
+            <button id="ws-add-btn" class="btn btn-primary btn-sm">Add</button>
+          </div>
+          <div id="ws-error" class="alert alert-error text-xs py-1.5 hidden"></div>
+        </div>
+        <div class="modal-action">
+          <form method="dialog"><button class="btn btn-ghost btn-sm">Close</button></form>
+        </div>
+      </div>
+      <form method="dialog" class="modal-backdrop"><button>close</button></form>
+    </dialog>`);
+
+  renderWsList();
+
+  document.getElementById('ws-add-btn').addEventListener('click', addWorkspace);
+  document.getElementById('ws-new-name').addEventListener('keydown', e => { if (e.key === 'Enter') addWorkspace(); });
+  document.getElementById('ws-new-dir').addEventListener('keydown',  e => { if (e.key === 'Enter') addWorkspace(); });
+}
+
+function renderWsList() {
+  const el = $('ws-list');
+  if (!el) return;
+  const wss = workspacesData.peek();
+  if (!wss.length) { el.innerHTML = '<div class="text-xs text-base-content/40">No workspaces configured</div>'; return; }
+  el.innerHTML = wss.map(w => `
+    <div class="flex items-center gap-2 px-3 py-2 bg-base-200 rounded-lg">
+      <div class="flex-1 min-w-0">
+        <div class="text-sm font-medium">${esc(w.name)}</div>
+        <div class="text-xs font-mono text-base-content/50 truncate">${esc(w.configDir)}</div>
+      </div>
+      ${wss.length > 1
+        ? `<button class="btn btn-ghost btn-xs text-error" data-ws-delete="${esc(w.id)}">✕</button>`
+        : '<span class="text-[10px] text-base-content/30">default</span>'}
+    </div>`).join('');
+
+  el.querySelectorAll('[data-ws-delete]').forEach(btn => {
+    btn.addEventListener('click', () => deleteWorkspace(btn.dataset.wsDelete));
+  });
+}
+
+async function addWorkspace() {
+  const name   = $('ws-new-name').value.trim();
+  const dir    = $('ws-new-dir').value.trim();
+  const errEl  = $('ws-error');
+  errEl.classList.add('hidden');
+  if (!name || !dir) { errEl.textContent = 'Name and path are required'; errEl.classList.remove('hidden'); return; }
+  try {
+    const ws = await api('POST', '/api/workspaces', { name, configDir: dir });
+    workspacesData.value = [...workspacesData.peek(), ws];
+    setCachedWorkspaces(workspacesData.peek());
+    $('ws-new-name').value = '';
+    $('ws-new-dir').value  = '';
+    renderWsList();
+  } catch (e) {
+    errEl.textContent = e.message;
+    errEl.classList.remove('hidden');
+  }
+}
+
+async function deleteWorkspace(id) {
+  try {
+    await api('DELETE', `/api/workspaces/${id}`);
+    workspacesData.value = workspacesData.peek().filter(w => w.id !== id);
+    setCachedWorkspaces(workspacesData.peek());
+    renderWsList();
+  } catch (e) {
+    alert(e.message);
+  }
+}
+
+export function openSettings() {
+  renderWsList();
+  $('modal-settings')?.showModal();
+}

package/public/shell/boot.js

@@ -0,0 +1,159 @@
+// shell/boot.js — showApp after login
+import { $ } from '../lib.js';
+import {
+  hubMode, machinesList, hubMachineReady, setSelectedMachine, sessionsData, ctx,
+} from '../state.js';
+import { probeHub } from '../api.js';
+import { getCachedSessions } from '../cache.js';
+import { getLastSessionContext } from './session-context.js';
+import { loadAllSessions, loadWorkspaces, loadAgentsMeta } from './session-list.js';
+import { loadSessionMetaMap } from './notes.js';
+import { resumeSession } from './session-nav.js';
+import {
+  refreshMachinesList, hideMachinePicker, showMachinePicker,
+  syncTopbarMachine, startMachinePolling,
+} from './hub.js';
+
+export async function showApp(opts = {}) {
+  $('auth-screen').style.display = 'none';
+  const app = $('app');
+  app.classList.remove('hidden');
+  app.style.display = 'flex';
+
+  // Use probe result from boot when provided (avoid second /api/hub round-trip)
+  let hub = opts.hub;
+  if (hub === undefined) {
+    hub = await probeHub();
+  } else if (hub) {
+    hubMode.value = true;
+    if (hub.machines) machinesList.value = hub.machines;
+  } else {
+    hubMode.value = false;
+  }
+
+  const deep = opts.deepLink || null;
+  const last = getLastSessionContext();
+
+  // Keep welcome hidden while restoring (prevents calendar flash)
+  const restoring = !!(deep?.id || (location.hash || '').startsWith('#/session/'));
+  if (restoring) {
+    const welcome = $('welcome');
+    if (welcome) {
+      welcome.classList.add('hidden');
+      welcome.style.display = 'none';
+    }
+    const pv = $('project-view');
+    if (pv) {
+      pv.classList.remove('hidden');
+      pv.style.display = 'flex';
+      pv.style.flexDirection = 'column';
+      pv.style.flex = '1';
+      pv.style.minHeight = '0';
+    }
+  }
+
+  if (hubMode.peek()) {
+    const remembered = localStorage.getItem('machineId') || last?.machineId || '';
+    // Optimistic: use remembered machine immediately (don't wait for machines list)
+    if (remembered) {
+      setSelectedMachine(remembered);
+      hideMachinePicker();
+      hubMachineReady.value = true;
+    }
+
+    // Machines list: refresh in background; only block picker if no remembered id
+    const machinesP = refreshMachinesList().then(ms => {
+      syncTopbarMachine();
+      if (!remembered) return ms;
+      const online = ms.some(m => m.id === remembered && m.online !== false);
+      if (!online && ms.length) {
+        // remembered offline — user can switch from menu; keep selection unless gone entirely
+        const exists = ms.some(m => m.id === remembered);
+        if (!exists) {
+          setSelectedMachine(null);
+          showMachinePicker();
+        }
+      }
+      return ms;
+    });
+
+    startMachinePolling();
+    syncTopbarMachine();
+
+    // Sessions/workspaces/models: paint cache fast, refresh bg — don't block deep-link
+    const dataP = Promise.all([
+      loadAllSessions({ waitFresh: false }),
+      loadWorkspaces({ waitFresh: false }),
+      loadSessionMetaMap().catch(() => {}),
+      loadAgentsMeta().catch(() => {}),
+    ]);
+
+    // Deep-link ASAP using lastSessionContext / list cache
+    if (deep?.id) {
+      const s = sessionsData.peek().find(x => x.sessionId === deep.id)
+        || (last?.sessionId === deep.id ? last : null);
+      await resumeSession(
+        deep.id,
+        s?.cwd || last?.cwd || null,
+        s?.configDir || last?.configDir || null,
+        s?.agent || last?.agent || null,
+        s?.machineId || last?.machineId || remembered || null,
+        { tab: deep.tab || 'chat' },
+      );
+      // ensure machines eventually known
+      machinesP.catch(() => {});
+      dataP.catch(() => {});
+      return;
+    }
+
+    if (!remembered) {
+      await machinesP;
+      const ms = machinesList.peek() || [];
+      if (!ms.length) {
+        showMachinePicker();
+        dataP.catch(() => {});
+        return;
+      }
+      showMachinePicker();
+      dataP.catch(() => {});
+      return;
+    }
+
+    await dataP;
+    const bar = $('topbar-project');
+    if (bar && bar.textContent === 'Select a session') {
+      bar.textContent = `Machine · ${remembered}`;
+    }
+    return;
+  }
+
+  // Standalone: cache-first sessions + live model lists, then deep link
+  const dataP = Promise.all([
+    loadAllSessions({ waitFresh: false }),
+    loadWorkspaces({ waitFresh: false }),
+    loadSessionMetaMap().catch(() => {}),
+    loadAgentsMeta().catch(() => {}),
+  ]);
+
+  if (deep?.id) {
+    // Apply cache if any, then resume without waiting for network sessions
+    await getCachedSessions().then(c => {
+      if (Array.isArray(c)) sessionsData.value = c;
+      else if (c && Array.isArray(c.sessions)) sessionsData.value = c.sessions;
+    }).catch(() => {});
+    const s = sessionsData.peek().find(x => x.sessionId === deep.id)
+      || (last?.sessionId === deep.id ? last : null);
+    await resumeSession(
+      deep.id,
+      s?.cwd || last?.cwd || null,
+      s?.configDir || last?.configDir || null,
+      s?.agent || last?.agent || null,
+      null,
+      { tab: deep.tab || 'chat' },
+    );
+    dataP.catch(() => {});
+    return;
+  }
+
+  await dataP;
+}

package/public/shell/dashboard.js

@@ -0,0 +1,269 @@
+// shell/dashboard.js — welcome calendar + stats
+import { esc, $ } from '../lib.js';
+import {
+  ctx, sessionsData, agentFilter, hubMode, selectedMachineId, sessionDisplayTitle,
+} from '../state.js';
+import { formatTime, agentBadge, shortPath, coerceTs } from './util.js';
+
+export let calYear = new Date().getFullYear();
+export let calMonth = new Date().getMonth(); // 0-11
+export let selectedCalDate = null;
+
+function asSessionArray(v) {
+  if (Array.isArray(v)) return v;
+  if (v && Array.isArray(v.results)) return v.results;
+  if (v && Array.isArray(v.sessions)) return v.sessions;
+  return [];
+}
+
+/**
+ * Sessions for home calendar/stats.
+ * Uses full session list (not sidebar 14d / 120-cap filters) so the month grid is complete.
+ * Still respects agent filter + hub machine selection.
+ */
+export function getDashboardSessions() {
+  let list = asSessionArray(sessionsData.peek());
+  const mid = selectedMachineId.peek();
+  if (hubMode.peek() && mid) {
+    list = list.filter(s => s && (!s.machineId || s.machineId === mid));
+  }
+  const aFilter = agentFilter.peek();
+  if (aFilter && aFilter !== 'all') {
+    list = list.filter(s => s && (s.agent || 'claude') === aFilter);
+  }
+  return list;
+}
+
+function getLocalDateString(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function getMonthGrid(year, month) {
+  const cells = [];
+  const firstDay = new Date(year, month, 1);
+  const startDay = firstDay.getDay();
+  const lastDay = new Date(year, month + 1, 0);
+  const totalDays = lastDay.getDate();
+  const prevLastDay = new Date(year, month, 0).getDate();
+  
+  for (let i = startDay - 1; i >= 0; i--) {
+    cells.push({
+      date: new Date(year, month - 1, prevLastDay - i),
+      isCurrentMonth: false
+    });
+  }
+  
+  for (let i = 1; i <= totalDays; i++) {
+    cells.push({
+      date: new Date(year, month, i),
+      isCurrentMonth: true
+    });
+  }
+  
+  const remaining = 7 - (cells.length % 7);
+  if (remaining < 7) {
+    for (let i = 1; i <= remaining; i++) {
+      cells.push({
+        date: new Date(year, month + 1, i),
+        isCurrentMonth: false
+      });
+    }
+  }
+  
+  return cells;
+}
+
+function getSessionsForDate(date, sessions) {
+  const start = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  const end = start + 24 * 60 * 60 * 1000;
+  return sessions.filter(s => {
+    const ts = coerceTs(s.updatedAt);
+    return ts != null && ts >= start && ts < end;
+  });
+}
+
+function formatTokenCount(n) {
+  if (n == null || isNaN(n)) return '0';
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return String(n);
+}
+
+export function updateDashboard(sessions) {
+  const grid = $('calendar-grid');
+  if (!grid) return;
+
+  // Always normalize; callers may pass filteredSessions / cache shapes
+  sessions = asSessionArray(sessions != null ? sessions : getDashboardSessions());
+
+  const header = $('calendar-month-year');
+  if (header) {
+    const dummyDate = new Date(calYear, calMonth, 1);
+    header.textContent = dummyDate.toLocaleDateString([], { month: 'long', year: 'numeric' });
+  }
+
+  // Calculate total sessions, unique projects, and total tokens
+  const totalSessions = sessions.length;
+  const uniqueProjects = new Set(sessions.map(s => s.cwd).filter(Boolean)).size;
+  const totalTokens = sessions.reduce((acc, s) => acc + (Number(s.totalTokens) || 0), 0);
+
+  const tSessionsEl = $('stats-total-sessions');
+  const tProjectsEl = $('stats-total-projects');
+  const tTokensEl = $('stats-total-tokens');
+
+  if (tSessionsEl) tSessionsEl.textContent = String(totalSessions);
+  if (tProjectsEl) tProjectsEl.textContent = String(uniqueProjects);
+  if (tTokensEl) tTokensEl.textContent = formatTokenCount(totalTokens);
+
+  const cells = getMonthGrid(calYear, calMonth);
+
+  if (!selectedCalDate) {
+    selectedCalDate = getLocalDateString(new Date());
+  }
+
+  grid.innerHTML = cells.map(cell => {
+    const day = cell.date;
+    const dateStr = getLocalDateString(day);
+    const daySessions = getSessionsForDate(day, sessions);
+    const count = daySessions.length;
+    const isToday = day.toDateString() === new Date().toDateString();
+    const isSelected = dateStr === selectedCalDate;
+    
+    let bgClass = '';
+    let textClass = 'text-base-content/65';
+    let borderClass = 'border border-transparent';
+    let cursorClass = 'cursor-default';
+    let opacityClass = cell.isCurrentMonth ? '' : 'opacity-25';
+
+    if (count > 0) {
+      cursorClass = 'cursor-pointer';
+      if (count <= 2) {
+        bgClass = 'bg-primary/15';
+        textClass = 'text-primary font-bold';
+        borderClass = 'border border-primary/30';
+      } else if (count <= 5) {
+        bgClass = 'bg-primary/30';
+        textClass = 'text-primary font-bold';
+        borderClass = 'border border-primary/50';
+      } else {
+        bgClass = 'bg-primary/60';
+        textClass = 'text-primary-content font-bold';
+        borderClass = 'border border-primary/80';
+      }
+    } else {
+      bgClass = 'bg-base-300/25';
+      if (cell.isCurrentMonth) cursorClass = 'hover:bg-base-300/50';
+    }
+
+    if (isToday) {
+      borderClass = 'border-2 border-primary';
+    } else if (isSelected) {
+      borderClass = 'border-2 border-accent';
+    }
+
+    const monthLabel = day.getDate() === 1 ? `<span class="absolute top-0.5 left-1 text-[8px] opacity-60 uppercase">${day.toLocaleDateString([], {month:'short'})}</span>` : '';
+
+    return `
+      <div class="aspect-square rounded-xl flex flex-col items-center justify-center p-2 relative transition-all min-h-[50px] md:min-h-[60px] ${bgClass} ${textClass} ${borderClass} ${cursorClass} ${opacityClass}" 
+           data-cal-date="${dateStr}" title="${day.toDateString()}: ${count} session(s)">
+        ${monthLabel}
+        <span class="text-sm font-semibold">${day.getDate()}</span>
+        ${count > 0 ? `<span class="text-[10px] mt-0.5 opacity-80 font-medium whitespace-nowrap">${count}s</span>` : ''}
+      </div>`;
+  }).join('');
+
+  showSelectedDaySessions(sessions);
+  updateRecentSessionsList(sessions);
+}
+
+export function showSelectedDaySessions(sessions) {
+  const titleEl = $('selected-day-title');
+  const listEl = $('selected-day-sessions');
+  if (!titleEl || !listEl) return;
+
+  const [y, m, d] = selectedCalDate.split('-').map(Number);
+  const targetDate = new Date(y, m - 1, d);
+  titleEl.textContent = `Activity on ${targetDate.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}`;
+
+  sessions = asSessionArray(sessions);
+  const daySessions = getSessionsForDate(targetDate, sessions);
+  const selectedTokens = daySessions.reduce((acc, s) => acc + (Number(s.totalTokens) || 0), 0);
+  const sTokensEl = $('stats-selected-tokens');
+  if (sTokensEl) sTokensEl.textContent = formatTokenCount(selectedTokens);
+
+  if (!daySessions.length) {
+    listEl.innerHTML = `<div class="text-center text-xs text-base-content/40 my-auto py-6">No sessions active on this day</div>`;
+    return;
+  }
+
+  daySessions.sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0));
+
+  listEl.innerHTML = daySessions.map(s => {
+    const ms = coerceTs(s.updatedAt);
+    const timeStr = ms != null
+      ? new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      : '';
+    const active = ctx.sessionId === s.sessionId;
+    return `
+      <div class="flex items-center gap-2.5 p-2.5 rounded-lg bg-base-300/40 hover:bg-base-300 border border-base-300/50 cursor-pointer text-left transition-all ${active ? 'border-primary bg-primary/5' : ''}"
+           data-session-id="${esc(s.sessionId)}"
+           data-session-cwd="${esc(s.cwd || '')}"
+           data-session-config-dir="${esc(s.configDir || '')}"
+           data-session-agent="${esc(s.agent || 'claude')}"
+           data-session-machine="${esc(s.machineId || '')}">
+        <div class="flex-shrink-0">${agentBadge(s.agent)}</div>
+        <div class="flex-1 min-w-0">
+          <div class="text-xs font-semibold truncate text-base-content/90">${esc(sessionDisplayTitle(s))}</div>
+          <div class="text-[10px] text-base-content/40 truncate mt-0.5">${esc(s.projectName || shortPath(s.cwd) || 'No workspace')}</div>
+        </div>
+        <div class="text-[9px] text-base-content/45 font-mono whitespace-nowrap bg-base-300 px-1.5 py-0.5 rounded">${timeStr}</div>
+      </div>`;
+  }).join('');
+}
+
+export function updateRecentSessionsList(sessions) {
+  const container = $('recent-sessions-list');
+  if (!container) return;
+
+  sessions = asSessionArray(sessions);
+  const recent = [...sessions]
+    .sort((a, b) => (coerceTs(b.updatedAt) || 0) - (coerceTs(a.updatedAt) || 0))
+    .slice(0, 6);
+
+  if (!recent.length) {
+    container.innerHTML = `<div class="col-span-full text-center text-xs text-base-content/40 py-4">No recent sessions</div>`;
+    return;
+  }
+
+  container.innerHTML = recent.map(s => {
+    const timeStr = formatTime(s.updatedAt);
+    const active = ctx.sessionId === s.sessionId;
+    return `
+      <div class="flex items-center gap-2.5 p-3 rounded-xl bg-base-200 hover:bg-base-300 border border-base-300/80 cursor-pointer text-left transition-all ${active ? 'border-primary bg-primary/5' : ''}"
+           data-session-id="${esc(s.sessionId)}"
+           data-session-cwd="${esc(s.cwd || '')}"
+           data-session-config-dir="${esc(s.configDir || '')}"
+           data-session-agent="${esc(s.agent || 'claude')}"
+           data-session-machine="${esc(s.machineId || '')}">
+        <div class="flex-shrink-0">${agentBadge(s.agent)}</div>
+        <div class="flex-1 min-w-0">
+          <div class="text-xs font-bold truncate text-base-content/95">${esc(sessionDisplayTitle(s))}</div>
+          <div class="text-[10px] text-base-content/40 truncate mt-1">${esc(s.projectName || shortPath(s.cwd) || 'No workspace')}</div>
+        </div>
+        <div class="text-[9px] text-base-content/40 whitespace-nowrap self-start mt-0.5">${timeStr}</div>
+      </div>`;
+  }).join('');
+}
+
+export function setCalMonthYear(m, y) { calMonth = m; calYear = y; }
+export function setSelectedCalDate(d) { selectedCalDate = d; }
+
+/** Mutate calendar month by delta months (imported bindings are read-only). */
+export function shiftCalMonth(delta) {
+  calMonth += delta;
+  if (calMonth < 0) { calMonth = 11; calYear--; }
+  else if (calMonth > 11) { calMonth = 0; calYear++; }
+}