claudeck 1.2.0 → 1.3.1

package/public/js/features/attachments.js

@@ -7,6 +7,45 @@ import { registerCommand } from '../ui/commands.js';
 const SUPPORTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
 
+// ── File type categorization ─────────────────────────────
+const FILE_TYPES = {
+  code:   new Set(['js','jsx','ts','tsx','mjs','cjs','py','go','rs','java','rb','php','c','cpp','h','hpp','swift','kt','scala','sh','bash','zsh','lua','r','pl','ex','exs','elm','hs','clj','dart','cs','vue','svelte']),
+  config: new Set(['json','yaml','yml','toml','env','ini','lock','conf','cfg','properties','editorconfig','gitignore','dockerignore','eslintrc','prettierrc','babelrc','nvmrc']),
+  markup: new Set(['html','htm','css','scss','sass','less','xml','svg','astro','njk','ejs','hbs','pug','styl']),
+  docs:   new Set(['md','txt','rst','adoc','tex','org','log']),
+  data:   new Set(['csv','sql','graphql','gql','prisma','tsv']),
+};
+
+const BINARY_EXTENSIONS = new Set([
+  'png','jpg','jpeg','gif','webp','bmp','ico','tiff','tif',
+  'pdf','zip','gz','tar','rar','7z','bz2','xz',
+  'exe','dll','so','dylib','o','a','wasm','bin','dat',
+  'db','sqlite','sqlite3',
+  'mp3','mp4','avi','mov','flv','wmv','wav','ogg','flac','aac','m4a',
+  'ttf','otf','woff','woff2','eot',
+  'class','jar','pyc','pyo',
+  'DS_Store',
+]);
+
+function getFileExt(filePath) {
+  const dot = filePath.lastIndexOf('.');
+  if (dot < 0) return '';
+  return filePath.slice(dot + 1).toLowerCase();
+}
+
+function getFileCategory(filePath) {
+  const ext = getFileExt(filePath);
+  if (BINARY_EXTENSIONS.has(ext)) return 'binary';
+  for (const [cat, exts] of Object.entries(FILE_TYPES)) {
+    if (exts.has(ext)) return cat;
+  }
+  return 'default';
+}
+
+function isBinaryFile(filePath) {
+  return BINARY_EXTENSIONS.has(getFileExt(filePath));
+}
+
 // ── Badge ────────────────────────────────────────────────
 export function updateAttachmentBadge() {
   const attachedFiles = getState("attachedFiles");
@@ -20,7 +59,59 @@ export function updateAttachmentBadge() {
   }
 }
 
