claudeck 1.1.1 → 1.2.0

package/public/css/ui/worktree.css

@@ -0,0 +1,442 @@
+/* ── Worktree toggle button ────────────────────────────── */
+#worktree-btn.active {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  box-shadow: var(--glow);
+}
+
+/* ── Worktree active banner ────────────────────────────── */
+.worktree-banner {
+  background: var(--accent-dim);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  margin: 8px 0;
+  animation: fadeInUp 0.2s var(--ease-out-expo);
+}
+
+.worktree-banner-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+
+.worktree-banner-content svg {
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.worktree-banner-label {
+  font-weight: 700;
+  color: var(--accent);
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+}
+
+.worktree-banner-branch {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text);
+  background: var(--bg-primary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+}
+
+.worktree-banner-base {
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.worktree-banner-base strong {
+  color: var(--text);
+}
+
+/* ── Worktree confirmation card (pre-send) ────────────── */
+.worktree-confirm-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  margin: 8px 0;
+  animation: fadeInUp 0.2s var(--ease-out-expo);
+}
+
+.worktree-confirm-card .wt-confirm-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.worktree-confirm-card .wt-confirm-header svg {
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.worktree-confirm-card .wt-confirm-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+  line-height: 1.5;
+}
+
+.wt-confirm-btns {
+  display: flex;
+  gap: 8px;
+}
+
+.wt-confirm-btns button {
+  padding: 6px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.15s var(--ease-smooth);
+}
+
+.wt-confirm-btns .wt-btn-worktree {
+  background: var(--accent);
+  color: var(--bg-primary);
+  border: 1px solid var(--accent);
+}
+.wt-confirm-btns .wt-btn-worktree:hover {
+  box-shadow: var(--glow-strong);
+}
+
+.wt-confirm-btns .wt-btn-current {
+  background: var(--bg-primary);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.wt-confirm-btns .wt-btn-current:hover {
+  border-color: var(--text-dim);
+}
+
+/* ── Worktree action card (post-completion) ───────────── */
+.worktree-action-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px 16px;
+  margin: 8px 0;
+  animation: fadeInUp 0.2s var(--ease-out-expo);
+}
+
+.worktree-action-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.worktree-action-header svg {
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.worktree-action-header strong {
+  color: var(--accent);
+  font-family: var(--font-mono);
+}
+
+.worktree-stats {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.worktree-action-btns {
+  display: flex;
+  gap: 8px;
+}
+
+.worktree-action-btns button {
+  padding: 5px 12px;
+  font-size: 11px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-primary);
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.15s var(--ease-smooth);
+}
+
+.worktree-action-btns .wt-merge-btn:hover {
+  background: var(--accent);
+  color: var(--bg-primary);
+  border-color: var(--accent);
+}
+
+.worktree-action-btns .wt-discard-btn:hover {
+  background: var(--error);
+  color: #fff;
+  border-color: var(--error);
+}
+
+.worktree-action-btns .wt-diff-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.worktree-action-btns button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.worktree-merged {
+  opacity: 0.6;
+  border-color: var(--accent);
+}
+
+.worktree-discarded {
+  opacity: 0.4;
+}
+
+/* ── Diff modal ───────────────────────────────────────── */
+.worktree-diff-content {
+  max-height: 60vh;
+  overflow: auto;
+  padding: 16px;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  white-space: pre;
+  line-height: 1.5;
+  color: var(--text);
+  tab-size: 4;
+}
+
+/* ── Git panel worktree section ───────────────────────── */
+.git-worktree-list {
+  padding: 4px 0;
+}
+
+.git-worktree-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+}
+
+.git-worktree-item:hover {
+  background: var(--bg-tertiary);
+}
+
+.git-worktree-badge {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.git-worktree-badge.running {
+  background: var(--warning);
+  color: #000;
+}
+
+.git-worktree-badge.ready {
+  background: var(--accent);
+  color: #fff;
+}
+
+.git-worktree-name {
+  flex: 1;
+  font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+
+.git-worktree-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.git-worktree-actions button {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px 5px;
+  font-size: 11px;
+  border-radius: 3px;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.git-worktree-actions button:hover {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* Worktree button tooltips */
+.git-worktree-actions button[data-tooltip] {
+  position: relative;
+}
+
+.git-worktree-actions button[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.9);
+  padding: 4px 10px;
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--text);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.15s var(--ease-out-expo);
+  z-index: 100;
+  box-shadow: var(--shadow-sm);
+}
+
+.git-worktree-actions button[data-tooltip]::before {
+  content: "";
+  position: absolute;
+  bottom: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--border);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 100;
+}
+
+.git-worktree-actions button[data-tooltip]:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+.git-worktree-actions button[data-tooltip]:hover::before {
+  opacity: 1;
+}
+
+.git-worktree-actions .wt-discard:hover {
+  color: var(--error);
+  background: rgba(255, 80, 80, 0.1);
+}
+
+/* Worktree delete confirmation — git panel */
+.git-wt-confirm {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.git-wt-confirm-label {
+  font-size: 10px;
+  color: var(--error);
+  font-weight: 600;
+}
+
+.git-wt-confirm-yes,
+.git-wt-confirm-no {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  transition: all 0.15s;
+}
+
+.git-wt-confirm-yes {
+  background: var(--error);
+  color: #fff;
+  border-color: var(--error);
+}
+
+.git-wt-confirm-yes:hover {
+  opacity: 0.85;
+}
+
+.git-wt-confirm-no {
+  background: var(--bg-primary);
+  color: var(--text);
+}
+
+.git-wt-confirm-no:hover {
+  border-color: var(--text-dim);
+}
+
+.git-wt-confirm-yes:disabled,
+.git-wt-confirm-no:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Worktree delete confirmation — chat inline card */
+.wt-confirm-label {
+  font-size: 11px;
+  color: var(--error);
+  font-weight: 600;
+}
+
+.wt-confirm-yes,
+.wt-confirm-no {
+  padding: 5px 12px;
+  font-size: 11px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  transition: all 0.15s;
+}
+
+.wt-confirm-yes {
+  background: var(--error);
+  color: #fff;
+  border-color: var(--error);
+}
+
+.wt-confirm-yes:hover {
+  opacity: 0.85;
+}
+
+.wt-confirm-no {
+  background: var(--bg-primary);
+  color: var(--text);
+}
+
+.wt-confirm-no:hover {
+  border-color: var(--text-dim);
+}
+
+.wt-confirm-yes:disabled,
+.wt-confirm-no:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/public/index.html

@@ -97,6 +97,18 @@
     <span class="term-project-name" id="header-project-name"></span>
 
     <div class="header-right">
+      <!-- Notification Bell -->
+      <div class="notif-bell" id="notif-bell">
+        <button class="notif-bell-btn" id="notif-bell-btn" aria-label="Notifications">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+          </svg>
+          <span class="notif-badge hidden" id="notif-badge">0</span>
+        </button>
+        <div class="notif-dropdown hidden" id="notif-dropdown"></div>
+      </div>
+
       <!-- Session Settings Dropdown -->
       <div class="header-dropdown">
         <button class="header-dropdown-trigger">
@@ -387,6 +399,11 @@
               <line x1="8" y1="23" x2="16" y2="23"/>
             </svg>
           </button>
+          <button id="worktree-btn" data-tooltip="Worktree Mode" class="toolbox-toggle">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
+          </button>
           <button id="toolbox-btn" data-tooltip="Saved Prompts" class="toolbox-toggle">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
@@ -409,16 +426,24 @@
               </span>
             </div>
           </div>
-          <button id="send-btn" title="Send">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M3 10l7-7m0 0l7 7m-7-7v14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(90, 10, 10)"/>
-            </svg>
-          </button>
-          <button id="stop-btn" title="Stop" class="hidden">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor"/>
-            </svg>
-          </button>
+          <div class="send-history-group">
+            <button id="send-btn" title="Send">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M3 10l7-7m0 0l7 7m-7-7v14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(90, 10, 10)"/>
+              </svg>
+            </button>
+            <button id="stop-btn" title="Stop" class="hidden">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor"/>
+              </svg>
+            </button>
+            <button id="history-btn" class="hidden" data-tooltip="Message History" title="Message history" aria-label="Message history">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+              </svg>
+            </button>
+          </div>
+          <div id="history-popover" class="history-popover hidden"></div>
           <div id="slash-autocomplete" class="slash-autocomplete hidden"></div>
         </div>
         <div id="toolbox-panel" class="toolbox-panel hidden"></div>
@@ -483,6 +508,7 @@
               </svg>
             </button>
           </div>
+          <div id="git-branch-info" class="git-branch-info hidden"></div>
           <div id="git-status-list" class="git-status-list"></div>
           <div class="git-commit-section">
             <textarea id="git-commit-msg" class="git-commit-msg" placeholder="Commit message..." rows="2"></textarea>
@@ -492,6 +518,10 @@
             <h4 class="git-log-title">Recent Commits</h4>
             <div id="git-log-list" class="git-log-list"></div>
           </div>
+          <div id="git-worktree-section" class="git-section hidden">
+            <h4 class="git-log-title">Worktrees</h4>
+            <div id="git-worktree-list" class="git-worktree-list"></div>
+          </div>
         </div>
 
 
@@ -834,6 +864,9 @@
         <tr><td><span class="kbd">Enter</span></td><td>Send message</td></tr>
         <tr><td><span class="kbd">Shift+Enter</span></td><td>New line in input</td></tr>
         <tr><td><span class="kbd">/</span></td><td>Slash commands autocomplete</td></tr>
+        <tr><td><span class="kbd">&uarr;</span></td><td>Recall previous message (empty input)</td></tr>
+        <tr><td><span class="kbd">&darr;</span></td><td>Recall next message (in history)</td></tr>
+        <tr><td><span class="kbd">Esc</span></td><td>Cancel history navigation</td></tr>
       </table>
     </div>
   </div>

package/public/js/core/api.js

@@ -407,6 +407,29 @@ export async function generateSummary(sessionId) {
   return res.json();
 }
 
+export async function forkSession(sessionId, messageId) {
+  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/fork`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ messageId }),
+  });
+  if (!res.ok) {
+    const err = await res.json();
+    throw new Error(err.error || "Fork failed");
+  }
+  return res.json();
+}
+
+export async function fetchBranches(sessionId) {
+  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/branches`);
+  return res.json();
+}
+
+export async function fetchLineage(sessionId) {
+  const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/lineage`);
+  return res.json();
+}
+
 export async function saveSystemPromptApi(path, systemPrompt) {
   await fetch("/api/projects/system-prompt", {
     method: "PUT",
@@ -602,3 +625,63 @@ export async function deleteRepoGroup(id) {
   if (!res.ok) await throwApiError(res);
   return res.json();
 }
+
+// ── Skills Marketplace (SkillsMP) ───────────────────────
+
+export async function fetchSkillsConfig() {
+  const res = await fetch("/api/skills/config");
+  return res.json();
+}
+
+export async function saveSkillsConfig(config) {
+  const res = await fetch("/api/skills/config", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(config),
+  });
+  return res.json();
+}
+
+export async function searchSkills(q, page, limit, sortBy) {
+  let url = `/api/skills/search?q=${encodeURIComponent(q)}`;
+  if (page) url += `&page=${page}`;
+  if (limit) url += `&limit=${limit}`;
+  if (sortBy) url += `&sortBy=${encodeURIComponent(sortBy)}`;
+  const res = await fetch(url);
+  return { data: await res.json(), headers: res.headers };
+}
+
+export async function aiSearchSkills(q) {
+  const res = await fetch(`/api/skills/ai-search?q=${encodeURIComponent(q)}`);
+  return { data: await res.json(), headers: res.headers };
+}
+
+export async function fetchInstalledSkills(projectPath) {
+  let url = "/api/skills/installed";
+  if (projectPath) url += `?projectPath=${encodeURIComponent(projectPath)}`;
+  const res = await fetch(url);
+  return res.json();
+}
+
+export async function installSkill(body) {
+  const res = await fetch("/api/skills/install", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  return res.json();
+}
+
+export async function uninstallSkill(name, scope, projectPath) {
+  let url = `/api/skills/${encodeURIComponent(name)}?scope=${scope}`;
+  if (projectPath) url += `&projectPath=${encodeURIComponent(projectPath)}`;
+  const res = await fetch(url, { method: "DELETE" });
+  return res.json();
+}
+
+export async function toggleSkill(name, scope, projectPath) {
+  let url = `/api/skills/${encodeURIComponent(name)}/toggle?scope=${scope}`;
+  if (projectPath) url += `&projectPath=${encodeURIComponent(projectPath)}`;
+  const res = await fetch(url, { method: "PUT" });
+  return res.json();
+}

package/public/js/core/dom.js

@@ -226,6 +226,9 @@ export const $ = {
   gitCommitMsg: document.getElementById("git-commit-msg"),
   gitCommitBtn: document.getElementById("git-commit-btn"),
   gitLogList: document.getElementById("git-log-list"),
+  gitBranchInfo: document.getElementById("git-branch-info"),
+  gitWorktreeSection: document.getElementById("git-worktree-section"),
+  gitWorktreeList: document.getElementById("git-worktree-list"),
 
   // MCP manager
   mcpToggleBtn: document.getElementById("mcp-toggle-btn"),
@@ -247,6 +250,18 @@ export const $ = {
   mcpFormSave: document.getElementById("mcp-form-save"),
   mcpAddBtn: document.getElementById("mcp-add-btn"),
 
+  // Notification bell
+  notifBellBtn: document.getElementById("notif-bell-btn"),
+  notifBadge: document.getElementById("notif-badge"),
+  notifDropdown: document.getElementById("notif-dropdown"),
+
+  // Input history
+  historyBtn: document.getElementById("history-btn"),
+  historyPopover: document.getElementById("history-popover"),
+
+  // Worktree toggle
+  worktreeBtn: document.getElementById("worktree-btn"),
+
   // Sidebar toggle (mobile)
   sidebarToggleBtn: document.getElementById("sidebar-toggle-btn"),
   sidebarBackdrop: document.getElementById("sidebar-backdrop"),

package/public/js/features/background-sessions.js

@@ -9,6 +9,14 @@ import { sendNotification } from '../ui/notifications.js';
 
 const BG_STORAGE_KEY = "claudeck-bg-sessions";
 
+function createBellNotification(type, title, body, sourceSessionId) {
+  fetch('/api/notifications/create', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ type, title, body, sourceSessionId }),
+  }).catch(() => {});
+}
+
 // ── localStorage helpers ──
 
 function persistBgSessions() {
@@ -99,6 +107,7 @@ export function reconcileBackgroundSessions(activeSessionIds) {
 
 export function showErrorToast(sessionId, title, error) {
   sendNotification('Session Error', `${title}: ${error}`, `error-${sessionId}`);
+  createBellNotification('error', `Session "${title}" failed`, error?.slice(0, 200), sessionId);
 
   const container = document.getElementById("toast-container");
   if (!container) return;
@@ -124,6 +133,7 @@ export function showErrorToast(sessionId, title, error) {
 
 export function showCompletionToast(sessionId, title, projectPath) {
   sendNotification('Session Completed', title, `done-${sessionId}`);
+  createBellNotification('session', `Session "${title}" completed`, null, sessionId);
 
   const container = document.getElementById("toast-container");
   if (!container) return;
@@ -154,6 +164,7 @@ export function showCompletionToast(sessionId, title, projectPath) {
 
 export function showInputNeededToast(sessionId, title, projectPath) {
   sendNotification('Input Needed', `${title} is waiting for your response`, `input-${sessionId}`);
+  createBellNotification('approval', `"${title}" needs your input`, 'Waiting for your response', sessionId);
 
   const container = document.getElementById("toast-container");
   if (!container) return;