collavre 0.22.0 → 0.23.0

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

@@ -328,6 +328,13 @@ body.chat-fullscreen {
     margin-top: 0.2em;
 }
 
+.comment-content img,
+.comment-content video {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-2);
+}
+
 .comment-content pre {
     white-space: pre-wrap;
     word-break: break-word;
@@ -360,67 +367,8 @@ body.chat-fullscreen {
     margin: 0;
 }
 
-/* Table styling */
-.comment-content table {
-    border-collapse: collapse;
-    width: 100%;
-    font-size: 0.85em;
-    margin: 0;
-}
-
-.comment-content table th,
-.comment-content table td {
-    border: 1px solid var(--color-border);
-    padding: 0.3em 0.6em;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.comment-content table th {
-    background: var(--color-section-bg);
-    font-weight: 600;
-}
-
-.comment-content table tr:hover td {
-    background: color-mix(in srgb, var(--color-section-bg) 40%, transparent);
-}
-
-/* Table download wrapper */
-.table-download-wrapper {
-    position: relative;
-    overflow-x: auto;
-    margin: 0.4em 0;
-}
-
-.table-download-toolbar {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.3em;
-    padding: 0.15em 0;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-}
-
-.table-download-wrapper:hover .table-download-toolbar {
-    opacity: 1;
-}
-
-.table-download-btn {
-    background: none;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-2);
-    color: var(--color-muted);
-    font-size: 0.75em;
-    padding: 0.15em 0.5em;
-    cursor: pointer;
-    line-height: 1.4;
-    transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.table-download-btn:hover {
-    color: var(--color-active);
-    border-color: var(--color-active);
-}
+/* Table + download-toolbar styling moved to collavre/tables.css (shared with
+   creative description tables). Load 'collavre/tables' alongside this file. */
 
 /* Quote indicator in form */
 .comment-quote-indicator {
@@ -1989,3 +1937,112 @@ body.chat-fullscreen {
 li:hover .topic-create-option {
     text-decoration: underline;
 }
+
+/* ── Inline typo correction (volatile overlay; never serialized) ───────────── */
+/* The backdrop mirrors the textarea text exactly and paints <mark> spans over
+   it. The backdrop sits ON TOP of the textarea (higher z-index) but is
+   pointer-events:none, so clicks pass through to the textarea everywhere EXCEPT
+   over a <mark> (pointer-events:auto) — that's what makes the marks clickable.
+   If the textarea were on top, the browser would hit-test it first and the mark
+   click handlers would never fire. The backdrop's text is transparent, so the
+   textarea's real (opaque) glyphs show through and only the underlines paint. */
+.typo-input-wrap {
+    position: relative;
+    display: block;
+}
+
+.typo-input-wrap > textarea {
+    position: relative;
+    background: transparent;
+    z-index: 0;
+}
+
+.typo-backdrop {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.typo-highlights {
+    margin: 0;
+    color: transparent;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Two states, distinguished by BOTH shape and colour (colour-blind safe). */
+.typo-mark {
+    background: transparent;
+    color: transparent;
+    pointer-events: auto;
+    cursor: pointer;
+    border-radius: 2px;
+}
+
+/* Auto-applied (>= threshold): faint straight underline — resolved, dim. */
+.typo-mark-applied {
+    text-decoration: underline solid var(--color-link);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    opacity: 0.55;
+}
+
+/* Candidate (< threshold): wavy dotted amber underline — needs a decision. */
+.typo-mark-candidate {
+    text-decoration: underline wavy var(--color-warning);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+}
+
+/* Creatable combobox reusing CommonPopup positioning. */
+.typo-popup {
+    position: absolute;
+    z-index: 100000;
+    min-width: 180px;
+    max-width: 320px;
+    background: var(--surface-section);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+    padding: 6px;
+}
+
+.typo-popup-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font: inherit;
+    margin-bottom: 6px;
+}
+
+.typo-popup-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.typo-popup-list .common-popup-item {
+    padding: 6px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.typo-popup-list .common-popup-item.active,
+.typo-popup-list .common-popup-item:hover {
+    background: var(--surface-hover);
+}
+
+.typo-popup-role {
+    color: var(--text-muted);
+    font-size: 0.85em;
+}

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

@@ -257,14 +257,23 @@ creative-tree-row.show-edit .creative-row {
     word-break: break-word;
 }
 
-/* Allow attachments and images to be clickable independently of the parent link */
+/* Allow attachments, images, and videos to be interactive independently of the
+   parent link. Without pointer-events on the video, the clickable creative row
+   would swallow clicks on the native playback controls (play/pause/fullscreen). */
 .creative-content a[download],
-.creative-content img {
+.creative-content img,
+.creative-content video {
     pointer-events: auto;
     position: relative;
     z-index: var(--layer-1);
 }
 
+.creative-content video {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-2);
+}
+
 .creative-row:hover .creative-content {
     cursor: pointer;
 }

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

@@ -32,6 +32,17 @@
   to   { opacity: 1; }
 }
 
+/* Top-layer dialogs (alert/confirm/prompt rendered as <dialog>.showModal())
+ * use the native ::backdrop instead of the .modal-dialog-overlay div, so the
+ * backdrop covers everything below — including other top-layer surfaces such
+ * as the image lightbox. Only matches real <dialog> elements; the <div>
+ * consumers of .modal-dialog never get a ::backdrop. */
+dialog.modal-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
 /* ── Panel ── */
 .modal-dialog {
   display: none;
@@ -180,6 +191,27 @@ textarea.modal-dialog-input {
   opacity: 0.9;
 }
 
+/* Destructive confirm action (delete/unlink). Matches .btn-danger convention. */
+.modal-dialog-btn-danger {
+  background: var(--color-danger);
+  color: var(--text-on-badge);
+  border-color: var(--color-danger);
+}
+
+.modal-dialog-btn-danger:hover {
+  opacity: 0.9;
+}
+
+/* ── Confirm dialog message ──
+ * pre-wrap preserves the \n line breaks that native confirm() honored. */
+.confirm-dialog-message {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  color: var(--text-primary);
+  font-size: var(--text-1);
+  line-height: var(--leading-3, 1.5);
+}
+
 /* ── Footer hints (keyboard shortcuts) ── */
 .modal-dialog-hints {
   display: flex;

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

@@ -0,0 +1,91 @@
+/*
+ * Shared markdown table styling + CSV/Excel download toolbar.
+ *
+ * Single source of truth so chat-message tables (.comment-content) and creative
+ * description tables (.creative-content / .creative-title-content) render
+ * identically and both expose the same top-right download buttons. The download
+ * toolbar markup is produced by lib/utils/table_download.js.
+ *
+ * Load this wherever either context renders: the creatives index, the slide
+ * layout, and any page that shows the comments popup.
+ */
+
+/* Table styling */
+.comment-content table,
+.creative-content table,
+.creative-title-content table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.85em;
+    margin: 0;
+    /* Override legacy actiontext.css fixed layout so creative tables expand to
+       content and horizontally scroll like chat tables (tables.css loads after
+       actiontext.css; same specificity, so it must restate this property). */
+    table-layout: auto;
+}
+
+.comment-content table th,
+.comment-content table td,
+.creative-content table th,
+.creative-content table td,
+.creative-title-content table th,
+.creative-title-content table td {
+    border: 1px solid var(--color-border);
+    padding: 0.3em 0.6em;
+    text-align: left;
+    white-space: nowrap;
+    /* Clear actiontext.css cell floors so creative cells size to content like
+       chat cells instead of forcing a min width / breaking long words. */
+    min-width: 0;
+    word-break: normal;
+}
+
+.comment-content table th,
+.creative-content table th,
+.creative-title-content table th {
+    background: var(--color-section-bg);
+    font-weight: 600;
+}
+
+.comment-content table tr:hover td,
+.creative-content table tr:hover td,
+.creative-title-content table tr:hover td {
+    background: color-mix(in srgb, var(--color-section-bg) 40%, transparent);
+}
+
+/* Table download wrapper */
+.table-download-wrapper {
+    position: relative;
+    overflow-x: auto;
+    margin: 0.4em 0;
+}
+
+.table-download-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.3em;
+    padding: 0.15em 0;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.table-download-wrapper:hover .table-download-toolbar {
+    opacity: 1;
+}
+
+.table-download-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-2);
+    color: var(--color-muted);
+    font-size: 0.75em;
+    padding: 0.15em 0.5em;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.table-download-btn:hover {
+    color: var(--color-active);
+    border-color: var(--color-active);
+}

data/app/channels/collavre/inbox_badge_channel.rb

@@ -0,0 +1,30 @@
+module Collavre
+  # Keeps the global inbox badge in sync without a full page reload.
+  #
+  # The badge is updated in real time by fire-and-forget Turbo Stream
+  # broadcasts on the ["inbox", user] stream (see Comment::Broadcastable).
+  # ActionCable does not replay messages missed while a socket is down, so any
+  # badge update broadcast during a WebSocket gap (Turbo navigation, sleep/wake,
+  # network blip, server restart, the window before the cable connects) was lost
+  # until the next full page render — the "badge only shows up after refresh" bug.
+  #
+  # This channel closes that gap with the established pull-on-subscribe pattern:
+  # ActionCable re-runs #subscribed on every (re)connect, so we re-push the
+  # authoritative count each time. No client polling, no time window — the server
+  # self-heals the count on reconnect.
+  class InboxBadgeChannel < ApplicationCable::Channel
+    def subscribed
+      return reject unless current_user
+
+      # Deliver the snapshot through THIS subscription (transmit), not by
+      # re-broadcasting to the sibling ["inbox", user] Turbo stream. On reconnect
+      # the two subscriptions re-attach independently, so a broadcast from here
+      # could fire before that stream re-attaches and be dropped — leaving the
+      # badge stale. transmit only reaches this just-confirmed subscriber, so the
+      # snapshot can never be sent while no client is listening.
+      inbox = Creative.inbox_for(current_user)
+      snapshot = Comment.inbox_badge_turbo_stream(inbox, current_user)
+      transmit(snapshot) if snapshot
+    end
+  end
+end

data/app/controllers/collavre/api/v1/mobile/agent_events_controller.rb

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+module Collavre
+  module Api
+    module V1
+      module Mobile
+        # The heart of the loop. GET surfaces pending approvals (+ recent agent
+        # replies) with a stable spoken ref number and a decision-ready summary.
+        # POST :id/respond branches on the referenced event KIND:
+        #   (A) approval/permission comment → the spoken response is a BUTTON
+        #       press (allow|deny) → decide_claude_channel_permission! + relay.
+        #   (B) ordinary agent message → the spoken response is FREE TEXT passed
+        #       verbatim back to the agent as a reply comment (no server parsing).
+        class AgentEventsController < BaseController
+          # Spoken decision verbs. The app no longer addresses approvals by
+          # ordinal, so a reply to an approval event is just an allow/deny verb;
+          # anything else asks for clarification rather than firing a decision.
+          APPROVE = /(승인|허용|적용|approve|allow|confirm|네|좋아|오케이|\bok\b|\byes\b)/i
+          DENY    = /(거절|거부|반려|deny|reject|취소|아니|\bno\b)/i
+
+          def index
+            approvals = pending_approvals
+            notices = system_inbox_messages
+
+            # Every undecided approval is emitted on every poll — the server keeps
+            # no per-client cursor. Re-speaking is prevented on the CLIENT (an
+            # in-memory "already spoken" set), the same at-least-once shape as
+            # notices: a pending approval keeps surfacing until it is decided
+            # (which clears it from pending_approvals) or the app restarts (when a
+            # still-pending approval SHOULD be re-surfaced). The old `since` cursor
+            # filtered here, but a batch high-water-mark could burn past an approval
+            # whose created_at trailed a newer notice, losing it forever.
+            events = approvals.map do |c|
+              {
+                id: c.id, type: "approval_requested",
+                title: title_for_topic(c.topic_id),
+                summary: summarizer.approval_summary(comment: c, label: label_for_topic(c.topic_id)),
+                speak: true, requires_response: true, topic_id: c.topic_id,
+                created_at: c.created_at.iso8601(6)
+              }
+            end
+
+            events += notices.map do |c|
+              # The notice stands in for the origin comment it quotes; the app
+              # lists/reads it against the ORIGIN thread and replies route there.
+              origin_topic_id = c.quoted_comment&.topic_id || c.topic_id
+              {
+                id: c.id, type: "agent_reply",
+                title: title_for_topic(origin_topic_id),
+                summary: speakable(c.content),
+                speak: true, requires_response: c.quoted_comment_id.present?,
+                topic_id: origin_topic_id, created_at: c.created_at.iso8601(6)
+              }
+            end
+
+            render json: events.sort_by { |e| e[:created_at] }
+          end
+
+          def respond
+            comment = Collavre::Comment.find_by(id: params[:id])
+            unless comment && authorized_comment?(comment)
+              return render json: { error: "Event not found" }, status: :not_found
+            end
+
+            # Acting on a notice means the user has heard it — clear it from the
+            # unread inbox set so it isn't read again on the next poll.
+            mark_inbox_read(comment)
+
+            if comment.claude_channel_permission?
+              decide_on(comment)
+            else
+              relay_free_text(comment)
+            end
+          end
+
+          # The app calls this when it finishes reading a message ALOUD (whether or
+          # not the user then replies). Reading = hearing it, so the inbox read
+          # pointer advances and the notice stops surfacing — the SAME read-state
+          # the inbox badge uses. A crash before this call leaves the notice unread,
+          # so the next poll re-reads it (at-least-once, not the lossy old cursor).
+          def read
+            comment = Collavre::Comment.find_by(id: params[:id])
+            unless comment && authorized_comment?(comment)
+              return render json: { error: "Event not found" }, status: :not_found
+            end
+
+            mark_inbox_read(comment)
+            head :ok
+          end
+
+          private
+
+          # The user's Inbox → System topic is the per-user alarm stream: mentions,
+          # agent replies, share notices, … land here as system-authored
+          # (user_id: nil) comments that QUOTE the origin comment. This is the
+          # canonical, agent-ownership-independent feed the voice loop reads aloud.
+          #
+          # Emission is gated by the inbox's OWN read-state — the CommentReadPointer
+          # (comments with id > last_read_comment_id are unread) that also drives the
+          # inbox badge — NOT by the client's `since` cursor. A `since` cursor is a
+          # fetch-time high-water-mark: any notice fetched-but-never-spoken (crash,
+          # background, busy queue, restart) gets burned past and is lost forever,
+          # even though it stays unread in the inbox. Driving off the read pointer
+          # makes "unread in the inbox" and "read aloud by the app" the same set; the
+          # app marks a notice read (POST :id/read) only after actually speaking it.
+          def system_inbox_messages
+            inbox = current_user_inbox or return []
+            last_read = inbox_read_pointer&.last_read_comment_id || 0
+
+            scope = Collavre::Comment.where(creative_id: inbox.id, topic_id: inbox.system_topic.id)
+                                     .where("comments.id > ?", last_read)
+                                     .order(:id)
+                                     .limit(50)
+            # Approval prompts are surfaced (actionably) by pending_approvals; their
+            # System-topic FYI duplicate must not be read a second time.
+            scope.reject { |c| c.quoted_comment&.claude_channel_permission? }
+          end
+
+          def inbox_read_pointer
+            inbox = current_user_inbox or return nil
+
+            Collavre::CommentReadPointer.find_by(user: current_user, creative: inbox)
+          end
+
+          # Advance the inbox read pointer to (at least) this notice — forward-only,
+          # so a later message is never un-read. Only inbox-creative comments move the
+          # inbox pointer; calling this for an approval (which lives in the origin
+          # creative and is owned by pending_approvals) is a harmless no-op.
+          def mark_inbox_read(comment)
+            inbox = current_user_inbox or return
+            return unless comment.creative_id == inbox.id
+
+            pointer = Collavre::CommentReadPointer.find_or_initialize_by(user: current_user, creative: inbox)
+            new_id = [ pointer.last_read_comment_id || 0, comment.id ].max
+            pointer.update(last_read_comment_id: new_id)
+          end
+
+          def current_user_inbox
+            return @current_user_inbox if defined?(@current_user_inbox)
+
+            @current_user_inbox = Collavre::Creative.inbox_for(current_user)
+          end
+
+          # Read the whole message aloud, but spoken: strip markdown link syntax to
+          # its text and collapse whitespace so TTS doesn't read raw URLs.
+          def speakable(text)
+            text.to_s.gsub(/\[([^\]]+)\]\([^)]*\)/, '\1').gsub(/\s+/, " ").strip
+          end
+
+          def authorized_comment?(comment)
+            return true if comment.approver_id == current_user.id
+            return true if own_inbox_notice?(comment)
+
+            author = comment.user
+            author.respond_to?(:created_by_id) && agent_ids.include?(author.id)
+          end
+
+          # A system-authored notice in the caller's own Inbox#System topic. Owning
+          # the inbox is the authorization proof (the notice has no approver/author).
+          def own_inbox_notice?(comment)
+            inbox = current_user_inbox or return false
+
+            comment.user_id.nil? &&
+              comment.creative_id == inbox.id &&
+              comment.topic_id == inbox.system_topic.id
+          end
+
+          # (A) bounded decision: spoken response IS the approve/deny button.
+          def decide_on(comment)
+            behavior = behavior_from(params[:response])
+
+            unless %w[allow deny].include?(behavior)
+              return render_speak(:clarify_decision, action: { type: "needs_clarification", comment_id: comment.id })
+            end
+
+            case decide_permission(comment, behavior)
+            when :unauthorized
+              render_speak(:not_authorized, action: { type: "not_authorized", comment_id: comment.id }, status: :forbidden)
+            when :already_decided
+              render_speak(:already_decided, action: { type: "already_decided", comment_id: comment.id })
+            else
+              render_speak(
+                behavior == "allow" ? :approved : :denied,
+                action: { type: behavior == "allow" ? "approved" : "denied", comment_id: comment.id }
+              )
+            end
+          end
+
+          # (B) free-form: relay the utterance verbatim as a human reply.
+          def relay_free_text(comment)
+            text = params[:response].to_s.strip
+            return render_speak(:empty_response, action: { type: "noop" }) if text.blank?
+
+            # A System-inbox notice is a stand-in for the origin comment it quotes;
+            # the reply must land on that origin thread (the System topic itself
+            # never dispatches AI), not on the notice.
+            target = comment.quoted_comment || comment
+            topic = target.topic
+            creative = topic&.creative&.effective_origin || target.creative
+            # quoted_comment threads the reply to the message being answered, but
+            # review_type: :question keeps review_message? false — otherwise the
+            # agent's response would update the quoted comment IN PLACE (review flow)
+            # instead of posting a new reply, so no new comment is created and the
+            # Inbox#System alarm never fires. Same guard as InboxReplyService (#1301).
+            reply = creative.comments.create!(
+              content: text, user: current_user, topic: topic,
+              quoted_comment: target, review_type: :question
+            )
+
+            render_speak(:relayed, action: { type: "relayed", comment_id: reply.id, topic_id: topic&.id })
+          end
+
+          def behavior_from(response)
+            text = response.to_s.strip
+            return "allow" if text.match?(APPROVE)
+            return "deny"  if text.match?(DENY)
+
+            nil
+          end
+        end
+      end
+    end
+  end
+end