claudeck 1.1.1 → 1.2.0

package/public/js/features/input-history.js

@@ -0,0 +1,122 @@
+// ── Message Recall — InputHistory class + keydown handler ──
+
+export class InputHistory {
+  constructor(storageKey, maxSize = 100) {
+    this.storageKey = storageKey;
+    this.maxSize = maxSize;
+    this.entries = [];
+    this.index = -1;
+    this.draft = "";
+    this._load();
+  }
+
+  /** Add a sent message to history. Skips empty and consecutive duplicates. */
+  add(text) {
+    if (!text || !text.trim()) return;
+    if (this.entries.length > 0 && this.entries[this.entries.length - 1] === text) return;
+    this.entries.push(text);
+    if (this.entries.length > this.maxSize) this.entries.shift();
+    this.index = -1;
+    this._save();
+  }
+
+  /** Navigate backward (older). Returns entry text, or null if empty. */
+  previous(currentInput) {
+    if (this.entries.length === 0) return null;
+    if (this.index === -1) this.draft = currentInput || "";
+    if (this.index < this.entries.length - 1) this.index++;
+    return this.entries[this.entries.length - 1 - this.index];
+  }
+
+  /** Navigate forward (newer). Returns entry text, or draft when past the end. */
+  next() {
+    if (this.index <= 0) {
+      this.index = -1;
+      return this.draft;
+    }
+    this.index--;
+    return this.entries[this.entries.length - 1 - this.index];
+  }
+
+  /** Cancel navigation and return to draft. */
+  cancel() {
+    const draft = this.draft;
+    this.index = -1;
+    this.draft = "";
+    return draft;
+  }
+
+  /** Reset navigation state (call after sending or typing). */
+  reset() {
+    this.index = -1;
+    this.draft = "";
+  }
+
+  /** Whether the user is currently navigating history. */
+  get isNavigating() {
+    return this.index !== -1;
+  }
+
+  /** Return all entries newest-first (for popover display). */
+  getAll() {
+    return [...this.entries].reverse();
+  }
+
+  /** @private Load from localStorage. */
+  _load() {
+    try {
+      const raw = localStorage.getItem(this.storageKey);
+      if (raw) this.entries = JSON.parse(raw);
+    } catch {
+      this.entries = [];
+    }
+  }
+
+  /** @private Save to localStorage. */
+  _save() {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(this.entries));
+    } catch {
+      /* localStorage full — silently degrade */
+    }
+  }
+}
+
+/**
+ * Handle ArrowUp / ArrowDown / Escape for input history navigation.
+ * Returns true if the event was consumed (same contract as handleAutocompleteKeydown).
+ */
+export function handleHistoryKeydown(e, pane, history) {
+  const input = pane.messageInput;
+
+  if (e.key === "ArrowUp" && (input.value === "" || history.isNavigating)) {
+    const prev = history.previous(input.value);
+    if (prev !== null) {
+      e.preventDefault();
+      input.value = prev;
+      triggerResize(input);
+    }
+    return true;
+  }
+
+  if (e.key === "ArrowDown" && history.isNavigating) {
+    e.preventDefault();
+    input.value = history.next();
+    triggerResize(input);
+    return true;
+  }
+
+  if (e.key === "Escape" && history.isNavigating) {
+    e.preventDefault();
+    input.value = history.cancel();
+    triggerResize(input);
+    return true;
+  }
+
+  return false;
+}
+
+function triggerResize(textarea) {
+  textarea.style.height = "auto";
+  textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
+}

package/public/js/features/projects.js

@@ -7,7 +7,7 @@ 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';
+import { showWhalyPlaceholder, addSkillUsedMessage } from '../ui/messages.js';
 
 export async function loadProjects() {
   try {
@@ -91,11 +91,15 @@ export function updateHeaderProjectName() {
   $.headerProjectName.textContent = opt && opt.value ? opt.textContent : "";
 }
 
+// Skill lookup map — exported so chat.js can look up model-invoked skills
+export const skillLookup = new Map();
+
 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];
   }
+  skillLookup.clear();
 
   const cwd = $.projectSelect.value;
   if (!cwd) return;
