collavre 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d03302f37a546f2c0e067497346b90cf7ec6575526494441dfd9425524d48ca
-  data.tar.gz: 2f3b84e4096620cf8cdf06511ee621872c6c8dd96ef687dff56eb8e4a33a625d
+  metadata.gz: a12dcc4af49e744b199e83be2b283e804d62e67e2b817a0c4da80494eb558357
+  data.tar.gz: a1f93a9d7a43bf370af9fe47044a6613e50ee258b55f4cd7609b17245c5ffef4
 SHA512:
-  metadata.gz: 74d470294f2ffbddb9201a09b8fb43d294a13de026a696964c1f6a0bb3f12df46c96c03d99fbf03304e91d04419ceb8419c52ae124aec3b671ca887ba99cc5e5
-  data.tar.gz: 7f677490ae7b3b49fb20651d981b613cccb5f37aa0edb0a634bc54d1be302d4f7e1f9aeee206dadc6fd73f82aa0ccbe2858efd2fbac50b443a25b8b00288ac12
+  metadata.gz: c7c872e1e41caaa91ca147174e40590099612338fe56d143c65fefdb522c0ea3d26e087d1d35e0ec9f214479b6f4103e984c430ed18de3976dd8e28beabeafb1
+  data.tar.gz: 1ad2496caec59b6bf8d85bae5b90797a5a4de0087cda9d9f962501db426928c76b4b3a7aaefc3724dcfa26e3546d1afbe45c56a7ed9573dbd5129c1c177e3a6d

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

@@ -13,6 +13,78 @@
     max-width: calc(100vw - 0.5em) !important;
 }
 
+body.chat-fullscreen {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body.chat-fullscreen main {
+    height: 100vh;
+    width: 100vw;
+    max-width: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.comments-fullscreen-page {
+    height: 100vh;
+    width: 100vw;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.comments-fullscreen-page #comments-popup,
+#comments-popup[data-fullscreen="true"] {
+    display: flex !important;
+    position: static;
+    width: 100%;
+    height: 100%;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    z-index: auto;
+    box-sizing: border-box;
+    padding: 1em;
+}
+
+.comments-popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75em;
+}
+
+.comments-popup-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+}
+
+.comments-popup-action {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    line-height: 1;
+}
+
+.comments-popup-action-icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}
+
 #comments-popup .resize-handle {
     position: absolute;
     width: 10px;
@@ -51,10 +123,20 @@
 
 .comment-topics-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    align-items: center;
     gap: 0.5em;
-    padding-bottom: 0.5em;
+    padding: 0.5em 0;
     margin-bottom: 0.5em;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+    min-height: 36px; /* Prevent height collapse during scroll */
+}
+
+.comment-topics-list::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
 }
 
 #comments-list::before {
@@ -353,8 +435,29 @@
 
 .comment-status-label {
     margin-left: 0.4em;
-    font-size: 0.85em;
-    color: var(--color-muted);
+    font-size: 0.75em;
+    padding: 0.15em 0.5em;
+    border-radius: 0.8em;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+    vertical-align: middle;
+}
+
+.comment-status-label.private-label {
+    background-color: color-mix(in srgb, var(--color-badge-bg) 20%, transparent);
+    color: var(--color-badge-bg);
+}
+
+.comment-status-label.approved-label {
+    background-color: color-mix(in srgb, var(--color-complete) 20%, transparent);
+    color: var(--color-complete);
+}
+
+.comment-status-label.pending-label {
+    background-color: color-mix(in srgb, orange 20%, transparent);
+    color: orange;
 }
 
 .comment-action-container {
@@ -401,6 +504,7 @@
 #voice-comments-btn,
 #attach-image-btn,
 #cancel-edit-btn,
+#new-comment-form button[type="submit"],
 .convert-comment-btn,
 .delete-comment-btn,
 .edit-comment-btn,
@@ -511,6 +615,18 @@
     #comments-popup.open {
         transform: translateY(0);
     }
+
+    .comments-fullscreen-page #comments-popup,
+    #comments-popup[data-fullscreen="true"] {
+        display: flex !important;
+        transform: none;
+        border-radius: 0;
+        padding: 1em;
+        position: static;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+    }
 }
 
 .comment-item.highlight-flash {
@@ -530,6 +646,38 @@
 #comment-participants {
     margin-bottom: 0.3em;
     min-height: 20px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.2em;
+}
+
+#comment-participants .avatar-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.add-participant-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid var(--color-border);
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-muted);
+    font-size: 1.2em;
+    line-height: 1;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.add-participant-btn:hover {
+    background: var(--color-section-bg);
+    color: var(--color-text);
 }
 
 #typing-indicator {
