collavre 0.1.0

data/app/services/collavre/system_events/dispatcher.rb

@@ -0,0 +1,19 @@
+module Collavre
+  module SystemEvents
+    class Dispatcher
+      def self.dispatch(event_name, context)
+        new.dispatch(event_name, context)
+      end
+
+      def dispatch(event_name, context)
+        # Build context once to ensure consistency between Router and Job
+        enriched_context = Collavre::SystemEvents::ContextBuilder.new(context).build
+        agents = Router.new.route(event_name, enriched_context)
+
+        agents.each do |agent|
+          AiAgentJob.perform_later(agent.id, event_name, enriched_context)
+        end
+      end
+    end
+  end
+end

data/app/services/collavre/system_events/router.rb

@@ -0,0 +1,72 @@
+module Collavre
+  module SystemEvents
+    class Router
+      def route(event_name, context)
+        # Build the context for Liquid
+        liquid_context = Collavre::SystemEvents::ContextBuilder.new(context).build
+        liquid_context["event_name"] = event_name
+
+        # Find all AI agents
+        agents = User.where.not(llm_vendor: nil)
+
+        matched_agents = []
+
+        agents.each do |agent|
+          next if agent.routing_expression.blank?
+
+          # Permission Check
+          # If agent is not searchable, it must have feedback permission on the creative
+          unless agent.searchable?
+            creative_id = context.dig("creative", "id") || context.dig(:creative, :id)
+            if creative_id
+              creative = Creative.find_by(id: creative_id)
+              if creative
+                # Check for feedback permission (which implies read access)
+                # has_permission? checks for the specific permission or higher
+                unless creative.has_permission?(agent, :feedback)
+                  # Rails.logger.info "Agent #{agent.id} skipped: No feedback permission on Creative #{creative.id}"
+                  next
+                end
+              else
+                # If creative ID is present but not found, skip for safety
+                next
+              end
+            else
+              # If no creative context, we might skip or allow depending on policy.
+              # Assuming 'chat.creative' implies creative context is required for this check.
+              # If it's a global event without creative, maybe searchable check isn't needed?
+              # But the user said "must have feedback permission on the chat.creative".
+              # If there is no creative, we can't check permission, so we should probably skip to be safe
+              # unless it's a purely global event. But for now, let's skip.
+              next
+            end
+          end
+
+          begin
+            # Add 'agent' to context so they can refer to themselves
+            agent_context = liquid_context.merge("agent" => agent.as_json(only: [ :id, :name, :email ]))
+
+            # Parse and evaluate the routing expression
+            # We wrap the expression in an if block to evaluate truthiness
+            expression = agent.routing_expression.strip
+            unless expression.start_with?("{%")
+              expression = "{% if #{expression} %}true{% endif %}"
+            end
+
+            template = Liquid::Template.parse(expression)
+            result = template.render(agent_context)
+
+            # Check if the result evaluates to "true" string or boolean true
+            if result.strip == "true"
+              matched_agents << agent
+            end
+          rescue StandardError => e
+            Rails.logger.error("Routing error for agent #{agent.id}: #{e.message}")
+          end
+        end
+
+        matched_agents
+      end
+    end
+  end
+end

data/app/services/collavre/tools/creative_retrieval_service.rb

