fix(webapp): address the review findings on the appearance work

Restores the Logs entry for teams with logs access but not query access.
Extracting the side menu's sections dropped a clause from the Observability
gate, so the whole group disappeared for them.

Gives the profile page's "Customize sidebar" dialog the same feature flags
the side menu sees. /account sits outside an org, so `useFeatureFlags`
returned nothing and the dialog offered a shorter section list - and saving
it replaced the stored order and hidden items, dropping the sections it had
never shown. Flags are now resolved in the loader through a shared helper so
the two can't drift.

Rate-limits the appearance writes. Every profile row saves on its own, and
the five appearance actions were the only ones a scripted POST could drive
unthrottled - the contrast slider being the easiest. The repeated flag gate
moves into that same helper. `update-theme` now rejects an unknown theme
instead of quietly resetting it to dark, matching its sibling action and
the /resources/preferences/theme route.

Keeps the span title legible on the light themes. The run-type accents are
drawn to clear 3:1 as icons; as 16px semibold text tasks (3.38) and agents
(3.96) fall under 4.5:1 on Light and White, so the title takes the text
colour there and the icon carries the type.

Shows the contrast slider's value label on keyboard focus, via
focus-visible so a mouse click doesn't strand it on screen.

Author: samejr

apps/webapp/app/components/navigation/sideMenuSections.tsx

@@ -122,7 +122,7 @@ export function buildSideMenuSections({
     });
   }
 
