collavre 0.24.0 → 0.25.0

data/app/assets/stylesheets/collavre/gnb.css

@@ -61,9 +61,7 @@ nav #search {
 .progress-filter-btn {
     border-radius: var(--radius-3);
     border: none;
-    background: transparent;
     padding: var(--space-1) var(--space-2);
-    transition: background 0.2s var(--ease-out-2);
 }
 
 .progress-filter-btn:first-child {
@@ -79,11 +77,74 @@ nav #search {
 }
 
 .progress-filter-btn.active {
-    background: var(--surface-hover);
     color: var(--text-primary);
     font-weight: var(--weight-5);
 }
 
+/*
+ * Nav pills that toggle their selected surface in place
+ * -----------------------------------------------------
+ * The chat filter and the search trigger flip `.active` on a live page during
+ * turbo-frame navigation, so their surface changes where it sits instead of
+ * arriving already painted in a fresh document. Animating `background` there
+ * re-rasterises the pill's rounded corners on every frame of the transition,
+ * and mobile GPU rasterisers have been observed to mis-composite a corner arc
+ * under that load: the bottom-left arc is replaced by its own chord and the
+ * clipped sliver is drawn back on top, which reads as a folded corner.
+ *
+ * Put the surface on an overlay pseudo-element and cross-fade it with
+ * `opacity`, which the compositor animates without repainting. The rounded
+ * rect is rasterised once and only its alpha moves.
+ *
+ * `z-index: -1` keeps the overlay above the button's own background box and
+ * below its text; that needs the button to be a stacking context, hence
+ * `position: relative` + `z-index: 0`.
+ */
+.progress-filter-btn,
+.search-popup-trigger {
+    position: relative;
+    z-index: 0;
+    transition: color 0.2s var(--ease-out-2);
+}
+
+.progress-filter-btn::before,
+.search-popup-trigger::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background: var(--surface-hover);
+    opacity: 0;
+    transition: opacity 0.2s var(--ease-out-2);
+    pointer-events: none;
+    will-change: opacity;
+}
+
+.progress-filter-btn:hover::before,
+.progress-filter-btn:active::before,
+.progress-filter-btn.active::before,
+.search-popup-trigger:hover::before,
+.search-popup-trigger:active::before,
+.search-popup-trigger.active::before {
+    opacity: 1;
+}
+
+/*
+ * The button itself has to stay transparent in every state, otherwise the
+ * `nav a/button` surfaces above would stack on top of the overlay.
+ */
+.progress-filter-btn,
+.progress-filter-btn:hover,
+.progress-filter-btn:active,
+.progress-filter-btn.active,
+.search-popup-trigger,
+.search-popup-trigger:hover,
+.search-popup-trigger:active,
+.search-popup-trigger.active {
+    background: transparent;
+}
+
 /* ChatGPT-style popup menu overrides */
 nav .popup-menu-wrapper .popup-menu {
     border: 1px solid var(--border-color);

data/app/assets/stylesheets/collavre/landing.css

@@ -16,9 +16,12 @@
   scroll-behavior: smooth;
 }
 
-.landing-page nav {
-  display: none; /* hide app navigation */
-}
+/* This file is linked only from layouts/collavre/landing.html.erb, which renders
+   `<main><%= yield %></main>` and no app navigation — that lives in the host's
+   application layout, which never loads this stylesheet. So a blanket
+   `.landing-page nav { display: none }` could only ever hide a <nav> authored by
+   a landing-layout view (the feature-guide breadcrumbs), which is the opposite
+   of what it was for. Removed rather than narrowed. */
 
 .landing {
   font-family: var(--font-sans);
@@ -336,6 +339,7 @@
   margin-bottom: var(--space-3);
 }
 
