claw-design 1.0.1

package/out/renderer/assets/sidebar-BxEPS84k.css

@@ -0,0 +1,515 @@
+/* Sidebar renderer: dark chrome aesthetic matching overlay */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================================
+   Minimized state: icon + badge (vertically stacked)
+   ============================================================ */
+
+.sidebar-minimized {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+
+.sidebar-expand-btn {
+  width: 36px;
+  height: 36px;
+  background: rgba(10, 10, 10, 0.88);
+  border: none;
+  border-radius: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.sidebar-expand-btn:hover {
+  color: #ffffff;
+  background: rgba(10, 10, 10, 0.95);
+}
+
+/* Drag handle (shared between minimized and expanded headers) */
+.sidebar-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.25);
+  cursor: grab;
+}
+
+.sidebar-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Badge counter below the expand icon */
+.sidebar-badge {
+  background: rgba(10, 10, 10, 0.88);
+  border-radius: 8px;
+  padding: 4px 8px;
+  margin-top: 4px;
+  border: 2px solid transparent;
+}
+
+#sidebar-badge-text {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.0;
+  color: rgba(138, 180, 248, 1);
+}
+
+/* Badge pulse animations (single-shot on task complete/error while minimized) */
+@keyframes badge-pulse-done {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: rgba(138, 180, 248, 0.6);
+  }
+  100% {
+    border-color: transparent;
+  }
+}
+
+@keyframes badge-pulse-error {
+  0% {
+    border-color: transparent;
+  }
+  50% {
+    border-color: rgba(248, 150, 138, 0.7);
+  }
+  100% {
+    border-color: transparent;
+  }
+}
+
+.sidebar-badge.pulse-done {
+  animation: badge-pulse-done 600ms ease-out 1;
+  border: 2px solid transparent;
+}
+
+.sidebar-badge.pulse-error {
+  animation: badge-pulse-error 600ms ease-out 1;
+  border: 2px solid transparent;
+}
+
+/* ============================================================
+   Expanded state: full sidebar panel
+   ============================================================ */
+
+.sidebar-expanded {
+  width: 100%;
+  height: 100%;
+  background: rgba(10, 10, 10, 0.88);
+  box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header: "Tasks" label + minimize button */
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 8px 16px;
+}
+
+.sidebar-header-label {
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.36;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sidebar-clear-btn {
+  background: none;
+  border: none;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.35);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  margin-left: auto;
+  transition: color 120ms ease;
+}
+
+.sidebar-clear-btn:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.sidebar-minimize-btn {
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0;
+  transition: color 120ms ease;
+}
+
+.sidebar-minimize-btn:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================================
+   Task list (scrollable container)
+   ============================================================ */
+
+.sidebar-task-list {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.sidebar-task-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* ============================================================
+   Task row
+   ============================================================ */
+
+.task-row {
+  padding: 8px 16px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  animation: task-row-enter 150ms ease-out;
+}
+
+@keyframes task-row-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Instruction text: 2-line clamp */
+.task-instruction {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.38;
+  color: rgba(255, 255, 255, 0.8);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.task-instruction.error-row {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ============================================================
+   Status badge
+   ============================================================ */
+
+.task-status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.0;
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+
+.status-badge.queued {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.status-badge.sending {
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.7);
+  animation: status-pulse 1500ms ease-in-out infinite;
+}
+
+.status-badge.editing {
+  background: rgba(138, 180, 248, 0.15);
+  color: rgba(138, 180, 248, 1);
+  animation: status-pulse 1500ms ease-in-out infinite;
+}
+
+.status-badge.done {
+  background: rgba(138, 180, 248, 0.15);
+  color: rgba(138, 180, 248, 1);
+}
+
+.status-badge.error {
+  background: rgba(248, 150, 138, 0.15);
+  color: rgba(248, 150, 138, 1);
+}
+
+@keyframes status-pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ============================================================
+   Error message + button row
+   ============================================================ */
+
+.task-error-message {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgba(248, 150, 138, 0.9);
+  margin-top: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.task-button-row {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.btn-retry {
+  background: none;
+  border: none;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(138, 180, 248, 0.8);
+  cursor: pointer;
+  padding: 0;
+  transition: color 120ms ease;
+}
+
+.btn-retry:hover {
+  color: rgba(138, 180, 248, 1);
+}
+
+.btn-dismiss {
+  background: none;
+  border: none;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  padding: 0;
+  transition: color 120ms ease;
+}
+
+.btn-dismiss:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Model label */
+.task-model {
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.25);
+}
+
+/* Elapsed timer */
+.task-timer {
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.3);
+  font-variant-numeric: tabular-nums;
+  min-width: 28px;
+}
+
+/* Stop button on active tasks */
+.task-row-stop-btn {
+  background: none;
+  border: none;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(248, 150, 138, 0.7);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: color 80ms ease;
+}
+
+.task-row-stop-btn:hover {
+  color: rgba(248, 150, 138, 1);
+}
+
+/* Undo button on done rows (visible on hover) */
+.task-row-undo-btn {
+  opacity: 0;
+  transition: opacity 80ms ease-out;
+  background: none;
+  border: none;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(138, 180, 248, 0.7);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.task-row:hover .task-row-undo-btn {
+  opacity: 1;
+}
+
+.task-row-undo-btn:hover {
+  color: rgba(138, 180, 248, 1);
+}
+
+.task-row-undo-btn:disabled {
+  color: rgba(255, 255, 255, 0.3);
+  cursor: default;
+}
+
+/* Dismiss button on hover of done rows (small x icon) */
+.task-row-dismiss-btn {
+  opacity: 0;
+  transition: opacity 80ms ease-out;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 4px;
+}
+
+.task-row:hover .task-row-dismiss-btn {
+  opacity: 1;
+}
+
+.task-row-dismiss-btn:hover {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* ============================================================
+   Activity text (live-streaming what Claude is doing)
+   ============================================================ */
+
+.task-activity {
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: rgba(255, 255, 255, 0.4);
+  margin-top: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
+
+/* ============================================================
+   Task row clickable (for log expand)
+   ============================================================ */
+
+.task-instruction {
+  cursor: pointer;
+}
+
+.task-instruction:hover {
+  color: rgba(255, 255, 255, 1);
+}
+
+/* ============================================================
+   Log viewer (expanded per-task)
+   ============================================================ */
+
+.task-logs {
+  max-height: 200px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+  margin-top: 6px;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.task-logs::-webkit-scrollbar {
+  width: 4px;
+}
+
+.task-logs::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 2px;
+}
+
+.task-log-entry {
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  padding: 1px 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.task-log-entry.log-tool {
+  color: rgba(138, 180, 248, 0.7);
+}
+
+.task-log-entry.log-status {
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 500;
+}
+
+/* ============================================================
+   Accessibility: reduced motion
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0s !important;
+    transition-duration: 0s !important;
+  }
+}

package/out/renderer/assets/toast-CLlgwMU_.js

@@ -0,0 +1,110 @@
+const toastTimers = /* @__PURE__ */ new Map();
+function createToastIcon(doc, severity) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", "20");
+  svg.setAttribute("height", "20");
+  svg.setAttribute("viewBox", "0 0 20 20");
+  svg.setAttribute("fill", "none");
+  svg.classList.add("claw-toast__icon");
+  if (severity === "error") {
+    const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M10 2L18 16H2L10 2Z");
+    path.setAttribute("stroke", "currentColor");
+    path.setAttribute("stroke-width", "1.5");
+    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute("fill", "none");
+    svg.appendChild(path);
+    const line = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    line.setAttribute("d", "M10 8V11M10 13.5V14");
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "1.5");
+    line.setAttribute("stroke-linecap", "round");
+    svg.appendChild(line);
+  } else {
+    const circle = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", "10");
+    circle.setAttribute("cy", "10");
+    circle.setAttribute("r", "8");
+    circle.setAttribute("stroke", "currentColor");
+    circle.setAttribute("stroke-width", "1.5");
+    circle.setAttribute("fill", "none");
+    svg.appendChild(circle);
+    const line = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    line.setAttribute("d", "M10 7V7.01M10 10V14");
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "1.5");
+    line.setAttribute("stroke-linecap", "round");
+    svg.appendChild(line);
+  }
+  return svg;
+}
+function createToastElement(doc, data) {
+  const toast = doc.createElement("div");
+  toast.className = `claw-toast claw-toast--${data.severity}`;
+  toast.dataset.toastId = data.id;
+  toast.setAttribute("role", "alert");
+  toast.setAttribute("aria-live", data.persistent ? "assertive" : "polite");
+  const icon = createToastIcon(doc, data.severity);
+  toast.appendChild(icon);
+  const content = doc.createElement("div");
+  content.className = "claw-toast__content";
+  if (data.title) {
+    const titleEl = doc.createElement("div");
+    titleEl.className = "claw-toast__title";
+    titleEl.textContent = data.title;
+    content.appendChild(titleEl);
+  }
+  const msgEl = doc.createElement("div");
+  msgEl.className = "claw-toast__message";
+  msgEl.textContent = data.message;
+  content.appendChild(msgEl);
+  if (data.persistent) {
+    const dismissBtn = doc.createElement("button");
+    dismissBtn.className = "claw-toast__dismiss";
+    dismissBtn.textContent = "Dismiss";
+    dismissBtn.setAttribute("aria-label", "Dismiss notification");
+    dismissBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dismissToast(doc, data.id);
+    });
+    content.appendChild(dismissBtn);
+  }
+  toast.appendChild(content);
+  return toast;
+}
+function showToast(doc, data) {
+  const container = doc.getElementById("claw-toast-container");
+  if (!container) return;
+  const toast = createToastElement(doc, data);
+  container.prepend(toast);
+  requestAnimationFrame(() => {
+    toast.classList.add("claw-toast--visible");
+  });
+  if (!data.persistent) {
+    const timer = setTimeout(() => dismissToast(doc, data.id), 5e3);
+    toastTimers.set(data.id, timer);
+    toast.addEventListener("click", () => dismissToast(doc, data.id));
+    toast.style.cursor = "pointer";
+  }
+}
+function dismissToast(doc, id) {
+  const container = doc.getElementById("claw-toast-container");
+  if (!container) return;
+  const toast = container.querySelector(`[data-toast-id="${CSS.escape(id)}"]`);
+  if (!toast) return;
+  const timer = toastTimers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    toastTimers.delete(id);
+  }
+  toast.classList.remove("claw-toast--visible");
+  toast.classList.add("claw-toast--exiting");
+  setTimeout(() => {
+    toast.remove();
+  }, 150);
+}
+export {
+  createToastElement,
+  dismissToast,
+  showToast
+};