@@ -0,0 +1,138 @@
+module Collavre
+require "sorbet-runtime"
+require "rails_mcp_engine"
+module Tools
+  class CreativeRetrievalService
+    extend T::Sig
+    extend ToolMeta
+
+    tool_name "creative_retrieval_service"
+    tool_description "Retrieve creatives by ID or query text. without query  or ID, it will return root creatives. Returns a list of matching creatives with their details, supporting both hierarchical tree and flat list formats.\n\nA Creative is a content block that functions like a task, organized in a tree structure similar to a to-do list. You can navigate the tree at any level as a structured document, with progress automatically calculated to show what’s been completed.\n\ne.g.\n- When user say creative or Test creative, it means \"Test\" creative and it's children as a writing page.\n- Summary of Test creative? - you need to search \"Test\" creatives with level 3 or more and find the title is \"Test\" or similar and make summary of that."
+
+    tool_param :id, description: "The ID of the creative to retrieve."
+    tool_param :query, description: "Text to search for in creative descriptions."
+    tool_param :level, description: "Creative tree depth to return (default: 3).", required: false
+    tool_param :simple, description: "If true, returns a simplified flat list. If false (default), returns a tree structure with HTML.", required: false
+
+    sig { params(id: T.nilable(Integer), query: T.nilable(String), level: T.nilable(Integer), simple: T.nilable(T::Boolean)).returns(T::Array[T::Hash[Symbol, T.untyped]]) }
+    def call(id: nil, query: nil, level: 3, simple: false)
+      level ||= 3
+      simple ||= false
+
+      # Ensure fresh permission cache for this tool execution
+      Current.creative_share_cache = nil if Current.respond_to?(:creative_share_cache=)
+
+      # Mock session and request setup
+      setup_mock_environment
+
+      controller = Collavre::CreativesController.new
+      setup_controller(controller)
+
+      if id.present?
+        # Get the creative details (show)
+        show_result = dispatch_request(controller, :show, id: id, format: :json)
+        return show_result if show_result.is_a?(Array) && show_result.first[:error]
+
+        # Get the children (index with id acts as parent filter)
+        index_result = dispatch_request(controller, :index, id: id, search: query, simple: simple, level: level, format: :json)
+        return index_result if index_result.is_a?(Array) && index_result.first[:error]
+
+        # Combine results
+        # show_result is expected to be a hash of the creative
+        # index_result is expected to be a list of children or simple list
+
+        # Parse show result
+        creative_details = JSON.parse(show_result[:body], symbolize_names: true)
+
+        # Parse index result
+        children_data = JSON.parse(index_result[:body], symbolize_names: true)
+        filtered_children = filter_result(children_data)
+
+        # Merge
+        # We construct a tree node for the parent, with the children attached
+        parent_node = filter_tree([ creative_details ]).first
+        parent_node[:children] = filtered_children
+
+        [ parent_node ]
+      else
+        # Normal index call
+        result = dispatch_request(controller, :index, search: query, simple: simple, level: level, format: :json)
+
+        if result[:status] == 200
+           parsed = JSON.parse(result[:body], symbolize_names: true)
+           filter_result(parsed)
+        else
+           [ { error: "Controller returned status #{result[:status]}", body: result[:body] } ]
+        end
+      end
+    end
+
+    private
+
+    def setup_mock_environment
+      raise "Current.user is required" unless Current.user
+      unless Current.session
+        require "ostruct"
+        Current.session = OpenStruct.new(user: Current.user, persisted?: false)
+      end
+    end
+
+    def setup_controller(controller)
+      # Stub cookies
+      controller.define_singleton_method(:cookies) do
+        @mock_cookies ||= begin
+          jar = OpenStruct.new
+          def jar.signed; self; end
+          def jar.encrypted; self; end
+          def jar.[](key); nil; end
+          def jar.delete(key); nil; end
+          jar
+        end
+      end
+    end
+
+    def dispatch_request(controller, action, params)
+      env = Rack::MockRequest.env_for(
+        "/creatives",
+        method: "GET",
+        params: params.compact,
+        "HTTP_X_ORIGIN_SECRET" => ENV["ORIGIN_SHARED_SECRET"] # Internal call
+      )
+      controller.request = ActionDispatch::Request.new(env)
+      controller.response = ActionDispatch::Response.new
+      controller.process(action)
+
+      { status: controller.response.status, body: controller.response.body }
+    end
+
+    def filter_result(result)
+      if result.is_a?(Array)
+        # Simple mode
+        result.map { |item| item.slice(:id, :description, :progress) }
+      elsif result.is_a?(Hash) && result[:creatives].is_a?(Array)
+        # Normal mode (Tree)
+        filter_tree(result[:creatives])
+      else
+        []
+      end
+    end
+
+    def filter_tree(nodes)
+      nodes.map do |node|
+        description = if node.dig(:templates, :description_html)
+          Rails::Html::FullSanitizer.new.sanitize(node.dig(:templates, :description_html))
+        else
+          node[:description]
+        end
+
+        {
+          id: node[:id],
+          description: description&.strip,
+          progress: node.dig(:inline_editor_payload, :progress) || node[:progress],
+          children: node.dig(:children_container, :nodes) ? filter_tree(node.dig(:children_container, :nodes)) : []
+        }
+      end
+    end
+  end
+end
+end

