clay-server 2.13.0-beta.2 → 2.13.0-beta.4

package/lib/public/css/command-palette.css

@@ -0,0 +1,319 @@
+/* ==========================================================================
+   Command Palette (Cmd+K)
+   ========================================================================== */
+
+/* --- Top bar search bar trigger (Slack-style) --- */
+.cmd-palette-searchbar {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+  padding: 0 10px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--text-dimmer);
+  transition: background 0.15s, border-color 0.15s;
+  width: min(520px, 40%);
+}
+
+.cmd-palette-searchbar:hover {
+  background: rgba(var(--overlay-rgb), 0.08);
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+.cmd-palette-searchbar .lucide {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+.cmd-palette-searchbar-text {
+  flex: 1;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cmd-palette-searchbar-kbd {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: rgba(var(--overlay-rgb), 0.08);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0 5px;
+  font-family: inherit;
+  line-height: 16px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .cmd-palette-searchbar {
+    max-width: none;
+  }
+  .cmd-palette-searchbar-text {
+    display: none;
+  }
+  .cmd-palette-searchbar-kbd {
+    display: none;
+  }
+}
+
+.cmd-palette {
+  position: fixed;
+  inset: 0;
+  z-index: 400;
+}
+
+.cmd-palette.hidden { display: none; }
+
+.cmd-palette-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(var(--shadow-rgb), 0.3);
+}
+
+.cmd-palette-dialog {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+  width: min(560px, 44%);
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.4);
+  display: flex;
+  flex-direction: column;
+  max-height: 70vh;
+  animation: cmdPaletteExpand 0.15s ease-out;
+}
+
+@keyframes cmdPaletteExpand {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 70vh; }
+}
+
+/* --- Search input row --- */
+.cmd-palette-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.cmd-palette-input-row .lucide {
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.cmd-palette-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  min-width: 0;
+}
+
+.cmd-palette-input::placeholder {
+  color: var(--text-muted);
+}
+
+.cmd-palette-kbd {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cmd-palette-kbd .lucide {
+  width: 18px;
+  height: 18px;
+}
+
+/* --- Results area --- */
+.cmd-palette-results {
+  overflow-y: auto;
+  padding: 6px 0;
+  flex: 1;
+  min-height: 0;
+}
+
+.cmd-palette-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  padding: 8px 16px 4px;
+}
+
+.cmd-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.cmd-palette-item:hover,
+.cmd-palette-item.active {
+  background: rgba(var(--overlay-rgb), 0.06);
+}
+
+.cmd-palette-item-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(var(--overlay-rgb), 0.04);
+}
+
+.cmd-palette-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cmd-palette-item-title {
+  font-size: 13px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cmd-palette-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.cmd-palette-item-project {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-muted);
+}
+
+.cmd-palette-item-snippet {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-style: italic;
+  color: var(--text-muted);
+  max-width: 300px;
+}
+
+.cmd-palette-item-arrow {
+  color: var(--text-dimmer);
+  flex-shrink: 0;
+}
+
+.cmd-palette-item-arrow .lucide {
+  width: 14px;
+  height: 14px;
+}
+
+/* --- Empty / loading --- */
+.cmd-palette-empty {
+  padding: 24px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.cmd-palette-loading {
+  padding: 24px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* --- Footer --- */
+.cmd-palette-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 14px;
+  border-top: 1px solid var(--border-subtle);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.cmd-palette-brand {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: "Nunito", sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.cmd-palette-brand img {
+  border-radius: 3px;
+}
+
+.cmd-palette-brand:hover {
+  color: var(--text-secondary);
+}
+
+.cmd-palette-footer-shortcuts {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cmd-palette-footer kbd {
+  font-size: 10px;
+  color: var(--text-secondary);
+  background: rgba(var(--overlay-rgb), 0.08);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  font-family: inherit;
+}
+
+/* --- Mobile --- */
+@media (max-width: 768px) {
+  .cmd-palette-dialog {
+    width: 100%;
+    max-height: 80vh;
+    border-radius: 0 0 10px 10px;
+  }
+
+  .cmd-palette-item-snippet {
+    display: none;
+  }
+}

package/lib/public/css/icon-strip.css

@@ -215,6 +215,22 @@
   transition: none;
 }
 
+/* Pending permission shake */
+.icon-strip-item.has-pending-perm,
+.icon-strip-wt-item.has-pending-perm {
+  animation: permShake 2s ease-in-out infinite;
+}
+@keyframes permShake {
+  0%, 8% { transform: translateX(0); }
+  1% { transform: translateX(-2px); }
+  2% { transform: translateX(2px); }
+  3% { transform: translateX(-2px); }
+  4% { transform: translateX(2px); }
+  5% { transform: translateX(-1px); }
+  6% { transform: translateX(1px); }
+  7% { transform: translateX(0); }
+}
+
 /* --- Add project button --- */
 .icon-strip-add {
   position: relative;
@@ -771,12 +787,12 @@
 /* DM mode: keep same position (user-island gone but layout stays) */
 
 /* --- My avatar at bottom of icon strip (always present, behind user-island) --- */
-/* Positioned to align exactly with user-island avatar (left:8px + padding:6px + 18px center = 32px from left edge of layout-body) */
-/* icon-strip is 72px wide, so 32px from left = left offset within icon-strip */
+/* Positioned to align with icon-strip center (72px / 2 = 36px) */
+/* Matches user-island avatar center: left:8px + padding:10px + 18px = 36px */
 .icon-strip-me {
   position: absolute;
   bottom: 19px; /* vertically center with user-island (bottom:8px + height:58px/2 - 16px) */
-  left: 32px;
+  left: 36px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;

package/lib/public/css/input.css

@@ -598,7 +598,8 @@
   #hamburger-btn,
   #sidebar-toggle-btn,
   #sidebar-expand-btn,
-  #layout.sidebar-collapsed #sidebar-expand-btn {
+  #layout.sidebar-collapsed #sidebar-expand-btn,
+  .sidebar-collapse-btn {
     display: none;
   }
 

package/lib/public/css/loop.css

@@ -425,6 +425,32 @@
   margin-bottom: 4px;
 }
 .ralph-field-label .ralph-field-req { color: var(--accent); }
+.ralph-field-label .ralph-field-opt { color: var(--text-secondary); font-weight: 400; }
+.ralph-mode-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border, #333);
+}
+.ralph-mode-tab {
+  flex: 1;
+  padding: 8px 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.ralph-mode-tab:hover { color: var(--text); }
+.ralph-mode-tab.active {
+  color: var(--accent, #6c5ce7);
+  border-bottom-color: var(--accent, #6c5ce7);
+}
+.ralph-mode-panel { display: none; }
+.ralph-mode-panel.active { display: block; }
 .ralph-field-hint {
   margin: 3px 0 14px;
   font-size: 11px;

package/lib/public/css/mates.css

@@ -138,6 +138,79 @@
   line-height: 1.4;
 }
 
+/* Step 0: Intro landing */
+.mate-intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 8px 12px 16px;
+  gap: 12px;
+}
+.mate-intro-icon {
+  font-size: 48px;
+  line-height: 1;
+}
+.mate-intro-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text, #fff);
+  margin: 0;
+}
+.mate-intro-tagline {
+  font-size: 15px;
+  color: var(--accent, #6c5ce7);
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.4;
+}
+.mate-intro-body {
+  font-size: 14px;
+  color: var(--text-secondary, #aaa);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 400px;
+}
+.mate-intro-privacy {
+  font-size: 13px;
+  color: var(--text-muted, #9ea8c7);
+  line-height: 1.5;
+  margin: 0;
+  max-width: 400px;
+  padding: 10px 16px;
+  background: rgba(108, 92, 231, 0.08);
+  border-radius: 8px;
+}
+.mate-intro-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  max-width: 340px;
+  margin-top: 4px;
+}
+.mate-intro-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-secondary, #aaa);
+  text-align: left;
+}
+.mate-intro-step-num {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--accent, #6c5ce7);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 /* Step 1: Relationship cards */
 .mate-card-grid {
   display: grid;

package/lib/public/css/overlays.css

@@ -335,6 +335,9 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 .skill-install-item .skill-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .skill-install-item .skill-name { font-weight: 500; font-size: 14px; color: var(--text); }
 .skill-install-item .skill-scope { font-size: 12px; color: var(--text-muted); }
+.skill-badge { font-size: 11px; padding: 1px 7px; border-radius: 6px; font-weight: 500; white-space: nowrap; }
+.skill-badge-new { background: rgba(46,204,113,0.15); color: var(--success, #2ecc71); }
+.skill-badge-update { background: rgba(243,156,18,0.15); color: var(--warning, #f39c12); }
 .skill-install-item .skill-status { margin-left: auto; flex-shrink: 0; }
 .skill-status-ok { color: var(--success, #2ecc71); font-size: 16px; font-weight: 600; }
 #skill-install-status { font-size: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }

package/lib/public/css/scheduler.css

@@ -361,16 +361,40 @@
   transition: border-color 0.12s;
 }
 .scheduler-add-form textarea:focus { border-color: var(--accent); }
-.sched-create-iter-label {
+.sched-create-run-mode {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+  flex-wrap: wrap;
 }
-.sched-create-iter-icon {
-  width: 14px;
-  height: 14px;
+.sched-run-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: transparent;
   color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.sched-run-mode-btn .lucide { width: 12px; height: 12px; }
+.sched-run-mode-btn:hover { border-color: var(--accent); color: var(--text); }
+.sched-run-mode-btn.active {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.sched-create-iter-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
+.sched-create-iter-label.hidden { display: none; }
 .sched-create-iter-input {
   width: 44px;
   padding: 4px 6px;

package/lib/public/css/sidebar.css

@@ -19,8 +19,8 @@
 }
 
 #layout.sidebar-collapsed #sidebar-column {
-  width: 0;
-  min-width: 0;
+  width: 0 !important;
+  min-width: 0 !important;
   overflow: hidden;
 }
 
@@ -218,9 +218,30 @@
   height: 12px;
 }
 
-/* sidebar-toggle-btn hidden — collapse handled by icon strip / title bar */
-#sidebar-toggle-btn {
-  display: none;
+/* Sidebar collapse button in title bar */
+.sidebar-collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: background 0.15s, color 0.15s;
+}
+
+.sidebar-collapse-btn:hover {
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text);
+}
+
+.sidebar-collapse-btn .lucide {
+  width: 16px;
+  height: 16px;
 }
 
 /* --- Sidebar section headers --- */
@@ -893,7 +914,7 @@
   align-items: center;
   flex: 1;
   min-width: 0;
-  padding: 6px;
+  padding: 6px 6px 6px 10px;
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s;
@@ -1037,6 +1058,7 @@
 }
 
 
+
 .footer-version {
   font-size: 11px;
   color: var(--text-dimmer);

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

@@ -80,20 +80,20 @@
 }
 
 /* --- Note color themes (light) --- */
-.sticky-note[data-color="yellow"] { background: #FFF9C4; border: 1px solid #EFD74E; }
-.sticky-note[data-color="blue"]   { background: #BBDEFB; border: 1px solid #64B5F6; }
-.sticky-note[data-color="green"]  { background: #C8E6C9; border: 1px solid #66BB6A; }
-.sticky-note[data-color="pink"]   { background: #F8BBD0; border: 1px solid #F06292; }
-.sticky-note[data-color="orange"] { background: #FFE0B2; border: 1px solid #FFA726; }
-.sticky-note[data-color="purple"] { background: #E1BEE7; border: 1px solid #AB47BC; }
+.sticky-note[data-color="yellow"] { background: color-mix(in srgb, #FFF9C4 calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #EFD74E calc(var(--note-opacity, 1) * 100%), transparent); }
+.sticky-note[data-color="blue"]   { background: color-mix(in srgb, #BBDEFB calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #64B5F6 calc(var(--note-opacity, 1) * 100%), transparent); }
+.sticky-note[data-color="green"]  { background: color-mix(in srgb, #C8E6C9 calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #66BB6A calc(var(--note-opacity, 1) * 100%), transparent); }
+.sticky-note[data-color="pink"]   { background: color-mix(in srgb, #F8BBD0 calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #F06292 calc(var(--note-opacity, 1) * 100%), transparent); }
+.sticky-note[data-color="orange"] { background: color-mix(in srgb, #FFE0B2 calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #FFA726 calc(var(--note-opacity, 1) * 100%), transparent); }
+.sticky-note[data-color="purple"] { background: color-mix(in srgb, #E1BEE7 calc(var(--note-opacity, 1) * 100%), transparent); border: 1px solid color-mix(in srgb, #AB47BC calc(var(--note-opacity, 1) * 100%), transparent); }
 
 /* --- Note color themes (dark) --- */
-.dark-theme .sticky-note[data-color="yellow"] { background: #3D3A1E; border-color: #8B7E2A; }
-.dark-theme .sticky-note[data-color="blue"]   { background: #1A2A3D; border-color: #3A7BD5; }
-.dark-theme .sticky-note[data-color="green"]  { background: #1A2D1A; border-color: #4A8F4A; }
-.dark-theme .sticky-note[data-color="pink"]   { background: #3D1A2A; border-color: #C44A72; }
-.dark-theme .sticky-note[data-color="orange"] { background: #3D2A1A; border-color: #C47A3A; }
-.dark-theme .sticky-note[data-color="purple"] { background: #2A1A3D; border-color: #8A4AAA; }
+.dark-theme .sticky-note[data-color="yellow"] { background: color-mix(in srgb, #3D3A1E calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #8B7E2A calc(var(--note-opacity, 1) * 100%), transparent); }
+.dark-theme .sticky-note[data-color="blue"]   { background: color-mix(in srgb, #1A2A3D calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #3A7BD5 calc(var(--note-opacity, 1) * 100%), transparent); }
+.dark-theme .sticky-note[data-color="green"]  { background: color-mix(in srgb, #1A2D1A calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #4A8F4A calc(var(--note-opacity, 1) * 100%), transparent); }
+.dark-theme .sticky-note[data-color="pink"]   { background: color-mix(in srgb, #3D1A2A calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #C44A72 calc(var(--note-opacity, 1) * 100%), transparent); }
+.dark-theme .sticky-note[data-color="orange"] { background: color-mix(in srgb, #3D2A1A calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #C47A3A calc(var(--note-opacity, 1) * 100%), transparent); }
+.dark-theme .sticky-note[data-color="purple"] { background: color-mix(in srgb, #2A1A3D calc(var(--note-opacity, 1) * 100%), transparent); border-color: color-mix(in srgb, #8A4AAA calc(var(--note-opacity, 1) * 100%), transparent); }
 
 /* --- Header (drag bar) --- */
 .sticky-note-header {
@@ -104,6 +104,10 @@
   user-select: none;
   flex-shrink: 0;
 }
+/* Apply note opacity to body content, not the whole element */
+.sticky-note .sticky-note-body { opacity: var(--note-opacity, 1); }
+/* On hover, header stays fully visible */
+.sticky-note:hover .sticky-note-header { opacity: 1; }
 
 .sticky-note-spacer {
   flex: 1;
@@ -138,6 +142,51 @@
 .sticky-note:hover .sticky-note-header button { opacity: 0.5; }
 .sticky-note .sticky-note-header button:hover { opacity: 0.9; background: rgba(0,0,0,0.06); }
 
+/* Opacity slider */
+.sticky-note-opacity {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+.sticky-note:hover .sticky-note-opacity {
+  opacity: 0.6;
+  pointer-events: auto;
+}
+.sticky-note-opacity-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 32px;
+  height: 2px;
+  background: rgba(0,0,0,0.15);
+  border-radius: 1px;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+}
+.sticky-note-opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.35);
+  border: none;
+  cursor: pointer;
+}
+.sticky-note-opacity-slider::-moz-range-thumb {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(0,0,0,0.35);
+  border: none;
+  cursor: pointer;
+}
+.dark-theme .sticky-note-opacity-slider { background: rgba(255,255,255,0.15); }
+.dark-theme .sticky-note-opacity-slider::-webkit-slider-thumb { background: rgba(255,255,255,0.4); }
+.dark-theme .sticky-note-opacity-slider::-moz-range-thumb { background: rgba(255,255,255,0.4); }
+.dark-theme .sticky-note-opacity-slider { accent-color: rgba(255,255,255,0.4); }
+
 .sticky-note-header button .lucide { width: 13px; height: 13px; }
 
 /* Text colors per note color (light) */