@@ -109,12 +113,23 @@ export async function loadProjectCommands() {
       if (!slug || commandRegistry[slug]) continue;
       const hasArgs = c.prompt.includes("$ARGUMENTS");
       const label = c.source === "skill" ? `${c.description}` : (c.description || c.command);
+
+      // Build skill lookup map
+      if (c.source === "skill") {
+        skillLookup.set(slug, { description: label, scope: "project" });
+      }
+
       registerCommand(slug, {
         category: c.source === "skill" ? "skill" : "project",
         description: label,
         needsArgs: hasArgs,
         argumentHint: c.argumentHint || "",
         execute(args, pane) {
+          // Show "Skill used" message for skills
+          if (c.source === "skill") {
+            addSkillUsedMessage(slug, c.description, pane);
+          }
+
           let prompt = c.prompt;
           if (hasArgs) {
             prompt = prompt.replace(/\$ARGUMENTS/g, args || "");

package/public/js/features/sessions.js

@@ -46,37 +46,39 @@ export async function loadSessions(searchTerm) {
   }
 }
 
-function renderSessions(sessions) {
+function renderSessions(sessions, append = false) {
   const sessionId = getState("sessionId");
-  $.sessionList.innerHTML = "";
-
-  // Empty state: no project selected
-  const cwd = $.projectSelect.value;
-  if (!cwd) {
-    $.sessionList.innerHTML = `
-      <div class="session-empty">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
-        </svg>
-        <span>Select a project to view sessions</span>
-      </div>`;
-    return;
-  }
+  if (!append) $.sessionList.innerHTML = "";
 
-  // Empty state: no sessions found
-  if (sessions.length === 0) {
-    const isSearch = $.sessionSearchInput.value.trim();
-    $.sessionList.innerHTML = `
-      <div class="session-empty">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-          ${isSearch
-            ? '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
-            : '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>'}
-        </svg>
-        <span>${isSearch ? 'No matching sessions' : 'No sessions yet'}</span>
-        ${!isSearch ? '<span class="session-empty-hint">Start a new conversation to create one</span>' : ''}
-      </div>`;
-    return;
+  if (!append) {
+    // Empty state: no project selected
+    const cwd = $.projectSelect.value;
+    if (!cwd) {
+      $.sessionList.innerHTML = `
+        <div class="session-empty">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+          </svg>
+          <span>Select a project to view sessions</span>
+        </div>`;
+      return;
+    }
+
+    // Empty state: no sessions found
+    if (sessions.length === 0) {
+      const isSearch = $.sessionSearchInput.value.trim();
+      $.sessionList.innerHTML = `
+        <div class="session-empty">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            ${isSearch
+              ? '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
+              : '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>'}
+          </svg>
+          <span>${isSearch ? 'No matching sessions' : 'No sessions yet'}</span>
+          ${!isSearch ? '<span class="session-empty-hint">Start a new conversation to create one</span>' : ''}
+        </div>`;
+      return;
+    }
   }
 
   for (const s of sessions) {
@@ -91,9 +93,12 @@ function renderSessions(sessions) {
     const displayTitle = s.title || s.project_name || "Session";
     const isPinned = s.pinned === 1;
     const summaryTooltip = s.summary ? escapeHtml(s.summary) : "";
+    const forkIndicator = s.parent_session_id
+      ? `<span class="session-fork-badge" title="Forked session"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg></span>`
+      : "";
     li.innerHTML = `
       <div class="session-card-header">
-        <span class="session-title" title="${escapeHtml(displayTitle)}">${escapeHtml(displayTitle)}</span>
+        <span class="session-title" title="${escapeHtml(displayTitle)}">${forkIndicator}${escapeHtml(displayTitle)}</span>
         ${modeBadge}
         <span class="session-card-actions">
           <button class="session-pin${isPinned ? " pinned" : ""}" title="${isPinned ? "Unpin" : "Pin"} session">
@@ -305,6 +310,48 @@ function showSessionContextMenu(e, session) {
   });
   sessionCtxMenu.appendChild(summaryBtn);
 
+  // View Parent (only for forked sessions)
+  if (session.parent_session_id) {
+    const parentBtn = document.createElement("button");
+    parentBtn.innerHTML = `<span class="ctx-label">View Parent Session</span><span class="ctx-value">Switch to parent</span>`;
+    parentBtn.addEventListener("click", async () => {
+      hideSessionContextMenu();
+      setState("sessionId", session.parent_session_id);
+      $.messagesDiv.innerHTML = "";
+      await loadMessages(session.parent_session_id);
+      loadSessions();
+    });
+    sessionCtxMenu.appendChild(parentBtn);
+  }
+
+  // View Forks
+  const forksBtn = document.createElement("button");
+  forksBtn.innerHTML = `<span class="ctx-label">View Forks</span><span class="ctx-value">Loading...</span>`;
+  forksBtn.addEventListener("click", async () => {
+    const branches = await api.fetchBranches(session.id);
+    if (branches.length === 0) {
+      forksBtn.querySelector(".ctx-value").textContent = "No forks";
+      return;
+    }
+    hideSessionContextMenu();
+    // Show back header + filtered fork list
+    $.sessionList.innerHTML = "";
+    const backHeader = document.createElement("div");
+    backHeader.className = "session-forks-back";
+    backHeader.innerHTML = `<button class="session-forks-back-btn">&larr; All Sessions</button><span class="session-forks-label">Forks of "${escapeHtml((session.title || session.project_name || "Session").slice(0, 30))}"</span>`;
+    backHeader.querySelector(".session-forks-back-btn").addEventListener("click", () => {
+      loadSessions($.sessionSearchInput.value.trim() || undefined);
+    });
+    $.sessionList.appendChild(backHeader);
+    renderSessions(branches, true);
+  });
+  sessionCtxMenu.appendChild(forksBtn);
+  // Eagerly load fork count
+  api.fetchBranches(session.id).then(branches => {
+    const val = forksBtn.querySelector(".ctx-value");
+    if (val) val.textContent = branches.length > 0 ? `${branches.length} fork${branches.length > 1 ? "s" : ""}` : "No forks";
+  });
+
   sessionCtxMenu.style.left = e.clientX + "px";
   sessionCtxMenu.style.top = e.clientY + "px";
   document.body.appendChild(sessionCtxMenu);

package/public/js/main.js

@@ -22,6 +22,8 @@ import './features/prompts.js';
 import './features/workflows.js';
 import './features/agents.js';
 import './ui/status-bar.js';
+import './ui/notification-bell.js';
+import './ui/notification-history.js';
 import './features/cost-dashboard.js';
 import './features/analytics.js';
 import './features/telegram.js';
@@ -46,6 +48,7 @@ import './panels/tips-feed.js';
 import './panels/assistant-bot.js';
 import './panels/memory.js';
 import './panels/dev-docs.js';
+import './panels/skills-manager.js';
 
 // Auto-discover and load tab-sdk plugins from /js/plugins/
 import { loadPlugins } from './core/plugin-loader.js';