data/app/views/admin/shared/_tabs.html.erb

@@ -0,0 +1,4 @@
+<div class="tab-list">
+  <%= link_to t('admin.tabs.system'), main_app.admin_path, class: "tab-button #{'active' if controller_name == 'settings'}" %>
+  <%= link_to t('admin.tabs.users'), collavre.users_path, class: "tab-button #{'active' if controller_name == 'users'}" %>
+</div>

data/app/views/collavre/comments/_activity_log_details.html.erb

@@ -0,0 +1,23 @@
+<%= turbo_frame_tag "activity_log_details_#{comment.id}" do %>
+  <% if activity_logs.any? %>
+    <div class="activity-log-list">
+      <% activity_logs.each do |log| %>
+        <div class="activity-log-item">
+          <details>
+            <summary class="activity-log-summary">
+              <span class="activity-name"><%= log.activity %></span>
+              <span class="activity-time"><%= time_ago_in_words(log.created_at) %> ago</span>
+            </summary>
+            <div class="activity-log-body">
+              <pre class="activity-log-yaml"><code><%= log.log.to_yaml.sub(/^---\n/, '') %></code></pre>
+            </div>
+          </details>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="activity-log-empty">
+      No activity logs available.
+    </div>
+  <% end %>
+<% end %>

data/app/views/collavre/comments/_comment.html.erb