+.landing-feature-card h2,
 .landing-feature-card h3 {             /* L3 */
   font-size: var(--text-3);
   font-weight: var(--weight-6);
@@ -597,3 +601,104 @@ body.dark-mode .landing-shot-dark { display: block; }
 .landing-hero-sub { animation-delay: 0.1s; }
 .landing-hero-brand { animation-delay: 0.2s; }
 .landing-hero-actions { animation-delay: 0.3s; }
+
+/* ─── Feature Guides (/features, /features/:key) ─────────────────────────────
+   The public long-form counterpart to the empty-chat feature cards. Shares the
+   landing layout and tokens so a guide reached from a shared link reads as the
+   same product surface as the landing page it sits beside. */
+.landing-features-more {
+  margin-top: var(--space-6);
+  text-align: center;
+}
+
+.feature-guide-breadcrumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-size: var(--text-1);
+  color: var(--text-muted);
+  margin-bottom: var(--space-6);
+}
+
+.feature-guide-breadcrumb a {
+  color: var(--text-muted);
+  text-decoration: none;
+}
+
+.feature-guide-breadcrumb a:hover {
+  color: var(--color-active);
+  text-decoration: underline;
+}
+
+/* The whole card is the link, so strip the anchor's own presentation and let
+   .landing-feature-card keep supplying it. */
+.feature-guide-link-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.feature-guide-more {
+  display: inline-block;
+  margin-top: var(--space-3);
+  font-size: var(--text-1);
+  font-weight: var(--weight-6);
+  color: var(--color-active);
+}
+
+/* A guide is read top to bottom rather than scanned, so it drops the centered
+   landing rhythm for a single measured column. */
+.feature-guide-container {
+  max-width: 720px;
+}
+
+.feature-guide-header {
+  text-align: center;
+  margin-bottom: var(--space-8);
+}
+
+.feature-guide-title {                  /* L2 */
+  font-size: var(--text-5);
+  font-weight: var(--weight-7);
+  margin-bottom: var(--space-3);
+}
+
+.feature-guide-tagline {                /* L4 */
+  font-size: var(--text-3);
+  color: var(--text-muted);
+  line-height: var(--leading-2);
+}
+
+.feature-guide-section {
+  margin-bottom: var(--space-7);
+}
+
+.feature-guide-heading {                /* L3 */
+  font-size: var(--text-3);
+  font-weight: var(--weight-6);
+  margin-bottom: var(--space-3);
+}
+
+.feature-guide-body {                   /* L4 */
+  font-size: var(--text-2);
+  color: var(--text-muted);
+  line-height: var(--leading-3);
+}
+
+.feature-guide-tips {
+  padding-left: var(--space-5);
+  margin: 0;
+}
+
+.feature-guide-tips li {                /* L4 */
+  font-size: var(--text-2);
+  color: var(--text-muted);
+  line-height: var(--leading-3);
+  margin-bottom: var(--space-2);
+}
+
+.feature-guide-back {
+  text-align: center;
+  margin-top: var(--space-8);
+}

data/app/assets/stylesheets/collavre/mention_menu.css

@@ -34,6 +34,38 @@
   cursor: pointer;
 }
 
+.llm-model-item {
+  display: flex;
+  gap: 0.75em;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.llm-model-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.llm-model-delete {
+  flex: 0 0 auto;
+  width: 1.75em;
+  height: 1.75em;
+  padding: 0;
+  color: var(--text-muted);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-round);
+}
+
+.llm-model-delete:hover,
+.llm-model-delete:focus-visible {
+  color: var(--text-primary);
+  background: var(--surface-hover);
+}
+
 .mention-item:hover,
 .mention-item.active,
 .common-popup-item:hover,

data/app/assets/stylesheets/collavre/popup.css

@@ -105,6 +105,20 @@ body.chat-fullscreen #topic-list-modal {
   display: flex;
   flex-direction: column;
   max-width: 90vw;
