clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/css/input.css

@@ -667,49 +667,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;

package/lib/public/css/mates.css

@@ -2,8 +2,7 @@
 .mate-sidebar-avatar,
 .mate-collapsed-avatar,
 .dm-bubble-avatar,
-.dm-bubble-avatar-me,
-.home-hub-mate-avatar {
+.dm-bubble-avatar-me {
   image-rendering: -webkit-optimize-contrast;
   image-rendering: smooth;
   -webkit-backface-visibility: hidden;
@@ -502,17 +501,11 @@
   background: var(--border, #333);
 }
 
-/* === Mate avatar in user strip: squircle + desaturate === */
+/* Mate colors are muted in the generated source; custom images stay intact. */
 .icon-strip-mate .icon-strip-user-avatar {
   border-radius: 8px;
-  filter: saturate(0.65);
-}
-.icon-strip-mate:hover .icon-strip-user-avatar,
-.icon-strip-mate.mention-active .icon-strip-user-avatar {
-  filter: saturate(1);
 }
 .icon-strip-mate.active .icon-strip-user-avatar {
-  filter: saturate(1);
   box-shadow: 0 0 0 2px var(--accent);
   border-radius: 8px;
 }
@@ -2916,31 +2909,11 @@ body.mate-dm-active .activity-inline:not(.mention-activity-bar):not(.mate-pre-ac
   }
 }
 
-/* === Mates UI gate === */
-/* body.mates-disabled is set when the user flips the Mates toggle off in
-   User Settings → Mates. body.is-multi-user is set when the deploy hosts
-   more than one user. Single-user collapses the whole Mates surface;
-   multi-user keeps Mates-adjacent containers visible (they still host
-   other users) but greys out and disables the Mates-specific bits. */
-
-/* Always hide pure-Mates UI: rotating switch hint, individual mate
-   avatars in the icon strip, the home-hub mates strip, and the
-   "Ask Mate" button in the chat input. These never contain anything
-   but mates, so they collapse in both modes. */
-body.mates-disabled .icon-strip-mate,
-body.mates-disabled #icon-strip-hint-mate,
-body.mates-disabled #home-hub-mates,
-body.mates-disabled #ask-mate-btn {
-  display: none !important;
-}
-
-/* Single-user only: collapse the whole icon-strip mate wrapper since it
-   shares space with the user-strip but has no other users to display in
-   single-user mode. The DM picker stays visible in both modes so the
-   user always has a way to discover the toggle (single-user can't reach
-   the picker today since the + button lives inside the wrapper, but if
-   that ever changes the same disabled UX applies). */
-body.mates-disabled:not(.is-multi-user) #icon-strip-mate-section {
+/* === Project Mate DM gate === */
+/* This preference hides only legacy/project-local Mate DM shortcuts.
+   Home, Mate mentions, creation, debates, and memory remain available. */
+body.project-mate-dms-disabled .icon-strip-mate,
+body.project-mate-dms-disabled #icon-strip-hint-mate {
   display: none !important;
 }
 

package/lib/public/css/pane.css

@@ -135,7 +135,7 @@ body.pane-mode #input-area {
 }
 
 .split-pair-role-driver { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
-.split-pair-role-worker { color: var(--text-secondary); background: var(--bg-alt); }
+.split-pair-role-split-worker { color: var(--text-secondary); background: var(--bg-alt); }
 
 /* Pair roles are status labels. Control remains with the Driver through MCP. */
 

package/lib/public/css/playbook.css

@@ -175,90 +175,10 @@
   color: var(--text);
 }
 
