claudeck 1.0.0

package/public/js/features/home.js

@@ -0,0 +1,270 @@
+// Home page — AI Activity contribution grid + summary cards
+import { $ } from '../core/dom.js';
+import { on as onState, setState, getState } from '../core/store.js';
+import { fetchHomeData } from '../core/api.js';
+import { loadHomeAnalytics } from './analytics.js';
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+// ── View switching ─────────────────────────────────────
+const chatAreaMain = document.querySelector('.chat-area-main');
+
+// ── Data loading ───────────────────────────────────────
+let loaded = false;
+
+async function loadHome() {
+  loaded = false;
+  try {
+    const data = await fetchHomeData();
+    renderGrid(data.yearlyActivity);
+    renderCards(data.yearlyActivity, data.overview);
+    loadHomeAnalytics();
+    loaded = true;
+  } catch (err) {
+    console.error('Failed to load home data:', err);
+  }
+}
+
+onState('view', (view) => {
+  $.homePage.classList.toggle('hidden', view !== 'home');
+  chatAreaMain.classList.toggle('hidden', view !== 'chat');
+  $.homeBtn.classList.toggle('active', view === 'home');
+  if (view === 'home') loadHome();
+});
+
+onState('sessionId', (id) => {
+  if (id) setState('view', 'chat');
+});
+
+$.homeBtn.addEventListener('click', () => {
+  setState('view', 'home');
+  setState('sessionId', null);
+  $.projectSelect.value = '';
+  localStorage.removeItem('claudeck-cwd');
+  $.sessionList.innerHTML = '';
+});
+
+// ── Grid rendering ─────────────────────────────────────
+function renderGrid(activity) {
+  const grid = document.getElementById('home-activity-grid');
+  const monthsRow = document.getElementById('home-grid-months');
+  const yearLabel = document.getElementById('home-year-label');
+
+  // Build date map
+  const dateMap = {};
+  for (const row of activity) {
+    dateMap[row.date] = row;
+  }
+
+  // Today and start date (364 days ago, aligned to Sunday)
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const start = new Date(today);
+  start.setDate(start.getDate() - 364);
+  // Align to Sunday (day 0)
+  const dayOfWeek = start.getDay();
+  start.setDate(start.getDate() - dayOfWeek);
+
+  yearLabel.textContent = `${start.getFullYear()} – ${today.getFullYear()}`;
+
+  // Collect all cells with their scores
+  const cells = [];
+  const scores = [];
+  const d = new Date(start);
+
+  while (d <= today) {
+    const key = localDateStr(d);
+    const row = dateMap[key];
+    let score = 0;
+    if (row) {
+      score = row.sessions + row.queries + (row.cost * 50) + ((row.input_tokens + row.output_tokens) / 5000);
+    }
+    cells.push({ date: key, row, score });
+    if (score > 0) scores.push(score);
+    d.setDate(d.getDate() + 1);
+  }
+
+  // Quartile thresholds
+  scores.sort((a, b) => a - b);
+  const p25 = scores[Math.floor(scores.length * 0.25)] || 0;
+  const p50 = scores[Math.floor(scores.length * 0.50)] || 0;
+  const p75 = scores[Math.floor(scores.length * 0.75)] || 0;
+
+  function getLevel(score) {
+    if (score === 0) return 0;
+    if (score <= p25) return 1;
+    if (score <= p50) return 2;
+    if (score <= p75) return 3;
+    return 4;
+  }
+
+  // Render cells
+  grid.innerHTML = '';
+  for (const cell of cells) {
+    const div = document.createElement('div');
+    div.className = 'home-grid-cell';
+    div.dataset.level = getLevel(cell.score);
+    div.dataset.date = cell.date;
+    if (cell.row) {
+      div.dataset.sessions = cell.row.sessions;
+      div.dataset.queries = cell.row.queries;
+      div.dataset.cost = cell.row.cost.toFixed(2);
+      div.dataset.tokens = (cell.row.input_tokens + cell.row.output_tokens).toString();
+    }
+    grid.appendChild(div);
+  }
+
+  // Month labels
+  monthsRow.innerHTML = '';
+  let currentMonth = -1;
+  let weekIndex = 0;
+  const cellSize = 15; // 12px + 3px gap
+  const dc = new Date(start);
+
+  while (dc <= today) {
+    if (dc.getDay() === 0) { // start of week
+      const m = dc.getMonth();
+      if (m !== currentMonth) {
+        const span = document.createElement('span');
+        span.textContent = MONTHS[m];
+        span.style.marginLeft = (weekIndex * cellSize) + 'px';
+        span.style.position = 'absolute';
+        monthsRow.appendChild(span);
+        currentMonth = m;
+      }
+      weekIndex++;
+    }
+    dc.setDate(dc.getDate() + 1);
+  }
+  monthsRow.style.position = 'relative';
+  monthsRow.style.height = '16px';
+
+  // Tooltip
+  setupTooltip(grid);
+}
+
+// ── Tooltip ────────────────────────────────────────────
+let tooltip = null;
+
+function setupTooltip(grid) {
+  grid.addEventListener('mouseover', (e) => {
+    const cell = e.target.closest('.home-grid-cell');
+    if (!cell) return;
+    if (!tooltip) {
+      tooltip = document.createElement('div');
+      tooltip.className = 'home-grid-tooltip';
+      document.body.appendChild(tooltip);
+    }
+    const date = cell.dataset.date;
+    const sessions = cell.dataset.sessions || '0';
+    const queries = cell.dataset.queries || '0';
+    const cost = cell.dataset.cost || '0.00';
+    const tokens = cell.dataset.tokens || '0';
+
+    tooltip.innerHTML = `<strong>${date}</strong><br>` +
+      `${sessions} sessions &middot; ${queries} queries<br>` +
+      `${formatTokens(+tokens)} tokens &middot; $${cost}`;
+    tooltip.style.display = 'block';
+  });
+
+  grid.addEventListener('mousemove', (e) => {
+    if (tooltip) {
+      tooltip.style.left = (e.clientX + 12) + 'px';
+      tooltip.style.top = (e.clientY - 40) + 'px';
+    }
+  });
+
+  grid.addEventListener('mouseout', (e) => {
+    if (!e.target.closest('.home-grid-cell')) return;
+    if (tooltip) tooltip.style.display = 'none';
+  });
+}
+
+// ── Summary cards ──────────────────────────────────────
+function renderCards(activity, overview) {
+  const cards = document.getElementById('home-cards');
+
+  // Streak calculations
+  const activeDates = new Set(activity.map(r => r.date));
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const todayKey = localDateStr(today);
+
+  // Current streak
+  let currentStreak = 0;
+  const d = new Date(today);
+  while (true) {
+    const key = localDateStr(d);
+    if (activeDates.has(key)) {
+      currentStreak++;
+      d.setDate(d.getDate() - 1);
+    } else {
+      break;
+    }
+  }
+
+  // Longest streak
+  let longestStreak = 0;
+  let streak = 0;
+  const sortedDates = [...activeDates].sort();
+  for (let i = 0; i < sortedDates.length; i++) {
+    if (i === 0) {
+      streak = 1;
+    } else {
+      const prev = new Date(sortedDates[i - 1]);
+      const curr = new Date(sortedDates[i]);
+      const diff = (curr - prev) / 86400000;
+      streak = diff === 1 ? streak + 1 : 1;
+    }
+    longestStreak = Math.max(longestStreak, streak);
+  }
+
+  // Today's stats
+  const todayData = activity.find(r => r.date === todayKey);
+  const todayCost = todayData ? todayData.cost : 0;
+  const todayQueries = todayData ? todayData.queries : 0;
+
+  const totalTokens = overview.totalOutputTokens || 0;
+  const totalSessions = overview.sessions || 0;
+  const totalCost = overview.totalCost || 0;
+
+  const cardData = [
+    { label: 'Sessions', value: totalSessions.toLocaleString(), sub: 'all time' },
+    { label: 'Total Cost', value: '$' + totalCost.toFixed(2), sub: 'all time' },
+    { label: 'Output Tokens', value: formatTokens(totalTokens), sub: 'all time' },
+    { label: 'Current Streak', value: currentStreak + 'd', sub: currentStreak > 0 ? 'active' : 'no activity today' },
+    { label: 'Longest Streak', value: longestStreak + 'd', sub: 'consecutive days' },
+    { label: 'Today', value: todayQueries + ' queries', sub: '$' + todayCost.toFixed(2) },
+  ];
+
+  cards.innerHTML = cardData.map(c => `
+    <div class="home-card">
+      <div class="home-card-label">${c.label}</div>
+      <div class="home-card-value">${c.value}</div>
+      <div class="home-card-sub">${c.sub}</div>
+    </div>
+  `).join('');
+}
+
+// ── Helpers ────────────────────────────────────────────
+function localDateStr(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+function formatTokens(n) {
+  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 n.toString();
+}
+
+// If a session was already restored from localStorage before this module loaded,
+// or a project was previously selected, switch to chat view; otherwise load home.
+const savedProject = localStorage.getItem('claudeck-cwd');
+if (getState('sessionId') || savedProject) {
+  setState('view', 'chat');
+} else if (getState('view') === 'home') {
+  loadHome();
+}

package/public/js/features/projects.js

@@ -0,0 +1,372 @@
+// Project selection & system prompts
+import { $ } from '../core/dom.js';
+import { getState, setState } from '../core/store.js';
+import { CHAT_IDS } from '../core/constants.js';
+import * as api from '../core/api.js';
+import { commandRegistry, registerCommand } from '../ui/commands.js';
+import { panes } from '../ui/parallel.js';
+import { loadSessions } from './sessions.js';
+import { loadStats } from './cost-dashboard.js';
+import { showWhalyPlaceholder } from '../ui/messages.js';
+
+export async function loadProjects() {
+  try {
+    const projects = await api.fetchProjects();
+    setState("projectsData", projects);
+    const saved = localStorage.getItem("claudeck-cwd") || "";
+
+    for (const p of projects) {
+      const opt = document.createElement("option");
+      opt.value = p.path;
+      opt.textContent = p.name;
+      $.projectSelect.appendChild(opt);
+    }
+
+    if (saved && [...$.projectSelect.options].some((o) => o.value === saved)) {
+      $.projectSelect.value = saved;
+    }
+    updateSystemPromptIndicator();
+    updateHeaderProjectName();
+    updateSessionControls();
+    loadProjectCommands();
+    // Load sessions after project dropdown is populated so they filter correctly
+    loadSessions();
+
+    // If a session was restored from localStorage, load its messages
+    const { getState } = await import('../core/store.js');
+    const { loadMessages } = await import('./sessions.js');
+    const restoredSid = getState("sessionId");
+    if (restoredSid) {
+      loadMessages(restoredSid);
+    }
+  } catch (err) {
+    console.error("Failed to load projects:", err);
+  }
+}
+
+const sessionControls = document.getElementById("session-controls");
+
+function updateSessionControls() {
+  if ($.projectSelect.value) {
+    sessionControls.classList.remove("hidden");
+  } else {
+    sessionControls.classList.add("hidden");
+  }
+}
+
+export function updateSystemPromptIndicator() {
+  const cwd = $.projectSelect.value;
+  const project = getState("projectsData").find((p) => p.path === cwd);
+  if (project && project.systemPrompt) {
+    $.spBadge.classList.remove("hidden");
+  } else {
+    $.spBadge.classList.add("hidden");
+  }
+}
+
+export function openSystemPromptModal() {
+  const cwd = $.projectSelect.value;
+  if (!cwd) return;
+  const project = getState("projectsData").find((p) => p.path === cwd);
+  $.spTextarea.value = project?.systemPrompt || "";
+  $.spModal.classList.remove("hidden");
+  $.spTextarea.focus();
+}
+
+export async function saveSystemPrompt(prompt) {
+  const cwd = $.projectSelect.value;
+  if (!cwd) return;
+  try {
+    await api.saveSystemPromptApi(cwd, prompt);
+    const project = getState("projectsData").find((p) => p.path === cwd);
+    if (project) project.systemPrompt = prompt;
+    updateSystemPromptIndicator();
+  } catch (err) {
+    console.error("Failed to save system prompt:", err);
+  }
+}
+
+export function updateHeaderProjectName() {
+  const opt = $.projectSelect.options[$.projectSelect.selectedIndex];
+  $.headerProjectName.textContent = opt && opt.value ? opt.textContent : "";
+}
+
+export async function loadProjectCommands() {
+  // Remove old project commands and skills
+  for (const [name, cmd] of Object.entries(commandRegistry)) {
+    if (cmd.category === "project" || cmd.category === "skill") delete commandRegistry[name];
+  }
+
+  const cwd = $.projectSelect.value;
+  if (!cwd) return;
+
+  try {
+    const commands = await api.fetchProjectCommands(cwd);
+    if (!Array.isArray(commands) || commands.length === 0) return;
+
+    for (const c of commands) {
+      const slug = c.command;
+      if (!slug || commandRegistry[slug]) continue;
+      const hasArgs = c.prompt.includes("$ARGUMENTS");
+      const label = c.source === "skill" ? `${c.description}` : (c.description || c.command);
+      registerCommand(slug, {
+        category: c.source === "skill" ? "skill" : "project",
+        description: label,
+        needsArgs: hasArgs,
+        argumentHint: c.argumentHint || "",
+        execute(args, pane) {
+          let prompt = c.prompt;
+          if (hasArgs) {
+            prompt = prompt.replace(/\$ARGUMENTS/g, args || "");
+          }
+          pane.messageInput.value = prompt;
+          pane.messageInput.style.height = "auto";
+          pane.messageInput.style.height = Math.min(pane.messageInput.scrollHeight, 200) + "px";
+          // Lazy import to avoid circular dep
+          import('./chat.js').then(({ sendMessage }) => sendMessage(pane));
+        },
+      });
+    }
+  } catch (err) {
+    console.error("Failed to load project commands:", err);
+  }
+}
+
+// ── Add Project (folder browser) ────────────────────────
+let currentBrowsePath = "";
+
+function openAddProjectModal() {
+  $.addProjectModal.classList.remove("hidden");
+  $.addProjectName.value = "";
+  navigateToDir(""); // defaults to $HOME on server
+}
+
+function closeAddProjectModal() {
+  $.addProjectModal.classList.add("hidden");
+}
+
+async function navigateToDir(dir) {
+  $.folderList.innerHTML = '<div class="folder-list-loading">Loading...</div>';
+  try {
+    const data = await api.browseFolders(dir || undefined);
+    currentBrowsePath = data.current;
+    renderBreadcrumb(data.current);
+    renderFolderList(data);
+    // Auto-fill name from last segment
+    const base = data.current.split(/[/\\]/).filter(Boolean).pop() || "";
+    $.addProjectName.value = base;
+  } catch (err) {
+    $.folderList.innerHTML = `<div class="folder-list-empty">Error: ${err.message}</div>`;
+  }
+}
+
+function renderBreadcrumb(pathStr) {
+  $.folderBreadcrumb.innerHTML = "";
+  const parts = pathStr.split(/[/\\]/).filter(Boolean);
+  // Root
+  const rootSeg = document.createElement("span");
+  rootSeg.className = "folder-breadcrumb-seg";
+  rootSeg.textContent = "/";
+  rootSeg.addEventListener("click", () => navigateToDir("/"));
+  $.folderBreadcrumb.appendChild(rootSeg);
+
+  let accumulated = "";
+  for (const part of parts) {
+    accumulated += "/" + part;
+    const sep = document.createElement("span");
+    sep.className = "folder-breadcrumb-sep";
+    sep.textContent = "/";
+    $.folderBreadcrumb.appendChild(sep);
+
+    const seg = document.createElement("span");
+    seg.className = "folder-breadcrumb-seg";
+    seg.textContent = part;
+    const target = accumulated;
+    seg.addEventListener("click", () => navigateToDir(target));
+    $.folderBreadcrumb.appendChild(seg);
+  }
+}
+
+function renderFolderList(data) {
+  $.folderList.innerHTML = "";
+
+  // Parent directory entry
+  if (data.parent) {
+    const parentItem = document.createElement("div");
+    parentItem.className = "folder-list-item";
+    parentItem.innerHTML = '<span class="folder-icon">..</span><span>Parent directory</span>';
+    parentItem.addEventListener("click", () => navigateToDir(data.parent));
+    $.folderList.appendChild(parentItem);
+  }
+
+  if (data.dirs.length === 0 && !data.parent) {
+    $.folderList.innerHTML = '<div class="folder-list-empty">No subdirectories</div>';
+    return;
+  }
+
+  if (data.dirs.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "folder-list-empty";
+    empty.textContent = "No subdirectories";
+    $.folderList.appendChild(empty);
+    return;
+  }
+
+  for (const dir of data.dirs) {
+    const item = document.createElement("div");
+    item.className = "folder-list-item";
+    item.innerHTML = `<span class="folder-icon">\u{1F4C1}</span><span>${dir.name}</span>`;
+    item.addEventListener("click", () => navigateToDir(dir.path));
+    $.folderList.appendChild(item);
+  }
+}
+
+async function confirmAddProject() {
+  const name = $.addProjectName.value.trim();
+  if (!name) {
+    $.addProjectName.focus();
+    return;
+  }
+  if (!currentBrowsePath) return;
+
+  // Check for duplicate in dropdown
+  const existing = [...$.projectSelect.options].find((o) => o.value === currentBrowsePath);
+  if (existing) {
+    alert("This project path is already added.");
+    return;
+  }
+
+  try {
+    const result = await api.addProject(name, currentBrowsePath);
+    const project = result.project;
+
+    // Add to dropdown and select it
+    const opt = document.createElement("option");
+    opt.value = project.path;
+    opt.textContent = project.name;
+    $.projectSelect.appendChild(opt);
+    $.projectSelect.value = project.path;
+
+    // Update state
+    const projects = getState("projectsData");
+    projects.push({ name: project.name, path: project.path });
+
+    localStorage.setItem("claudeck-cwd", project.path);
+    updateSystemPromptIndicator();
+    updateHeaderProjectName();
+    updateSessionControls();
+    loadProjectCommands();
+    loadSessions();
+    loadStats();
+
+    closeAddProjectModal();
+  } catch (err) {
+    alert("Failed to add project: " + err.message);
+  }
+}
+
+// Open in VS Code
+$.openVscodeBtn.addEventListener("click", async () => {
+  const path = $.projectSelect.value;
+  if (!path) return;
+  try {
+    await fetch("/api/exec", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ command: "code .", cwd: path }),
+    });
+  } catch { /* ignore */ }
+});
+
+// Add project button & modal event listeners
+$.addProjectBtn.addEventListener("click", openAddProjectModal);
+$.addProjectClose.addEventListener("click", closeAddProjectModal);
+$.addProjectConfirm.addEventListener("click", confirmAddProject);
+$.addProjectModal.addEventListener("click", (e) => {
+  if (e.target === $.addProjectModal) closeAddProjectModal();
+});
+
+// System prompt modal event listeners
+$.spEditBtn.addEventListener("click", openSystemPromptModal);
+$.spForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  await saveSystemPrompt($.spTextarea.value.trim());
+  $.spModal.classList.add("hidden");
+});
+document.getElementById("sp-cancel-btn").addEventListener("click", () => {
+  $.spModal.classList.add("hidden");
+});
+document.getElementById("sp-modal-close").addEventListener("click", () => {
+  $.spModal.classList.add("hidden");
+});
+document.getElementById("sp-clear-btn").addEventListener("click", async () => {
+  $.spTextarea.value = "";
+  await saveSystemPrompt("");
+  $.spModal.classList.add("hidden");
+});
+$.spModal.addEventListener("click", (e) => {
+  if (e.target === $.spModal) $.spModal.classList.add("hidden");
+});
+
+// Project change handler
+$.projectSelect.addEventListener("change", async () => {
+  const { guardSwitch } = await import('./background-sessions.js');
+  guardSwitch(() => {
+    localStorage.setItem("claudeck-cwd", $.projectSelect.value);
+    setState("sessionId", null);
+    if ($.projectSelect.value) {
+      setState("view", "chat");
+    }
+    updateSystemPromptIndicator();
+    updateHeaderProjectName();
+    updateSessionControls();
+    loadProjectCommands();
+    if (getState("parallelMode")) {
+      for (const chatId of CHAT_IDS) {
+        const pane = panes.get(chatId);
+        if (pane) {
+          pane.messagesDiv.innerHTML = "";
+          showWhalyPlaceholder(pane);
+        }
+      }
+    } else {
+      $.messagesDiv.innerHTML = "";
+      showWhalyPlaceholder();
+    }
+    loadSessions();
+    loadStats();
+  });
+});
+
+// New session button
+$.newSessionBtn.addEventListener("click", async () => {
+  const { guardSwitch } = await import('./background-sessions.js');
+  guardSwitch(() => {
+    setState("view", "chat");
+    setState("sessionId", null);
+    if (getState("parallelMode")) {
+      for (const chatId of CHAT_IDS) {
+        const pane = panes.get(chatId);
+        if (pane) {
+          pane.messagesDiv.innerHTML = "";
+          pane.currentAssistantMsg = null;
+          showWhalyPlaceholder(pane);
+        }
+      }
+    } else {
+      $.messagesDiv.innerHTML = "";
+      showWhalyPlaceholder();
+    }
+    loadSessions();
+    if (!getState("parallelMode")) $.messageInput.focus();
+  });
+});
+
+// Parallel mode toggle
+$.toggleParallelBtn.addEventListener("change", () => {
+  if ($.toggleParallelBtn.checked) {
+    import('../ui/parallel.js').then(({ enterParallelMode }) => enterParallelMode());
+  } else {
+    import('../ui/parallel.js').then(({ exitParallelMode }) => exitParallelMode());
+  }
+});