clay-server 2.7.2 → 2.8.2

package/lib/public/css/sidebar.css

@@ -267,7 +267,7 @@
   gap: 2px;
 }
 
-.session-list-header-actions button {
+.session-list-header-actions button:not(.new-ralph-pill) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -282,8 +282,8 @@
   transition: color 0.15s, background 0.15s;
 }
 
-.session-list-header-actions button .lucide { width: 14px; height: 14px; }
-.session-list-header-actions button:hover { color: var(--text); background: var(--sidebar-hover); }
+.session-list-header-actions button:not(.new-ralph-pill) .lucide { width: 14px; height: 14px; }
+.session-list-header-actions button:not(.new-ralph-pill):hover { color: var(--text); background: var(--sidebar-hover); }
 
 /* --- Session search --- */
 #session-search {
@@ -392,6 +392,51 @@
   letter-spacing: 0.3px;
 }
 
+/* --- Schedule countdown items --- */
+.session-countdown-group {
+  padding: 4px 0 8px;
+  border-bottom: 1px solid var(--border-subtle, var(--border));
+  margin-bottom: 4px;
+}
+
+.session-countdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  color: var(--text-muted);
+  cursor: default;
+  pointer-events: none;
+  border-left: 3px solid var(--accent);
+  margin: 2px 8px;
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  animation: countdown-pulse 2s ease-in-out infinite;
+}
+
+.session-countdown-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-weight: 500;
+}
+
+.session-countdown-badge {
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+@keyframes countdown-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
 .session-item {
   position: relative;
   display: flex;
@@ -466,7 +511,8 @@
 
 .session-more-btn .lucide,
 .session-more-btn svg { width: 14px; height: 14px; display: block; }
-.session-item:hover .session-more-btn { opacity: 1; }
+.session-item:hover .session-more-btn,
+.session-loop-group:hover .session-more-btn { opacity: 1; }
 .session-more-btn:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.06); }
 
 /* --- Session context menu --- */
@@ -515,6 +561,241 @@
   outline: none;
 }
 