-/* --- Hub playbook cards --- */
-.hub-playbooks {
-  animation: hubCardIn 0.4s ease 0.20s both;
-}
-.hub-playbooks-grid {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.hub-playbook-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: rgba(var(--overlay-rgb), 0.03);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-  flex: 1;
-  min-width: 180px;
-}
-.hub-playbook-card:hover {
-  background: rgba(var(--overlay-rgb), 0.07);
-  border-color: var(--accent);
-}
-.hub-playbook-card.completed {
-  background: rgba(76, 175, 80, 0.08);
-  border-color: rgba(76, 175, 80, 0.25);
-}
-.hub-playbook-card.completed:hover {
-  background: rgba(76, 175, 80, 0.14);
-  border-color: rgba(76, 175, 80, 0.4);
-}
-.hub-playbook-card-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-}
-.hub-playbook-card-body {
-  flex: 1;
-  min-width: 0;
-}
-.hub-playbook-card-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-}
-.hub-playbook-card-desc {
-  font-size: 11px;
-  color: var(--text-dimmer);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.hub-playbook-card-check {
-  color: var(--success);
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-/* --- Tip "Try it" button (inline after text) --- */
-.hub-tip-try {
-  display: inline;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--accent);
-  font-size: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  margin-left: 6px;
-  font-family: inherit;
-}
-.hub-tip-try:hover {
-  background: var(--accent-12);
-}
-
 /* --- Mobile --- */
 @media (max-width: 768px) {
   .playbook-modal {
     width: 95vw;
     border-radius: 12px;
   }
-  .hub-playbook-card {
-    min-width: 140px;
-  }
 }

package/lib/public/css/project-logs.css

@@ -0,0 +1,234 @@
+/* Project Logs — restrained, factual project ledger. */
+
+/* Wide screens: bounded workbench window beside #app, matching the geometry of
+   the document viewer and the terminal. */
+@media (min-width: 1024px) {
+  #project-logs-panel {
+    width: 50%;
+    max-width: 720px;
+    min-width: 360px;
+    height: calc(100% - 16px);
+    min-height: 0;
+    align-self: center;
+    margin: 8px 8px 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-shadow:
+      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
+      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
+  }
+  #project-logs-panel.hidden { display: none; }
+  #project-logs-panel.project-logs-wide {
+    width: 70%;
+    max-width: 1200px;
+  }
+  #project-logs-panel.panel-fullscreen {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #project-logs-panel { animation: none; }
+}
+
+/* Narrow screens: full overlay, like the other workbench tools. */
+@media (max-width: 1023px) {
+  #project-logs-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: var(--safe-top);
+    padding-bottom: var(--safe-bottom);
+    background: var(--bg);
+    z-index: 300;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  #project-logs-panel.hidden { display: none; }
+  /* Sizing controls are meaningless in the overlay presentation. */
+  #project-logs-wide,
+  #project-logs-fullscreen { display: none; }
+}
+.project-logs-topbar {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex: 0 0 auto;
+}
+.project-logs-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); }
+.project-logs-title .lucide { width: 15px; color: var(--accent); }
+.project-logs-subtitle { flex: 1; color: var(--text-dimmer); font-size: 12px; }
+.project-logs-icon-btn {
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--bg-alt);
+  color: var(--text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+.project-logs-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
+.project-logs-icon-btn.hidden { display: none; }
+.project-logs-icon-btn .lucide { width: 15px; }
+.project-logs-icon-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
+.project-logs-icon-btn:disabled { opacity: 0.4; cursor: default; }
+.project-logs-window-actions { display: inline-flex; align-items: center; gap: 6px; }
+/* --- Ambient edge handle ---------------------------------------------
+   A slim notch on the right workbench boundary, offered only where a real
+   pointer can hover. Touch keeps the explicit toolbar route. */
+@media (min-width: 1024px) {
+  .project-logs-handle {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    width: 14px;
+    height: 88px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+    border-right: 0;
+    border-radius: 8px 0 0 8px;
+    background: var(--bg-alt);
+    cursor: pointer;
+    z-index: 40;
+    transition: width 0.16s ease, background 0.16s ease;
+  }
+  .project-logs-handle:hover,
+  .project-logs-handle:focus-visible { width: 18px; background: var(--bg); }
+  .project-logs-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .project-logs-handle.hidden { display: none; }
+  .project-logs-handle-notch {
+    width: 3px;
+    height: 34px;
+    border-radius: 999px;
+    background: var(--border);
+    transition: background 0.16s ease, height 0.16s ease;
+  }
+  .project-logs-handle:hover .project-logs-handle-notch { background: var(--text-dimmer); }
+  /* Unread: a brighter notch, no motion of its own. */
+  .project-logs-handle.has-unread .project-logs-handle-notch { background: var(--accent); height: 46px; }
+}
+
+/* Touch and narrow viewports never depend on hover. */
+@media (max-width: 1023px) {
+  .project-logs-handle { display: none; }
+}
+
+/* A preview is the same pane, revealed but uncommitted. */
+#project-logs-panel.project-logs-previewing { box-shadow: 0 0 0 1px var(--accent), 4px 8px 24px rgba(var(--shadow-rgb), 0.2); }
+
+/* --- Unread cues --- */
+#project-logs-btn.project-logs-unread { color: var(--accent); }
+#project-logs-count { background: var(--accent); color: #fff; }
+
+@keyframes project-logs-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
+  70% { box-shadow: 0 0 0 7px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+.project-logs-pulse { animation: project-logs-pulse 1.1s ease-out 2; }
+
+/* Reduced motion keeps the static unread marker and drops every flourish. */
+@media (prefers-reduced-motion: reduce) {
+  .project-logs-pulse { animation: none; }
+  .project-logs-handle { transition: none; }
+  .project-logs-handle-notch { transition: none; }
+}
+
+/* --- Ledger toolbar --- */
+.project-logs-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
+.project-logs-toolbar.hidden { display: none; }
+.project-logs-search { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-dimmer); }
+.project-logs-search .lucide { width: 14px; flex: 0 0 auto; }
+.project-logs-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.project-logs-filter { height: 32px; max-width: 42%; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
+
+/* --- Ledger list: full pane, chronological, commit-history feel --- */
+.project-logs-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
+.project-logs-list.hidden { display: none; }
+.project-log-row { width: 100%; display: block; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: inherit; text-align: left; cursor: pointer; }
+.project-log-row:hover { background: rgba(var(--overlay-rgb), 0.05); }
+.project-log-row:last-child { border-bottom: 0; }
+.project-log-row-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
+.project-log-row-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: var(--text); }
+.project-log-row-summary { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
+.project-log-row-meta { margin-top: 6px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-logs-list-empty { padding: 32px 20px; color: var(--text-dimmer); font-size: 12px; text-align: center; line-height: 1.6; }
+
+/* Category chip and priority signal. Categories are project-defined, so the
+   chip is deliberately neutral: no per-category selectors and no exhaustive
+   class list, because the vocabulary is not known at build time. Priority
+   carries the only stable colour, since urgency is a fixed scale. */
+.project-log-chip { flex: 0 0 auto; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: rgba(var(--overlay-rgb), 0.08); color: var(--text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
+.project-log-priority { flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
+.project-log-priority[data-priority="important"] { background: color-mix(in srgb, #f5a524 18%, transparent); color: #f5a524; }
+.project-log-priority[data-priority="urgent"] { background: color-mix(in srgb, #e5484d 20%, transparent); color: #e5484d; }
+
+/* --- Entry detail: full pane, replaces the list --- */
+.project-logs-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
+.project-logs-detail.hidden { display: none; }
+.project-log-document { max-width: 820px; margin: 0 auto; padding: 22px 22px 40px; }
+#project-logs-panel.panel-fullscreen .project-log-document { padding: clamp(28px, 5vw, 64px); }
+.project-log-doc-chips { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
+.project-log-document h1 { margin: 0 0 8px; color: var(--text); font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
+.project-log-doc-summary { margin: 0 0 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
+.project-log-byline { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dimmer); font-size: 11px; font-family: var(--font-mono); }
+.project-log-markdown { line-height: 1.65; }
+
+/* --- Discussion --- */
+.project-log-discussion { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
+.project-log-discussion h2 { margin: 0 0 12px; color: var(--text); font-family: var(--font-display); font-size: 15px; }
+.project-log-discussion-empty { margin: 0; color: var(--text-dimmer); font-size: 12px; }
+.project-log-comment { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-alt); }
+.project-log-comment-meta { margin: 0 0 5px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-log-comment-body { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
+.project-log-comment-status-badge { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(var(--overlay-rgb), 0.08); color: var(--text-dimmer); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
+.project-log-comment-status-badge[data-status="incorporated"] { background: color-mix(in srgb, var(--brand-green) 16%, transparent); color: var(--brand-green); }
+.project-log-comment-status-badge[data-status="clarification-needed"] { background: color-mix(in srgb, #f5a524 18%, transparent); color: #f5a524; }
+.project-log-comment-response { margin-top: 9px; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(var(--overlay-rgb), 0.04); border-radius: 0 7px 7px 0; }
+.project-log-comment-response-meta { margin: 0 0 4px; color: var(--text-dimmer); font-size: 10.5px; font-family: var(--font-mono); }
+.project-log-comment-response-body { margin: 0; color: var(--text); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
+.project-log-history { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
+.project-log-history h2 { margin: 0 0 10px; color: var(--text); font-family: var(--font-display); font-size: 14px; }
+.project-log-history-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
+.project-log-history-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
+.project-log-history-label { flex: 0 0 auto; color: var(--text-dimmer); font-family: var(--font-mono); font-weight: 700; }
+.project-log-history-text { color: var(--text-secondary); }
+.project-log-history-reason { color: var(--text-dimmer); font-style: italic; }
+.project-log-comment-form { display: grid; gap: 8px; margin-top: 18px; }
+.project-log-comment-form label { color: var(--text-secondary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+.project-log-comment-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
+.project-log-comment-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
+.project-log-comment-status { min-height: 16px; margin: 0; color: var(--text-dimmer); font-size: 11px; }
+.project-log-comment-actions { display: flex; justify-content: flex-end; }
+.project-log-comment-actions button { padding: 7px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-alt); color: var(--text-secondary); font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
+.project-log-comment-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
+
+@media (max-width: 768px) {
+  .project-logs-subtitle { display: none; }
+  .project-log-document { padding: 18px 16px 32px; }
+}

package/lib/public/css/scheduler.css

@@ -6,7 +6,7 @@
 #scheduler-panel {
   position: absolute;
   inset: 0;
-  z-index: 40;
+  z-index: 240;
   background: var(--bg);
   display: flex;
   flex-direction: column;