@@ -0,0 +1,147 @@
+<% comment_topic = comment.topic %>
+<% current_topic_id = local_assigns[:current_topic_id] %>
+<div class="comment-item" id="<%= dom_id(comment) %>" data-controller="comment" data-user-id="<%= comment.user&.id %>" data-comment-id="<%= comment.id %>" data-topic-id="<%= comment_topic&.id %>" data-creative-id="<%= comment.creative_id %>">
+  <div class="comment-select">
+    <input type="checkbox"
+           class="comment-select-checkbox"
+           value="<%= comment.id %>"
+           aria-label="<%= t('collavre.comments.select_label') %>" />
+  </div>
+  <div>
+    <%= render AvatarComponent.new(user: comment.user, size: 20, classes: 'avatar comment-avatar') %>
+    <% system_prefix = "#{t('collavre.comments.system_user')}:" %>
+    <% display_name =
+         if comment.user.present?
+           comment.user.display_name
+         elsif comment.content.to_s.strip.start_with?(system_prefix)
+           t('collavre.comments.system_user')
+         else
+           t('collavre.comments.gemini')
+         end %>
+    <% timestamp = comment.created_at.in_time_zone %>
+    <strong><%= display_name %></strong>
+    <span>
+      · <%= content_tag(
+        :time,
+        t('datetime.ago', time: time_ago_in_words(timestamp)),
+        title: l(timestamp, format: :chat_timestamp),
+        datetime: timestamp.iso8601
+      ) %>
+    </span>
+    <span id="read_receipts_comment_<%= comment.id %>" class="read-receipt-wrapper">
+      <% users_read = defined?(read_by_users) ? read_by_users : (defined?(read_receipts) ? read_receipts[comment.id] : nil) %>
+      <% present_user_ids = defined?(present_user_ids) ? present_user_ids : nil %>
+      <%= render "collavre/comments/read_receipts", read_by_users: users_read, present_user_ids: present_user_ids unless comment.private? %>
+    </span>
+    <% if comment.private? %>
+      <span class="private-label">[<%= t('collavre.comments.private') %>]</span>
+    <% end %>
+    <% if comment.action_executed_at.present? %>
+      <span class="comment-status-label approved-label">[<%= t('collavre.comments.approved_label') %>]</span>
+    <% end %>
+    <% can_convert_comment = comment.user == Current.user || comment.creative.has_permission?(Current.user, :admin) %>
+  </div>
+    <div class="comment-action-container">
+      <button class="add-reaction-btn" type="button" data-action="click->comment#triggerReactionPicker" title="<%= t('collavre.comments.add_reaction') %>">
+        <span class="grayscale-emoji">☺</span>
+      </button>
+
+      <button class="<%= ['convert-comment-btn', ('comment-owner-only' unless can_convert_comment)].compact.join(' ') %>" data-comment-target="ownerButton" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.convert_to_creative') %>">
+        <%= t('collavre.comments.convert_button') %>
+      </button>
+      <% can_approve = comment.approval_status(Current.user) == :ok %>
+      <% if can_approve %>
+        <button class="approve-comment-btn" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.approve_button') %>">
+          <%= t('collavre.comments.approve_button') %>
+        </button>
+      <% end %>
+      <button class="edit-comment-btn comment-owner-only" data-comment-target="ownerButton" data-comment-id="<%= comment.id %>" data-comment-content="<%= comment.content %>" data-comment-private="<%= comment.private? %>" title="<%= t('collavre.comments.update_comment') %>">
+        <%= t('collavre.comments.edit_button') %>
+      </button>
+      <button class="copy-comment-link-btn" data-comment-id="<%= comment.id %>" data-comment-url="<%= collavre.creative_comment_url(comment.creative, comment, Rails.application.config.action_mailer.default_url_options) %>" title="<%= t('collavre.comments.copy_link_button') %>">
+        <%= t('collavre.comments.copy_link_button') %>
+      </button>
+      <% can_delete = comment.user == Current.user || comment.creative.user == Current.user || comment.creative.has_permission?(Current.user, :admin) %>
+      <% if can_delete %>
+        <button class="delete-comment-btn" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.delete') %>">
+          <%= t('collavre.comments.delete_button') %>
+        </button>
+      <% end %>
+    </div>
+  <div class="comment-content"><%= comment.content %></div>
+
+
+  <% if comment.images.attached? %>
+    <div class="comment-attachments">
+      <% comment.images.each do |image| %>
+        <% preview_image = image.variable? ? image.variant(resize_to_limit: [ 800, 800 ]) : image %>
+        <% preview_image_path =
+             if preview_image.respond_to?(:processed)
+               main_app.rails_representation_path(preview_image, only_path: true)
+             else
+               main_app.rails_blob_path(preview_image, only_path: true)
+             end %>
+        <%= link_to main_app.rails_blob_path(image, only_path: true), target: '_blank', rel: 'noopener', class: 'comment-attachment-link' do %>
+          <%= image_tag preview_image_path, class: 'comment-attachment-image', alt: '', loading: 'lazy' %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+  <% reaction_emojis = [ "👍", "🎉", "❤️", "😂", "😮", "😢", "😡" ] %>
+  <% reactions = comment.comment_reactions.to_a %>
+  <% reaction_groups = reactions.group_by(&:emoji) %>
+  <% current_user_id = Current.user&.id %>
+  <% reacted_emojis = reactions.filter { |reaction| reaction.user_id == current_user_id }.map(&:emoji).to_set %>
+  <% if reaction_groups.any? %>
+    <div class="comment-reactions">
+      <div class="comment-reaction-list">
+        <% reaction_groups.sort_by { |emoji, _| emoji }.each do |emoji, grouped| %>
+          <% count = grouped.size %>
+          <% count_class = count > 1 ? "comment-reaction-count is-visible" : "comment-reaction-count" %>
+          <button class="comment-reaction <%= 'reacted' if reacted_emojis.include?(emoji) %>" type="button" data-action="click->comment#toggleReaction" data-emoji="<%= emoji %>" data-reacted="<%= reacted_emojis.include?(emoji) %>">
+            <span class="comment-reaction-emoji"><%= emoji %></span>
+            <span class="<%= count_class %>"><%= count %></span>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <% if comment_topic.present? && current_topic_id.blank? %>
+    <div class="comment-topic-link">
+      <a href="#" class="comment-topic-switch" data-topic-id="<%= comment_topic.id %>">#<%= comment_topic.name %></a>
+    </div>
+  <% end %>
+  <% if comment.action.present? %>
+    <div class="comment-action-block" data-comment-id="<%= comment.id %>">
+      <details class="comment-action-details">
+        <summary class="comment-action-summary"><%= t("collavre.comments.action_summary") %></summary>
+        <div class="comment-action-body">
+          <pre class="comment-action-json" data-comment-action-json><%= formatted_comment_action(comment) %></pre>
+          <% if can_approve && comment.action_executed_at.blank? %>
+            <button class="edit-comment-action-btn" type="button" data-comment-id="<%= comment.id %>"><%= t("collavre.comments.edit_action_button") %></button>
+            <form class="comment-action-edit-form" data-comment-id="<%= comment.id %>" style="display:none;">
+              <textarea class="comment-action-edit-textarea" name="comment[action]" rows="8"><%= formatted_comment_action(comment) %></textarea>
+              <div class="comment-action-edit-buttons">
+                <button class="cancel-comment-action-edit-btn" type="button"><%= t("app.cancel") %></button>
+                <button class="save-comment-action-btn" type="submit"><%= t("app.save") %></button>
+              </div>
+            </form>
+          <% end %>
+        </div>
+      </details>
+    </div>
+  <% end %>
+  <% if comment.activity_logs.exists? %>
+    <div class="comment-activity-log-block">
+      <details>
+        <summary><%= t("collavre.comments.activity_logs_summary") %></summary>
+        <%= turbo_frame_tag "activity_log_details_#{comment.id}", src: collavre.creative_comment_activity_log_path(comment.creative, comment), loading: "lazy" do %>
+          Loading...
+        <% end %>
+      </details>
+    </div>
+  <% end %>
+
+
+</div>