@@ -547,7 +695,7 @@
 }
 
 .comment-presence-avatar {
-    margin-right: 0.2em;
+    margin-right: 0;
 }
 
 .comment-presence-avatar.inactive {
@@ -562,15 +710,26 @@
 
 .comment-topics-list {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    align-items: center;
     gap: 0.5em;
-    padding-bottom: 0.5em;
+    padding: 0.5em 0;
     margin-bottom: 0.5em;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+    min-height: 36px; /* Prevent height collapse during scroll */
+}
+
+.comment-topics-list::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
 }
 
 .topic-tag {
     display: inline-flex;
     align-items: center;
+    flex-shrink: 0;
     gap: 4px;
     padding: 0.2em 0.6em;
     border-radius: 12px;
@@ -580,6 +739,9 @@
     font-size: 0.85em;
     cursor: pointer;
     transition: all 0.2s;
+    white-space: nowrap;
+    height: 26px; /* Fixed height to prevent shrinking */
+    box-sizing: border-box;
 }
 
 .topic-tag:hover {
@@ -610,6 +772,67 @@
     font-weight: bold;
 }
 
+/* Drag and drop styles for moving comments to topics */
+.topic-tag.drag-over {
+    background-color: var(--color-accent, #007bff);
+    color: white;
+    border-color: var(--color-accent, #007bff);
+    transform: scale(1.05);
+    transition: all 0.15s ease;
+}
+
+.topic-drop-target {
+    transition: all 0.15s ease;
+}
+
+/* Topic reorder drag styles */
+.topic-tag[draggable="true"] {
+    cursor: grab;
+}
+
+.topic-tag[draggable="true"]:active {
+    cursor: grabbing;
+}
+
+.topic-tag.topic-dragging {
+    opacity: 0.5;
+}
+
+.topic-tag.topic-drag-over-left {
+    border-left: 3px solid var(--color-accent, #007bff);
+    margin-left: -1px;
+}
+
+.topic-tag.topic-drag-over-right {
+    border-right: 3px solid var(--color-accent, #007bff);
+    margin-right: -1px;
+}
+
+.comment-item[draggable="true"] {
+    cursor: grab;
+}
+
+.comment-item[draggable="true"]:active {
+    cursor: grabbing;
+}
+
+#comments-list.dragging-comments .comment-item:not(.selected-for-move) {
+    opacity: 0.5;
+}
+
+.comment-drag-image {
+    position: fixed;
+    top: -1000px;
+    left: -1000px;
+    padding: 8px 16px;
+    background-color: var(--color-accent, #007bff);
+    color: white;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
 /* Hide the topic link if the message is displayed within that topic's context */
 /* Use Javascript to set data-current-topic-id on the list container */
 .comment-topic-link {
@@ -657,6 +880,12 @@
     display: none;
 }
 
+.topic-creation-container {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
 .add-topic-btn {
     display: inline-flex;
     align-items: center;
@@ -689,4 +918,60 @@
     font-size: 0.85em;
     width: 100px;
     outline: none;
-}
+}
+
+.topic-edit-input {
+    display: inline-block;
+    padding: 0.1em 0.4em;
+    border-radius: 8px;
+    background: var(--color-bg);
+    border: 1px solid var(--color-accent, #007bff);
+    color: var(--color-text);
+    font-size: 0.85em;
+    width: 80px;
+    outline: none;
+}
+
+/* Selection hint popup */
+.selection-hint-popup {
+    position: fixed;
+    background: var(--color-bg-secondary, #f8f9fa);
+    border: 1px solid var(--color-border, #dee2e6);
+    border-radius: 8px;
+    padding: 8px 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    white-space: nowrap;
+    z-index: 10000;
+    animation: hint-fade-in 0.2s ease-out;
+}
+
+.selection-hint-popup .hint-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 0.8em;
+    color: var(--color-text-secondary, #6c757d);
+}
+
+.selection-hint-popup .hint-content span {
+    display: block;
+}
+
+@keyframes hint-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .selection-hint-popup {
+        background: var(--color-bg-secondary, #2d2d2d);
+        border-color: var(--color-border, #444);
+    }
+}

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

@@ -41,3 +41,29 @@
   padding: 0.35em 0.5em;
   cursor: pointer;
 }
+
+.command-item {
+  display: flex;
+  gap: 0.5em;
+  align-items: baseline;
+}
+
+.command-label {
+  font-weight: 600;
+}
+
+.command-args {
+  font-size: 0.85em;
+  color: var(--color-text-muted);
+}
+
+.command-aliases {
+  font-size: 0.85em;
+  color: var(--color-text-muted);
+}
+
+.command-description {
+  margin-top: 0.2em;
+  font-size: 0.85em;
+  color: var(--color-text-muted);
+}

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

@@ -138,6 +138,13 @@
   right: 0;
 }
 
+.popup-menu-item button,
+.popup-menu-item a {
+  display: block;
+  width: 100%;
+  text-align: left;
+}
+
 #user-menu button {
   display: block;
   text-align: left;

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

@@ -34,4 +34,22 @@
   .creative-actions-row {
     visibility: visible !important;
   }
+
+  .creative-tree-bullet {
+    background: none;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    margin-top: 0.1em;
+  }
+
+  .creative-tree-bullet::before {
+    content: "•";
+    display: inline-block;
+    color: var(--color-text);
+    font-size: 0.9em;
+    line-height: 1;
+    width: 0.6em;
+  }
 }

data/app/channels/collavre/comments_presence_channel.rb

@@ -1,5 +1,37 @@
 module Collavre
 class CommentsPresenceChannel < ApplicationCable::Channel
+  # Broadcast status for any currently running AI agent tasks for a creative.
+  # Called when a user subscribes to ensure they see ongoing agent activity.
+  def self.broadcast_running_agents(creative_id)
+    Task.where(status: %w[running pending]).find_each do |task|
+      task_creative_id = task.trigger_event_payload&.dig("creative", "id")
+      next unless task_creative_id == creative_id
+
+      broadcast_agent_status(
+        creative_id,
+        status: "thinking",
+        agent_id: task.agent_id,
+        agent_name: task.agent.display_name,
+        task_id: task.id
+      )
+    end
+  end
+
+  # Broadcast agent status (thinking/streaming/idle) to presence channel.
+  # This allows the frontend typing indicator to show AI agent activity.
+  def self.broadcast_agent_status(creative_id, status:, agent_id:, agent_name:, task_id: nil, content: nil)
+    payload = {
+      agent_status: {
+        id: agent_id,
+        name: agent_name,
+        status: status,
+        task_id: task_id
+      }
+    }
+    payload[:agent_status][:content] = content if content.present?
+    ActionCable.server.broadcast("comments_presence:#{creative_id}", payload)
+  end
+
   def subscribed
     Rails.logger.info "User #{current_user&.email} subscribed to comments presence for creative #{params[:creative_id]}"
     return unless params[:creative_id].present? && current_user
@@ -10,6 +42,7 @@ class CommentsPresenceChannel < ApplicationCable::Channel
     CommentPresenceStore.add(@creative_id, current_user.id)
     Comment.broadcast_badge(creative, current_user)
     broadcast_presence
+    CommentsPresenceChannel.broadcast_running_agents(@creative_id)
   end
 
   def unsubscribed

data/app/components/collavre/autocomplete_popup_component.html.erb

@@ -0,0 +1,3 @@
+<div id="<%= menu_id %>" class="<%= css_classes %>" style="display:none;">
+  <ul class="<%= list_classes %>" data-popup-list></ul>
+</div>

data/app/components/collavre/autocomplete_popup_component.rb

@@ -0,0 +1,18 @@
+module Collavre
+  class AutocompletePopupComponent < ViewComponent::Base
+    def initialize(menu_id:, extra_classes: nil)
+      @menu_id = menu_id
+      @extra_classes = extra_classes
+    end
+
+    attr_reader :menu_id, :extra_classes
+
+    def css_classes
+      [ "common-popup", extra_classes ].compact.join(" ")
+    end
+
+    def list_classes
+      [ "common-popup-list", extra_classes ? "#{extra_classes.split.first}-results" : nil ].compact.join(" ")
+    end
+  end
+end

data/app/components/collavre/command_menu_component.rb

@@ -0,0 +1,7 @@
+module Collavre
+  class CommandMenuComponent < AutocompletePopupComponent
+    def initialize(menu_id: "command-menu")
+      super(menu_id: menu_id, extra_classes: nil)
+    end
+  end
+end

data/app/components/collavre/plans_timeline_component.html.erb

@@ -7,8 +7,8 @@
 <%= form_with(model: Plan.new, url: helpers.collavre.plans_path, local: true, id: 'new-plan-form') do |form| %>
     <%= form.hidden_field :creative_id, id: 'plan-creative-id' %>
     <input type="text" id="plan-select-creative-input" placeholder="<%= t('collavre.plans.select_creative', default: 'Select Creative') %>" autocomplete="off">
+    <%= form.date_field :start_date, placeholder: t('collavre.plans.start_date'), id: 'plan-start-date' %>
     <%= form.date_field :target_date, placeholder: t('collavre.plans.target_date'), id: 'plan-target-date' %>
     <%= form.submit t('collavre.plans.add_plan'), id: 'add-plan-btn', disabled: true %>
 <% end %>
 </div>
-

data/app/components/collavre/plans_timeline_component.rb

@@ -1,50 +1,47 @@
 module Collavre
 class PlansTimelineComponent < ViewComponent::Base
+  # Accepts pre-filtered plans and calendar_events from the controller
   def initialize(plans:, calendar_events: CalendarEvent.none)
     @start_date = Date.current - 30
     @end_date = Date.current + 30
     @plans = plans
-      .where("target_date >= ? AND created_at <= ?", @start_date, @end_date)
-      .select { |plan| plan.readable_by?(Current.user) }
-      .sort_by(&:created_at)
     @calendar_events = calendar_events
-      .includes(:creative)
-      .where("DATE(start_time) <= ? AND DATE(end_time) >= ?", @end_date, @start_date)
-      .order(:start_time)
   end
 
-  attr_reader :plans, :start_date, :end_date, :calendar_events
+  attr_reader :plans, :calendar_events, :start_date, :end_date
 
+  # Called after component enters render context - safe to use helpers here
   def plan_data
-    @plan_data ||= begin
-      plan_items = @plans.map do |plan|
-        {
-          id: plan.id,
-          name: (plan.creative&.effective_description(nil, false) || plan.name.presence || I18n.l(plan.target_date)),
-          created_at: plan.created_at.to_date,
-          target_date: plan.target_date,
-          progress: plan.progress,
-          path: plan_creatives_path(plan),
-          deletable: plan.owner_id == Current.user&.id
-        }
-      end
-      event_items = @calendar_events.map do |event|
-        {
-          id: "calendar_event_#{event.id}",
-          name: event.summary.presence || I18n.l(event.start_time.to_date),
-          created_at: event.start_time.to_date,
-          target_date: event.end_time.to_date,
-          progress: event.creative&.progress || 0,
-          path: event.creative ? helpers.collavre.creative_path(event.creative) : event.html_link,
-          deletable: event.user_id == Current.user&.id
-        }
-      end
-      plan_items + event_items
-    end
+    @plan_data ||= @plans.map { |plan| plan_item(plan) } + @calendar_events.map { |event| calendar_item(event) }
   end
 
   private
 
+  def plan_item(plan)
+    {
+      id: plan.id,
+      name: (plan.creative&.effective_description(nil, false) || plan.name.presence || I18n.l(plan.target_date)),
+      created_at: plan.created_at.to_date,
+      start_date: plan.start_date,
+      target_date: plan.target_date,
+      progress: plan.progress,
+      path: plan_creatives_path(plan),
+      deletable: plan.owner_id == Current.user&.id
+    }
+  end
+
+  def calendar_item(event)
+    {
+      id: "calendar_event_#{event.id}",
+      name: event.summary.presence || I18n.l(event.start_time.to_date),
+      created_at: event.start_time.to_date,
+      target_date: event.end_time.to_date,
+      progress: event.creative&.progress || 0,
+      path: event.creative ? helpers.collavre.creative_path(event.creative) : event.html_link,
+      deletable: event.user_id == Current.user&.id
+    }
+  end
+
   def plan_creatives_path(plan)
     if helpers.params[:id].present?
       helpers.collavre.creative_path(helpers.params[:id], tags: [ plan.id ])

data/app/components/collavre/user_mention_menu_component.rb

@@ -1,8 +1,7 @@
 module Collavre
-class UserMentionMenuComponent < ViewComponent::Base
-  def initialize(menu_id: "mention-menu")
-    @menu_id = menu_id
+  class UserMentionMenuComponent < AutocompletePopupComponent
+    def initialize(menu_id: "mention-menu")
+      super(menu_id: menu_id, extra_classes: "mention-popup")
+    end
   end
-  attr_reader :menu_id
-end
 end