-  if (isAdmin || featureFlags.hasQueryAccess) {
+  if (isAdmin || featureFlags.hasQueryAccess || featureFlags.hasLogsPageAccess) {
     staticSections.push({
       id: "metrics",
       title: "Observability",

apps/webapp/app/components/primitives/Slider.tsx

@@ -166,8 +166,11 @@ export function Slider({
             <span
               className={cn(
                 "pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 rounded border border-grid-bright bg-background-bright px-1.5 py-0.5 text-xs tabular-nums text-text-bright shadow-md transition-opacity",
-                // Not keyed off focus: the thumb keeps it after a click.
-                isDragging ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100"
+                // focus-visible, not focus: a click leaves the thumb focused,
+                // which would strand the label on screen.
+                isDragging
+                  ? "opacity-100"
+                  : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"
               )}
             >
               {valueTooltip(currentValue)}

apps/webapp/app/presenters/OrganizationsPresenter.server.ts

@@ -7,9 +7,7 @@ import { newOrganizationPath, newProjectPath } from "~/utils/pathBuilder";
 import { SelectBestEnvironmentPresenter } from "./SelectBestEnvironmentPresenter.server";
 import { sortEnvironments } from "~/utils/environmentSort";
 import { defaultAvatar, parseAvatar } from "~/components/primitives/Avatar";
-import { env } from "~/env.server";
-import { flags } from "~/v3/featureFlags.server";
-import { validatePartialFeatureFlags } from "~/v3/featureFlags";
+import { globalFeatureFlags, mergeOrgFeatureFlags } from "~/v3/featureFlags.server";
 import { hydrateEnvsWithActivity } from "./v3/BranchesPresenter.server";
 
 export class OrganizationsPresenter {
@@ -155,23 +153,10 @@ export class OrganizationsPresenter {
       },
     });
 
-    // Get global feature flags with env-var-based defaults
-    const globalFlags = await flags({
-      defaultValues: {
-        hasAiAccess: env.AI_FEATURES_ENABLED === "1",
-        hasDashboardAgentAccess: env.DASHBOARD_AGENT_ENABLED === "1",
-        hasPrivateConnections: env.PRIVATE_CONNECTIONS_ENABLED === "1",
-      },
-    });
+    const globalFlags = await globalFeatureFlags();
 
     return orgs.map((org) => {
-      const orgFlagsResult = org.featureFlags
-        ? validatePartialFeatureFlags(org.featureFlags as Record<string, unknown>)
-        : ({ success: false } as const);
-      const orgFlags = orgFlagsResult.success ? orgFlagsResult.data : {};
-
-      // Combine global flags with org flags (org flags win)
-      const combinedFlags = { ...globalFlags, ...orgFlags };
+      const combinedFlags = mergeOrgFeatureFlags(globalFlags, org.featureFlags);
 
       return {
         id: org.id,

apps/webapp/app/routes/account._index/route.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { useFetcher, useLoaderData } from "@remix-run/react";
-import { type ActionFunction, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import {
+  type ActionFunction,
+  json,
+  type LoaderFunctionArgs,
+  type SerializeFrom,
+} from "@remix-run/server-runtime";
 import { z } from "zod";
 import { EditPencilIcon } from "~/assets/icons/EditPencilIcon";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
@@ -54,7 +59,6 @@ import {
 } from "~/components/themeOptions";
 import { prisma } from "~/db.server";
 import { SelectBestEnvironmentPresenter } from "~/presenters/SelectBestEnvironmentPresenter.server";
-import { useFeatureFlags } from "~/hooks/useFeatureFlags";
 import {
   applyThemeContrast,
   applyThemePreference,
@@ -64,6 +68,7 @@ import {
 import { useFeatures } from "~/hooks/useFeatures";
 import { useHasAdminAccess, useUser } from "~/hooks/useUser";
 import { updateUserEmail, updateUserMarketingEmails, updateUserName } from "~/models/user.server";
+import { logger } from "~/services/logger.server";
 import { profileUpdateRateLimiter } from "~/services/profileUpdateRateLimiter.server";
 import { type EmailOwnership, getEmailOwnership } from "~/services/ssoManagedIdentity.server";
 import {
@@ -82,9 +87,9 @@ import {
   normalizeThemePreference,
   SystemDarkTheme,
   SystemLightTheme,
-  type ThemePreference,
+  ThemePreference,
 } from "~/utils/themePreference";
-import { cachedFlag } from "~/v3/featureFlags.server";
+import { cachedFlag, resolveOrganizationFeatureFlags } from "~/v3/featureFlags.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { emailSchema, MAX_EMAIL_LENGTH } from "~/utils/emailValidation";
 import { pageMeta } from "~/utils/pageTitle";
@@ -194,6 +199,25 @@ function profileUpdateError(error: string, status: number) {
   return json({ success: false as const, error }, { status });
 }
 
+/**
+ * Shared gate for the appearance writes: same rate limit as the profile writes,
+ * then the theme-switcher flag. Returns the user so the caller needn't load it
+ * a second time.
+ */
+async function requireAppearanceAccess(request: Request, userId: string) {
+  const rateLimited = await checkProfileUpdateRateLimit(userId);
+  if (rateLimited) return { error: rateLimited };
+
+  const user = await requireUser(request);
+  const showThemeSwitcher =
+    user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
+  if (!showThemeSwitcher) {
+    return { error: profileUpdateError("Not available", 404) };
+  }
+
+  return { user };
+}
+
 /** The only limit a scripted POST can't skip. */
 async function checkProfileUpdateRateLimit(userId: string) {
   const limit = await profileUpdateRateLimiter.limit(`user:${userId}`);
@@ -216,6 +240,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
     organization: { slug: string };
     project: { slug: string };
     environment: { slug: string };
+    // Resolved here, not from route matches: /account sits outside an org, so
+    // `useFeatureFlags` would see none and the dialog would offer a shorter
+    // section list than the side menu - and saving it drops the rest.
+    featureFlags: Awaited<ReturnType<typeof resolveOrganizationFeatureFlags>>;
   } | null = null;
   try {
     const { organization, project, environment } = await new SelectBestEnvironmentPresenter().call({
@@ -225,8 +253,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
       organization: { slug: organization.slug },
       project: { slug: project.slug },
       environment: { slug: environment.slug },
+      featureFlags: await resolveOrganizationFeatureFlags(organization.featureFlags),
     };
-  } catch {}
+  } catch (error) {
+    logger.debug("Account page: no sidebar context for this user", {
+      userId: user.id,
+      error: error instanceof Error ? error.message : error,
+    });
+  }
 
   return json({ showThemeSwitcher, sidebarContext, emailOwnership });
 }
@@ -237,79 +271,70 @@ export const action: ActionFunction = async ({ request }) => {
   const formData = await request.formData();
 
   if (formData.get("action") === "update-theme") {
-    const user = await requireUser(request);
-    const showThemeSwitcher =
-      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
-    if (!showThemeSwitcher) {
-      return json({ error: "Not available" }, { status: 404 });
-    }
-    const theme = normalizeThemePreference(formData.get("theme"));
-    await updateThemePreference({ user, theme });
+    const gate = await requireAppearanceAccess(request, userId);
+    if ("error" in gate) return gate.error;
+    // Strict, matching /resources/preferences/theme: an unknown value must fail
+    // rather than quietly resetting a saved theme to the default.
+    const theme = ThemePreference.safeParse(formData.get("theme"));
+    if (!theme.success) return profileUpdateError("Invalid theme", 400);
+    await updateThemePreference({ user: gate.user, theme: theme.data });
     return json({ success: true });
   }
 
   if (formData.get("action") === "update-contrast") {
-    const user = await requireUser(request);
-    const showThemeSwitcher =
-      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
-    if (!showThemeSwitcher) {
-      return json({ error: "Not available" }, { status: 404 });
-    }
+    const gate = await requireAppearanceAccess(request, userId);
+    if ("error" in gate) return gate.error;
     const contrast = normalizeThemeContrast(formData.get("contrast"));
-    await updateContrastPreference({ user, contrast });
+    await updateContrastPreference({ user: gate.user, contrast });
     return json({ success: true });
   }
 
   if (formData.get("action") === "update-icon-contrast") {
-    const user = await requireUser(request);
-    const showThemeSwitcher =
-      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
-    if (!showThemeSwitcher) {
-      return json({ error: "Not available" }, { status: 404 });
-    }
+    const gate = await requireAppearanceAccess(request, userId);
+    if ("error" in gate) return gate.error;
     await updateIconContrastPreference({
-      user,
+      user: gate.user,
       iconContrast: formData.get("iconContrast") === "true",
     });
     return json({ success: true });
   }
 
   if (formData.get("action") === "update-underline-links") {
-    const user = await requireUser(request);
-    const showThemeSwitcher =
-      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
-    if (!showThemeSwitcher) {
-      return json({ error: "Not available" }, { status: 404 });
-    }
+    const gate = await requireAppearanceAccess(request, userId);
+    if ("error" in gate) return gate.error;
     await updateUnderlineLinksPreference({
-      user,
+      user: gate.user,
       underlineLinks: formData.get("underlineLinks") === "true",
     });
     return json({ success: true });
   }
 
   if (formData.get("action") === "update-system-theme") {
-    const user = await requireUser(request);
-    const showThemeSwitcher =
-      user.admin || (await cachedFlag({ key: "hasThemeSwitcher", defaultValue: false }));
-    if (!showThemeSwitcher) {
-      return json({ error: "Not available" }, { status: 404 });
-    }
+    const gate = await requireAppearanceAccess(request, userId);
+    if ("error" in gate) return gate.error;
     // Strict: an unknown value must fail, not silently reset.
     const end = formData.get("end");
     if (end === "light") {
       const theme = SystemLightTheme.safeParse(formData.get("theme"));
-      if (!theme.success) return json({ error: "Invalid theme" }, { status: 400 });
-      await updateSystemThemePreference({ user, end: "systemLightTheme", theme: theme.data });
+      if (!theme.success) return profileUpdateError("Invalid theme", 400);
+      await updateSystemThemePreference({
+        user: gate.user,
+        end: "systemLightTheme",
+        theme: theme.data,
+      });
       return json({ success: true });
     }
     if (end === "dark") {
       const theme = SystemDarkTheme.safeParse(formData.get("theme"));
-      if (!theme.success) return json({ error: "Invalid theme" }, { status: 400 });
-      await updateSystemThemePreference({ user, end: "systemDarkTheme", theme: theme.data });
+      if (!theme.success) return profileUpdateError("Invalid theme", 400);
+      await updateSystemThemePreference({
+        user: gate.user,
+        end: "systemDarkTheme",
+        theme: theme.data,
+      });
       return json({ success: true });
     }
-    return json({ error: "Invalid end" }, { status: 400 });
+    return profileUpdateError("Invalid end", 400);
   }
 
   if (formData.get("action") === "update-name") {
@@ -648,15 +673,10 @@ function MarketingEmailsSwitch() {
 function CustomizeSidebarButton({
   context,
 }: {
-  context: {
-    organization: { slug: string };
-    project: { slug: string };
-    environment: { slug: string };
-  };
+  context: NonNullable<SerializeFrom<typeof loader>["sidebarContext"]>;
 }) {
   const user = useUser();
   const isAdmin = useHasAdminAccess();
-  const featureFlags = useFeatureFlags();
   const { isManagedCloud } = useFeatures();
   const favorites = useFavorites();
   const [isOpen, setIsOpen] = useState(false);
@@ -699,18 +719,16 @@ function CustomizeSidebarButton({
           },
         ]
       : []),
-    ...buildSideMenuSections({ ...context, isAdmin, featureFlags, isManagedCloud }).map(
-      (section) => ({
-        id: section.id,
-        title: section.title,
-        items: section.items.map((item) => ({
-          id: item.id,
-          name: item.name,
-          icon: item.icon,
-          defaultHidden: item.defaultHidden,
-        })),
-      })
-    ),
+    ...buildSideMenuSections({ ...context, isAdmin, isManagedCloud }).map((section) => ({
+      id: section.id,
+      title: section.title,
+      items: section.items.map((item) => ({
+        id: item.id,
+        name: item.name,
+        icon: item.icon,
+        defaultHidden: item.defaultHidden,
+      })),
+    })),
   ];
 
   return (

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -449,7 +449,11 @@ function RunBody({
           <Header2
             className={cn(
               "overflow-x-hidden",
-              run.isAgentRun ? "text-agents" : run.isScheduled ? "text-schedules" : "text-tasks"
+              // The run-type accents are drawn for 3:1 as icons; as 16px text the
+              // tasks and agents blues fall under 4.5:1 on the light themes, so
+              // the title takes the text colour there and the icon carries type.
+              run.isAgentRun ? "text-agents" : run.isScheduled ? "text-schedules" : "text-tasks",
+              "light:text-text-bright"
             )}
           >
             <span className="truncate">

apps/webapp/app/v3/featureFlags.server.ts

@@ -6,7 +6,9 @@ import {
   type FeatureFlagCatalogSchema,
   type FeatureFlagKey,
   FeatureFlagCatalog,
+  validatePartialFeatureFlags,
 } from "~/v3/featureFlags";
+import { env } from "~/env.server";
 import { stampMintKindFlip } from "~/v3/runOpsMigration/mintFlipGrace";
 
 export type FlagsOptions<T extends FeatureFlagKey> = {
@@ -220,3 +222,34 @@ export async function applyGlobalMintKindFlip(
     return makeSetMultipleFlags(tx)(stamped);
   });
 }
+
+/** The global flag set, with the env-var defaults this app applies. */
+export async function globalFeatureFlags() {
+  return flags({
+    defaultValues: {
+      hasAiAccess: env.AI_FEATURES_ENABLED === "1",
+      hasDashboardAgentAccess: env.DASHBOARD_AGENT_ENABLED === "1",
+      hasPrivateConnections: env.PRIVATE_CONNECTIONS_ENABLED === "1",
+    },
+  });
+}
+
+/** The global set with one org's overrides on top. */
+export function mergeOrgFeatureFlags(
+  globalFlags: Partial<FeatureFlagCatalog>,
+  orgFeatureFlags: unknown
+) {
+  const parsed = orgFeatureFlags
+    ? validatePartialFeatureFlags(orgFeatureFlags as Record<string, unknown>)
+    : ({ success: false } as const);
+  return { ...globalFlags, ...(parsed.success ? parsed.data : {}) };
+}
+
+/**
+ * The flags that apply to one organization. Server-side callers that need the
+ * same set the side menu sees should use this rather than assembling their own,
+ * so a partial set can't silently disagree with it.
+ */
+export async function resolveOrganizationFeatureFlags(orgFeatureFlags: unknown) {
+  return mergeOrgFeatureFlags(await globalFeatureFlags(), orgFeatureFlags);
+}