+  /* CommonPopup sets max-height inline from the space available beside the
+     anchor. Border-box keeps that number the rendered height (it is measured
+     back via offsetHeight), and hiding overflow stops content from spilling
+     past the cap instead of scrolling inside it. */
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* The scrollable list is what gives when the popup is capped: flex items do not
+   shrink past their content by default, so without this the list keeps its
+   max-height and the bottom of it is simply clipped away. */
+.common-popup-list {
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .common-popup input[type="text"] {

data/app/assets/stylesheets/collavre/print.css

@@ -10,7 +10,6 @@
   .creative-row-actions,
   .creative-toggle-btn,
   .select-creative-checkbox,
-  #creative-guide-popover,
   #creative-guide-link,
   #inbox-menu-btn,
   #plans-menu-btn,

data/app/assets/stylesheets/collavre/search_popup.css

@@ -41,8 +41,8 @@
   text-overflow: ellipsis;
 }
 
+/* The selected surface is drawn by the overlay pseudo-element in gnb.css. */
 .search-popup-trigger.active {
-  background: var(--surface-hover);
   color: var(--text-primary);
   font-weight: var(--weight-5);
 }

data/app/assets/stylesheets/collavre/secret_fields.css

@@ -0,0 +1,3 @@
+.masked-secret-field {
+  -webkit-text-security: disc;
+}

data/app/assets/stylesheets/collavre/workspace.css

@@ -0,0 +1,307 @@
+body.creative-workspace {
+    height: 100dvh;
+    overflow: hidden;
+}
+
+.creative-workspace-shell {
+    display: grid;
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(0, 1fr);
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+}
+
+body.creative-workspace > nav {
+    max-width: none;
+}
+
+.creative-workspace-shell > main {
+    grid-column: 2;
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    overflow: auto;
+}
+
+#creative-workspace-content {
+    display: block;
+    min-width: 0;
+}
+
+body.creative-workspace .creative-content,
+body.creative-workspace .creative-title-content {
+    min-width: 0;
+    max-width: none;
+}
+
+/* The rule above drops the viewport-based max-width that used to cap row width.
+   Without it, the flex wrappers between the grid column and .creative-content
+   keep their default min-width: auto, so they refuse to shrink below the
+   min-content width of their contents. Text still wraps (min-content is one
+   word), but unbreakable blocks -- code blocks and tables -- overflow the
+   column. Zeroing min-width lets the flex chain shrink to the column.
+
+   The title row (the root creative) has its own chain: .creative-row-start >
+   h1.page-title > .creative-title-content. Shrinking only .creative-row-start
+   would let the title's min-content width paint through the shrunken parent,
+   so .page-title belongs in the same list. */
+body.creative-workspace .creative-row-start,
+body.creative-workspace .creative-tree-li,
+body.creative-workspace .page-title,
+body.creative-workspace .indent1,
+body.creative-workspace .indent2,
+body.creative-workspace .indent3 {
+    min-width: 0;
+}
+
+.creative-workspace-tree-region {
+    grid-column: 1;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--surface-section);
+    border-right: var(--border-1) solid var(--border-color);
+}
+
+#creative-workspace-tree {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.creative-workspace-tree-header {
+    padding: var(--space-3);
+    border-bottom: var(--border-1) solid var(--border-color);
+}
+
+.creative-workspace-tree-header h2 {
+    margin: 0;
+    font-size: var(--text-2);
+}
+
+.creative-workspace-tree-nav {
+    display: block;
+    flex: 1;
+    max-width: none;
+    min-height: 0;
+    padding: var(--space-2);
+    overflow: auto;
+    overscroll-behavior-y: contain;
+    background: transparent;
+    border: 0;
+}
+
+.creative-workspace-tree-list {
+    margin: 0;
+    padding: 0 0 0 var(--space-3);
+    list-style: none;
+}
+
+.creative-workspace-tree-nav > .creative-workspace-tree-list {
+    padding-left: 0;
+}
+
+.creative-workspace-tree-row {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+
+.creative-workspace-tree-branch-toggle,
+.creative-workspace-tree-branch-spacer {
+    width: 1.75rem;
+    min-width: 1.75rem;
+}
+
+.creative-workspace-tree-branch-toggle {
+    padding: var(--space-1);
+    color: var(--text-muted);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+}
+
+.creative-workspace-tree-link {
+    display: block;
+    flex: 1;
+    min-width: 0;
+    padding: var(--space-2);
+    overflow: hidden;
+    color: var(--text-primary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: var(--radius-2);
+}
+
+.creative-workspace-tree-link:hover,
+.creative-workspace-tree-link.is-current {
+    background: var(--surface-hover);
+}
+
+.creative-workspace-tree-link.is-current {
+    color: var(--color-active);
+    font-weight: var(--weight-6);
+}
+
+.creative-workspace-tree-status {
+    padding: var(--space-3);
+    color: var(--text-muted);
+    text-align: center;
+}
+
+.creative-workspace-tree-toggle {
+    display: none;
+}
+
+#comments-list.docked-empty {
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    text-align: center;
+    background: transparent;
+}
+
+#comments-list.docked-empty::before {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) {
+        display: flex;
+        position: static;
+        grid-column: 3;
+        width: auto;
+        height: auto;
+        max-width: none !important;
+        max-height: none;
+        min-width: 0;
+        min-height: 0;
+        z-index: auto;
+        border-width: 0 0 0 var(--border-1);
+        border-color: var(--border-color);
+        border-radius: 0;
+        box-shadow: none;
+        transition: none;
+    }
+
+    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) .resize-handle {
+        display: none;
+    }
+
+    .creative-workspace-shell:has(#comments-popup.docked-collapsed) {
+        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 3rem;
+    }
+
+    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) {
+        padding: var(--space-2);
+    }
+
+    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) > :not(.comments-popup-header),
+    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) .comments-popup-header > :not(.comments-popup-actions),
+    #comments-popup.docked-collapsed:not([data-fullscreen="true"]) .comments-popup-actions > :not(#close-comments-btn) {
+        display: none !important;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+    .creative-workspace-shell {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .creative-workspace-shell > main {
+        grid-column: 1;
+    }
+
+    .creative-workspace-shell > #comments-popup[data-docked="true"]:not([data-fullscreen="true"]) {
+        grid-column: 2;
+    }
+
+    .creative-workspace-shell:has(#comments-popup.docked-collapsed) {
+        grid-template-columns: minmax(0, 1fr) 3rem;
+    }
+}
+
+/* Below the three-column breakpoint the tree gives up its own column and
+   becomes an off-canvas drawer with a toggle handle. Shared by the two-panel
+   band and the one-panel (mobile) band so both collapse the same way — and so
+   the tree stays mounted in both, preserving its expansion state. */
+@media (max-width: 1279px) {
+    .creative-workspace-tree-region {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: var(--layer-modal);
+        width: min(300px, 80vw);
+        overflow: visible;
+        box-shadow: var(--shadow-3);
+        transform: translateX(-100%);
+        transition: transform 0.2s var(--ease-out-2);
+    }
+
+    .creative-workspace-tree-region > aside {
+        visibility: hidden;
+    }
+
+    .creative-workspace-tree-region.is-open {
+        transform: translateX(0);
+    }
+
+    .creative-workspace-tree-region.is-open > aside {
+        visibility: visible;
+    }
+
+    .creative-workspace-tree-toggle {
+        position: absolute;
+        top: 5rem;
+        right: -2.75rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.75rem;
+        height: 2.75rem;
+        padding: 0;
+        color: var(--text-primary);
+        background: var(--surface-section);
+        border: var(--border-1) solid var(--border-color);
+        border-left: 0;
+        border-radius: 0 var(--radius-2) var(--radius-2) 0;
+        cursor: pointer;
+    }
+
+    .creative-workspace-tree-region.is-open .creative-workspace-tree-toggle-icon {
+        transform: rotate(180deg);
+    }
+}
+
+@media (max-width: 767px) {
+    body.creative-workspace {
+        height: auto;
+        overflow: visible;
+    }
+
+    /* The floating chat is rendered after the tree in the workspace shell and
+       uses the modal layer. Keep the opened tree above it so its rows remain
+       visible and tappable on one-panel screens. */
+    .creative-workspace-tree-region {
+	z-index: calc(var(--layer-modal) + 1);
+    }
+
+    .creative-workspace-shell {
+        display: block;
+    }
+
+    body.creative-workspace > nav,
+    .creative-workspace-shell > main {
+        max-width: var(--max-width);
+    }
+
+    /* In the two-panel band the handle's default offset lands in the left
+       gutter main leaves itself. One-panel main runs flush to the edge, so the
+       same offset would sit on top of the breadcrumb row — park the handle in
+       the nav's empty left corner instead, where it reads as the menu button
+       it effectively is. */
+    .creative-workspace-tree-toggle {
+        top: var(--space-3);
+    }
+}

