claudeck 1.0.0

package/public/js/panels/git-panel.js

@@ -0,0 +1,285 @@
+// Git Panel — status, staging, commit, branch, log
+import { $ } from "../core/dom.js";
+import { on } from "../core/events.js";
+import { on as onState } from "../core/store.js";
+import { execCommand } from "../core/api.js";
+
+let currentCwd = null;
+
+function getCwd() {
+  return $.projectSelect.value || null;
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// ── Branch ──────────────────────────────────────────────
+
+async function loadBranches() {
+  const cwd = getCwd();
+  if (!cwd) return;
+
+  try {
+    const result = await execCommand("git branch --no-color", cwd);
+    if (result.error) return;
+
+    const lines = result.stdout.split("\n").filter(Boolean);
+    $.gitBranchSelect.innerHTML = "";
+
+    for (const line of lines) {
+      const isCurrent = line.startsWith("*");
+      const name = line.replace(/^\*?\s*/, "").trim();
+      if (!name) continue;
+      const opt = document.createElement("option");
+      opt.value = name;
+      opt.textContent = name;
+      if (isCurrent) opt.selected = true;
+      $.gitBranchSelect.appendChild(opt);
+    }
+  } catch {}
+}
+
+async function switchBranch(branch) {
+  const cwd = getCwd();
+  if (!cwd || !branch) return;
+
+  try {
+    const result = await execCommand(`git checkout "${branch}"`, cwd);
+    if (result.error && result.stderr) {
+      console.error("Branch switch error:", result.stderr);
+    }
+    await refreshAll();
+  } catch {}
+}
+
+// ── Status ──────────────────────────────────────────────
+
+function parseStatusCode(x, y) {
+  if (x === "?" && y === "?") return { group: "untracked", badge: "?", cls: "untracked" };
+  if (x === "A") return { group: "staged", badge: "A", cls: "added" };
+  if (x === "M") return { group: "staged", badge: "M", cls: "modified" };
+  if (x === "D") return { group: "staged", badge: "D", cls: "deleted" };
+  if (x === "R") return { group: "staged", badge: "R", cls: "renamed" };
+  if (y === "M") return { group: "changes", badge: "M", cls: "modified" };
+  if (y === "D") return { group: "changes", badge: "D", cls: "deleted" };
+  return { group: "changes", badge: x || y, cls: "modified" };
+}
+
+async function loadStatus() {
+  const cwd = getCwd();
+  if (!cwd) {
+    $.gitStatusList.innerHTML = `
+      <div class="git-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 git status</span>
+      </div>`;
+    return;
+  }
+
+  try {
+    const result = await execCommand("git status --porcelain=v1", cwd);
+    if (result.error) {
+      $.gitStatusList.innerHTML = `
+        <div class="git-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">
+            <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+          </svg>
+          <span>Not a git repository</span>
+        </div>`;
+      return;
+    }
+
+    const lines = result.stdout.split("\n").filter(Boolean);
+    const groups = { staged: [], changes: [], untracked: [] };
+
+    for (const line of lines) {
+      const x = line[0];
+      const y = line[1];
+      const file = line.slice(3);
+      const info = parseStatusCode(x, y);
+      groups[info.group].push({ file, badge: info.badge, cls: info.cls });
+
+      // Files with both staged and unstaged changes
+      if (x !== " " && x !== "?" && y !== " " && y !== "?") {
+        groups.changes.push({ file, badge: y === "M" ? "M" : y, cls: y === "D" ? "deleted" : "modified" });
+      }
+    }
+
+    $.gitStatusList.innerHTML = "";
+
+    if (groups.staged.length === 0 && groups.changes.length === 0 && groups.untracked.length === 0) {
+      $.gitStatusList.innerHTML = `
+        <div class="git-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 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
+          </svg>
+          <span>Working tree clean</span>
+        </div>`;
+      return;
+    }
+
+    renderGroup("Staged Changes", groups.staged, "unstage");
+    renderGroup("Changes", groups.changes, "stage");
+    renderGroup("Untracked", groups.untracked, "stage");
+  } catch {
+    $.gitStatusList.innerHTML = `<div class="git-empty">Failed to load status</div>`;
+  }
+}
+
+function renderGroup(title, files, action) {
+  if (files.length === 0) return;
+
+  const group = document.createElement("div");
+  group.className = "git-status-group";
+  group.innerHTML = `<div class="git-status-group-title">${title} (${files.length})</div>`;
+
+  for (const f of files) {
+    const row = document.createElement("div");
+    row.className = "git-status-file";
+    row.innerHTML = `
+      <span class="git-status-badge ${f.cls}">${f.badge}</span>
+      <span class="git-status-name" title="${escapeHtml(f.file)}">${escapeHtml(f.file)}</span>
+      <button class="git-status-action" title="${action === "stage" ? "Stage" : "Unstage"}">${action === "stage" ? "+" : "\u2212"}</button>
+    `;
+
+    row.querySelector(".git-status-action").addEventListener("click", async () => {
+      const cwd = getCwd();
+      if (!cwd) return;
+      const cmd = action === "stage"
+        ? `git add "${f.file}"`
+        : `git reset HEAD "${f.file}"`;
+      await execCommand(cmd, cwd);
+      await loadStatus();
+    });
+
+    group.appendChild(row);
+  }
+
+  $.gitStatusList.appendChild(group);
+}
+
+// ── Commit ──────────────────────────────────────────────
+
+async function handleCommit() {
+  const cwd = getCwd();
+  const msg = $.gitCommitMsg.value.trim();
+  if (!cwd || !msg) return;
+
+  $.gitCommitBtn.disabled = true;
+  $.gitCommitBtn.textContent = "Committing...";
+
+  // Remove old error
+  const oldErr = $.gitCommitBtn.parentElement.querySelector(".git-commit-error");
+  if (oldErr) oldErr.remove();
+
+  try {
+    const escaped = msg.replace(/"/g, '\\"');
+    const result = await execCommand(`git commit -m "${escaped}"`, cwd);
+    if (result.error || (result.stderr && result.stderr.includes("nothing to commit"))) {
+      showCommitError(result.stderr || result.stdout || "Nothing to commit");
+    } else {
+      $.gitCommitMsg.value = "";
+      await refreshAll();
+    }
+  } catch {
+    showCommitError("Commit failed");
+  } finally {
+    $.gitCommitBtn.disabled = false;
+    $.gitCommitBtn.textContent = "Commit";
+  }
+}
+
+function showCommitError(msg) {
+  const oldErr = $.gitCommitBtn.parentElement.querySelector(".git-commit-error");
+  if (oldErr) oldErr.remove();
+
+  const errEl = document.createElement("div");
+  errEl.className = "git-commit-error";
+  errEl.textContent = msg;
+  $.gitCommitBtn.parentElement.appendChild(errEl);
+}
+
+// ── Log ─────────────────────────────────────────────────
+
+async function loadLog() {
+  const cwd = getCwd();
+  if (!cwd) return;
+
+  try {
+    const result = await execCommand('git log --oneline --no-color -10 --format="%h|%s|%ar"', cwd);
+    if (result.error) {
+      $.gitLogList.innerHTML = "";
+      return;
+    }
+
+    const lines = result.stdout.split("\n").filter(Boolean);
+    $.gitLogList.innerHTML = "";
+
+    for (const line of lines) {
+      const [hash, subject, time] = line.split("|");
+      if (!hash) continue;
+      const item = document.createElement("div");
+      item.className = "git-log-item";
+      item.innerHTML = `
+        <span class="git-log-hash">${escapeHtml(hash)}</span>
+        <span class="git-log-subject">${escapeHtml(subject || "")}</span>
+        <span class="git-log-time">${escapeHtml(time || "")}</span>
+      `;
+      $.gitLogList.appendChild(item);
+    }
+  } catch {}
+}
+
+// ── Refresh ─────────────────────────────────────────────
+
+async function refreshAll() {
+  $.gitRefreshBtn.classList.add("spinning");
+  try {
+    await Promise.all([loadBranches(), loadStatus(), loadLog()]);
+  } finally {
+    $.gitRefreshBtn.classList.remove("spinning");
+  }
+}
+
+function initGitPanel() {
+  $.gitRefreshBtn.addEventListener("click", () => refreshAll());
+  $.gitCommitBtn.addEventListener("click", () => handleCommit());
+  $.gitBranchSelect.addEventListener("change", (e) => switchBranch(e.target.value));
+
+  // Load when Git tab opens
+  on("rightPanel:opened", (tab) => {
+    if (tab === "git") refreshAll();
+  });
+  on("rightPanel:tabChanged", (tab) => {
+    if (tab === "git") refreshAll();
+  });
+
+  // Reset and reload on project switch
+  $.projectSelect.addEventListener("change", () => {
+    currentCwd = null;
+    $.gitStatusList.innerHTML = "";
+    $.gitLogList.innerHTML = "";
+    $.gitBranchSelect.innerHTML = "";
+    if (isGitTabActive()) refreshAll();
+  });
+
+  // Load when projects data arrives (covers initial page load)
+  // setTimeout(0) defers until after loadProjects() finishes populating the select
+  onState("projectsData", () => {
+    setTimeout(() => {
+      if (isGitTabActive()) refreshAll();
+    }, 0);
+  });
+}
+
+function isGitTabActive() {
+  const pane = $.rightPanel?.querySelector('.right-panel-pane[data-tab="git"]');
+  return pane && pane.classList.contains("active") && !$.rightPanel.classList.contains("hidden");
+}
+
+initGitPanel();

package/public/js/panels/mcp-manager.js

@@ -0,0 +1,311 @@
+// MCP Server Management — CRUD modal for global + per-project mcpServers
+import { $ } from "../core/dom.js";
+import { fetchMcpServers, saveMcpServer, deleteMcpServer } from "../core/api.js";
+import { registerCommand } from "../ui/commands.js";
+
+let editingName = null;
+let editingScope = "global";
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function getCurrentProject() {
+  return $.projectSelect?.value || null;
+}
+
+// ── Modal ───────────────────────────────────────────────
+
+function openModal() {
+  $.mcpModal.classList.remove("hidden");
+  hideForm();
+  loadServers();
+}
+
+function closeModal() {
+  $.mcpModal.classList.add("hidden");
+  hideForm();
+}
+
+// ── Server List ─────────────────────────────────────────
+
+function renderSectionHeader(label, count, icon) {
+  const el = document.createElement("div");
+  el.className = "mcp-scope-header";
+  el.innerHTML = `<span>${icon} ${label}</span><span class="mcp-scope-count">${count}</span>`;
+  return el;
+}
+
+function renderEmpty(text) {
+  const el = document.createElement("div");
+  el.className = "mcp-empty mcp-empty-compact";
+  el.textContent = text;
+  return el;
+}
+
+async function loadServers() {
+  $.mcpServerList.innerHTML = `<div class="mcp-empty">Loading...</div>`;
+
+  try {
+    const projectPath = getCurrentProject();
+
+    // Fetch both scopes in parallel
+    const [globalData, projectData] = await Promise.all([
+      fetchMcpServers(),
+      projectPath ? fetchMcpServers(projectPath) : Promise.resolve({ servers: {} }),
+    ]);
+
+    const globalServers = globalData.servers || {};
+    const projectServers = projectData.servers || {};
+
+    $.mcpServerList.innerHTML = "";
+
+    // Project section (only when a project is selected)
+    if (projectPath) {
+      const projectNames = Object.keys(projectServers);
+      $.mcpServerList.appendChild(renderSectionHeader("Project", projectNames.length, "\u{1F4C1}"));
+      if (projectNames.length === 0) {
+        $.mcpServerList.appendChild(renderEmpty("No project-level MCP servers"));
+      } else {
+        for (const name of projectNames) {
+          $.mcpServerList.appendChild(renderCard(name, projectServers[name], "project"));
+        }
+      }
+    }
+
+    // Global section
+    const globalNames = Object.keys(globalServers);
+    $.mcpServerList.appendChild(renderSectionHeader("Global", globalNames.length, "\u{1F310}"));
+    if (globalNames.length === 0) {
+      $.mcpServerList.appendChild(renderEmpty("No global MCP servers"));
+    } else {
+      for (const name of globalNames) {
+        $.mcpServerList.appendChild(renderCard(name, globalServers[name], "global"));
+      }
+    }
+  } catch {
+    $.mcpServerList.innerHTML = `<div class="mcp-empty">Failed to load servers</div>`;
+  }
+}
+
+function getServerType(config) {
+  if (config.command) return "stdio";
+  if (config.url && config.url.includes("/sse")) return "sse";
+  if (config.url) return "http";
+  return config.type || "stdio";
+}
+
+function getServerDetail(config) {
+  if (config.command) {
+    const args = config.args ? " " + config.args.join(" ") : "";
+    return config.command + args;
+  }
+  if (config.url) return config.url;
+  return "";
+}
+
+function renderCard(name, config, scope) {
+  const type = getServerType(config);
+  const detail = getServerDetail(config);
+
+  const card = document.createElement("div");
+  card.className = "mcp-server-card";
+  card.innerHTML = `
+    <div class="mcp-server-info">
+      <div class="mcp-server-name">
+        ${escapeHtml(name)}
+        <span class="mcp-server-type">${type}</span>
+      </div>
+      <div class="mcp-server-detail" title="${escapeHtml(detail)}">${escapeHtml(detail)}</div>
+    </div>
+    <div class="mcp-server-actions">
+      <button class="edit" title="Edit">&#9998;</button>
+      <button class="delete" title="Delete">&times;</button>
+    </div>
+  `;
+
+  card.querySelector(".edit").addEventListener("click", () => showEditForm(name, config, scope));
+  card.querySelector(".delete").addEventListener("click", () => handleDelete(name, scope));
+
+  return card;
+}
+
+// ── Scope Selector ─────────────────────────────────────
+
+function ensureScopeSelector() {
+  let sel = document.getElementById("mcp-scope");
+  if (sel) return sel;
+
+  // Create label + select, insert before the Type label
+  const label = document.createElement("label");
+  label.setAttribute("for", "mcp-scope");
+  label.textContent = "Scope";
+  label.id = "mcp-scope-label";
+
+  sel = document.createElement("select");
+  sel.id = "mcp-scope";
+
+  const typeLabel = $.mcpType.previousElementSibling;
+  $.mcpForm.insertBefore(sel, typeLabel);
+  $.mcpForm.insertBefore(label, sel);
+
+  sel.addEventListener("change", () => { editingScope = sel.value; });
+  return sel;
+}
+
+function updateScopeSelector(disabled) {
+  const sel = ensureScopeSelector();
+  const label = document.getElementById("mcp-scope-label");
+  const projectPath = getCurrentProject();
+
+  sel.innerHTML = `<option value="global">Global (~/.claude)</option>`;
+  if (projectPath) {
+    sel.innerHTML += `<option value="project">Project (.claude/)</option>`;
+  }
+  sel.value = editingScope;
+  sel.disabled = !!disabled;
+
+  // Hide scope selector entirely if no project selected
+  const hidden = !projectPath;
+  sel.style.display = hidden ? "none" : "";
+  label.style.display = hidden ? "none" : "";
+}
+
+// ── Form ────────────────────────────────────────────────
+
+function showAddForm() {
+  editingName = null;
+  editingScope = "global";
+  $.mcpFormTitle.textContent = "Add Server";
+  $.mcpForm.reset();
+  $.mcpName.disabled = false;
+  updateTypeFields();
+  updateScopeSelector(false);
+  $.mcpFormContainer.classList.remove("hidden");
+  $.mcpAddBtn.classList.add("hidden");
+  $.mcpName.focus();
+}
+
+function showEditForm(name, config, scope) {
+  editingName = name;
+  editingScope = scope;
+  $.mcpFormTitle.textContent = "Edit Server";
+  $.mcpName.value = name;
+  $.mcpName.disabled = true;
+
+  const type = getServerType(config);
+  $.mcpType.value = type;
+  updateTypeFields();
+  updateScopeSelector(true); // can't change scope when editing
+
+  if (config.command) {
+    $.mcpCommand.value = config.command || "";
+    $.mcpArgs.value = (config.args || []).join("\n");
+    const envLines = Object.entries(config.env || {}).map(([k, v]) => `${k}=${v}`);
+    $.mcpEnv.value = envLines.join("\n");
+  }
+  if (config.url) {
+    $.mcpUrl.value = config.url;
+  }
+
+  $.mcpFormContainer.classList.remove("hidden");
+  $.mcpAddBtn.classList.add("hidden");
+}
+
+function hideForm() {
+  $.mcpFormContainer.classList.add("hidden");
+  $.mcpAddBtn.classList.remove("hidden");
+  editingName = null;
+}
+
+function updateTypeFields() {
+  const type = $.mcpType.value;
+  if (type === "stdio") {
+    $.mcpStdioFields.classList.remove("hidden");
+    $.mcpUrlFields.classList.add("hidden");
+  } else {
+    $.mcpStdioFields.classList.add("hidden");
+    $.mcpUrlFields.classList.remove("hidden");
+  }
+}
+
+async function handleSubmit(e) {
+  e.preventDefault();
+  const name = editingName || $.mcpName.value.trim();
+  if (!name) return;
+
+  const type = $.mcpType.value;
+  let config = {};
+
+  if (type === "stdio") {
+    config.command = $.mcpCommand.value.trim();
+    const argsText = $.mcpArgs.value.trim();
+    if (argsText) config.args = argsText.split("\n").map((s) => s.trim()).filter(Boolean);
+    const envText = $.mcpEnv.value.trim();
+    if (envText) {
+      config.env = {};
+      for (const line of envText.split("\n")) {
+        const eq = line.indexOf("=");
+        if (eq > 0) {
+          config.env[line.slice(0, eq).trim()] = line.slice(eq + 1).trim();
+        }
+      }
+    }
+  } else {
+    config.url = $.mcpUrl.value.trim();
+    config.type = type;
+  }
+
+  const projectPath = editingScope === "project" ? getCurrentProject() : undefined;
+
+  $.mcpFormSave.disabled = true;
+  $.mcpFormSave.textContent = "Saving...";
+
+  try {
+    await saveMcpServer(name, config, projectPath);
+    hideForm();
+    await loadServers();
+  } catch {
+    $.mcpFormSave.textContent = "Failed";
+  } finally {
+    $.mcpFormSave.disabled = false;
+    $.mcpFormSave.textContent = "Save";
+  }
+}
+
+async function handleDelete(name, scope) {
+  if (!confirm(`Delete MCP server "${name}"?`)) return;
+
+  const projectPath = scope === "project" ? getCurrentProject() : undefined;
+  try {
+    await deleteMcpServer(name, projectPath);
+    await loadServers();
+  } catch {}
+}
+
+// ── Init ────────────────────────────────────────────────
+
+function initMcpManager() {
+  $.mcpToggleBtn.addEventListener("click", () => openModal());
+  $.mcpModalClose.addEventListener("click", () => closeModal());
+  $.mcpModal.addEventListener("click", (e) => {
+    if (e.target === $.mcpModal) closeModal();
+  });
+  $.mcpAddBtn.addEventListener("click", () => showAddForm());
+  $.mcpFormCancel.addEventListener("click", () => hideForm());
+  $.mcpType.addEventListener("change", () => updateTypeFields());
+  $.mcpForm.addEventListener("submit", handleSubmit);
+
+  // Register /mcp slash command
+  registerCommand("mcp", {
+    category: "app",
+    description: "Manage MCP servers",
+    execute() {
+      openModal();
+    },
+  });
+}
+
+initMcpManager();