+/* --- Session loop groups --- */
+.session-loop-wrapper {
+  margin-bottom: 0;
+}
+
+.session-loop-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 36px 0 4px;
+  height: 34px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  transition: background 0.35s ease, color 0.35s ease;
+}
+
+.session-loop-group:hover {
+  background: var(--sidebar-hover);
+  color: var(--text-secondary);
+}
+
+.session-loop-group.active {
+  background: var(--sidebar-active);
+  color: var(--text);
+}
+.session-loop-group.scheduled .session-processing {
+  background: var(--success, #27ae60);
+}
+
+.session-loop-group .session-item-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.session-loop-group .session-processing {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  flex-shrink: 0;
+}
+
+.session-loop-icon {
+  display: inline-flex;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.session-loop-icon.scheduled { color: var(--success, #27ae60); }
+.session-loop-icon .lucide { width: 13px; height: 13px; }
+
+.session-loop-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.session-loop-count {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.08);
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: auto;
+}
+.session-loop-count.scheduled {
+  color: var(--success, #27ae60);
+  background: color-mix(in srgb, var(--success, #27ae60) 12%, transparent);
+}
+
+/* Chevron */
+.session-loop-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: transparent;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 0;
+  border-radius: 4px;
+  flex-shrink: 0;
+  transition: color 0.15s, transform 0.2s ease;
+}
+.session-loop-chevron .lucide { width: 14px; height: 14px; }
+.session-loop-chevron:hover { color: var(--text); }
+.session-loop-group.expanded .session-loop-chevron { transform: rotate(90deg); }
+
+/* Children container */
+.session-loop-children {
+  position: relative;
+  margin-left: 15px;
+  padding: 2px 0 2px 0;
+  border-left: 1.5px solid var(--border-subtle);
+}
+
+.session-loop-child {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 12px 0 14px;
+  height: 28px;
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+/* Small horizontal tick connecting to vertical line */
+.session-loop-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 8px;
+  height: 0;
+  border-top: 1.5px solid var(--border-subtle);
+}
+
+.session-loop-child:hover {
+  background: var(--sidebar-hover);
+  color: var(--text-secondary);
+}
+
+.session-loop-child.active {
+  background: var(--sidebar-active);
+  color: var(--text);
+}
+
+.session-loop-child .session-item-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.session-loop-child .session-processing {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--success);
+  flex-shrink: 0;
+}
+
+.session-loop-role-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.06);
+  padding: 1px 8px;
+  border-radius: 6px;
+  letter-spacing: 0.2px;
+}
+.session-loop-role-badge.crafting {
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+.session-loop-role-badge.scheduled {
+  color: var(--success, #27ae60);
+  background: color-mix(in srgb, var(--success, #27ae60) 10%, transparent);
+}
+
+.session-loop-badge {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: auto;
+}
+.session-loop-badge.crafting {
+  color: var(--accent);
+  background: var(--accent-12, rgba(108, 92, 231, 0.12));
+}
+
+/* --- New Ralph Loop pill button --- */
+.new-ralph-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  background: var(--accent-12, rgba(108, 92, 231, 0.12));
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 700;
+  font-family: inherit;
+  letter-spacing: 0.2px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s;
+}
+
+.new-ralph-pill .lucide {
+  width: 10px;
+  height: 10px;
+}
+
+.new-ralph-pill + button {
+  margin-left: 4px;
+}
+
+.new-ralph-pill:hover {
+  background: var(--accent);
+  color: #fff;
+}
+
 @media (hover: none) {
   .session-more-btn { opacity: 1; }
   .msg-copy-hint { opacity: 1; }
@@ -548,15 +829,31 @@
   background: var(--sidebar-bg);
 }
 
+.user-island-profile {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.user-island-profile:hover {
+  background: var(--sidebar-hover);
+}
+
 .user-island-avatar {
-  width: 72px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.user-island-avatar .footer-mascot {
+.user-island-avatar img {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -581,11 +878,12 @@
   flex: 1;
   min-width: 0;
   overflow: hidden;
+  margin-left: 8px;
 }
 
 .user-island-name {
   font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--text);
   white-space: nowrap;
@@ -629,10 +927,6 @@
   display: none;
 }
 
-.footer-mascot {
-  flex-shrink: 0;
-  border-radius: 3px;
-}
 
 .footer-version {
   font-size: 11px;

package/lib/public/css/sticky-notes.css

@@ -475,39 +475,41 @@
 
 #notes-archive.hidden { display: none; }
 
-/* --- Archive header --- */
+/* --- Archive header (matches scheduler-top-bar) --- */
 .notes-archive-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 20px 28px 16px;
+  padding: 10px 16px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--border-subtle);
 }
 
 .notes-archive-title-wrap {
   display: flex;
-  align-items: center;
-  gap: 10px;
+  align-items: baseline;
+  gap: 6px;
+  flex: 1;
+}
+.notes-archive-title-wrap .lucide {
+  align-self: center;
 }
 
 .notes-archive-title-wrap .lucide {
-  width: 22px;
-  height: 22px;
+  width: 15px;
+  height: 15px;
   color: var(--accent);
+  flex-shrink: 0;
 }
 
 .notes-archive-title-wrap h2 {
-  font-family: "Pretendard", system-ui, sans-serif;
-  font-size: 18px;
+  font-size: 15px;
   font-weight: 700;
   color: var(--text);
   margin: 0;
 }
 
 .notes-archive-count {
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 11px;
+  font-weight: 600;
   color: var(--text-dimmer);
   margin-left: 2px;
 }
@@ -516,18 +518,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 6px;
   background: none;
   color: var(--text-muted);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  margin-left: auto;
+  transition: background 0.12s, color 0.12s;
+  flex-shrink: 0;
 }
 
 .notes-archive-close .lucide { width: 16px; height: 16px; }
-.notes-archive-close:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); border-color: var(--text-dimmer); }
+.notes-archive-close:hover { background: rgba(var(--overlay-rgb), 0.08); color: var(--text); }
 
 /* --- Archive grid --- */
 .notes-archive-grid {
@@ -839,6 +843,6 @@
   }
 
   .notes-archive-header {
-    padding: 16px 16px 12px;
+    padding: 10px 12px;
   }
 }

package/lib/public/css/stt.css

@@ -0,0 +1,155 @@
+/* ==========================================================================
+   Speech-to-Text (Web Speech API)
+   ========================================================================== */
+
+/* --- Mic button --- */
+#stt-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: width 0.3s ease, border-radius 0.3s ease, background 0.2s, color 0.2s;
+  touch-action: manipulation;
+  position: relative;
+  overflow: hidden;
+  gap: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+#stt-btn .lucide { width: 20px; height: 20px; flex-shrink: 0; }
+#stt-btn:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--text); }
+
+/* Recording active — pill shape */
+#stt-btn.stt-active {
+  width: auto;
+  padding: 0 14px 0 10px;
+  border-radius: 18px;
+  color: #fff;
+  background: #e53935;
+}
+
+#stt-btn.stt-active:hover {
+  background: #c62828;
+}
+
+/* --- Waveform bars --- */
+.stt-wave {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.stt-wave-bar {
+  width: 3px;
+  border-radius: 1.5px;
+  background: rgba(255, 255, 255, 0.85);
+  animation: stt-wave-bounce 1.2s ease-in-out infinite;
+}
+
+.stt-wave-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
+.stt-wave-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
+.stt-wave-bar:nth-child(3) { height: 16px; animation-delay: 0.3s; }
+.stt-wave-bar:nth-child(4) { height: 12px; animation-delay: 0.45s; }
+.stt-wave-bar:nth-child(5) { height: 6px;  animation-delay: 0.6s; }
+
+@keyframes stt-wave-bounce {
+  0%, 100% { transform: scaleY(0.4); }
+  50% { transform: scaleY(1); }
+}
+
+/* Stop label */
+.stt-stop-label {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+/* Loading state */
+#stt-btn.stt-loading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.stt-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--border);
+  border-top-color: var(--text-muted);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  display: block;
+}
+
+/* --- Language popover --- */
+.stt-lang-popover {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
+  z-index: 20;
+  min-width: 200px;
+  overflow: hidden;
+}
+
+.stt-lang-title {
+  padding: 12px 16px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dimmer);
+}
+
+.stt-lang-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 16px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.12s;
+  gap: 8px;
+}
+
+.stt-lang-option:hover {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
+
+.stt-lang-option.stt-lang-active {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.stt-lang-name {
+  flex: 1;
+}
+
+.stt-lang-hint {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  flex-shrink: 0;
+}
+
+.stt-lang-option:last-child {
+  border-radius: 0 0 14px 14px;
+}

package/lib/public/css/title-bar.css

@@ -26,15 +26,22 @@
   transition: color 0.15s;
 }
 
+.top-bar-title:hover {
+  color: var(--text);
+}
+
 .top-bar-icon {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   flex-shrink: 0;
+  opacity: 0.7;
+  vertical-align: -2px;
+  transition: opacity 0.15s;
 }
 
-.top-bar-title:hover {
-  color: var(--text);
+.top-bar-title:hover .top-bar-icon {
+  opacity: 1;
 }
 
 /* --- Top bar actions (right-aligned group) --- */
@@ -208,10 +215,11 @@
   height: 18px;
   vertical-align: middle;
   filter:
-    drop-shadow(1px 0 0 rgba(0,0,0,0.18))
-    drop-shadow(-1px 0 0 rgba(0,0,0,0.18))
-    drop-shadow(0 1px 0 rgba(0,0,0,0.18))
-    drop-shadow(0 -1px 0 rgba(0,0,0,0.18));
+    drop-shadow(1px 0 0 rgba(0,0,0,0.25))
+    drop-shadow(-1px 0 0 rgba(0,0,0,0.25))
+    drop-shadow(0 1px 0 rgba(0,0,0,0.25))
+    drop-shadow(0 -1px 0 rgba(0,0,0,0.25))
+    drop-shadow(0 0 4px rgba(255,255,255,0.35));
 }
 
 .title-bar-project-name {