data/app/channels/collavre/agent_channel.rb

@@ -28,14 +28,14 @@ module Collavre
 
     # When the MCP process crashes or the WebSocket drops before the plugin
     # can call DELETE /api/v1/agent/:id, a Claude Channel session would
-    # otherwise stay matchable (routing_expression: "true") and any future
+    # otherwise stay matchable and any future
     # comment on a creative still shared with the agent would dispatch into an
     # empty stream — delegated work that only clears via stuck recovery.
     #
     # One shared agent can have MANY concurrent sessions, so routing is gated
     # on PRESENCE: this session drops its own AgentSubscription row, and
-    # routing is cleared only when NO rows remain. A still-live sibling session
-    # keeps its row, so routing stays active and its in-flight work is never
+    # routing is enabled only while a row is live. A still-live sibling session
+    # keeps its row, so dispatch remains active and its in-flight work is never
     # cancelled. Done under the agent's row lock so a concurrent subscribe on
     # the same agent serializes (no clear-vs-activate race).
     #
@@ -47,7 +47,7 @@ module Collavre
     def unsubscribed
       return unless @session_agent && @subscription_token
 
-      cleared = false
+      last_session_disconnected = false
       dropped_session_id = nil
       @session_agent.with_lock do
         scope = AgentSubscription.where(agent_id: @session_agent.id, token: @subscription_token)
