collavre 0.24.0 → 0.25.0

data/app/helpers/collavre/creatives_helper.rb

@@ -52,9 +52,13 @@ module Collavre
         elsif can_feedback
           origin = creative.effective_origin
           comments_count = origin.comments_count
-          unread_count = unread_count_for(origin, comments_count) if unread_count.nil?
-          if Current.user && CommentPresenceStore.list(origin.id).include?(Current.user.id)
-            unread_count = 0
+          # A batched count already has presence suppression applied by
+          # CommentBadgeIndex; re-checking here would be one cache read per node,
+          # which is exactly what the batch exists to avoid.
+          if unread_count.nil?
+            badge_index = Creatives::CommentBadgeIndex.new(user: Current.user)
+            badge_index.index([ origin ])
+            unread_count = badge_index.unread_count_for(origin)
           end
           classes = [ "comments-btn", "creative-action-btn" ]
           classes << "no-comments" if comments_count.zero?
@@ -82,11 +86,13 @@ module Collavre
         end
         is_leaf = has_children.nil? ? !creative.children.exists? : !has_children
         can_write = creative.has_permission?(Current.user, :write) if can_write.nil?
-        progress_part = if is_leaf && can_write && !select_mode
-          render_progress_toggle(creative, progress_value)
-        else
-          render_progress_value(progress_value)
-        end
+        progress_part = render_progress_control(
+          creative,
+          progress_value,
+          has_children: !is_leaf,
+          can_write: can_write,
+          select_mode: select_mode
+        )
 
         safe_join([
           progress_part,
@@ -97,17 +103,18 @@ module Collavre
       end
     end
 
-    # Unread comments on `origin` for the current user. With no read pointer,
-    # every comment is unread. Batched by CommentBadgeIndex for the browse tree;
-    # this is the single-creative path.
-    def unread_count_for(origin, comments_count)
-      pointer = CommentReadPointer.find_by(user: Current.user, creative: origin)
-      last_read_id = pointer&.last_read_comment_id
-      return comments_count unless last_read_id
-
-      origin.comments.where("id > ? and private = ?", last_read_id, false).count
+    def render_progress_control(creative, value, has_children:, can_write:, select_mode: false)
+      if !has_children && can_write && !select_mode && progress_toggleable?(value)
+        render_progress_toggle(creative, value)
+      else
+        render_progress_value(value)
+      end
     end
 
+    # Rendered when the completion mark is blank, so the completed state keeps a
+    # stable baseline and a tappable hit area.
+    NBSP = "\u00A0"
+
     def render_progress_toggle(creative, value)
       complete = value == 1
       new_value = complete ? 0 : 1
@@ -118,8 +125,13 @@ module Collavre
         data: {
           progress_toggle: true,
           creative_id: creative.id,
-          current_progress: value,
-          new_progress: new_value
+          # progress is a decimal, so the raw value serializes as "1.0" and the
+          # CSS/JS state checks against "1" would never match. Both sides of the
+          # toggle only ever mean 0 or 1, so emit it as an integer.
+          current_progress: complete ? 1 : 0,
+          new_progress: new_value,
+          mark_complete: t("collavre.creatives.index.mark_complete"),
+          mark_incomplete: t("collavre.creatives.index.mark_incomplete")
         },
         title: tooltip
       ) do
@@ -127,16 +139,29 @@ module Collavre
           type: "checkbox",
           checked: complete || nil,
           class: "progress-toggle-checkbox",
-          tabindex: -1,
           "aria-label": tooltip
         )
-        safe_join([ render_progress_value(value), checkbox ])
+        # A completed leaf reads as the admin completion mark (blank by default),
+        # the same way parent rows already render 100%. CSS swaps the mark back to
+        # the checked box on hover/focus so a mis-click is undone in place instead
+        # of through the inline editor. The checkbox stays the accessible control;
+        # the mark is decorative.
+        checkbox + tag.span(completion_mark_display, class: "progress-toggle-mark", aria: { hidden: true })
       end
     end
 
