Polish the app title bar: quiet Beta tag, no traffic-light overlap (#1207)

Replace the filled Beta pill next to the executor wordmark with quiet
muted-mono metadata, matching the registry-minimal design language, and
extract a shared Wordmark so the desktop and dashboard shells render the
brand identically. Apply the macOS traffic-light offset to the mobile
sidebar overlay and the collapsed top bar as well, so the native window
controls never land on top of the wordmark when the window is narrow.

Author: RhysSullivan

.changeset/desktop-titlebar-polish.md

@@ -0,0 +1,8 @@
+---
+"@executor-js/desktop": patch
+"@executor-js/host-selfhost": patch
+"@executor-js/host-cloudflare": patch
+"@executor-js/react": patch
+---
+
+Polish the app's title bar. The release tag beside the `executor` wordmark is now quiet muted-mono metadata instead of a filled pill, matching the registry-minimal design language, and the wordmark is shared across the desktop and dashboard shells so the brand reads identically everywhere. The macOS traffic-light offset is also applied to the mobile sidebar overlay and the collapsed top bar, so the native window controls never sit on top of the wordmark when the window is narrow.

packages/app/src/web/shell.tsx

@@ -14,6 +14,7 @@ import { IntegrationIconWithAccount } from "@executor-js/react/components/integr
 import { CommandPalette } from "@executor-js/react/components/command-palette";
 import { useClientPlugins, useIntegrationPlugins } from "@executor-js/sdk/client";
 import { SidebarUpdateCard } from "@executor-js/react/components/update-card";
+import { Wordmark } from "@executor-js/react/components/wordmark";
 import { ServerConnectionMenu } from "./server-connection-menu";
 
 // ── Env ─────────────────────────────────────────────────────────────────
@@ -161,16 +162,8 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show
     <>
       {props.showBrand !== false && (
         <div className="desktop-macos-titlebar flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border px-4">
-          <Link
-            to="/{-$orgSlug}"
-            className="desktop-macos-no-drag flex shrink-0 items-center gap-1.5"
-          >
-            <span className="font-mono text-sm font-medium tracking-tight text-foreground">
-              executor
-            </span>
-            <span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary">
-              Beta
-            </span>
+          <Link to="/{-$orgSlug}" className="desktop-macos-no-drag flex shrink-0 items-center">
+            <Wordmark />
           </Link>
           <div className="desktop-macos-no-drag ml-auto flex min-w-0 flex-1 justify-end pl-3">
             <ServerConnectionMenu variant="header" />
@@ -312,21 +305,16 @@ export function Shell() {
             onClick={() => setMobileSidebarOpen(false)}
           />
           <div className="relative flex h-full w-[84vw] max-w-xs flex-col border-r border-sidebar-border bg-sidebar shadow-2xl">
-            <div className="flex h-12 shrink-0 items-center justify-between border-b border-sidebar-border px-4">
-              <Link to="/{-$orgSlug}" className="flex items-center gap-1.5">
-                <span className="font-mono text-sm font-medium tracking-tight text-foreground">
-                  executor
-                </span>
-                <span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary">
-                  Beta
-                </span>
+            <div className="desktop-macos-titlebar flex h-12 shrink-0 items-center justify-between border-b border-sidebar-border px-4">
+              <Link to="/{-$orgSlug}" className="desktop-macos-no-drag flex items-center">
+                <Wordmark />
               </Link>
               <Button
                 variant="ghost"
                 size="icon-sm"
                 aria-label="Close navigation"
                 onClick={() => setMobileSidebarOpen(false)}
-                className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
+                className="desktop-macos-no-drag text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
               >
                 <svg viewBox="0 0 16 16" className="size-3.5">
                   <path
@@ -356,14 +344,16 @@ export function Shell() {
             the top and their borders line up with the sidebar header. */}
         <div className="desktop-macos-main-titlebar" />
 
-        {/* Mobile top bar */}
-        <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
+        {/* Mobile top bar. The desktop-macos-titlebar offset keeps the
+            far-left hamburger clear of the native traffic lights when the macOS
+            window is forced below the md breakpoint (issue #1125). */}
+        <div className="desktop-macos-titlebar flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
           <Button
             variant="outline"
             size="icon-sm"
             aria-label="Open navigation"
             onClick={() => setMobileSidebarOpen(true)}
-            className="bg-card hover:bg-accent/50"
+            className="desktop-macos-no-drag bg-card hover:bg-accent/50"
           >
             <svg viewBox="0 0 16 16" className="size-4">
               <path
@@ -374,10 +364,8 @@ export function Shell() {
               />
             </svg>
           </Button>
-          <Link to="/{-$orgSlug}" className="flex items-center gap-1.5">
-            <span className="font-mono text-sm font-medium tracking-tight text-foreground">
-              executor
-            </span>
+          <Link to="/{-$orgSlug}" className="desktop-macos-no-drag flex items-center">
+            <Wordmark />
           </Link>
           <div className="w-8 shrink-0" />
         </div>

packages/react/src/components/wordmark.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../lib/utils";
+
+/**
+ * The product wordmark: `executor` set in Geist Mono, with a quiet `beta` tag.
+ *
+ * Registry-minimal (see design.md): identity comes from restraint, not
+ * decoration. The release tag is muted mono metadata sitting next to the
+ * wordmark, NOT a filled pill or a brand-hued badge. Shared by the desktop/web
+ * shell and the multiplayer shell so the brand reads identically everywhere.
+ */
+export function Wordmark(props: { readonly className?: string }) {
+  return (
+    <span className={cn("inline-flex items-baseline gap-1.5", props.className)}>
+      <span className="font-mono text-sm font-medium tracking-tight text-foreground">executor</span>
+      <span className="font-mono text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+        beta
+      </span>
+    </span>
+  );
+}

packages/react/src/multiplayer/shell.tsx

@@ -22,6 +22,7 @@ import {
   integrationPresetIconUrl,
 } from "../components/integration-favicon";
 import { CommandPalette } from "../components/command-palette";
+import { Wordmark } from "../components/wordmark";
 import { useClientPlugins, useIntegrationPlugins } from "@executor-js/sdk/client";
 import { useAuth } from "./auth-context";
 
@@ -113,11 +114,8 @@ export interface ShellProps {
 
 function Brand(props: { onNavigate?: () => void }) {
   return (
-    <Link to="/{-$orgSlug}" onClick={props.onNavigate} className="flex items-center gap-1.5">
-      <span className="font-mono text-sm font-medium tracking-tight text-foreground">executor</span>
-      <span className="rounded-sm bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">
-        Beta
-      </span>
+    <Link to="/{-$orgSlug}" onClick={props.onNavigate} className="flex items-center">
+      <Wordmark />
     </Link>
   );
 }