diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx index d27cc0379d729fa87b9954b62cb803df148c3346..cd6f2c67e1a2e16e6f8ff93aac3d3b6a08c98661 100644 --- a/apps/web/src/components/AppSidebarLayout.tsx +++ b/apps/web/src/components/AppSidebarLayout.tsx @@ -19,7 +19,10 @@ import LegacyThreadSidebar from "./LegacySidebar"; import ThreadSidebar from "./Sidebar"; import { SettingsSidebarNav } from "./settings/SettingsSidebarNav"; import { SidebarChromeHeader } from "./sidebar/SidebarChrome"; -import { useSidebarStageBackdropVariant } from "./SidebarStageBackdrop"; +import { + resolveSidebarStageFocusRingOffsetClass, + useSidebarStageBackdropVariant, +} from "./SidebarStageBackdrop"; import { useProjects } from "../state/entities"; import { resolveInitialThreadSidebarWidth, @@ -105,7 +108,10 @@ function SidebarControl() { "pointer-events-auto", isSidebarVisible && stageBackdropVariant && - "[:hover,[data-pressed]]:bg-white/15 focus-visible:ring-white/90 focus-visible:ring-offset-blue-700 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white!", + "focus-visible:ring-white/90 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white! [:hover,[data-pressed]]:bg-white/15", + isSidebarVisible && + stageBackdropVariant && + resolveSidebarStageFocusRingOffsetClass(stageBackdropVariant), )} aria-label="Toggle main sidebar" /> diff --git a/apps/web/src/components/SidebarStageBackdrop.test.tsx b/apps/web/src/components/SidebarStageBackdrop.test.tsx index c34eec58316dfcf5321ee95fcfc2c5f1ecd762e4..eca741af8c892eeea7d4f921fd80cf78d0b73674 100644 --- a/apps/web/src/components/SidebarStageBackdrop.test.tsx +++ b/apps/web/src/components/SidebarStageBackdrop.test.tsx @@ -4,7 +4,9 @@ import { renderToStaticMarkup } from "react-dom/server"; import { resolveEnvironmentIdentificationPillLabel, resolveSidebarStageBackdropVariant, + resolveSidebarStageFocusRingOffsetClass, StageBackdropArt, + StageBackdropButtonArt, } from "./SidebarStageBackdrop"; describe("SidebarStageBackdrop", () => { @@ -22,6 +24,15 @@ describe("SidebarStageBackdrop", () => { expect(resolveEnvironmentIdentificationPillLabel("Alpha")).toBeNull(); }); + it("matches the focus-ring offset to each artwork palette", () => { + expect(resolveSidebarStageFocusRingOffsetClass("nightly")).toBe( + "focus-visible:ring-offset-(--stage-night-bottom)", + ); + expect(resolveSidebarStageFocusRingOffsetClass("dev")).toBe( + "focus-visible:ring-offset-(--stage-art-bottom)", + ); + }); + it.each(["nightly", "dev"] as const)( "uses unique SVG definition ids when %s artwork is rendered more than once", (variant) => { @@ -37,4 +48,26 @@ describe("SidebarStageBackdrop", () => { expect(new Set(ids).size).toBe(ids.length); }, ); + + it("paints each artwork variant with theme-owned color tokens", () => { + const nightlyMarkup = renderToStaticMarkup(); + const devMarkup = renderToStaticMarkup(); + + expect(nightlyMarkup).toContain("var(--stage-night-bottom)"); + expect(nightlyMarkup).toContain("var(--stage-night-line)"); + expect(devMarkup).toContain("var(--stage-art-bottom)"); + expect(devMarkup).toContain("var(--stage-art-line)"); + expect(nightlyMarkup).not.toMatch(/#[0-9a-f]{3,8}/i); + expect(devMarkup).not.toMatch(/#[0-9a-f]{3,8}/i); + }); + + it.each([ + ["nightly", "96 0 8192 96"], + ["dev", "64 0 8192 96"], + ] as const)("uses the compact %s crop inside the send button", (variant, viewBox) => { + const markup = renderToStaticMarkup(); + + expect(markup).toContain(`viewBox="${viewBox}"`); + expect(markup).toContain(`stage-${variant === "dev" ? "blueprint" : "nightly"}`); + }); }); diff --git a/apps/web/src/components/SidebarStageBackdrop.tsx b/apps/web/src/components/SidebarStageBackdrop.tsx index ee669e94bd47b14b39fb59a99ea903bccfa5ec64..549b8a06b88a4c2681a0910c661cdd694a29fa1e 100644 --- a/apps/web/src/components/SidebarStageBackdrop.tsx +++ b/apps/web/src/components/SidebarStageBackdrop.tsx @@ -23,6 +23,14 @@ export function resolveSidebarStageBackdropVariant( return null; } +export function resolveSidebarStageFocusRingOffsetClass( + variant: SidebarStageBackdropVariant, +): string { + return variant === "nightly" + ? "focus-visible:ring-offset-(--stage-night-bottom)" + : "focus-visible:ring-offset-(--stage-art-bottom)"; +} + export function resolveEnvironmentIdentificationPillLabel( stageLabel: string, ): EnvironmentIdentificationPillLabel | null { @@ -62,6 +70,10 @@ export function StageBackdropArt({ variant }: { variant: SidebarStageBackdropVar return variant === "nightly" ? : ; } +export function StageBackdropButtonArt({ variant }: { variant: SidebarStageBackdropVariant }) { + return variant === "nightly" ? : ; +} + const NIGHTLY_STARS: ReadonlyArray<{ cx: number; cy: number; @@ -93,7 +105,7 @@ const NIGHTLY_SPARKLES: ReadonlyArray<{ x: number; y: number }> = [ { x: 246, y: 26 }, ]; -function NightlySkyArt() { +function NightlySkyArt({ compact = false }: { compact?: boolean }) { const idPrefix = useId().replaceAll(":", ""); const skyId = `${idPrefix}-stage-night-sky`; const glowId = `${idPrefix}-stage-night-glow`; @@ -104,10 +116,10 @@ function NightlySkyArt() { return ( @@ -120,9 +132,9 @@ function NightlySkyArt() { gradientUnits="userSpaceOnUse" spreadMethod="reflect" > - - - + + + - - - + + + - - - + + + - + {NIGHTLY_STARS.map((star) => ( ))} - + {NIGHTLY_SPARKLES.map((sparkle) => ( @@ -191,7 +216,7 @@ function NightlySkyArt() { ); } -function DevBlueprintArt() { +function DevBlueprintArt({ compact = false }: { compact?: boolean }) { const idPrefix = useId().replaceAll(":", ""); const paperId = `${idPrefix}-stage-bp-paper`; const glowId = `${idPrefix}-stage-bp-glow`; @@ -205,10 +230,10 @@ function DevBlueprintArt() { return ( @@ -221,9 +246,9 @@ function DevBlueprintArt() { gradientUnits="userSpaceOnUse" spreadMethod="reflect" > - - - + + + - - - + + + - - - + + + - - - + + + - + - + @@ -281,7 +328,12 @@ function DevBlueprintArt() { - + @@ -294,7 +346,12 @@ function DevBlueprintArt() { - + @@ -318,7 +375,7 @@ function DevBlueprintArt() { - + diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.test.ts b/apps/web/src/components/chat/ComposerPrimaryActions.test.ts index ba416e9fce3008219d118f81eff445bc1baa9fad..3dbcd39e9d13c10208b70e06ec451f6b4918edd8 100644 --- a/apps/web/src/components/chat/ComposerPrimaryActions.test.ts +++ b/apps/web/src/components/chat/ComposerPrimaryActions.test.ts @@ -1,13 +1,18 @@ import { createElement } from "react"; import { renderToStaticMarkup } from "react-dom/server"; -import { describe, expect, it, vi } from "vite-plus/test"; +import { afterEach, describe, expect, it, vi } from "vite-plus/test"; + +const stageArtworkState = vi.hoisted(() => ({ + mode: "none" as "artwork" | "none", + variant: null as "nightly" | "dev" | null, +})); vi.mock("~/hooks/useSettings", () => ({ - useEnvironmentIdentificationMode: () => "none", + useEnvironmentIdentificationMode: () => stageArtworkState.mode, })); vi.mock("../SidebarStageBackdrop", () => ({ - StageBackdropButtonArt: () => null, - useSidebarStageBackdropVariant: () => null, + StageBackdropButtonArt: ({ variant }: { variant: string }) => `stage-${variant}`, + useSidebarStageBackdropVariant: (enabled = true) => (enabled ? stageArtworkState.variant : null), })); import { ComposerPrimaryActions, formatPendingPrimaryActionLabel } from "./ComposerPrimaryActions"; @@ -60,6 +65,32 @@ function renderStandaloneStop() { ); } +function renderSendButton() { + return renderToStaticMarkup( + createElement(ComposerPrimaryActions, { + compact: true, + pendingAction: null, + isRunning: false, + showPlanFollowUpPrompt: false, + promptHasText: true, + isSendBusy: false, + sendDisabledReason: null, + isConnecting: false, + isEnvironmentUnavailable: false, + isPreparingWorktree: false, + hasSendableContent: true, + onPreviousPendingQuestion: () => {}, + onInterrupt: () => {}, + onImplementPlanInNewThread: () => {}, + }), + ); +} + +afterEach(() => { + stageArtworkState.mode = "none"; + stageArtworkState.variant = null; +}); + describe("formatPendingPrimaryActionLabel", () => { it("returns 'Submitting...' while responding", () => { expect( @@ -164,4 +195,24 @@ describe("ComposerPrimaryActions", () => { expect(renderStandaloneStop()).toContain("size-8 sm:h-8 sm:w-8"); expect(renderStandaloneStop()).not.toContain("sm:size-7"); }); + + it("renders stage artwork inside the send button when artwork identification is active", () => { + stageArtworkState.mode = "artwork"; + stageArtworkState.variant = "nightly"; + + const markup = renderSendButton(); + + expect(markup).toContain("stage-nightly"); + expect(markup).toContain("bg-transparent text-white"); + expect(markup).not.toContain("bg-message-action text-message-action-foreground"); + }); + + it("keeps the normal send-button fill when artwork identification is inactive", () => { + stageArtworkState.variant = "nightly"; + + const markup = renderSendButton(); + + expect(markup).not.toContain("stage-nightly"); + expect(markup).toContain("bg-message-action text-message-action-foreground"); + }); }); diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx index 52d2556bbf906b947e032a0a259be6945e239f3f..d8626496ae7d8c8a88e110447228da6f59932f65 100644 --- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx +++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx @@ -1,6 +1,8 @@ import { memo, type PointerEventHandler } from "react"; import { ChevronDownIcon, ChevronLeftIcon } from "lucide-react"; +import { useEnvironmentIdentificationMode } from "~/hooks/useSettings"; import { cn } from "~/lib/utils"; +import { StageBackdropButtonArt, useSidebarStageBackdropVariant } from "../SidebarStageBackdrop"; import { Button } from "../ui/button"; import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu"; import { Spinner } from "../ui/spinner"; @@ -73,7 +75,11 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ const pointerFocusProps = preserveComposerFocusOnPointerDown ? { onPointerDown: preventPointerFocus } : undefined; + const environmentIdentificationMode = useEnvironmentIdentificationMode(); const isSendDisabled = sendDisabledReason !== null; + const stageBackdropVariant = useSidebarStageBackdropVariant( + environmentIdentificationMode === "artwork", + ); const renderStopGenerationButton = (insidePendingAction: boolean) => ( + ) : null} {isConnecting || isSendBusy ? (