data/app/views/collavre/comments/_comments_popup.html.erb

@@ -0,0 +1,46 @@
+
+<div id="comments-popup" data-controller="comments--popup comments--list comments--form comments--presence comments--mention-menu comments--topics" class="popup-box"
+     data-loading-text="<%= t('app.loading') %>"
+     data-delete-confirm-text="<%= t("collavre.comments.delete_confirm") %>"
+     data-update-comment-text="<%= t('collavre.comments.update_comment') %>"
+     data-convert-confirm-text="<%= t('collavre.comments.convert_confirm') %>"
+     data-copy-link-success-text="<%= t('collavre.comments.copy_link_success') %>"
+     data-copy-link-error-text="<%= t('collavre.comments.copy_link_error') %>"
+     data-approve-success-text="<%= t('collavre.comments.approve_success') %>"
+     data-approve-error-text="<%= t('collavre.comments.approve_error') %>"
+     data-action-update-success-text="<%= t('collavre.comments.action_update_success') %>"
+     data-action-update-error-text="<%= t('collavre.comments.action_update_error') %>"
+     data-search-empty-text="<%= t('collavre.comments.search_empty_prompt') %>"
+     data-speech-unavailable-text="<%= t('collavre.comments.speech_unavailable') %>"
+     data-voice-start-text="<%= t('collavre.comments.voice_button') %>"
+     data-voice-stop-text="<%= t('collavre.comments.voice_stop') %>"
+     data-move-no-selection-text="<%= t('collavre.comments.move_no_selection') %>"
+     data-move-error-text="<%= t('collavre.comments.move_error') %>">
+  <div class="resize-handle resize-handle-left" data-comments--popup-target="leftHandle"></div>
+  <div class="resize-handle resize-handle-right" data-comments--popup-target="rightHandle"></div>
+  <button id="close-comments-btn" data-comments--popup-target="closeButton" class="popup-close-btn">&times;</button>
+  <h3 id="comments-popup-title" data-comments--popup-target="title"><%= t('collavre.comments.comments') %></h3>
+  <div id="comment-participants" data-comments--presence-target="participants" data-comments--mention-menu-target="participants"></div>
+  <div id="comment-topics" data-comments--topics-target="list" class="comment-topics-list"
+       data-confirm-delete-text="<%= t('collavre.topics.delete_confirm') %>"
+       data-new-topic-placeholder="<%= t('collavre.topics.new_placeholder') %>"></div>
+  <%= render UserMentionMenuComponent.new(menu_id: 'mention-menu') %>
+  <div id="comments-list" data-comments--popup-target="list" data-comments--list-target="list"><%= t('app.loading') %></div>
+  <div id="typing-indicator" data-comments--presence-target="typingIndicator"></div>
+  <form id="new-comment-form" data-comments--popup-target="form" data-comments--form-target="form" style="display:none;">
+    <textarea class="shared-input-surface" name="comment[content]" data-comments--form-target="textarea" data-comments--presence-target="textarea" data-comments--mention-menu-target="textarea" rows="2" enterkeyhint="send"></textarea>
+    <div class="comment-bottom">
+    <input type="file" id="comment-images" name="comment[images][]" accept="image/*" multiple data-comments--form-target="imageInput" style="display:none;" />
+    <label style="height: 22px"><input type="checkbox" id="comment-private" data-comments--form-target="privateCheckbox" data-comments--presence-target="privateCheckbox" name="comment[private]" /> <%= t('collavre.comments.private') %></label>
+    <div class="comment-actions">
+    <button class="creative-action-btn" id="attach-image-btn" data-comments--form-target="imageButton" type="button"><%= t('collavre.comments.image_button') %></button>
+    <button class="creative-action-btn" id="voice-comments-btn" data-comments--form-target="voiceButton" type="button" data-voice-state="idle"><%= t('collavre.comments.voice_button') %></button>
+    <button class="creative-action-btn" id="search-comments-btn" data-comments--form-target="searchButton" type="button"><%= t('collavre.comments.search_button') %></button>
+    <button class="creative-action-btn" id="move-comments-btn" data-comments--form-target="moveButton" type="button" disabled><%= t('collavre.comments.move_button') %></button>
+    <button class="creative-action-btn" id="cancel-edit-btn" data-comments--form-target="cancel" type="button" style="display:none;"><%= t('app.cancel') %></button>
+    <button class="creative-action-btn" type="submit" data-comments--form-target="submit"><%= svg_tag 'send.svg', class: 'send-icon' %></button>
+    </div>
+    <div class="comment-attachment-list" data-comments--form-target="attachmentList" aria-live="polite"></div>
+    </div>
+  </form>
+</div>

