claudeck 1.0.0

package/public/js/panels/tips-feed.js

@@ -0,0 +1,303 @@
+// Tips Feed Panel
+import { $ } from '../core/dom.js';
+import { getState, on } from '../core/store.js';
+import { registerCommand } from '../ui/commands.js';
+import { fetchTips, fetchRssFeed } from '../core/api.js';
+
+const LS_OPEN = 'claudeck-tips-feed';
+const LS_CATEGORY = 'claudeck-tips-category';
+const LS_WIDTH = 'claudeck-tips-width';
+
+let tipsData = null;
+let rssItems = {};    // feedId -> items[]
+let activeCategory = localStorage.getItem(LS_CATEGORY) || 'all';
+
+// ── Toggle ──────────────────────────────────────────────
+export function toggleTipsFeed() {
+  if (getState('parallelMode')) return;
+  const panel = $.tipsFeedPanel;
+  if (!panel) return;
+  const isHidden = panel.classList.contains('hidden');
+  if (isHidden) {
+    openTipsFeed();
+  } else {
+    closeTipsFeed();
+  }
+}
+
+function openTipsFeed() {
+  if (getState('parallelMode')) return;
+  const panel = $.tipsFeedPanel;
+  if (!panel) return;
+  panel.classList.remove('hidden');
+  localStorage.setItem(LS_OPEN, '1');
+  if ($.tipsFeedToggleBtn) $.tipsFeedToggleBtn.classList.add('active');
+
+  // Restore width
+  const savedWidth = localStorage.getItem(LS_WIDTH);
+  if (savedWidth) panel.style.width = savedWidth + 'px';
+
+  // Load data if not loaded
+  if (!tipsData) loadTipsData();
+}
+
+function closeTipsFeed() {
+  const panel = $.tipsFeedPanel;
+  if (!panel) return;
+  panel.classList.add('hidden');
+  localStorage.setItem(LS_OPEN, '0');
+  if ($.tipsFeedToggleBtn) $.tipsFeedToggleBtn.classList.remove('active');
+}
+
+// ── Data Loading ────────────────────────────────────────
+async function loadTipsData() {
+  const content = $.tipsFeedContent;
+  if (!content) return;
+  content.innerHTML = '<div class="tips-feed-loading">Loading tips...</div>';
+
+  try {
+    const [tipsResult, ...rssResults] = await Promise.allSettled([
+      fetchTips(),
+      // RSS feeds will be loaded after we know the feed URLs
+    ]);
+
+    if (tipsResult.status === 'fulfilled') {
+      tipsData = tipsResult.value;
+      // Now load RSS feeds
+      if (tipsData.feeds) {
+        const rssPromises = tipsData.feeds.map(feed =>
+          fetchRssFeed(feed.url).then(data => ({ feedId: feed.id, feed, items: data.items || [] }))
+        );
+        const rssSettled = await Promise.allSettled(rssPromises);
+        rssSettled.forEach(r => {
+          if (r.status === 'fulfilled') {
+            rssItems[r.value.feedId] = { feed: r.value.feed, items: r.value.items };
+          }
+        });
+      }
+    }
+
+    renderFeed();
+  } catch {
+    content.innerHTML = '<div class="tips-feed-loading">Failed to load tips</div>';
+  }
+}
+
+// ── Rendering ───────────────────────────────────────────
+function renderFeed() {
+  const content = $.tipsFeedContent;
+  if (!content || !tipsData) return;
+
+  content.innerHTML = '';
+
+  // Tip of the day
+  const totd = getTipOfTheDay();
+  if (totd && (activeCategory === 'all' || activeCategory === totd.category)) {
+    content.appendChild(renderTotd(totd));
+  }
+
+  // Category tabs
+  renderTabs();
+
+  // Filter tips
+  const tips = activeCategory === 'all'
+    ? tipsData.tips
+    : tipsData.tips.filter(t => t.category === activeCategory);
+
+  // Section: Curated Tips
+  if (tips.length > 0) {
+    const label = document.createElement('div');
+    label.className = 'tips-feed-section-label';
+    label.textContent = 'Curated Tips';
+    content.appendChild(label);
+
+    tips.forEach(tip => {
+      if (totd && tip.id === totd.id) return; // skip totd duplicate
+      content.appendChild(renderTipCard(tip));
+    });
+  }
+
+  // Section: RSS Feed Items
+  const rssEntries = Object.values(rssItems).filter(r =>
+    activeCategory === 'all' || r.feed.category === activeCategory
+  );
+
+  if (rssEntries.length > 0) {
+    const label = document.createElement('div');
+    label.className = 'tips-feed-section-label';
+    label.textContent = 'From the Web';
+    content.appendChild(label);
+
+    rssEntries.forEach(({ feed, items }) => {
+      items.slice(0, 5).forEach(item => {
+        content.appendChild(renderRssCard(item, feed));
+      });
+    });
+  }
+}
+
+function getTipOfTheDay() {
+  if (!tipsData || !tipsData.tips.length) return null;
+  const now = new Date();
+  const dayOfYear = Math.floor((now - new Date(now.getFullYear(), 0, 0)) / 86400000);
+  return tipsData.tips[dayOfYear % tipsData.tips.length];
+}
+
+function renderTotd(tip) {
+  const el = document.createElement('div');
+  el.className = 'tips-feed-totd';
+  const cat = tipsData.categories[tip.category];
+  el.innerHTML = `
+    <div class="tips-feed-totd-label">
+      <span>${cat ? cat.icon : '>'}</span> tip of the day
+    </div>
+    <div class="tips-feed-totd-title">${escapeHtml(tip.title)}</div>
+    <div class="tips-feed-totd-body">${escapeHtml(tip.body)}</div>
+    ${renderExtLink(tip.source, 'Reference')}
+  `;
+  return el;
+}
+
+function renderTipCard(tip) {
+  const el = document.createElement('div');
+  el.className = 'tips-feed-card';
+  const cat = tipsData.categories[tip.category];
+  const iconColor = cat ? cat.color : 'var(--text-dim)';
+  el.innerHTML = `
+    <div class="tips-feed-card-header">
+      <span class="tips-feed-card-icon" style="color:${iconColor}">${cat ? cat.icon : '?'}</span>
+      <span class="tips-feed-card-title">${escapeHtml(tip.title)}</span>
+    </div>
+    <div class="tips-feed-card-body">${escapeHtml(tip.body)}</div>
+    ${tip.tags ? `<div class="tips-feed-card-tags">${tip.tags.map(t => `<span class="tips-feed-card-tag">${escapeHtml(t)}</span>`).join('')}</div>` : ''}
+    ${renderExtLink(tip.source, 'Reference')}
+  `;
+  return el;
+}
+
+function renderRssCard(item, feed) {
+  const el = document.createElement('div');
+  el.className = 'tips-feed-rss-card';
+  el.innerHTML = `
+    <div class="tips-feed-rss-source">${escapeHtml(feed.name)}</div>
+    <div class="tips-feed-rss-title">${escapeHtml(item.title)}</div>
+    ${item.description ? `<div class="tips-feed-rss-desc">${escapeHtml(item.description)}</div>` : ''}
+    ${renderExtLink(item.link, 'Read more')}
+  `;
+  return el;
+}
+
+function renderTabs() {
+  const tabsContainer = document.querySelector('.tips-feed-tabs');
+  if (!tabsContainer || !tipsData) return;
+
+  tabsContainer.innerHTML = '';
+
+  // "All" tab
+  const allTab = document.createElement('button');
+  allTab.className = 'tips-feed-tab' + (activeCategory === 'all' ? ' active' : '');
+  allTab.textContent = 'All';
+  allTab.addEventListener('click', () => setCategory('all'));
+  tabsContainer.appendChild(allTab);
+
+  // Category tabs
+  Object.entries(tipsData.categories).forEach(([key, cat]) => {
+    const tab = document.createElement('button');
+    tab.className = 'tips-feed-tab' + (activeCategory === key ? ' active' : '');
+    tab.innerHTML = `<span class="tips-feed-tab-icon">${cat.icon}</span>${cat.label}`;
+    tab.addEventListener('click', () => setCategory(key));
+    tabsContainer.appendChild(tab);
+  });
+}
+
+function setCategory(cat) {
+  activeCategory = cat;
+  localStorage.setItem(LS_CATEGORY, cat);
+  renderFeed();
+}
+
+// ── Resize ──────────────────────────────────────────────
+function initResize() {
+  const handle = $.tipsFeedResize;
+  const panel = $.tipsFeedPanel;
+  if (!handle || !panel) return;
+
+  let startX, startWidth;
+
+  handle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startWidth = panel.offsetWidth;
+    handle.classList.add('dragging');
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  });
+
+  function onMouseMove(e) {
+    // Dragging left edge: increasing width means mouse moves left
+    const diff = startX - e.clientX;
+    const newWidth = Math.min(Math.max(startWidth + diff, 260), 600);
+    panel.style.width = newWidth + 'px';
+  }
+
+  function onMouseUp() {
+    handle.classList.remove('dragging');
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+    localStorage.setItem(LS_WIDTH, panel.offsetWidth);
+  }
+}
+
+// ── Parallel Mode Safety ────────────────────────────────
+on('parallelMode', (isParallel) => {
+  if (isParallel) {
+    closeTipsFeed();
+    if ($.tipsFeedToggleBtn) $.tipsFeedToggleBtn.disabled = true;
+  } else {
+    if ($.tipsFeedToggleBtn) $.tipsFeedToggleBtn.disabled = false;
+  }
+});
+
+// ── Helpers ─────────────────────────────────────────────
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+const extLinkIcon = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`;
+
+function renderExtLink(url, label) {
+  if (!url) return '';
+  return `<a class="tips-feed-ext-link" href="${escapeHtml(url)}" target="_blank" rel="noopener">${extLinkIcon} ${escapeHtml(label || 'Source')}</a>`;
+}
+
+// ── Init ────────────────────────────────────────────────
+function init() {
+  // Toggle button
+  if ($.tipsFeedToggleBtn) {
+    $.tipsFeedToggleBtn.addEventListener('click', toggleTipsFeed);
+  }
+
+  // Close button
+  if ($.tipsFeedClose) {
+    $.tipsFeedClose.addEventListener('click', closeTipsFeed);
+  }
+
+  // Resize
+  initResize();
+
+  // Restore state
+  if (localStorage.getItem(LS_OPEN) === '1' && !getState('parallelMode')) {
+    openTipsFeed();
+  }
+}
+
+init();
+
+// Register /tips slash command
+registerCommand('tips', {
+  category: 'app',
+  description: 'Toggle tips feed panel',
+  execute() {
+    toggleTipsFeed();
+  },
+});

package/public/js/ui/commands.js

@@ -0,0 +1,114 @@
+// Slash command system
+import { escapeHtml } from '../core/utils.js';
+import { AUTOCOMPLETE_LIMIT } from '../core/constants.js';
+
+export const commandRegistry = {};
+
+export function registerCommand(name, def) {
+  commandRegistry[name] = def;
+}
+
+export function handleSlashAutocomplete(pane) {
+  const text = pane.messageInput.value;
+  const el = pane.autocompleteEl;
+  if (!el) return;
+
+  if (!text.startsWith("/") || text.includes(" ")) {
+    dismissAutocomplete(pane);
+    return;
+  }
+
+  const partial = text.slice(1).toLowerCase();
+  const matches = Object.entries(commandRegistry)
+    .filter(([name]) => name.startsWith(partial))
+    .sort((a, b) => {
+      const catOrder = { project: 0, skill: 1, agent: 2, app: 3, cli: 4, workflow: 5, prompt: 6 };
+      const ca = catOrder[a[1].category] ?? 3;
+      const cb = catOrder[b[1].category] ?? 3;
+      return ca - cb || a[0].localeCompare(b[0]);
+    })
+    .slice(0, AUTOCOMPLETE_LIMIT);
+
+  if (matches.length === 0) {
+    dismissAutocomplete(pane);
+    return;
+  }
+
+  el.innerHTML = "";
+  matches.forEach(([name, cmd], i) => {
+    const item = document.createElement("div");
+    item.className = "slash-autocomplete-item" + (i === 0 ? " active" : "");
+    item.dataset.index = i;
+    item.dataset.cmd = name;
+    item.innerHTML = `
+      <span class="cmd-name">/${escapeHtml(name)}</span>
+      <span class="cmd-category" data-cat="${cmd.category}">${cmd.category}</span>
+      <span class="cmd-desc">${escapeHtml(cmd.description)}</span>
+    `;
+    item.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const needsArgs = name === "run" || cmd.needsArgs;
+      pane.messageInput.value = `/${name}${needsArgs ? " " : ""}`;
+      dismissAutocomplete(pane);
+      pane.messageInput.focus();
+    });
+    el.appendChild(item);
+  });
+
+  pane._autocompleteIndex = 0;
+  el.classList.remove("hidden");
+}
+
+export function dismissAutocomplete(pane) {
+  if (pane.autocompleteEl) {
+    pane.autocompleteEl.classList.add("hidden");
+    pane.autocompleteEl.innerHTML = "";
+    pane._autocompleteIndex = -1;
+  }
+}
+
+export function handleAutocompleteKeydown(e, pane) {
+  const el = pane.autocompleteEl;
+  if (!el || el.classList.contains("hidden")) return false;
+
+  const items = el.querySelectorAll(".slash-autocomplete-item");
+  if (items.length === 0) return false;
+
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    pane._autocompleteIndex = Math.min(pane._autocompleteIndex + 1, items.length - 1);
+    items.forEach((it, i) => it.classList.toggle("active", i === pane._autocompleteIndex));
+    items[pane._autocompleteIndex].scrollIntoView({ block: "nearest" });
+    return true;
+  }
+
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    pane._autocompleteIndex = Math.max(pane._autocompleteIndex - 1, 0);
+    items.forEach((it, i) => it.classList.toggle("active", i === pane._autocompleteIndex));
+    items[pane._autocompleteIndex].scrollIntoView({ block: "nearest" });
+    return true;
+  }
+
+  if (e.key === "Tab" || (e.key === "Enter" && pane._autocompleteIndex >= 0)) {
+    e.preventDefault();
+    const active = items[pane._autocompleteIndex];
+    if (active) {
+      const cmdName = active.dataset.cmd;
+      const cmdDef = commandRegistry[cmdName];
+      const needsArgs = cmdName === "run" || (cmdDef && cmdDef.needsArgs);
+      pane.messageInput.value = `/${cmdName}${needsArgs ? " " : ""}`;
+      dismissAutocomplete(pane);
+      pane.messageInput.focus();
+    }
+    return true;
+  }
+
+  if (e.key === "Escape") {
+    e.preventDefault();
+    dismissAutocomplete(pane);
+    return true;
+  }
+
+  return false;
+}

package/public/js/ui/context-gauge.js

@@ -0,0 +1,100 @@
+// Context Window Indicator — cumulative session token gauge (status bar)
+import { getState, setState } from '../core/store.js';
+import { $ } from '../core/dom.js';
+
+const sbGaugeSep = document.getElementById("sb-gauge-sep");
+
+const MODEL_LIMITS = {
+  default: 200_000,
+};
+
+function getLimit() {
+  return MODEL_LIMITS.default;
+}
+
+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 String(n);
+}
+
+function renderGauge(tokens) {
+  if (!$.contextGauge) return;
+
+  const total = tokens.input + tokens.output + tokens.cacheRead + tokens.cacheCreation;
+  const limit = getLimit();
+  const pct = Math.min((total / limit) * 100, 100);
+
+  // Show gauge
+  $.contextGauge.classList.remove('hidden');
+  if (sbGaugeSep) sbGaugeSep.classList.remove('hidden');
+
+  // Fill width
+  $.contextGaugeFill.style.width = pct + '%';
+
+  // Color class
+  $.contextGaugeFill.classList.remove('warning', 'critical');
+  $.contextGauge.classList.remove('warning', 'critical');
+  if (pct >= 80) {
+    $.contextGaugeFill.classList.add('critical');
+    $.contextGauge.classList.add('critical');
+  } else if (pct >= 50) {
+    $.contextGaugeFill.classList.add('warning');
+    $.contextGauge.classList.add('warning');
+  }
+
+  // Label
+  $.contextGaugeLabel.textContent = `${formatTokens(total)}/${formatTokens(limit)}`;
+
+  // Tooltip breakdown
+  $.contextGauge.title = [
+    `Input: ${formatTokens(tokens.input)}`,
+    `Output: ${formatTokens(tokens.output)}`,
+    `Cache Read: ${formatTokens(tokens.cacheRead)}`,
+    `Cache Create: ${formatTokens(tokens.cacheCreation)}`,
+    `Total: ${formatTokens(total)} / ${formatTokens(limit)}`,
+  ].join('\n');
+}
+
+export function updateContextGauge(input, output, cacheRead, cacheCreation) {
+  const tokens = getState('sessionTokens');
+  tokens.input += (input || 0);
+  tokens.output += (output || 0);
+  tokens.cacheRead += (cacheRead || 0);
+  tokens.cacheCreation += (cacheCreation || 0);
+  setState('sessionTokens', { ...tokens });
+  renderGauge(tokens);
+}
+
+export function resetContextGauge() {
+  const fresh = { input: 0, output: 0, cacheRead: 0, cacheCreation: 0 };
+  setState('sessionTokens', fresh);
+  if ($.contextGauge) $.contextGauge.classList.add('hidden');
+  if (sbGaugeSep) sbGaugeSep.classList.add('hidden');
+}
+
+export async function loadContextGauge(sessionId) {
+  if (!sessionId) return;
+  try {
+    const messages = await (await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/messages-single`)).json();
+    const tokens = { input: 0, output: 0, cacheRead: 0, cacheCreation: 0 };
+    for (const msg of messages) {
+      if (msg.role === 'result') {
+        const data = JSON.parse(msg.content);
+        tokens.input += (data.input_tokens || 0);
+        tokens.output += (data.output_tokens || 0);
+        tokens.cacheRead += (data.cache_read_tokens || 0);
+        tokens.cacheCreation += (data.cache_creation_tokens || 0);
+      }
+    }
+    setState('sessionTokens', tokens);
+    const total = tokens.input + tokens.output + tokens.cacheRead + tokens.cacheCreation;
+    if (total > 0) {
+      renderGauge(tokens);
+    } else if ($.contextGauge) {
+      $.contextGauge.classList.add('hidden');
+    }
+  } catch (err) {
+    console.error('Failed to load context gauge:', err);
+  }
+}