+    # Blank (the default) collapses to a non-breaking space so the completed state
+    # keeps a stable baseline and a tappable hit area inside the toggle.
+    def completion_mark_display
+      completion_mark.to_s.presence || NBSP
+    end
+
+    def progress_toggleable?(value)
+      value == 0 || value == 1
+    end
+
     def render_progress_value(value)
       text = number_to_percentage(value * 100, precision: 0)
-      completion_mark = Collavre::SystemSetting.completion_mark
       if value == 1 && !completion_mark.nil?
         text = completion_mark
       end
@@ -148,6 +173,15 @@ module Collavre
       )
     end
 
+    # A tree renders this helper once per node. Keep the setting lookup scoped to
+    # the request's view context rather than depending on a particular cache
+    # store's local-cache middleware to collapse repeated reads.
+    def completion_mark
+      return @completion_mark if defined?(@completion_mark)
+
+      @completion_mark = Collavre::SystemSetting.completion_mark
+    end
+
     def render_creative_tree_markdown(creatives, level = 1, with_progress = false, max_depth: nil)
       return "" if creatives.blank?
       md = ""

data/app/helpers/collavre/navigation_helper.rb

@@ -61,6 +61,18 @@ module Collavre
       value.is_a?(Proc) ? instance_exec(&value) : value
     end
 
+    # Destination for the Home button.
+    #
+    # Authenticated users are sent to the configured home page directly instead
+    # of through "/". "/" means "app launch" and is rewritten to the last
+    # visited Creative, which made Home a no-op for anyone who had opened one.
+    # Guests keep "/" so the middleware rewrite still applies.
+    def home_navigation_path
+      return main_app.root_path unless authenticated?
+
+      HomePagePath.absolute(script_name: request.script_name) || main_app.root_path
+    end
+
     private
 
     def render_nav_button(item)

data/app/javascript/collavre.js

@@ -5,12 +5,10 @@
 import "./modules/creatives"
 import "./modules/creative_row_swipe"
 import "./modules/mention_menu"
-import "./modules/typo_corrector"
 import "./modules/command_menu"
 import "./modules/modal_dialog"
 import "./modules/export_to_markdown"
 import "./modules/inbox_panel"
-import "./modules/creative_guide"
 import "./modules/creative_row_editor"
 import "./modules/slide_view"
 
@@ -19,6 +17,7 @@ import "./components/creative_tree_row"
 
 // Import and re-export lib utilities
 import "./lib/apply_lexical_styles"
+import "./lib/creative_link_prefetch"
 import "./lib/turbo_stream_actions"
 import "./lib/turbo_confirm"
 

data/app/javascript/components/InlineLexicalEditor.jsx