data/app/views/collavre/comments/_list.html.erb

@@ -0,0 +1,10 @@
+<%= turbo_stream_from [creative, :comments] %>
+<% if comments.any? %>
+  <% current_topic_id = local_assigns[:current_topic_id] %>
+  <% comments.each do |comment| %>
+    <%= render partial: 'collavre/comments/comment', locals: { comment: comment, read_by_users: read_receipts&.[](comment.id), present_user_ids: present_user_ids, current_topic_id: current_topic_id } %>
+  <% end %>
+<% else %>
+  <div id="no-comments"><%= t('collavre.comments.no_comments') %></div>
+<% end %>
+

data/app/views/collavre/comments/_presence_avatars.html.erb

@@ -0,0 +1,8 @@
+<div id="comment-participants">
+  <% accessible_users = [creative.user].compact + creative.all_shared_users(:feedback).map(&:user) %>
+  <% accessible_users.uniq.each do |u| %>
+    <% classes = 'avatar comment-presence-avatar' %>
+    <% classes += ' inactive' unless present_ids.include?(u.id) %>
+    <%= render AvatarComponent.new(user: u, size: 20, classes: classes, data: { email: u.email }) %>
+  <% end %>
+</div>

data/app/views/collavre/comments/_reaction_picker.html.erb

@@ -0,0 +1,15 @@
+<div id="global-reaction-picker" 
+     class="comment-reaction-picker" 
+     hidden 
+     data-controller="reaction-picker"
+     data-action="click@window->reaction-picker#handleClickOutside"
+     style="position: fixed; z-index: 9999;">
+  <% ["👍", "🎉", "❤️", "😂", "😮", "😢", "😡", "✅", "👌", "👀"].each do |emoji| %>
+    <button class="comment-reaction-picker-emoji" 
+            type="button" 
+            data-action="click->reaction-picker#select" 
+            data-emoji="<%= emoji %>">
+      <%= emoji %>
+    </button>
+  <% end %>
+</div>

data/app/views/collavre/comments/_read_receipts.html.erb

@@ -0,0 +1,19 @@
+<% if defined?(read_by_users) && read_by_users.present? %>
+  <div class="read-receipt-container">
+    <div class="read-receipt-avatars">
+      <% read_by_users.each do |user| %>
+        <% present_ids = defined?(present_user_ids) ? present_user_ids : nil %>
+        <% classes = ['avatar', 'comment-presence-avatar'] %>
+        <% classes << 'inactive' if present_ids && !present_ids.include?(user.id) %>
+        <div class="read-receipt-avatar" title="<%= t('collavre.comments.read_by', name: user.display_name) %>">
+          <%= render AvatarComponent.new(
+                user: user,
+                size: 16,
+                classes: classes.join(' '),
+                data: { user_id: user.id }
+              ) %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/collavre/creatives/_add_button.html.erb