package/public/js/ui/diff.js

@@ -0,0 +1,124 @@
+// Diff rendering
+
+export function computeLineDiff(oldLines, newLines) {
+  const m = oldLines.length, n = newLines.length;
+  // Guard against huge diffs
+  if (m + n > 1000) return null;
+
+  // LCS via DP
+  const dp = Array.from({ length: m + 1 }, () => new Uint16Array(n + 1));
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      dp[i][j] = oldLines[i - 1] === newLines[j - 1]
+        ? dp[i - 1][j - 1] + 1
+        : Math.max(dp[i - 1][j], dp[i][j - 1]);
+    }
+  }
+
+  // Backtrack
+  const result = [];
+  let i = m, j = n;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      result.unshift({ type: "context", line: oldLines[i - 1], oldNum: i, newNum: j });
+      i--; j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      result.unshift({ type: "added", line: newLines[j - 1], newNum: j });
+      j--;
+    } else {
+      result.unshift({ type: "removed", line: oldLines[i - 1], oldNum: i });
+      i--;
+    }
+  }
+  return result;
+}
+
+export function renderDiffView(oldStr, newStr, filePath) {
+  const oldLines = oldStr.split("\n");
+  const newLines = newStr.split("\n");
+  const diff = computeLineDiff(oldLines, newLines);
+  if (!diff) return null;
+
+  const container = document.createElement("div");
+  container.className = "diff-view";
+
+  const header = document.createElement("div");
+  header.className = "diff-header";
+  header.textContent = filePath || "Edit";
+  container.appendChild(header);
+
+  const body = document.createElement("div");
+  body.className = "diff-body";
+
+  for (const entry of diff) {
+    const line = document.createElement("div");
+    line.className = `diff-line diff-${entry.type}`;
+
+    const gutter = document.createElement("span");
+    gutter.className = "diff-gutter";
+    if (entry.type === "removed") {
+      gutter.textContent = entry.oldNum;
+    } else if (entry.type === "added") {
+      gutter.textContent = entry.newNum;
+    } else {
+      gutter.textContent = entry.oldNum;
+    }
+
+    const sign = document.createElement("span");
+    sign.className = "diff-sign";
+    sign.textContent = entry.type === "added" ? "+" : entry.type === "removed" ? "-" : " ";
+
+    const content = document.createElement("span");
+    content.className = "diff-content";
+    content.textContent = entry.line;
+
+    line.appendChild(gutter);
+    line.appendChild(sign);
+    line.appendChild(content);
+    body.appendChild(line);
+  }
+
+  container.appendChild(body);
+  return container;
+}
+
+export function renderAdditionsView(content, filePath) {
+  const lines = content.split("\n");
+  if (lines.length > 1000) return null;
+
+  const container = document.createElement("div");
+  container.className = "diff-view";
+
+  const header = document.createElement("div");
+  header.className = "diff-header";
+  header.textContent = filePath || "Write (new file)";
+  container.appendChild(header);
+
+  const body = document.createElement("div");
+  body.className = "diff-body";
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = document.createElement("div");
+    line.className = "diff-line diff-added";
+
+    const gutter = document.createElement("span");
+    gutter.className = "diff-gutter";
+    gutter.textContent = i + 1;
+
+    const sign = document.createElement("span");
+    sign.className = "diff-sign";
+    sign.textContent = "+";
+
+    const lineContent = document.createElement("span");
+    lineContent.className = "diff-content";
+    lineContent.textContent = lines[i];
+
+    line.appendChild(gutter);
+    line.appendChild(sign);
+    line.appendChild(lineContent);
+    body.appendChild(line);
+  }
+
+  container.appendChild(body);
+  return container;
+}

package/public/js/ui/disabled-tools.js

@@ -0,0 +1,36 @@
+// Disabled tools selector — localStorage persistence + getter
+const STORAGE_KEY = 'claudeck-disabled-tools';
+const display = document.getElementById('disabled-tools-display');
+
+export function getDisabledTools() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
+  } catch {
+    return [];
+  }
+}
+
+function updateDisplay() {
+  if (!display) return;
+  const tools = getDisabledTools();
+  display.textContent = tools.length === 0 ? 'none' : `${tools.length} off`;
+}
+
+function init() {
+  const saved = getDisabledTools();
+  const checkboxes = document.querySelectorAll('.header-submenu--tools input[type="checkbox"]');
+
+  checkboxes.forEach(cb => {
+    cb.checked = saved.includes(cb.value);
+    cb.addEventListener('change', () => {
+      const current = [];
+      checkboxes.forEach(c => { if (c.checked) current.push(c.value); });
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(current));
+      updateDisplay();
+    });
+  });
+
+  updateDisplay();
+}
+
+init();