openclacky 1.5.21 → 1.5.22

data/lib/clacky/web/features/tasks/view.js

@@ -135,9 +135,9 @@ const TasksView = (() => {
   }
 
   const ICONS = {
-    play:   '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg>',
+    play:   '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 4.2a1 1 0 0 1 1.53-.85l10.3 7.8a1 1 0 0 1 0 1.7l-10.3 7.8a1 1 0 0 1-1.53-.85Z"/></svg>',
     more:   '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>',
-    edit:   '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>',
+    edit:   '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>',
     pause:  '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="10" y1="9" x2="10" y2="15"/><line x1="14" y1="9" x2="14" y2="15"/></svg>',
     resume: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polygon points="10 8.5 16 12 10 15.5 10 8.5"/></svg>',
     history:'<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>',
@@ -146,6 +146,7 @@ const TasksView = (() => {
 
   let _tab       = "tasks";
   let _query     = "";
+  let _filter    = "all";   // all | active | paused
   let _runsTask  = null;   // narrow the run list to one task (from a row's menu)
   let _menuEl    = null;
   let _menuBtn   = null;
@@ -163,6 +164,31 @@ const TasksView = (() => {
     return `${_pad(d.getMonth() + 1)}/${_pad(d.getDate())} ${_pad(d.getHours())}:${_pad(d.getMinutes())}`;
   }
 
+  function _nextRunLabel(iso) {
+    if (!iso) return "";
+    const d = new Date(iso);
+    if (isNaN(d)) return "";
+    const mins = Math.round((d - new Date()) / 60000);
+    if (mins <= 0) return I18n.t("tasks.next.soon");
+    if (mins < 60) return I18n.t("tasks.next.minutes", { n: mins });
+    const hours = Math.round(mins / 60);
+    if (hours < 24) return I18n.t("tasks.next.hours", { n: hours });
+    return I18n.t("tasks.next.days", { n: Math.round(hours / 24) });
+  }
+
+  function _plainPreview(md) {
+    return (md || "")
+      .replace(/```[\s\S]*?```/g, " ")
+      .replace(/!\[[^\]]*\]\([^)]*\)/g, " ")
+      .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+      .replace(/^[ \t]{0,3}#{1,6}[ \t]*/gm, "")
+      .replace(/^[ \t]{0,3}>[ \t]?/gm, "")
+      .replace(/^[ \t]{0,3}([-*+]|\d+\.)[ \t]+/gm, "")
+      .replace(/[*_`~]+/g, "")
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
   function _formatDuration(startIso, endIso) {
     if (!startIso || !endIso) return "";
     const secs = Math.max(0, Math.round((new Date(endIso) - new Date(startIso)) / 1000));
@@ -204,50 +230,108 @@ const TasksView = (() => {
     }
   }
 
-  function _renderTaskRow(t) {
-    const row = document.createElement("div");
-    row.className = "cron-row";
-    row.dataset.name = t.name;
-
+  // Full prompt lives in a modal: a grid cell is too narrow to read a long task body.
+  function _openDetail(t) {
     const isPaused = t.scheduled && t.enabled === false;
-    row.classList.toggle("cron-row-paused", isPaused);
+    const sched = t.scheduled ? _humanCron(t.cron) : I18n.t("tasks.manual");
+    const next  = isPaused ? I18n.t("tasks.section.paused")
+                : t.scheduled ? _nextRunLabel(t.next_run)
+                : "";
+    const meta  = [sched, next].filter(Boolean).join(" · ");
+
+    const overlay = document.createElement("div");
+    overlay.className = "modal-overlay";
+    overlay.innerHTML = `
+      <div class="modal-box lg task-detail-modal" role="dialog" aria-modal="true" aria-labelledby="task-detail-title">
+        <div class="modal-header">
+          <h3 class="modal-title" id="task-detail-title">${escapeHtml(t.name)}</h3>
+          <button type="button" class="modal-close-btn" aria-label="${escapeHtml(I18n.t("modal.close"))}"></button>
+        </div>
+        <div class="modal-body">
+          ${meta ? `<p class="form-hint">${escapeHtml(meta)}</p>` : ""}
+          <div class="extension-readme-body">${_markdownHtml(t.content)}</div>
+        </div>
+      </div>`;
+    document.body.appendChild(overlay);
 
-    const sched = t.scheduled
-      ? `<span class="cron-row-cron" title="${escapeHtml(t.cron)}">${escapeHtml(_humanCron(t.cron))}</span>`
-      : `<span class="cron-row-cron cron-row-cron-manual">${escapeHtml(I18n.t("tasks.manual"))}</span>`;
+    const close = () => {
+      document.removeEventListener("keydown", onKey);
+      overlay.remove();
+    };
+    const onKey = e => { if (e.key === "Escape") close(); };
+    document.addEventListener("keydown", onKey);
+    overlay.addEventListener("click", e => { if (e.target === overlay) close(); });
+    overlay.querySelector(".modal-close-btn").addEventListener("click", close);
+  }
 
-    const content  = t.content || "";
-    const preview  = content.replace(/\s+/g, " ").trim();
-    row.innerHTML = `
-      <div class="cron-row-main">
-        <span class="cron-row-name">${escapeHtml(t.name)}</span>
-        <span class="cron-row-preview">${escapeHtml(preview) || escapeHtml(I18n.t("tasks.empty"))}</span>
-        <div class="cron-row-end">
-          <div class="cron-row-meta">${sched}</div>
-          <div class="cron-row-actions">
-          <button type="button" class="cron-row-btn task-btn-run" title="${escapeHtml(I18n.t("tasks.btn.run"))}" aria-label="${escapeHtml(I18n.t("tasks.btn.run"))}">${ICONS.play}</button>
-          <button type="button" class="cron-row-btn ext-row-more task-btn-more" aria-haspopup="menu" aria-expanded="false" title="${escapeHtml(I18n.t("tasks.btn.more"))}">${ICONS.more}</button>
+  function _renderTaskCard(t) {
+    const isPaused = t.scheduled && t.enabled === false;
+    const card = document.createElement("article");
+    card.className = "task-card";
+    card.dataset.name = t.name;
+    card.classList.toggle("is-paused", isPaused);
+    card.classList.toggle("is-manual", !t.scheduled);
+
+    const content = _plainPreview(t.content);
+    const sched   = t.scheduled ? _humanCron(t.cron) : I18n.t("tasks.manual");
+    const next    = isPaused ? I18n.t("tasks.section.paused")
+                  : t.scheduled ? _nextRunLabel(t.next_run)
+                  : "";
+    const nextAt  = t.next_run ? new Date(t.next_run) : null;
+    const nextTip = nextAt && !isNaN(nextAt) ? nextAt.toLocaleString() : "";
+
+    card.innerHTML = `
+      <div class="task-card-head">
+        <h3 class="task-card-title" title="${escapeHtml(t.name)}">${escapeHtml(t.name)}</h3>
+        <div class="task-card-actions">
+          <div class="task-card-tools">
+            <button type="button" class="task-card-tool task-btn-run" data-tooltip="${escapeHtml(I18n.t("tasks.btn.run"))}" data-i18n-tooltip="tasks.btn.run" aria-label="${escapeHtml(I18n.t("tasks.btn.run"))}">${ICONS.play}</button>
+            <button type="button" class="task-card-tool task-btn-edit" data-tooltip="${escapeHtml(I18n.t("tasks.btn.edit"))}" data-i18n-tooltip="tasks.btn.edit" aria-label="${escapeHtml(I18n.t("tasks.btn.edit"))}">${ICONS.edit}</button>
+            <button type="button" class="task-card-tool ext-row-more task-btn-more" aria-haspopup="menu" aria-expanded="false" title="${escapeHtml(I18n.t("tasks.btn.more"))}" aria-label="${escapeHtml(I18n.t("tasks.btn.more"))}">${ICONS.more}</button>
           </div>
+          ${t.scheduled ? `<label class="toggle-switch task-card-toggle" title="${escapeHtml(I18n.t(isPaused ? "tasks.btn.resume" : "tasks.btn.pause"))}">
+            <input type="checkbox"${isPaused ? "" : " checked"} />
+            <span class="toggle-slider"></span>
+          </label>` : ""}
         </div>
       </div>
-      ${content.trim() ? `<div class="cron-row-detail" hidden><div class="task-card-detail-content extension-readme-body">${_markdownHtml(content)}</div></div>` : ""}`;
+      <p class="task-card-desc">${escapeHtml(content) || escapeHtml(I18n.t("tasks.empty"))}</p>
+      <div class="task-card-foot">
+        <span class="task-card-sched">
+          <svg class="task-card-clock" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15.5 14"/></svg>
+          <span class="task-card-sched-text" title="${escapeHtml(t.cron || sched)}">${escapeHtml(sched)}</span>
+        </span>
+        ${next ? `<span class="task-card-next"${nextTip ? ` title="${escapeHtml(nextTip)}"` : ""}>${escapeHtml(next)}</span>` : ""}
+      </div>`;
 
-    row.querySelector(".task-btn-run").addEventListener("click", e => {
+    const toggle = card.querySelector(".task-card-toggle input");
+    if (toggle) {
+      toggle.addEventListener("change", e => {
+        e.stopPropagation();
+        Tasks.toggleEnabled(t.name, isPaused);
+      });
+      toggle.addEventListener("click", e => e.stopPropagation());
+    }
+    card.querySelector(".task-btn-run").addEventListener("click", e => {
       e.stopPropagation();
       Tasks.run(t.name);
     });
-    row.querySelector(".task-btn-more").addEventListener("click", e => {
+    card.querySelector(".task-btn-edit").addEventListener("click", e => {
+      e.stopPropagation();
+      Tasks.editInSession(t.name);
+    });
+    card.querySelector(".task-btn-more").addEventListener("click", e => {
       e.stopPropagation();
       _toggleMenu(e.currentTarget, t, isPaused);
     });
-    const detail = row.querySelector(".cron-row-detail");
-    if (detail) {
-      row.querySelector(".cron-row-main").addEventListener("click", () => {
-        detail.hidden = !detail.hidden;
-        row.classList.toggle("cron-row-expanded", !detail.hidden);
+
+    if (t.content) {
+      card.addEventListener("click", e => {
+        if (e.target.closest("button, label, a")) return;
+        _openDetail(t);
       });
     }
-    return row;
+    return card;
   }
 
   function _menuItems(t, isPaused) {
@@ -297,6 +381,8 @@ const TasksView = (() => {
     el.hidden = false;
     _menuBtn = btn;
     btn.setAttribute("aria-expanded", "true");
+    const card = btn.closest(".task-card");
+    if (card) card.classList.add("is-menu-open");
 
     const rect = btn.getBoundingClientRect();
     const w = el.offsetWidth, h = el.offsetHeight;
@@ -309,7 +395,11 @@ const TasksView = (() => {
   function _closeMenu() {
     if (!_menuEl || _menuEl.hidden) return;
     _menuEl.hidden = true;
-    if (_menuBtn) _menuBtn.setAttribute("aria-expanded", "false");
+    if (_menuBtn) {
+      _menuBtn.setAttribute("aria-expanded", "false");
+      const card = _menuBtn.closest(".task-card");
+      if (card) card.classList.remove("is-menu-open");
+    }
     _menuBtn = null;
   }
 
@@ -320,13 +410,6 @@ const TasksView = (() => {
     return h;
   }
 
-  function _sectionEmpty(text) {
-    const e = document.createElement("div");
-    e.className = "task-section-empty";
-    e.textContent = text;
-    return e;
-  }
-
   function _emptyState(text) {
     const el = document.createElement("div");
     el.className = "task-table-empty";
@@ -334,6 +417,30 @@ const TasksView = (() => {
     return el;
   }
 
+  function _renderFilterBar(matched) {
+    const isPaused = t => t.scheduled && t.enabled === false;
+    const counts = {
+      all:    matched.length,
+      active: matched.filter(t => !isPaused(t)).length,
+      paused: matched.filter(isPaused).length,
+    };
+    const bar = document.createElement("div");
+    bar.className = "segmented-control";
+    bar.setAttribute("role", "tablist");
+    bar.innerHTML = ["all", "active", "paused"].map(kind => `
+      <button type="button" role="tab" class="segmented-control__btn${_filter === kind ? " active" : ""}"
+              data-filter="${kind}" aria-selected="${_filter === kind}">
+        ${escapeHtml(I18n.t("tasks.filter." + kind))}<span class="segmented-control__count">(${counts[kind]})</span>
+      </button>`).join("");
+    bar.querySelectorAll("[data-filter]").forEach(btn => {
+      btn.addEventListener("click", () => {
+        _filter = btn.dataset.filter;
+        _renderTable();
+      });
+    });
+    return bar;
+  }
+
   function _renderTable() {
     const table = $("task-list-table");
     if (!table) return;
@@ -354,23 +461,27 @@ const TasksView = (() => {
       return;
     }
 
-    const tasks = _query ? all.filter(t => _matches(t.name) || _matches(t.content)) : all;
-    if (tasks.length === 0) {
+    const matched = _query ? all.filter(t => _matches(t.name) || _matches(t.content)) : all;
+    table.appendChild(_renderFilterBar(matched));
+
+    if (matched.length === 0) {
       table.appendChild(_emptyState(I18n.t("tasks.search.empty")));
       return;
     }
 
-    const active = tasks.filter(t => !(t.scheduled && t.enabled === false));
-    const paused = tasks.filter(t => t.scheduled && t.enabled === false);
-    if (active.length || !_query) {
-      table.appendChild(_sectionHeader(I18n.t("tasks.section.active")));
-      if (active.length) active.forEach(t => table.appendChild(_renderTaskRow(t)));
-      else table.appendChild(_sectionEmpty(I18n.t("tasks.section.activeEmpty")));
-    }
-    if (paused.length) {
-      table.appendChild(_sectionHeader(I18n.t("tasks.section.paused")));
-      paused.forEach(t => table.appendChild(_renderTaskRow(t)));
+    const isPaused = t => t.scheduled && t.enabled === false;
+    const shown = _filter === "active" ? matched.filter(t => !isPaused(t))
+                : _filter === "paused" ? matched.filter(isPaused)
+                : matched;
+    if (shown.length === 0) {
+      table.appendChild(_emptyState(I18n.t(_filter === "active" ? "tasks.section.activeEmpty" : "tasks.section.pausedEmpty")));
+      return;
     }
+
+    const grid = document.createElement("div");
+    grid.className = "task-card-grid";
+    shown.forEach(t => grid.appendChild(_renderTaskCard(t)));
+    table.appendChild(grid);
   }
 
   function _renderRunRow(r) {

data/lib/clacky/web/features/workspace/store.js

@@ -40,13 +40,20 @@ const WorkspaceStore = (() => {
 
   // Throw with the backend's error message when available so toasts show the
   // real cause ("file not found", "unsupported OS", …) instead of "HTTP 404".
+  // The machine-readable `code` rides along so callers can react to a specific
+  // cause (a deleted working dir) rather than matching on prose.
   async function _respError(resp) {
     let detail = `HTTP ${resp.status}`;
+    let code = null;
     try {
       const data = await resp.json();
       if (data && data.error) detail = data.error;
+      if (data && data.code) code = data.code;
     } catch (_e) { /* non-JSON body */ }
-    throw new Error(detail);
+    const err = new Error(detail);
+    err.status = resp.status;
+    err.code = code;
+    throw err;
   }
 
   const state = {
@@ -110,18 +117,18 @@ const WorkspaceStore = (() => {
     },
 
     /** Default application the OS would use to open this file; null if none.
-     *  Cached per extension so tab switches don't refetch. */
+     *  Cached per extension so tab switches don't refetch. Extension-less
+     *  files (Dockerfile, Makefile) resolve per path and skip the cache. */
     async fetchDefaultApp(entry) {
       const ext = (entry.path.match(/\.([^./\\]+)$/) || [])[1];
-      if (!ext) return null;
-      const key = ext.toLowerCase();
-      if (Object.prototype.hasOwnProperty.call(_defaultAppCache, key)) {
+      const key = ext ? ext.toLowerCase() : null;
+      if (key && Object.prototype.hasOwnProperty.call(_defaultAppCache, key)) {
         return _defaultAppCache[key];
       }
       const resp = await fetch("/api/file/default-app?path=" + encodeURIComponent(_absPath(entry.path)));
       const data = resp.ok ? await resp.json() : null;
       const app = data && data.ok ? data.app || null : null;
-      _defaultAppCache[key] = app;
+      if (key) _defaultAppCache[key] = app;
       return app;
     },