ui(replay-drawer): rename Authorship pill to Authors + tighten its affordance (#224)

* ui(replay-drawer): rename Authorship pill label to "Authors"

Visible string + aria-label only; internal vocabulary (component name,
props, CSS classes, test describe block) still says authorship and is
slated for unification with attribution in a follow-up.

* refactor(ui): unify Authorship → Attribution internal vocabulary

Pure rename across the UI surface (component, props, CSS classes,
keyframes, custom properties, test descriptions, comments) so the
internal vocabulary matches the data API and the contract doc.
User-facing strings ("Authors" pill label, "Authors overlay"
aria-label, "Highlight authors" tooltip) are unchanged.

* feat(replay-drawer): disable Authors pill on unsupported formats

The pill was rendering for every file type but only `q2-debug` and
`q2-preview` actually surface attribution visually — toggling it for
other formats did nothing the user could see. Now the pill greys out
with an explanatory title when `currentFormat` is anything else.
`attributionOn` state is preserved across the disabled period so
returning to a supported format restores the user's preference.

* ui(replay-drawer): state-aware tooltip on Authors pill

Replaces the static "Highlight authors" tooltip with "Show authors
overlay" / "Hide authors overlay" depending on the on/off state, so
the noun-phrase matches the disabled-state message ("Authors overlay
is not available for this format") and the verb tracks what clicking
will actually do.

Author: shikokuchuo

hub-client/src/components/Editor.tsx

@@ -219,16 +219,16 @@ export default function Editor({ project, files, fileContents, onDisconnect, onC
   // Scroll sync state (persisted in localStorage)
   const [scrollSyncEnabled, setScrollSyncEnabled] = usePreference('scrollSyncEnabled');
 
-  // Authorship overlay — session-only useState (not persisted).
+  // Attribution overlay — session-only useState (not persisted).
   // Owned here, surfaced via the toggle in the replay bar, and
   // threaded into ReactPreview where `useAttribution` consumes it
   // as the `enabled` flag. Treated as an inspection mode rather
   // than a setting: resets on reload so a previously-curious view
   // doesn't bleed into the next session.
-  const [authorshipOn, setAuthorshipOn] = useState(false);
+  const [attributionOn, setAttributionOn] = useState(false);
   // `useAttribution` (inside ReactPreview) reports whether it's
   // mid-build via `onAttributionGeneratingChange`; the flag drives
-  // the rotating-gradient border on the Authorship pill so a slow
+  // the rotating-gradient border on the Attribution pill so a slow
   // run-list build on a large document is visible to the user.
   const [attributionGenerating, setAttributionGenerating] = useState(false);
   // Track if editor has focus (to prevent scroll feedback loop)
@@ -1066,7 +1066,7 @@ export default function Editor({ project, files, fileContents, onDisconnect, onC
             onFormatChange={handleFormatChange}
             onContentRewrite={handleContentRewrite}
             identities={identities}
-            authorshipOn={authorshipOn}
+            attributionOn={attributionOn}
             onAttributionGeneratingChange={setAttributionGenerating}
           />
         </div>
@@ -1079,9 +1079,12 @@ export default function Editor({ project, files, fileContents, onDisconnect, onC
           controls={replayControls}
           disabled={!!currentFile && isBinaryExtension(currentFile.path)}
           identities={identities}
-          authorshipOn={authorshipOn}
-          onAuthorshipChange={setAuthorshipOn}
-          authorshipGenerating={attributionGenerating}
+          attributionOn={attributionOn}
+          onAttributionChange={setAttributionOn}
+          attributionGenerating={attributionGenerating}
+          attributionDisabled={
+            currentFormat !== 'q2-debug' && currentFormat !== 'q2-preview'
+          }
         />
       )}
 

hub-client/src/components/ReplayDrawer.css

@@ -52,7 +52,7 @@
 }
 
 /* Collapsed: toggle grows to fill the bar so most of it is still
-   clickable to enter replay, while leaving room for the Authorship
+   clickable to enter replay, while leaving room for the Attribution
    pill on the right. */
 .replay-drawer--collapsed .replay-drawer__toggle {
   flex: 1;
@@ -298,10 +298,10 @@
   pointer-events: none;
 }
 
-/* Authorship overlay toggle — sits flush-right in both collapsed and
+/* Attribution overlay toggle — sits flush-right in both collapsed and
    expanded states. Off-state matches the dim transport-button look;
    on-state lights up with the editor accent. */
-.replay-drawer__authorship {
+.replay-drawer__attribution {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -321,23 +321,32 @@
   user-select: none;
 }
 
-.replay-drawer__authorship:hover {
+.replay-drawer__attribution:hover {
   color: var(--editor-text);
   border-color: var(--editor-text-dim);
 }
 
-.replay-drawer__authorship--on {
+.replay-drawer__attribution:disabled,
+.replay-drawer__attribution:disabled:hover {
+  cursor: not-allowed;
+  opacity: 0.4;
+  color: var(--editor-text-dim);
+  border-color: var(--editor-accent-border);
+  background: var(--editor-accent-bg);
+}
+
+.replay-drawer__attribution--on {
   color: var(--editor-success);
   border-color: var(--editor-success);
   background: var(--editor-success-bg);
 }
 
-.replay-drawer__authorship--on:hover {
+.replay-drawer__attribution--on:hover {
   background: var(--editor-success);
   color: var(--editor-bg);
 }
 
-.replay-drawer__authorship-dot {
+.replay-drawer__attribution-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
@@ -347,7 +356,7 @@
   transition: opacity 0.15s;
 }
 
-.replay-drawer__authorship--on .replay-drawer__authorship-dot {
+.replay-drawer__attribution--on .replay-drawer__attribution-dot {
   opacity: 1;
 }
 
@@ -361,17 +370,17 @@
    We intentionally keep the static border underneath — the rotating
    highlight rides on top, so the pill never looks "borderless" mid-
    animation if a browser ignores the pseudo-element. */
-@property --replay-drawer__authorship-angle {
+@property --replay-drawer__attribution-angle {
   syntax: '<angle>';
   inherits: false;
   initial-value: 0deg;
 }
 
-.replay-drawer__authorship--generating {
+.replay-drawer__attribution--generating {
   position: relative;
 }
 
-.replay-drawer__authorship--generating::before {
+.replay-drawer__attribution--generating::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -381,7 +390,7 @@
      indicator, no transparent gap. First and last stops match so
      the seam is invisible across the 0/360 boundary. */
   background: conic-gradient(
-    from var(--replay-drawer__authorship-angle),
+    from var(--replay-drawer__attribution-angle),
     #ff3b30 0deg,
     #ff9500 60deg,
     #ffcc00 120deg,
@@ -398,18 +407,18 @@
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
           mask-composite: exclude;
-  animation: replay-drawer__authorship-spin 2s linear infinite;
+  animation: replay-drawer__attribution-spin 2s linear infinite;
   pointer-events: none;
 }
 
-@keyframes replay-drawer__authorship-spin {
+@keyframes replay-drawer__attribution-spin {
   to {
-    --replay-drawer__authorship-angle: 360deg;
+    --replay-drawer__attribution-angle: 360deg;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .replay-drawer__authorship--generating::before {
+  .replay-drawer__attribution--generating::before {
     animation: none;
   }
 }

hub-client/src/components/ReplayDrawer.test.tsx

@@ -269,17 +269,17 @@ describe('ReplayDrawer', () => {
     });
   });
 
-  describe('Authorship toggle', () => {
-    it('renders in collapsed state when authorshipOn + onAuthorshipChange are passed', () => {
+  describe('Attribution toggle', () => {
+    it('renders in collapsed state when attributionOn + onAttributionChange are passed', () => {
       render(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={false}
-          onAuthorshipChange={vi.fn()}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
         />,
       );
-      expect(screen.getByLabelText(/Authorship/)).toBeDefined();
+      expect(screen.getByLabelText(/Authors/)).toBeDefined();
     });
 
     it('renders in expanded state', () => {
@@ -296,46 +296,46 @@ describe('ReplayDrawer', () => {
         <ReplayDrawer
           state={activeState}
           controls={controls}
-          authorshipOn={false}
-          onAuthorshipChange={vi.fn()}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
         />,
       );
-      expect(screen.getByLabelText(/Authorship/)).toBeDefined();
+      expect(screen.getByLabelText(/Authors/)).toBeDefined();
     });
 
-    it('reflects authorshipOn state via aria-pressed', () => {
+    it('reflects attributionOn state via aria-pressed', () => {
       const { rerender } = render(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={false}
-          onAuthorshipChange={vi.fn()}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
         />,
       );
-      expect(screen.getByLabelText(/Authorship/).getAttribute('aria-pressed')).toBe('false');
+      expect(screen.getByLabelText(/Authors/).getAttribute('aria-pressed')).toBe('false');
 
       rerender(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={true}
-          onAuthorshipChange={vi.fn()}
+          attributionOn={true}
+          onAttributionChange={vi.fn()}
         />,
       );
-      expect(screen.getByLabelText(/Authorship/).getAttribute('aria-pressed')).toBe('true');
+      expect(screen.getByLabelText(/Authors/).getAttribute('aria-pressed')).toBe('true');
     });
 
-    it('clicking toggles via onAuthorshipChange', () => {
+    it('clicking toggles via onAttributionChange', () => {
       const onChange = vi.fn();
       render(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={false}
-          onAuthorshipChange={onChange}
+          attributionOn={false}
+          onAttributionChange={onChange}
         />,
       );
-      fireEvent.click(screen.getByLabelText(/Authorship/));
+      fireEvent.click(screen.getByLabelText(/Authors/));
       expect(onChange).toHaveBeenCalledWith(true);
     });
 
@@ -344,44 +344,112 @@ describe('ReplayDrawer', () => {
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={false}
-          onAuthorshipChange={vi.fn()}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
         />,
       );
-      fireEvent.click(screen.getByLabelText(/Authorship/));
+      fireEvent.click(screen.getByLabelText(/Authors/));
       expect(controls.enter).not.toHaveBeenCalled();
     });
 
-    it('is omitted when onAuthorshipChange is not provided', () => {
+    it('is omitted when onAttributionChange is not provided', () => {
       render(<ReplayDrawer state={makeState()} controls={controls} />);
-      expect(screen.queryByLabelText(/Authorship/)).toBeNull();
+      expect(screen.queryByLabelText(/Authors/)).toBeNull();
     });
 
-    it('applies the generating modifier class and aria-busy when authorshipGenerating is true', () => {
+    it('applies the generating modifier class and aria-busy when attributionGenerating is true', () => {
       const { rerender } = render(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={true}
-          onAuthorshipChange={vi.fn()}
-          authorshipGenerating={false}
+          attributionOn={true}
+          onAttributionChange={vi.fn()}
+          attributionGenerating={false}
         />,
       );
-      const pill = screen.getByLabelText(/Authorship/);
-      expect(pill.className).not.toContain('replay-drawer__authorship--generating');
+      const pill = screen.getByLabelText(/Authors/);
+      expect(pill.className).not.toContain('replay-drawer__attribution--generating');
       expect(pill.getAttribute('aria-busy')).toBeNull();
 
       rerender(
         <ReplayDrawer
           state={makeState()}
           controls={controls}
-          authorshipOn={true}
-          onAuthorshipChange={vi.fn()}
-          authorshipGenerating={true}
+          attributionOn={true}
+          onAttributionChange={vi.fn()}
+          attributionGenerating={true}
         />,
       );
-      expect(pill.className).toContain('replay-drawer__authorship--generating');
+      expect(pill.className).toContain('replay-drawer__attribution--generating');
       expect(pill.getAttribute('aria-busy')).toBe('true');
     });
+
+    it('title text follows the on/off state when enabled', () => {
+      const { rerender } = render(
+        <ReplayDrawer
+          state={makeState()}
+          controls={controls}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
+        />,
+      );
+      expect(screen.getByLabelText(/Authors/).getAttribute('title')).toBe('Show authors overlay');
+
+      rerender(
+        <ReplayDrawer
+          state={makeState()}
+          controls={controls}
+          attributionOn={true}
+          onAttributionChange={vi.fn()}
+        />,
+      );
+      expect(screen.getByLabelText(/Authors/).getAttribute('title')).toBe('Hide authors overlay');
+    });
+
+    it('renders disabled with an explanatory title when attributionDisabled is true', () => {
+      render(
+        <ReplayDrawer
+          state={makeState()}
+          controls={controls}
+          attributionOn={false}
+          onAttributionChange={vi.fn()}
+          attributionDisabled={true}
+        />,
+      );
+      const pill = screen.getByLabelText(/unavailable/);
+      expect((pill as HTMLButtonElement).disabled).toBe(true);
+      expect(pill.getAttribute('title')).toMatch(/not available for this format/);
+    });
+
+    it('suppresses on/generating modifier classes while disabled', () => {
+      render(
+        <ReplayDrawer
+          state={makeState()}
+          controls={controls}
+          attributionOn={true}
+          onAttributionChange={vi.fn()}
+          attributionGenerating={true}
+          attributionDisabled={true}
+        />,
+      );
+      const pill = screen.getByLabelText(/unavailable/);
+      expect(pill.className).not.toContain('replay-drawer__attribution--on');
+      expect(pill.className).not.toContain('replay-drawer__attribution--generating');
+    });
+
+    it('does not fire onAttributionChange when clicked while disabled', () => {
+      const onChange = vi.fn();
+      render(
+        <ReplayDrawer
+          state={makeState()}
+          controls={controls}
+          attributionOn={false}
+          onAttributionChange={onChange}
+          attributionDisabled={true}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText(/unavailable/));
+      expect(onChange).not.toHaveBeenCalled();
+    });
   });
 });