clay-server 4.0.0-beta.2 → 4.0.0-beta.21

package/lib/public/css/capsule-ui.css

@@ -384,6 +384,44 @@ textarea.tool-input { min-height: 92px; resize: vertical; }
   .tool-pagination { flex-wrap: wrap; justify-content: flex-start; }
 }
 
+/* Capsule engagement note in the Mate transcript: a quiet system line, not a
+   speech bubble, because no one typed it. */
+.home-capsule-turn-note {
+  align-self: center;
+  margin: 6px auto;
+  padding: 3px 12px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+  color: var(--text-muted);
+  font-size: 11.5px;
+  text-align: center;
+}
+
+/* Rich Display frame: the additive sandboxed element above the floor. */
+/* There is no global .hidden utility, so the capsule surfaces scope their own:
+   the frame stays invisible until its bridge reports ready, the floor hides
+   behind the toggle, and a cleared error leaves the screen. */
+.home-tool-frame-wrap.hidden,
+.home-tool-frame-toggle.hidden,
+.home-tool-display.hidden,
+.home-tool-error.hidden { display: none; }
+.home-tool-frame-wrap { width: 100%; }
+.home-tool-frame { display: block; width: 100%; min-height: 0; border: 0; border-radius: 10px; background: var(--bg); }
+.home-tool-frame-toggle {
+  display: block; margin: 6px 0 0 auto; padding: 3px 10px;
+  border: 1px solid var(--border-subtle); border-radius: 999px;
+  background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
+}
+.home-tool-frame-toggle:hover { color: var(--text); border-color: var(--accent); }
+
+/* Host-side attribution flash when the other seat's act changes state. */
+@keyframes capsule-remote-act-flash {
+  0% { box-shadow: 0 0 0 2px var(--accent); }
+  100% { box-shadow: 0 0 0 2px transparent; }
+}
+.capsule-remote-act { animation: capsule-remote-act-flash 0.8s ease-out; }
+
 @media (prefers-reduced-motion: reduce) {
   .tool-button, .tool-input, .tool-select { transition: none; }
+  .capsule-remote-act { animation: none; }
 }

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

@@ -486,7 +486,8 @@ body.mate-dm-active .search-clay-transcript .search-clay-message-user .bubble,
 .search-clay-activity-item small { color: var(--text-dimmer); font-size: 10px; line-height: 1.35; }
 @keyframes searchClaySpin { to { transform: rotate(360deg); } }
 
-.clayos-session-link {
+.clayos-session-link,
+.clayos-log-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -503,7 +504,8 @@ body.mate-dm-active .search-clay-transcript .search-clay-message-user .bubble,
   vertical-align: middle;
   cursor: pointer;
 }
