feat: fix topbar design

Rieranthony · Rieranthony · commit 336091e91b73 · 2026-03-20T12:18:35.000+07:00
diff --git a/apps/web/src/app/(lander-docs)/components/full-width-border.tsx b/apps/web/src/app/(lander-docs)/components/full-width-border.tsx
@@ -9,7 +9,7 @@ export function FullWidthBorder({ className }: FullWidthBorderProps) {
 		<div
 			aria-hidden="true"
 			className={cn(
-				"-translate-x-1/2 pointer-events-none absolute left-1/2 z-20 h-px w-screen border-t border-dashed",
+				"-translate-x-1/2 pointer-events-none absolute left-1/2 z-1 h-px w-screen border-t border-dashed",
 				className
 			)}
 		/>
diff --git a/apps/web/src/app/(lander-docs)/components/install/index.tsx b/apps/web/src/app/(lander-docs)/components/install/index.tsx
@@ -21,7 +21,7 @@ export const Install = () => (
 			</div>
 			<div
 				className={cn(
-					"relative flex flex-col justify-center gap-4 px-4 py-16 lg:w-1/2 lg:border-r lg:px-8 xl:px-12"
+					"relative flex flex-col justify-center gap-4 px-4 py-16 lg:w-1/2 lg:px-8 xl:px-12"
 				)}
 			>
 				<p className="font-mono text-primary/70 text-xs">
diff --git a/apps/web/src/app/(lander-docs)/components/precision-flow-section.test.tsx b/apps/web/src/app/(lander-docs)/components/precision-flow-section.test.tsx
@@ -37,7 +37,7 @@ describe("PrecisionFlowSection", () => {
 
 		expect(html).toContain("How do I delete my account?");
 		expect(html).toContain("How it learns");
-		expect(html).toContain("When Cossistant does not know, it asks your team.");
+		expect(html).toContain("When the AI agent doesn&#x27;t know,");
 		expect(html).toContain("Customer asks");
 		expect(html).toContain("Cossistant checks");
 		expect(html).toContain("Your team answers");
@@ -107,6 +107,7 @@ describe("PrecisionFlowSection", () => {
 		expect(html).toContain("Reply");
 		expect(html).toContain("Private note");
 		expect(html).toContain('type="file"');
+		expect(html).not.toContain("autofocus");
 		expect(html).not.toContain("How do I delete my account?");
 		expect(html).not.toContain(
 			"I don&#x27;t know this one yet, so I&#x27;m asking the team and saving the answer for next time."
@@ -139,6 +140,7 @@ describe("PrecisionFlowSection", () => {
 		expect(html).toContain('data-text-effect-caret="true"');
 		expect(html).toContain('data-text-effect-visible="true"');
 		expect(html).toContain("Next");
+		expect(html).not.toContain("autofocus");
 		expect(html).not.toContain("How do I delete my account?");
 	});
 
diff --git a/apps/web/src/app/(lander-docs)/components/precision-flow-section.tsx b/apps/web/src/app/(lander-docs)/components/precision-flow-section.tsx
@@ -123,6 +123,7 @@ function PrecisionFlowComposer({
 		);
 		centralBlock = (
 			<ClarificationQuestionBlock
+				autoFocus={false}
 				freeAnswer={composerState.freeAnswer}
 				getSuggestedAnswerButtonRef={(answer) =>
 					answer === PRECISION_FLOW_QUESTION_TWO_ANSWER
@@ -219,6 +220,7 @@ function PrecisionFlowComposer({
 	return (
 		<Composer
 			aboveBlock={aboveBlock}
+			autoFocus={false}
 			bottomBlock={bottomBlock}
 			centralBlock={centralBlock}
 			layoutMode="inline"
diff --git a/apps/web/src/app/(lander-docs)/components/topbar/index.tsx b/apps/web/src/app/(lander-docs)/components/topbar/index.tsx
@@ -151,14 +151,10 @@ export function TopBar({
 	];
 
 	return (
-		<div
-			className={cn(
-				"fixed top-0 right-0 left-0 z-[9999] border-grid-x bg-background",
-				className
-			)}
-		>
-			<div className="container-wrapper relative mx-auto">
-				<div className="container absolute top-0 right-0 left-0 z-50 mx-auto flex items-center bg-background py-4 lg:justify-between">
+		<div className={cn("fixed top-0 right-0 left-0 z-50", className)}>
+			<div className="fixed top-0 right-0 left-0 h-16 min-h-16 min-w-screen border-background border-b bg-background" />
+			<div className="container-wrapper relative mx-auto bg-background">
+				<div className="container z-50 mx-auto flex items-center bg-background py-4 lg:justify-between">
 					<div className="flex items-center gap-3 sm:gap-6">
 						<Sheet>
 							<SheetTrigger asChild>
@@ -223,9 +219,6 @@ export function TopBar({
 					</div>
 					<FullWidthBorder className="bottom-0" />
 				</div>
-				<div className="pointer-events-none absolute top-0 right-0 left-0 z-10 h-20 bg-linear-to-b from-background to-transparent" />
-				<div className="pointer-events-none absolute top-0 right-0 left-0 z-10 h-24 bg-linear-to-b from-background to-transparent" />
-				<div className="pointer-events-none absolute top-0 right-0 left-0 z-10 h-32 bg-linear-to-b from-background to-transparent" />
 			</div>
 		</div>
 	);
diff --git a/apps/web/src/app/(lander-docs)/layout.tsx b/apps/web/src/app/(lander-docs)/layout.tsx
@@ -6,7 +6,7 @@ import { TopBar } from "./components/topbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="relative flex min-h-svh flex-col overflow-clip border-grid-x">
+		<div className="relative flex min-h-svh flex-col overflow-clip">
 			<TopBar>
 				<DashboardButton />
 			</TopBar>
diff --git a/apps/web/src/components/conversation/composer/clarification-composer-flow.tsx b/apps/web/src/components/conversation/composer/clarification-composer-flow.tsx
@@ -71,6 +71,9 @@ export type ClarificationQuestionBlockProps = {
 	inputMode: NonNullable<
 		Parameters<typeof KnowledgeClarificationQuestionContent>[0]["inputMode"]
 	>;
+	autoFocus?: Parameters<
+		typeof KnowledgeClarificationQuestionContent
+	>[0]["autoFocus"];
 	selectedAnswer: string | null;
 	freeAnswer: string;
 	isOtherSelected: boolean;
@@ -244,6 +247,7 @@ export function ClarificationQuestionBlock({
 	question,
 	suggestedAnswers,
 	inputMode,
+	autoFocus,
 	selectedAnswer,
 	freeAnswer,
 	isOtherSelected,
@@ -257,6 +261,7 @@ export function ClarificationQuestionBlock({
 		<ComposerCentralBlock key="question">
 			<div className="p-3" data-clarification-slot="question-flow">
 				<KnowledgeClarificationQuestionContent
+					autoFocus={autoFocus}
 					freeAnswer={freeAnswer}
 					getSuggestedAnswerButtonRef={getSuggestedAnswerButtonRef}
 					inputMode={inputMode}
diff --git a/apps/web/src/components/conversation/composer/composer-central-block.tsx b/apps/web/src/components/conversation/composer/composer-central-block.tsx
@@ -34,6 +34,7 @@ type ComposerCentralBlockProps = {
 type ComposerDefaultCentralBlockProps = {
 	className?: string;
 	value: string;
+	autoFocus?: boolean;
 	textareaOverlay?: ReactNode;
 	disabled: boolean;
 	error?: Error | null;
@@ -75,6 +76,7 @@ type ComposerFileAttachmentsProps = {
 };
 
 type ComposerEditorProps = {
+	autoFocus: boolean;
 	className?: string;
 	disabled: boolean;
 	isPrivate: boolean;
@@ -204,6 +206,7 @@ function ComposerFileAttachments({
 }
 
 function ComposerEditor({
+	autoFocus,
 	className,
 	disabled,
 	isPrivate,
@@ -254,7 +257,7 @@ function ComposerEditor({
 			<textarea
 				aria-describedby={error ? "multimodal-input-error" : undefined}
 				aria-invalid={error ? "true" : undefined}
-				autoFocus
+				autoFocus={autoFocus}
 				className={cn(
 					"flex-1 resize-none bg-transparent placeholder:text-primary/50 focus-visible:outline-none",
 					COMPOSER_EDITOR_SURFACE_CLASS_NAME,
@@ -412,6 +415,7 @@ export function ComposerCentralBlock({
 export function ComposerDefaultCentralBlock({
 	className,
 	value,
+	autoFocus = true,
 	textareaOverlay,
 	disabled,
 	error,
@@ -471,6 +475,7 @@ export function ComposerDefaultCentralBlock({
 							onVisibilityChange={onVisibilityChange}
 						/>
 						<ComposerEditor
+							autoFocus={autoFocus}
 							className={className}
 							disabled={disabled}
 							error={error}
diff --git a/apps/web/src/components/conversation/composer/index.test.tsx b/apps/web/src/components/conversation/composer/index.test.tsx
@@ -112,6 +112,21 @@ describe("Composer", () => {
 		expect(html).toContain('data-composer-layout-mode="inline"');
 	});
 
+	it("lets callers disable textarea autofocus when a demo should stay passive", async () => {
+		const { Composer } = await composerModulePromise;
+
+		const html = renderToStaticMarkup(
+			React.createElement(Composer, {
+				autoFocus: false,
+				onChange: () => {},
+				onSubmit: () => {},
+				value: "",
+			})
+		);
+
+		expect(html).not.toContain("autofocus");
+	});
+
 	it("highlights the frame as soon as any custom slot is present", async () => {
 		const { Composer } = await composerModulePromise;
 
diff --git a/apps/web/src/components/conversation/composer/index.tsx b/apps/web/src/components/conversation/composer/index.tsx
@@ -52,6 +52,7 @@ export type ComposerProps = {
 	textareaOverlay?: React.ReactNode;
 	escalationAction?: ComposerEscalationActionProps | null;
 	value: string;
+	autoFocus?: boolean;
 	onChange: (value: string) => void;
 	onSubmit: () => void;
 	onFileSelect?: (files: File[]) => void;
@@ -90,6 +91,7 @@ export const Composer: React.FC<ComposerProps> = ({
 	textareaOverlay,
 	escalationAction = null,
 	value,
+	autoFocus = true,
 	onChange,
 	onSubmit,
 	onFileSelect,
@@ -257,6 +259,7 @@ export const Composer: React.FC<ComposerProps> = ({
 		) : (
 			<ComposerDefaultCentralBlock
 				allowedFileTypes={allowedFileTypes}
+				autoFocus={autoFocus}
 				canSubmit={canSubmit}
 				className={className}
 				disabled={disabled}
diff --git a/apps/web/src/components/knowledge-clarification/question-flow.test.tsx b/apps/web/src/components/knowledge-clarification/question-flow.test.tsx
@@ -139,6 +139,7 @@ describe("KnowledgeClarificationQuestionContent", () => {
 		expect(html).toContain(
 			'placeholder="Describe how this workflow or rule works today..."'
 		);
+		expect(html).toContain("autofocus");
 		expect(html).not.toContain(">4.<");
 	});
 
diff --git a/apps/web/src/components/knowledge-clarification/question-flow.tsx b/apps/web/src/components/knowledge-clarification/question-flow.tsx
@@ -63,6 +63,7 @@ export type KnowledgeClarificationQuestionContentProps = {
 	question: string;
 	suggestedAnswers: [string, string, string] | string[];
 	inputMode?: KnowledgeClarificationQuestionInputMode;
+	autoFocus?: boolean;
 	selectedAnswer: string | null;
 	freeAnswer: string;
 	isOtherSelected: boolean;
@@ -116,6 +117,7 @@ export function KnowledgeClarificationQuestionContent({
 	question,
 	suggestedAnswers,
 	inputMode = "suggested_answers",
+	autoFocus = true,
 	selectedAnswer,
 	freeAnswer,
 	isOtherSelected,
@@ -168,7 +170,7 @@ export function KnowledgeClarificationQuestionContent({
 						</label>
 						<Textarea
 							aria-label="Describe how it works today"
-							autoFocus
+							autoFocus={autoFocus}
 							className={cn(
 								"min-h-28 w-full resize-y border-0 bg-transparent px-0 text-sm shadow-none focus-visible:ring-0 dark:bg-transparent",
 								textareaOverlay &&
diff --git a/apps/web/src/components/landing/fake-dashboard/index.tsx b/apps/web/src/components/landing/fake-dashboard/index.tsx
@@ -30,6 +30,7 @@ export function FakeDashboard({ className }: { className?: string }) {
 		threshold: 0.1,
 		rootMargin: "50px",
 	});
+	const isAnimationActive = isVisible && isPlaying;
 
 	useEffect(() => {
 		if (!isVisible && isPlaying) {
@@ -74,14 +75,14 @@ export function FakeDashboard({ className }: { className?: string }) {
 	}, []);
 
 	const inboxHook = useFakeInbox({
-		isPlaying: isPlaying && currentView === "inbox",
+		isPlaying: isAnimationActive && currentView === "inbox",
 		onComplete: undefined,
 		onShowMouseCursor:
 			currentView === "inbox" ? handleShowInboxMouseCursor : undefined,
 	});
 
 	const conversationHook = useFakeConversation({
-		isPlaying: isPlaying && currentView === "conversation",
+		isPlaying: isAnimationActive && currentView === "conversation",
 		onComplete:
 			currentView === "conversation" ? onAnimationComplete : undefined,
 		onConversationHandled: inboxHook.markConversationHandledByHuman,
diff --git a/apps/web/src/components/landing/fake-support-widget/index.tsx b/apps/web/src/components/landing/fake-support-widget/index.tsx
@@ -182,6 +182,7 @@ export function FakeSupportWidget({ className }: { className?: string }) {
 		threshold: 0.1,
 		rootMargin: "50px",
 	});
+	const isAnimationActive = isVisible && isPlaying;
 
 	// Reset to a paused baseline so the animation starts only after entering view.
 	useEffect(() => {
@@ -270,14 +271,14 @@ export function FakeSupportWidget({ className }: { className?: string }) {
 	);
 
 	const homeHook = useFakeSupportWidgetHome({
-		isPlaying: isPlaying && currentView === "home",
+		isPlaying: isAnimationActive && currentView === "home",
 		onComplete: undefined, // Don't complete on home - mouse click handles transition
 		onShowMouseCursor:
 			currentView === "home" ? handleShowMouseCursor : undefined,
 	});
 
 	const conversationHook = useFakeSupportWidgetConversation({
-		isPlaying: isPlaying && currentView === "conversation",
+		isPlaying: isAnimationActive && currentView === "conversation",
 		onComplete:
 			currentView === "conversation" ? onAnimationComplete : undefined,
 	});
diff --git a/apps/web/src/components/ui/background.tsx b/apps/web/src/components/ui/background.tsx
@@ -793,6 +793,11 @@ export function Background({
 				return;
 			}
 
+			if (!isVisible) {
+				stopLoop();
+				return;
+			}
+
 			const animate = shouldAnimateBackground({
 				documentVisible: isDocumentVisible,
 				isVisible,
@@ -870,7 +875,9 @@ export function Background({
 				devicePixelRatio
 			);
 			allocateBuffers();
-			renderFrame(lastElapsedMs);
+			if (isVisible) {
+				renderFrame(lastElapsedMs);
+			}
 			syncLoop();
 		};
 
@@ -1049,11 +1056,14 @@ export function Background({
 			intersectionObserver.observe(container);
 		} else {
 			isVisible = true;
+			syncLoop();
 		}
 
 		const rootObserver = new MutationObserver(() => {
 			updatePalette();
-			renderFrame(lastElapsedMs);
+			if (isVisible) {
+				renderFrame(lastElapsedMs);
+			}
 		});
 		rootObserver.observe(document.documentElement, {
 			attributeFilter: ["class", "style"],
diff --git a/apps/web/src/hooks/use-viewport-visibility.test.tsx b/apps/web/src/hooks/use-viewport-visibility.test.tsx
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "bun:test";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { useViewportVisibility } from "./use-viewport-visibility";
+
+function VisibilityHarness({
+	initialVisibility,
+}: {
+	initialVisibility?: boolean;
+}) {
+	const [_ref, isVisible] = useViewportVisibility({
+		initialVisibility,
+	});
+
+	return <div data-visibility={isVisible ? "visible" : "hidden"} />;
+}
+
+describe("useViewportVisibility", () => {
+	it("starts hidden by default so below-the-fold demos stay idle on mount", () => {
+		const html = renderToStaticMarkup(
+			<React.StrictMode>
+				<VisibilityHarness />
+			</React.StrictMode>
+		);
+
+		expect(html).toContain('data-visibility="hidden"');
+	});
+
+	it("supports opting into an initially visible state when needed", () => {
+		const html = renderToStaticMarkup(
+			<React.StrictMode>
+				<VisibilityHarness initialVisibility={true} />
+			</React.StrictMode>
+		);
+
+		expect(html).toContain('data-visibility="visible"');
+	});
+});
diff --git a/apps/web/src/hooks/use-viewport-visibility.ts b/apps/web/src/hooks/use-viewport-visibility.ts

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export const Install = () => (`
`21`	`21`	`</div>`
`22`	`22`	`<div`
`23`	`23`	`className={cn(`
`24`		`- "relative flex flex-col justify-center gap-4 px-4 py-16 lg:w-1/2 lg:border-r lg:px-8 xl:px-12"`
	`24`	`+ "relative flex flex-col justify-center gap-4 px-4 py-16 lg:w-1/2 lg:px-8 xl:px-12"`
`25`	`25`	`)}`
`26`	`26`	`>`
`27`	`27`	`<p className="font-mono text-primary/70 text-xs">`