feat(auth): surface canEdit in the topbar with an access badge

`/api/auth/status` already returned a `canEdit` flag derived from the
HF whoami roleInOrg (Space owner, or org write/admin/contributor with
a write resource group), but the frontend was ignoring it. Result:
read-only users saw an enabled Publish button + the regular user chip,
then hit a confusing 403 from the backend on every mutating action.

- App.tsx plumbs `canEdit` from /api/auth/status into a new state and
forwards it to TopBar.
- TopBar renders a small badge next to the user chip: "Editor" (green
outline + PencilLine icon) when canEdit, "Read-only" (muted + Lock
icon) otherwise, both with a tooltip explaining the state.
- Publish button is disabled when !canEdit with a matching tooltip,
so the read-only restriction is visible up front instead of after a
failed network round-trip.
- `.chip--editor` and `.chip--readonly` variants added to _ui.css.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.tsx

@@ -37,6 +37,9 @@ export default function App() {
   const [user, setUser] = useState<CollabUser>(stableFallbackUser);
   const [loginUrl, setLoginUrl] = useState<string | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState(true);
+  // Defaults to true so the UI is permissive until /api/auth/status answers.
+  // When OAuth is disabled (local dev), the backend always returns canEdit=true.
+  const [canEdit, setCanEdit] = useState(true);
   const [chatUserId, setChatUserId] = useState(() => user.name);
 
   useEffect(() => {
@@ -44,6 +47,7 @@ export default function App() {
       .then((r) => r.json())
       .then((data) => {
         setIsAuthenticated(data.authenticated);
+        setCanEdit(Boolean(data.canEdit));
         if (data.authenticated && data.user) {
           const name = data.user.fullName || data.user.name;
           setUser({
@@ -1093,6 +1097,7 @@ export default function App() {
         user={user}
         loginUrl={loginUrl}
         isAuthenticated={isAuthenticated}
+        canEdit={canEdit}
         isPublishing={publishStatus.active}
         publishingUserName={publishStatus.userName}
         onToggleTheme={toggleTheme}

frontend/src/components/TopBar.tsx

@@ -15,6 +15,8 @@ import {
   MoreHorizontal,
   FileText,
   Trash2,
+  PencilLine,
+  Lock,
 } from "lucide-react";
 import { Tooltip } from "./Tooltip";
 import { SyncIndicator } from "./SyncIndicator";
@@ -29,6 +31,17 @@ interface TopBarProps {
   user: CollabUser;
   loginUrl: string | null;
   isAuthenticated: boolean;
+  /**
+   * True when the signed-in user has write access on the backing Space
+   * (Space owner, or org member with a `write`/`admin` role, or
+   * `contributor` with at least one write resource group). When false
+   * the editor is effectively read-only: the backend rejects mutating
+   * routes with 403, so we mirror that on the UI by surfacing a
+   * "Read-only" badge and disabling the Publish action up front.
+   * Defaults to true in callers so the UI is permissive until the
+   * status endpoint answers.
+   */
+  canEdit?: boolean;
   /** True while any collaborator has a publish in progress. */
   isPublishing?: boolean;
   /** Name of the user who initiated the running publish, if known. */
@@ -52,6 +65,7 @@ export function TopBar({
   user,
   loginUrl,
   isAuthenticated,
+  canEdit = true,
   isPublishing = false,
   publishingUserName = null,
   onToggleTheme,
@@ -59,11 +73,17 @@ export function TopBar({
   onOpenPublish,
   onOpenMobileToc,
 }: TopBarProps) {
-  const publishTooltip = isPublishing
-    ? publishingUserName
-      ? `${publishingUserName} is publishing...`
-      : "Publish in progress..."
-    : "Publish article";
+  const publishTooltip = !canEdit
+    ? "Read-only access - you don't have write rights on this Space"
+    : isPublishing
+      ? publishingUserName
+        ? `${publishingUserName} is publishing...`
+        : "Publish in progress..."
+      : "Publish article";
+
+  const accessTooltip = canEdit
+    ? "Editor access - you can write to this Space"
+    : "Read-only access - ask an org admin to grant you a write role";
 
   // Dev / utility menu state (Load demo, Reset article). Kept out of
   // the slash menu so it doesn't clutter the authoring surface.
@@ -253,7 +273,7 @@ export function TopBar({
           className="icon-btn icon-btn--primary"
           onClick={onOpenPublish}
           aria-label="Publish article"
-          disabled={isPublishing}
+          disabled={isPublishing || !canEdit}
           aria-busy={isPublishing || undefined}
         >
           <Upload size={18} />
@@ -271,6 +291,19 @@ export function TopBar({
           Sign in with HF
         </a>
       ) : (
+        <>
+          {isAuthenticated && (
+            <Tooltip title={accessTooltip}>
+              <span
+                className={`chip chip--sm ${canEdit ? "chip--editor" : "chip--readonly"}`}
+                style={{ marginLeft: 4 }}
+                aria-label={canEdit ? "Editor access" : "Read-only access"}
+              >
+                {canEdit ? <PencilLine size={11} /> : <Lock size={11} />}
+                {canEdit ? "Editor" : "Read-only"}
+              </span>
+            </Tooltip>
+          )}
         <div
           className="top-bar__menu"
           ref={accountMenuRef}
@@ -312,6 +345,7 @@ export function TopBar({
             </div>
           )}
         </div>
+        </>
       )}
     </div>
   );

frontend/src/styles/_ui.css

@@ -121,6 +121,26 @@
 .chip--clickable:hover { filter: brightness(1.1); }
 .chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
 
+/* Access badges shown next to the user chip when authenticated.
+   --editor confirms write access; --readonly signals the user is signed
+   in but lacks a write role on the backing Space (so mutating actions
+   are disabled). Both stay subtle so they don't compete with the
+   colored user chip. */
+.chip--editor {
+  background: color-mix(in srgb, var(--ed-success) 14%, transparent);
+  color: var(--ed-success);
+  border: 1px solid color-mix(in srgb, var(--ed-success) 40%, transparent);
+  gap: 4px;
+  font-weight: 500;
+}
+.chip--readonly {
+  background: var(--ed-surface-hover);
+  color: var(--ed-text-secondary);
+  border: 1px solid var(--ed-border);
+  gap: 4px;
+  font-weight: 500;
+}
+
 /* ---- Surface (replaces MUI Paper) ---- */
 .surface {
   background: var(--ed-surface);