-.clayos-session-link::before {
+.clayos-session-link::before,
+.clayos-log-link::before {
   content: "\2197";
   display: grid;
   place-items: center;
@@ -514,13 +516,21 @@ body.mate-dm-active .search-clay-transcript .search-clay-message-user .bubble,
   color: var(--accent);
   font-size: 12px;
 }
-.clayos-session-link > span { font-weight: 620; }
-.clayos-session-link > small { color: var(--text-muted); font-size: 10px; }
-.clayos-session-link:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); background: color-mix(in srgb, var(--accent) 11%, var(--bg-alt)); }
-.clayos-session-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.clayos-session-link.is-loading { opacity: 0.62; cursor: progress; }
-.clayos-session-link.is-loading::before { animation: searchClaySpin 1.2s linear infinite; }
-.clayos-session-link.is-error { border-color: color-mix(in srgb, var(--warning) 48%, var(--border)); }
+.clayos-log-link::before { content: "\2261"; }
+.clayos-session-link > span,
+.clayos-log-link > span { font-weight: 620; }
+.clayos-session-link > small,
+.clayos-log-link > small { color: var(--text-muted); font-size: 10px; }
+.clayos-session-link:hover,
+.clayos-log-link:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); background: color-mix(in srgb, var(--accent) 11%, var(--bg-alt)); }
+.clayos-session-link:focus-visible,
+.clayos-log-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.clayos-session-link.is-loading,
+.clayos-log-link.is-loading { opacity: 0.62; cursor: progress; }
+.clayos-session-link.is-loading::before,
+.clayos-log-link.is-loading::before { animation: searchClaySpin 1.2s linear infinite; }
+.clayos-session-link.is-error,
+.clayos-log-link.is-error { border-color: color-mix(in srgb, var(--warning) 48%, var(--border)); }
 
 .search-clay-pending {
   align-self: flex-start;

package/lib/public/css/git-placard.css

@@ -0,0 +1,154 @@
+/* Repository placard — the always-visible Git block directly under the tool
+   strip. Refined utilitarian: it borrows the panel's own surface tokens and
+   type scale so it reads as part of the sidebar chrome, and stays visually
+   subordinate to the tool tiles above it while remaining legible at a glance.
+   No new palette, no card shadow, no dashboard framing. */
+
+.git-placard {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  margin: 2px 8px 0;
+  padding: 7px 7px 7px 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-alt);
+  cursor: pointer;
+  font-family: "Pretendard", "Twemoji", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.git-placard.hidden { display: none; }
+.git-placard:hover { border-color: var(--border); }
+
+.git-placard-body { min-width: 0; }
+
+.git-placard-identity {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.git-placard-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+.git-placard-glyph svg { width: 13px; height: 13px; }
+
+.git-placard-names { display: block; min-width: 0; }
+
+.git-placard-repo {
+  display: block;
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-placard-branch {
+  display: block;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-placard-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin: 5px 0 0 19px;
+}
+
+.git-placard-badge {
+  padding: 1px 5px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  background: var(--bg);
+  color: var(--text-dimmer);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.git-placard-badge-warn {
+  border-color: color-mix(in srgb, var(--warning) 38%, var(--border-subtle));
+  color: var(--warning);
+}
+
+.git-placard-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--text-dimmer);
+  font-size: 9px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.git-placard-stat svg { width: 9px; height: 9px; }
+.git-placard-stat-active { color: var(--text-muted); }
+.git-placard-stat-warn { color: var(--error); }
+
+.git-placard-remote {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0 0 19px;
+  color: var(--text-dimmer);
+  font-size: 9px;
+  min-width: 0;
+}
+.git-placard-remote svg { width: 9px; height: 9px; flex-shrink: 0; }
+.git-placard-remote span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The single focusable control in the block. Everything else is a pointer
+   convenience that forwards here, so keyboard users get one stop and one
+   action rather than a row of ambiguous targets. */
+.git-placard-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  align-self: center;
+  padding: 3px 5px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text-dimmer);
+  font-family: inherit;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 140ms ease, border-color 140ms ease;
+}
+.git-placard-more svg { width: 10px; height: 10px; }
+.git-placard:hover .git-placard-more,
+.git-placard-more:hover { color: var(--text-muted); border-color: var(--border); }
+.git-placard-more:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-25);
+  color: var(--text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .git-placard-more { transition: none; }
+}

package/lib/public/css/home-hub.css

@@ -12,6 +12,10 @@ body.home-active #sidebar-overlay,
 body.home-active .title-bar-content,
 body.home-active #user-island { display: none !important; }
 
+body.capsules-disabled #home-tools-btn,
+body.capsules-disabled #home-dock-divider,
+body.capsules-disabled #home-tool-workbench { display: none !important; }
+
 body.home-active #main-area { border: 0; border-radius: 0; }
 
 body.home-surface-boot-pending #connect-overlay.hidden {

package/lib/public/css/home-session-actions.css

@@ -22,6 +22,72 @@
 .home-sidebar-recent-item .home-sidebar-recent-row:hover,
 .home-conversations-sheet-item .home-conversations-sheet-row:hover { background: transparent; }
 
+.home-conversations-driver-header {
+  display: flex;
+  align-items: stretch;
+}
+
+.home-conversations-driver-header > .home-conversations-sheet-item {
+  min-width: 0;
+  flex: 1;
+}
+
+.home-conversations-driver-toggle {
+  width: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+}
+
+.home-conversations-driver-toggle:hover,
+.home-conversations-driver-toggle:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.05);
+  outline: none;
+}
+
+.home-conversations-driver-toggle .lucide {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s ease;
+}
+
+.home-conversations-driver-toggle[aria-expanded="true"] .lucide {
+  transform: rotate(90deg);
+}
+
+.home-conversations-driver-header:not(:has(.home-conversations-sheet-item)) .home-conversations-driver-toggle {
+  width: 100%;
+  min-height: 38px;
+  padding: 0 10px;
+  justify-content: flex-start;
+  gap: 9px;
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+}
+
+.home-conversations-driver-header:not(:has(.home-conversations-sheet-item)) .home-conversations-driver-toggle span:first-of-type {
+  flex: 1;
+}
+
+.home-conversations-worker-children {
+  margin-left: 16px;
+  padding-left: 10px;
+  border-left: 1px solid color-mix(in srgb, var(--text-dimmer) 22%, transparent);
+}
+
+.home-conversations-worker-item .home-conversations-sheet-row {
+  padding-block: 8px;
+}
+
 .home-sidebar-recent-row:focus-visible,
 .home-conversations-sheet-row:focus-visible {
   position: relative;

package/lib/public/css/home-sidebar.css

@@ -478,6 +478,72 @@
   line-height: 1.45;
 }
 