@@ -67,25 +67,21 @@ module Collavre
         # row cannot masquerade as a live sibling and pin routing on forever.
         AgentSubscription.reap_stale!(@session_agent.id)
 
-        # Another session is still LIVE on this shared agent. Keep routing
-        # active; whichever session unsubscribes last clears it.
+        # Another session is still LIVE on this shared agent. Its presence keeps
+        # dispatch active, so only the final disconnect owns agent-wide cleanup.
         next if AgentSubscription.live.where(agent_id: @session_agent.id).exists?
 
-        @session_agent.update_columns(
-          routing_expression: nil,
-          routing_subscription_token: nil
-        )
-        cleared = true
+        @session_agent.update_columns(routing_subscription_token: nil)
+        last_session_disconnected = true
       end
 
-      if cleared
+      if last_session_disconnected
         # Reconnect-grace cancellation (last session): clearing routing only
         # makes the agent unroutable. Any task already "delegated" still holds
         # its ResourceTracker slot — the dispatch was broadcast to a now-dead
         # stream so no client remains to call /reply, and the slot would stay
         # held until StuckDetectorJob times out. The job cancels those tasks
-        # after a grace window, but only if the agent is still offline (it
-        # rechecks routing_expression AND that no session has resubscribed).
+        # after a grace window, but only if the agent is still offline.
         CancelOfflineDelegatedTasksJob
           .set(wait: CancelOfflineDelegatedTasksJob::GRACE_SECONDS.seconds)
           .perform_later(@session_agent.id, @subscription_token)
@@ -153,8 +149,8 @@ module Collavre
       return reject unless agent&.ai_user?
       return reject unless agent.created_by_id == current_user.id
 
-      # Attach the stream BEFORE activating routing. Orchestration::Matcher
-      # can pick this agent as soon as routing_expression becomes "true";
+      # Attach the stream BEFORE recording presence. Orchestration::Matcher
+      # can pick this agent as soon as its presence row is committed;
       # broadcasts to agent:user:<id> in the window between the UPDATE
       # committing and stream_from registering the subscription would land
       # in a stream with no subscriber, leaving the new delegated task
@@ -165,7 +161,7 @@ module Collavre
       @subscription_token = SecureRandom.hex(8) if agent.claude_channel_agent?
       stream_from "agent:user:#{agent.id}"
 
-      # Record this session's presence row and (re)activate routing under the
+      # Record this session's presence row under the
       # agent's row lock, so a concurrent unsubscribe on the same shared agent
       # serializes against this and cannot clear routing out from under a live
       # session. routing_subscription_token is kept as the most-recent-session
@@ -185,10 +181,7 @@ module Collavre
             token: @subscription_token,
             session_id: params[:session_id].presence
           )
-          agent.update_columns(
-            routing_subscription_token: @subscription_token,
-            routing_expression: "true"
-          )
+          agent.update_columns(routing_subscription_token: @subscription_token)
         end
       end
     end