claw-design 1.0.1

package/out/renderer/assets/sidebar-Bt34gvPU.js

@@ -0,0 +1,563 @@
+const INITIAL_SIDEBAR_STATE = {
+  visual: "hidden",
+  tasks: /* @__PURE__ */ new Map(),
+  autoExpandTimerId: null,
+  selectionModeActive: false
+};
+function computeBadge(tasks) {
+  let completed = 0;
+  let total = 0;
+  for (const task of tasks.values()) {
+    total++;
+    if (task.status === "done" || task.status === "error") {
+      completed++;
+    }
+  }
+  return { completed, total, text: `${completed}/${total}` };
+}
+function sidebarTransition(state2, event) {
+  const noEffect = { shouldAutoExpand: false, shouldPulse: null };
+  switch (event.type) {
+    case "TASK_ADDED": {
+      const newTasks = new Map(state2.tasks);
+      newTasks.set(event.task.id, event.task);
+      if (state2.visual === "hidden") {
+        return {
+          state: { ...state2, visual: "minimized", tasks: newTasks },
+          shouldAutoExpand: true,
+          shouldPulse: null
+        };
+      }
+      if (state2.visual === "minimized") {
+        return {
+          state: { ...state2, tasks: newTasks },
+          shouldAutoExpand: true,
+          shouldPulse: null
+        };
+      }
+      return {
+        state: { ...state2, tasks: newTasks },
+        ...noEffect
+      };
+    }
+    case "TASK_UPDATED": {
+      const newTasks = new Map(state2.tasks);
+      newTasks.set(event.task.id, event.task);
+      const isTerminal = event.task.status === "done" || event.task.status === "error";
+      const pulse = isTerminal && state2.visual === "minimized" ? event.task.status === "error" ? "error" : "done" : null;
+      return {
+        state: { ...state2, tasks: newTasks },
+        shouldAutoExpand: false,
+        shouldPulse: pulse
+      };
+    }
+    case "TASK_DISMISSED": {
+      const newTasks = new Map(state2.tasks);
+      newTasks.delete(event.id);
+      if (newTasks.size === 0) {
+        return {
+          state: { ...state2, visual: "hidden", tasks: newTasks },
+          ...noEffect
+        };
+      }
+      return {
+        state: { ...state2, tasks: newTasks },
+        ...noEffect
+      };
+    }
+    case "EXPAND": {
+      if (state2.visual === "minimized") {
+        return {
+          state: { ...state2, visual: "expanded" },
+          ...noEffect
+        };
+      }
+      return { state: state2, ...noEffect };
+    }
+    case "COLLAPSE": {
+      if (state2.visual === "expanded") {
+        return {
+          state: { ...state2, visual: "minimized" },
+          ...noEffect
+        };
+      }
+      return { state: state2, ...noEffect };
+    }
+    case "SELECTION_MODE_ACTIVE": {
+      if (state2.visual === "expanded") {
+        return {
+          state: {
+            ...state2,
+            visual: "minimized",
+            selectionModeActive: true
+          },
+          ...noEffect
+        };
+      }
+      return {
+        state: { ...state2, selectionModeActive: true },
+        ...noEffect
+      };
+    }
+    case "SELECTION_MODE_INACTIVE": {
+      return {
+        state: { ...state2, selectionModeActive: false },
+        ...noEffect
+      };
+    }
+    case "AUTO_EXPAND_TIMEOUT": {
+      if (state2.visual === "expanded") {
+        return {
+          state: { ...state2, visual: "minimized" },
+          ...noEffect
+        };
+      }
+      return { state: state2, ...noEffect };
+    }
+    default:
+      return { state: state2, ...noEffect };
+  }
+}
+let state = { ...INITIAL_SIDEBAR_STATE, tasks: /* @__PURE__ */ new Map() };
+const expandedLogs = /* @__PURE__ */ new Set();
+const taskTimers = /* @__PURE__ */ new Map();
+function formatElapsed(ms) {
+  const totalSec = Math.floor(ms / 1e3);
+  if (totalSec < 60) return `${totalSec}s`;
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  return `${min}m ${sec.toString().padStart(2, "0")}s`;
+}
+function startTaskTimer(taskId) {
+  if (taskTimers.has(taskId)) return;
+  const startTime = Date.now();
+  const intervalId = setInterval(() => {
+    const el = document.querySelector(`[data-task-id="${taskId}"] .task-timer`);
+    if (el) el.textContent = formatElapsed(Date.now() - startTime);
+  }, 1e3);
+  taskTimers.set(taskId, { startTime, intervalId });
+}
+function stopTaskTimer(taskId) {
+  const timer = taskTimers.get(taskId);
+  if (!timer) return;
+  clearInterval(timer.intervalId);
+  const el = document.querySelector(`[data-task-id="${taskId}"] .task-timer`);
+  if (el) el.textContent = formatElapsed(Date.now() - timer.startTime);
+  taskTimers.delete(taskId);
+}
+function shortModelName(model) {
+  if (model.includes("opus")) return "Opus";
+  if (model.includes("sonnet")) return "Sonnet";
+  if (model.includes("haiku")) return "Haiku";
+  return model.replace(/^claude-/, "").replace(/-\d{8}$/, "");
+}
+const STATUS_LABELS = {
+  queued: "Queued",
+  sending: "Sending",
+  editing: "Editing",
+  done: "Done",
+  error: "Error"
+};
+let minimizedEl;
+let expandedEl;
+let expandBtn;
+let minimizeBtn;
+let taskListEl;
+let badgeEl;
+let badgeTextEl;
+const SVG_NS = "http://www.w3.org/2000/svg";
+function createDismissSvg() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("width", "12");
+  svg.setAttribute("height", "12");
+  svg.setAttribute("viewBox", "0 0 12 12");
+  svg.setAttribute("fill", "none");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", "M2 2L10 10M10 2L2 10");
+  path.setAttribute("stroke", "currentColor");
+  path.setAttribute("stroke-width", "1.5");
+  path.setAttribute("stroke-linecap", "round");
+  svg.appendChild(path);
+  return svg;
+}
+function renderTask(task) {
+  const existingRow = taskListEl.querySelector(
+    `[data-task-id="${task.id}"]`
+  );
+  if (existingRow) {
+    updateTaskRow(existingRow, task);
+  } else {
+    const row = createTaskRow(task);
+    taskListEl.prepend(row);
+  }
+}
+function createTaskRow(task) {
+  const row = document.createElement("div");
+  row.className = "task-row";
+  row.dataset.taskId = task.id;
+  row.setAttribute(
+    "aria-label",
+    `${task.instruction}, status: ${task.status}`
+  );
+  const instructionEl = document.createElement("div");
+  instructionEl.className = task.status === "error" ? "task-instruction error-row" : "task-instruction";
+  instructionEl.textContent = task.instruction;
+  instructionEl.addEventListener("click", () => toggleLogs(task.id, row));
+  row.appendChild(instructionEl);
+  const activityEl = document.createElement("div");
+  activityEl.className = "task-activity";
+  activityEl.textContent = task.activity ?? "";
+  activityEl.style.display = task.activity ? "" : "none";
+  row.appendChild(activityEl);
+  const statusRow = document.createElement("div");
+  statusRow.className = "task-status-row";
+  const badge = document.createElement("span");
+  badge.className = `status-badge ${task.status}`;
+  badge.textContent = STATUS_LABELS[task.status];
+  statusRow.appendChild(badge);
+  const timerEl = document.createElement("span");
+  timerEl.className = "task-timer";
+  timerEl.textContent = "0s";
+  statusRow.appendChild(timerEl);
+  if (task.model) {
+    const modelEl = document.createElement("span");
+    modelEl.className = "task-model";
+    modelEl.textContent = shortModelName(task.model);
+    statusRow.appendChild(modelEl);
+  }
+  if (task.status === "sending" || task.status === "editing") {
+    startTaskTimer(task.id);
+  }
+  if (task.status === "sending" || task.status === "editing") {
+    const stopBtn = createStopButton(task.id);
+    statusRow.appendChild(stopBtn);
+  }
+  if (task.status === "done") {
+    const undoBtn = createUndoButton(task.id);
+    statusRow.appendChild(undoBtn);
+    const dismissIcon = createDismissIconButton(task.id);
+    statusRow.appendChild(dismissIcon);
+  }
+  row.appendChild(statusRow);
+  if (task.status === "error") {
+    appendErrorElements(row, task);
+  }
+  return row;
+}
+function updateTaskRow(row, task) {
+  row.setAttribute(
+    "aria-label",
+    `${task.instruction}, status: ${task.status}`
+  );
+  const instructionEl = row.querySelector(".task-instruction");
+  if (instructionEl) {
+    instructionEl.className = task.status === "error" ? "task-instruction error-row" : "task-instruction";
+  }
+  const activityEl = row.querySelector(".task-activity");
+  if (activityEl) {
+    activityEl.textContent = task.activity ?? "";
+    activityEl.style.display = task.activity ? "" : "none";
+  }
+  const badge = row.querySelector(".status-badge");
+  if (badge) {
+    badge.className = `status-badge ${task.status}`;
+    badge.textContent = STATUS_LABELS[task.status];
+  }
+  if (task.status === "sending" || task.status === "editing") {
+    startTaskTimer(task.id);
+  } else if (task.status === "done" || task.status === "error") {
+    stopTaskTimer(task.id);
+  }
+  row.querySelector(".task-row-stop-btn")?.remove();
+  row.querySelector(".task-row-undo-btn")?.remove();
+  row.querySelector(".task-row-dismiss-btn")?.remove();
+  row.querySelector(".task-error-message")?.remove();
+  row.querySelector(".task-button-row")?.remove();
+  if (task.status === "sending" || task.status === "editing") {
+    const statusRow = row.querySelector(".task-status-row");
+    if (statusRow) {
+      statusRow.appendChild(createStopButton(task.id));
+    }
+  }
+  if (task.status === "done") {
+    const statusRow = row.querySelector(".task-status-row");
+    if (statusRow) {
+      statusRow.appendChild(createUndoButton(task.id));
+      statusRow.appendChild(createDismissIconButton(task.id));
+    }
+  }
+  if (task.status === "error") {
+    appendErrorElements(row, task);
+  }
+  if (expandedLogs.has(task.id)) {
+    refreshLogs(task.id, row);
+  }
+}
+function createStopButton(taskId) {
+  const btn = document.createElement("button");
+  btn.className = "task-row-stop-btn";
+  btn.textContent = "Stop";
+  btn.setAttribute("aria-label", "Stop task");
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    window.clawSidebar.dismissTask(taskId);
+  });
+  return btn;
+}
+function createUndoButton(taskId) {
+  const btn = document.createElement("button");
+  btn.className = "task-row-undo-btn";
+  btn.textContent = "Undo";
+  btn.setAttribute("aria-label", "Undo task changes");
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    window.clawSidebar.undoTask(taskId);
+  });
+  return btn;
+}
+function createDismissIconButton(taskId) {
+  const btn = document.createElement("button");
+  btn.className = "task-row-dismiss-btn";
+  btn.setAttribute("aria-label", "Dismiss task");
+  btn.appendChild(createDismissSvg());
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    handleDismiss(taskId);
+  });
+  return btn;
+}
+function appendErrorElements(row, task) {
+  if (task.error) {
+    const errorMsg = document.createElement("div");
+    errorMsg.className = "task-error-message";
+    errorMsg.textContent = task.error;
+    row.appendChild(errorMsg);
+  }
+  const buttonRow = document.createElement("div");
+  buttonRow.className = "task-button-row";
+  const retryBtn = document.createElement("button");
+  retryBtn.className = "btn-retry";
+  retryBtn.textContent = "Retry";
+  retryBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    window.clawSidebar.retryTask(task.id);
+  });
+  buttonRow.appendChild(retryBtn);
+  const dismissBtn = document.createElement("button");
+  dismissBtn.className = "btn-dismiss";
+  dismissBtn.textContent = "Dismiss";
+  dismissBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    handleDismiss(task.id);
+  });
+  buttonRow.appendChild(dismissBtn);
+  row.appendChild(buttonRow);
+}
+async function toggleLogs(taskId, row) {
+  const existing = row.querySelector(".task-logs");
+  if (existing) {
+    existing.remove();
+    expandedLogs.delete(taskId);
+    return;
+  }
+  expandedLogs.add(taskId);
+  await refreshLogs(taskId, row);
+}
+async function refreshLogs(taskId, row) {
+  const logs = await window.clawSidebar.getTaskLogs(taskId);
+  const existing = row.querySelector(".task-logs");
+  if (existing) existing.remove();
+  if (logs.length === 0) {
+    const logsEl2 = document.createElement("div");
+    logsEl2.className = "task-logs";
+    logsEl2.textContent = "No logs yet...";
+    const activityEl2 = row.querySelector(".task-activity");
+    const insertAfter2 = activityEl2 ?? row.querySelector(".task-instruction");
+    insertAfter2?.after(logsEl2);
+    return;
+  }
+  const logsEl = document.createElement("div");
+  logsEl.className = "task-logs";
+  for (const entry of logs) {
+    const line = document.createElement("div");
+    line.className = `task-log-entry log-${entry.type}`;
+    line.textContent = entry.content;
+    logsEl.appendChild(line);
+  }
+  const activityEl = row.querySelector(".task-activity");
+  const insertAfter = activityEl ?? row.querySelector(".task-instruction");
+  insertAfter?.after(logsEl);
+  logsEl.scrollTop = logsEl.scrollHeight;
+}
+function updateBadge() {
+  const badge = computeBadge(state.tasks);
+  badgeTextEl.textContent = badge.text;
+  badgeEl.style.display = badge.total > 0 ? "" : "none";
+}
+function triggerBadgePulse(type) {
+  const cls = type === "done" ? "pulse-done" : "pulse-error";
+  badgeEl.classList.remove("pulse-done", "pulse-error");
+  void badgeEl.offsetWidth;
+  badgeEl.classList.add(cls);
+  const onEnd = () => {
+    badgeEl.classList.remove(cls);
+    badgeEl.removeEventListener("animationend", onEnd);
+  };
+  badgeEl.addEventListener("animationend", onEnd);
+}
+function handleExpand() {
+  window.clawSidebar.expand();
+  const result = sidebarTransition(state, { type: "EXPAND" });
+  state = result.state;
+  updateSidebarState(state.visual);
+}
+function handleCollapse() {
+  window.clawSidebar.collapse();
+  const result = sidebarTransition(state, { type: "COLLAPSE" });
+  state = result.state;
+  updateSidebarState(state.visual);
+}
+function autoExpandForTask() {
+  window.clawSidebar.expand();
+  const result = sidebarTransition(state, { type: "EXPAND" });
+  state = result.state;
+  updateSidebarState(state.visual);
+}
+function handleDismiss(taskId) {
+  const row = taskListEl.querySelector(`[data-task-id="${taskId}"]`);
+  if (row) row.remove();
+  const result = sidebarTransition(state, {
+    type: "TASK_DISMISSED",
+    id: taskId
+  });
+  state = result.state;
+  updateBadge();
+  window.clawSidebar.dismissTask(taskId);
+  if (state.visual === "hidden") {
+    updateSidebarState("hidden");
+  }
+}
+function updateSidebarState(visual) {
+  switch (visual) {
+    case "hidden":
+      minimizedEl.style.display = "none";
+      expandedEl.style.display = "none";
+      break;
+    case "minimized":
+      minimizedEl.style.display = "";
+      expandedEl.style.display = "none";
+      break;
+    case "expanded":
+      minimizedEl.style.display = "none";
+      expandedEl.style.display = "";
+      break;
+  }
+}
+function setupDrag(handleEl) {
+  let isDragging = false;
+  let lastScreenX = 0;
+  let lastScreenY = 0;
+  handleEl.addEventListener("mousedown", (e) => {
+    isDragging = true;
+    lastScreenX = e.screenX;
+    lastScreenY = e.screenY;
+    handleEl.style.cursor = "grabbing";
+    e.preventDefault();
+  });
+  document.addEventListener("mousemove", (e) => {
+    if (!isDragging) return;
+    const dx = e.screenX - lastScreenX;
+    const dy = e.screenY - lastScreenY;
+    lastScreenX = e.screenX;
+    lastScreenY = e.screenY;
+    if (dx !== 0 || dy !== 0) {
+      window.clawSidebar.dragDelta(dx, dy);
+    }
+  });
+  document.addEventListener("mouseup", () => {
+    if (!isDragging) return;
+    isDragging = false;
+    handleEl.style.cursor = "";
+    window.clawSidebar.dragDelta(0, 0).then((pos) => {
+      localStorage.setItem("claw-sidebar-pos", JSON.stringify(pos));
+    });
+  });
+}
+document.addEventListener("DOMContentLoaded", () => {
+  minimizedEl = document.getElementById("sidebar-minimized");
+  expandedEl = document.getElementById("sidebar-expanded");
+  expandBtn = document.getElementById("sidebar-expand-btn");
+  minimizeBtn = document.getElementById("sidebar-minimize-btn");
+  taskListEl = document.getElementById("sidebar-task-list");
+  badgeEl = document.getElementById("sidebar-badge");
+  badgeTextEl = document.getElementById("sidebar-badge-text");
+  window.clawSidebar.onTaskUpdate((data) => {
+    const isNew = !state.tasks.has(data.id);
+    if (isNew) {
+      const result = sidebarTransition(state, {
+        type: "TASK_ADDED",
+        task: data
+      });
+      state = result.state;
+      renderTask(data);
+      updateBadge();
+      if (result.shouldAutoExpand) {
+        autoExpandForTask();
+      } else {
+        updateSidebarState(state.visual);
+      }
+    } else {
+      const result = sidebarTransition(state, {
+        type: "TASK_UPDATED",
+        task: data
+      });
+      state = result.state;
+      renderTask(data);
+      updateBadge();
+      if (result.shouldPulse) {
+        triggerBadgePulse(result.shouldPulse);
+      }
+    }
+  });
+  expandBtn.addEventListener("click", handleExpand);
+  minimizeBtn.addEventListener("click", handleCollapse);
+  const clearBtn = document.getElementById("sidebar-clear-btn");
+  if (clearBtn) {
+    clearBtn.addEventListener("click", () => {
+      const finishedIds = [];
+      for (const [id, task] of state.tasks) {
+        if (task.status === "done" || task.status === "error") {
+          finishedIds.push(id);
+        }
+      }
+      for (const id of finishedIds) {
+        handleDismiss(id);
+      }
+    });
+  }
+  expandedEl.addEventListener("mouseenter", () => {
+  });
+  window.clawSidebar.onStateChange((newState) => {
+    const result = sidebarTransition(state, {
+      type: newState === "expanded" ? "EXPAND" : newState === "minimized" ? "COLLAPSE" : "TASK_DISMISSED",
+      ...newState === "hidden" ? { id: "" } : {}
+    });
+    state = { ...result.state, visual: newState };
+    updateSidebarState(newState);
+    updateBadge();
+  });
+  const dragHandle = document.getElementById("sidebar-drag-handle");
+  if (dragHandle) setupDrag(dragHandle);
+  const expandedDragHandle = document.getElementById("sidebar-expanded-drag-handle");
+  if (expandedDragHandle) setupDrag(expandedDragHandle);
+  const savedPos = localStorage.getItem("claw-sidebar-pos");
+  if (savedPos) {
+    try {
+      const { x, y } = JSON.parse(savedPos);
+      if (typeof x === "number" && typeof y === "number") {
+        window.clawSidebar.setPosition(x, y);
+      }
+    } catch {
+    }
+  }
+});