+.home-sidebar-driver-header {
+  display: flex;
+  align-items: stretch;
+}
+
+.home-sidebar-driver-header > .home-sidebar-recent-item {
+  min-width: 0;
+  flex: 1;
+}
+
+.home-sidebar-driver-toggle {
+  width: 27px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-dimmer);
+  background: transparent;
+  cursor: pointer;
+}
+
+.home-sidebar-driver-toggle:hover,
+.home-sidebar-driver-toggle:focus-visible {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.05);
+  outline: none;
+}
+
+.home-sidebar-driver-toggle .lucide {
+  width: 13px;
+  height: 13px;
+  transition: transform 0.15s ease;
+}
+
+.home-sidebar-driver-toggle[aria-expanded="true"] .lucide {
+  transform: rotate(90deg);
+}
+
+.home-sidebar-worker-children {
+  margin-left: 13px;
+  padding-left: 8px;
+  border-left: 1px solid color-mix(in srgb, var(--text-dimmer) 22%, transparent);
+}
+
+.home-sidebar-worker-item .home-sidebar-recent-row {
+  min-height: 38px;
+}
+
+.home-sidebar-orphan-toggle {
+  width: 100%;
+  min-height: 34px;
+  padding: 0 8px;
+  justify-content: flex-start;
+  gap: 7px;
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+}
+
+.home-sidebar-orphan-toggle span:first-of-type {
+  flex: 1;
+}
+
 .home-sidebar-expand {
   position: absolute;
   top: 8px;

package/lib/public/css/input.css

@@ -52,11 +52,32 @@
   background: var(--bg-alt);
   border: 1px solid var(--border);
   border-radius: 10px;
-  padding: 6px 10px;
+  padding: 0;
   font-size: 12px;
   max-width: 200px;
 }
 
+.pasted-chip-open {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 4px 6px 10px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.pasted-chip-open:hover .pasted-chip-preview,
+.pasted-chip-open:focus-visible .pasted-chip-preview { color: var(--text); }
+
+.pasted-chip-open:focus-visible,
+.pasted-chip-remove:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
 .pasted-chip-preview {
   color: var(--text-muted);
   overflow: hidden;
@@ -87,6 +108,7 @@
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
+  margin-right: 6px;
 }
 
 .pasted-chip-remove .lucide { width: 12px; height: 12px; }
@@ -156,6 +178,59 @@
   min-height: 0;
 }
 