@@ -0,0 +1,20 @@
+<% if @parent_creative %>
+  <%= button_tag(
+        type: 'button',
+        class: 'popup-menu-item add-creative-btn',
+        data: { parent_id: @parent_creative.id },
+        aria: { label: t('collavre.creatives.index.new_creative') },
+        title: t('collavre.creatives.index.new_creative_shortcut')
+      ) do %>
+    <span aria-hidden="true"><%= svg_tag 'add.svg', class: 'icon-add', width: 16, height: 16 %></span>
+  <% end %>
+<% else %>
+  <%= button_tag(
+        type: 'button',
+        class: 'popup-menu-item new-root-creative-btn',
+        aria: { label: t('collavre.creatives.index.new_creative') },
+        title: t('collavre.creatives.index.new_creative_shortcut')
+      ) do %>
+    <span aria-hidden="true"><%= svg_tag 'add.svg', class: 'icon-add', width: 16, height: 16 %></span>
+  <% end %>
+<% end %>

data/app/views/collavre/creatives/_delete_button.html.erb

@@ -0,0 +1,12 @@
+<%= render PopupMenuComponent.new(
+      button_content: t('collavre.creatives.index.delete'),
+      button_classes: ["danger-link", local_assigns[:extra_button_classes]].compact.join(" "),
+      menu_id: 'delete-options-popup-' + [local_assigns[:extra_button_classes]].compact.join('-')) do %>
+  <%= button_to t('collavre.creatives.index.delete_only_this'), @parent_creative, method: :delete,
+      form: { data: { turbo_confirm: t('collavre.creatives.index.are_you_sure_delete_only_this') } },
+      params: {}, class: 'danger-link popup-menu-item' %>
+  <%= button_to t('collavre.creatives.index.delete_with_children'), @parent_creative, method: :delete,
+      params: { delete_with_children: true },
+      form: { data: { turbo_confirm: t('collavre.creatives.index.are_you_sure_delete_with_children') } },
+      class: 'danger-link' %>
+<% end %>

data/app/views/collavre/creatives/_github_integration_modal.html.erb