-// ── File picker (existing) ───────────────────────────────
+// ── Selected chips ───────────────────────────────────────
+function renderSelectedChips() {
+  const attachedFiles = getState("attachedFiles");
+  $.fpSelected.innerHTML = "";
+
+  if (attachedFiles.length === 0) {
+    $.fpSelected.classList.add("hidden");
+    return;
+  }
+
+  $.fpSelected.classList.remove("hidden");
+  for (const file of attachedFiles) {
+    const chip = document.createElement("div");
+    chip.className = "fp-chip";
+
+    const name = document.createElement("span");
+    name.className = "fp-chip-name";
+    name.textContent = file.path;
+    name.title = file.path;
+
+    const removeBtn = document.createElement("button");
+    removeBtn.className = "fp-chip-remove";
+    removeBtn.textContent = "\u00d7";
+    removeBtn.title = "Remove";
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      removeFileByPath(file.path);
+    });
+
+    chip.appendChild(name);
+    chip.appendChild(removeBtn);
+    $.fpSelected.appendChild(chip);
+  }
+}
+
+function removeFileByPath(path) {
+  const attachedFiles = getState("attachedFiles").filter(f => f.path !== path);
+  setState("attachedFiles", attachedFiles);
+  renderSelectedChips();
+  updateFooterCount();
+  updateAttachmentBadge();
+  // Update item in list if visible
+  const items = $.fpList.querySelectorAll(".file-picker-item");
+  for (const item of items) {
+    if (item.dataset.path === path) {
+      item.classList.remove("selected");
+      const check = item.querySelector(".fp-check");
+      if (check) check.style.opacity = "0";
+    }
+  }
+}
+
+// ── File picker ──────────────────────────────────────────
 export async function openFilePicker() {
   const cwd = $.projectSelect.value;
   if (!cwd) return;
@@ -48,38 +139,144 @@ export function renderFilePicker(filter) {
     ? allProjectFiles.filter((f) => f.toLowerCase().includes(lower))
     : allProjectFiles;
 
-  for (const filePath of filtered.slice(0, 200)) {
+  const visible = filtered.slice(0, 200);
+
+  // Show/hide empty state
+  if (visible.length === 0) {
+    $.fpEmpty.classList.remove("hidden");
+    $.fpList.style.display = "none";
+  } else {
+    $.fpEmpty.classList.add("hidden");
+    $.fpList.style.display = "";
+  }
+
+  for (const filePath of visible) {
+    const category = getFileCategory(filePath);
+    const binary = category === 'binary';
+    const isSelected = attachedFiles.some((f) => f.path === filePath);
+
     const item = document.createElement("div");
     item.className = "file-picker-item";
-    const isSelected = attachedFiles.some((f) => f.path === filePath);
+    item.dataset.path = filePath;
     if (isSelected) item.classList.add("selected");
-    item.textContent = filePath;
-    item.addEventListener("click", () => toggleFileAttachment(filePath, item));
+    if (binary) item.classList.add("binary-warn");
+
+    // Type dot
+    const dot = document.createElement("span");
+    dot.className = `fp-type-dot type-${category}`;
+    item.appendChild(dot);
+
+    // File path
+    const pathEl = document.createElement("span");
+    pathEl.className = "fp-path";
+    pathEl.textContent = filePath;
+    item.appendChild(pathEl);
+
+    if (binary) {
+      // Binary label
+      const label = document.createElement("span");
+      label.className = "fp-binary-label";
+      label.textContent = "binary";
+      item.appendChild(label);
+    } else {
+      // Checkmark
+      const check = document.createElement("span");
+      check.className = "fp-check";
+      check.textContent = "\u2713";
+      item.appendChild(check);
+
+      item.addEventListener("click", () => toggleFileAttachment(filePath, item));
+    }
+
     $.fpList.appendChild(item);
   }
+
+  renderSelectedChips();
+  updateFooterCount();
+}
+
+function updateFooterCount() {
+  const attachedFiles = getState("attachedFiles");
+  const count = attachedFiles.length;
+  $.fpCount.textContent = `${count} file${count !== 1 ? "s" : ""} selected`;
 }
 
 async function toggleFileAttachment(filePath, itemEl) {
   const attachedFiles = [...getState("attachedFiles")];
   const idx = attachedFiles.findIndex((f) => f.path === filePath);
+
   if (idx >= 0) {
+    // Deselect
     attachedFiles.splice(idx, 1);
     setState("attachedFiles", attachedFiles);
     itemEl.classList.remove("selected");
-  } else {
-    try {
-      const cwd = $.projectSelect.value;
-      const data = await api.fetchFileContent(cwd, filePath);
-      attachedFiles.push({ path: filePath, content: data.content });
-      setState("attachedFiles", attachedFiles);
-      itemEl.classList.add("selected");
-    } catch (err) {
-      console.error("Failed to read file:", err);
-      return;
-    }
+    renderSelectedChips();
+    updateFooterCount();
+    updateAttachmentBadge();
+    return;
   }
-  $.fpCount.textContent = `${attachedFiles.length} file${attachedFiles.length !== 1 ? "s" : ""} selected`;
-  updateAttachmentBadge();
+
+  // Show loading state
+  itemEl.classList.add("loading");
+  const check = itemEl.querySelector(".fp-check");
+  if (check) check.style.display = "none";
+  const spinner = document.createElement("span");
+  spinner.className = "fp-spinner";
+  itemEl.appendChild(spinner);
+
+  try {
+    const cwd = $.projectSelect.value;
+    const data = await api.fetchFileContent(cwd, filePath);
+    // Remove spinner, show selected
+    spinner.remove();
+    if (check) check.style.display = "";
+    itemEl.classList.remove("loading");
+    itemEl.classList.add("selected");
+
+    const updated = [...getState("attachedFiles")];
+    updated.push({ path: filePath, content: data.content });
+    setState("attachedFiles", updated);
+    renderSelectedChips();
+    updateFooterCount();
+    updateAttachmentBadge();
+  } catch (err) {
+    // Remove spinner, show error
+    spinner.remove();
+    if (check) check.style.display = "";
+    itemEl.classList.remove("loading");
+    showItemError(itemEl, parseFileError(err.message));
+  }
+}
+
+function parseFileError(message) {
+  if (message.includes("50KB") || message.includes("too large") || message.includes("413")) {
+    return "Too large (50KB limit)";
+  }
+  if (message.includes("ENOENT") || message.includes("not found")) {
+    return "File not found";
+  }
+  if (message.includes("EACCES") || message.includes("permission")) {
+    return "Permission denied";
+  }
+  return "Cannot read file";
+}
+
+function showItemError(itemEl, message) {
+  itemEl.classList.add("error");
+  // Remove existing error msg if any
+  const existing = itemEl.querySelector(".fp-error-msg");
+  if (existing) existing.remove();
+
+  const errorMsg = document.createElement("span");
+  errorMsg.className = "fp-error-msg";
+  errorMsg.textContent = message;
+  itemEl.appendChild(errorMsg);
+
+  // Auto-clear after 3s
+  setTimeout(() => {
+    itemEl.classList.remove("error");
+    errorMsg.remove();
+  }, 3000);
 }
 
 function closeFilePicker() {
@@ -89,11 +286,11 @@ function closeFilePicker() {
 // ── Image attachments ────────────────────────────────────
 export function addImageAttachment(file) {
   if (!SUPPORTED_IMAGE_TYPES.includes(file.type)) {
-    showImageError(`Unsupported image type: ${file.type}. Use PNG, JPEG, GIF, or WebP.`);
+    showImageError(`Unsupported type: ${file.type || "unknown"}. Use PNG, JPEG, GIF, or WebP.`);
     return;
   }
   if (file.size > MAX_IMAGE_SIZE) {
-    showImageError(`Image too large (${(file.size / 1024 / 1024).toFixed(1)}MB). Max 5MB.`);
+    showImageError(`Image too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Max 5 MB.`);
     return;
   }
 
@@ -145,7 +342,7 @@ function renderImagePreview() {
     const imgEl = document.createElement("img");
     imgEl.src = `data:${img.mimeType};base64,${img.data}`;
     imgEl.alt = img.name;
-    imgEl.title = img.name;
+    imgEl.title = `${img.name}`;
 
     const removeBtn = document.createElement("button");
     removeBtn.className = "image-preview-remove";
@@ -162,7 +359,6 @@ function renderImagePreview() {
 }
 
 function showImageError(message) {
-  // Use toast container if available
   const container = document.getElementById("toast-container");
   if (container) {
     const toast = document.createElement("div");
@@ -203,7 +399,6 @@ $.imageFileInput.addEventListener("change", () => {
 
 // Paste handler — detect images in clipboard
 document.addEventListener("paste", (e) => {
-  // Only handle when focus is in the chat input area
   const active = document.activeElement;
   if (active !== $.messageInput && !$.messageInput.contains(active)) return;
 
@@ -234,11 +429,19 @@ $.messageInput.addEventListener("drop", (e) => {
   $.messageInput.classList.remove("drag-highlight");
   if (!e.dataTransfer.files.length) return;
   e.preventDefault();
+
+  let hasUnsupported = false;
   for (const file of e.dataTransfer.files) {
     if (SUPPORTED_IMAGE_TYPES.includes(file.type)) {
       addImageAttachment(file);
+    } else {
+      hasUnsupported = true;
     }
   }
+
+  if (hasUnsupported) {
+    showImageError("Only images (PNG, JPEG, GIF, WebP) can be dropped here. Use the attach button for code files.");
+  }
 });
 
 // ── Commands ─────────────────────────────────────────────

package/public/js/features/projects.js

@@ -8,6 +8,7 @@ import { panes } from '../ui/parallel.js';
 import { loadSessions } from './sessions.js';
 import { loadStats } from './cost-dashboard.js';
 import { showWhalyPlaceholder, addSkillUsedMessage } from '../ui/messages.js';
+import { updateAttachmentBadge, clearImageAttachments } from './attachments.js';
 
 export async function loadProjects() {
   try {
@@ -362,6 +363,12 @@ $.projectSelect.addEventListener("change", async () => {
     if ($.projectSelect.value) {
       setState("view", "chat");
     }
+    // Clear attachments and input on project switch
+    setState("attachedFiles", []);
+    setState("allProjectFiles", []);
+    clearImageAttachments();
+    updateAttachmentBadge();
+    $.messageInput.value = "";
     updateSystemPromptIndicator();
     updateHeaderProjectName();
     updateSessionControls();

package/public/js/main.js

@@ -1,4 +1,26 @@
 // Entry point — imports all modules and runs boot sequence
+
+// Web Components — must load before dom.js so getElementById finds their elements
+import './components/welcome-overlay.js';
+import './components/orchestrate-modal.js';
+import './components/agent-monitor-modal.js';
+import './components/dag-editor-modal.js';
+import './components/chain-modal.js';
+import './components/agent-modal.js';
+import './components/workflow-modal.js';
+import './components/prompt-modal.js';
+import './components/system-prompt-modal.js';
+import './components/file-picker-modal.js';
+import './components/shortcuts-modal.js';
+import './components/cost-dashboard-modal.js';
+import './components/bg-confirm-modal.js';
+import './components/permission-modal.js';
+import './components/linear-create-modal.js';
+import './components/telegram-modal.js';
+import './components/mcp-modal.js';
+import './components/add-project-modal.js';
+import './components/status-bar.js';
+
 import './core/store.js';
 import './core/dom.js';
 import './core/constants.js';

package/public/js/ui/shortcuts.js

@@ -11,12 +11,8 @@ function closeAllModals() {
   document.querySelectorAll(".modal-overlay:not([data-persistent])").forEach((m) => m.classList.add("hidden"));
 }
 
-document.getElementById("shortcuts-modal-close").addEventListener("click", () => {
-  $.shortcutsModal.classList.add("hidden");
-});
-$.shortcutsModal.addEventListener("click", (e) => {
-  if (e.target === $.shortcutsModal) $.shortcutsModal.classList.add("hidden");
-});
+// Shortcuts modal ref — rendered by <claudeck-shortcuts-modal> web component
+const shortcutsModal = document.getElementById("shortcuts-modal");
 
 document.addEventListener("keydown", (e) => {
   const isMeta = e.metaKey || e.ctrlKey;
@@ -43,7 +39,7 @@ document.addEventListener("keydown", (e) => {
 
   if (isMeta && e.key === "/") {
     e.preventDefault();
-    $.shortcutsModal.classList.toggle("hidden");
+    shortcutsModal.classList.toggle("hidden");
     return;
   }
 
@@ -113,7 +109,7 @@ registerCommand("shortcuts", {
   category: "app",
   description: "Show keyboard shortcuts",
   execute() {
-    $.shortcutsModal.classList.remove("hidden");
+    shortcutsModal.classList.remove("hidden");
   },
 });