+.paste-modal-editor,
+.paste-modal-footer { display: none; }
+
+.paste-modal-editing .paste-modal-body { display: none; }
+
+.paste-modal-editing .paste-modal-editor {
+  display: block;
+  width: 100%;
+  min-height: min(52vh, 420px);
+  resize: vertical;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  padding: 16px 20px;
+  background: var(--bg);
+  color: var(--text-secondary);
+  font-family: "Roboto Mono", monospace;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.paste-modal-editing .paste-modal-editor:focus {
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.paste-modal-editing .paste-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.paste-modal-cancel,
+.paste-modal-save {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 7px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.paste-modal-cancel {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.paste-modal-save {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-text, white);
+}
+
 /* --- File chips (input preview) --- */
 .file-chip {
   display: inline-flex;
@@ -286,9 +361,11 @@
 #context-sources-add {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  justify-content: center;
+  position: relative;
+  width: 36px;
   height: 36px;
-  padding: 0 10px;
+  padding: 0;
   border-radius: 18px;
   border: none;
   background: transparent;
@@ -322,6 +399,9 @@
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
+  position: absolute;
+  top: 0;
+  right: -1px;
 }
 
 .context-chip {
@@ -667,49 +747,103 @@
   position: relative;
 }
 
+/* Sidebar session-row badge. Formerly shared its rule with the composer's
+   background-tasks chip; it is standalone now that the composer bar no longer
+   uses a filled numeric badge. */
+.session-background-task-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* --- Background tasks status line (above the composer) ---
+   Reads as a calm status line that belongs to the input surface: subtle
+   border, no fill, muted text. Progress is conveyed by the animated dots
+   rather than by color or size. */
 .background-tasks-bar {
   max-width: var(--content-width);
-  margin: 0 auto 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--input-bg);
+  margin: 0 auto 6px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: transparent;
   overflow: hidden;
+  transition: border-color .15s ease, background-color .15s ease;
+}
+
+.background-tasks-bar:hover,
+.background-tasks-bar.expanded {
+  border-color: var(--border);
+  background: var(--input-bg);
 }
 
 .background-tasks-toggle {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 8px 10px;
+  gap: 9px;
+  padding: 7px 11px;
   border: 0;
   background: transparent;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   cursor: pointer;
   font: inherit;
+  font-size: 12px;
   text-align: left;
 }
 
-.background-tasks-chip, .session-background-task-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--bg);
-  font-size: 10px;
-  font-weight: 700;
+.background-tasks-toggle:hover { color: var(--text-secondary); }
+.background-tasks-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
+
+.background-tasks-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Quiet three-dot activity indicator. Same motion as the Home debate dots
+   (home-debate-planning.css) but muted instead of accent-colored, since this
+   is ambient status rather than something asking to be read. */
+.background-tasks-activity { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); flex: none; }
+.background-tasks-activity i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: background-tasks-pulse 1.4s ease-in-out infinite; }
+.background-tasks-activity i:nth-child(2) { animation-delay: .18s; }
+.background-tasks-activity i:nth-child(3) { animation-delay: .36s; }
+@keyframes background-tasks-pulse { 0%, 70%, 100% { opacity: .28; } 35% { opacity: .95; } }
+
+.background-tasks-chevron { display: inline-flex; flex: none; color: var(--text-muted); transition: transform .15s ease; }
+.background-tasks-chevron i { width: 14px; height: 14px; }
+.background-tasks-bar.expanded .background-tasks-chevron { transform: rotate(90deg); }
+
+.background-tasks-list { padding: 0 11px 7px; }
+.background-task-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border-subtle); font-size: 12px; }
+.background-task-icon { display: inline-flex; flex: none; color: var(--text-muted); }
+.background-task-icon i { width: 13px; height: 13px; }
+.background-task-description { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
+/* Housekeeping group: visible so the user can see what Clay runs on its own,
+   but subordinate to the work they actually asked for. */
+.background-tasks-section-label { padding: 9px 0 1px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
+.background-tasks-section-label + .background-task-row { border-top: 0; }
+.background-task-row.ambient .background-task-description { color: var(--text-muted); }
+.background-task-row.ambient .background-task-icon { opacity: .7; }
+.background-task-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--text-muted); }
+.background-task-type { font-size: 11px; }
+.background-task-elapsed { font-variant-numeric: tabular-nums; font-size: 11px; min-width: 44px; text-align: right; }
+.background-task-stop { flex: none; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 8px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 11px; }
+.background-task-stop:hover { color: var(--text); border-color: var(--border); }
+.background-task-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .background-tasks-activity i { animation: none; opacity: .7; }
+  .background-tasks-bar, .background-tasks-chevron { transition: none; }
 }
 
-.background-tasks-list { padding: 0 10px 8px; }
-.background-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
-.background-task-description { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.background-task-type { padding: 2px 6px; border-radius: 5px; background: var(--code-bg); color: var(--text-muted); font-size: 11px; }
-.background-task-stop { border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
-.background-task-stop:hover { color: var(--text); border-color: var(--text-muted); }
+@media (max-width: 600px) {
+  .background-task-meta { gap: 5px; }
+  .background-task-type { display: none; }
+}
 
 #input-row {
   display: flex;
@@ -1216,6 +1350,7 @@
    Attach (files/images -> path injection) and voice input stay available. */
 body.tui-composer-active #schedule-btn,
 body.tui-composer-active #ask-mate-btn,
+body.tui-composer-active .composer-session-action,
 body.tui-composer-active #active-vendor-indicator,
 body.tui-composer-active #config-chip-wrap {
   display: none !important;