@@ -0,0 +1,77 @@
+<div id="github-integration-modal"
+     data-success-message="<%= t('collavre.creatives.index.github_integration_saved', default: 'Github integration saved successfully.') %>"
+     data-login-required="<%= t('collavre.creatives.index.github_integration_login_required', default: 'Sign in with your Github account to start the integration.') %>"
+     data-no-creative="<%= t('collavre.creatives.index.github_integration_missing_creative', default: 'No Creative selected for integration.') %>"
+     data-webhook-url-label="<%= t('collavre.creatives.index.github_integration_webhook_url_label', default: 'Webhook URL') %>"
+     data-webhook-secret-label="<%= t('collavre.creatives.index.github_integration_webhook_secret_label', default: 'Webhook secret') %>"
+     data-existing-message="<%= t('collavre.creatives.index.github_integration_existing_message', default: 'You\'re already connected to the repositories below.') %>"
+     data-delete-confirm="<%= t('collavre.creatives.index.github_integration_delete_confirm', default: 'Do you want to remove the Github integration?') %>"
+     data-delete-success="<%= t('collavre.creatives.index.github_integration_delete_success', default: 'Github integration removed successfully.') %>"
+     data-delete-error="<%= t('collavre.creatives.index.github_integration_delete_error', default: 'Failed to remove the Github integration.') %>"
+     data-delete-button-label="<%= t('collavre.creatives.index.github_integration_delete_button', default: 'Remove integration') %>"
+     data-delete-select-warning="<%= t('collavre.creatives.index.github_integration_delete_select_warning', default: '삭제할 Repository를 선택하세요.') %>"
+     style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
+  <div class="popup-box" style="min-width:360px;max-width:90vw;">
+    <button type="button" id="close-github-modal" class="popup-close-btn">&times;</button>
+    <h2><%= t('collavre.creatives.index.github_integration_title', default: 'Configure Github integration') %></h2>
+    <p id="github-integration-status" class="github-modal-status"></p>
+
+    <div class="github-wizard-step" id="github-step-connect">
+      <p id="github-connect-message" class="github-modal-subtext"><%= t('collavre.creatives.index.github_integration_connect', default: 'Sign in with your Github account to start linking.') %></p>
+      <form id="github-login-form" action="/auth/github" method="post" target="github-auth-window" style="display:none;">
+        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+      </form>
+      <button type="button" id="github-login-btn" class="btn btn-primary" data-window-width="620" data-window-height="720">
+        <%= t('collavre.creatives.index.github_login_button', default: 'Sign in with Github') %>
+      </button>
+      <div id="github-existing-connections" style="display:none;margin-top:1.25em;">
+        <p style="margin-bottom:0.5em;"><%= t('collavre.creatives.index.github_integration_existing_intro', default: '이미 연동된 Repository 목록입니다:') %></p>
+        <ul id="github-existing-repo-list" style="padding-left:1.2em;margin-bottom:0.75em;color:var(--color-text);"></ul>
+        <button type="button" id="github-delete-btn" class="btn btn-danger" style="display:none;">
+          <%= t('collavre.creatives.index.github_integration_delete_button', default: '연동 삭제') %>
+        </button>
+      </div>
+    </div>
+
+    <div class="github-wizard-step" id="github-step-organization" style="display:none;">
+      <p class="github-modal-subtext"><%= t('collavre.creatives.index.github_integration_choose_org', default: 'Select the organization that owns the repositories.') %></p>
+      <div id="github-organization-list" class="github-list github-modal-list-box" style="max-height:200px;overflow:auto;"></div>
+    </div>
+
+    <div class="github-wizard-step" id="github-step-repositories" style="display:none;">
+      <p class="github-modal-subtext"><%= t('collavre.creatives.index.github_integration_choose_repo', default: 'Select repositories to link. You can choose multiple.') %></p>
+      <div id="github-repository-list" class="github-list github-modal-list-box" style="max-height:240px;overflow:auto;"></div>
+    </div>
+
+    <div class="github-wizard-step" id="github-step-summary" style="display:none;">
+      <p class="github-modal-subtext"><%= t('collavre.creatives.index.github_integration_summary', default: 'The following repositories will be linked to this Creative:') %></p>
+      <p id="github-webhook-instructions" class="github-modal-subtext" style="display:none;margin-bottom:0.5em;"><%= t('collavre.creatives.index.github_integration_webhook_instructions', default: 'Configure each repository with the webhook details below.') %></p>
+      <ul id="github-selected-repos" style="padding-left:1.2em;color:var(--color-text);"></ul>
+      <p id="github-summary-empty" class="github-modal-empty" style="display:none;"><%= t('collavre.creatives.index.github_integration_summary_empty', default: 'No repositories selected.') %></p>
+    </div>
+
+    <div class="github-wizard-step" id="github-step-prompt" style="display:none;">
+      <p class="github-modal-subtext"><%= t('collavre.creatives.index.github_integration_prompt_title', default: 'Review the Gemini analysis prompt and edit it if needed.') %></p>
+      <textarea id="github-gemini-prompt" style="width:100%;min-height:220px;padding:0.75em;border:1px solid var(--color-border);border-radius:4px;font-family:monospace;font-size:0.95em;"></textarea>
+      <p class="github-modal-subtext" style="margin-top:0.75em;font-size:0.9em;">
+        <%= t('collavre.creatives.index.github_integration_prompt_help', default: 'Use the placeholders below to inject runtime details as needed:') %>
+        <code>#{pr_title}</code>,
+        <code>#{pr_body}</code>,
+        <code>#{commit_messages}</code>,
+        <code>#{diff}</code>,
+        <code>#{creative_tree}</code>,
+        <code>#{language_instructions}</code>
+      </p>
+    </div>
+
+    <div id="github-wizard-error" style="display:none;margin:0.5em 0;color:#c0392b;font-weight:bold;"></div>
+
+    <div class="github-wizard-footer" style="display:flex;justify-content:space-between;gap:0.5em;margin-top:1.5em;">
+      <button type="button" id="github-prev-btn" class="btn btn-secondary" style="display:none;"><%= t('app.previous', default: 'Previous') %></button>
+      <div style="margin-left:auto;display:flex;gap:0.5em;">
+        <button type="button" id="github-next-btn" class="btn btn-primary" style="display:none;"><%= t('app.next', default: 'Next') %></button>
+        <button type="button" id="github-finish-btn" class="btn btn-primary" style="display:none;"><%= t('app.finish', default: 'Finish') %></button>
+      </div>
+    </div>
+  </div>
+</div>