@@ -19,7 +19,7 @@ import {
   registerCodeHighlighting
 } from "@lexical/code"
 import { ListItemNode, ListNode, $isListItemNode, $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list"
-import { $createLinkNode, LinkNode, AutoLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link"
+import { LinkNode, AutoLinkNode } from "@lexical/link"
 import { TableNode, TableRowNode, TableCellNode, INSERT_TABLE_COMMAND } from "@lexical/table"
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin"
 import TableHoverActionsPlugin from "./plugins/table_hover_actions_plugin"
@@ -68,6 +68,9 @@ import { $convertToMarkdownString } from "@lexical/markdown"
 import { updateResponsiveImages } from "../lib/responsive_images"
 import { CODE_TOKEN_THEME } from "../lib/editor/code_token_theme"
 import { detectCodeLanguage, normalizeFenceLang, bridgeCodeFenceLanguages, markLanguageResolved, isLanguageResolved, clearLanguageResolved } from "../lib/editor/code_languages"
+import { CreativeLinkNode } from "../lib/lexical/creative_link_node"
+import { registerCreativeLinkTrigger } from "../lib/lexical/creative_link_trigger"
+import { $createToolbarLinkNode, $findLinkNode } from "../lib/lexical/link_toolbar"
 
 const URL_MATCHERS = [
   createLinkMatcherWithRegExp(/https?:\/\/[^\s<]+/gi, (text) => text)
@@ -292,6 +295,24 @@ function LinkAttributesPlugin() {
   return null
 }
 
+function CreativeLinkTriggerPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => registerCreativeLinkTrigger(editor, ({ anchorRect, onSelect, onClose }) => {
+    const modal = document.getElementById("link-creative-modal")
+    const controller = modal && window.Stimulus?.getControllerForElementAndIdentifier(
+      modal,
+      "link-creative"
+    )
+    if (!controller) return false
+
+    controller.open(anchorRect, onSelect, onClose, { allowCreate: true })
+    return true
+  }), [editor])
+
+  return null
+}
+
 function CodeHighlightingPlugin() {
   const [editor] = useLexicalComposerContext()
 
@@ -559,7 +580,6 @@ function Toolbar() {
   }, [editor])
 
   const toggleLink = useCallback(() => {
-    let hasLink = false
     let selectionText = ""
     let isRange = false
     let url = ""
@@ -571,17 +591,10 @@ function Toolbar() {
       isRange = true
       selectionText = selection.getTextContent()
 
-      const nodes = selection.getNodes()
-      const nodeWithLink = nodes.find((node) => {
-        if (node.getType() === "link") return true
-        const parent = node.getParent()
-        return parent?.getType() === "link"
-      })
+      const nodeWithLink = $findLinkNode(selection.getNodes())
 
       if (nodeWithLink) {
-        hasLink = true
-        const linkNode = nodeWithLink.getType() === "link" ? nodeWithLink : nodeWithLink.getParent()
-        url = linkNode.getURL()
+        url = nodeWithLink.getURL()
       }
     })
 
@@ -860,23 +873,17 @@ function Toolbar() {
               if (!selection) return
 
               // Check if we are editing an existing link
-              const nodes = selection.getNodes()
-              const nodeWithLink = nodes.find((node) => {
-                if (node.getType() === "link") return true
-                const parent = node.getParent()
-                return parent?.getType() === "link"
-              })
+              const nodeWithLink = $findLinkNode(selection.getNodes())
 
               if (nodeWithLink) {
                 // UPDATE MODE
-                const linkNode = nodeWithLink.getType() === "link" ? nodeWithLink : nodeWithLink.getParent()
-                const newLink = $createLinkNode(finalUrl)
+                const newLink = $createToolbarLinkNode(finalUrl)
                 newLink.append($createTextNode(finalLabel))
-                linkNode.replace(newLink)
+                nodeWithLink.replace(newLink)
                 newLink.select()
               } else {
                 // CREATE MODE
-                const newLink = $createLinkNode(finalUrl)
+                const newLink = $createToolbarLinkNode(finalUrl)
                 newLink.append($createTextNode(finalLabel))
 
                 if ($isRangeSelection(selection) && !selection.isCollapsed()) {
@@ -1013,6 +1020,7 @@ function EditorInner({
         <TrailingParagraphPlugin />
         <InitialContentPlugin html={initialHtml} />
         <LinkAttributesPlugin />
+        <CreativeLinkTriggerPlugin />
         <ReadyPlugin onReady={onReady} />
         <FileUploadPlugin
           onUploadStateChange={onUploadStateChange}
@@ -1081,6 +1089,7 @@ export default function InlineLexicalEditor({
         ListNode,
         LinkNode,
         AutoLinkNode,
+        CreativeLinkNode,
         ImageNode,
         AttachmentNode,
         VideoNode,

data/app/javascript/components/__tests__/creative_tree_row_parent_id.test.js

@@ -14,17 +14,19 @@
 // The component calls `customElements.define(...)` at module-eval time and reads
 // `customElements` as a bare global. The jest environment only exposes it on
 // `window`, so bridge it before importing the component.
+import { jest } from '@jest/globals'
+
 beforeAll(() => {
   if (typeof globalThis.customElements === "undefined") {
     globalThis.customElements = window.customElements;
   }
 });
 
-async function mountRow(props) {
+async function mountRow(props, parent = document.body) {
   await import("../creative_tree_row.js");
   const el = document.createElement("creative-tree-row");
   Object.assign(el, props);
-  document.body.appendChild(el);
+  parent.appendChild(el);
   await el.updateComplete;
   return el;
 }
@@ -39,6 +41,17 @@ afterEach(() => {
 });
 
 describe("creative-tree-row parentId convention", () => {
+  test("uses the shared chevrons for collapsed and expanded branches", async () => {
+    const el = await mountRow({ creativeId: "8", hasChildren: true, expanded: true });
+
+    expect(el.querySelector(".creative-toggle-btn path").getAttribute("d")).toBe("M6 9L12 15L18 9");
+
+    el.expanded = false;
+    await el.updateComplete;
+
+    expect(el.querySelector(".creative-toggle-btn path").getAttribute("d")).toBe("M9 6L15 12L9 18");
+  });
+
   test("non-title row under a page-title parent keeps the parent id", async () => {
     const el = await mountRow({ creativeId: "8", parentId: "5", level: 2 });
     const tree = treeOf(el);
@@ -84,4 +97,21 @@ describe("creative-tree-row parentId convention", () => {
     const derivedParentId = prev.dataset.parentId || "";
     expect(derivedParentId).toBe("5"); // sibling inherits the page-title parent
   });
+
+  test("content navigation stays inside the persistent workspace frame", async () => {
+    const frame = document.createElement("turbo-frame");
+    frame.id = "creative-workspace-content";
+    document.body.appendChild(frame);
+    const visit = jest.fn();
+    window.Turbo = { visit };
+    const el = await mountRow({ creativeId: "8", linkUrl: "/creatives/8" }, frame);
+
+    el.querySelector(".creative-content").dispatchEvent(new window.MouseEvent("click", { bubbles: true }));
+
+    expect(visit).toHaveBeenCalledWith("/creatives/8", {
+      action: "advance",
+      frame: "creative-workspace-content",
+    });
+    delete window.Turbo;
+  });
 });

data/app/javascript/components/__tests__/creative_tree_row_progress_toggle.test.js

@@ -0,0 +1,185 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+
+const csrfFetch = jest.fn()
+
+jest.unstable_mockModule('../../lib/api/csrf_fetch', () => ({
+  default: csrfFetch,
+}))
+
+beforeAll(() => {
+  if (typeof globalThis.customElements === 'undefined') {
+    globalThis.customElements = window.customElements
+  }
+})
+
+async function mountRow(progressHtml) {
+  await import('../creative_tree_row.js')
+  const row = document.createElement('creative-tree-row')
+  row.creativeId = '7'
+  row.progressHtml = progressHtml
+  document.body.appendChild(row)
+  await row.updateComplete
+  return row
+}
+
+const INCOMPLETE_TOGGLE = '<span class="progress-toggle-wrap" data-progress-toggle="true" data-creative-id="7" data-current-progress="0" data-new-progress="1" data-mark-complete="Mark complete" data-mark-incomplete="Mark incomplete" title="Mark complete"><input type="checkbox" class="progress-toggle-checkbox" aria-label="Mark complete"><span class="progress-toggle-mark" aria-hidden="true"> </span></span>'
+
+const COMPLETE_TOGGLE = INCOMPLETE_TOGGLE
+  .replace('data-current-progress="0" data-new-progress="1"', 'data-current-progress="1" data-new-progress="0"')
+  .replace('title="Mark complete"', 'title="Mark incomplete"')
+  .replace('<input type="checkbox"', '<input type="checkbox" checked')
+  .replace('aria-label="Mark complete"', 'aria-label="Mark incomplete"')
+
+afterEach(() => {
+  csrfFetch.mockReset()
+  document.body.innerHTML = ''
+})
+
+test('updates checkbox metadata and ancestor progress after a successful toggle', async () => {
+  csrfFetch.mockResolvedValue({
+    ok: true,
+    json: async () => ({
+      progress: 1,
+      progress_html: INCOMPLETE_TOGGLE.replace('data-current-progress="0"', 'data-current-progress="1"'),
+      has_children: false,
+      ancestors: [{
+        id: '42',
+        progress: 0.5,
+        progress_html: '<span class="creative-progress-incomplete">50%</span>',
+      }],
+    }),
+  })
+  const ancestor = document.createElement('creative-tree-row')
+  ancestor.setAttribute('creative-id', '42')
+  document.body.appendChild(ancestor)
+  const row = await mountRow(INCOMPLETE_TOGGLE)
+
+  row.querySelector('[data-progress-toggle]').click()
+  await Promise.resolve()
+  await row.updateComplete
+
+  expect(csrfFetch).toHaveBeenCalledWith('/creatives/7', expect.objectContaining({ method: 'PATCH' }))
+  expect(row.dataset.progressValue).toBe('1')
+  expect(ancestor.progressHtml).toContain('50%')
+})
+
+test('flips the completion state optimistically so the mark shows before the request settles', async () => {
+  let resolveFetch
+  csrfFetch.mockReturnValue(new Promise((resolve) => { resolveFetch = resolve }))
+  const row = await mountRow(INCOMPLETE_TOGGLE)
+  const toggle = row.querySelector('[data-progress-toggle]')
+
+  toggle.click()
+
+  // CSS keys the mark/checkbox swap off data-current-progress, so the completed
+  // row reads as done immediately instead of waiting on the PATCH.
+  expect(toggle.dataset.currentProgress).toBe('1')
+  expect(toggle.dataset.newProgress).toBe('0')
+  expect(toggle.title).toBe('Mark incomplete')
+  expect(toggle.querySelector('.progress-toggle-mark')).not.toBeNull()
+
+  resolveFetch({ ok: true, json: async () => ({ progress: 1 }) })
+  await Promise.resolve()
+  await row.updateComplete
+})
+
+// Space (and a click landing on the box itself) runs the input's own activation:
+// the browser flips `checked` before the click reaches this handler. Reading the
+// checkbox instead of the dataset would invert the state back while the PATCH is
+// in flight, so a completed row would still read as checked. `checkbox.click()`
+// drives the same activation path Space does — jsdom has no Space-to-click
+// default action. Its canceled-activation restore inverts the current value
+// where browsers reassign the saved one, so the browser-faithful check lives in
+// test/system/creative_progress_toggle_keyboard_test.rb.
+test('unchecks the box when the completed checkbox itself is activated', async () => {
+  let resolveFetch
+  csrfFetch.mockReturnValue(new Promise((resolve) => { resolveFetch = resolve }))
+  const row = await mountRow(COMPLETE_TOGGLE)
+  const toggle = row.querySelector('[data-progress-toggle]')
+  const checkbox = toggle.querySelector('input')
+
+  checkbox.click()
+
+  expect(toggle.dataset.currentProgress).toBe('0')
+  expect(toggle.dataset.newProgress).toBe('1')
+  expect(checkbox.checked).toBe(false)
+
+  resolveFetch({ ok: true, json: async () => ({ progress: 0 }) })
+  await Promise.resolve()
+  await row.updateComplete
+})
+
+test('rolls the box back to unchecked when activating it directly fails', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+  csrfFetch.mockResolvedValue({ ok: false, status: 422 })
+  const row = await mountRow(INCOMPLETE_TOGGLE)
+  const toggle = row.querySelector('[data-progress-toggle]')
+  const checkbox = toggle.querySelector('input')
+
+  checkbox.click()
+  await Promise.resolve()
+  await row.updateComplete
+
+  expect(toggle.dataset.currentProgress).toBe('0')
+  expect(checkbox.checked).toBe(false)
+})
+
+// `pointer-events: none` on the saving row stops the mouse but not a checkbox
+// that already holds focus, so Space can re-enter the handler with the
+// optimistically inverted dataset and PATCH the opposite value. Two requests in
+// flight can settle out of order and leave the row on the losing one.
+test('ignores repeat activation while the PATCH is in flight', async () => {
+  csrfFetch.mockReturnValue(new Promise(() => {}))
+  const row = await mountRow(COMPLETE_TOGGLE)
+  const toggle = row.querySelector('[data-progress-toggle]')
+  const checkbox = toggle.querySelector('input')
+
+  checkbox.click()
+  checkbox.click()
+
+  expect(csrfFetch).toHaveBeenCalledTimes(1)
+  expect(toggle.dataset.currentProgress).toBe('0')
+  expect(toggle.dataset.newProgress).toBe('1')
+  expect(checkbox.checked).toBe(false)
+})
+
+// The server's progress_html replaces the toggle through unsafeHTML, which
+// discards the focused checkbox. Without restoring focus a keyboard user
+// toggles once and then Space scrolls the page instead of toggling back.
+test('keeps focus on the checkbox after the server re-renders the toggle', async () => {
+  csrfFetch.mockResolvedValue({
+    ok: true,
+    json: async () => ({ progress: 1, progress_html: COMPLETE_TOGGLE }),
+  })
+  const row = await mountRow(INCOMPLETE_TOGGLE)
+  const checkbox = row.querySelector('.progress-toggle-checkbox')
+  checkbox.focus()
+
+  checkbox.click()
+  await Promise.resolve()
+  await row.updateComplete
+  await row.updateComplete
+
+  const rendered = row.querySelector('.progress-toggle-checkbox')
+  expect(document.activeElement).toBe(rendered)
+  expect(rendered.checked).toBe(true)
+})
+
+test('restores checkbox metadata when a toggle request fails', async () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+  csrfFetch.mockResolvedValue({ ok: false, status: 422 })
+  const row = await mountRow(INCOMPLETE_TOGGLE)
+  const toggle = row.querySelector('[data-progress-toggle]')
+
+  toggle.click()
+  await Promise.resolve()
+  await row.updateComplete
+
+  expect(toggle.dataset.currentProgress).toBe('0')
+  expect(toggle.dataset.newProgress).toBe('1')
+  expect(toggle.title).toBe('Mark complete')
+  expect(toggle.querySelector('input').getAttribute('aria-label')).toBe('Mark complete')
+})

data/app/javascript/components/creative_tree_row.js

@@ -1,5 +1,6 @@
-import { LitElement, html, svg, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { CHEVRON_COLLAPSED, CHEVRON_EXPANDED } from "../utils/chevron_icons";
 import { parseEmojis } from "../utils/emoji_parser";
 import { highlightCodeBlocks } from "../lib/utils/markdown";
 import { addCreativeTableDownloadButtons } from "../lib/utils/table_download";
@@ -77,9 +78,25 @@ class CreativeTreeRow extends LitElement {
     this._extractTemplates();
   }
 
+  // `progressHtml` is committed through unsafeHTML, so every render that changes
+  // it discards the toggle — including the broadcast that lands after the PATCH
+  // this row already applied. A keyboard user would toggle once and then Space
+  // would scroll the page, so remember focus here and restore it in updated().
+  update(changedProperties) {
+    this._progressHadFocus = this._progressToggle != null &&
+      this._progressToggle.contains(document.activeElement);
+    super.update(changedProperties);
+  }
+
   updated(changedProperties) {
     this._attachHandlers();
 
+    if (this._progressHadFocus) {
+      this._progressHadFocus = false;
+      const checkbox = this.querySelector(".progress-toggle-checkbox");
+      if (checkbox && checkbox !== document.activeElement) checkbox.focus();
+    }
+
     // Re-tokenize the server-rendered description code blocks with hljs so they
     // match the editor's palette and follow light/dark theme. Idempotent: only
     // unmarked blocks are processed, and lit re-renders description DOM (dropping
@@ -485,14 +502,7 @@ class CreativeTreeRow extends LitElement {
   }
 
   _toggleIcon() {
-    if (this.expanded) {
-      return svg`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M6 9L12 15L18 9"/>
-      </svg>`;
-    }
-    return svg`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M9 6L15 12L9 18"/>
-    </svg>`;
+    return unsafeHTML(this.expanded ? CHEVRON_EXPANDED : CHEVRON_COLLAPSED);
   }
 
   _handleToggleClick(event) {
@@ -546,20 +556,45 @@ class CreativeTreeRow extends LitElement {
   }
 
   async _handleProgressToggle(event) {
-    event.preventDefault();
-    event.stopPropagation();
     const wrap = event.currentTarget;
+    const checkbox = wrap.querySelector(".progress-toggle-checkbox");
+    // Activating the input itself (Space, or a click landing on the box) flips
+    // `checked` before the click reaches this handler, and preventDefault would
+    // flip it back once dispatch finishes. Leave that activation alone and set
+    // the state explicitly below; cancel the default for every other target.
+    const nativeActivation = checkbox != null && event.target === checkbox;
+    if (!nativeActivation) event.preventDefault();
+    event.stopPropagation();
+    // `pointer-events: none` on the saving row stops the mouse but not a
+    // checkbox that already holds focus, so Space can re-enter here while a
+    // PATCH is in flight. The dataset is already inverted at that point, so a
+    // second request would carry the opposite value and the two could settle
+    // out of order. Drop the activation and put the box back on the dataset.
+    if (wrap.classList.contains("progress-toggle-saving")) {
+      if (checkbox) checkbox.checked = wrap.dataset.currentProgress === "1";
+      return;
+    }
     const creativeId = wrap.dataset.creativeId;
     const newProgress = wrap.dataset.newProgress;
-    if (!creativeId || newProgress == null) return;
+    // The dataset is the source of truth: `checked` may already be flipped.
+    const wasComplete = wrap.dataset.currentProgress === "1";
+    if (!creativeId || newProgress == null) {
+      if (checkbox) checkbox.checked = wasComplete;
+      return;
+    }
 
-    // Optimistic UI: toggle checkbox and class immediately
-    const checkbox = wrap.querySelector(".progress-toggle-checkbox");
-    const progressSpan = wrap.querySelector("[class^='creative-progress-']");
-    const wasComplete = checkbox?.checked;
+    // Optimistic UI: toggle the always-visible checkbox immediately.
+    const previousCurrentProgress = wrap.dataset.currentProgress;
+    const previousNewProgress = wrap.dataset.newProgress;
+    const previousTitle = wrap.title;
     if (checkbox) checkbox.checked = !wasComplete;
-    if (progressSpan) {
-      progressSpan.className = newProgress === "1" ? "creative-progress-complete" : "creative-progress-incomplete";
+    const complete = newProgress === "1";
+    wrap.dataset.currentProgress = newProgress;
+    wrap.dataset.newProgress = complete ? "0" : "1";
+    const label = complete ? wrap.dataset.markIncomplete : wrap.dataset.markComplete;
+    if (label) {
+      wrap.title = label;
+      if (checkbox) checkbox.setAttribute("aria-label", label);
     }
     wrap.classList.add("progress-toggle-saving");
 
@@ -604,9 +639,10 @@ class CreativeTreeRow extends LitElement {
     } catch (err) {
       // Revert optimistic UI
       if (checkbox) checkbox.checked = wasComplete;
-      if (progressSpan) {
-        progressSpan.className = wasComplete ? "creative-progress-complete" : "creative-progress-incomplete";
-      }
+      wrap.dataset.currentProgress = previousCurrentProgress;
+      wrap.dataset.newProgress = previousNewProgress;
+      wrap.title = previousTitle;
+      if (checkbox) checkbox.setAttribute("aria-label", previousTitle);
       console.error("Progress toggle failed:", err);
     } finally {
       wrap.classList.remove("progress-toggle-saving");
@@ -635,7 +671,11 @@ class CreativeTreeRow extends LitElement {
     // If not interactive, navigate to the linkUrl
     if (this.linkUrl && this.linkUrl !== "#") {
       if (window.Turbo) {
-        window.Turbo.visit(this.linkUrl);
+        const workspaceFrame = this.closest("turbo-frame#creative-workspace-content");
+        const options = workspaceFrame
+          ? { action: "advance", frame: workspaceFrame.id }
+          : undefined;
+        window.Turbo.visit(this.linkUrl, options);
       } else {
         window.location.href = this.linkUrl;
       }